1 / 28

Tutorial 1 Using HTML Tags to Create Web Pages

Tutorial 1 Using HTML Tags to Create Web Pages. Objectives. Describe the Internet and the World Wide Web Identify and use tags on a Web page Document HTML code using comments Save a text document as an HTML file Specify headings Format Web page text. Objectives.

pearly
Download Presentation

Tutorial 1 Using HTML Tags to Create Web Pages

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. Tutorial 1Using HTML Tags to Create Web Pages

  2. Objectives • Describe the Internet and the World Wide Web • Identify and use tags on a Web page • Document HTML code using comments • Save a text document as an HTML file • Specify headings • Format Web page text New Perspectives on Blended HTML, XHTML, and CSS

  3. Objectives • Identify deprecated tags • Insert special characters, superscripts, and subscripts • Insert a scaled image • Create a horizontal rule • Create ordered and unordered lists • Format address text New Perspectives on Blended HTML, XHTML, and CSS

  4. Understanding the Internet and the World Wide Web • The Internet is a global network of computers linked by high-speed data lines and wireless systems • The World Wide Web (Web or WWW for short) is just one of several services provided by the Internet, which consists of a system of interconnected networks • To display a Web page in a browser, the text and graphics on the Web page must be formatted using Hypertext Markup Language (HTML) New Perspectives on Blended HTML, XHTML, and CSS

  5. Understanding the Internet and the World Wide Web • Hypertext is a way to organize information so that you can click links to jump from one piece of information to another • Markup refers to the symbols that indicate how the text or images should be displayed in a browser New Perspectives on Blended HTML, XHTML, and CSS

  6. Understanding the Internet and the World Wide Web New Perspectives on Blended HTML, XHTML, and CSS

  7. Understanding the Internet and the World Wide Web New Perspectives on Blended HTML, XHTML, and CSS

  8. Entering HTML Tags • To enter an element with a start tag and an end tag, use the following format:<tag>content</tag> • To enter an empty element, use the following format: content<tag /> • To nest tags, use the following format:<tag1><tag2>content</tag2></tag1> New Perspectives on Blended HTML, XHTML, and CSS

  9. Entering HTML Tags New Perspectives on Blended HTML, XHTML, and CSS

  10. Including Comments in an HTML Document • On a new blank line in an HTML document, type the start code for a comment: <!-- • Type the comment • Type the end code for a comment: --> • Press the Enter key New Perspectives on Blended HTML, XHTML, and CSS

  11. Using the Heading Tags New Perspectives on Blended HTML, XHTML, and CSS

  12. Displaying a Web Page in a Browser • Create and save an HTML document • Start your Web browser, and then use the browser’s tools to open the HTML document • After changing the HTML document, open it in the browser again or refresh the page in the browser New Perspectives on Blended HTML, XHTML, and CSS

  13. Entering Body Text with Paragraph Tags New Perspectives on Blended HTML, XHTML, and CSS

  14. Entering Body Text with Paragraph Tags New Perspectives on Blended HTML, XHTML, and CSS

  15. Inserting Logical and Physical Formatting Tags • Logical tags let the browser determine how to display the text in an HTML document • <strong></strong> • <em></em> • Physical tags emphatically state how text should be displayed; in this instance as either bold or italic text • <b></b> • <i></i> New Perspectives on Blended HTML, XHTML, and CSS

  16. Inserting Logical and Physical Formatting Tags New Perspectives on Blended HTML, XHTML, and CSS

  17. Using the Acronym and the Abbreviation Tags • To display a ScreenTip defining an acronym, use the <acronym> tag with a title attribute, as follows: <acronym title="acronym definition">ACRONYM</acronym> • To display a ScreenTip showing the complete form of an abbreviation, use the <abbr> tag with a title attribute, as follows: <abbr title="complete word or phrase">Abbreviation</abbr> New Perspectives on Blended HTML, XHTML, and CSS

  18. Using the Acronym and the Abbreviation Tags New Perspectives on Blended HTML, XHTML, and CSS

  19. Inserting Special Characters • Some characters in HTML cannot be created by using the keyboard • Special characters New Perspectives on Blended HTML, XHTML, and CSS

  20. Tips for Typing HTML Code in a Text Editor • Type all code in lowercase • List codes separately as much as possible • Use white space • Insert a break code at the beginning of a line, not after it • Enter code between start and end tags • Don’t use deprecated tags • Format terminal punctuation properly • Beware of quotation marks from pasted text New Perspectives on Blended HTML, XHTML, and CSS

  21. Using Images on a Web Page • GIF and JPEG formats • Copying an Image from a Web Page • On a Web page, right-click the image you want to copy, and then click Save Picture As (or a similar command) on the shortcut menu • Change the filename—but not the extension—if necessary • Navigate to where you want to save the image file, and then click the Save button New Perspectives on Blended HTML, XHTML, and CSS

  22. Using the Image Tag • You use the image tag <img> to insert an image on a Web page <imgsrc="Bottles.jpg" alt="image of soda bottles“ /> New Perspectives on Blended HTML, XHTML, and CSS

  23. Using the Image Tag New Perspectives on Blended HTML, XHTML, and CSS

  24. Creating Horizontal Rules • Horizontal rules are lines that are used to visually divide a page into sections • <hr /> New Perspectives on Blended HTML, XHTML, and CSS

  25. Creating Unordered and Ordered Lists • You can use HTML to create unordered lists (a bulleted list) and ordered lists (lists with numbers or letters) New Perspectives on Blended HTML, XHTML, and CSS

  26. Using the Address Tags • You use the <address> </address> tags to produce italicized text New Perspectives on Blended HTML, XHTML, and CSS

  27. Working with Search Engines • When you view the source code for an HTML page, you often see one or more <meta> • tags within the <head> </head> tags • One use of <meta> tags is that they can help search engines, such as Google, find your site on the Web based on the keywords you have coded within the <meta> tags on the home page New Perspectives on Blended HTML, XHTML, and CSS

  28. Receiving an HTML File as an E-Mail Attachment • If you receive an HTML file as an e-mail attachment, save the attached file locally to your hard drive, desktop, or flash drive, then open the file in Notepad and view the source code New Perspectives on Blended HTML, XHTML, and CSS

More Related