HTML

Versions of HTML

HTML is an evolving language, and each new version is given a number. The first definitive version was HTML 2.0 -- this had most of the elements we know and love, but was missing some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes.

HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of HTML. However, it was never completed or implemented, although many features were integrated in the next "official" version of HTML, known as HTML 3.2.

HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other element ALIGN attributes, and a few other finicky details. Essentially all browsers understand HTML 3.2. IT was, however, missing some of the Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET. Support for these (after a fashion) came in HTML 4.0

HTML 4.01 is the current official standard. It includes support for most of the proprietary extensions, plus support for extra features (Internationalized documents, support for Cascading Style Sheets, extra TABLE, FORM, and JavaScript enhancements), that are not universally supported.

The <p> tag defines a paragraph.

The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

Optional Attributes

Attribute	Value	Description
align	left right center justify	Deprecated. Use styles instead. Specifies the alignment of the text within a paragraph

Standard Attributes

The <p> tag supports the following standard attributes:

Attribute	Value	Description
class	classname	Specifies a classname for an element
dir	rtl ltr	Specifies the text direction for the content in an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	text	Specifies extra information about an element

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the largest heading and <h6> defines the smallest heading.

Optional Attributes

Attribute	Value	Description
align	left center right justify	Deprecated. Use styles instead. Specifies the alignment of a heading

Standard Attributes

The <h1> to <h6> tags support the following standard attributes:

Attribute	Value	Description
dir	rtl ltr	Specifies the text direction for the content in an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	text	Specifies extra information about an element

The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. They are not deprecated, but it is possible to achieve richer effect with CSS.

Tag	Description
<i>	Renders as italic text
<b>	Renders as bold text
<big>	Renders as bigger text
<small>	Renders as smaller text

The <font> tag specifies the font face, font size, and font color of text.

Optional Attributes

Attribute	Value	Description
color	rgb(x,x,x) #xxxxxx colorname	Deprecated. Use styles instead. Specifies the color of text
face	font_family	Deprecated. Use styles instead. Specifies the font of text
size	number	Deprecated. Use styles instead. Specifies the size of text. 1-7 and default is 3

Standard Attributes

The <font> tag supports the following standard attributes:

Attribute	Value	Description
class	classname	Specifies a classname for an element
dir	rtl ltr	Specifies the text direction for the content in an element
id	id	Specifies a unique id for an element
style	style_definition	Specifies an inline style for an element
title	text	Specifies extra information about an element

The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H₂O.

H<sub>2</sub>O

The <sup> tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW^[1].

WWW<sup>[1]</sup>

List

Some times we have to show information on the web page in some particular way or in some list way. This can be done in HTML by HTML List. There can be 3 type of List like:

1) Ordered Lists 2) Un Ordered List 3) Definition List

1. Ordered List

An ordered list, as enclosed by <ol> and </ol>, defines a list in which order matters. Ordering is typically rendered by a numbering scheme, using Arabic numbers, letters, or Roman numerals. Ordered lists are suitable for creating simple outlines or step-by-step instructions, because the list items are numbered automatically by the browser. List items in ordered and other lists are defined by using the list item element, <LI>, which doesn’t require an end tag. List items are usually indented by the browser. Numbering starts from 1.

Optional Attributes

Attribute	Value	Description
start	number	Deprecated. Use styles instead. Specifies the start point in a list
type	1 A a I i	Deprecated. Use styles instead. Specifies which kind of bullet points will be used

<ol start=3 >

<li>Devi Ahilya University

<ol type="A">

<li>IIPS

<li type="a">IT-Center

<li type="i">School of Physics

<li value=3 type="i" >SCS-IT

</ol>

<li>Barkatullah University

</ol>

2 UnOrdered List

An unordered list, signified by <UL> and </UL>, is used for lists of items in which the ordering is not specific. This might be useful in a list of features and benefits for a product. A browser typically adds a bullet of some sort (a filled circle, a square, or an empty circle) for each item and indents the list.

Attribute	Value	Description	DTD
compact	compact	Deprecated. Use styles instead. Specifies that the list should render smaller than normal	TF
type	Disc square circle	Deprecated. Use styles instead. default Specifies the style of the bullet points of the list items	TF

3 Definition Lists

A definition list is a list of terms paired with associated definition- in other words, a glossary. Definition lists are enclosed within <DL> and </DL> tags. Each term being defined is indicated by a <DT> element, which is derived from definition term. Each definition itself is defined by <DD>. Neither the <DT> nor the <DD> element requires a close tag, but for long definition, it may be helpful.

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

<dl>
          <dt>Coffee</dt>
                        <dd>- black hot drink</dd>
          <dt>Milk</dt>
                        <dd>- white cold drink</dd>
</dl>

<pre> Tag

The <pre> tag defines preformatted text.

Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. For example

<htmlt>

<head>

<title>Pre Tag Example</title>

</head>

<body>

Here We Show Pre Tag:

<pre>

#include<stdio.h>

void main()

{

printf("Hello from HTML.");

getch();

}

</pre>

The pre tag will show the above C program as it is as shown in pre tag. It preserve the whitespaces used in program.

</body>

<html>

<strike> Tag

The <s> and <strike> tags defines strikethrough text.

~~Strikethrough Text~~

The <a> tag defines an anchor. An anchor can be used in two ways: By <a> tag we can create a link to other page, or link to other page particular location, or link to particular location in the same page.

To create a link to another document, by using the href attribute
To create a bookmark inside a document or in other document, by using the name attribute

The <a> element is usually referred to as a link or a hyperlink.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

<html>

<head>

<title>Anchor Example</title>

</head>

<body>

Goto <a href = “#bottom” Title=”Information”>Bottom</a>

Here some multiline text………………………………

…………………………..

<a target= “_blank” href = “Page2.html#middle”>Goto Next Page (Middle Location)</a>

……………………………………..

……………Some Text…………….

</body>

</html>

Now you can change the links or anchors default text color from the <body> tag

<body link (Unvisited Link) = “blue” alink (Active Link)= “red” Vlink (Visited Link)=”green”>

Target Property Values

This attribute value shows that, where the link will open.

_blank =opens in New Window

_self =Open the linked document in the same frame as it was clicked (this is default)

framename/window_name = framename in which it will open

Image Tag: To insert in image into a Web Page, use the <IMG> element and set the SRC attribute of the element equal to the URL(Uniform Resource Locator) of the image. The URL may be either an absolute URL or a relative URL. Most likely, the image element will use a relative URL to an image found locally. The SRC attribute must be included. Otherwise, browser that supports images may display a placeholder or broken image icon and it will display a Text specified in ALT attribute of image.

<img src=”path of image with file extension” alt=”Alternate Text”>

for example: Relative path example.

<img src=”Images/IIPS.jpg” alt = “Image of IIPS Department”>

Absolute path Example.

<img src=”http://www.iips.edu.in/Images/IIPS.jpg” alt = “Image of IIPS Department”>

Some other attributes of <IMG> tag are as follows.

* Align Property: Possible Values

Top –Text is align to top of image

Middle – Text is align to middle of image

Bottom – Text is align to bottom of image

Left – Image is align to left side and text is flow around to Right side of image

Right- Image is align to right side and text is flow around to Left side of image

* Title Property

For Tooltip on image.

* Border Property:

Border =”3” it creates the border around the image with specified pixels.

* HSpace Property: Horizontal Space on both side of image (Left and Right)

HSpace = “50”

* VSpace Property: Vertical Space on both side of image (Top and Bottom)

HSpace = “50”

*Height and width Property: Set the Height and width of image in browser window.

Image Map -: An image map is an image that contains many hot spots that may result in a different URL being loading depending on where the user clicks.

1) Client Side Image Map:-

In Client Side image map we put the map coding in the <head> or <body> section of html file. So in client side image map there is only one file for map information and html coding.

a) A sever doesn’t need to be visited to determine the destination, so links are resolved faster.

b) Destination URL can be shown as the user’s pointer moves over the image.

Disadvantage:

a) Web page maintenance is difficult, if the same map information is used by many web pages.

2) Server-side Image Map-:

In Server-Side image map we put the map coding in separate file, whose file extension is .map. and make reference of this map file in html file. So in server side image map there are 2 separate file, one for map information and other for html code, where <img> tag uses the map file information.

a) The user clicks somewhere within the image.

b) The browser sends a request to the web server, asking for the URL of the document associated with the area clicked. The coordinates clicked are sent to a program on the server, called image map, which decodes the information.

c) After consulting a file that shows which coordinates map to which URL the server sends back the information requested.

d) After receiving the response, the browser requests the new URL.

Disadvantage:

a) Users really don’t have a sense, URL-wise, where a particular click will take them. All that users see as they run a mouse over image is a set of coordinates showing the current x,y value

b) Server must be consulted to go to the next page. This will slow the process.

Client Side Image Map

</map>

Area Tag Attribute

Shape Values:

Rect –for rectangle left-x, top-y, right-x, bottom-y Coords=”0,0,100,50”

Circle- for circle center-x, center-y, radius coords=”0,0,10”

Poly- for polygon- x1,y1,x2,y2,x3,y3…..

Default- remaining area of image (coords not required.)

Href = URL (Path of the web page you want open)

Target = ”framename/_blank”

NoHREF = for no destination.

Server Side Image Map

This code is in shape.map file, which is stored in web server where, the all other html and image files are stored.

</map>

<a href=”shape.map”>

</a>

Table

Tables were initially intended as a means of displaying tabular data in a web page. It contains row and column of information.

<table cellpadding=”50” cellspacing=”50” align="right" border="2" width="70%">

<caption align="bottom"> Department List</caption>

<tr>

<th bgcolor="green">S.No.</th>

<th bgcolor="green">Department Name </th>

</tr>

<tr>

<td>1</td>

<td>IIPS </td>

</tr>

<tr>

<td>2</td>

<td>IMS </td>

</tr>

</table>

<td> Attribute

valign=top, middle, bottom (vertical alignment of text/image in a particular cell)

align =left, right, center, justify (horizontal alignment of text/image in a particular cell)

bgcolor= background color of Cell

width= width of column in pixel or %

Cell spacing and cell padding

It’s possible to change the amount of padding within a table’s cells, as well as the spacing between all the cells in a table. This is done with the cellpadding and cellspacing attributes, respectively. In the rather extreme example that follows, cellpadding is set to 20, cellspacing to 40, and border to 5, so that each can be differentiated with ease (see the subsequent screenshot). As you can see, cellspacing not only affects the spacing between the cells, but also the distance between the cells and the table’s edges.

<tr><td>Cell three</td><td>Cell four</td></tr>

</table>

cellpadding

Cellspacing

Spanning rows and cells

It’s sometimes necessary for data to span multiple rows or columns. This is achieved via the rowspan and colspan attributes, respectively. In the following table, the first row has three cells. However, in the second row, the first cell spans two rows and the second cell spans two columns. This means the second row lacks a third cell, and the third row also only has two cells (whose contents align with the second and third cells of the top row). Rowspan and Colspan : Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

<tr>

<td>Another cell</td>

<td>Yet another cell!</td>

</tr>

<tr>

<td rowspan="2">A cell that spans two rows</td>

<td colspan="2">A cell that spans two columns</td>

</tr>

<tr>

<td>Another cell</td>

</tr>

</table>

Frames

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. But in Frame, there is no <body> tag. It will show only other html page inside it. If we want to create a page that has, its own some information to display with other web page on it, then we have to use iFrame instead. Frame only provide a place where we can display other web pages.

There is no need for <body>

<htmlt>

<head>

<title>Frame Example</title>

</head>

<frameset rows="20%,60%,20%" frameborder ="1" >

<frame src=”header.html”>

<frameset cols=”20%,80%”>

<frame src="menu.html">

<frame name="target" src=”default.html”>

</frameset>

<frame src=”footer.html”>

<noframes>

Your browser does not support frame.

</noframes>

</frameset>

<html>

Attributes of <frameset> tag are as follows:

Attribute	Value	Description
cols	% *	Specifies the number and size of columns in a frameset. Value could be in % or the remaining area is in . i.e. cols=”30%,”
rows	% *	Specifies the number and size of rows in a frameset
frameborder	Number/pixel	Specifies the frame border width in pixels.

Attributes of <frame> tag are as follows:

Attribute	Value	Description
src	Path of the Web Page	Specifies the path of the web page which you want to show in this particular frame.
name	Any String Value	Specifies the name of the name of this frame.

IFrame

The iframe (Inline Frame) creates a "window" in a web page that can display a second document within its border.

Here's the code for a very simple iframe:

<iframe src="path of file" width= “100%” height= “130px” name="FrameName">

Yours Browser doesn’t support iFrame.

</iframe>

The "src" is the name of the page you want displayed inside the iframe. The width and height can be set to whatever size you need.

The name attribute is so you can target links to load into the iframe.

Lastly, where it says " Yours Browser doesn’t support iFrame " is where you place content for browsers that do not support the iframe. They'll see whatever content you place there. Often, a webmaster just links to the content he or she is trying to display in the iframe.

Syntax <iframe>...</iframe>

Attribute Specifications to Adjust Appearance and Behavior

src="(URL of initial iframe content)"
name="(name of frame, required for targeting)"
width=(frame width, % or pixels)
height=(frame height, % or pixels)
frameborder=[ 1 | 0 ] [Yes/No](frame border, default is 1)
scrolling=[ yes | no | auto ] (ability to scroll)

An example is shown here:
<iframe name="inlineframe" src="float.html" frameborder="0" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>

Another one

<tr>

<td width="33%"><a href="http://www.yahoo.com" target="window">Yahoo</a></td>

<td width="33%"><a href="http://www.google.com" target="window">Google</a></td>

<td width="34%"><a href="http://www.microsoft.com" target="window">Microsoft</a></td>

</tr>

</table>

<Marquee> Tag

You can create a scrolling marquee (i.e. scrolling text or scrolling images or any content) by using the <marquee> tag. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to top - it's your choice!

DIRECTION =
LEFT

| RIGHT|UP

BEHAVIOR =
SCROLL

| SLIDE | ALTERNATE

ScrollDelay
=”1000” in millisecond

ScrollAmount=”5”    -> No of Pixels it moves the content in
particular ScrollDelay.

Appychip

Saturday, 5 November 2011

HTML

Versions of HTML

Optional Attributes

Standard Attributes

Optional Attributes

Standard Attributes

Optional Attributes

Standard Attributes

1. Ordered List

Optional Attributes

2 UnOrdered List

Target Property Values

Spanning rows and cells

Another one

0 comments:

Post a Comment

Popular Posts