Free Online Basic HTML Tutorial: What Is Hypertext?

Free Online Basic HTML Tutorial HTML (HyperText Markup Language) is the lingua franca of the Internet.
It is not a language per se, so you don't need any prior programming experience, though common sense is very much a required attribute! HTML is very simple, trust me. What is HyperText? Hypertext means that some text in the HTML document carries a link to a different location. Such links can be present either on the same page or some other page located on another computer page. On clicking this 'hot spot', the viewer is transferred to that location. What is Markup? Markup means that specific portions of a document are marked up to indicate how they should be displayed in the browser. HTML carries information about the web page though; the display of the document is solely (exclusively) dependent on the browser. For this reason, you should test your HTML code in the two most used browsers, Internet Explorer from Microsoft and Netscape Communicator from Netscape. With HTML you can embed various objects such as images, video, sound in your pages. What will you learn in this HTML tutorial? This is a basic HTML tutorial that describes and explains some common HTML tags. By the end of this tutorial you should be able to create simple HTML pages. Advanced HTML tags with tips on page layout can be found in the next tutorial, Advanced HTML tutorial. The tutorial consists of 23 sessions as follows: Free HTML Tutorial - What you need HTML and tutorial - Your first HTML file
Basic HTML tutorial - basic tags HTML commands - Format of a tag HTML basics - Headings HTML primer - HTML Comment Tags HTML course - The <BR> (break) Tag Free HTML course - Physical tags HTML guide - Logical Tags HTML Reference Guide - The <HR> Tag Guide to HTML - HTML Document Design Learning HTML - Text Controlling Tags Part 1 HTML code - Text Controlling Tags Part 2 HTML kit - Text Controlling Tags Part 3 HTML coding - HTML Lists HTML help - Special Characters HTML tag tutorial - Creating hyperlinks on web pages HTML lesson - What are URLs? Free HTML lesson - how to include images in web pages part 1 Beginner guide to HTML - Including images in web pages part 2 HTML programming tutorial - Creating hyperlinks using images Free HTML - The <BODY> tag attributes Tutorial HTML - Conclusion
Remember HTML is NOT CASE SENSITIVE, you can write your code in either uppercase or lowercase. I have always written by HTML code in uppercase. This helps to differentiate it from JavaScript code. (Note: HTML is case sensitive when it comes to character entities, which you shall learn in session 16.)
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 WORDPAD. In UNIX based systems, you can either use PICO or the VI-EDITOR. If you planning 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 browsers 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
follow 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 / CDROM! 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

Here is your first script again: <HTML> <HEAD> <TITLE>My first HTML page</TITLE> </HEAD> <BODY> This is my first HTML page. </BODY> </HTML> And here is how it is displayed in Internet Explorer
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 </TITLE> 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 <TITLE> tags will be displayed here. The <BODY> tags contain the meat (core/essence) 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 browser 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 affected}</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 attributes 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 contained in the tag and its attributes.
A simple example is the Bold (<B> and </B>) tag. When these tags are placed surrounding 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 valuable 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
<H2>I am heading 2</H2> gives:
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.
10
<HTML> <HEAD> <TITLE>My fist HTML page with headings</TITLE> </HEAD> <BODY> <H1>I am heading 1</H1> <H2>I am heading 2</H2> <H3>I am heading 3</H3> <H4>I am heading 4</H4> <H5>I am heading 5</H5> <H6>I am heading 6</H6> </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
11
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 'TITLE'. The ALIGN attribute The 'ALIGN' attribute takes one of the four values: LEFT, RIGHT, CENTER, or JUSTIFY. <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 heading 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.)
12
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 purpose. 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. Fortunately, 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>
13
<BODY> I am visible.  </BODY> </HTML> Your comments can span multiple lines as in: <!-This comment spans multiple lines making the code easy to read after a few months. --> Comment tags are invaluable if you work (or are planning to work) in a group. Your colleagues will be able to understand and decipher your code faster if you have used comment 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>
14
<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 browser. The browser 'wraps' the text only at the end of the window space. In the browser window, 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> <TITLE>Testing the BR tag</TITLE>
15
</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 horizontal scrolling if the text too is long. Try this out with the following code. <HTML> <HEAD> <TITLE>Testing the BR tag</TITLE> </HEAD> <BODY> <NOBR> This is a long piece of text consisting of three
16
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 continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and continues and finally ends here. </NOBR> </BODY> </HTML>
17
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: <B> Bold: I am in italics I am in bold I am underlined I am struck!
<U> Underline:
<STRIKE> Strikethrough: <SUP> Superscript: <SUB> Subscript: <TT> Typewriter: <BIG> Bigger font: My My
superscript
subscript
I am in typewriter form I am bigger I am smaller
<SMALL> Smaller font:
18
<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: <EM> Emphasis: I am strong
I am emphasized I am abbreviated
<ABBR> Abbreviation:
19
<CITE> Citation: <CODE> Code: <DFN> Definition: <KBD> Keyboard: <SAMP> Sample:
Citation I am programming code Definition Quite like keyboard strokes Sample Programming Variable
<VAR> 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 understands that this text has to be accentuated somehow. So the text may be put in bold or in italics depending on the browser.
20
Now play with the code: To check the result, click on the "Display" button. Another browser window pops up with the results. Modify the code in the box and check the results again. Get a good feel of this before proceeding to the next section.
HTML Reference Guide - The <HR> Tag

