0 Html

Introduction to Html

The term knowledge is power really takes on a special dimension in software .This is one area where information plays a vital and dynamic role. Tried and tested methods of providing information to those who need it, like printed docoments bound together in th e form of manuals ,books and so on, does not really work for software information .This is because this information is very dynamic and it keeps changing  and rechanging all the time.

A change of information requires the contents of books , manuals, and so on, to change.This will be in turn require complete reprinting of the books and manuals. Reprinting always result in time and cost overheads .Reprinting also result in out dated books  and manuals being held in inventory , unable to be used.

To resolve this problem , information needs be stored in such a manner that whenever the information changes , these changes can be incorporated with the least cost and time .A tried and tested method that allows this is to store the information in the form of computer based files . These files could be store at central location .Once stored at a central location the files can be accessed when required for reference.

Since , these files are stored at a central location on a computer , their access will also require a computer and some sort of network that connects these two computer together.

Thus to provide information to the users :

• Files holding information must be created .
• These files must be stored at a central location on a computer.
• When required the users should be allowed to access these files using their desktop computers .
• A network link must be established between the desktop computer and the computer service information at a central location.

This introduces client/ server terminology :

• The desktop computer requesting for information is termed as the client. 
• The computer serving information from a central location is termed as the server. 

Information File Creation

The information has to be stored on a central computer, it must be created first. While being created information can only be stored in the form of files on the computer ,These files are created using special software programs or programming environments.

Files can travel across the network in the world , the internet , and cerry information from a server to a client that requested them are called web pages . The individuals who develops these webpages is called web developer. 

 Web Server

 Web pages are created using HTML syntax .These pages must be organised and stored at a central computer.

The organisation of web pages into dimensions and files stored on  the HDD of a central computer is called components , that store web pages in the form of directories and files and provide these files to be read , are called server. They act like service provider that service the need of information .

The server computer run special software called web server software that allows :

1.     Web site management

2.     Accept a client's request for information .

3.     Respond to clients request by providing the page with the required information.

Some of the most popular software  , that servers run to allow them to respond to client request for information , is internet information server (IIS) , Apache Web server, Netscape server , and Microsoft personal web server.  

 Web Client / browser 

To access information stored in the form of web pages , users must connect to a web server . Once connected ,an interface that displays the contents of the web page is required .

Computers that offer the facility to read information  stored in web pages are called web clients.

Web clients run special software called a BROWSER that allows them to :

• Connect to an appropiate server.
• Query the server for the information to be read.
• Provides an interface to read the information returned by the server.

HTML (hyper text markup language)

The language used to display web pages is called HyperText markup language(HTML). HTML is the language interpreted by a browser .Web pages are also called HTML documents . HTML is a set of special codes that can be embedded in text to add formatting and linking information .HTML is specified as tags in an HTML document(i.e web page).

 HTML TAGS

Tags are instruction that are embedded directly into the text of the document.An html tag is a signal to a browser that it should do something other than just throw text up on the screen . By convention all html tags begin with an open angle bracket (<) and end with a close angle bracket (>) .

         HTML tags are two types :

• PAIRED TAGS = A tag is said to be a paired tag if it , along with a companion tag . for example the <B> tag is a pared tag . The <B> tag with its companion tag </B> causes the text contained between them to be rendered in bold . The effect of other paired tags is applied only to the text they contain.

In paired tags, the first tag <B> is often called the opening tag and the second tag (</B>) is called the closing tag . The opening tag activities the effect and the closing tag turns the effect off.

• SINGULAR TAGS= The second type of tag is the singular or standalone tag . A singular tag does not have a companion tag. The simplest and quickest way to know the functionality of html tags would be to learn a few tags and immediately use these tags in formatting textual information to be used in a web page  as part of a web site . Using this technique the html tag , its attribute where applicable , and its functionality will immediately become apparent.

Commonly used Html commands

 The structure of an html program

Every html program has a rigid structure .The entire web page is enclosed within <html> </html> tags . Within these tag two distinct section are created using the <head> </head> tags  and the <body> </body> tags. These sections are described below.

Document head

Information placed in this section is essential to the inner workings of the document and has nothing to do with the content of the document. With the exception of information contained within the <title>..</title> tags , all information placed within the <head></head> tags is not displayed in the browser .

The html tags used to indicate the start and end of the head section are:

<head>
<title>
.......
.....
.....
.......
</title>
</head>

Document body 

The tags used to indicate the start and end of the main body of textual information are:

<body>
..........
..........
..........
..........
<//body>
 page default like background color, text color, font size, font weight, and so on can be specified as attributes of the <body> tag. The attributes that the <body> tag takes are:

• CSS background formatting (background- color:) = Sets the default background - color property to the background -color of an element tag is written in the css file.
• CSS background formatting (background- image:) = Sets the background - image property of an element or of the document .This tag is written in the CSS file.
• TEXT = Changes the body text color from its default value to the color specified with the attribute.
  example :

<body style=" background :url(pan.gif); color:red;">

Text formatting 

• Paragraph breaks = A blank line always seperates paragraph in textual material . The tag that provides this functionality is <p> on encourtering this tag the browser , moves onto a new line, skipping one line between the preview line and the new line.

        Example:
We can see how complex MDS can get! the attempt of rivest was to add as much of complexity and randomness as possible to the md5 algo <p> so that no two message  digests produced by md5 on any two differtent message are equal .md5 has a property that every bit of the msg digest is some function  of every bit in the input  the possibility that two message produce the same message digest using md5 is in the order 265 operations.</p>
output:

 We can see how complex MDS can get! the attempt of rivest was to add as much of complexity and randomness as possible to the md5 algo

 so that no two message  digests produced by md5 on any two differtent message are equal .md5 has a property that every bit of the msg digest is some function  of every bit in the input  the possibility that two message produce the same message digest using md5 is in the order 265 operations.

• line breaks = When text needs to start from a new line and not continue on the same line (without skipping a blank line ), the <BR/ > tag should be used . This tag simply jumps to the start of the next line .

Example :

ims management ,<br/> u.k , roorkee,<br/>

output :

ims management

 u.k , roorkee ,

Emphasizing Material in a Web Page

Document pages are usually divided into sections and sub sections (i.e page could have headings and sub headings ), taht need to be emphasized HTML provides certain heading styles and horizontal rules , that help break text into logical sections with visual appeal.

• HEADING STYLES= HTML support six different levels of heading .The highest - level header format is <H1> and the lowest level is <H6> . All the styles appear in boldface and the size of the heading depends on the level chosen. ,i.e <H1> to <H6>.

EXAMPLE: 

<H3> The next year </H3>

OUTPUT:

The next year 

DRAWING LINES = The tag <HR> draws line and horizontal rules .This tag draws a horizontal line across the whole page , whenever specified . The attributes to the <HR> tag are:

ATTRIBUTES

DESCRIPTION

• ALIGN = Align the line on the browser screen , that is by default , aligned to the center of the screen.

ALIGN left = It will align the line to the left of the screen.

ALIGN RIGHT = It will align the line to the right of the screen.

ALIGN Center = It will align the line to the center on the screen.

• SIZE= Changes the size of the rule. 
• WIDTH = Sets the width of the rule .It can be set to a fixed number of pixels , or to a percentage of the available screen width.

 TEXT STYLES

•  BOLD = It can displays text in boldface style . The tag used are <B>............................</B>

example: <B> this is a yuvaneed fondation and community</B>

output: this is a yuvaneed foundation and community 

• ITALICS= It can display text in italics .The tags used are between <I>..............</I>.

example: <I> this is a yuvaneed fondation and community </I>

output:   this is a yuvaneed fondation and community

• UNDERLINE= It can display text as underlined .The tag used are  <U>...............</U>.

example: <U> this is a yuvaneed fondation and community </U>

output:   this is a yuvaneed fondation and community

OTHER TEXT EFFECTS

• CENTERING (TEXT, IMAGE ETC.) = <Center > ......................................</center> ................. <.center> tags are used to center everything found between them - text , lists , image , rules , tables , or any other page element.

example: <center> this is a yuvaneed fondation and community</center>

output:

 this is a yuvaneed fondation and community

• SPACING (INDENTING TEXT)= The tag are used inserting blank space in an HTML document is <SPACER>  .Its attributes are :

1. TYPE= To specify whether space has to be left horizontally or vertically.

TYPE "HORIZONTALLY" = It indicates that horizontally space has to be left.

TYPE "VERTICALLY" = It indicates that vertical space has to be left.

2. SIZE= It indicates the amount of space to be left size accepts any integer. 

Lists in Html 

