HTML BASICS7.1

• Format HTML tags• Identify HTML guidelines

7.2• Organize Web site files and folder• Use a text editor• Use HTML tags and attributes• Create lists using HTML• View an HTML document

7.3• Insert images using HTML• Insert links using HTML• Debug and test a Web page

7.1 HTML CodingGuide to Reading

Main Ideas

An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. The World Wide Web Consortium establishes guidelines and standards for using HTML.

Key Terms

Hypertext Markup Language (HTML)

HTML tag

starting tag

ending tag

nested tag

empty tag

source code

7.1 HTML CodingHTML Tags

You create Web page documents by inserting HTML tagsHTML tags into a text document.

Hypertext Markup Language (HTML) The code used to create Web pages.

HTML tag Text contained between two angle brackets (< >) that tells the Web browser how to display a page’s content.

7.1 HTML CodingHTML Tags

HTML tags often come in startingstarting and ending tagending tag sets.

Nesting tagsNesting tags refers to placing the tags in particular order.

Empty tagsEmpty tags do not require an ending tag.

starting tag The first of a pair of HTML tags; also known as an opening tag.

ending tag The last of a pair of HTML tags; also known as a closing tag.

nested tag An HTML tag that is enclosed within another set of tags.

empty tag An HTML tag that requires only an opening tag; also known as an orphan tag.

Understanding and using the basic guidelines for HTML code will help you see the relationship between the code you write and what you see in the Web browser. For example, extra spaces between elements in an HTML document will not necessarily display in a Web browser.

7.1 HTML CodingHTML Guidelines

7.1 HTML CodingHTML Guidelines

Viewing source codesource code will allow you to see the text and the HTML commands used to create the Web site.

source code The text and HTML commands used to create the Web page.

7.2 Using a Text EditorGuide to Reading

Main Ideas

You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site.

Key Terms

file name extension

attribute

ordered list

unordered list

Every Web site is composed of folders and files.

Whether you use a text editor or a Web site development application, you must keep your files organized.

7.2 Using a Text EditorOrganizing Files and Folders

7.2 Using a Text EditorUsing Notepad

Notepad can be used as a text editor for creating Web sites.

When you save a file for the first time in Notepad, use the Save As function to name the file and choose the file name file name extensionextension.

file name extension The three or four characters after a period in a file name that tell the computer system what type of file it is reading.

7.2 Using a Text EditorAdding Attributes using HTML

Some HTML tags can contain attributes to specify the tags characteristics. Some attributesattributes include:

• Font color• Background color• Heading• Alignment

attribute An HTML instruction that is included in an HTML tag to specify a characteristic of a Web page element.

7.2 Using a Text EditorCreating Lists Using HTML

Creating lists can make text easier to read and add visual interest to a page.

There are two types of lists: ordered listsordered lists and unordered listsunordered lists.

ordered list A type of list that contains items, usually numbered, that must appear in a particular sequence.

unordered list A list that contains items that can appear in any order.

With text editors you cannot see how your page will appear in a Web browser while you are creating it. You must save the HTML document and then view it in a browser.

7.2 Using a Text EditorViewing an HTML Page

7.3 Enhancing and Testing Your PageGuide to Reading

Main Ideas

Use image tags to insert graphics using HTML. You can create links by using an anchor tag to specify the clickable area. A link can be absolute or relative. Web pages must be tested.

Key Terms

text link

graphic link

anchor tag

absolute link

relative link

debugging

testing

You can insert images into pages using the <img> tag and assign the five common attributes:

• Source (src)• Alternative text (alt)• Align (align)• Width (width)• Height (height)

7.3 Enhancing and Testing Your PageAdding Images Using HTML

7.3 Enhancing and Testing Your PageInserting Links Using HMTL

There are several different types of links using HTML.

• Anchor tagAnchor tag• Text linkText link• Graphic linkGraphic link

anchor tag An HTML tag used to create hyperlinks. The tag identifies what is clicked on and where it links to.

text link A type of link in which users click text to activate the link.

graphic link A type of link in which users click on an image to activate the link.

7.3 Enhancing and Testing Your PageInserting Links Using HMTL

Text and graphic links are either absoluteabsolute or relativerelative.

absolute link A type of link that contains the complete URL or path of the file being linked to.

relative link A type of link that is used when linking to a local file, such as one within the same Web site.

7.3 Enhancing and Testing Your PageTesting a Web Page

You should debugdebug and test test your Web site often to make sure that the page displays properly and all links are connected correctly.

debugging The process of locating and correcting errors in a Web site’s HTML code.

testing The process of repeatedly checking the Web page and site to make certain that elements display as designed.

The World Wide Web Consortium (W3C) releases specifications, called recommendations, on HTML.

You can read the complete specifications on the W3C Web site.

The specifications developed by this governing body help ensure that Web designers create pages that follow specific standards and can be displayed by any browser that also follows these specifications.

7.3 Enhancing and Testing Your PageHTML and the W3C