Html tutorials

HTML Tutorials
• Webpages are written in HTML - a simple
scripting language.
• HTML is short for HyperText Markup
Language.
• Hypertext is simply a piece of text that
works as a link.
• Markup Language is a way of writing
layout information within documents.
• Basically an HTML document is a plain
text file that contains text and nothing else.

• When a browser opens an HTML file, the browser
will look for HTML codes in the text and use them
to change the layout, insert images, or create links to
other pages.
• Since HTML documents are just text files they can
be written in even the simplest text editor. A more
popular choice is to use a special HTML editor -
maybe even one that puts focus on the visual result
rather than the codes - a so-called WYSIWYG
editor ("What You See Is What You Get").
• Some of the most popular HTML editors, such as
FrontPage or Dreamweaver lets one create pages
more or less as documents in Word or whatever text
editor being used.

Why learn HTML?

It is possible to create WebPages without
knowing anything about the HTML source
behind the page. There are excellent editors
on the market that will take care of the
HTML parts. All one needs to do is layout
the page. HTML can be written with almost
any available text editor, including notepad
that comes as a standard program with
Windows.

All you need to do is type in
the code, then save the
document, making sure to
put an .html extension or
an .htm extension to the file
(for instance
"mypage.html").

Tags
Basically, a computer sees an "A" as simply
an "A" - whether it is bold, italic, big or
small. To tell the browser that an "A"
should be bold we need to put a markup in
front of the A. Such a markup is called a
This is an example of bold text

Tag. All HTML tags are enclosed in < and
>.
This is an example of <b>bold</b> text

Example: a piece of text as it appears on the screen.
This is an example of bold text

HTML: the HTML for the above example:
This is an example of <b>bold</b> text

As you can see, the start tag <b> indicates that
whatever follows should be written in bold. The
corresponding end tag </b> indicates that the browser
should stop writing text in bold.

Page Structure
All normal webpages consist of a head and a
body.

The head is used for text and tags that do not
show directly on the page.
The body is used for text and tags that are
shown directly on the page.

<html>
<head>

</head>
<body>

</body>
</html>
Finally, all webpages have an <html> tag at the
beginning and the end, telling the browser where
the document starts and where it stops.

Head Section
The head section of the web page includes
all the stuff that does not show directly on
the resulting page.
The <title> and </title> tags encapsulate the
title of your page. The title is what shows in
the top of your browser window when the
page is loaded. Right now it should say
something like "Vidyanidhi-NASSDOC -
Html Tutorial" on top of the window
containing this text.

often see in the head section is metatags. Metatags are
used for, among other things, to improve the
rankings in search engines. Quite often the head
section contains javascript which is a programming
language for more complex HTML pages. Finally,
more and more pages contain codes for cascading
style sheets (CSS). CSS is a rather new technique
for optimizing the layout of major websites.

Body Section
The body of the document contains all that
can be seen when the user loads the page. In
the rest of this tutorial you can learn in
detail about all the different aspects of
HTML, including:
• Text
• Links
• Images
• Backgrounds
• Tables

HTML Text
To enter text on your pages - all you have to do is
simply enter the text. If you do not specify any
attributes for text it will use the default size, font
etc. of the visitor's browser. Browsers can only
show fonts that are available on the PC. Therefore
you are limited to using the fonts that are available
on almost any computer.

If you need to use a fancy font, you should use
your graphics program to make an image with the
text. This will assure that the visitor will see it -
even if he doesn't have the fancy font you're using.
Since images take up much more space than plain text,
thus increasing download time, you should use this option
with care.

Base Font
To specify the overall font for your page add the
<basefont> tag at the beginning of the <body> section.

Example: The page as it looks in the browser.
Hello! This is my page.
All text looks the same
since I only specified a basefont.
<body>
<basefont face="arial, verdana, courier" size="4"
color="green">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a basefont.<br>
</body>

Font
The <font> tag will change the font.

Example: How the output looks in the browser.
Hello! This is my page.

This local text looks different.

This text looks like the first line.

