Welcome to the HTML Rookie Tutorial. The most comprehensive HTML and CSS beginner and advanced tutorials on the Internet. Please report any errors in this tutorial, or feedback, to my EMAIL.

Bookmark CTRL+D

HTML is an acronym for Hypertext Markup Language. An acronym is a fancy word for initials, but you hopefully already knew that.

You don't need Internet access, but you will need an Internet web browser. You do not have to be a computer genius to learn HTML. That includes any one that can not make the clock on their VCR stop blinking. With some repetition, and perhaps a few expletives, every one can learn HTML.

Free Web Hosting

You may sign up for a FREE account with one of the major web hosting providers. If you choose to go free, then you will have to tolerate their annoying pop-up advertisement banners.

Major providers of free web hosting.

Doteasy.com

Yahoo Geocities

Table of Contents

VIEWHTML files. Create a folder for your HTML files with Windows Explorer. From the START menu select RUN. Type EXPLORER and select OK

To preview a web page in a web browser by naming the HTML file, for example, My_Web_Page.html, save it to the folder that you place your work.

Select the FILE menu on your web browser and select OPEN. On the dialogue box select BROWSE and go to the folder where you saved the HTML file.

That process is for opening HTML files using Internet Explorer, but opening files with Netscape is similar to Internet Explorer, and Mozilla.

COMMENTSYou may use comments any where in the BODY. Every thing that is placed between those brackets will not be visible. Select VIEW then PAGE SOURCE or VIEW SOURCE from your web browser. You can steal ideas and use them as your own.

<!--This is an HTML comment-->

<BODY>

    My Web Page

    <!--Comments are not visible in the BODY-->

</BODY>

You cannot use comments within other comments.

<!--This is a comment <!--This is another comment --> -->

You could type  and they wouldn't see it. I wouldn't advise that though. If you forget to include one of the comment tags, or the exclamation point it would become very visible.

Table of Contents

BASICSThis is HTML code for a basic web page. Every HTML page should have these HTML tags. The META and BASE tags are optional but search engines use META tags to properly index your web site.

EXAMPLE

<HTML>

    <HEAD>

        <TITLE></TITLE>

    </HEAD>

   <BODY>

       Your page is between these two tags.

       <!--This is a comment. It isn't visible-->

   </BODY>

</HTML>

Click HERE to see it.

The HTML tag begins the web page. TITLE is the name of your web page. The TITLE /TITLE tags will be visible in the upper left-hand corner of your Web browser.

The HEAD/HEAD tags contain CSS code and META tags. The BODY tag comes after the HEAD/HEAD tags. The BODY is the visible portion of the HTML document. Every thing placed between the BODY /BODY tags will be visible on the screen. The BODY tag must end with /BODY then /HTML and that ends the document.

The BASE tag holds the URL, which may be numerals or letters.

Table of Contents

SIMPLE PROGRAM

Create an HTML document to place your name on a web page.Save this file as MY_WEB_PAGE.html or something more glamorous. Open your web browser and go to the FILE menu. Select OPEN then BROWSE. Select the folder where you saved MY_WEB_PAGE.html and open the file.

Example

<HTML>

    <HEAD>

        <META NAME="author" CONTENTS="Tim Robertson">

        <BASE HREF="http://www.oocities.com/tarob01/"> 

        <TITLE>My First Web Page</TITLE>

    </HEAD>

<BODY>

    <CENTER>Hello, my name is Tim!</CENTER>

</BODY>

</HTML>

Click HERE to see it.

<CENTER>TEXT GOES HERE</CENTER>

Centers text or images. This tag should come before and after element tags.

<CENTER><P>Hello<P></CENTER>

BODY BGCOLOR="#FFFFFF" Defines background color. An attribute of BODY, P, TABLE, and TD. EXAMPLE

<BODY BGCOLOR="#FFFFFF">
<P BGCOLOR="#FFFFFF">

To change Font style, size or color use this code.

<ELEMENT ATTRIBUTE="VALUE" ATTRIBUTE="VALUE">

<FONT FACE="Arial" SIZE="5" COLOR="Blue">Text goes here<FONT>

Click HERE to see it.

HTML Images

To insert an image use this code.

<IMG SRC="URL" ALT="">  

<IMG SRC="http://tarob01/bounce.gif" ALT="bouncing ball.">  

SRC= URL Web address, or file location of image. 

ALT= Text description of an image.

ATTRIBUTES
HEIGHT and WIDTH= The default value is null, unless otherwise specified. If left unspecified the image will be the original size.
HSPACE= The amount of white space in pixels before and after an image.
VSPACE= The amount of white space in pixels above and below an image.
BORDER= Specifies the border width of an IMG in pixels.
ALIGN= bottom| top| middle| left| right

EXAMPLE

<IMG SRC="http://www.oocities.com/tarob01/HTML/dance.gif" 
                        ALIGN="right" ALT="Diaper Dance">

This image will be aligned on the right side of the page.

The ALT attribute displays a relevant text description of an image and should always be specified. It assists visually impaired users and users with no graphic interface.

Click HERE to see.

Table of Contents

METAMETA tags contain information that search engines use to index your web page. In other words, META tags help other people find your web site. META tags should be placed between theHEAD tags, and immediately before or after the TITLE

The META Description tag should contain about fifteen-twenty words that describe your web site. It's important to carefully select the words you use in this tag. For example, Google emphasizes this and the TITLE tag more than Yahoo and other search engines. You should be precise and use lively, content related words or phrases in this tag.

Yahoo emphasizes KEYWORDS, while Google mostly ignores it. Keyword searches on Yahoo and Google will likely return very different results. Do your homework, and plan ahead when selecting words for your DESCRIPTION, TITLE and KEYWORDS. Keep in mind that most people never look beyond the first page of search results, so if your page isn't listed on page one then you still have work to do.

If you have any images on your web site then utilize the ALT tag and keyword or phrase your image name. Many search engines also index image tag contents and use the information in searches. For example, if your web site is called Wacky Widgets, then name your imagewacky_widget.gif

META tags are written as <META NAME= CONTENT=>

Always separate keywords with a coma.

<META NAME="Author" CONTENT="Tim Robertson">

<META NAME="Description" CONTENT="HTML Tutorial">

<META NAME="Keywords" CONTENT="HTML Tutorial">

META Refresh-Redirect Tutorial

Table of Contents

IMAGES AS HYPER-LINKS

Using images as hyper-links is an attractive alternative to standard text.

The default value for image attributes is null or zero. If you do not include a value then there will be no border and the image will remain the original size.

Select an image

<IMG SRC="name_of_image.gif">

Place the

<IMG SRC="">

tag where the text normally goes in a hyper-link.

<A HREF=""><IMG SRC=""></a>

The IMG SRC= tag has several attributes.

<IMG SRC="URL" ALT="description" BORDER="integer" 

HEIGHT="integer" WIDTH="integer">

Table of Contents

CSS STYLE SHEETS

STYLE tags may be declared between the HEAD tags, an external STYLE sheet, or in line with document tags in the BODY. If it's declared between the HEAD tags, or an external STYLE sheet, it will affect the entire web page, unless specifically overridden in individual tags.

An external style sheet may be written in any text editor. Save the file with a .css extension, not HTML. The main advantage of a style sheet is uniformity. If you have several web pages that need to be similarly designed then a style sheet is probably best.

EXAMPLE

 
HR {color: #FFFF00;}
P {margin-right: 20px;}
BODY {background-image: url("myImage.gif");}

Save this file and insert a link in the HEAD section.

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="URL" />
</HEAD>

<HEAD>
<STYLE TYPE="text/css">
       <!--
         HR {color: #FFFF00;}
         P {margin-right: 20px;}
        -->
 <!--Surround the code with an HTML comment tag-->
</STYLE>
</HEAD>

OR Insert in HTML tags.

<P STYLE="MARGIN-RIGHT: 20px;">

What do all hyper-links have in common? They are underlined. Here is the CSS HTML code to remove underlined hyper-links.

EXAMPLE

<HEAD>
<STYLE TYPE="text/css">
     <!--
        A { TEXT-DECORATION: none; } 
        -->
</STYLE>
</HEAD>

Additional attributes

<STYLE>
     <!-- 
P {TEXT-DECORATION:underline OR overline OR linethrough
                   OR blink;}
     -->

</STYLE>

It is not necessary to add semi-colons for only one item in a bracket, i.e. A{text-decoration:none;} However, it is a good idea to always use them.

Table of Contents

BODY attributes affect your web page visuals. COLOR is one attribute. Some times you can write the name of the color but you probably will need a Hexadecimal code for a better selection.

A Hexadecimal chart can be found HERE.

#FFFFFF Hexadecimal codes require a pound sign.

<HTML>

    <BODY BG COLOR="white" TEXT="purple" LINK="red"

        ALINK="black" VLINK="orange">

    </BODY>

</HTML>

Use different colors than the ones I chose. If you do not then you'll have a funky looking page.

BGCOLOR= sets the color of the background.
TEXT= sets all text on the entire page.
LINK= is the color the HYPERLINK will be before it is clicked.
ALINK= is the color the HYPERLINK will turn while it is being clicked.
VLINK= is the color the HYPERLINK will turn after it is clicked.

Table of Contents

TABLESWhat is a Table? The answer is not in your kitchen. An HTML Table is a way of providing information and selections to your Web Page visitors in an organized fashion.

Example

<CAPTION>My First Table</CAPTION> This tag is optional. What ever you place between these tags will appear directly above your Table.

<CAPTION>My First Table</CAPTION>

<TABLE> 

<TR> 

<TD> HELLO 

</TD> 

<TD> GOODBYE 

</TD> 

</TR> 

</TABLE>

You can have as many cells <TD></TD> and rows <TR></TR> as necessary. It is arbitrary.

Your code should look like this.

<CAPTION>My First Table</CAPTION>

<TABLE BORDER="1" CELLSPACING="10" CELLPADDING="10"> 

<TR> Table Row number one

<TD> HELLO

</TD> End table CELL no.one

<TD> GOODBYE

</TD> End table CELL no. two

</TR> End table Row number one

</TABLE> Ends table.

Click HERE to see how it looks. Experiment with it to gain some practice.

What do you notice about this TABLE? One cell is longer than the other one. If you said it looks sloppy, then you are very observant. When table cells do not contain the approximate same amount of data or letters, do not use a border. Click HERE to see the same TABLE with out aBORDER.

That looks much better. One side does not appear longer than the other, even though one side actually is longer. The only thing that was changed was BORDER="1" to BORDER="0".

BORDER= Defines how large the table border should be. The higher the integer, the greater the increase in size. BORDER="0" is the default value for the border tag and will have no border.

CELLPADDING= CELLPADDING is one word. It defines how much room is between the text inside the cell and the border.

CELLSPACING= CELLSPACING defines how much room there should be between the borders of cells. The larger the integer, the greater the increase in the size of the padding or space between cells.

A TABLE with hyper-links

TABLE cells can be hyper-linked with other web pages. Click on one of the words in the TABLE example. What happened? Nothing, because the cells are not linked with another web page.

EXAMPLE

<CAPTION>My First Table</CAPTION>

<TABLE BORDER="1" CELLSPACING="10" CELLPADDING="10">

<TR>

<TD> <A HREF="http://www.oocities.com/tarob01/">HELLO</A>

This links the HELLO cell with my homepage. 

</TD> 

<TD><A HREF="http://www.yahoo.com">GOODBYE</A>

This links the GOODBYE cell with Yahoo!

</TD> 

</TR>

</TABLE>

Click HERE too see it.

TABLE alignment is an attribute of the TABLE tag.

<CAPTION> My First Table</CAPTION>

<TABLE> 

<TR>

<TD ALIGN="X"> X may be "CENTER" "RIGHT" OR "LEFT" 

</TD>  

</TR>

</TABLE>

The CENTER attribute value places text or images in the center of the TABLE cell. The RIGHT attribute value places text or images on the right side of the TABLE cell. The LEFT attribute value places text or images on the left side of the TABLE cell.

VALIGN (no spacing) is VERTICAL alignment. VALIGN is declared after ALIGN. The attributes for VALIGN are BOTTOM, TOP or MIDDLE. These attributes will place the cell's contents in either the TOP BOTTOM portion of the cell.

TABLES are difficult to understand, so practice with these examples several times if you have to, and also practice writing your own code. After all, these are just the very basics of HTML Tables. I hate cliches', butpractice makes perfect

Multi row TABLE example.

<TABLE BORDER="2"> 

<TR>TABLE row no.1

<TD BGCOLOR="BLUE"> 

</TD>

<TD BGCOLOR="GREEN"> 

</TD>

</TR> 

<TR> 

<TD BGCOLOR="ORANGE"> 

</TD> 

<TD BGCOLOR="RED"> 

</TD> 

</TR> 

</TABLE>

This TABLE will have two rows, four cells, and a BORDER. Each TABLE cell will be a different color. Manipulate the code by changing the BORDER and COLOR values. Cut and Paste this code into a blank document and view the outcome.

Click HERE to see it.

This is the same TABLE, but it does not have a BORDER.

Click HERE to see it.

Table of Contents

Forms transmit information and may be placed any where in the <BODY></BODY>. This is a FORM that will send an e-mail address to specified e-mail account.

<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

The first line begins a new FORM. What ever is typed in the text box will be sent to my e-mail address through the "Action" command. There is no spacing and always surround the text with quotation marks.

<INPUT TYPE="text" NAME="name_goes_here" SIZE="25">

This command means that "text" will be entered into the box. NAME is abitrary. If you were asking for a visitors e-mail address to start a newsletter, you might decide to use "newsletter" in the NAME="" field. Size means the size the actual text box will be. In this case it will be "25". Meaning the text box can hold 25 characters or letters. You can make it hold 50 characters or even a 100 if you want to. All of these values are arbitrary. Please remember to end your Form with the </FORM> tag!

<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<INPUT TYPE="text" NAME="newsletter" SIZE="25">

</FORM>

You need a larger area than the above e-mail text box? Well, that can be achieved very easily. Look below.

Example

<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<TEXTAREA NAME="suggestions"rows=5 COLS=25>

</TEXTAREA>

</FORM>

Where suggestions has replaced newsletter. The above text box will accept "5" rows or lines of text, each line holding "25" characters for a total of "125" characters. You can set the rows and characters to values to suit your needs. The text area box allows visitors to send you comments and suggestions or anything else for that matter, textually speaking, right to your e-mail.

You are going to need a way for your visitor to send the above information to your e-mail address. Here is how to transmit the information.

Example

<INPUT TYPE="submit">

<INPUT TYPE="reset"> This will create "submit" and "clear"

(reset) buttons underneath the textbox. It's actually pretty cool

looking. 


<FORM METHOD="post" ACTION="mailto:tarob01@yahoo.com">

<INPUT TYPE="text" NAME="newsletter" size="25">

<INPUT TYPE="submit">

<INPUT TYPE="reset">

</FORM>

Table of Contents

Important

You may separate text or images on a Web page with the HR tag. This command places a Horizontal line across the screen.

<HR SIZE=5 NOSHADE WIDTH=100%>

This places a black horizontal line across the entire screen. SIZE and WIDTH are arbitrary attributes. The WIDTH attribute determines the horizontal length of the line while SIZE determines the thickness.

<HR SIZE=5 NOSHADE WIDTH=50%>

Table of Contents

There are two basic kinds of lists. Ordered and unordered lists. Just like there are ordered and unordered people. Below is an example of each list. The lists I mean, not the people!

Unordered List

<H3>My List</H3>  

<UL> 

<LI>Hi, my name is Tim 

<LI>Hello, my name is Tim

<LI>Hey there, my name is Tim 

</UL>

When using a list, you do not have to include </LI> tag endings. However,XHTML requires that every document be well-formed. So, it is good practice not to leave any open tags in your document. Always close all tags. <LI></LI>

Here's what it will look like on the screen. There will be Bullets or dots in front of the items.

My List

Hi, my name is Tim!
Hello, my name is Tim!
Hey there, my name is Tim!

Ordered List

<H3>My List</H3>

<OL> 

<LI>Hi</LI>

<LI>Hello</LI>

<LI>Hey there</LI>

</OL>End of Ordered list

Here's what it will look like on the screen. There will be no bullets, only numbers. Again, it will not be red unless you make it red, or blue or green or purple or whatever color you choose to make it.

My List

Hi
Hello
Hey there

Nested List

How do you place a list inside of another list? Very simple. Here is how you can easily srtructure a document for better presentation.

<UL>
<LI>
<LI>
<OL>
<LI>
<LI>
</OL>
<LI>
</UL>

Here is what the code will look like on a web page.

Item one
Item two

Item three
Item four
Item five

Item six

Definition Lists

Defintion lists are used to place information in a hierarchy when you do not want bulleted or numbered items.

For example, the information to the right is a person's grocery list and bills. It is the same as an ordered or un-ordered list, except there are no bullets or numbers.

Definition List

<DL>
<DT>Grocery List</DT>
<DD>Milk</DD>
<DD>Butter</DD>
<DD>Potato Chips<DD>
<DD>Pepsi</DD>
<DD>Hot Dogs</DD>
<DT>Monthly Bills</DT>
<DD>Phone</DD>
<DD>Cable</DD>
<DD>Rent</DD>
<DD>Car Payment</DD>
<DD>Utility</DD>
</DL>

Grocery List: Milk; Eggs; Butter; Potato Chips; Pepsi; Hot Dogs
Monthly Bills: Phone; Cable; Rent; Car Payment; Utility

Cut and paste this code in your HTML document and you're all set.

There is no limit to how large a list can be. They may be 1-infiniti.

Table of Contents

The FRAMES tutorial will be the most difficult to learn, because it's the most difficult to write. What is a FRAME? A FRAME is a collection of several different web pages on the same page. Let me explain.

All Framed pages require a separate instructional code sheet to hold several different pages together. I just call it a Frame page. It's not visible to the Web visitors. Think of a picture frame with several different pictures in inside. That is a web page FRAME, it holds several Web pages together just as a picture frame does. You can see several different web pages at the same time in the same FRAME.

Note: Columns are vertical and Rows are horizontal

Example

This is a FRAME page. Here is the code sheet. 

<HTML> 

<BODY>

<FRAMESET COLS="50%,50%"> Divides screen in to two 

columns. Each page is 50% of its normal size. 

<FRAME SRC="yourpage.html"> This is the page (URL) 

that will be visible on the left side of the screen. FRAMES 

are read from left to right.

<FRAME SRC="anotherpage.html"> This is the URL that 

will be on the right-hand side of the screen

</FRAMESET> Ends the Frame

</BODY>

</HTML>

Important

To make the a FRAME page you need to make at least two pages. TheFRAME page itself, and the two pages that will be on the left and right sides of the screen.

The Frame page isn't visible. Only yourpage.html and anotherpage.htmlare visible. You can abbreviate the URL if you want, but if it's not in the same directory you will have to list the full URL.

i.e. http://www.yourpage.com and http://www.anotherpage.com. I recommend typing the full URL, at least unless you are comfortable with directory pathways. Always include the </FRAMESET> tag. Then finish with </HTML> and you've written your first FRAME page. Remember that's three <HTML></HTML> pages to write for this FRAME example.

This is an example of a Frame.

<HTML>

<BODY>

<FRAMESET COLS="25%,75%"> Divides screens in to
                                right and left columns. 

<FRAME SRC="NavigationalBar.html" NAME="SideNavBar"> 
This is the page
on the left side.

<FRAMESET ROWS="15%,85%"> 
Divides column number two
in to two rows.                             

<FRAME SRC="Top_NavBar.html" NAME="Top_NavBar> 
This is the page for the 
top row of column two.                           

<FRAME SRC="tarob0l.html" NAME="Main_Page> 
This page will show up
under row number one.
                                                
</FRAMESET>

</FRAMESET>

<NOFRAMES> 
This page uses Frames. 
<A HREF="URL GOES HERE">
Please go here.</a>

</NOFRAMES>

</BODY>

</HTML>

Computer Concepts & Web Technology With Suman

Basic HTML using images links, Lists, Tables and Forms

Free Web Hosting

SIMPLE PROGRAM

IMAGES AS HYPER-LINKS

CSS STYLE SHEETS

No comments:

Post a Comment