Free HTML Tutorial - What You Need

Free HTML Tutorial - What you need
There are a few things you need before getting on with HTML. Let me list them out:
A text editor
A browser
A storing device and some storage media
Your creativity
HTML files are plain text (ASCII) files. They can be made in any text editor of your
choice but be sure to save the files in ASCII (plain) text format.
If you are working under the Windows system, I recommend NOTEPAD or WORD-
PAD. In UNIX based systems, you can either use PICO or the VI-EDITOR. If you plan-
ning to work on a more sophisticated editor, just remember to always save the HTML
files in ASCII format.
To save a file in Notepad, click on FILE-SAVE AS. A dialogue box pops up. Type in
the file name along with .htm or .html extension in "File name:" text field and select 'All
Files' in the "Save as type" drop menu.
Okay, so which extension should you use? .htm or .html? It doesn't matter which one
you use but once you've made your choice, be sure to stick to it.
To see the results of your HTML files, you need a browser. There are two major brows-
ers in the market, Internet Explorer from Microsoft and Netscape Communicator from
Netscape. A good rule of thumb is to test your HTML code in both these browsers. I fol-
low this extensively and ask you to do the same. Your pages should look and function
similar in these two browsers. This is called cross-browser compatibility.
You can download the latest versions of Internet Explorer or Netscape Communicator
from their respective web-sites.
Most probably you will be using the hard disk to store your files. This is fine, but be sure
to keep a copy on a floppy disk / CD-ROM!
For your web pages to look good and be easily navigable you have to plan in advance
before taking on any project. This is where your creativity steps in. Take an advice, plan
for long, and execute quickly.
HTML and tutorial - Your first HTML file
Let us get started and create an HTML file. Trust me, its very simple and by the end of
this lesson you would have created and tested your first script.
If working under Windows, open Notepad (Start-Programs-Accessories-Notepad).

