Inetrnet Basics

HyperText Markup Language (HTML) is the standard language the web uses to create and recognize hypermedia documents. It is a platform independent language. The web browser reads the HTML code, formats the document and displays it on the browser screen. HTML follows the SGML (Standard Generalized Markup Language) format. It allows the documents to separate document content from presentation. SGML was used as a template for HTML in 1990 and now it has become the standard for the www. HTML is an easy to use language; it can be typed directly into a word

possessing application without using HTML editors. Web documents have .htm file extensions. HTML format supports hyperlinks, hypertext and hypermedia.

Sample HTML Format

Designing a Web Page

Designing a web presentation is like any other complex and involved process as designing a book outline, a building plan or a painting. Having a plan can help you keep the details straight and to develop the finished product with fewer false starts. The plan and structure of a web site should include:

1. Deciding the content

2. Setting goals

3. Deciding topics

4. Organizing the presentation

Html Tags Top

Specifications

1. HTML tags begin with a ‘<tag name>’ and end with a ‘</tag name>’

2. The tags are not case sensitive. <HTML> is same as <html>

3. Leaving blank spaces in a html document will be ignored by the browser.

Head Elements

<.HTML>….. <./HTML>

The first document structure tag in every HTML document is <.HTML> tag.

All the text and html commands in the html document should go within the beginning and ending html tag.

<HEAD>…. </HEAD>

The <head> tag specifies that the lines within this tag are a prologue to the rest of the document.

There a few tags those go in the head of a document.

<.TITLE> … </.TITLE>

One item that should always be there in within the head is the <.Title> tag. It indicates what the document describes or the name of the company. It is displayed in the title bar of the browser window and is used by the browser to bookmark a particular site.

<.BODY> … <./BODY>

The body in a document should be marked of with <.Body> and <./Body> tag. This tag identifies the part of the document that is displayed as a page in the browser. The body tag is used to set background image, font colour and link colour.

Example:

<.HTML>

<.HEAD>

<.TITLE>Novell-India Development Center</.TITLE>

<./HEAD>

<./HTML>

Sample document with head and title

Body Elements

Heading Tag

Headings are used to divide the text documents. There are six levels of heading tag,

<H1>… </H1> Most Prominent

<H6> … </H6> Least prominent Header

Levels of heading tag

Paragraph - <P> … </P> Tag

Paragraphs are separated in a HTML document with a <P> tag. Though the </P> is not necessary to use to end a paragraph every paragraph is preceded by <P> tag.

<BLOCKQUOTE> … </BLOCKQUOTE>

Blockquote sets apart a section of text. It is usually used with a quotation from another source or author.

Comment Tag

The tag for inserting comment lines in an html document is:

<! – Comment - - > or <COMMENT>…</COMMENT>

The browser ignores anything written within the comment tag.

The Link Tag <A…>…. </A>

To create hyperlinks to other documents and URL’s in a HTML documents, anchor tag <A> is used. The opening tag contains the information about the link itself. These are called the attributes of a link.

All the text between the opening and closing will become the actual link on the screen and will be highlighted with blue or red and will be underlined. The <A> tag includes HREF to the file or the URL to be linked to the text.

The HTML tag for putting a hyperlink to another file in the same directory into a document looks like:

Linking specific text within a document – The Anchor Name

Creating a link to a particular text in a document to another is done by creating an anchor within a document. Instead of using HREF attribute in <A> tag NAME attribute is used. The name attribute takes the keywords that will be used to reference the anchor.

<A NAME=”Anchor_Name”>…</A>

Defines the target location in a document

< A HREF=”#Anchor_Name”>…</A>

Link to a location in the same document

<A HREF= “URL#Anchor_Name”>…</A>

Links a target location in another document

Example:

<html>

<head><title> Welcome to Novell </Title></head>

<body>

<H1><A NAME="Sample document">Sample Document to demonstrate anchors</A></H1><br>

<p> This is a sample paragraph with link embeded in a document with anchor tag:</P>

<p><A HREF="#Sample document">Sample Anchor</A>

