INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages

INTRODUCTORY

Tutorial 1

Using HTML Tags to Create Web Pages

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

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

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)

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

Understanding the Internet and the World Wide Web

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>

Entering HTML Tags

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

Using the Heading Tags

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

Entering Body Text with Paragraph Tags

Inserting Logical and Physical Formatting Tags• Logical tags let the browser determine how to

display the text in an HTML document– –

• Physical tags emphatically state how text should be displayed; in this instance as either bold or italic text– –

Inserting Logical and Physical Formatting 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>

Using the Acronym and the Abbreviation Tags

Inserting Special Characters• Some characters in HTML cannot be created by

using the keyboard– Special characters

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

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

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“ />

Using the Image Tag

Creating Horizontal Rules• Horizontal rules are lines that are used to

visually divide a page into sections– <hr />

Creating Unordered and Ordered Lists• You can use HTML to create unordered lists (a

bulleted list) and ordered lists (lists with numbers or letters)

Using the Address Tags• You use the <address> </address> tags to

produce italicized text

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

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

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages

Documents

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2

All About HTML Tags

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and

>> Introduction to HTML: Forms. Introduction to HTML 5 Important HTML Tags HTML tags and attributes Images Hyperlinks Lists –{ordered | unordered | definition}

Html tags slides 2016

Wilbur - HTML 3 · 1999. 7. 23. · HTML Basics: Terminology Tags, content and presentation In its most basic form, an HTML document consists of text, enclosed in tags. These tags

Basic HTML Tags

Basics tags for HTML

HTML TAGS by Ayush Saraswat

HTML Basics - Roosevelt CS & Web Design · HTML Basics Tag Structure Page Structure Document Tags Content Tags References 2

HTML & CSS...HTML tags are used to mark-up HTML elements.HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets. HTML tags

HTML tags and attributes

[Basic HTML/CSS] 2. html - list tags

Html Fundamental/Basic tags

Web html table tags

HTML Introduction to HTML Tags. HTML Document My first HTML document Hello world!

HTML Tags Explained

Chapter Two HTML Tags

Html table tags

HTML Links tag & list tags