Now type the following:
<HTML>
<HEAD>
<TITLE>My first HTML page</TITLE>
</HEAD>
<BODY>
This is my first HTML page.
</BODY>
</HTML>
You can also select the above text, copy it by right clicking and paste it in Notepad, but I
recommend you type this out. It will help you to understand HTML better.
Now create a new directory on your hard disk. Let's call this "htmlfiles". In Notepad,
click "File-Save As" and go to the new directory you have just made. In the drop-down
menu, type "first.html". Select "All files" from the "Save as type" drop down menu and
click on Save. A screen snap-shot is presented below.
Now open Windows Explorer, come to the new directory "htmlfiles". You shall see your
first script. Double click on this. If you have a browser installed on your system, it will
open to display this file. If this does not work, open a browser window and click on File-
Open (Open Page in Netscape) and select "first.html". Below is a snap shot of Internet
Explorer displaying your first script.
Basic HTML tutorial- basic tags
Let's analyze this script along with its display.
The script begins with a <HTML> and ends with </HTML>. These are the starting and
the ending tags of the HTML document. Each HTML file has <HTML> as the first tag
and </HTML> as the last. These tags are not required but it is always good practice to
include them in your document.
The HTML file has a HEAD and a BODY section. The <HEAD> and </HEAD> tags
encompass the head part while the <BODY> and </BODY> surround the BODY.
You will find an additional starting and ending pair of tags, the <TITLE> and </TI-
TLE> inside the HEAD section, with "My first HTML page" between them. So what
is the purpose of this? Look at the display of the document and you shall find that this
text is shown on the top, at the Title bar of the browser. Thus, any text between the <TI-
TLE> tags will be displayed here.
The <BODY> tags contain the meat of the HTML page. In our case, we have the text
"This is my first HTML page.". You will notice that this is displayed inside the brows-
er window.
Conclusions:
Each HTML document begins with a <HTML> and ends with </HTML> tags.
Each document consists of a HEAD section surrounded by <HEAD> and </HEAD>
tags and a BODY section with <BODY> and </BODY>.
HTML tags come in pairs (usually) with the ending tag containing an additional "/".
Some Tags can surround other tags. This is called Nesting. In our case, the <TITLE>
tags are nested in the <HEAD>-</HEAD>tags.
Text inside <TITLE> tags is displayed on the browser Title Bar.
The text between the <BODY> tags is displayed inside the browser window.
HTML commands - Format of a tag
The HTML files are plain ASCII text files that are displayed by the browser in whatever
form you have specified. TAGS control the layout and formatting of the elements in
HTML. These tags (and there are quite a few of them) are the building blocks of HTML.
The basic syntax of a tag:
<TAG-NAME {ATTRIBUTE1{="VALUE1" ...}}>{Some text that is af-

fected}</TAG-NAME>
The above notation might seem confusing to you at first; let's break it down:
Each tag consists of the name of the tag surrounded by the less-than '<' and greater-than
'>' signs.
Tag names cannot contain spaces. Thus, <HT ML> is wrong.
Most (not all) tags require an end tag that differs with the opening tag by a slash '/'. Thus
if the opening tag is <TITLE> the end tag will be </TITLE>. Note: XML requires all
tags to have an ending tag, so if you are working on XML, be sure to place closing tags
for everything.
Attributes control the different properties of the tag. Each tag has some default values
for its attributes. To modify these, you have to set the attributes to the new values. For
example, if you want to draw a horizontal rule across the page you can use the <HR>
tag. This puts a shaded rule across the page like this:
The <HR> tag without any attributes, draws a full length (100%) rule across the page.
To decrease its length to half its value, you should specify "50%" value to the WIDTH
attribute. The attibute-value pair is written inside the starting tag. Thus, with <HR
width="50%">, we get a shorter horizontal rule:
A tag can have many attributes and each attribute may have many values (some attrib-
utes have no value). More than one attribute can be placed in a tag.
Tags usually surround some text. This text is displayed based on the instructions con-
tained in the tag and its attributes.
A simple example is the Bold (<B> and </B>) tag. When these tags are placed sur-
rounding some text, it becomes bold as:
This is bold text
(<B>This is bold text</B>)
Browsers ignore unknown tags and attributes. For example, <BOOK> does not have any
meaning to the browser and is ignored. (Note: There are some non-standard tags, which
are interpreted only by a particular browser and ignored by others. Such tags are browser
specific.)
HTML basics - Headings

Headings help in defining the format and structure of the document. They provide valua-
ble tool in highlighting important topics and the nature of the document as a whole.
There are six levels of headings in HTML specified by <H1>, <H2>, <H3>, <H4>,
<H5> and <H6> tags. The outputs of these in a browser are as follows:
<H1>I am heading 1</H1> gives:
I am heading 1
I am heading 2
I am heading 3
I am heading 4
I am heading 5
I am heading 6
As you can see, the heading tags come in pairs with the opening and closing tags. Any
text surrounded by these tags will be displayed differently depending on the heading
number.
Let us make another HTML file. Open Notepad and type in the following text. Save this
document as 'headings.html'. View it in your browser.
<HTML>
<HEAD>
<TITLE>My fist HTML page with headings</TITLE>
</HEAD>
<BODY>
<H1>I am heading 1</H1>
</BODY>
</HTML>
What are HTML Tag attributes
Attributes change the properties of tags and are placed ONLY inside the starting tag.
Each attribute usually has a value associated. The attribute-value pair is written as:
<TAG ATTRIBUTE="VALUE">some text ... </TAG>
Thus,
The attribute-value pair is placed INSIDE the starting tag
An "equal to" sign separates the attribute from its value.
The value part is surrounded by quotes. The quotes are necessary if the value contains
spaces. However, I always use them and advice you to do so too.
Note: Some attributes do not require a value part.
All heading tags <H1> to <H6> have attributes. The important one are 'ALIGN' and 'TI-
TLE'.
The ALIGN attribute
The 'ALIGN' attribute takes one of the four values: LEFT, RIGHT, CENTER, or JUSTI-
FY.
<H3 align="left">I am aligned to the left</H3> yields:
I am aligned to the left
<H3 align="right">I am aligned to the right</H3> yields:
I am aligned to the right
<H3 align="center">I am centrally aligned</H3> yields:
I am centrally aligned
The TITLE attribute
With the 'TITLE' attribute you can include some advisory text that is displayed when a
user places the mouse pointer over the heading. Note, Netscape Communicator version
4.xx ignores the TITLE attribute of the headning tags.
<H3 title="Here is my important heading">Some Important Heading</H3> is displayed
as:
Some Important Heading
(If working in Internet Explorer, place your mouse cursor over the heading above to see
how the TITLE attribute works.)
Default values to attributes

