Simple HTML

by Prof.Chiramel Baby B.Tech

What is HTML

HTML is called Hyper Text Markup Language, the document description language used to author Web pages, recognized and processed by all browsers.

The file containing html will have .htm or .html as extension. you can type this file in notepad or in any html editor like firstpage

Html contains tags. Their function is to describe or effect the presentation of the page element the tag controls.

Tags can be container tags (paired) or standalone tags (single).

Some of the tags are description tags, which describe the contents inside.

Some tags describe the contents and got a presentation syle.

Paired tags got a starting and ending For example the entire document is enclosed in the paired tag

This tag tells the entire contents is html code

all tags are given inside this tag. All the tags given should be properly nested.

Two main sections head and body

html tag contains two main section tags head and body

head and body sections can contain many tags. The contents of tags in the head section is not displyed on the web page. One tag which we use inside head tag is title. the title enclosed in head tag will appear in title bar of the browser window.

<html>
<head>
<title>my page title</title>
</head>
<body>
Here we can give all the contents to be displayed on the page
</body>
</html>

body can cantain all text that is to be displayed on the page

BR and P tags

Html considers only one space between words additional spaces are rejected. Also even if you write the contents on different lines using enter key, the enter key is negleted by html. The text will appear inline.

<body>
Once upon a time
there was a king
</body>

Will appeare as

Once upon a time there was a king

To break the line we give <br> tag which is a standalone tag
To have a paragrah break we give <p> something </p>

<body>
Once upon a time<br>
there was a king
<p>
he was very rich
</p>
his kingdom was far and wide
</body>

will appear as

Once upon a time
there was a king

he was very rich

his kingdom was far and wide

Attributes

Tags can have attributes. They change the presention style of the tag. Body tag can have text color, background color or background image.

<body text="red" bgcolor="cyan">
Once upon a time<br>
there was a king
</body>

This will appear as

Once upon a time
there was a king

<body text="red" background="backg1.gif">
Once upon a time<br>
there was a king
</body>

This will appear as

Once upon a time
there was a king

The colors can be given as color names predefined in HTML or as color code.

colors

Colors can be given as color names or color code
bgcolor="#ff0000" text="#0000ff"
"#ff0000" is a six digit hexadecimal number for the color red.

THE PREDEFINED COLORS IN HTML

black	#000000	silver	#cococo
gray	#808080	white	#ffffff
maroon	#800000	red	#ff0000
purple	#800080	fuchsia	#ff00ff
green	#008000	lime	#00ff00
olive	#808000	yellow	#808000
navy	#000080	blue	#0000ff
Teal	#008080	aqua	#00ffff

HOW TO GIVE PATH TO IMAGE FILES

If the image file is in the same directory as your html file go not guve path

if it one directory forward in images directory in your present directory give path

background="images/boxes.gif"

If the images directory is in a directory one step behind your present directory give the path as

background="../images/boxes.gif"

There are six heading styles H1 to H6

<h1>this is heading h1<h1>

<h2>this is heading h2<h2>

etc upto h6
they will appear as

this is heading h1

this is heading h2

this is heading h3

this is heading h4

this is heading h5

this is heading h6

Drawing lines

the tag for drawing lines is

<hr>

This will give a line like

It can have certian attributes

will give

Width can be pixels or % of screen width=50% will give

align can be left, right or center
size is given in pixels size=10 is as shown below

if noshade attribute is absent the line will be groovy like

TEXT STYLES

<i>this is italic</i>

<u>this is underlined</u>

they will appear as

this is bold
this is italic
this is underlined

center tag is used to center align the text
font tag with its attributes is given to display the text enclosed according to color, size, face

<center><font size="4" color="RED" face="Comic Sans MS"> Welcome to my home page </font></center>

will appear as Welcome to my home page

The size can vary from 1 to 7 where 7 is the hight font size. defalut font size is 3. You can also give font as size=+3. this means the size is 6. the defalut for the page is fixed using basefont tag

Base font will alter the default font from that point onwards to the rest of the document. Font tag will apply to only the text enclosed in that tag.

UNORDERED LISTS

The unordered lists are bulleted lists, they are enclosed in <ul></ul> tags. Will contain any number of list item tags <LI>. Both this tags can have type attribute for the type of bullet. They can be disc or flllround, square, circle.

<ul type="disc" compact >
<li type="fillround" >fillround </li>
<li>disc
<li type=square>square
<li type=circle>circle
</ul>

