Flubbas HTML Tutorial

<HTML></HTML>

This element tells browsers that the file is a HTML document. Each HTML document starts with the tag <HTML>. This tag should be first thing in the document. It has an associate closing tag </HTML> which must be the last tag in the file.

<HEAD></HEAD>

The head contains important information about the document.

<TITLE></TITLE>

It is used to display a title on the top of your browser window. Both the opening and the closing tags go between the head tags.

<BODY></BODY>

The Body Tag is used to identify the start of the main portion of your webpage. Between <BODY></BODY>tags you will place all images, links, text, paragraphs, and forms. We will explain each tag that is used within the body of the HTML file.

<HTML>
<HEAD>
<TITLE>
Dave's Homepage
</TITLE>
</HEAD>
<BODY>
This is displayed.
</BODY>
</HTML>

Dave's Homepage This is displayed.

Optional Attributes

Attribute Value Description
alink rgb(x,x,x)
#xxxxxx
colorname Specifies the color of the active links in the document. Deprecated. Use styles instead.

background file_name An image to use as the background. Deprecated. Use styles instead.
bgcolor rgb(x,x,x)
#xxxxxx
colorname The background color of the document. Deprecated. Use styles instead.

link rgb(x,x,x)
#xxxxxx
colorname Specifies the color of all the links in the document. Deprecated. Use styles instead.

text rgb(x,x,x)
#xxxxxx
colorname Specifies the color of the text in the document. Deprecated. Use styles instead.

vlink rgb(x,x,x)
#xxxxxx
colorname Specifies the color of the visited links in the document. Deprecated. Use styles instead.

<H#></H#>

These tags are used for the characters in the outlines. The biggest heading is <H1> and smallest one is </H6>

<H1>This is the <H1>tag the largest heading tag</H1>
<H2>This is the <H2>tag the second largest heading tag</H2>
<H3>This is the <H3>tag the third largest heading tag</H3>
<H4>This is the <H4>tag the fourth largest heading tag</H4>
<H5>This is the <H5>tag the fifth largest heading tag</H5>
<H6>This is the <H6>tag the smallest heading tag</H6>

Dave's Homepage

This is the <H1>tag the largest heading tag

This is the <H2>tag the second largest heading tag

This is the <H3>tag the third largest heading tag

This is the <H4>tag the fourth largest heading tag

This is the <H5>tag the fifth largest heading tag

This is the <H6>tag the smallest heading tag

Attribute	Value	Description
align	left center right justify	Specifies the alignment of the text in the header. Deprecated. Use styles instead

<P></P>

Paragraph tags (<P> opening tag and </P> closing tag) allow you to place a paragraph. For example:
<P>Dave's Website</P>
The </P> closing tag may be omitted.

Source Output

<P>This is a paragraph and this can be used with some form of text.
This is a paragraph and this can be used with some form of text.

Source	Output
<P>This is a paragraph and this can be used with some form of text.	This is a paragraph and this can be used with some form of text.

Optional Attributes

Attribute Value Description

align left
right
center
justify
Specifies the alignment of the text within the paragraph. Deprecated. Use styles instead

Attribute	Value	Description
align	left right center justify	Specifies the alignment of the text within the paragraph. Deprecated. Use styles instead

Align

The defaulted position is left justification. You can also use "ALIGN" for justification:

<P ALIGN="center"> Paragraph will be centered</P>
<P ALIGN="left"> Paragraph will be left justified</P>
<P ALIGN="right"> Paragraph will be right justified</P>

<CENTER> </CENTER >

This kind of tags have capability of allowing you to center the text on the homepage.

<CENTER> <P > Paragraph will be centered</CENTER>

Dave's Homepage

Paragraph will be centered

<BR>

This tag break whatever to be on the next line. The following is an example:

<P>My<BR>Homepage!

Dave's Homepage

My
Homepage!

<HR>

This tag adds a horizontal line or divider to your web site. An <HR> tag makes the following divider:

--------------------------------------------------------------------------------
The <HR> tag can be set as:

Dave's Homepage

My
Homepage!

<PRE></PRE>

Preformatted the text of the paragraph to exactly display what you typed in the Web browser

Source Output

<PRE>
This is text
that preserves
both spaces and
line breaks
</PRE>

This is text that preserves both spaces and line breaks

Source	Output
<PRE> This is text that preserves both spaces and line breaks </PRE>	This is text that preserves both spaces and line breaks

Comments

The comment tag looks like this:

<HTML>
<HEAD>
<TITLE>
Dave's Homepage
</TITLE>
</HEAD>

</HTML>

Dave's Homepage

Nothing inside the comment tags will show up when your page is viewed.

Character Style

