HTML Lessons

HTML

Hyper Text Mark-up Language

HTML stands for Hyper Text Mark-up Language. No web pages can be written in normal languages. There has to be a specific script for these pages to be created. By 1993, almost all computers were equipped to serve HTML pages. HTML and JAVA are some of the Internet programming languages. HTML is a scripting language that makes up a web page with several formatting commands. These commands are interpreted by a web browser and are then send to the screen.

We can design beautiful web pages and also link them with another. We can also insert sound, graphics and animation into the pages. To write the coding, one requires a text editor like, Notepad or WordPad. After writing the HTML script, save the file with “.HTML” extension.

Web browser

A web browser is another program that interprets the scripts to collect, arrange and display the parts of a web page.

Eg: Microsoft Internet Explorer

code

There are 3 methods for coding HTML codes. They are,

ABACUS method.

It is an excellent way of learning HTML coding. This is done using simple text editor such as Notepad or WordPad.

HTML editor.

This is known as HTML editor. These editors offer an ASCII editing environment thereby having plenty of support for various HTML codes. This is an excellent choice for beginning HTML coding, because you can use them as a plain text editor and then begin employing some of the power features, once you are confident of it.

WSIWYG method.

This is an acronym for “What You See Is What You Get”. They are often good products for larger production companies and it is good to be familiar with them.

Eg: Microsoft Front Page, Adobe Page mill, Claris Homepage,Dreamweaver

HTML foundations

There are several tags that are used to create the pages using HTML. These tags are the foundations for any good HTML pages. A tag is a coded command used to indicate how a part of a web page should function. These statements are enclosed within a pair of “< >”. These tags tell the browser what to do with that section. HTML tags have two pairs of tags showing where a piece of text begins and where it ends.

Colour codes in HTML

You can use 16 Windows colours in HTML pages. They are,

Black, Blue, Red, Green, White, Yellow, Magenta, Cyan, Purple, Grey, Lime, Maroon, Navy, Olive, Silver, Teal.

For colour code chart click here

Explanation of some attributes in HTML.

Ø Background : To specify the background picture for your

web page.

Ø Bgcolor : To specify the background colour for your

web page.

Common HTML tags.

<HTML> </HTML>

This tag indicates the web browser that the particular file is a HTML file.

<HTML>

HELLO DEAR FRIENDS!

</HTML>

<BODY> </BODY>

This shows the area in the HTML file that will appear in the web page.

<HTML>

HELLO DEAR FRIENDS!

</BODY>

</HTML>

<BGSOUND SRC=“PATH OF THE FILE”>

“WAV” files or “MP3” files can be played in the background

TITLE> </TITLE>

This is used to assign a title for the title bar for the web page.

<HTML>

<BODY>

<TITLE>

HELLO DEAR FRIENDS!

</TITLE>

</BODY>

</HTML>

<H1>------</H1>, <H2>-------</H2>, …………, <H6>--------<H6>

Sets heading for a piece of text, automatically.

<H3> WORLD </H3>

<SUP> </SUP>

This is used to insert text as superscript along with any other text. The text that has to be put as superscript has to be specified between the “<SUP> </SUP>” tags.

<HTML>

A <SUP> 2 </SUP>

</HTML>

<SUB> <SUB>

This is used to insert text as subscript along with any other text. The text that has to be put as subscript has to be specified between the “<SUB> </SUB>” tags.

<HTML>

H <SUB> 2 </SUB> SO </SUB> 4 </SUB>

</HTML>

<P> </P>

This is used to create paragraphs. A paragraph is a series of text.

<HTML>

<BODY>

HELLO DEAR FRIENDS! <P>

INTERNET EXPLORER BRINGS MANY FEATURES TO YOUR WINDOWS DESKTOP

</P>

</BODY>

</HTML>

Note: </P> tag is optional.

<B> </B>

This is used to make a set of statements bold.

<HTML>

<B> HELLO DEAR FRIENDS! </B>

</BODY>

</HTML>

<I> </I>

This is used to italicise a set of statements.

<HTML>

<I> HELLO DEAR FRIENDS! </I>

</BODY>

</HTML>

<U> </U>

This is used to underline a set of statements.

<HTML>

<U> HELLO DEAR FRIENDS! </U>

</BODY>

</HTML>

<STRIKE> </STRIKE>

This is used to give a strike through effect for a set of statements.

<HTML

<B> HELLO EVERYBODY! </B>

<STRIKE> GOOD AFTERNOON </STRIKE>

</BODY>

</HTML>

<MARQUEE> </MARQUEE>

