Understanding Web Sites

Understanding Web Sites

What is a Web Site • A collection of Web pages which you can view on the Internet • Contains text, graphics, sound, and video to create a visual presentation of an idea

What is the language? • Hypertext Markup Language (HTML) is the text markup language currently used on the World Wide Web. • HTML is used to tell the web browser how to display the web page. • HTML elements are embedded instructions that indicate how a web browser should structure or present the document.

What is the language? • HTML elements consist of: • A pair of angle-bracketed tags surrounding some text. • The end tag (</tag>) is just like the start tag (<tag>), except that it has a slash (/) in it. • Example: <I> This is interesting.</I> A web browser would render the phrase “This is interesting” in italics

COMMON HTML TAGS • <HTML> tells a web browser that this is an HTML document. Must be in every Web page • <HTML> is used at the start of every HTML file • <HEAD> Instructs the Web browser that the section surrounded by <HEAD> is the “header”, or top part, of the Web page • Example: The <HEAD> area always ends with a </HEAD>tag. • <TITLE> This is the title for the page and is shown at the top of the Web browser. • Example: <TITLE> A same Web page</TITLE>

COMMON HTML TAGS • <BODY> Indicates the start of the information that makes up the document. • <BODY> surrounds the rest of the information that makes up the Web page.</BODY> • <blink> The text surrounded by this tag blinks on and off. • <blink> This text is flashing.</blink>

COMMON HTML TAGS • <center> Center the text or item surrounded by this tag on the page. • <center> This text is centered.</center> • <H1> Show the text surrounded by this tag is the large “headline 1 font.” • <H1> This text appears in great big letters.</H1>

COMMON HTML TAGS • <H2> Show the text surrounded by this tag in the smaller “headline 2 font”. • <H2> This text appears somewhat smaller than the previous sentence.</H2> • <P> Start a new paragraph • <P> The text right after the P tag shows up as a new paragraph.</P>

COMMON HTML TAGS • <B> Bold the text. • <B> This text is bolded. </B> • <I> Italicize the text. • <I> This text is italicized.</I>

Home Page First page of a site Contains general information Hyperlinks that connect the home page to other pages that make up the site Other internal pages Hyperlink Text or image that is coded to connect one web page to another Clicking a link takes you to a new page with related information, another web site, or an e-mail message window What does it contain?

Designing a Web Site • Create an outline • List of elements to place on each page • Information you might want on page • Title • Introductory paragraph • Contact information • Links to other sites and other pages • Graphic images • Success stories or testimonials

Designing a Web Site • How many pages? • As many as you need • Each page should be linked to the Home Page • Easy for reader to jump from page to page

Designing a Web Site • Add links to other sites • Add graphics, backgrounds and design elements • Clipart • Pictures • Publisher gallery provides over 300 animated GIFs (images with movement) • Additional buttons • Objects toolbar • Web Site Options task pane

Designing a Web Site • Examine your page • Check spelling, navigation, etc. • Preview the Web site and test the links • Make sure links work

Creating a Web Site Using Publications by Wizard • To create a Web site • 1.On the File menu, click New. • 2.Click the Publications by Wizard tab. • 3.Click Web Sites and then click School Web Site. • 4.Click Start Wizard. • 5.Read the introduction and then click Next. • 6.In Color Scheme, click Mist and then click Next.

Creating a Web Site Using Publications by Wizard • 7.On Additional Pages, click Story, click Calendar, click Event, and then click Next. • 8.Under form, click Response Form and then click Next. • 9.On the Navigation Bar, click Just a vertical bar and then click Next. • 10.On Background Sound, click No and then click Next.

Creating a Web Site Using Publications by Wizard • 11.On Background Texture, click Yes and then click Next. • 12.On Personal Information, click Other Organization and then click Finish. • 13.Save the file.

Adding Pages • 1.On the Status Bar, click the Page 4 icon. • 2.On the Web Site Wizard in the left pane, click Insert Page. • 3.On the lower-left pane, click Insert Page. The Insert Page dialog box appears. • 4.On Available Page Types drop-down box, scroll down and click Related Links, and then click OK. Publisher 2000 inserts this new page after the page you've selected.

To replace text • 1.On the Status Bar, click the Page 1 icon. • 2.Click the Home Page Title text frame and type the title you want for your Web site. • 3.Click the other text frames and insert a text file or replace the text with text you've written for the Web site. On the following pages, continue to replace text with your new material. • 4.On the File menu, click Save to save the changes you made.

