Web Chapter.01

Views:
 
Category: Education
     
 

Presentation Description

No description available.

Comments

Presentation Transcript

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