This tag is used to move a text in different directions in a web page.

BEHAVIOR ( SLIDE / ALTERNATE)

LOOP (Number of times)

DIRECTION (Up/Right/Left/Bottom)

<BGSOUND>

This is used to play any background music for the web page. “WAV” files or “MP3” files can be played in the background.

<BGSOUND SRC=“PATH OF THE SOUND FILE”>

<FONT> </FONT>

This tag is used to set font for a set of statements. The user can set the font, font colour, font size etc… for a set of statements in the page.

Some attributes can be used along with this tag for specifying certain effects for the statements.

· FACE --- Specifies the name of the font required.

<FONT FACE=“TIMES NEW ROMAN”> JOSEPH </FONT>

· COLOR --- Specifies the colour of the selected font.

<FONT COLOR= “BLUE”> HELLO DEAR </FONT>

· SIZE --- Specifies the name of the selected font.

< !-- -->

This tag is used to insert any sort of comments in that part of HTML script. The text inside this tag will not be executed in the web page.

<!--

THIS IS MY FIRST PAGE

-->

<BLINK> </BLINK>

This tag is effective only in Netscape Communicator browser and not in Microsoft Internet Explorer.

<BLINK> HELLO EVERYBODY </BLINK>

<DIV> <//DIV>

This is used to align several paragraphs. It can also be done using <P> </P> tags.

<HTML>

<DIV ALIGN= “CENTER / LEFT / RIGHT”> THIS IS MY FIRST PAGE </DIV>

</BODY>

</HTML>

<PRE> </PRE>

We can place text in the desired way in the script. We can provide spaces between the paragraphs by specifying a pair of <PRE> </PRE> tag.

<HTML>

<DIV ALIGN= “CENTER / LEFT / RIGHT”> Internet Explorer brings many features to your Windows desktop: the ability to browse the Web from anywhere on your computer. Internet Explorer brings many features to your Windows desktop: the ability to browse the Web from anywhere on your computer.

</PRE>

</DIV>

</BODY>

</HTML>

<BLOCKQUOTE> </BLOCKQUOTE>

This is used to place the text between the tags with a margin space.

<HTML>

< BLOCKQUOTE > Internet Explorer brings many features to your Windows desktop: the ability to browse the Web from anywhere on your computer. </BLOCKQUOTE >

</BODY>

</HTML>

<TT> </TT>

It is used for displaying text in the web page in typewriter font. It is also called “Micro faced font”.

<HTML>

<TT> This is my first page this is my first page this is my first page </TT>

<FONT FACE =”ARIAL” COLOR = “WHITE”> This is my first page this is my first page this is my first page.

</FONT>

</DIV>

</BODY>

</HTML>

<HR>

It is used to create horizontal lines in a web page. The attribute, “size” is used to specify the size of the line and the attribute, “color” is used to specify the colour of the line.

<MULTICOL> </MULTICOL>

<A HREF TARGET=”PATH OF THE TARGET FILE” > </A>

<A> </A>

“Hyper” means, “more than” or “outside of”. A hyperlink takes you to another web page that gives you more than what was on the original page.

The anchor tag is used to create a link a page with a different web page. “HREF” stands for “hypertext reference”. The name of the page that has to be linked with, or the URL (Universal Resource Locator) has to be specified along with this tag.

The item, clicking on which, clinking takes place, is specified between these tags. Whenever the mouse pointer is brought on this item, the mouse pointer changes to a G hand.

Two types of linking

1. Relative linking

If the web page that is to be linked is in the same directory, then we can link them by specifying the filename. Here, address of the another HTML file in the same directory is specified. A relative address describes the path from one webpage to another.

2. Absolute linking

Linking any two web-pages by specifying the entire URL is known as absoulute addressing. This type of linking is generally used when the web pages to be linked are in different directories.

Method of linking

<A HREF = “PATH OF THE FILE”> CLICKABLE COMMENT </A>

Eg : <A HREF= “C:\MY DOCUMENTS\INDEX.HTML”> CLICK HERE </A>

If the web page is long one, you can create links within that page for various topics. For this, “NAME” option is used.

<A NAME= “ANY WORD”>

---------------------------------

</A>

If a portion is to be accessed from the same web page, you can use,

<A HREF= “#ANY WORD”> CLICKABLE COMMENT </A>

If the same has to be done form a different page,

<A HREF=“FULL PATH OF THE FILE #ANY WORD”> CLICKABLE COMMENT </A>

Eg: <A HREF=“C:\INDIA.JPEG # BHARATH”> DISCOVER INDIA </A>

Linking colours

