Tutorial 1Using HTML Tags to Create Web Pages : Tutorial 1Using HTML Tags to Create Web Pages
Objectives : New Perspectives on Blended HTML, XHTML, and CSS 22 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 : 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 33
Understanding the Internet and the World Wide Web : 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 44
Understanding the Internet and the World Wide Web : 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 55
Understanding the Internet and the World Wide Web : Understanding the Internet and the World Wide Web New Perspectives on Blended HTML, XHTML, and CSS 66
Understanding the Internet and the World Wide Web : Understanding the Internet and the World Wide Web New Perspectives on Blended HTML, XHTML, and CSS 77
Entering HTML Tags : 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 88
Entering HTML Tags : Entering HTML Tags New Perspectives on Blended HTML, XHTML, and CSS 99
Including Comments in an HTML Document : 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 1010
Using the Heading Tags : Using the Heading Tags New Perspectives on Blended HTML, XHTML, and CSS 1111
Displaying a Web Page in a Browser : 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 1212
Entering Body Text with Paragraph Tags : Entering Body Text with Paragraph Tags New Perspectives on Blended HTML, XHTML, and CSS 1313
Entering Body Text with Paragraph Tags : Entering Body Text with Paragraph Tags New Perspectives on Blended HTML, XHTML, and CSS 1414
Inserting Logical and Physical Formatting Tags : 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 1515
Inserting Logical and Physical Formatting Tags : Inserting Logical and Physical Formatting Tags New Perspectives on Blended HTML, XHTML, and CSS 1616 Using the Acronym and the Abbreviation Tags : 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 1717
Using the Acronym and the Abbreviation Tags : Using the Acronym and the Abbreviation Tags New Perspectives on Blended HTML, XHTML, and CSS 1818
Inserting Special Characters : Inserting Special Characters Some characters in HTML cannot be created by using the keyboard
Special characters New Perspectives on Blended HTML, XHTML, and CSS 1919
Tips for Typing HTML Code in a Text Editor : 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 2020
Using Images on a Web Page : 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 2121 Using the Image Tag : Using the Image Tag You use the image tag <img> to insert an image on a Web page
<img src="Bottles.jpg" alt="image of soda bottles“ /> New Perspectives on Blended HTML, XHTML, and CSS 2222
Using the Image Tag : Using the Image Tag New Perspectives on Blended HTML, XHTML, and CSS 2323
Creating Horizontal Rules : 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 2424
Creating Unordered and Ordered Lists : 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 2525 Using the Address Tags : Using the Address Tags You use the <address> </address> tags to produce italicized text New Perspectives on Blended HTML, XHTML, and CSS 2626
Working with Search Engines : 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 2727
Receiving an HTML File as an E-Mail Attachment : 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 2828