</body></html>

Character Styles

Character styles are tags that affect the appearance of words or character so that the text is different from the surrounding text (Making it boldface or Italics).

There are two types of text tags: Logical and Physical style tags.

Logical style tags indicate how the text is to be used (emphasis, citation, definition).

Physical style tags indicate exactly how the text is to be formatted (Bold, Italic etc).

Each character style tag has both opening and closing tag.

List of Logical Style Tag
<EM>…</EM>	Emphasizes text. The <em> tags is typically italics.
<STRONG>…</STRONG>	Stronger emphasis than <EM>. The <strong> tag is typically boldface.
<CODE>…</CODE>	A code sample. A fixed width font such as courier.
<ADDRESS>…</ADDRESS>	For signature like entities. Rendered by browsers in italics. Used to give the name of the webmaster or company.
<DFN>…</DFN>	A definition. Used to highlight a word that is defined.
<SAMP>…</SAMP>	Example text similar to code.
<CITE>…</CITE>	Displays a citation. For titles of others work.

List of Physical Style Tag
<B>…</B>	Boldface
<I>…</I>	Italics
<U>…</U>	Underline
<TT>…</TT>	Renders text in fixed-width typewriter style.

Lists

HTML defines three kinds of Lists:

Ø Ordered lists or numbered, Typically labeled with numbers

Numbered lists are surrounded by <OL>…. </OL> tags, and each item within the list begins with <LI> tag. There is no closing for <LI> tag. The <OL> tag can have attributes like:

<OL START= number>…</OL> The start attribute allows you to specify the number of first item in the list.

<OL TYPE=A, a, 1, I, i >…</OL> The TYPE attribute allows to specify the numbering style. Uppercase A for alpha ordering, Lowercase “a” for lowercase alpha ordering, Uppercase I for roman number ordering etc.

Ø Unordered or bulleted lists typically labeled with bullets or some other symbol

Unordered lists are surrounded by <UL>…</UL> tags, and each item within the list starts with <LI>.

<UL TYPE= disc, round, square>…. </UL> The TYPE attribute allows to specify the bullet type.

Ø Glossary lists or definition tags, in which each item has a term and a definition, so arranged that the term is somehow highlighted or drawn out of the text. The list is surrounded by <DL>…</DL> tag. Each list item has two parts:

· A term indicated with the <DT> tag.

· An explanation that uses the <DD> tag.

Lines and Breaks

<BR>

Forces a line break and retain the same style. In some browsers <BR> also adds an extra line of space. It should not be used in place of <P>.

<BR CLEAR=LEFT, RIGHT, ALL>

Inserts vertical space so that the next text displayed will follow a left or right aligned image. LEFT inserts space so that the next text appears aligned with the left margin directly below a left-aligned image. RIGHT is for the right side. ALL puts the next text past all aligned images.

<HR>

Draws a horizontal rule the width of the window. The line can be of any width length or colour.

<HR ALIGN=”LEFT” SIZE=”3” WIDTH=”300” COLOR=”#ff0000”> are the attributes of the <HR> tag, where size is the height in pixels. The width can be in pixels or percentage of the window.

Alignment

The ability to place the text where you want it is still very limited with HTML, though aligning graphics is less constrained. The align tag is an attribute with most of the tags to align the text or graphics.

The tags for aligning text and images are:

<CENTER>…</CENTER>

Aligns the text or images to the center of the line. Causes subsequent text also to be centered.

<ALIGN=”LEFT, Right, Center, Justify>Align tag can specify where on the page relative to the margins, the words are displayed.

Fonts

<BASEFONT SIZE=1, 2, 3, 4, 5, 6, 7>…</BASEFONT>

This determines the basefont size against which all relative font changes occur. The default basefont size is 3.

<FONT SIZE=1, 2, 3, 4, 5, 6, 7>…</FONT>

This creates relative font changes from the base font size.

<BIG>

Makes text one size larger than the default font size.

<SMALL>

Makes text one size smaller than the base font size.