<BODY BGCOLOR=“BLACK” LINK=“BLUE” VLINK=“GREEN” ALINK=“RED”>

LINK --- Original linking colour

VLINK --- Visiting link (Colour when clicked)

ALINK --- Activate link (Colour when refreshed)

LISTS

HTML has several ways of lists, which allows you to display group of information in different ways.

(1) Unordered lists

<UL> </UL> : Unordered lists

<LI> </LI> : Line

<HTML>

<BODY>

<U> <B> Operating Systems </B> </U>

<UL>

<LI> MS-DOS </LI>

<LI> MS-WINDOWS’ 98 </LI>

<LI> MS-WINDOWS N.T. </LI>

<LI> LINUX </LI>

</UL>

</BODY>

</HTML>

Output

Operating Systems

· MS-DOS

· MS-WINDOWS’ 98

· MS-WINDOWS N.T.

· LINUX

The “TYPE” attribute is used with <UL> tag to specify the type of bullet that is to be used for the given set of lines.

<UL TYPE = “CIRCLE / SQUARE / DISC”>

(2) Ordered lists

<OL> </OL> : Ordered lists

<LI> </LI> : Line

<HTML>

<BODY>

<U> <B> Application Softwares </B> </U>

<OL>

<LI> MS-OFFICE 2000 </LI>

<LI> ORACLE </LI>

<LI> JAVA </LI>

<LI> ADOBE PHOTOSHOP </LI>

</OL>

</BODY>

</HTML>

Output

Application Softwares

1. MS-OFFICE 2000

2. ORACLE

3. JAVA

4. ADOBE PHOTOSHOP

The “TYPE” attribute is used with <OL> tag to specify the type of numbering for the given set of lines.

<OL TYPE = “A”> --- A, B, C, D,----------

<OL TYPE = “a”> --- a, b, c, d,-------------

<OL TYPE = “I”> --- I, II, III, IV,---------

<OL TYPE = “i”> --- i, ii, iii, iv, ----------

The “START” attribute is used with <OL> tag to specify the starting value for numbering of the given statements.

<OL START = “7”> ---- Numbering from 7, 8, 9

(3) Description lists

<HTML>

<BODY>

<U> <B> Operating Systems </B> </U>

<DL>

<DT> MS-DOS </DT>

<DD> COMMAND USER INTERFACE (CUI) </DD>

<DT> MS-WINDOWS ‘98 </DT>

<DD> GRAPHICAL USER INTERFACE (GUI) </DD>

</DL>

</BODY>

</HTML>

Output

Operating Systems

MS-DOS

COMMAND USER INTERFACE (CUI)

MS-WINDOWS ‘98

GRAPHICAL USER INTERFACE (GUI)

Images or pictures on the web pages.

A text only web page is not an eye-catching one, and of course, one gets bored of them after a little while. You can decorate the web page with different images. These images give your page life & beauty. All picture files with the following extensions can be given as images in the web page ( . GIF / . JPEG / . JPG).

<IMG SRC=“PATH OF THE FILE” ALT=“ANY COMMENT” BORDER=0>

The “ALT ” stands for alternate text used for displaying in the specified area, during the tome the picture is downloaded onto the web page. Old web browsers did not support images. So, the text with “ALT” tag was placed instead of images. We can “ALIGN” attribute to position the image to the left or right.

To align the image, you can use the <DIV> tag.

<DIV>

<IMG SRC=“PATH OF THE FILE” ALIGN= “LEFT / RIGHT/CENTER”>

</DIV>

To have floating images (i.e., image on one side and text on other side of the image), remove all <BR> and <P> tags between the text and image. You can even provide a preview image (Outline image). Along with “LOW SRC” option, the outline image filename with extension has to be specified. The web browser, when encounters the “LOW SRC” option, it first loads that image and then loads the main image.

<IMG SRC=“FIRST FILE PATH” LOW SRC= “SECOND FILE PATH” ALT=“ANY COMMENT”>

You can specify width and height for the picture that is to be inserted in the web page. By this, we can reduce the image size.

Image map

You can sub-divide an image into several portions that link to various pages depending on the area of click. This is called an image map. All the image maps have to be created using the latest method called the client-side image map.

To create an image map, the following tag can be used.

<MAP NAME= “SAMPLE”> </MAP>

After that you need to have an <AREA> tag for each region of the image. There are different types of regions.

<AREA SHAPE = “RECT” COORDS = “0,0,80,80” HREF =“FIRST.HTML”>

In the above case,

“SHAPE” indicates that the region is either a rectangle, circle or a polygon, ie

