1 / 23

Web Site Development

Web Site Development. Lesson 2 — Formatting and Linking Web Site Pages. Objectives. Explain how Web sites are structured. Center text. Add horizontal lines to a Web page. Change font face. Apply consistent look and feel to a Web site. Objectives (continued).

Download Presentation

Web Site Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Web Site Development Lesson 2 — Formatting and Linking Web Site Pages

  2. Objectives • Explain how Web sites are structured. • Center text. • Add horizontal lines to a Web page. • Change font face. • Apply consistent look and feel to a Web site. Lesson 2 – Formatting and Linking Web Site Pages

  3. Objectives (continued) • Create hyperlinks on Web pages. • Create a bulleted (unordered) list. • Create a numbered (ordered) list. • Create multiple pages for a Web site. Lesson 2 – Formatting and Linking Web Site Pages

  4. How Web Sites Are Structured • When two or more Web pages are linked together, they form a Web site. • Web sites are usually built using three basic structures: • Linear – The user views pages one at a time in a specific sequence. • Random access – Contains multiple inter-related pages that do not need to be viewed in order. • Hierarchical – Resembles an inverted tree and is good for data that falls into categories and sub-categories. • A Web site can consist of multiple structure types. Lesson 2 – Formatting and Linking Web Site Pages

  5. Examples of Web Site Structures These figures illustrate the three basic Web site structure types. Linear Random access Hierarchical Lesson 2 – Formatting and Linking Web Site Pages

  6. Center Text on a Web Page Web pages can be formatted using text alignment commands. Text can be left, right, or center aligned. The figure on the left shows text with the default left alignment. By inserting the HTML <CENTER>…</CENTER> tag pair, the text can be aligned in the center of the page as shown on the right. Lesson 2 – Formatting and Linking Web Site Pages

  7. Add Horizontal Lines The figure below shows the previous Web page with two horizontal lines, or rules, added to the page. The lines are used to organize sections of text, which can make it easier for a viewer to find the section that they are looking for. The <HR> tag is used to add horizontal rules to a Web page. Horizontal rules Lesson 2 – Formatting and Linking Web Site Pages

  8. Change Font Face • A font is a set of characters in a specific design. • There are two basic types of fonts: • Serif fonts have small lines or strokes at the end of each character. • Sans serif fonts do not have the strokes. • The HTML <FONT FACE=“face”> tag is used to specify a specific font for the text that follows the tag. • You can also list multiple fonts following the FACE= attribute that the browser can choose from when the page is loaded to a computer that does not have the main font installed. Lesson 2 – Formatting and Linking Web Site Pages

  9. Serif Versus Sans Serif Fonts This figure illustrates the difference between serif and sans serif fonts. Note the small lines at the end of each character for the serif font Georgia. Other serif fonts include Times and Times New Roman. Other sans serif fonts include Helvetica and Tahoma. Lesson 2 – Formatting and Linking Web Site Pages

  10. Apply a Consistent Look and Feel to Your Web Pages • An important part of designing a Web site is to make sure the user knows that they are still on the same site when they go from page to page. • You create a consistent look and feel to accomplish this with formatting options, including • Using consistent text formatting among the various pages in the site. • Using the same design elements on all pages. • This includes the use of lines and graphic images designed to let the user know that it is the same site as the previous page. Lesson 2 – Formatting and Linking Web Site Pages

  11. Example of HTML Design Elements This figure shows a Web page with some font formatting applied. The topics listed between the two horizontal rules will eventually be used to link the viewer to other sections of the Web site. Lesson 2 – Formatting and Linking Web Site Pages

  12. Create Hyperlinks on Web Pages • Hyperlinks are used on Web pages to jump a viewer to some other section of the same page or a different Web page. • They usually appear different than the rest of the text. • They typically appear in a different color and are underlined. • A well designed Web site includes links from the home page to all other pages in the site. • There should also be a link on each page back to the home page of the site. Lesson 2 – Formatting and Linking Web Site Pages

  13. Create a Link from the Home Page to Other Pages • Hyperlinks are created using the HTML anchor tag, <A>. • The tag has an HREF= attribute used to identify the page being linked to and the text to use for the hyperlink. • For example: • <A HREF=“page2.html”>Go to Page 2</A> • page2.html is the page being linked to. • “Go to Page 2” is the text that will be colored and underlined in the Web page as the link. Lesson 2 – Formatting and Linking Web Site Pages

  14. Example of a Hyperlink This figure shows that a hyperlink has been created for the Graphics Interchange Format topic. Note that it is underlined and in a different color than the rest of the text on the page. Hyperlink Lesson 2 – Formatting and Linking Web Site Pages

  15. Create a Hyperlink from a Web Page to the Home (Index) Page This figure shows the topic that was linked to on the previous slide, the Graphics Interchange Format topic. Note the word “Menu” below the topic. This is a link back to the menu at the top of the main page of the site. Always include a link back to the page you linked from or to the home page. Link to Home page Lesson 2 – Formatting and Linking Web Site Pages

  16. Create Lists on Web Pages • A list can improve the appearance and organization of a Web page. • You can create a list using bullets or numbers to denote each item in the list. • A bulleted list shows items in no particular order. • A numbered list implies there is some order to the list items. • Items are added to a list using the <LI> HTML command. • This tag does not require a closing tag. Lesson 2 – Formatting and Linking Web Site Pages

  17. Create a Bulleted List This figure shows a Web page with a bulleted list. A bulleted list is called an unordered list and is added using the <UL>…</UL> tag pair. Lesson 2 – Formatting and Linking Web Site Pages

  18. Create a Numbered List This figure shows the same list now formatted as a numbered or ordered list. This list is created using the <OL>…</OL> HTML tag pair. Lesson 2 – Formatting and Linking Web Site Pages

  19. Add Multiple Pages to a Web Site • You can add new pages using the design of an existing page. • Open an existing page, save it under a new name, and change the text for the new information, but leave the formatting elements unchanged. • After all pages are created, add hyperlinks to each page from your home page menu. • The links back to the home page will already be set on the other pages if you used an existing page to create the new pages. Lesson 2 – Formatting and Linking Web Site Pages

  20. Examples of New Pages Using an Existing Page Design These two pages were both created using the Graphics Interchange Format page seen earlier. New text was entered specific to the topic being covered, but all other formatting stayed the same, including the link back to the main menu. Lesson 2 – Formatting and Linking Web Site Pages

  21. A Completed Menu After all pages are created, add the hyperlinks to each page to the menu on the main or home page, as shown here. Clicking any one of these links will jump to that page, and that page has a link to return to this page. Lesson 2 – Formatting and Linking Web Site Pages

  22. Summary • Web sites usually have one of three structures: linear, hierarchical, or random. • Center text to vary the location of information on a Web page. • Horizontal lines help to organize information on Web pages. • You can change the font face to either a serif or sans serif font. Use multiple fonts with the FACE attribute to make sure the browser displays text properly. Lesson 2 – Formatting and Linking Web Site Pages

  23. Summary (continued) • Hyperlinks are created using anchor tags. You must insert a reference to the page that you want to open when the link is clicked. • Bulleted (unordered) lists are for items that do not have to be in a specific order. • Numbered (ordered) lists are for items that require a specific order. • You can apply basic principles of “look and feel” to all pages in a Web site. • You can create multiple pages for a Web site and then link them to the site’s index page. Lesson 2 – Formatting and Linking Web Site Pages

More Related