introductory tutorial 1 using html tags to create web pages
TRANSCRIPT
INTRODUCTORY
Tutorial 1
Using HTML Tags to Create Web Pages
XP
New Perspectives on Blended HTML, XHTML, and CSS 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
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
3
XP
New Perspectives on Blended HTML, XHTML, and CSS
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)
4
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
5
XP
New Perspectives on Blended HTML, XHTML, and CSS
Understanding the Internet and the World Wide Web
6
XP
New Perspectives on Blended HTML, XHTML, and CSS
Understanding the Internet and the World Wide Web
7
XP
New Perspectives on Blended HTML, XHTML, and CSS
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>
8
XP
New Perspectives on Blended HTML, XHTML, and CSS
Entering HTML Tags
9
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
10
XP
New Perspectives on Blended HTML, XHTML, and CSS
Using the Heading Tags
11
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
12
XP
New Perspectives on Blended HTML, XHTML, and CSS
Entering Body Text with Paragraph Tags
13
XP
New Perspectives on Blended HTML, XHTML, and CSS
Entering Body Text with Paragraph Tags
14
XP
New Perspectives on Blended HTML, XHTML, and CSS
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>
15
XP
New Perspectives on Blended HTML, XHTML, and CSS
Inserting Logical and Physical Formatting Tags
16
XP
New Perspectives on Blended HTML, XHTML, and CSS
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>
17
XP
New Perspectives on Blended HTML, XHTML, and CSS
Using the Acronym and the Abbreviation Tags
18
XP
New Perspectives on Blended HTML, XHTML, and CSS
Inserting Special Characters• Some characters in HTML cannot be created by
using the keyboard– Special characters
19
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
20
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
21
XP
New Perspectives on Blended HTML, XHTML, and CSS
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“ />
22
XP
New Perspectives on Blended HTML, XHTML, and CSS
Using the Image Tag
23
XP
New Perspectives on Blended HTML, XHTML, and CSS
Creating Horizontal Rules• Horizontal rules are lines that are used to
visually divide a page into sections– <hr />
24
XP
New Perspectives on Blended HTML, XHTML, and CSS
Creating Unordered and Ordered Lists• You can use HTML to create unordered lists (a
bulleted list) and ordered lists (lists with numbers or letters)
25
XP
New Perspectives on Blended HTML, XHTML, and CSS
Using the Address Tags• You use the <address> </address> tags to
produce italicized text
26
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
27
XP
New Perspectives on Blended HTML, XHTML, and CSS
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
28