<body>
<basefont color="green" face="arial" size="4">
Hello! This is my page.<br><br>
<font color="red" face="arial" size="2">
This local text looks different.
</font>
<br><br>
This text looks like the first line.
</body>

Text Links
The tags used to produce links are the <a> and </a>. The <a> tells
where the link should start and the </a> indicates where
the link ends. Everything between these two will work as a
link.The target of the link is added to the <a> tag using the
href=”http://www.learnhtml.com” setting.

The example below shows how to make the word here
work as a link to yahoo.
Click <a href="http://www.yahoo.com">here</a> to go to
yahoo.

You simply:
• Specify the target in the <a href=" ">.
• Then add the text that should work as a link.
• Finally add an </a> tag to indicate where the link ends.

Text Format

These are the tags for text formats :
<b>text</b> writes text as bold
<i>text</i> writes text in italics
<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text</sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including
spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold

Text Size
These are the tags for changing the font size

<big>text</big> increase the size by one
<small>text</small> increase the size by one
<h1>text</h1> writes text in biggest
heading
<h6>text</h6> writes text in smallest
heading
<font size="1">text</font> writes text in smallest
fontsize. (8 pt)
<font size="7">
text</font> writes text in biggest
fontsize (36 pt)

Text Layout
These tags will let you control the layout.

<p>text</p> Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br> Adds a single linebreak where the tag
is.
<nobr>text</nobr> Turns off automatic linebreaks
- even if text is wider than the window.
text<wbr> Allows the browser to insert a
linebreak
at exactly this point
- even if the text is within <nobr> tags.
<center>text</center> Center text.
<div align="center">text</div> Center text.
<div align="left">text</div> Left justify text.
<div align="right">text</div> Right justify text.

HTML Lists

To create a bulleted list you need to add a <ul> and a </ul> tag at the
beginning and the end of the list. Numbered lists have <ol> tags
instead of <ul> tags. To separate single list items use <li> and </li>
tags.

There are special settings that you can use to customize the lists on
your page. In the following pages you can learn in detail about
bulleted and numbered lists.

Bulleted Lists
This page shows how to make different kinds of bulleted lists. You have the
following bullet options:
• disc
• circle
• square

Examples
Look at these examples to see the detailed syntax.
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Makes a bulleted list using the default bullet type:
• text
• text
• text

<ul type="disc">
Starts a bulleted list using discs as bullets:
• This is one line
• This is another line
• And this is the final line

<ul type="circle">
Starts a bulleted list using circles as bullets:
o This is one line
o This is another line
o And this is the final line

<ul type="square">
Starts a bulleted list using squares as bullets:
o This is one line
o This is another line
o And this is the final line

Numbered Lists

This section shows how to make different kinds of numbered lists. You have
the following number options:
• Plain numbers
• Capital Letters
• Small Letters
• Capital Roman Numbers
• Small Roman Numbers

Look at these examples to see the detailed syntax
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

Makes a numbered list using the default number type:
6. text
7. Text
8. text

<ol start="5">
Starts a numbered list, first # being 5.
3. This is one line
4. This is another line
5. And this is the final line

<ol type="A">
Starts a numbered list, using capital letters.
I. This is one line
J. This is another line
And this is the final line

<ol type="I">
Starts a numbered list, using capital roman numbers.
III. This is one line
IV. This is another line
And this is the final line

<ol type="I" start="7">
An example of how type and start can be combined.
• This is one line
• This is another line
• And this is the final line

HTML Images

Introduction
This section will show how to add images to your pages. We will start out with
a presentation of the two main image types on WebPages: jpg and gif. After
that, we will proceed with various ways to insert and customize images, with a
special focus on the different alignments you can choose

GIF and JPG
Computers store images in several different ways. Some storage methods focus
on compressing the size of the image as much as possible.

A major problem with using images on websites is that images take much
longer to load than text. To reduce download times as much as possible two of
the best image compressing formats used on the web are:

GIF JPG
256 colors Unlimited colors
Can handle transparent areas Can't handle transparent areas
This format is not good at Excellent for compressing
compressing photographs
photographs and complex images
In general, it is excellent for banners, In general, it is not good for
buttons and clipart
banners, buttons and clipart.