Calendar Creation Wizard • 1.On the Status Bar, click the Page 3 icon at the bottom of the Publisher window to go to the calendar page. • 2.Click anywhere on the calendar. • 3.Click the Wizard wand. • 4.Under Design, click Bars. • 5.Click Dates. • 6.Click Change Dates. • 7.Select a month from the Start Date field. • 8.Select a year using the arrows.

Calendar Creation Wizard • 9. In the Schedule of Events frames, click the first occurrence of the word date and type October 23. • 10. Click the text to the right of the date and type Keiko fundraiser. • 11. Add other dates and additional text to fill out the calendar. • On the File menu, click Save to save the changes you made.

To add speakers and topics • 1.On the Status Bar, click the Page 4 icon. • 2.Click the Seminar Event or Title text frame and type Keiko Fundraiser. • 3.Click the Business Name text frame and type your school name. • 4.Click the Seminar or Event Title text frame and type Keiko Fundraiser. • 5.Continue to replace the text on the page with text applicable to your event. • On the File menu, click Save to save the changes you have made.

To insert a survey page • 1.On the Status Bar, click the Page 5 icon. • 2.Click the Form Page Title text frame and typeKeiko the Killer Whale. • 3.Click the Briefly describe your desired feedback. • 4.Click the First Question text frame and type your first question. • 5.Click the Answer text frames and type in the answers from which you want the respondents to choose. • On the File menu, click Save to save the changes you made.

To change the design and color scheme • 1.On the Status Bar, click the Page 1 icon. • 2.On the Web Site Wizard pane, click Design. • 3.Under Design, click Arcs. • 4.Under Web Site Wizard, click Color Scheme and then click Mountain.

To link to other pages within your Web site • 1.On the Status Bar, click the Page 1 icon. • 2.Click the picture on this page. • 3.On the Insert menu, click Hyperlink. • 4.In the Create a Hyperlink to field, click Another Page in Your Web Site. • 5.Click Specific Page and then click the down arrow until you get to the number 5. • 6.Click OK.

To link to other Web sites • 1.On the Status Bar, click to the Directory of Related Links page. • 2.On the Objects toolbar (vertical toolbar), click the Hot Spot Tool. • 3.On the first Web site name and address text frame, position the mouse pointer where you want the upper-left edge of the link to be and then drag the mouse diagonally down to the right to create the hot spot. • 4.In the Hyperlink dialog box, click A Web Site or File on the Internet.

To link to other Web sites • 5. In the Internet address of the Web site or file drop-down box, type the address of the site to which you want to link.-Or-Click Favorites to browse through your Favorites folder to find a Web address. • 6. Click OK. • 7. Follow steps 1 through 6 to create additional links. • 8. On the File menu, click Save to save the changes you made.

To view your Web site • 1.On the File menu, click Web Page Preview. • 2.Click Web Site to preview the pages in your Web site and then click OK. You should now be viewing the Web site with a browser. • 3.Click the clip art on page 1 to jump to page 5. • 4.Click the Calendar link on the left to jump to the Calendar.

To view your Web site • 5.Click the Form link on the left to jump to the Survey. • 6.In your Web browser, click Back to return to the previous page. • 7.On the File menu, click Close to exit the browser. • 8.To exit Publisher, click Exit on the File menu.

Creating Web site from Scratch • 1.Click New on the File menu. • 2.Click the Blank Publications tab in the Publisher Catalog. • 3.In the left pane, click Web Page. • 4.Click Create. • You now have a single blank Web page. • You can add pages using the Insert menu, Page command.

Creating Web site from Scratch • Add text, graphics, and hyperlinks (see Making the Most of Hyperlinks in Publisher 2000) to your pages. • Save your Web site in Publisher as a .pub file, so that you can maintain it in Publisher. (See Maintaining Your Publisher 2000 Web Site.) Although you used Publisher to create .html pages, you can't open or edit an HTML file with it. You can only edit the .pub file version of the Web site.

Creating Web site from Scratch • Publish your Web site • (see Publishing Your Publisher 2000 Web Site) to the Internet, an intranet, or to your hard disk, and then test it using both the Design Checker in Publisher and by viewing the Web site on one or more browser

Microsoft Help! • http://office.microsoft.com/assistance/2000/PubWStru.aspx • http://office.microsoft.com/Assistance/2000/PubWPlan.aspx • http://office.microsoft.com/Assistance/2000/PubWPst.aspx • http://office.microsoft.com/Assistance/2000/PubWThumb.aspx • http://office.microsoft.com/Assistance/2000/PubWMain.aspx • http://office.microsoft.com/Assistance/2000/PubWLcol.aspx • http://office.microsoft.com/Assistance/2000/PubWCrea.aspx • http://office.microsoft.com/Assistance/2000/PubWOvrv.aspx • www.webmonkey.com

Understanding Web Sites