Character styles include physical and logical character styles, and Face, Size, and Color. The following is character style table.

Type Choice function Physical styles

<B>Make text bold.
<I> Make text italic.
<U> Make text underline.
<Strike> Make text strikethrough.
<Sup> Make text superscript.
<Sub> Make text subscript.
Teletype Make text teletype.
Logical styles <Strong> Indicate the text is very important.
<Em> Indicate the text is important.
<Cite> Indicate that the text is from a book or other document.
<Address> Indicate that the text is an address.
<Dfn> Indicate that the text is a definition.
<Samp> Indicate that the text is a sequence of literal characters.
Keyboard Indicate that the text is keyboard input.
<Var>Indicate that the text is a variable.
<Code>Indicate that the text is code.

Font Choice Function Face Default Make text display in the default font (Times New Roman) of the Web browser. Family Type a list of fonts separated by commas (for example, Helvetica, Arial, Courier). The text will display in the first listed font found on the browser's system. (Font name) Make the text display in the font specified. (If the font is not available on the browser's system, another font will be substituted.) Size 1 through 7 (3 is the default) Format text with 7 sizes where 7 is the largest size and 1 is the smallest. Increase Format text with the largest size (same as 7). Decrease Format text with the smallest size (same as 1). Color "#xxxxxx" or: White, Red, Blue and Others Make the text a different color.

The tags below have the effect shown on the text in between.

bold text
Italicized text
underlined text
Big text
small text
Monospaced typewriter text
blink
(Note: This only works on Netscape)
_{This makes a subscript.}
^{This makes a superscript.}
~~strikeout~~
This is a test
Text is in the color of Green
This is a test

<BASEFONT>

You may use this tag to set default font face, size or color for your page and save your time of coding. For example:

Lists

There are three kinds of lists in HTML:

Unordered lists <UL></UL>
Ordered lists <OL></OL>
Definition lists <DL></DL>

Unordered Lists

This list starts with an opening list <UL> tag and ends the list with a closing list </UL> tag. Between the <UL> and </UL>, you enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed. For example:

<UL>
     <LI> Job
     <LI> Resume
     <LI> Experience
</UL>

Job
Resume
Experience

In the web browser the above code would appear three elements as:

Job
Resume
Experience

Ordered Lists

An orderered list is similar to an unordered list, except it uses <OL> instead of <UL>

<OL>
     <LI>Job
     <LI>Resume
     <LI>Experience
</OL>

The output is:

Job
Resume
Experience

A definition list starts with <DL> and ends with </DL>. This list consists of alternating a definition term and a definition definition. The definition term is enclosed in <DT> </DT> and should precede the definition definition. The definition definition is enclosed in <DD> </DD>. So, a whole definition list looks like:

DEFINITION LIST

<DL>
<DT> term </DT>
<DD> definition </DD>
...

term

definition

Links

Links allow you to navigation from one page to another on the internet or in your local machine. Before you add a link to your page you need a URL of another web site or a path of your local file that you want to link to. The link tag also provides the capability to provide a way for linking an e-mail address. To link to another file in your text, use
<A HREF="name.html"> anchor text </A>.

For example: You can create links from your webpage to other webpages on internet:

<A HREF="http://suffolk.li/">Suffolk College</A>

Suffolk College

CH and JS

We create links called named anchors that go to a section such as "ABC project" of your page. You need to type <A NAME="abc">ABC project</A>. At any section other than the top of your page you add the following link: <A HREF="#abc">Click here to see project</A>
this is at the top of page. The # symbol tells your browser to look for the link within the same document instead of looking for another file. You can use any number or letter to replace "":

You can change the order and go down instead of to the top of page.

Click here to see project
.....
ABC project

You can link to any place in other documents by the same way:

Image

Most Web browsers can display images that are in GIF, or JPEG format. To include an image, enter:

For example:

The result is this.

<CENTER><IMG SRC="eye.gif"><BR>Cyclops<BR></CENTER>

This displays image and text on top of each other in the center of the page.

Cyclops

The <IMG> tag is used to define an image. This tag does not have a closing tag. The IMG part tells the browser to add an image, The SRC tells your browser where to find the image. You should include two other attributes on <IMG> tags to tell your browser the size of the images. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images.
For example:

You can put an image in the left or right of a page by using ALIGN.. For example:

By default the bottom of an image is aligned with the following text. You can align images to the top, bottom or middle of a paragraph by using one of three things: TOP, MIDDLE, BOTTOM, For example:

The text in bottom of image.

The text in middle of image.

The text in top of image.

Note: You must use "ALIGN", not "VSPACE" to set for TOP, MIDDLE, BOTTOM. It's different from the table alignment. We can use "VSPACE" and "HSPACE" to adjust space around the picture:

<IMG SRC="eye.gif" VSPACE="50" HSPACE="100"><BR>Cyclops<BR>

Cyclops

An image can be used as hyperlinks just like plain text. The following is the HTML code:

The blue border that surrounds the image indicates that it's a clickable hyperlink. If you do not want to display this border, you can add the BORDER attribute and setting it to zero:

You also can use an image as a background. The tag to include a background image is included in the <BODY> statement as an attribute:

You can also use a smaller image as a link to a larger image. Enter:

Color

You may want to have a specific color for the background, text, links, visited links, and active links. In HTML, Colors are coded as a 6 digit hex RGB (red, green, blue) number. A hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FFFFFF is white (fully saturated with all three colors). FF0000 is bright red, 0000FF is bright blue, and 00FF00 is pastel green. You must have the "#" sign before the actual code. You can use the attributes of the <<BODY> tag to change the color of TEXT, LINKS, VLINKS (visited links), and ALINKS (active links).

The table below shows the result of combining Red, Green, and Blue light sources:.

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

For example:

You can also use the name of the color instead of the corresponding RGB value to indicate some basic colors. For example, "black", "red", "blue", and "green" are all valid for use in place of RGB values. Coloring specific text is done very much like changing the font size.
The tag is like:

text

This tag can be combined with the font size.
For example:

text

Table

The format of table is:

<TABLE>
<TR>
<TD> Table Entry ...
<TR>
<TD> Table Entry ...
</TR>
<TR>
<TD> Table Entry ...
<TD> Table Entry
</TR>
</TABLE>

The whole table is opened and closed with <TABLE> </TABLE>. Each row is encapsulated in <TR> </TR>. Within the row are cells, enclosed in <TD> </TD>. There can be as many rows and columns as you want and as will fit on the screen. The browser will autoformat the rows, vertically centering cell contents if necessary. If you want a cell to span more than one column, enclose it in <TD COLSPAN=X> </TD>, where X indicate the number of columns to span. Similarly, <TD ROWSPAN=X> will cause the cell to span X rows. A border can be placed around all the cells by using <TABLE BORDER=X> </TABLE>, where X is the number of pixels thick the border should be.
Let's see an example:

<CENTER><TABLE BORDER=5 WIDTH="62%" HEIGHT=90> <TR> <TD WIDTH=125><CENTER>School Name</CENTER> <TD WIDTH=125><CENTER>Course Name</CENTER> <TD WIDTH=125><CENTER>Course ID</CENTER> </TR> <TR> <TD WIDTH=125><CENTER>Suffolk County Community College</CENTER> <TD WIDTH=125><CENTER>Introduction to Technology</CENTER< <TD WIDTH=125><CENTER>CS13</CENTER> </TR> <TR> <TD WIDTH=125><CENTER>Suffolk County Community College</CENTER> <TD WIDTH=125><CENTER>Inroduction to Windows O.S.</CENTER> <TD WIDTH=125> <CENTER>CS28</CENTER> </TR> </TABLE></CENTER>

School Name	Course Name	Course ID
Suffolk County Community College	Introduction to Technology	CS13
Suffolk County Community College	Inroduction to Windows O.S.	CS28

Data to enter into a Table.

School Name
Course Name
Course ID

Suffolk County Community College
Introduction to Technology
CS13

Suffolk County Community College
Introduction to Windows O.S.
CS28

The value of width and height can be "xx%" or XX. For example: WIDTH="80%" or WIDTH=450. "xx%" allow the table size changing while the window size is changing. The value of Border can be zero. In this case, the table will have no border. You can make a table looking like this: The following is the code of this table.

You need text to see the table data rows.

T T

H H

The CELLSPACING attribute refers to the space between cells and should be in pixels. The CELLPADDING attribute refers to the spacing within the cell in pixels (the space between the cell walls and the contents of the cell).

Element Description

<TABLE></TABLE> defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border. <CAPTION></CAPTION> defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.

NOTE: Any kind of markup tag can be used in the caption. <TR> </TR> specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.

<TH> </TH> defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

<TD> </TD> defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.

Attribute Description
ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell. VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell. COLSPAN=n The number (n) of columns a cell spans. ROWSPAN=n The number (n) of rows a cell spans. NOWRAP Turn off word wrapping within a cell.

Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;).

To display a less than sign in an HTML document we must write: < or <

The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers. Note that the entities are case sensitive.

Ampersand symbol is entity number 38: &

Less than symbol is entity number 60: <

Cent symbol is entity number 162: ¢

Non-breaking space symbol is entity number 160:

Fraction 1/4 symbol is entity number 188: ¼

Capital Thorn, Icelandic symbol is entity number 222: Þ