Inserting in HTML
The tag used to insert an image is called img. Below you see an image called
"rainbow.gif".
Here is the HTML code used to insert the image on this webpage:

<img src=”http://www.learnhtml.com/rainbow.gif”>

If the image is stored in the same folder as the HTML page, you can leave out the
domain reference (http://www.test.com/) and simply insert the image with this
code:
<img src=”rainbow.gif”>

Resizing
You can change the size of an image using the width and height attributes. In
general, it is not advisable to reduce image size using these settings, since the
image will be transferred over the internet in its original size no matter what
reduction is set for it. This will slow the loading of your webpage

<img src="http://www.learnhtml.com/rainbow.gif" width="60" height="60">

If you leave out the settings for width and height, the browser will automatically
use the real size of the image.

Border Around
You can add a border to the image using the border setting shown in the example
below:
<img src="http://www.learnhtml.com/rainbow.gif" border="5">

Alternative Text
<img src="http://www.learnhtml.com/rainbow.gif" alt="This is a text that goes
with the image">

Spacing Around
<img src="rainbow.gif" Hspace="30" Vspace="10">

Alignment of
You can align images according to the text around it, using the following
alignments:
• default aligns the image using the default settings of the Web browser. Same
as baseline.
• left aligns the image in the left margin and wraps the text that follows the
image.
• right aligns the image in the right margin and wraps the text that precedes the
image.
• top aligns the top of the image with the surrounding text.
• texttop aligns the top of the image with the top of the tallest text in the line.
• middle aligns the middle of the image with the surrounding text.
• absmiddle aligns the image with the middle of the current line.
• baseline aligns the image with the baseline of the current line.
• bottom aligns the bottom of the image with the surrounding text.
• absbottom aligns the image with the bottom of the current line.
• center aligns the center of the image with the surrounding text.

Text Wrap Around
<img src="rainbow.gif"
align="left">
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla

bla bla bla bla bla
blabla bla bla bla
bla bla bla bla bla bla bla

HTML Links
Links are the most fundamental part of the world wide web. It is the links that tie
it all together.

There are three different kinds of links you can have on your website:
• Links to anchors on the current page (Internal).
• Links to other pages within the current site (Local)
• Links to pages outside the current site (Global).

It is possible to make texts and images work as links. With a little creativity other
objects, such as push buttons or even drop-down menus can work as links as
well.

How to make a link
Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
The tags used to produce links are the <a> and </a>. The <a> tells where the link
should start and the </a> indicates where the link ends.

Everything between these two will work as a link. The target of the link is
added to the <a> tag using the href="http://www.whateverpage.com" setting.

The example below shows how to make the word here work as a link to
yahoo.

Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
You simply:
• Specify the target in the <a href=" ">.
• Then add the text that should work as a link.
• Finally add an </a> tag to indicate where the link ends.

Colors on Text Links
There are a few settings that can be useful for controlling the colors of text links.

This section will teach you how to:
• Define colors for all links on the page.
• Define colors for individual links on the page.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

Define colors for all links on the page:
The general color of text links is specified in the <body> tag, like in the
example below:

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

• link - standard link - to a page the visitor hasn't been to yet. (standard color is
blue - #0000FF).
• vlink - visited link - to a page the visitor has been to before. (standard color is
purple - #800080).
• alink - active link - the color of the link when the mouse is on it. (standard
color is red - #FF0000).

Link Targets
By default, links will open in the current window or frame. You need to
add a target if you want the link to open in another window or frame
than the link itself is placed in.

To do this you simply add a target="" to the <a href>. This example
will open yahoo in a new window:
<a href="http://www.yahoo.com" target="_blank">

Image Links
If you want to make an image work as a link, the method is exactly the same
as with texts. You simply place the <a href> and the </a> tags on each side of
the image.

Below is the HTML code used to make the image work as a link to a page
called myfile.htm:

<a href="myfile.htm"><img src="rainbow.gif"></a>

Link within a page
Linking to anchors is very similar to normal links. Normal links always point to
the top of a page. Anchors point to a place within a page.

A # in front of a link location specifies that the link is pointing to an anchor on
a page. (Anchor meaning a specific place in the middle of your page).

To link to an anchor you need to:
• Create a link pointing to the anchor
• Create the anchor itself.
<a name="chapter4"></a>
An anchor is created using the <a> tag. If you want to create an anchor called
chapter4, you simply add this line where you want the anchor to be:
<a name="chapter4"></a>
Click <a href="#chapter4">here</a> to read chapter 4.
After doing this, you can make a link pointing to the anchor using the normal <a
href> tag, like this:
Click <a href="#chapter4">here</a> to read chapter 4.

Link to email
<a href="mailto:youremailaddress">Email Me</a>
Having a link that allows visitors to send email from your website can be a great
addition to your site, making it easy for your visitors to send questions or
comments.

There is a special link for this action. Email links are done much the same as
links to other pages, using the
<a href> tag.

An email link would require the following code:

<a href="mailto:youremailaddress">Email Me</a>

HTML Backgrounds
Background Color

Adding a plain background color to your page is easy. All
you need to do is add a bgcolor property to the body tag:
<body bgcolor="#FF0000">

Background Image
To add the background image you will need to specify in the <body> tag which
image should be used for the background.
<body background="drkrainbow.gif">

Fixed Image
The background image will scroll when the user scrolls down the page, unless you
have set it to be fixed:

<body background="drkrainbow.gif" bgproperties="fixed">

HTML Tables

Tables are used on websites for two major purposes:
• The obvious purpose of arranging information in a table
• The less obvious - but more widely used - purpose of creating a page
layout with the use of hidden tables.

Using tables to divide the page into different sections is an extremely
powerful tool.
Almost all major sites on the web are using invisible tables to layout
the pages.

The most important layout aspects that can be done with tables are
• Dividing the page into separate sections.
An invisible table is excellent for this purpose.
• Creating menus.
Typically with one color for the header and another for the links
following in the next lines.
• Adding interactive form fields.
Typically a gray area containing a search option.
• Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a
small banner.
• Easy alignment of images that have been cut into smaller pieces.
• A simple way to allow text to be written in two or more columns next
to each other.

Basic Tags
To insert a table on your page you simply add these tags where you want the table
to occur:

<table>
</table>
The above table would be of no use since it has no rows and no columns.
ROWS:
To add rows to your table use the <tr> and </tr> tags.

Example:
<table>
<tr></tr>
</table>

Basic Tags
It doesn't make sense to write the above lines in itself, cause you can't write content outside
of table cells. If you do write things outside of cells it will appear right above the table.
COLUMNS:
You can divide rows into columns with <td> and </td> tags:

Example:

<table>
<tr> <td>This is row one, left side.</td> <td>This is row one, right side.</td> </tr>
<tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr>
</table>

Table Tags
The following properties can be added to the <table> tag:
align=
left left align table
center center table
right right align table

background=filename image inserted behind the
table

bgcolor=#rrggbb background color

border=n border thickness

bordercolor=#rrggbb border color
bordercolordark=#rrggbb border shadow
cellpadding=n distance between cell and content
cellspacing=n space between cells
Nowrap protects agains linebreaks, even though
the content might be wider than the
browser window.
valign=
top aligns content to top of cells
bottom aligns content to bottom of cells
width=
n,n minimum width of table in pixels
n,n% minimum width in percentage of window size

Row/Cell Tags
These settings can be added to both <tr> and <td> tags.

align=
left aligns content to the left of cells
right aligns content to the right of cells
center aligns content to the center of the cells

background=filename sets a background image for the cells
bgcolor=#rrggbb sets a background color for the cells
bordercolor=#rrggbb sets color for the border of cells
bordercolordark=#rrggbb sets color for the border shadow of cells

These settings are only valid for <td> tags

colspan=n number of columns a cell should span
Nowrap protects agains linebreaks, even though the content
of a cell might be wider than the browser window
rowspan=n number of rows a cell should span

Html tutorials

Recommended

More Related Content

What's hot (20)

Similar to Html tutorials (20)

More from Deputy Chief Librarian & Head (6)

Recently uploaded (20)

Html tutorials