(RECT / CIRCLE / POLY)

“COORDS” indicates the top, left, right and bottom corner of the rectangular region. “HREF” refers to the page that the item has been linked with.

<IMG SRC = “PATH” USEMAP = “#MAPNAME” WIDTH=700 HEIGHT=500>

Here, “width” and “height” are use to specify the width and height of the picture.

Example for image mapping

</AREA>

</MAP>

FRAMES

Frames are basically different ways of arranging and presenting several web-pages within a single web-page. A frame is a rectangular region within the browser window that disdplays a web-page along side other pages in other frames. The main advantage of using a frame is that when you click on a link on a page, the top & bottom or the left & right portion of the page will not be changed. But, the new page will be loaded and displayed in your frame, where you have clicked.

<FRAMESET COLS//ROWS = “SIZE OF THE PAGES (IN %)”>

<FRAME SRC= “PATH OF THE FIRST HTML FILE”>

<FRAME SRC= “PATH OF THE SECOND HTML FILE”>

<FRAME SRC= “PATH OF THE THIRD HTML FILE”>

</FRAMESET>

The attribute, “SCROLLING” can be used with <FRAME SRC> tag for preventing the user from scrolling in the web page.

<FRAME SRC= “PATH OF THE FIRST HTML FILE” SCROLLING=“NO”>

In order to prevent the user from resizing the web page, the border size of the web page can be made “0”. The border sizecan be assigned a numeric value according to the user’s choice.

<FRAME SRC= “PATH OF THE HTML FILE” BORDER=“0”>

The attribute, “NAME” can be used to set a particular web page as a frame while linking pages. Normally, while linking a web page, the new file is displayed in the current frame itself. This can be avoided by specifying a name for that web page while specifying the <FRAME SRC> tag.

<FRAME SRC= “PATH OF THE HTML FILE” NAME=“CM-1”>

In the web page from where the linking takes place, the attribute, <TARGET> has to be specified for indicating the target page as the frame, when the linking object is clicked in the original page. This can be done by the following method.

<A HREF = “PATH OF THE FILE” TARGET = “CM-1”> Click Here </A>

TABLES

Tables are the vertical and horizontal arrangement of any given data. Data is arranged in a systematic order in a table. Tables can be created by specifying the necessary scripts between <TABLE> ----- </TABLE> tags.

<CAPTION> --- </CAPTION>

These tags are used to specify a caption for the table.

Along with <TABLE> ------ </TABLE> tags, we can use the following attributes.

§ WIDTH --- width of the cells

§ HEIGHT --- height of the cells

§ BGCOLOR --- colour of the background

§ BORDER --- size of the border

§ BACKGROUND --- specifies background image

§ CELLSPACING --- space between each cells

§ CELLPADDING --- space between the cellwalls and the

cell contents

· <TR> ----- </TR>

Used to create rows in a table in the web page. Along with this tag we can use the following attributes.

align --- specifies the alignmentof the cell contents

background --- specifies background image

bgcolor --- colour of the background

· <TH> ----- </TH>

Used to specify the table heading in the web page. Along with this tag we can use the following attributes.

font size --- specifies the font size for the cell contents.

font color --- specifies the font size for the cell contents.

rowspan --- specifies the number of rows to be spanned.

colspan --- specifies the number of columns to be spanned.

Note : All these attributes are for that row only.

· <TD> ------ </TD>

Used to specify the table data. Along with this tag we can use the following attributes.

font size --- specifies the font size for the cell contents.

font color --- specifies the font size for the cell contents.

rowspan --- specifies the number of rows to be spanned.

colspan --- specifies the number of columns to be spanned.

bgcolor --- colour of the background

background --- specifies background image

To align the data (Left/Right/Center), the <DIV> --- </DIV> tags. We can even link the table data items to another items in another web pages. For this, we wil have to specify the linking item in between <A HREF> --- </A> tags. Images can also be brought to the tables by specifying the path of the image file in the <IMG SRC> tag. The width and height of the picture can also be specified along with this tag.

<TR><TD>Anitha <TD BGCOLOR=CYAN>XV/43<TD><IMG SRC="PATH OF THE FILE” WIDTH=50 HEIGHT=70>

FORMS

HTML can be used to create forms which can be placed on a web page. A form is an area on which several other controls can be placed in order to make the page little more attractive. Using FORMS, we can create sign-up forms, registration forms, etc.. that can be used for sending or recieving various informations, to and from the people around the world.

The <FORM> tag is used to cretae a form on a web page.

HOME

NEXT>>

Want Easy lessons and exercises!! Then search here: