Home Page of Nilopam Sikder

 

 

 

 

HTML Tutorial

 

Four basic paired tags

<html></html>, <head></head>,
<title></title>, and <body></body>.

The next tag we'll learn about is the paragraph tag:　　<p></p>

Like the basic tags, it is a paired tag. You should　surround all text you want in paragraphs with this tag. 　For example, to write the above paragraph in HTML, you would write:
<p>　The next tag we'll learn about is the paragraph tag.　</p>

The <p></p> tag doesn't always do exactly what you want. It adds additional space after the paragraph in question, and sometimes you just want to drop down one line of text,
such as in a street address.　For this you would use the non-paired line-break tag:
<br>　Learn how to use the <p></p> and <br> tags:
 
ADDING HEADINGS
There is more to HTML than just paragraphs and line breaks. You can organize your Web pages in specific ways to make　them easier to read and understand. There are six headings　in HTML <h1></h1> through <h6></h6>

BOLD AND ITALICS
Another way to modify your text is to use bold <b></b> and italic <i></i> tags to change the way words and phrases look.

BLOCKQUOTE
The <blockquote></blockquote> tag is most often used to　indent text for quotations. Most browsers also put a space before and after the indented text to further call
it out.

 

PRE-FORMATTED TEXT
Sometimes you want to have the Web page display exactly　what you type. Especially when you're writing code or　other formatted text on the page. The <pre></pre> tag
ensures that the content looks exactly as you type it, including spaces and hard returns.

Some common uses of pre-formatted text are:
* documenting HTML and other programming code
* converting a non-HTML document quickly

 

RULE LINES
Lines are a great way to divide up your Web pages. The <hr>　tag is a singleton tag that will create horizontal lines in various sizes on your page.

 

FONTS
It's easy to change the look and feel of the text on your Web pages. There is a single tag: <font></font>　that does all that work for you.

You can change the face (the actual font used):
http://html.about.com/library/nosearch/bl_class4-1.htm
The size (1-7 standard sizes):
http://html.about.com/library/nosearch/bl_class4-2.htm
Or even the color:
http://html.about.com/library/nosearch/bl_class4-3.htm

 

COLOR
Color on the Web presents a few interesting challenges.For some of the basic colors, you can simply use the color names (red, blue, green, etc.), but that doesn't give you the wide range of color options available to computers. Also, if you use a named color, you risk
having it not display correctly on the Web.　For reference, the named colors:
http://html.about.com/library/bl_namedcolors.htm

For reference, the browser-safe colors:
http://html.about.com/library/bl_colors.htm

 

SPECIAL CHARACTERS
When you're writing HTML, you have to use certain　characters to define the HTML, such as < and >, but how do you write these so that the browser doesn't think they are a tag? You use special character codes.

You can also use special character codes to display　icons such as the copyright symbol, registered symbol, superscripts and subscripts, and accent marks for non-English text.

Learn how to use special character codes:
http://html.about.com/library/nosearch/bl_class4-5.htm

 

LISTS
There are three types of lists used on the Web:
* ordered lists
* unordered lists
* definition lists

To define a list, you first state what type of list it is, and then use a list tag to define the list element. The <li></li> tag defines most list elements.

Read about the <li></li> tag:
http://html.about.com/library/tags/bl_li.htm

 

ORDERED LISTS
Ordered lists are lists that step you through them one by one. They are most often used in things like how tos or recipes where there is a specific order
to the list. 　Learn about the <ol></ol> tag:
http://html.about.com/library/nosearch/bl_class5-1.htm

UNORDERED LISTS
Unordered lists are used when you just want to display a list of elements in any order. They are usually preceded by a bullet or other icon to indicate the list elements. You use the <ul></ul> tag to define an unordered list.
Information on the <ul></ul> tag:
http://html.about.com/library/nosearch/bl_class5-2.htm

DEFINITION LISTS
Definition lists are slightly different from　the first two list types. To set up a definition
list, you use first the <dl></dl> tag:　http://html.about.com/library/tags/bl_dl.htm

Then, you indicate the term (word or phrase)　to be defined with the <dt></dt> tag.

Finally, you write the definition of the term　with the <dd></dd> tag.

Learn about definition lists　http://html.about.com/library/nosearch/bl_class5-3.htm

IMAGES
The Web uses two basic image types: GIF and JPG.

And there is one tag used to add images to pages, 　the <img> tag:
http://html.about.com/library/nosearch/bl_class6-2.htm

Once you understand that tag, you should learn the　various attributes of it:
http://html.about.com/library/nosearch/bl_class6-3.htm

To make your images display correctly, you need to be sure to link to them correctly and actually　upload　them　to　your　hosting　server                              .   　　　http://html.about.com/library/nosearch/bl_class6-4.htm

 

Using the img Tag
<img src="URL to the image" width="width in pixels" height="height in pixels" alt="alternative description of the image">

 

FASTER IMAGES
Images are fun to use and add interest to your pages, but they are the most common cause of slow downloading pages. Here are three tips to keeping your images useful on your site: http://html.about.com/library/nosearch/bl_class6-5.htm

If you have followed the three HTML steps to improve your images and they are still slow to download, then you should optimize them                       :  http://html.about.com/library/nosearch/bl_class6-6.htm

FINDING IMAGES
The best place to find images for your site is from photographs you have taken. These images will be more personal and individual, and there won't be any
copyright issues. Learn how to go from a photograph to a Web site image:
http://html.about.com/library/nosearch/bl_class6-7.htm

But if you don't want to use your own photos, there are lots of resources on the Web for finding free images: http://html.about.com/msubfreegraphics.htm

Remember that if you take an image from another Web site you may be infringing on the owner's copyright. Be sure to use images that are free for personal or commercial
use (as appropriate). http://html.about.com/library/weekly/aa081700a.htm

 

LINKS
You can link images and text to other Web pages with one simple tag: <a></a>.

The <a></a> tag is called an anchor, and there are a few things you should know about how to use it for links: http://html.about.com/library/nosearch/bl_class7-1.htm

INTERNAL LINKS
If you have a Web page with a lot of information, it is a good idea to set up a table of contents at the top of the page that links to the sections of your page. These are called internal links (and sometimes bookmarks).
http://html.about.com/library/nosearch/bl_class7-2.htm

IMAGE MAPS
Image maps are basically just fancy links that allow you to set up clickable areas on your images. You set up the map with the <map></map> tag, and then define the
clickable spots with various <area> tags.
http://html.about.com/library/nosearch/bl_class7-3.htm

 

TABLE TAGS
There are three basic tags to create a table:  <table></table> - defines the table
<tr></tr> - defines a table row <td></td> - defines a table column
Create your first table with the help of this article:
http://html.about.com/library/nosearch/bl_class8-1.htm

Once you are comfortable with a basic table, you should learn a little about the attributes you can use on your tables:
http://html.about.com/library/nosearch/bl_class8-2.htm

TABLES AND LAYOUT
Once you are comfortable building tables, you can start really playing with the layout on your Web pages. Until cascading style sheets get more widely supported, tables
will be the Web designer's best friend.

Tables allow you to place your images and text fairly precisely so you have a good idea that your Web pages will look correct no matter what browser views them.
http://html.about.com/library/nosearch/bl_class8-3.htm

One of the most popular ways to use tables for layout is to cut up large images and then put them together with a table. This cuts down on the apparent load time and allows you to do complex rollovers on larger images.
http://html.about.com/library/nosearch/bl_class8-4.htm

 

FRAME TAGS
There are three basic tags to create an HTML frameset: <frameset></frameset> - defines the frame container <frame></frame> - defines a frame <noframes></noframes> - defines the page that is display to browwsers which don't support frames. Create your first frameset with the help of this article: 
http://html.about.com/library/nosearch/bl_class9-1.htm

FRAMES AND LINKS
Once you've built a frameset you'll want to put links within your frames, but how do you get them to open in the correct window? This is called targetting  your frames.
http://html.about.com/library/nosearch/bl_class9-2.htm