<FONT FACE =”Arial”, ”Times Roman”, etc.>…</FONT>

The font tag with a Face attribute identifies which font the browser should use.

Backgrounds

Solid Colour Backgrounds

By adding the BGCOLOR attribute in the body tag the background colour of any HTML document can be changed. The HTML format reads colour only in their hexadecimal RGB values. You will have to convert the RGB values into hexadecimal using a scientific calculator. The tag for background colour:

<BODY BGCOLOR= #ffffff > (here ffffff is white)

<BODY TEXT= #ffffff > Sets the colour of the text on the page

<BODY LINK= #ffffff > Sets the colour of the hyperlinks that have not yet been visited.

<BODY VLINK= #ffffff > Sets the colour of the visited links on the page.

Tiled Image Background

To create a tiled image background, use the BACKGROUND attribute in the body tag. The value of the BACKGROUND is the URL that’s points to the image file. Example:

<BODY BACKGROUND= ”tiles.gif”>

Sound and Animations

<BGSOUND=”URL”>

The tag identifies a sound file to play when you open a HTML document. Most browsers play MIDI, wave and real audio as sound files.

<IMG DYNSRC=”URL”>

This tag identifies an animation file to play.

<LOOP= ”n”>

LOOP works with both BGSOUND and IMG DYNSRC tags to specify how many times the sound or animation should play.

<BLINK>…</BLINK>

It causes the enclosed text to have a blinking effect.

Images Top

Image Formats

Inline images are the ones that appear directly on the web page and are loaded when the page is HTML document is loaded. Most of the browsers support GIF (Graphics Interchange Format) and JPEG (Joint Photographic Engineering Group) formats. Image editing software’s such as Adobe PhotoShop and Corel Photo Paint read common input formats and converts the files to CompuServe GIF 89 formats, JPEG and transparent GIF.

<IMG> Tag

Images in HTML documents are inserted using the <IMG> tag. Image tag does not have a closing tag. It has three attributes SRC, ALT and ALIGN.

<IMG SRC= ”image.gif” >

The SRC attribute specifies the filename of the image to be inserted.

<IMG SRC= ”image.gif” ALT= ”Image” >

Alternate text allows the text string to be put in place of the image in browsers that do not support graphics.

<IMG ALIGN= TOP, MIDDLE, LEFT, RIGHT>

The graphics can be aligned to the left, right or center of the page. The graphics can also be aligned with the surrounding text with the top, middle and left arguments.

<IMG SRC= “image.gif” ALIGN=”top”> Top aligned text

<IMG SRC= “image.gif” ALIGN=”middle”> Middle aligned text

<IMG SRC= “image.gif” ALIGN=”bottom”> Bottom aligned text

<IMG SRC= “image.gif” ALIGN=”left”> Left aligned text

<IMG SRC= “image.gif” ALIGN=”right”> Right aligned text

<IMG BORDER= n>

Within an image the default border can be removed by adding border attribute and setting the BORDER=0.

<IMG HEIGHT= “n” WIDTH= “n”>

The height and width of an image can be specified or altered.

Image Linking

<A HREF=”file.htm” ><IMG SRC= “img.gif”></A>

Image Maps

Different parts of an image can activate different links. For example a hyperlinked map that links you to pages describing the regions clicked. The image map requires a special HTML code to indicate that an image is a map and map file on the server that indicates regions on the image and the WebPages they point to. Creating a map file invokes sketching the regions to be clicked, finding out the co ordinates that define those regions and deciding on HTML pages they should point to.

The coordinates of the region to be image mapped can be found using image editing software such as PhotoShop or an image can be mapped using special software’s meant for creating image maps such as Map This.

ISMAP Tag

The tag for image map is

<IMG SRC= ”india.gif” ISMAP USEMAP= ”map”>

<P> <MAP NAME= ”map”>

<AREA SHAPE= RECT COORDS=”x1,y1,x2,y2” HREF=”delhi.gif”>

<AREA SHAPE= CIRCLE COORDS=”x,y,r” HREF=”haryana.gif”>

