Web Page Quick Reference

If you encounter terms about web page construction in your reading on this website that you don't understand, you can refer to our quick reference for more information.

Anchor Tag
Basic Code
Body
Body Tag
CSS
Division Tag
Embedded Style sheets
Fonts

Heading of Document
Head Section
Header Tag
Horizontal Rule
Hyperlink
Images
Images as Hyperlinks
Images in Paragraphs

Intradocument Hyperlinks
Inline Style Sheets
Meta Tags
Paragraph Tag
Span Tag
Style Sheets
Tables
Template
Title Tag

Anchor Tag

The anchor tag <a></a> is used to create hyperlinks on a web page. See Hyperlink.

Body

The body section of an HTML document will actually include the document heading and the footer of the page. It will contain all the text that is visible on the web page.

Body Tag

The body tag <body></body> consists of 2 tags (open and close) that enclose or contain the code that produces the visible content of a web page.

Body Tag - HTML Code Tutor

Basic HTML Page Code

The actual HTML code for a basic web page is very simple:
<html>
<head></head>
<body>
Hello World
</body>
</html>
This code saved in a text file with a .html extension and viewed with a browser, would produce the words Hello World on your computer screen.

Basic HTML Page - HTML Code Tutor

Division Tag

The division tag <div></div> can be used to divide a web page into sections.

Division Tag - HTML Code Tutor

Embedded Style Sheets

Embedded style sheets are placed in the head section of a web page.

Embedded Style Sheets - HTML Code Tutor

Fonts

Fonts are type faces. They should be designated using CSS (style sheets). Some of the most commonly used are arial, verdana, tahoma and times new roman.

Fonts - HTML Code Tutor

Footer

A footer is usually placed at the very bottom of a document. It can contain copyright information, company information and sometimes information about the age of a web page.

Heading of a document

The document heading of a web page is part of the body. For website consistency it should be the same throughout your website. It usually includes your company logo and a slogan relating to website content. Some websites include advertisements as a part of the document heading.

Head Section

The head section of a web page is enclosed in these tags: <head></head>. It is very important. It contains your title tag, meta tags and other information for the visiting browser. It contains information for search engine spiders or bots that is used to index the web page and determine its ranking.

Header Tag

The header tag <h1></h1> is used to display large letters at the top of a page or paragraph. The header tag is important not only for good page structure, but is also used by search engine spiders in page ranking. Header tags should be keyword rich. They come in 6 different sizes. H1 is the largest.

Header Tag - HTML Code Tutor

Horizontal Rule Tag

The horizontal rule <hr>tag simply produces a line on the page for separating page sections or paragraphs.

You can also use borders for this purpose.

Horizontal Rule Tag - HTML Code Tutor

Hyperlink - Anchor Tag

Hyperlinks are the underlined words on a web page. When they are clicked the user is sent to a desired location set in the anchor tag code.

Anchor Tag - HTML Code Tutor

Inline Style Sheets

Inline style sheets can be placed in the actual code of the web page. They are placed as an attribute of a tag. style="". Example: <h1 style="color: #ff0000"></h1>. They should be used sparingly, as they add to the size of a web page.

Using Inline Style Sheets - HTML Code Tutor

Intradocument Hyperlinks

Intradocument hyperlinks are often used to send a user to a location on the same web page that the hyperlink is located on. This document is an example. It requires the use of 2 anchor tags. They can also be used to send a user to a specific location on another web page, defined by the <a name=""></a> tag.

Intradocument Hyperlinks - HTML Code Tutor

Images as Hyperlinks

Images can be used as hyperlinks.

Images as Links - HTML Code Tutor

Images on Web Pages

Images are pictures that are placed on web pages. The most popular file formats for images are GIF, JPG and PNG. Other formats can be used but some browsers may not recognize them.

Images - HTML Code Tutor

Images in Paragraphs

Images can be placed right in your paragraphs. Their location is set using the align attribute.
Example: <p> <img align="right">Some text in the paragraph </p>

Images in Paragraphs - HTML Code Tutor

Layouts for Web Pages

Our basic layouts or web page structures are produced using single row tables.

Webpage Layout - Website Design Tutorial

Meta Tags

Meta tags <meta></meta>are placed in the head section of an HTML page. The most common are description and keywords. They are used to supply information about the content of the page for search engines. They do have other purposes.

Meta Tags - HTML Code Tutor

Paragraph Tag

Paragraphs on a web page are controlled using the paragraph tag <p></p>. The fonts and alignment properties for paragraphs are best set using style sheets. If you are still using an HTML editor that uses inline coding for defining fonts - GET RID OF IT!.

Paragraph Tag - HTML Code Tutor

Span Tag

The span tag <span style=""></span> is an inline tag that can be used to change the appearance of text within a paragraph. You can add color or bolding, change the size or even the style of the font for emphasis.

Style Sheets

Style sheets (CSS) are used to format the appearance of a web page. The can be placed in a separate text file, in the head section of a document or as inline code.

Style Sheets - HTML Code Tutor

Tables

Tables are structures on a web page that can be divided into rows and columns. They are often used to dispaly data in chart form. They can also be used to structure web pages.

It was once considered bad programming to structure a page with tables. Today you'll find the practice used by most web designers. Create liquid pages using relative (percentage) width settings, rather than absolute settings.

Basic Tables - HTML Code Tutor

Template - Web Page Template - Website Template

A template, web page template or website template is a prebuilt web page that can be modified to suit a user's needs. The web page can be completed by adding your own text and images. Templates can be a single web page or they can be several linked web pages.

Build Template - Website Design Tutorial

Title Tag

The title tag <title></title> is one of the most important elements of a web page. It is found in the head section of all web pages. The text between the title tags appears on the blue bar on the top of the browser window.

It is one of the most important factors used by search engine spiders to index or rank your page. It should be keyword rich.

It should also be written in such a way that it attracts the attention of surfers who will see it in a list of pages returned by a search engine query.
Welcome, won't get it!.

Definitions

CSS

Cascading Style Sheet - Code used to format the apperance of text and structures on a web page.

Liquid

Liquid web pages are constructed in such a manner that they adapt to different monitor resolution settings and browser widths. Best results are obtained by setting page and element dimensions in percentages, rather than absolute values.