1 / 30

Lesson 16 Creating a Web Page

Lesson 16 Creating a Web Page. Computer Concepts BASICS 4 th Edition. Wells. Objectives. Understand how a Web page works Create a planning document Understand and describe basic HTML syntax Insert headings Apply bold and italics. 2. Objectives (continued). Insert and work with lists

shad-schroeder
Download Presentation

Lesson 16 Creating a Web Page

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. Lesson 16Creating a Web Page Computer Concepts BASICS 4th Edition Wells

  2. Objectives Understand how a Web page works Create a planning document Understand and describe basic HTML syntax Insert headings Apply bold and italics 2

  3. Objectives (continued) Insert and work with lists Add links Add graphics Publish a Web page 3 3

  4. Vocabulary absolute link attribute background body Cascading Style Sheets character entities e-mail link headings home page images 4

  5. Vocabulary (continued) lists mobile browser relative link style sheet title Web site 5 5

  6. How a Web Page Works A Web site is a group of related Web pages Web page authoring programs create the underlying HTML code for the Web pages Web page: Plain text document on a server connected to the World Wide Web HTML: Series of tags integrated into a text document that describe how the text should be formatted on a browser screen 6

  7. How a Web Page Works (continued) Web browser: An application that interprets HTML tags and then displays the Web page on the screen Mobile browser: Works with mobile devices Web server: Renders Web pages into a final form to be viewed in a Web browser The only tools needed to create a Web site is a Web browser and a text-editing program 7 7

  8. Planning a Document Web page planning elements: Title: The title, displayed in the browser’s title bar, should be relevant to the content of the page Page content: Determine content and features; cover one topic per page Links: A link is a graphic, line of text, or both that connects one Web page to another Closing comments: Determine if there will be closing comments included, i.e. an e-mail address so users can make contact 8 8

  9. A Basic Page An HTML page has two components—page content and HTML tags The page content is that part of the document that is displayed in the browser The main page or index page of most Web sites is referred to as the home page HTML tags are enclosed in brackets: <html>. The HTML tags define the structure and layout of the Web page. 9 9

  10. A Basic Page (continued) Most tags come in pairs with a start tag and an end tag Some tags can be a single entity—that is, they do not have to have an end tag Tags are not case sensitive, but it is best to select a format and stay with it Some tags can contain attributes, which are identifiers for the tag 10 10

  11. A Basic Page (continued) • Required HTML tags 11

  12. A Basic Page (continued) Following is an explanation of the tags: head: Contains information about the document that does not appear on the Web page when shown in a browser title: Defines the page’s official title and is displayed on the browser’s title bar body: All Web page content is contained between the start and end <body> tags 12 12

  13. Page Formatting HTML tags are used to start a new line and/or to leave spaces between lines Line Breaks: To start a new line but not leave a space between lines, use the break tag: <br> Paragraph Breaks: A second way to insert a blank line is with the paragraph tag: <p>. When the Web page is displayed in a browser, a paragraph tag shows a blank line between two paragraphs. 13 13

  14. Page Formatting (continued) Within HTML, three types of lists are available: Ordered list: This generally is a numbered list and requires a start <ol> and an end </ol> tag Unordered list: This generally is a bulleted list and requires a start <ul> and an end </ul> tag Definition list: This is a list of terms with indented definitions, generally used for glossary items or other definitions. This list requires a start tag <dl> and an end tag </dl> 14 14

  15. Page Formatting (continued) • HTML tags for list types 15

  16. Page Formatting (continued) Some of the text formatting tags are as follows: Bold: To bold text requires start <b> and end </b> tags. Text that is surrounded by these tags appears as bold in your browser. Italics: To display italicized text, use the start <i> and end </i> tags. Underline: To underline text, use the start <u> and end </u> tags. Center:Another way to organize text on the page is to use the <center> tag 16 16

  17. Page Formatting (continued) A style is a set of formatting characteristics that can be applied to text to change its appearance quickly HTML supports style sheets, also known as Cascading Style Sheets (CSS), which are a collection of formatting rules that control the appearance of content in a Web page Six levels of HTML headings are available. The start tag for the first level is <h1> and the end tag is </h1>. Level 1 is the largest and level 6 is the smallest. 17 17

  18. Page Formatting (continued) The font, font size, and font color can be changed. This is done through the start <font> and end </font> tags Most browsers support and display seven font or text sizes from 1 (smallest) to 7(largest). The default font size is 3. Changing the font color is accomplished by using the color attribute, for example: <font color = red> To change the font type, use the face attribute; for example: <font face = arial> 18 18

  19. Page Formatting (continued) • Font sizes displayed in a browser 19

  20. Page Formatting (continued) A defining feature of any Web page is its links or hyperlinks Links are active references to other parts of the same document or to other documents. Absolute links (also called external links) are links that give the full address to a Web page on the Internet These links use a fixed file location or Web address. 20 20

  21. Relative Links A relative link, also called an internal link, gives the file location in relation to the current document An e-maillink displays a blank e-mail form containing the recipient’s address 21 21

  22. Images Images (graphics) add life to a Web site GIF: The most commonly used file type. It stands for Graphic Interchange Format and is pronounced “jif.” JPG or JPEG: Best used for photo-quality images. JPEG stands for Joint Photographic Experts Group. PNG: Native to Adobe Fireworks and is not as widely used as GIF and JPEG. PNG stands for Portable Network Graphics. 22 22

  23. Images (continued) Three of the most popular <img> tags are as follows: src: This stands for source, and is mandatory alt: Use this attribute to provide alternative text align: Use this attribute to align the image on the page When the browser encounters the <img> tag, it knows to look for the src or source The image can be located in the same folder as the HTML document or a different folder or computer 23 23

  24. Character Entities Some characters have a special meaning in HTML, such as the less than sign (<) that defines the start of an HTML tag In order for the browser to display these characters, a user must insert character entities in the HTML document. A character entity has three parts: an ampersand (&), a # and an entity number, and a semicolon (;) You can use horizontal rules to separate blocks of text You can also use some type of graphical divider To show graphical bullets instead of standard bullets use the <img src> tag 24 24

  25. Backgrounds Generally, the browser determines the background color Many Web pages have color or an image for the background To add a background color, include the bgcolor attribute in the <body> tag To add a background image to a Web page, specify the image name within the <body> tag 25 25

  26. Publishing Your Web Page Several Web sites on the Internet offer free space to host a Web site. Two of the more popular of these are… Tripod, located at www.tripod. lycos.com Yahoo! GeoCities, located at geocities.yahoo.com/home/ 26 26

  27. Summary A Web page is a document on the World Wide Web and is defined by a unique URL. HTML is the language of the Web. A Web browser is an application program that interprets the HTML tags within the page and then displays the text on the computer screen. A basic Web page has both page content and HTML tags. Some tags come in pairs, and others are single entities. Every Web page requires a particular set of tags structured in a particular format. 27 27

  28. Summary (continued) • Pressing the Enter key when creating a Web page has no effect on how the page is displayed. • To start a new line in a Web page, use the break <br> tag. • To insert a blank line in a Web page, use the paragraph <p> tag. • HTML supports three types of lists that you can use to organize text on a Web page. • The <center> tag is used to center text or graphics. • HTML supports bold, italics, and underline text formatting. • HTML supports changing of font size and font color. 28

  29. Summary (continued) • Seven different font sizes are supported by most browsers. • Six levels of HTML headings are supported by most browsers. • A link is an active reference to another part of the same document or to another document. • A relative link gives the file location in relation to the current • document. • Absolute links are hyperlinks to other Web sites. 29

  30. Summary (continued) • One of the most common types of non-Web links is e-mail. • Three different image types are supported by browsers—GIF, JPEG or JPG, and PNG. • HTML supports the use of horizontal lines to separate blocks of text. • HTML supports adding a background color or image to a Web page. • Many Web sites provide free online space for publishing your Web page. 30

More Related