This will appear as

fillround
disc
square
circle

Both fillround and disc are the same, it is the defalut
The word compact is for making the spacing compact. you need not give this attribute.

ORDERED LISTS

<ol type="1" start =3 >
<li>floppies
<li>hard disk
<li value=7>monitor
<li>cd drive
</ol>

This will give numbered list according to the type. Start is the starting number. With the value in li tag you can change the numbering in between. The result is as shown below.

floppies
hard disk
monitor
cd drive

The type attribute can be
1 will give counting numbers 1,2,��
A will give Uppercase letters A,B,��
a will give lowercase letters a,b,c,��
I will give Uppercase roman numerals I,II,��
i will give lowercase Roman numerals i,ii,��

DEFINITION LIST

This is enclosed in <DL></DL> tag. There will be a definition term <DT followed by definition description <DD.

<DL>
<DT>HTTP
<DD>Hyper text transfer protocol
<DT>FTP
<DD>File transfer protocol
</DL>

They will appear as

HTTP: Hyper text transfer protocol
FTP: File transfer protocol

IMAGES

HTML accepts two picture file formats .gif and.jpg

will appear as jim graham

alt: alt messge is displayed as tooltip and as alternate text to display if image is not loaded
Width,height :: in pixels, if not mentioned it will give full size of the picture
Border:: Sizes of border is in pixels or %
align:: Top, middle, bottom with respect to text. Default is bottom
Left, right with respect to screen

TABLES

Tables are used for presenting tabular values and for alignment purpose.

<table border =1 width=50%>
<thead> <tr><th>head1</th><th>head2</th><th>head3</th></tr>
</thead>
<tbody>
<tr><td>cell11</td><td&t;cell12</td><td>cell13</td></tr>
<tr><td>cell21</td><td>cell22</td><td>cell23</td></tr>
</tbody>
<tfoot>
<tr><td colspan=3 align=center> this is table footer</td></tr>
</tfoot>
</table>

will appear as

head1	head2	head3
cell11	cell12	cell13
cell21	cell22	cell23
this is table footer

Table tag can have three sections names thead, tbody, tfoot. They are optional even if you omit then, it wont make any difference to the table.The three section tags in table can be omitted when the cols and rows are to merged to form complicated table.

tr: stands for table row

th : in contained in tr, represents table head cell, given in bold and center aligned.

td : table data given inside tr, is left aligned by defalut

Attribures of table tag

Summary: summary attribute will not appear any where.only for documentation purpose
ALIGN: Horizontal alignment, left, center, right
VALIGN: Vertical alignment of cell contents. Top, middle, bottom
WIDTH, HEIGHT: No of pixels or % of screen width
BORDER: Border thickness value given in pixels
Cellpadding: Distance from cell border to the data in cell
Cellspacing: Space between cells
COLSPAN: In th and td tags , the cells merge horizontally
ROWSPAN: In th and td tags , the cells merge vertically

You can have a caption for the table at bottom or top

<caption align="top">mytable</caption>

Make the following table

marks table
Name	Marks
Name	Access	html	ASP
Shilpa	21	45	30
Vaishali	26	30	40

The code

<table border="1" width=100% bgcolor="#00ffff">
<caption align="top" >marks table </caption>

<tr>
<th rowspan=2 align="left" Valign="bottom">Name</th>
<th colspan=3>Marks</th>
</tr>

<tr align= "Right">
<th>Access</th><th>html</th><th>ASP</th>
</tr>

<tr>
<td>Shilpa</td>
<td align= "Right">21</td>
<td align= "Right">45</td>
<td align= "Right">30</td>
</tr>

<tr>
<td>Vaishali</td>
<td align= "Right">26</td>
<td align= "Right">30</td>
<td align= "Right">40</td>
</tr>
</table>

The colspan and row span merges the cells. where the defalut alignment is not ok, there the alignment is given

HYPERTEXT, HYPERLINK OR HOTSPOT

HTML allows linking to other HTML pages or images
This is a link
The links are usually underlined and blue, after visiting they take maroon color. You can set the colors for link, visited link, active link by changing them in the body tag.

The standard colors, blue, maroon, red should not be changed, as visitors are used to these colors.
alink is active link color and vlink is visited link color

<a href="myhome.html" title="myhome page" >visit my home page</a>

Will appear as
visit my home page
To give a tooltip with a link you can use the attribute Title. Title attribute can be given with most of the tags.

