HTML Images

z

Image Tag <img attributes />
HTML enables authors to display images in a document. Images make the web page look good. When a picture compliments the text on the web page, it generates more enthusiasm in the user.

The image tag is written as <img>. This is used to display an image in an HTML document. The image tag is a singular tag, which means it need not be closed as </img>. But, the latest version of HTML does not support this. In the latest version, the image tag is to be closed by putting a (/) backslash, e.g. <img/>.

The Image tag is similar to the anchor tag as discussed earlier, in the sense that the image tag alone does not perform any function. It has to include various attributes so that the image can be displayed on the page.

Attributes of <img> Tag

Src
Src is the source attribute. It indicates the location or the path of the picture to be displayed on the web page.

Example:

<img src="c:\images\myimage.jpg" />


Alt
Alt is an attribute, which displays an alternative text if the picture is not displayed on the web browser.

Example:

<img src="c:\images\myimage.jpg alt="this is my image” />


Width
The width attribute determines how wide the picture is to appear on the web page.

Example:

<img src="c:\images\myimage.jpg" alt="this is my image” width="105" />


Height
The height attribute determines the height of the picture that has to appear on the web page.

Example:

<img src="c:\images\myimage.jpg" alt="this is my image" height="100" />


Align
The align attribute sets the alignment or the position of the picture in relation to the text around it.

Example:

<img src="c:\images\myimage.jpg" alt="this is my image" align=left />


Border
The border attribute sets a border around the images. A border value greater than 0 puts a border around the image.

Example:

<img src="c:\images\myimage.jpg" alt="this is my image" align="left" border="2"/>

Map Tag <map>
A map tag is used to map an image. In other words; this image, called the mapped image, contains some regions that act as links to other documents. It is written as <map>. The user can set these regions and these regions are quite similar to a hyperlink. This is because when they are clicked on, they refer to some other document.

To create an image map, another tag called area tag is used which will be explained later.

Attribute of Map Tag

Name
The name attribute sets the name of the image map. It determines which map definition the image uses.

Example:

<map name="map1"> </map>

Area Tag
The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.

Syntax:

<area attributes></area>

Attributes of Area

Href
The href tag indicates the URL that the tags links to. The syntax of this tag is similar to the anchor tag.

Example:

<area href="image1.jpg" ></area>

Alt
The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.

Example:

<area href="image1.jpg" alt="my image" > </area>

Cords
The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later).

It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Cords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not required if the shape is set to Default.

Example:

<area href="image1.jpg" alt="my image" cords="6,116,97,44" > </area>

Shape
The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:

Rect
Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.

Example:

<area href="image1.jpg" alt="my image" shape="rect" cords="6,116,97,44" > </area>

Circle
Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.

Example:

<area href="image1.jpg" alt="my image" shape="circle" cords="60,40, 44" > </area>

Poly
Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.

Example:

<area href="image1.jpg" alt="my image" shape="poly" cords="150,217, 190,257, 150,297, 110,257" > </area>

Default
Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.

Example:

<area href="image1.jpg" alt="my image" shape="default" > </area>

Image Formats
There are four basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Primer #1?

• The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.


• .png Pronounced as "ping", this stands for Portable Network Graphic. This is ultimately the replacement for .gif, with partial transparency options, but browser support is sometimes disappointing, so try experimenting but don't expect miracles in older browsers! Even some of the newer ones don't like partial transparency.


• .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format.
  The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
  Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.


• .bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.

Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or JPEG.

HTML Forms

z

You place a form anywhere inside the body of an HTML document with its elements enclosed by the <form> tag and its respective end tag </form>. All of the form elements within a <form> tag comprise a single form. The browser sends all of the values of these elements—blank, default, or user-modified—when the user submits the form to the server.

The required action attribute for the <form> tag gives the URL of the application that is to receive and process the form's data. A typical <form> tag with the action attribute looks like this:

<form action="http://html-online-learning.blogspot.com/process">
...
</form>

The example URL tells the browser to contact the server named html-online-learning.blogspot.com and pass along the user's form values to the application named update, located in the cgi-bin directory.

The browser specially encodes the form's data before it passes the data to the server so it doesn't become scrambled or corrupted during the transmission. It's up to the server to decode the parameters or pass them, still encoded, to the application.

The standard encoding format is the media type named application/x-www-form-urlencoded. You can change that encoding with the optional enctype attribute in the <form> tag. If you do elect to use an alternative encoding, the only other supported format is multipart/form-data.

The standard encoding—application/x-www-form-urlencoded—converts any spaces in the form values to a plus sign (+), nonalphanumeric characters into a percent sign (%) followed by two hexadecimal digits that are the ASCII code of the character, and the line breaks in multiline form data into %0D%0A. (See Chapter 12 for more information on URL encoding.)

The multipart/form-data encoding encapsulates the fields in the form as several parts of a single MIME-compatible compound document.

HTML form elements (tags) must each be given a unique name. When a server side script (a PHP script for example) receives a forms submission, it identifies the individual form elements (tags) by their given name.

This means that you have to name each tag with a unique name so you know what information your server side script is 'looking' at. This may all be unclear to you right now, but give yourself a chance because it will be easy to understand soon!

The following is a list of the most commonly used form tags.

The TEXTFIELD tag:
This tag creates a little box called an: 'input field' where people can enter text.

<input type="text" name="nameFirst" value="Your Name">

The PASSWORD tag:
This tag is just like the textfield tag except when someone enters text; the text is hidden with obscuring characters, usually asterisks.

<input type="password" name="nameFirst" value="Your Name">

The TEXTAREA tag:
This tag creates a multi-line text box where users can enter in multiple lines of text.

<textarea name="comments" rows="10" cols="30"></textarea>

The RADIO BUTTON tag:
Radio button tags create round buttons that allow people to make a unique selection from a list of options that forms a group. Radio buttons work in groups so as to provide many options, where the user can only select one option from the group. From the code below, the three radio button tags allow the user to select what credit card they are going to use. The way to tell the browser that the radio buttons are part of the same group, is by giving them all the same name like the code below they are all part of the group "creditCard".

<input type="radio" name="creditCard" value="visa">
<input type="radio" name="creditCard" value="mastercard">
<input type="radio" name="creditCard" value="amex">

The CHECK BOX tag:
Very similar to radio buttons; check boxes allow users to select options from a list. The difference between the check box and the radio button is that check boxes "do not work in groups". That is to say that you can use check boxes to create a list of options for the user to select, and from that list of options, the user can select many at the same time. Where as with radio buttons, only one option can be selected.

<input type="checkbox" name="includeMe">

The DROP-DOWN-LIST, or as the savvy nerd would call it: the SELECT tag:
For each item in the drop-down-list you need to insert an <option> tag. If you think about it, the 'mechanics' of the drop-down-list and RADIO BUTTONS are the same in that they present a group of option for the person to choose from. DROP-DOWN-LIST provides you with the added advantage of being able to hide many options in the list – a good space saver.

The select tag creates the classic drop-down-list:

<select name="gender">
<option value="m">male</option>
<option value="f">female</option>
</select>

The SUBMIT button tag:
This is probably the simplest form tag there is, when clicked this button causes the form to be submitted.

<input type="submit">

With many browsers, a form will be automatically submitted if the user hits the Enter key while the users "cursor" is in a text field. This can be a useful feature in some cases but it can also be a source of problems in others Ex: where you need the user to fill out the whole form.

To prevent the form from being submitted this way, all you need to do is use a BUTTON input tag (with a little JavaScript) instead of the SUBMIT button:

<input type="button" value="submit form" onClick="submit()">

Instead of this:

<input type="submit">

HTML List

z

Lists are useful for displaying just that, lists. There are three types of lists: ordered, unordered, and definition.

An ordered list displays each list item with a number. Ordered lists are defined using the <ol> tag.

Example Code:

 <strong>School Items</strong>
 <ol>
   <li>Pencil</li>
   <li>Paper</li>
   <li>Ruler</li>
 </ol>

Numbered List Output:
School Items

1. Pencil
2. Paper
3. Ruler

you can also start your ordered list on any number by using start attribute. The syntax for this is <ol> start=n</ol>. Where n=is any number.

Example Code:

 <strong>School Items</strong>
 <ol start=6>
   <li>Pencil</li>
   <li>Paper</li>
   <li>Ruler</li>
 </ol>

Numbered List (start attribute) Output:
School Items

6. Pencil
7. Paper
8. Ruler

There are 2 other types of ordered list other than numbers and these are the Roman Numerals and Alphabets. These is done by using the type attribute.

Example Code:

 <ol type="A">
 <ol type="a">
 <ol type="I">
 <ol type="i">  

Numbered List (type attribute) Output:
School Items

Letters (Upper-Case)	Letters (Lower-Case)	Roman Numerals (Upper-Case)	Roman Numerals (Lower-Case)
Pencil Paper Ruler	Pencil Paper Ruler	Pencil Paper Ruler	Pencil Paper Ruler

Unordered lists display each item with a symbol called a bullet, usually a small round circle. Unordered lists are defined using the <ul> tag.

Example Code:

<strong>Animals</strong>
 <ul>
   <li>Pig</li>
   <li>Cow</li>
   <li>Chicken</li>
   <li>Goat</li>
 </ul>

Numbered List Output:
Animals

• Pig
• Cow
• Chicken
• Goat

You can manually control the appearance of item markers as either circles, squares, or discs. This feature is meant to give you more control over the look of bulleted lists. use the TYPE attribute to change the bullet used in the list. Its value can be one of disc, square, or circle.

Example Code:

 <ul type="square">
 <ul type="disc">
 <ul type="circle">   

Unordered List (type attribute) Output:
Animals

type="sqaure"	type="disc"	type="circle"
Pig Cow Chicken Goat	Pig Cow Chicken Goat	Pig Cow Chicken Goat

List items for both the ordered and unordered lists are defined using the <li> tag.

The last type of list is called a definition list. Unlike the ordered and unordered lists definition lists do not list items they list terms and their definitions. A definition list is defined using the <dl> tag, the definitions terms by the <dt> tag, and the terms definition by the <dd> tag.

Example Code:

<dl>

<dt><b>Boot Disk</b></dt>

<dd>A boot disk is actually not a computer disk in the shape of a boot. If it was, most disk drives would have a difficult time reading it. Instead, a boot disk is a disk that a computer can start up or "boot" from. The most common type of boot disk is an internal hard drive, which most computers use to start up from. The operating system installed on the hard drive is loaded during the boot process.</dd>

<dt><b>CPU (Central Processing Unit)</b></dt>

<dd>Stands for "Central Processing Unit." This is the pretty much the brain of your computer. It processes everything from basic instructions to complex functions. Any time something needs to be computed, it gets sent to the CPU. Every day, it's Compute this, compute that -- you'd think the CPU would need a break after awhile. But no -- it just keeps on processing. The CPU can also be referred to simply as the "processor."</dd>

</dl>

Definition List Output:

Boot Disk

A boot disk is actually not a computer disk in the shape of a boot. If it was, most disk drives would have a difficult time reading it. Instead, a boot disk is a disk that a computer can start up or "boot" from. The most common type of boot disk is an internal hard drive, which most computers use to start up from. The operating system installed on the hard drive is loaded during the boot process.

CPU (Central Processing Unit)

Stands for "Central Processing Unit." This is the pretty much the brain of your computer. It processes everything from basic instructions to complex functions. Any time something needs to be computed, it gets sent to the CPU. Every day, it's compute this, compute that -- you'd think the CPU would need a break after awhile. But no -- it just keeps on processing. The CPU can also be referred to simply as the "processor."

HTML Tables

z

Tables are used for presenting tabular data but many designers use them to help layout their pages.

Tables can be inserted anywhere on the page, even within other tables. A table cell can contain text, images, movies, applets or other tables.

We will be looking at creating a basic table and then adding lots of tags to it so we can see just what the outcome will be. Experimentation is the name of the game here.

  <TABLE>
   <TR> <TD>Pencil</TD> <TD>5 Boxes</TD> </TR>
   <TR> <TD>Bond Paper</TD> <TD>100 Sheets</TD> </TR>
   <TR> <TD>Paper Clip</TD> <TD>3 Boxes</TD> </TR>
   <TR> <TD>Stapler</TD> <TD>10 Pieces</TD> </TR>
 </TABLE>

Which gives us this table:

Pencil	5 Boxes
Bond Paper	100 Sheets
Paper Clip	3 Boxes
Stapler	10 Pieces

This table uses the basic three tags all tables must have:

<TABLE ...> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color.

<TR ...> (Table Row) defines each row of the table.

<TD ...> (Table Data) defines each cell of the table.

The first modification we'll make to this little table is to add borders. Borders will help us see how the table is laid out. It's a good idea when designing a table to add borders during the time you design the table, even if you remove them before making the table public.

  <TABLE BORDER="2">
   <TR> <TD>Pencil</TD> <TD>5 Boxes</TD> </TR>
   <TR> <TD>Bond Paper</TD> <TD>100 Sheets</TD> </TR>
   <TR> <TD>Paper Clip</TD> <TD>3 Boxes</TD> </TR>
   <TR> <TD>Stapler</TD> <TD>10 Pieces</TD> </TR>
 </TABLE>

which gives us

Pencil	5 Boxes
Bond Paper	100 Sheets
Paper Clip	3 Boxes
Stapler	10 Pieces

HTML Frames

z

On a web page, framing means that a website can be organized into frames. Each frame displays a different HTML document. Headers and sidebar menus do not move when the content frame is scrolled up and down. For developers frames can also be convenient. For example, if an item needs to be added to the sidebar menu, only one file needs to be changed, whereas each individual page on a non-frameset website would have to be edited if the sidebar menu appeared on all of them. However, server-side includes and scripting languages such as PHP can also be used to accomplish this aim without some of the drawbacks of frames such as confusing the operation of the address bar and back and forward buttons.

The contents of the frames may be hosted on the same server as the parent page, or it may link in code from another website server such that these external contents are automatically displayed within the frame (transclusion or remote loading). This may be confusing and inconvenient to the users: they can get the impression that the information belongs to the same website; also, less than the full browser window is available and the address bar is less informative. Some websites request not to be used in this way on other websites; some discourage it by including a framekiller script in its pages. The framing website runs a risk of being blamed for external content that, for example, is or becomes inaccurate or objectionable.

Although frames were included in the XHTML 1.0 specification, they were not carried across to XHTML 1.1. The intended eventual replacement is XFrames (XFrames), which attempts to solve the problem of addressing a populated frameset through composite URIs. For those serving web content under the XHTML 1.0 specification, documents may be embedded within one another via either the object or iframe element tags. Under the 1.1 specification, iframe was removed, leaving only the object element for transclusion until browsers begin support for XFrames. Unfortuneatly Internet Explorer 7 does not handle objects used to replace the function of an iframe, it doesn't recognise that a link from within the included page has the containing page as it's _parent. Therefore constructing a menu to be included on every page, in imitation of a frameset, fails as the parent frame cannot be targeted. Gecko based browsers, like Firefox, however work perfectly well with this construct.

An HTML document may contain a header and a body or a header and a frameset, but not both. For frames the Frames DTD must be used.

<frameset>…</frameset>

Delimit the frameset. The frames layout is given by comma separated lists in the rows and cols attributes.

<frame>…</frame>

Delimit a single frame, or region, within the frameset. A different document linked with the src attribute appears inside.

<noframes>…</noframes>

Contains a normal <body> element with child elements that will appear in web browsers that don't support frames.

<iframe>…</iframe>

An inline frame inside a normal HTML <body>, which embeds another HTML document. A similar effect can also be achieved using the object element. These approaches differ in some ways (World Wide Web Consortium).

IFrame (from inline frame) is an HTML element which makes it possible to embed another HTML document inside the main document.

The size of the IFrame is specified in the surrounding HTML page, so that the surrounding page can already be presented in the browser while the IFrame is still being loaded. The IFrame behaves much like an inline image and the user can scroll it out of view. On the other hand, the IFrame can contain its own scroll bar, independent of the surrounding page's scroll bar.

While regular frames are typically used to logically subdivide the content of one website, IFrames are more commonly used to insert content (for instance an advertisement) from another website into the current page.

The following is an example of an HTML document containing an IFrame:

 <html>
 <head>
  <title>This is an Inline Frames Example</title>
 </head>

 <body>
  This page comes from http://samplewebpage.com:
  <iframe src="http://samplewebpage.com"
   height="100" width="200" frameborder="0" scrolling="no">
   Alternative text for browsers that do not understand IFrames.
  </iframe>
 </body>
</html>

The embedded document can be replaced with a different one without reloading the surrounding page, by using the "target" attribute of an HTML anchor or by employing JavaScript. This makes many interactive applications possible, and IFrames are therefore commonly used by Ajax applications (this is a combination of Asynchronous Javascript and XML languages). The main alternative to using an IFrame in these situations is editing a document's DOM tree. Sometimes invisible IFrames are also used for asynchronous communication with the server, as an alternative to XMLHttpRequest. More recently, Mozilla Firefox, Opera and Microsoft Internet Explorer introduced contentEditable and designMode, which enables users to edit the contents of the HTML contained in an IFrame. This feature has been used to develop rich text (WYSIWYG) editors within an IFrame element. Popular applications which make use of this feature include Google Docs & Spreadsheets (formerly Writely), JotSpot Live, and MSN Hotmail to name a few.

HTML Links

z

Hyperlink

A hyperlink (often referred to as simply a link), is a reference or navigation element in a document to another section of the same document, another document, or a specified section of another document, that automatically brings the referred information to the user when the navigation element is selected by the user. As such it is similar to a citation in literature, but with the distinction of automatic instant access. Combined with a data network and suitable access protocol, a computer can be instructed to fetch the resource referenced.

Hyperlinks are part of the foundation of the World Wide Web created by Tim Berners-Lee, but are not limited to HTML or the web. Hyperlinks may be used in almost any electronic media.

HREF is an acronym for Hypertext REFerence, as used in HTML.

How hyperlinks work in HTML

A link has two ends, called anchors, and a direction. The link starts at the source anchor and points to the destination anchor. However, the term link is often used for the source anchor, while the destination anchor is called the link target.

The most common link target is a URL used in the World Wide Web. This can refer to a document, e.g. a webpage, or other resource, or to a position in a webpage. The latter is achieved by means of a HTML element with a "name" or "id" attribute at that position of the HTML document. The URL of the position is the URL of the webpage with "#attribute name" appended — this is a fragment identifier.

When linking to PDF documents from a HTML page the "attribute name" can be replaced with syntax that references a page number or another element of the PDF, for example page=[pageNo] - "#page=386".

Link behavior in web browsers

A web browser usually displays a hyperlink in some distinguishing way, e.g. in a different colour, font or style. The behaviour and style of links can be specified using the Cascading Style Sheets (CSS) language.

In a graphical user interface, the usage of a mouse cursor may also change into a hand motif to indicate a link. In most graphical web browsers, links are displayed in underlined blue text when not cached, but underlined purple text when cached. When the user activates the link (e.g. by clicking on it with the mouse) the browser will display the target of the link. If the target is not a HTML file, depending on the file type and on the browser and its plugins, another program may be activated to open the file.

The HTML code contains some or all of the five main characteristics of a link:

• link destination ("href" pointing to a URL)


• link label


• link title


• link target


• link class or link id

It uses the HTML element "a" with the attribute "href" and optionally also the attributes "title", "target", and "class" or "id":

<a href="URL" title="link title" target="link target" class="link class">link label</a>

Example: To embed a link into a Page, blogpost, or comment, it may take this form:

<a href="http://htmloref.blogspot.com">HTML Online Reference</a>

Thus, the complex link string is reduced to, [HTML Online Reference]. This contributes to a clean, easy to read text or document.

When the cursor hovers over a link, depending on the browser and/or graphical user interface, some informative text about the link can be shown:

* It pops up, not in a regular window, but in a special hover box, which disappears when the cursor is moved away (sometimes it disappears anyway after a few seconds, and reappears when the cursor is moved away and back). IE and Mozilla Firefox show the title, Opera also shows the URL.

* In addition, the URL may be shown in the status bar.

Normally, a link will open in the current frame or window, but sites that use frames and multiple windows for navigation can add a special "target" attribute to specify where the link will be loaded. Windows can be named upon creation, and that identifier can be used to refer to it later in the browsing session. If no current window exists with that name, a new window will be created using the ID.

Creation of new windows is probably the most common use of the "target" attribute. In order to prevent accidental reuse of a window, the special window names "_blank" and "_new" are usually available, and will always cause a new window to be created. It is especially common to see this type of link when one large website links to an external page. The intention in that case is to ensure that the person browsing is aware that there is no endorsement of the site being linked to by the site that was linked from. However, the attribute is sometimes overused and can sometimes cause many windows to be created even while browsing a single site.

Another special page name is "_top", which causes any frames in the current window to be cleared away so that browsing can continue in the full window.

HTML Elements

z

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start label (e.g. <label>) and an end label (e.g. </label>). The element's attributes are contained in the start label and content is located between the labels (e.g. <label>Content</label>). Some elements, such as
, will never have any content and do not need closing labels. Listed below are several types of markup elements used in HTML.

Structural markup describes the purpose of text. For example, <h2>Ball</h2> establishes "Ball" as a second-level heading, which would be rendered in a browser in a manner similar to the "HTML markup" title at the start of this section. A blank line is included after the header. Structural markup does not denote any specific rendering, but most web browsers have standardized on how elements should be formatted. Further styling should be done with Cascading Style Sheets (CSS).

Presentational markup describes the appearance of the text, regardless of its function. For example <b>boldface</b> indicates that visual output devices should render "boldface" in bold text, but has no clear semantics for aural devices that read the text aloud for the sight-impaired. In the case of both <b>bold</b> and <i>italic</i> there are elements which usually have an equivalent visual rendering but are more semantic in nature, namely <strong>strong emphasis</strong> and <em>emphasis</em> respectively. It is easier to see how an aural user agent should interpret the latter two elements. However, they are not equivalent to their presentational counterparts: it would be undesirable for a screen-reader to emphasize the name of a book, for instance, but on a screen such a name would be italicized. Most presentational markup elements have become deprecated under the HTML 4.0 specification, in favor of CSS based style design.

Hypertext markup links parts of the document to other documents. HTML up through version XHTML 1.1 requires the use of an anchor element to create a hyperlink in the flow of text: <a>HTML Online Learning</a>. However, the href attribute must also be set to a valid URL so for example the HTML code, <a href="http://html-online-learning.blogspot.com/">HTML Online Learning</a>, will render these sentence "HTML Online Learning" as a hyperlink.

HTML Overview

z

HTML stands for Hypertext Markup Language.

1. Hypertext is ordinary text that has been dressed up with extra features, such as formatting, images, multimedia, and links to other documents.
2. Markup is the process of taking ordinary text and adding extra symbols. Each of the symbols used for markup in HTML is a command that tells a browser how to display the text.

HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags), surrounded by less-than (<) and greater-than signs (>). HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.

HTML is also often used to refer to content of the MIME type text/html or even more broadly as a generic term for HTML whether in its XML-descended form (such as XHTML 1.0 and later) or its form descended directly from SGML (such as HTML 4.01 and earlier).