FRAME WISELY
While they are getting more and more common, frames still constitute a huge accessibility issue. Many screen readers can't view them, it's hard to validate a framed site, and (probably of largest concern) many search engines can't navigate through frames.  Before you decide to use frames, make sure you weigh all the issues
http://html.about.com/library/nosearch/bl_class9-3.htm

 

BASIC FORM TAGS
There are really only two primary HTML tags for use with forms:
<form></form>  and  <input>
<form> tells the browser where the form starts and ends and <input> allows you to add data.   Learn how to use the <form> tag:
http://html.about.com/library/nosearch/bl_class10-1.htm

Learn how to use the <input> tag:
http://html.about.com/library/nosearch/bl_class10-2.htm

FORMS WITHOUT CGI
When you write a form, you have to have something on the server to process it. This is called a CGI script. But there are some forms that don't require a CGI script.
The most common action in a form is to have the data sent to you via email. This is often called "form to email" and is easy to do, even without CGI.
Learn how to create your first HTML form that works without a CGI script:
http://html.about.com/library/nosearch/bl_class10-3.htm

USING AN EXTERNAL CGI SCRIPT
There are so many places you can go on the Internet to get free and inexpensive CGI scripts, that there really is no need for most people to write their own.

For example, many people want a guest book on their site, but you don't need to write the code or even host the Guest book if you don't want to. And it's easy, here's how:
http://html.about.com/library/nosearch/bl_class10-4.htm

Note: you can use the information about Guestbooks to install almost any type of CGI you might want.

 

Browser Safe Color

 

#000000

#000033

#000066

#000099

#0000cc

#0000ff

#330000

#330033

#330066

#330099

#3300cc

#3300ff

#660000

#660033

#660066

#660099

#6600cc

#6600ff

#990000

#990033

#990066

#990099

#9900cc

#9900ff

#cc0000

#cc0033

#cc0066

#cc0099

#cc00cc

#cc00ff

#ff0000

#ff0033

#ff0066

#ff0099

#ff00cc

#ff00ff

#003300

#003333

#003366

#003399

#0033cc

#0033ff

#333300

#333333

#333366

#333399

#3333cc

#3333ff

#663300

#663333

#663399

#6633cc

#6633ff

#993300

#993366

#993399

#9933cc

#9933ff

#cc3300

#cc3333

#cc3366

#cc3399

#cc33cc

#cc33ff

#ff3300

#ff3333

#ff3366

#ff3399

#ff33cc

#ff33ff

#006600

#006633

#006666

#006699

#0066cc

#0066ff

#336600

#336633

#336666

#336699

#3366cc

#3366ff

#666600

#666633

#666666

#666699

#6666cc

#6666ff

#996600

#996633

#996666

#996699

#9966cc

#9966ff

#cc6600

#cc6633

#cc6666

#cc6699

#cc66cc

#cc66ff

#ff6600

#ff6633

#ff6666

#ff6699

#ff66cc

#ff66ff

#009900

#009933

#009966

#009999

#0099cc

#0099ff

#339900

#339933

#339966

#339999

#3399cc

#3399ff

#669900

#669933

#669966

#669999

#6699cc

#6699ff

#999900

#999933

#999966

#999999

#9999cc

#9999ff

#cc9900

#cc9933

#cc9966

#cc9999

#cc99cc

#cc99ff

#ff9900

#ff9933

#ff9966

#ff9999

#ff99cc

#ff99ff

#00cc00

#00cc33

#00cc66

#00cc99

#00cccc

#00ccff

#33cc00

#33cc33

#33cc66

#33cc99

#33cccc

#33ccff

#66cc00

#66cc33

#66cc66

#66cc99

#66cccc

#66ccff

#99cc00

#99cc33

#99cc66

#99cc99

#99cccc

#99ccff

#cccc00

#cccc33

#cccc66

#cccc99

#cccccc

#ccccff

#ffcc00

#ffcc33

#ffcc66

#ffcc99

#ffcccc

#ffccff

#00ff00

#00ff33

#00ff66

#00ff99

#00ffcc

#00ffff

#33ff00

