HTML Documents

Two parts of HTML file ♦ Header

The header contains information about this HTML file, that will not be displayed on the web page. ♦ Body The body contains all the text and other content to be displayed as the web page. This content is enclosed by HTML tags.

Basic Structure ♦ The head tags are: , , ♦ The body part is the body of your work. ♦ The body is made up of any graphics/ photos/ artwork you want to include and all hypertext links to other sites or documents. The body also includes the text and attributes such as bold and italic, and headers, or headlines.

Comments In HTML file ♦ Use the comment tag to

enclose text that you do not want displayed on the page. ♦ i.e.



Basic Structure Example ♦ ♦ ♦ ♦ ♦ ♦ This is my first homepage. ♦ ♦

HTML/ HEAD/ TITLE ♦ HTM – This element tells your browser that the file contains HTML-coded information. The file extension .htm also indicates this an HTML document and must be used. ♦ HEAD – The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser’s window.

HTML/ HEAD/ TITLE (cont) ♦ TITLE – The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone’s hotlist or bookmark list, so something descriptive, unique, and relatively short are suggested. A title is also used to identify your page for search engines.

Text Tags ♦ Bold ♦ This is the tag for bold text. ♦ Example:

Howdy ♦ This will show up on your page like this: Howdy

Text Tags (cont) ♦ Italics ♦ Underline text ♦ Example:

Underline Me! ♦ This will show up on your page like this: Underline Me!

Text Tags (cont) ♦ Italics ♦ Italics ♦ Example:

Isn't this fun? ♦ This will show up on your page like this: Isn't this fun?

Text Tags (cont) ♦ Strike ♦ <STRIKE> ♦ Example:

<STRIKE>You're Out!

Heading/ Headlines ♦ HTML has six levels of headings,

numbered 1 through 6, with 1 being the largest. ♦ Headings are typically displayed in larger and/or bolder fonts than normal body text. ♦ The first heading in each document should be tagged

Heading/ Headlines (cont) ♦ The syntax of the heading element is:

Text of heading where y is a number between 1 and 6 specifying the level of the heading. Note: Do not skip levels of headings in your document. For example, don’t start with a level-one heading (

) and the next use a level-three (

) heading.

Horizontal Rules ♦ The <> tag produces a horizontal line the

width of the browser window. A horizontal rule is useful to separate major sections of your document. ♦ The horizontal ruled line does not have a closing tag. ♦ You may also add certain attributes to the

---

tag

Horizontal Rules (cont) ♦ Attribute for horizontal Rules – Width= n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide. ♦ Example:

---

---

---

---

---

---

Horizontal Rules (cont) – Size attribute – Size=n to make the line a certain pixel amount, example of controlling thickness:

---

---

---

---

Horizontal Rules (cont) – NOSHADE attribute, to turn the lines shading off use. Example of adding solid lines:

---

---

---

---

Horizontal Rules (cont) – Align attribute, ALIGN=x (x as LEFT, RIGHT, or CENTER) to align the line. This is an example of controlling alignment:

---

---

---

Paragraphs (p tag) ♦ Indicates the start of a paragraph block. ♦ This means that the current line of output is

terminated and a blank new line is output before text display continues. ♦ If a

tag is encountered within a paragraph block this forces the start of a new paragraph. The same effect can be forced using the rarely seen

.

Paragraphs (p tag) (cont) ♦ Align attribute, ALIGN=x (x as LEFT,

RIGHT, or CENTER) to align the line. ♦ The

closing tag may be omitted. This is because browsers understand that when they encounter a

tag, it means that the previous paragraph has ended. ♦ However, since HTML now allows certain attributes to be assigned to the

tag, it’s generally a good idea to include it.

Paragraphs (p tag) (cont)

This is a centered paragraph.

This is a centered paragraph. Left alignment is the default alignment if align attribute is not included.

Line Breaks ♦ The
tag forces a line break with no

extra (white) space between lines. ♦ For example, without
This is sentence 1. This is sentence 2. This is sentence 3.

♦ The output is: This is sentence 1. This is sentence 2. This is sentence 3.

Line Breaks (cont) ♦ This is with


This is sentence 1.
This is sentence 2.
This is sentence 3.
♦ This is the output This is sentence 1. This is sentence 2. This is sentence 3.

Center tag ♦ ♦ Whatever you put between will centered on

the current line. ♦ Center Works!!! ♦ This is the output: Center Works!!!

Body attribute ♦ bgcolor="color" ♦ This changes the background color of your

page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. ♦ Or you could use the hex code for green: ♦

Table of color Color Name HEX Code black white red blue green yellow orange violet purple

#000000 #FFFFFF #FF0000 #0000FF #008000 #FFFF00 #FFA500 #EE82EE #800080

Table of color (cont) Color Name HEX Code pink silver gold gray aqua skyblue lightblue fuchsia khaki

#FFC0CB #C0C0C0 #FFD700 #808080 #00FFFF #87CEEB #ADD8E6 #FF00FF #F0E68C

Body attribute (cont) ♦ text="color"

This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. ♦ Using a color name: ♦ Or using a hex code:

Body attribute (cont) ♦ link="color"

This changes the color of all of the nonvisited links on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. ♦ Or using the hex code: ♦

Body attribute (cont) ♦ alink="color"

This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use. Just replace color above with a color name or hex code. ♦ vlink="color" This changes the color of a visited link on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. ♦

Body attribute (cont) ♦ background="image.gif"

This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.

♦ ♦

Body attribute (cont) Body tag with all attribute: