Chapter 1 - The Basics


                                                << [CONTENTS] >>[Chapter 2]
Welcome to Lesson 1! Modifying existing web pages does not have to be difficult. There is no need to learn the entire HTML programming language as this tutorial is designed to provide a general understanding of the codes. In this lesson the following basic definitions and relevant tags are discussed:


What is HTML?


HTML (Hyper Text Markup Language) is the language used to write Web pages which consists of codes (tags) embedded in the text of a document.
What are Tags?


Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.
Below is an example of an HTML tag and its respective browser display:

HTML Code   Browser Display
I want to <B> emphasize </B> this!   I want to emphasize this!


* Do not worry about memorizing all the tags described in these lessons. Any tags that are required are listed in the accompanying HTML Reference Guide which can be printed for reference purposes.

Explanation of Document Structure


Each HTML document has a minimum number of tags. Here is the very least HTML code that can be called a "page":
<HTML>

<HEAD>
<TITLE>This is my page Title!</TITLE>
</HEAD>

<BODY>

This is my message to the world!

</BODY>

</HTML>

NOTE: HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>.


Explanation of Document Structure Tags



<HTML>...</HTML>   Encloses the entire HTML document.These tags let the browser know to start reading and displaying the information presented within.
<HEAD>...</HEAD>   The <HEAD> element contains all information about the document in general. It contains HTML elements that describe the document's usage and relationship with other documents.
<TITLE>...</TITLE>   The <TITLE> is contained in the <HEAD> of the document. It is displayed at the top of the browser window and on the bookmark list, so it is important to choose something descriptive, unique, and relatively short.
<BODY>...</BODY>   The <BODY> element contains all the information which is part of the document. There are a number of different attributes for the <BODY> tag (attributes are the elements included within brackets that change the behavior or appearance of a tag). They are:
"BACKGROUND=" Specifies the image tile that is to appear in the document's background.

EXAMPLE:
<BODY BACKGROUND= "picturename.gif"> </BODY>
"BGCOLOR=" Sets the background color of the page. In order to do this a six digit hexadecimal number denoting a red-green-blue color value is included. Thus "000000" is black and "FFFFFF" is white and every other colour in between is described using these 6 characters in different combination. In addition to the hexadecimal system, there are sixteen color names that (other than black) that can be included in the tags. They are: Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Purple, Silver, Teal, White, and Yellow.

EXAMPLE:
<BODY BGCOLOR="#FFFFFF">
This page has a white background.
</BODY>
OR
EXAMPLE:
<BODY BGCOLOR="WHITE">
This page has a white background.
</BODY>
"LINK=" Sets the hexadecimal color code for links that have not yet been visited.
EXAMPLE:
<BODY LINK="#0C6249">
This page has blue links
</BODY>
VLINK= Sets the hexadecimal color code for links the user has already visited.
EXAMPLE:
<BODY VLINK="#800080">
This page has purple links after being visited
</BODY>
"ALINK=" Sets color of links that are active (ie., the color they turn when the link is clicked on).
EXAMPLE:
<BODY ALINK="#FFB50C">
This page has yellow active links
</BODY>
"TEXT=" Sets the hexadecimal color code for the default text color.
EXAMPLE:
<BODY TEXT="#00006A">
This page has blue text
</BODY>
The <BODY> tags for this document are as follows:

<BODY BACKGROUND="spiral_ruled.gif" BGCOLOR="#FFFFFF" TEXT="#00006A" LINK="#005A5A" VLINK="800080" ALINK="#FFB50C">

Share on Google Plus
    Google Plus Comment
    Facebook Comment

0 comments :

Post a Comment

//]]>