Sunteți pe pagina 1din 7

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
I want to <B> emphasize </B>
this!

Browser Display
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">

Structure Tags
Headings
Paragraphs
Lists

Character Formatting
Other Elements
Images
Tables
Frames

Structure Tags
<HTML>...</HTML>

Opens and closes all HTML documents.

<HEAD>...</HEAD>

Encloses document header.

<TITLE>...</TITLE>

Contains the document's assigned title.

<BODY><.../BODY>

Contains the body of the HTML document.


Attributes:
BGCOLOR="..."

Sets background colour.

TEXT="..."

Sets colour of text.

LINK="..."

Sets colour color of unvisited links.

VLINK="..."

Sets colour of visited links.

Headings
<H1>...</H1> -- <H6>...</H6>

Used to set size of headings. Values of 1 through 6; with


1 being the largest, 6 the smallest.

Paragraphs
<P>

Used to denote a plain paragraph.

Links
<A>....</A>

Creates a link to another document or anchor.


Attributes:

HREF"..."

The URL of a document to which a given


document is linked.

NAME"..."

Denotes an anchor name.

Lists
<OL>...</OL>

An ordered (numbered) list.

<UL>...</UL>

An unordered (unnumbered), bulleted list.

<LI>

A list item.

Character Formatting
<B>...</B>

Bold text.

<I>...</I>

Italic text.

<U>...</U>

Underlined text.

Other Elements
<!...>

Comment - creates a comment which is not displayed in


browser - found in the <BODY> tag.

<HR>

A horizontal rule.
Attributes:
SIZE="..."

The thickness of a rule in pixels.

WIDTH="..." The width of the rule in pixels or percent.


ALIGN="...." Possible values are LEFT, RIGHT and
CENTER.
NOSHADE

Causes the rule to be drawn as a solid


black line.

<BR>

A line break.
Attributes:
CLEAR="..." Causes text to stop flowing around
images - possible values are LEFT, RIGHT
and ALL.

<NOBR>...</NOBR>

Prevents text from wrapping at the end of a line.

<BLOCKQUOTE>...</BLOCKQUOTE>

Used for long quotes or citations. Indents all text within.

<CENTER>...</CENTER>

Centers everything between these tags.

<FONT>...</FONT>

Changes font size.


Attributes:
SIZE="..."

Specifies font size from 1-7. Default is 3.

COLOR="..." Specifies text colour.

Images
<IMG>

Used to place an image into a document.


Attributes:
SRC="..."

Information as to an image's physical


location.

ALT="..."

Alternate text to be displayed should an


image be missing, or images are turned
off in browser.

ALIGN="..."

Determines horizontal image


alignment; either LEFT or RIGHT.

VALIGN="..."

Determines vertical image alignment;


either TOP, MIDDLE, or BOTTOM.

WIDTH="..."

The width in pixels of an image.

HEIGHT="..."

The height in pixels of the image.

BORDER="..." Creates a border around a linked


image. "BORDERCOLOR=" may also be
specified.

S-ar putea să vă placă și