#33ff33

#33ff66

#33ff99

#33ffcc

#33ffff

#66ff00

#66ff33

#66ff66

#66ff99

#66ffcc

#66ffff

#99ff00

#99ff33

#99ff66

#99ff99

#99ffcc

#99ffff

#ccff00

#ccff33

#ccff66

#ccff99

#ccffcc

#ccffff

#ffff00

#ffff33

#ffff66

#ffff99

#ffffcc

#ffffff

 

 

 

Special HTML Characters

When you're using HTML, you can type most text characters without using any special codes. But how do you render the text elements that HTML uses to be HTML, like < and >? And what about characters that don't have a direct analog on the keyboard, like © and ñ?

These are called "special characters", and HTML renders them with numeric or character encoding so that they can be included in an HTML document.

There are three characters that you shouldn't leave unencoded within your HTML documents. If you do, they can confuse the browsers and your pages may not render as you expect.

Character

Code

less-than sign (<)

&lt;

greater-than sign (>)

&gt;

ampersand (&)

&amp;

quotation mark (")

&quot;

Non-Typeable Special Characters
Any character that can be rendered in the Latin-1 standard character set, can be rendered in HTML. You simply enter an ampersand (&) and either its standard entity name or a pound-sign (#) and the numeric position in the Latin-1 character set, followed by a semi-colon (;).

Character

Code

soft hyphen (­)

&shy;

non-breaking space

&nbsp;

copyright (©)

&copy;

registered (®)

&reg;

trademark (™)

&#153;

em dash (—)

&#151;

en dash (–)

&#150;

paragraph (¶)

&para;

one quarter (¼)

&#188;

one half (½)

&#189;

three quarters (¾)

&#190;

superscript 1 (¹)

&sup1;

superscript 2 (²)

&sup2;

superscript 3 (³)

&sup3;

middle dot (·)

&#183;

left angle quote («)

&#171;

right angle quote (»)

&#187;

Pound (£)

&pound;

Non-English Language Characters
There are also a lot of characters in non-English languages that can be expressed in HTML.

Character

Code

Á and á

&Aacute; and &aacute;

 and â

&Acirc; and &acirc;

Æ and æ

&AElig; and &aelig;

À and à

&Agrave; and &agrave;

Å and å

&Aring; and &aring;

à and ã

&Atilde; and &atilde;

Ä and ä

&Auml; and &auml;

Ç and ç

&Ccedil; and &ccedil;

É and é

&Eacute; and &eacute;

Ê and ê

&Ecirc; and &ecirc;

È and è

&Egrave; and &egrave;

Ë and ë

&Euml; and &euml;

Í and í

&Iacute; and &iacute;

Î and î

&Icirc; and &icirc;

Ì and ì

&Igrave; and &igrave;

Ï and ï

&Iuml; and &iuml;

Ñ and ñ

&Ntilde; and &ntilde;

Ó and ó

&Oacute; and &oacute;

Ô and ô

&Ocirc; and &ocirc;

Ò and ò

&Ograve; and &ograve;

Ø and ø

&Oslash; and &oslash;

Õ and õ

&Otilde; and &otilde;

Ö and ö

&Ouml; and &ouml;

Ú and ú

&Uacute; and &uacute;

Û and û

&Ucirc; and &ucirc;

Ù and ù

&Ugrave; and &ugrave;

Ü and ü

&Uuml; and &uuml;

Ý and ý

&Yacute; and &yacute;

Ÿ and ÿ

&Yuml; and &yuml;

Ð and ð

&ETH; and &eth;

ß

&szlig;

þ

&thorn;

 

List

attributes

end tag

</li>

contents

Usually text. The following tags are valid within the <li> tag:
a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, p, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

valid context

The <li> tag is valid within the following tags:
dir, menu, ol, ul

examples

a.      start with lowercase lettering numbers

B.      next in order, but uppercase

                             iii.            lowercase roman numerals

                           IV.            uppercase roman numerals

                              5.            and finally arabic numbers

special notes

 

 

Note : Please Visit this Page regularly to find out new additions