<AREA SHAPE= POLY COORDS=”x1,y1,x2,y2” HREF=”delhi.gif”>

html>

<head>

<title>Untitled Normal Page</title>

</head>

</body></html>

Tables Top

Tables are ideal for structuring data so that user can easily access information. Tables allow you to align data or to set text and graphics apart. Tables are difficult to create as they incorporate so many tags. The HTML editing tools make it easy to format tables.

Parts of a Table:

· Caption: The caption identifies what the table contains. They are similar to heading in the body of the document and are usually displayed with bolder fonts to emphasize header information.

· Data: The content in a table is called Data.

· Cells: The individual squares in a table are called a cell. Cells may contain data or headings.

Table Elements

<TABLE>…</TABLE>

Every table tag needs to begin and end with <TABLE>…</TABLE> tag. Between these tags are the caption text and cell content.

<TABLE BORDER =n>

By default, tables have no borders. Border can be added to the outermost wall of the table by including a border attribute to the table tag.

<TABLE CELLSPACING =n>

Cell spacing is the amount of space inserted between individual cells in a table. You can alter this value by adding the cell spacing attribute and a value.

<TABLE CELLPADDING =n>

Cell padding is the amount of space between the border of the cell and the content of the cell. The default cell padding value is “1”.

<TABLE WIDTH =n>or<TABLE WIDTH =n%>

The width attribute of the table tag describes the desired width of the table. The value can be an absolute pixel width or a percentage of the document width.

<TABLE BORDERCOLOR= #rrggbb>

The border color defines the color of the border of a table. The colour can be represented with a hex string.

<CAPTION>…</CAPTION>

Any text or HTML formatting can appear in a caption. The caption tag is within the table tag and not inside table rows or cells. Captions are horizontally centered with respect to the table and may wrap to fit the table’s width.

<CAPTION ALIGN=BOTTOM>

By default the caption is represented above the table but it can also be aligned to the bottom of the table.

Table Header

<TH>…</TH>

Table Headers are defined with the TH tag. Header cells are just like data cells, but are formatted with fonts that emphasize the words and sets it apart from the surrounding text.

<TH WIDTH= n> or <TH WIDTH= n%>

The TH tag can have a width attribute that describes the width of a cell. The value can be in pixels or in percentage of the table width.

<TH ALIGN= LEFT, RIGHT, CENTER>

The ALIGN attribute specifies the alignment of the text within the table header. By default they are centered horizontally and vertically.

<TH VALIGN= TOP, MIDDLE, BOTTOM>

The vertical align attributes specifies if the text should be aligned to the top, bottom or middle within the cell.

<TH NOWRAP>

The NOWRAP attribute signifies that lines within the cell should not be broken to fit the width of the cell.

<TH COLSPAN= n>

The COLSPAN attribute specifies how many columns of the table the cell should span. The default is COLSPAN=”1”.

<TH ROWSPAN= n>

The ROWSPAN attribute specifies how many rows of the table the cell should span. The default is 1.

<TH BGCOLOR= #rrggbb>

The background colour of the header cell can be specified.

<TH BACKGROUND= “name.gif”>

An image can also be specified as the background of the header cell.

Table Row

<TR>…</TR>

Each table row is identified with TR tag. There can be as many cells in each row as you need for your columns. Between the opening and closing of TR tag the table header (TH) and table data (TD) tags indicate the header and data text of each row.

<TR WIDTH= n> or <TR WIDTH = n%>

The width attribute describes the desired width of the row. The value can be absolute pixel width or in percentage.

<TR ALIGN= LEFT, CENTER, RIGHT>

The ALIGN tag specifies the horizontal alignment of the text in a row.

<TR VALIGN= TOP, MIDDLE, BOTTOM>

VALIGN attribute specifies the vertical alignment of the text.

Table Data

<TD>…</TD>

Table Data is identified with the TD tag.

<TD WIDTH= n> or <TD WIDTH = n%>

The width attribute describes the desired width of the data cell. The value can be absolute pixel width or in percentage