There are two types of lists in Html:

• Unordered lists
• Ordered lists 

1.   Unordered lists = An ordered lists starts with the tag <UL> and ends with </UL>.Every list item starts with the tag <LI> . Attribute and css\ style properties , that can be specified with <LI> are as follows:

Attributes	Description
Css list-	Specifies the type of the bullet.
Style   -	List-Style-Type: Circle will give a solid round black bullet
Type   -	List-Style-Type: Circle will give a solid Square black bullet

Example:

Some of the computer part : <UL>=”list-style-type: square;”>       <LI> Monitor      <LI> Mouse      <LI> keyboard     <LI> Printer     <LI> Scanner

   Output:

Some of the computer part:

0 Monitor

0 Mouse

0 Keyboard

0 Printer 

0 Scanner

2.    Ordered Lists = An ordered lists start with the tag <Ol> and ends with </OL> . Every list item start with the tag <LI> . The attributes and css\ style properties , that can be specified with <LI> are as follows :

Attributes	Description
Css/ Style List - style -type	The numbering scheme can be used to  use the control. List-style- type: Lower- Greek will give lower – Greek (alpha, gamma, beta). List-style- type: Upper - roman will give upper – roman  (  I ,II,III,IV,V,VI,VII and so on). List-style- type: Decimal will give numbers (1, 2 , 3, 4,5 ,6 and so on). List-style- type: Lower – alpha will give lower – alpha ( a , s ,j, k, I, g ,h, s and so on). List-style- type: lower – Latin will give lower – Latin (a ,k, l ,j ,h ,g ,I ,y  List-style- type: Lower – Roman  will  give lower – roman (i, ii, iii, iv, v, vi, vii, viii). List-style- type: Upper – alpha will give lower – upper (A, K , J, H, O, U, T, F, D). List-style- type: Upper – Latin will give upper – Latin(A, D ,R, O, W, P, Q And so on).
Css\Style  counter-Reset	The counter – reset property creates or resets one or more counters.

Example:  gold products are :

               <OL style = " list - style- type : lower - alpha"

                <LI> chain

                <LI> ring

               <LI> tops

Output:

gold products are"

a chain
b ring
c tops

Adding graphics to Html documents

Html allows placing of static and /or animated images in an Html page. Html accepts two picture file formats .gif  and . jpg . Using tool such as Gif constructor or Adobe photoshop, Image can be created to suit the requirement of a web page and saved in these file formats. Once the image is ready and stored in the above mentioned formats , it can be inserted into a web page using the tag <IMG>, that take the name of the image file (filename.gif, filename.jpg, or filename. jpeg)  as an attribute .In addition , Html can also allows control of the height , width , border  and so on , of every image placed on the web page. The <IMG> tag takes the following attributes are as follows:

Attributes	Description
Border	Specifies the size of the border to place around the image .This attribute should be specified in the css.
Width	Specifies the  width of the image in pixels.
Height	Specifies the  height of  the image in pixels.
Css/Style padding	Indicates the amount of space to the left , right, top, and bottom of the image . This attribute should be specified in the css.
Alt	Indicates the text to be displayed in case the browser is unable to display the image specified in the src attribute.
Src	Specifies the location and name of the image file.

Example:

<IMg  src  = “new.gif”>

•  Using the border Attribute

<html> 

<head><title>work in computer

         </title>
        </head>
       <body>
       <B> controlling computer border!<B>
       <center>
       <I> computer without a border </I><BR/><BR/>
       <IMG Src="ww.gif"/><BR/><BR/>
        <I>Computer with border: 5px </I><BR/><BR/>
      <IMG STYLE>="border-width: 5px;"SRC="images/qq.gif"><BR/> 
</center>
</body>
</html>

Output:

Computer without border                              Computer with border

• Using the width and height Attribute

<Html>
<head>
<title>working with colourful image</tille></head>
<body>
<B> normal image size !</b><BR/><BR/>
<IMG Src "cartoon.gif"><br/>
<I> image with size(height and width ) set to 200 </I><BR/><BR/>
</center>
</body>
</html>

Example :

Tables in Html

The HTML table model allows to arrange data ,text, preformatted text, images, links, forms, form fields, other tables, etc.into rows and columns of cells. A table is a two dimensional matrix , consisting of two rows and columns. Tables are intended for displaying data in column on a wb page. All table related tags are included between the <TABLE>............</TABLES> tags. Each rows of a table is described between the <TR>........... </TR> tags. Each column of a table is described between the <TD>...................</TD> tags. 

        Tables rows  are two types :

1. Header Rows = A row that spans across column of a table is called the header rows . A table header row is defined using <pear in boldface.
2. Data Rows = Individuals data cells placed in the horizontal plane creates a data rows . There could be a single data cell (i.e a single column table) or multiple data cells (i.e a multi column table). Data cells hold data that must be displayed in the table .A data row is defined using <TR>.......</TR> tags. Text maTH>.....</TH> tags. The content of a table header rows is automatically centered and aptter displayed in a data row is left justified by default. Any special formatting like boldface or Italics is done by including appropriate formatting tags inside the <TR>......</TR> tags .An image can also be displayed in a data cell.

The attribution that can be included in the <table> tag are :

Attribute	Description
Align	Horizontal Alignment is controlled by the Align attribute. It can be set to left  , right, center, justify , or inherit. This attribute should be used in Css.
Width	Sets the width to a specific number of pixels or to a percentage of the available screen width. If width is not specified  , the data cell is adjusted based on the cell data value.
Border	Controls the border to be placed around the table. The  border  thickness  is  specified  in pixels.
cellpadding	This attribute controls  the distance between the data in a cell and the boundaries of the cell.
cellspacing	Controls the spacing between adjacent cells.
colspan	The colspan attribute inside a  <th> or <td> tag instruct the browser to make the cell defined by the tag  to take up more the one column.
Rowspan	The rowspan  attribute works in the same way as the colspan attribute except that it allows a cell to take up more than  one row .

• Using the width and border Attribute

<HTML>
   <head><title> </title>
<body>
<table border = "5" width = "50%">
<TR><TH> Name</TH><TH>Age</TH></TR>
<TR align ="center"><TD>yfc</TD><TD>23</TD></TR>
<TR align = "center"><TD>praveen</TD>12</TD></TR>
</table>
</body>
</HTML>

• Using the Cellpadding Attribute

<HTML>
<Head><title></title></head>
<body style ="background - color:pink;">
<B> Cellspading </B> <BR/><HR>
<I><B> without cellspading</I></B>
<Table border = "1" style= "text-align:center" width="30%">
<TR><TH>NAME</TH><TH>AGE</TH><TH>ADDRESS</TH><TH>PHONE NUMBER</TH>
<TR ALIGN = "CENTER"><TD>YFC</TD><TD>24</TD><TD>PATEL NAGAR</TD><TD>8410080577</TD>

<TR ALIGN = "CENTER"><TD>SAGAR</TD><TD>21</TD><TD>PREM NAGAR</TD><TD>8410083444</TD>
</TABLE><HR>
<I><B> withcellspading</I></B>
<TABLE STYLE = "TEXT-ALIGN:CENTER"BORDER="1"CELLPADDING ="10" WIDTH="30%">
<TR><TH>NAME</TH><TH>AGE</TH><TH>PHONE</TH></TR>

<TR ALIGN = "CENTER"><TD>YFC</TD><TD>24</TD><TD>PATEL NAGAR</TD><TD>8410080577</TD>

<TR ALIGN = "CENTER"><TD>SAGAR</TD><TD>21</TD><TD>PREM NAGAR</TD><TD>8410083444</TD>
</TABLE>


</BODY>

</HTML>

• Using the colspan and rowspan Attributes

<HTML>
<head><title></title></head>
<body>
<B><I> rowspan and colspan attributes</B></I><BR/><BR/><BR/></BR/>
<CENTER><TABLE border ="1"style="text-align:center" width="80%">
<TR><TH Rowspan ="2" > name </th><th colspan="3"> marks</th>
</TR>
<TR>
<TH>Maths</TH><TH>English</TH><TH>Hindi</TH>
</TR>
<TR ALIGN="CENTER"
<TD>YFC</TD><TD>67</TD><TD>78</TD><TD>88</TD>
</TR>

<TR ALIGN="CENTER"
<TD>YPFC</TD><TD>90</TD><TD>89</TD><TD>97</TD>
</TR>

<TR ALIGN="CENTER"
<TD>PANKAJ</TD><TD>45</TD><TD>56</TD><TD>66</TD>
</TR>
<TABLE></CENTER>
</BODY>
</HTML>