To separate blocks of text in a document you can use the simple but useful <HR> tag, which puts a straight line across the page. There is no ending tag for the horizontal rule. The very inclusion of <HR> introduces the separating line. Some important points to remember when using this tag: The browser starts the horizontal rule from a new line and any text after this tag is also displayed on a new line. The browser introduces some space before and after this tag.
An <HR> tag without any attributes introduces a separator that looks like the one below. You can change the length, width, size, color and alignment of the horizontal rule using various attributes. Lets examine them. WIDTH AttributeThis attribute defines the length of the rule. A value is required for this attribute. This value can be expressed in pixel numbers or percentage, which determines the length based on the width of the browser window. <HR width="50"> presents a rule which is 50 pixels in length as: <HR width="70%"> specifies that the length of the rule should be 70% of the page's width as: SIZE AttributeThe SIZE defines the thickness of the horizontal rule. You can change the thickness by specifying the number of pixels with the value. <HR SIZE="1">: 1 pixel thick.
21
<HR SIZE="8">: 8 pixels thick. <HR SIZE="30">: 30 pixels thick.
ALIGN AttributeYou can align horizontal rules using one of the three values for ALIGN attribute, "CENTER", "LEFT", or "RIGHT". The default value for this attribute is "CENTER". This means that if you skip using this attribute, the horizontal rule will always be centrally aligned. <HR align="center" width="50%">: Centrally aligned; there is no need to specify this explicitly as this is the default. <HR align="left" width="50%">: Aligned to the left. <HR align="right" width="50%">: Aligned to the right. NOSHADE AttributeYou would have noticed that the horizontal rules are shaded, they have this 3D kind of effect. If you don't want this, use the NOSHADE attribute. NOSHADE takes no values. <HR width="50%" NOSHADE SIZE="5"> <HR width="50%" NOSHADE SIZE="15"> The rendering of rules using NOSHADE differs in Internet Explorer and Netscape Communicator. Communicator tends to put rounded edges to rules if their thickness is more than 5 pixels. COLOR AttributeThis is the first time you have encountered any color attribute in this tutorial. So I shall keep it small and simple leaving the details for later.
22
The COLOR attribute of <HR> is NOT recognized by Netscape Communicator (Communicator displays the non-shaded rules in a dull gray color only). The attribute takes a hexadecimal color notation or the name of the color. (??? Confused... you'll find a thorough description on colors, here). <HR COLOR="BLUE" SIZE="4" NOSHADE>: Blue colored rule, 4 pixels in thickness. <HR COLOR="RED" SIZE="10" width="50%" NOSHADE>: Red colored rule, 10 pixels in thickness. Also note how I have combined the various attributes inside a single tag to get the results I want.
Guide to HTML - HTML Document Design

Till now I have discussed many tags (and there are many many more to follow), but I feel a discussion on HTML document design is appropriate at this stage. Before you embark on an HTML project you have to decide which kind of document structure to follow. The layout of an HTML document can be based on either a Logical Structure or a Design Structure. So what is the difference between the two? Logical Structure A logically structure document consists of different sections. The image below shows the format of a typical logical document structure. It is evident that this document consists of various sections such as the main heading, the sub headings, the paragraphs, the horizontal rules, list, table, address and footer. These are blocks of objects placed in a logical manner. The HTML tags which define such blocks, are called BLOCK
23
ELEMENT TAGS. These tags always start on a new line and any text following their end tags will be placed on the next new line.
Design Structure Design Structure might not follow a fixed logical format. It takes advantage of the tricks in HTML, using tags for purposes they were not intended for. Thus, vertical columns of text can be created using tables (<TABLE> tag, you'll learn this in Advanced HTML tutorials) and indentation is achieved with <BLOCKQUOTE> or even the <DL> element. Such practices, esp. the one involving TABLES have been prevalent, and are used by many web developers. Cascading Style Sheets (CSS) were developed to assist designers in laying out HTML elements on a page. However, at the time of writing, browsers do not support CSS well enough and there are many browser compatible issues to be ironed out.
Learning HTML - Text Controlling Tags Part 1

In this section, we shall look at Paragraph tag <P> Division tag <DIV> Center tag <CENTER> Blockquote tag <BLOCKQUOTE> Address tag <ADDRESS> Preformatted tag <PRE>
The Paragraph Tag
24
Blocks of text in HTML should be placed in paragraphs. This not only helps you in formatting the page logically but also assists in maintenance. Browsers typically insert a blank line before and after a paragraph of text. You can use <BR> tag inside the paragraph tags to insert a line break. The paragraph tag is <P>. You should always end the paragraph with </P> even though it is not required. The important Attribute of this tag is ALIGN which can take one of the four values; "LEFT", "RIGHT", "CENTER", "JUSTIFY". LEFT is the default value. <P> is aligned to the left.</P> <P align="right"> is aligned to the right.</P> <P align="center"> is centrally aligned.</P> When "JUSTIFY" value is used, the browser inserts blank spaces between words so that the text is justified equally at both the ends quite like this very paragraph (note the difference between this para and the others). This is preferred by people who like to have symmetry in their document layout. You should be able to make out the difference between the justifications of this paragraph and the ones above and below it. Yes? <DIV> tag Enclosing text and other HTML elements inside <DIV> and </DIV> tags divides the document into sections. It's especially useful with Cascading Style Sheets usage, when a whole section can adopt a certain formatting style. You can use the ALIGN attribute of this tag to align the text surrounded by these tags. <DIV align="left"> aligns elements inside it, to the left.</DIV> <DIV align="right"> aligns elements inside it, to the right.</DIV>
25
<DIV align="center"> aligns elements inside it, to the center.</DIV> <CENTER> tag According to W3C (the World Wide Web Consortium) the <CENTER> tag is now deprecated and is to be replaced by <DIV align="center"> but since its use has been prevalent, it does not seem to be superceded so soon. <CENTER>Centrally aligns this text</CENTER> The Blockquote tag If you wish to introduce some large body of text and make it stand out from the rest, you should put it between <BLOCKQUOTE> - </BLOCKQUOTE>. The enclosed text will be indented from the left and right margins and also adds space at the top and bottom quite like this paragraph. Many web designers have been guilty in the past of placing various HTML elements inside <BLOCKQUOTE> tags to take advantage of the indenting. This is not a good practice and should be avoided. A better choice would be to use Style Sheets. Address tag The <Address> - </Address> tag is a logical formatting element. You should use this to include any addresses. This should NEVER be used for physical layout as it may be rendered differently by the browsers. Text between these tags looks like: Johnny Bravo,<BR> Hubba Hubba Street<BR> Aaron City<BR> In Internet Explorer and Netscape Communicator, the text inside <Address> tag is italicized. Preformatted text tag Text within <PRE> - </PRE> is rendered along with any spaces, tabs, returns. So there is no need of using the <BR> tag and I can introduce tabs spaces like quite like this or
this. Text within these tags is displayed
26
as monospace (Courier Font in Windows). A monospace font is one in which the width of each character whether its the wide 'm' or the thin 'i' is equal.
HTML code - Text Controlling Tags Part 2

I must confess, I never wanted to write this section. I thought it would be more appropriate to include it in the Tips and Tricks section. Okay, here it is... <MARQUEE> and <BLINK> are two browser specific tags. These tags are displayed only by some browsers and ignored by the others. <BLINK>: Netscape Communicator <MARQUEE>: Internet Explorer
The <BLINK> This tag is rendered ONLY by Netscape. There have been many a things said about this tag (most of them unpleasant). I feel it provides cheap thrills to a novice. Also, IE ignores this tag. So if you are using Internet Explorer you wouldn't see the blinking text below. Blink Blink
27
<MARQUEE> The <MARQUEE> tag provides some animated text to the page. Unfortunately, it is supported only by Internet Explorer (and WebTV). It provides an easy way to put some dynamic text in otherwise static pages (scripting languages are another story).
It has many attributes: BEHAVIOUR = ALTERNATE, SCROLL OR SLIDE BGCOLOR = #RRGGBB (The RGB code, explained in the color session) or Color-Name such as "Blue", "Green" etc. DIRECTION = DOWN, LEFT, RIGHT OR UP HEIGHT = in pixels or percentage HSPACE = in pixels (the amount of horizontal space left) LOOP = number or INFINITE SCROLLAMOUNT = in pixels SCROLLDELAY = in milliseconds TITLE = some advisory text TRANSPARENCY = 0 to 100 (number) VSPACE = in pixels (amount of vertical space left) WIDTH = in pixels or percentage and the CLASS, ID and STYLE attributes if you use style sheets
I like this marquee tag, its easy, cool and gives great results. Pity it's not supported by Netscape version 4.xx.
28
HTML kit - Text Controlling Tags Part 3

It is now time to add a bit of spice to the otherwise dry text you have been used to till now. Various properties of text can be changed using the <FONT> tag. Font type, size and color can be modified using the appropriate attribute of this tag. I shall be discussing the following: FACE: It's value/s specifies the font type. COLOR: Changes the color. SIZE: Changes Size.
Font FACE attribute Face attribute takes the name of the font you want to use. Common fonts on the Windows system are Verdana, Arial, Times New Roman and Comic Sans MS. <FONT FACE="Times New Roman">This should be displayed in Times New Roman</FONT> <FONT FACE="Arial">This should be displayed in Arial</FONT> <FONT FACE="Verdana">This should be displayed in Verdana</FONT> <FONT FACE="Comic Sans MS">This should be displayed in Comic Sans MS</FONT> IMPORTANT: If you do not have the font installed in your system, the text will be displayed in the default font of your browser. After reading the 'IMPORTANT' message above, you might be thinking... "What's the use of changing the font when I don't know what fonts are installed on the visitor's computer?". Ha! Well my friend, HTML developers provide us with solution to this problem.
29
Let's suppose you want the text to be displayed in a Sans-serif font. (These are fonts whose ends are blunt as opposed to serifed fonts that have strokes, flares or taperings at the ends). The common Sans-serif fonts on Windows are Arial, Verdana, Comic Sans MS. Since you do not know which of these is installed on the visitor's computer, include all in the attribute!
<FONT FACE="Arial, Verdana, Comic Sans MS, Sans-serif"> This tells the browser to use Arial and if it is not present, use Verdana, or if that is missing too, use Comic Sans MS. If the browser cannot find any of these fonts (highly unlikely, on a Windows system), it should just use any Sans-serif font available. Be sure to spell the font name correctly.
Font COLOR attribute The attribute takes either the hexadecimal color value or just the color name. We shall leave the (lengthy) discussions on hexadecimal values for later and use color names here. Some common color names are Blue, Green, Red, Yellow, White, Black, Cyan, Magenta, Pink etc. <FONT COLOR="RED">Red Text</FONT>
<FONT COLOR="BLUE">Blue Text</FONT>
30
<FONT COLOR="GREEN">Green Text</FONT>
Font SIZE attribute The size attribute takes a number from 1 to 7 as its value with 1 as the smallest and 3 the default. <FONT SIZE="1">Some Text</FONT> <FONT SIZE="2">Some Text</FONT> <FONT SIZE="3">Some Text</FONT> <FONT SIZE="4">Some Text</FONT> <FONT SIZE="5">Some Text</FONT> Also, you can use relative values, + and -, for increasing or decreasing font size relative to the current size. For increasing relative font size use values +1 to +6 and for decreasing use -1 to -6.
HTML coding - HTML Lists

We all understand the importance of lists in everyday life. They are an indispensable tool for cataloging and indexing various objects and events. Two kinds of lists are very common and used by us regularly. The Ordered Lists help us keep an organized inventory wherein the list items are ranked while in Unordered lists, the classification is not important and the list items do not occur in any assorted order. HTML provides us with 5 different kinds of lists out of which 3 are routinely used. These lists are block-formatting elements that define a block structure and help in a logical layout of the document. The five lists are:
31
<OL> - </OL>: Ordered List <UL> - </UL>: Unordered List <DL> - </DL>: Definition List <MENU> - </MENU>: Menu List (sparsely used) <DIR> - </DIR>: Directory List (sparsely use)
HTML Ordered List If the ranking of items is desired, we employ ordered lists. To place individual list items, you use the <LI> tag as <OL> <LI>Item One <LI>Item Two <LI>Item Three <LI>Item Four </OL> The code above is displayed by the browser as 1. 2. 3. 4. Item One Item Two Item Three Item Four
32
You would have noticed that the list items show some indentation on the left and some space is inserted before and after the list. This makes the reading of the list easy and helps it to stand out from the other text. An ending tag for a list item </LI> is not required. Numbers are the default bullets in ordered lists but you can change this using the TYPE attribute of <OL> tag. This attribute takes one of the five values: TYPE="a": Lowercase alphabet TYPE="A": Uppercase Alphabet TYPE="i": Lowercase Roman Numerals TYPE="I": Uppercase Roman Numerals TYPE="1": Regular number (default) Thus, <OL TYPE="A"> <LI>Item One <LI>Item Two <LI>Item Three </OL> is displayed as A. B. Item One Item Two
33
C.
Item Three
Another attribute is COMPACT (without any value) but is generally ignored by the browsers.
HTML Unordered List <UL> - </UL> are the starting and ending tags of Unordered lists. List items are included using the <LI> tag. Unordered lists also support the TYPE attribute that takes disc, circle or square as its value. <UL> <LI>Item One <LI>Item Two <LI>Item Three <LI>Item Four </UL> is displayed as Item One Item Two Item Three Item Four Using TYPE="square" on the list above will result in
34
Item One Item Two Item Three Item Four HTML Definition List These lists are great for making glossaries. As you know, a glossary consists of a term and a definition. For HTML Definition lists, which are enclosed between <DL> and </DL>, you have to use <DT> to indicate the Term and <DD> to denote the definition. <DL> <DT>webdevelopersnotes.com <DD>A great place to learn web development. <DT>fontmagic.com <DD>One of the largest font sites on the Internet. </DL> will be shown by the browser as: webdevelopersnotes.com A great place to learn web developement. fontmagic.com One of the largest font sites on the Internet.
Note that the definitions are indented.
Since <MENU> and <DIR> are seldom used and not well supported by browsers, I shall not be discussing them.
35
HTML help - Special Characters

The keyboard contains only alphabet, numbers and some punctuation marks. What if you wanted to include a symbol on your pages like I have (scroll down this page, and you shall find this symbol). Such symbols are special characters called Character Entities, which can be displayed in HTML pages using a certain notation. This notation can be of two types: &entity-name-shortform; &#number;
Thus, the copyright sign can be displayed by © or © Here are a few common characters which you might need for your pages: I had mentioned at the beginning that HTML is case insensitive and so, it doesn't make a difference if you write <FONT>, <font>, <Font> or <FoNt> (... hope you get the general idea!). Character entities, however, are case sensitive- will work but &NBSP; won't. Try it out yourself.
Name Notation & <
Number Notation & <
Special Character & <
36
> ™ ¢ £ ¥ © ® ° ¼ ½ ¾
> ¢ £ ¥ © ® ° ¼ ½ ¾
> Empty space
The entire list of character entities can be found here. Remember, all tags in HTML are enclosed by < and > signs. To display these signs, you have to use their special character notations. Thus, to display <HTML>, you have to write the < and > signs in their special notations as <HTML>.
HTML tag tutorial - Creating hyperlinks on web pages
37
HTML documents contain certain 'hot spots'. These hot spots provide anchors that link to other documents/files on the Internet. The stupendous growth of the Internet and the WWW is attributed to these tags. It's hard to imagine a network without links and interlinks. Lets look at this tag in detail. <A HREF="http://www.webdevelopersnotes.com">This will take you to Webdevelopersnotes.com's main page</A> is displayed as This will take you to Webdevelopersnotes.com's main page. Anchor tags have a starting (<A>) and an (</A>) ending tag. The HREF attribute is required and takes the URL address of the destination page as value. Without this attribute-value,
no links will be created. Some text is enclosed between the anchor tags. This text serves as the hot spot. When a visitor clicks on this 'hot spot',
he or she will be transported to the target page. Another attribute is TITLE, through which you can provide some explanatory text for that link. Netscape ignores this attribute. To see this attribute in action, place your mouse over the link. Homepage Its code is: <A HREF="http://www.webdevelopersnotes.com" TITLE="This takes you to webdevelopersnotes.com's mainpage" >Homepage</A>
38
Linking in the same document So far we have discussed only inter-document linking. What if you want to make the visitor jump to different sections of the SAME page? We employ the <A> tag in this case too, but its format changes slightly. Instead of a URL in the HREF attribute, we use names. Click here to go to the top First, an anchor is set at the desired place in the document using the NAME attribute. In this case I put the following code at the top of the page. <A NAME="top"></A> The value of NAME attribute can be anything you want. Also note, that it is not necessary to enclose any text or other HTML element if the anchor tag is used in this manner. After setting an anchor with its NAME attribute we employ another set of <A> to make a link that points to it: <A HREF="#top" CLASS="text">Click here to go to the top</A>. On clicking this link, you will be taken to the top of the page where I have put the anchor. The HREF attribute takes the value of the NAME attribute mentioned before as its value; the name is prefixed with a # symbol.
HTML lesson - What are URLs?

(Note: If you are new to Internet you should first read the URL Basics section, which discusses URLs in general and come back to this page.) What are URLs?
39
The complete URL of this page is http://www.webdevelopersnotes.com/tutorials/html/html_lesson_what_are_urls.php3 This refers to file html_lesson_what_are_urls.php3 located in html subdirectory inside tutorials directory found at www.webdevelopersnotes.com. Note: The domain name www.webdevelopersnotes.com is not case sensitive but the directory and files names are. (This is especially true for Unix based systems). URLs are often used as values for HREF attribute of the <A> tag. Now, if I want to link to the next section (free_html_lesson_how_to_include_images_in_web_pages_part_1.php3) I can use either "http://www.webdevelopersnotes.com/tutorials/html/ free_html_lesson_how_to_include_images_in_web_pages_part_1.php3" or simply "free_html_lesson_how_to_include_images_in_web_pages_part_1.php3". So what is the difference? The former is the complete path of the file while the latter is a relative (relative to this document) path. Since I know that the next page is located in the same directory, I choose to use a relative URL. This helps me in site maintenance and I don't have to type the long address always. When I want to refer to the homepage of webdevelopersnotes.com from this directory, I use the relative URL "../../index.html" inside HREF. This is a standard Unix notation of referring to URLS. It tells the browser to first come out of the html directory (../) into tutorials directory and from there move, to the next top directory (another ../) which is the root directory of my web-site and then display index.html file. <A HREF="../../index.html">Homepage<A> Homepage will take you to the main page of this web-site.
40
Free HTML lesson - how to include images in web pages part 1

Let's start this section with an image of the beautiful Aishwarya Rai.
Including images is very simple. You employ the <IMG> tag. The required attribute of this tag is SRC, which takes the value of the image file's URL. <IMG SRC="ash.jpg"> The SRC attribute determines the source of the image file and takes a URL as value. I have used a relative URL which shows that ash.jpg is located in the same directory as this file. Three kinds of images files .gif, .jpg and .png are used on the Internet. A general rule of thumb is to use .jpgs for photographs and .gifs for images containing large blocks of single colors. The <IMG> tag has many attributes WIDTH: used for specifying the width of the image HEIGHT: specifies height BORDER: displays a border around the image ALT: helps to insert a descriptive text for users using text based browsers or for visitors with visual disabilities. HSPACE: inserts space at the left and right of the image
41
VSPACE: inserts space at the top and bottom of the image NAME: gives a name to the image; necessary for client-side scripting using JavaScript LOWSRC: provides a method through which a low quality alternate of the image is displayed first before the final one
starts to load. ALIGN: aligns other HTML elements such as text around the image.
Image size attributes - WIDTH and HEIGHT The WIDTH and HEIGHT attributes take pixel dimensions of the image as values. You can find the width and the height of the image in pixels using a graphics program such as Paint Shop Pro or Adobe PhotoShop. Your image will display correctly even if you skip using these attributes. However, you should ALWAYS include them as this helps the browser window to allocate space for your image. Let us examine the image below. Its width and height values in pixels are 150 and 100, respectively.
<IMG SRC="hat.gif" width="150" height="100"> Now see what happens if we specify 200 as width and 50 as height.
<IMG SRC="hat.gif" width="200" height="50"> The image is distorted! It means that the width and height attributes force the image to be displayed in that space regardless of what the actual dimensions are.
42
Image BORDER Attribute Use this attribute to put a border around the image. The attribute takes a number as value. This number determines the thickness of the border in pixels.
<IMG SRC="hat.gif" width="150" height="100" border="2">
<IMG SRC="hat.gif" width="150" height="100" border="8"> HTML image ALT Attribute According to the World Wide Web Consortium, the ALT atribute is now required. You can put some advisory text with the use of this attribute. This text is displayed when the mouse pointer is placed on the image. You should get into the good habit of including ALT tags. Why? Read on... Visitors using text-based browsers or who have turned off images in their browsers will not be able to see the image. However, they would be able to read the image description through the ALT attribute. Also, the ALT attribute value will be read by speech browsers, employed by visually impaired visitors. So be a good developer and insert the ALT attribute always. Place your mouse pointer above the image to display text
43
<IMG SRC="hat.gif" width="150" height="100" border="1" alt="A green colored hat">
Beginner guide to HTML - Including images in web pages part 2

HTML NAME attribute for images You can specify a name for your image through this attribute. This helps in client-side scripting using JavaScript or VBScript.
<IMG SRC="hat.gif" width="150" height="100" name="hat"> HTML ALIGN attribute for aligning images on a web page This attribute is used to align other HTML elements such as text around the image. Thus, <IMG SRC="fish.gif" width="160" height="124" and text to its left. This text is aligned to the left of the image. The ALT attribute has "RIGHT" as its value. align="right"> will align the image to the right
<IMG SRC="fish.gif" width="160" height="124" and text to its right.
align="left"> will align the image to the left
This text is aligned to the right of the image. The ALT attribute has "LEFT" as its value.
44
ALIGN can also take "TOP", "BOTTOM" or "MIDDLE" as value. These align the text to the top, middle or bottom of the image.
Image VSPACE and HSPACE attributes These attributes introduce horizontal or vertical space around an image. They take a number as value that determines the number of pixel space created. <IMG SRC="fish.gif" width="160" height="124" alt="Fish" hspace="30"> will put 30 pixel space on the left and the right side of the image. Just Dummy text here to show the space created by VSPACE accomplishes something similar to HSPACE the image. HTML LOWSRC image attribute If you want to load a large high quality image on a page, you should use this attribute to display a low quality image. The low quality image is loaded initially and gives a general idea about the page. The visitor can then decide to wait for the large download. The LOWSRC attribute takes the URL of the low quality image as its value. HSPACE attribute. but adds space to the top and bottom of
HTML programming tutorial - Creating hyperlinks using images

Text placed between <A> - </A> tags becomes a hot spot providing a link to another document or to some anchor on the same page. Images can also be used as hot spots if they are inserted between the anchor tags. Let's see how this works: <A HREF="../../index.html"><IMG SRC="backtohome.gif"
45
WIDTH="150" HEIGHT="30" ALT="Takes you back to homepage"></A>
The anchor tag places a colored border around the image. You can remove this border by specifying "0" as the value of the BORDER attribute in the <IMG> tag. <A HREF="../../index.html"><IMG SRC="backtohome.gif" WIDTH="150" HEIGHT="30" ALT="Takes you back to homepage" BORDER="0"></A>
Any image, whether .gif, .jpg, .png or animated gif can be made into a hot spot using this technique.
Free HTML - The <BODY> tag attributes

This session looks at some important attributes of the <BODY> tag. These attributes control the properties of the document as a whole. Some of these properties are: TEXT: specifies color of normal text in a page LINK: determines link color VLINK: determines color of link that has been visited ALINK: specifies color of link when clicked BGCOLOR: controls the background color of the document BACKGROUND: enables us to use an image as background for the page.
The first five take hexadecimal color code or color name as their value. The last takes the URL of the image to be used.
46
TEXTThe color of text which is not surrounded by <A> tags is specified by this attribute. The default is black (hexadecimal code #000000). LINKLink color should be different from normal text color so that visitor recognizes it from its display. The default color is blue (#0000FF). VLINKIt is good HTML practice to use a different color for visited links. This informs the visitor that the page/site has already been seen. ALINKThis attribute specifies a color that is displayed as long as the mouse button is held pressed. On release of the mouse button, the link color will be changed to VLINK color. Since a mouse click takes almost an instant to play, this color is shown only momentarily. BGCOLORDetermines the background color of the document. The default is white (#FFFFFF) and you can change it to any color you want. Be sure to test this, because many a web developer has been guilty of using background colors that make it difficult to read foreground text. BACKGROUNDTakes a URL of an image as value and puts this image as the background. Background images are tiled by browsers. <BODY TEXT="white" LINK="red" VLINK="yellow" ALINK="green" BGCOLOR="black"> The above code yields a page with a black background, white text, links colored red, visited links with yellow and active links green. (not a pretty sight, huh?).
47
The BACKGROUND attribute when used, overrides the BGCOLOR attribute. Thus, in this case, the image will form the background of the page and the background color will be ignored. If however, the image is not found, the color in BGCOLOR is used as background.
Tutorial HTML - Conclusion

This concludes our tutorial on HTML. This free tutorial on HTML was written for the beginner in mind and I hope it has helped you to gain a grasp of the basics features of HTML. Congratulations! You have completed the basic tutorial on HTML and should be able to create simple HTML pages with confidence. The Advanced HTML Tutorial would be the next step. But before you leave this tutorial on HTML, scroll down for your badge.
48

Free Online Basic HTML Tutorial: What Is Hypertext?

Uploaded by

Copyright:

Available Formats

You might also like

Free Online Basic HTML Tutorial: What Is Hypertext?

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Free Online Basic HTML Tutorial: What Is Hypertext?

Uploaded by

Copyright:

Available Formats

Free Online Basic HTML Tutorial HTML (HyperText Markup Language) is the lingua franca of the Internet.

Free HTML Tutorial - What you need

HTML and tutorial - Your first HTML file

Basic HTML tutorial- basic tags

HTML commands - Format of a tag

HTML basics - Headings

HTML primer - HTML Comment Tags

HTML course - The <BR> (break) Tag

Free HTML course - Physical tags

I am in typewriter form I am bigger I am smaller

<SMALL> Smaller font:

<S> Strikethrough alternative:

HTML guide - Logical Tags

<VAR> Programming Variable:

will be displayed as:

HTML Reference Guide - The <HR> Tag

<HR SIZE="8">: 8 pixels thick. <HR SIZE="30">: 30 pixels thick.

Guide to HTML - HTML Document Design

Learning HTML - Text Controlling Tags Part 1

The Paragraph Tag

this. Text within these tags is displayed

HTML code - Text Controlling Tags Part 2

HTML kit - Text Controlling Tags Part 3

<FONT COLOR="BLUE">Blue Text</FONT>

<FONT COLOR="GREEN">Green Text</FONT>

HTML coding - HTML Lists

Note that the definitions are indented.

HTML help - Special Characters

Name Notation &amp; &lt;

Number Notation &#38; &#60;

Special Character & <

> Empty space

HTML tag tutorial - Creating hyperlinks on web pages

HTML lesson - What are URLs?

Free HTML lesson - how to include images in web pages part 1

<IMG SRC="hat.gif" width="150" height="100" border="2">

<IMG SRC="hat.gif" width="150" height="100" border="1" alt="A green colored hat">

Beginner guide to HTML - Including images in web pages part 2

<IMG SRC="fish.gif" width="160" height="124" and text to its right.

align="left"> will align the image to the left

HTML programming tutorial - Creating hyperlinks using images

WIDTH="150" HEIGHT="30" ALT="Takes you back to homepage"></A>

Free HTML - The <BODY> tag attributes

Tutorial HTML - Conclusion

You might also like

Name Notation & <

Number Notation & <