Anchor

Anchor is used to jumb within a page to a section not yet displayed on the screen.

will appear as
top
where the link has to take you give the following tag

this is called anchor
you can go directly to anchor on another page

The above type of link can be used to go to a particular anchor in another page.

IMAGES AS HYPERLINKS

When images are used as hyperlinks use border =0 otherwise a blue border will appear around the image. An image can have several hotspots for this we use image map.

map can be given anyware on the page

In a rectangle the top corner is 0,0. if a figure of 100X200 pixels is divided into four rectangles. The bottom corner of the first rectangle is 50, 100. that is x axis is 50 pixels, and Y axis is 100 pixels from the top corner. Rectangle coordinates are 0,0,50,100.

shape can be Circle, rect, polygon,default
In the case of circle you give x,y,r as coords. The coords of the center and radius. The polygon you give coordinates of vectors.
each area when you click it will go to the particular page

OTHER SIMPLE TAGS NOT COVERED ABOVE

will appeare as big

<blink>blink works in Netscape</blink>

<marquee align=left behavior=scroll bgcolor=cyan height=50 width=600 direction=left >
<font size=20>
works in internet explorer. This text will scroll
</font>
</marquee>

display is shown below
works in internet explorer. This text will scroll

<s>strike through</s>

~~strike through~~

<small>small</small>

small

x<sub>2</sub>

x₂

x<sup>2</sup>

x²

<tt>this is teletype</tt>

this is teletype

<cite>citation</cite>

citation

<em>emphasizes text</em>

emphasizes text

<strong>strong text</strong>

strong text

<blockquote>once upon a time there was a king. he was very rich. creates a quotation block </blockquote>

once upon a time there was a king. he was very rich. creates a quotation block

<center>center text</center>

center text

<pre>

                       comes
			where
	you
	               typed

</pre>

will appear as

                       comes
			where
	you
	               typed

FRAMES

Frames are not supported by all browsers and hence should be avoided as far as possible. First you divide the screen into frameset 2 or 3 or more as cols or rows. Each section of the frameset can have a frame or another frameset. Each frame can display a different HTML file and will be recognized by a name.

<html><head>
<title>New Page 1</title></head>
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize target="contents" src="aqk.htm">
<frameset cols="150,*">

<frame name="contents" target="main" src="a2.htm">
<frame name="main" src="a3.htm">

</frameset>

<noframes>
<body>This page uses frames, but your browser doesn't support them. </body>
</noframes>

</frameset>
</html>

The frameset tag is not given in head or body. You can give it after the head tag. In the above example the screen is first divided into two rows, one of 64 pixels and the other rest of the area. In the top part a frame is given with the name banner with an HTML file aqk.html
noresize makes the frame a fixed frame
scrolling ="no" gives no scroll bars in the frame.
The bottom part is again divided into frameset with two cols. And this frame set contains one frame each with an HTML file in each.
The target attribute is given as indicator to show in which frame the file should be opened when clicked on a link. To open the link in a particular frame you have to give a target in the link itself.

this link given in a file in any frame will get opened in the frame main.

<a href="b.img" target="_blank">the image</a>

The target attribute in the above tag opens the image file in a new window.

This target attribute will make the page to burst out of frame. That is frame page will not be displayed. The HTML file will occupy the full view area without any frames.
If no target attribute is given in a link, the file fill open in the same frame as the link.
The nofrmes tag will have the message to be displayed if the frames are not supported by the browser. This can be placed inside the first frameset and can have the body tag and all other HTML tags as per requirements.

Hosted by www.Geocities.ws

Simple HTML by Prof.Chiramel Baby B.Tech

What is HTML

Two main sections head and body

BR and P tags

Attributes

colors

THE PREDEFINED COLORS IN HTML

HOW TO GIVE PATH TO IMAGE FILES

There are six heading styles H1 to H6

this is heading h1

this is heading h2

this is heading h3

this is heading h4

this is heading h5

this is heading h6

Drawing lines

TEXT STYLES

UNORDERED LISTS

ORDERED LISTS

DEFINITION LIST

IMAGES

TABLES

Attribures of table tag

The code

HYPERTEXT, HYPERLINK OR HOTSPOT

Anchor

IMAGES AS HYPERLINKS

OTHER SIMPLE TAGS NOT COVERED ABOVE

FRAMES

Simple HTML

by Prof.Chiramel Baby B.Tech