<TD ALIGN= LEFT, CENTER, RIGHT>

The ALIGN tag specifies the horizontal alignment of the text in cell. By default it is always left aligned.

<TD VALIGN= TOP, MIDDLE, BOTTOM>

VALIGN attribute specifies the vertical alignment of the text in a cell.

<TD NOWRAP>

The NOWRAP attribute signifies that the line within the data cell should not be broken to fit the width of the cells.

<TD COLSPAN= n>

The COLSPAN attribute specifies how many columns of the table the cell should span. The default is COLSPAN=”1”.

<TD ROWSPAN= n>

The ROWSPAN attribute specifies how many rows of the table the cell should span. The default is 1.

<TD BGCOLOR= #rrggbb>

The background colour of the data cell can be specified.

<TD BACKGROUND= “name.gif”>

An image can also be specified as the background of the data cell.

Example:

</head>

<tr>

<th colspan="3" bgcolor="#808000" nowrap><font size="4">Header</font></th>

</tr>

<tr>

<td width="33%">Table Row</td>

<td width="34%">Table Row</td>

</tr>

<tr>

<td width="33%">Left Aligned</td>

<td align="center" width="33%">Centre Aligned</td>

<td align="right" width="34%">Right Aligned</td>

</tr>

</table></center>

</body></html>

Forms Top

Forms are an effective method of making web pages interactive. Forms are used in HTML to get input from the users. They can be typically used to accept orders or to get feedback from the customers.

A form is presented with a number of input mechanisms, which help you enter data. These could be text fields, radio buttons, check boxes or list boxes. After the data entry is complete the form is submitted.

Submitting the form means, sending the user’s input to the server for processing. Clicking on a button on the page does this. The browser then sends the data and the URL of the CGI script to the server. The server then passes the data to the CGI script, which processes it. It sends the response in HTML format to the server.

<FORM> …</FORM>

All elements required to define the content of a form, are parameters of the container element. There are two attributes of a form tag:

< FORM ACTION= “URL”>

Defines the action to be taken on submission of the form. The value of this attribute is the URL of the CGI script to be executed on submission of this form.

<FORM METHOD= “POST or GET”>

It specifies the format in which the data is to be sent to the script. It can have one of two values: Get or POST. In the POST method the information is sent one by one while GET sends the information in all the elements together.

Example:

<FORM METHOD= “POST” ACTION= “…/cgi-bin/cgi.pl”>

<INPUT> ELEMENT

This element is used to create an input field. The input field can be a checkbox, a radio button, a text field or a password entry field.

<INPUT TYPE= “text”>

The field type is decided by the TYPE attribute of the input element. The values of the TYPE attribute are:

· CHECKBOX: Creates a check box.

· TEXT: Creates a single line text entry field.

· PASSWORD: Creates a single line text entry field. Data keyed in this field is encrypted.

· RADIO: Creates a radio button.

· RESET: Creates a button which, when pressed resets all the fields in a form.

· SUBMIT: Creates a button which, when pressed submits the form.

<INPUT NAME= “some name”>

Every form element sends a name to the server for every field in the form. The value is the data keyed in by the client in the form. NAME is the variable or name that stores the value.

<INPUT VALUE= “option”>

The VALUE attribute depends on the TYPE attribute. For Boolean fields such as check boxes and radio buttons, the value of this attribute is sent to the server when the field is chosen.

<INPUT CHECKED>

This attribute is applicable to radio buttons and check boxes. It marks the field as selected by default. The most frequent selected option will be checked. The value selected overrides the default value.

<INPUT SIZE= ”n”>

This attribute specifies the length of the field to be displayed in a browser window.

<INPUT MAXLENGTH>

This attribute fixes the length of the field. It specifies the maximum number of characters or numbers that can be entered.

Selections

<SELECT>…</SELECT> and <OPTION> Tags

Selections enable a user of a form to select one or more items from a drop down menu list or a scrolling list. Selections are indicated by <SELECT> tag and individual options within the selection by <OPTION> tag. They work much like list tag does.

Example:

<P> Select Color

<OPTION>Black

<OPTION>White

<OPTION>Red

</SELECT></P>

<SELECT MULTIPLE>

This attribute lists all the options in a scrollable box.

<OPTION SELECTED >

This attribute selects the option by default.

<TEXTAREA>…</TEXTAREA>

Text areas are input fields in which the user can type. Unlike regular input fields text areas can contain several rows and columns. It has three attributes:

<TEXTAREA NAME= “name”>

The name to be sent to the cgi form

<TEXTAREA ROWS= “n”>

The height of the text area

<TEXTAREA COLS= “n”>

The width of the text area.

Example :

<html>

<head>

<title>Untitled Normal Page</title>

</head>

<p align="LEFT"><strong>FEEDBACK FORM</strong></p>

<p align="left"><strong>1. Enter you name: </strong><input type="text" size="20" name="T1"></p>

<p align="left">2. <input type="radio" checked name="R1"

value="V1">Male <input type="radio" name="R1" value="V2">Female</p>

<p align="left">3. I want to subscribe to

<option>India Today

<option>Femina

</select></p>

<p align="left">4. Send me more information on: <input

type="checkbox" name="C1">Newsletters <input type="checkbox"

name="C2">Magazines</p>

<p align="left">5.Comments <br>

</form>

</body> </html>

Frames Top

<FRAMESET>…</FRAMESET> Tags

The FRAMESET tag works as a container for the frame document. It replaces the BODY tag. It has two attributes:

· <FRAMESET ROWS= “n%, n%>…</FRAMESET>

Or <FRAMESET ROWS= “n, n, n>…</FRAMESET>

This attribute will divide the screen into two horizontal frames. The height of the frames can bbe defined in absolute pixels or percentage.

· <FRAMESET COLS= “n%, n%>…</FRAMESET>

Or <FRAMESET COLS= “n, n, n>…</FRAMESET>

The COLS attribute divides the screen vertically.

<FRAMES>…</FRAMES>

The FRAME tag specifies the attributes of each row or column. It defines a single frame in the frameset.

It has six attributes:

· <FRAME SRC= “URL”

The SRC defines the URL of the document to be displayed in the frame. This is a mandatory attribute of the frame tag.

· <FARME NAME= “name”>

The name attribute is used to assign a name to the frame. This name is used whenever a document has to be opened in a frame from a link in another frame.

· <FARME MARGINWIDTH= n>

This attribute is used to control the left and the right margins of a frame. The value of margin is in pixels. The margins can be 0 also.

· <FARME MARGINHEIGHT= n>

MARGINHEIGHT controls the upper and lower margins of a frame.

· <FARME SCROLLING= “YES, “NO”, AUTO”>

The scrolling attribute is used to specify whether the frame should have horizontal and vertical scroll bars. The auto value instructs the browser to automatically place scroll bars when necessary. The default value of SCROLLING attribute is auto.

· <FARME NORESIZE>

Frames can be resized by dragging a frame edge to a new position unless specified. By default all frames are resizable.

<NOFRAMES>…</NOFRAMES> Tag

Some browsers do not support frames; such browsers cannot interpret frame documents. It is ideal to give alternative content for non-frame capable browsers. Frame capable browsers ignore the NOFRAME tag.

Example:

<html>

<head>

<title>Welcome to Novell</title>

</head>

</frameset>

<body>

<p>

<p>This web page uses frames, but your browser doesn't

support them.</p>

</body>

</noframes>

</frameset>

</html>

Special Characters Top

HTML recognizes only key board characters and assumes anything within <> as commands, there are special ways to display non keyboard characters such as “<” or “>”.

A complete list of special characters and ASCII numeric values can be found in the reference to tags.

The style of these tags is:

&KEYWORD

Displays a particular character identified by a special keyword. For example the entity &AMP: specifies the ampersand (&), the entity &LT specifies the less than (<) character.

&#ASCII_NUMERIC_VALUE;

Displays the character literally. The semicolon following the numeric value is mandatory.