The keen-eyed would have noticed that the heading is aligned to the left even without
explicitly specifying align="left" inside a heading tag. This is because align="left" is a
default attribute-value pair for the heading tag.
An important point
Headings provide a logical flow to the document and should be used for that very pur-
pose. They should never be used for changing font sizes. Font sizes can be easily
changed by using the SIZE attribute of <FONT> tag or using style sheets.
HTML primer - HTML Comment Tags

As your HTML pages grow, so will their complexity. Maintaining such complex pages
can be quite a problem if there is no way to add documentation to these files. Fortu-
nately, HTML provides tags through which you can add comments to various sections of
your scripts. Take my advice, use the comments tags generously in your documents.
When you look back at your files after a few months you shall be able to decipher the
code much faster.
The starting comment tag is .
The browser does not display any text placed between these tags. Try this out yourself.
Open a new document in Notepad and type the following and check the results in a
browser.
<HTML>
<HEAD>
<TITLE>Testing Comment tags in HTMLs</TITLE>
</HEAD>
<BODY>
I am visible.

</BODY>
</HTML>
Your comments can span multiple lines as in:

Comment tags are invaluable if you work (or are planning to work) in a group. Your col-
leagues will be able to understand and decipher your code faster if you have used com-
ment tags judiciously.
HTML course - The <BR> (break) Tag

Let's try out an experiment. Open Notepad and type in the following code exactly as I
have written. Check the results in a browser.
<HTML>
<HEAD>
<TITLE>Testing the BR tag</TITLE>
</HEAD>
<BODY>
This is a long piece of text consisting of three
sentences and shows you the functions of the
Line Break tag. This tag is used quite frequently
to add line breaks in the HTML code. It is also used
to add blank lines to a document.
</BODY>
</HTML>
The text is placed on five lines. When you display the file in a browser, you shall find
that the line breaks we had introduced (by hitting 'Enter' key) are ignored by the brows-
er.
The browser 'wraps' the text only at the end of the window space. In the browser win-
dow, click on VIEW - SOURCE (or PAGE SOURCE in Netscape). The line breaks are
still very much present! So what is happening? Try hitting the 'Enter' key 10 times after
the first line, the browser will ignore all these. This is because HTML has a special Line
Break Tag, <BR>. You should use this tag to introduce any line breaks.
<HTML>
<HEAD>
</HEAD>
<BODY>
This is a long piece of text consisting of three<BR>
sentences and shows you the functions of the<BR>
Line Break tag. This tag is used quite frequently<BR>
to add line breaks in the HTML code. It is also used<BR>
to add blank lines to a document.<BR>
</BODY>
</HTML>
When the above code is displayed in a browser, the text will be broken into five lines.
The <BR> tag has no end tag because it doesn't need too. Just the presence of <BR>
adds a line break.
The opposite of the <BR> tag is the <NOBR> tag. It has an ending </NOBR> tag. Text
placed between these tags will be displayed in a single line, which might result in hori-
zontal scrolling if the text too is long. Try this out with the following code.
<HTML>
<HEAD>
</HEAD>
<BODY>
<NOBR>
This is a long piece of text consisting of three
sentences and shows you the functions of the
NOBR tag. This tag is causes the text between it
to be displayed in a single line and will result
in horizontal scrolling in the browser if the text
is too long and continues and continues and continues
and continues and continues and continues and continues
and finally ends here.
</NOBR>
</BODY>
</HTML>
Free HTML course - Physical tags

Text in HTML code can be dressed up in various ways so that it's displayed differently
by the browser. Text can be made Bold, Underlined, Italicized, Struck-through etc.
Moreover, you can make text both italicized and bold at the same time.
There are many tags that perform such embellishments on text. These tags can be either
Physical Tags or Logical Tags.
So what is the difference between these?

Physical tags define how the text should be displayed in the browser. They control the
Physical characteristics of the text.
Logical Tags on the other hand indicate the 'type' of content they enclose. They do not
determine the display of the text and the browser is free to set the presentation.
More on these differeneces in the next session.
Physical Tags
There are 10 physical tags each requiring a closing tag:

<I> Italics: I am in italics
<B> Bold: I am in bold
<U> Underline: I am underlined
<STRIKE> Strikethrough: I am struck!
<SUP> Superscript: My superscript
<SUB> Subscript: My subscript
<TT> Typewriter: I am in typewriter form
<BIG> Bigger font: I am bigger
<SMALL> Smaller font: I am smaller
<S> Strikethrough alternative: I am also struck!
Tag Nesting
Physical tags can be nested i.e. one tag can be placed (including its closing tag) inside
another. Let's test this:
<B>Some text</B> displays Some text which is in bold

Give more emphasis by underlining this text:
<U><B>Some text</B></U> displays Some text which is bold and underlined
Still more emphasis:
<I><U><B>Some text</B></U></I> displays Some text which is bold, underlined and

in italics.
Just remember to always put the end tag of the nested element before the end tag of the
enclosing element. I advise you to develop the habit of putting the end tag the moment
you open a tag. It's a good practice and will prevent headaches since HTML files with
<TABLE>, <TR>, <TD> (discussed in Advanced HTML Tutorials) etc. can become
quite confusing.
HTML guide - Logical Tags

There are 9 logical tags each requiring a closing tag:
<STRONG> Strong: I am strong
<EM> Emphasis: I am emphasized
<ABBR> Abbreviation: I am abbreviated
<CITE> Citation: Citation
<CODE> Code: I am programming code
<DFN> Definition: Definition
<KBD> Keyboard: Quite like keyboard strokes
<SAMP> Sample: Sample
<VAR> Programming Variable: Programming Variable
Like the physical level tags, these tags can be nested. So:
<STRONG><EM>Some text</EM></STRONG>
will be displayed as:
Some text
Logical and Physical tags revisited
You would have noticed that <STRONG> and <EM> are displayed quite like <B> and
<I> physical tags. But remember Logical tags do not control the display of text. It is up
to the browser to render text enclosed between these tags.
For example, when a browser encounters text between <EM> and <EM> tags it under-
stands that this text has to be accentuated somehow. So the text may be put in bold or in
italics depending on the browser.

Free HTML Tutorial - What You Need

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Free HTML Tutorial - What You Need

Încărcat de

Drepturi de autor:

Formate disponibile

Free HTML Tutorial - What you need

HTML and tutorial - Your first HTML file

If working under Windows, open Notepad (Start-Programs-Accessories-Notepad).

The basic syntax of a tag:

<TAG-NAME {ATTRIBUTE1{="VALUE1" ...}}>{Some text that is af-

HTML basics - Headings

What are HTML Tag attributes

Note: Some attributes do not require a value part.

The TITLE attribute

Default values to attributes

HTML primer - HTML Comment Tags

HTML course - The <BR> (break) Tag

Free HTML course - Physical tags

So what is the difference between these?

There are 10 physical tags each requiring a closing tag:

<B>Some text</B> displays Some text which is in bold

<U><B>Some text</B></U> displays Some text which is bold and underlined

Still more emphasis:

<I><U><B>Some text</B></U></I> displays Some text which is bold, underlined and

HTML guide - Logical Tags

will be displayed as:

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