What is a Web Page?
A web is a page with hypertext links that cross-reference text in the Internet .A web page is also know as HTML pages because it is coded in HTML language.
Today web pages(HTML pages ) are the standard interface of the internet.
Power of HTML
Earlier HTML pages could only hold text.However, since the boom of Internet people have added more and more capabilities to this langauge.
It can now have images,animations,multimedia contents and even interactive application.
What is HTML ?
Most HTML tags have two parts the strarting tag that indicates the start of text or formatting and the closing tag that indicates the end of text of formatting .
The closing tag is the same as the starting tag,the only differneces is that it begins with a / just after the < sign
Creating and editing web pages
Since a web page is a text file it can be created or edited in any text editor. However, there is application specially made for designing web pages. These applications are known as HTML editors.
Use any editor of your choice to create web pages.
A blank HTML page
A blank HTML page has the following code:
<html>
<head>
<title>It appears in the title bar</title>
</head>
<body>
It appears in the page
</body>
</html>
Creating your first web page
The above written code is a blank web page.Copy it to Notepad.Write the title of the page between the <TITLE> and </TITLE> tags.And write some one or two paragraphs of the between the <BODY> and </BODY> tags.
Give the save command and in the file name box type the filename inside double quotation(“”)with an extension of ‘.htm’.Now you can open the document in any browser and view it.
Most of the HTML tags have their properties. The properties of every tag goes inside the opening tag .A tag can have any number of properties separated by space .Most of the properties have a value.For example if you are specifying the color property then its value will be the name of the color. A tag with properties will be written like.
<tag property1=”value” property2=”value”>
Body tags and their meaning
| Opening Tag | Closing Tag | Use |
| <body> | </body> | Visible area of the HTML Page |
| <Font> | </font> | Formatting start and end. |
| <p> | </p> | Paragraph start and end |
| <hr> | [None] | Horizontal line |
| <br> | [None] | Line Break |
| <B> | </B> | Start and end bold text. |
| <I> | </I> | Start and end Italic text. |
| <u> | </u> | Start and end Underline text. |
Example
<html>
<head>
<title>First page</title>
</head>
<body>
<p align=”center”>
<font size=”5″ color=”green” face=”verdana”><b><i><u>Welcome to my site</u></i></b></font>
</p>
<hr size=”3″ width=”100%”color=”red”>
</body>
</html>
More tag propeties.
Propeties Value
<p> tag align Paragraph alignment[left,center,right and justify]
<h1>to<H6>Tag Heading one(It is the greatest font size) <H2>….<h6>It is smallest font then the previous font size
<hr> tag width Width of line in pixel or percent
align alignment[left,center and right]
Color Color or line(IE only)
size size of the Horizontal line
<Font> Tag Font face
Font size
Font color
| Opening Tag | Closing Tag | Use |
| <ul> | </ul> | Start and end of the bullet list |
| <ol> | </ol> | Start and end of the number list |
| <dir> | </dir> | Start and end of directory list |
| <li> | </li> | Start and end of the list item |
| <div> | </div> | Start and end of division or paragraph |
| <img> | none | Insert image. |
| <a> | </a> | Hyperlink or anchor. |
Tag Proepeties
<UL>tag
Type Type of bullet(circle,sqaure or disc)
<OL> tag
Type Type of numbering(1,A,a,I or i)
Start Beginning count of numbering (e.g.1,2,3,4 etc)
<div>tag
Align Alignment of paragraph(left,center,right ro justify)
Example
<html>
<head>
<title>List </title>
</head>
<body>
<p><strong>Computer Course</strong> </p>
<ol start=”5″ type=”i”>
<li>Java</li>
<li>Oracle</li>
<li>C++</li>
<li> HTML</li>
<li>Javascript</li>
</ol>
</body>
</html>
|
Property
|
Value
|
| SRC | Location of the image(e.g.”c:\windows\circle.gif”) |
| WIDTH | Width of the image in pixel |
| HEIGHT | Height of the image in pixel |
| ALT | Alternate or tool-tip text |
| VSPACE | Space to the right and left of image in pixels |
| HSPACE | Space to the right and left of image in pixels |
| NAME | Name of the image. |
| LOWSRC | Location of a lower resolution image |
| ALIGN | Alignment of text with imag.(top,middle,bottom etc) |
Example
<html>
<head>
<title>Image</title>
</head>
<body>
<p align=”center”><strong>Welcome to My site</strong></p>
<p align=”center”><strong><img src=”C:/scene.jpg” alt=”Click here” name=”Image1″ width=”200″ height=”200″ hspace=”10″ vspace=”10″ id=”Image1″></strong></p>
</body>
</html>
Property Value
<A>Tag
Name Name of the anchor
HREF Location of the file that is referenced.
TARGET Name of the window or frame to open the target file.
NOTE: Hyperlink is the part of the references another document. When you click on a hyperlink the referenced document is opened. Anchor is a reference point inside a document that can be referenced by a hyperlink. When<A>tag is used as anchor it doesn’t have a closing tag.
In HTML a table begins with a <TABLE> tag and ends with a </TABLE>tag.
Between the <TABLE> tag there are the rows that are enclosed between <TR>and </TR>tags. So there is one pair of <TR>and </TR>tags for each row.
Inside these rows are the cells, which are enclosed between the <TD> tag pairs inside every row should be the same. The contents of the cell goes between the <TD>and </TD> tags.
Example
<HTML>
<HEAD><TITLE>Table </TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
</table>
</BODY>
</HTML>
Contents of a cell
The context of a cell is written between the <TD>and </TD>tags.A cell of table can contain any text,HTML,image or even another table(i.e.you can have a table inside another table).
Tables are used in web pages to arrange the layout and /or to display tabular data.
Table/cell Properties
<Table>and <TD>tag
|
Property
|
Value
|
| WIDTH | Width of table /cell in pixel or percent |
| HEIGHT | Height of table/cell in pixel or percent |
| BGCOLOR | Background color of table/cell |
| BACKGROUND | Background image of table/cell |
<Table> Tag only
|
Property
|
Value
|
| BORDER | Thickness of table border in pixel |
| BORDERCOLOR | Color of table border |
| CELLSPACNING | Space between cells in pixel |
| CELLPADDING | Space between cell border and content in pixel |
More tag properties
Property Value
<Td>tag only
ROWSPAN Number of rows the cell spans
Example
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<table border=”1″ align=”center” cellpadding=”3″ cellspacing=”2″ width=”60%” height=”80%”>
<caption>Simple Table With Formatting</caption>
<tr>
<td>
Row 1, Col 1
</td>
<td>
Row 1, Col 2
</td>
</tr>
<tr>
<td>
Row 2, Col 1
</td>
<td>
Row 2, Col 2
</td>
</tr>
<tr>
<td colspan=”2″ rowspan=”2″ align=”center” valign=”center”>
This is a double-width, double-height cell with centered contents.
</td>
</tr>
</table>
</BODY>
</HTML>
Images in HTML document
As we learnt earlier, a web page can only store text. So any images that appear inside the page is not inside the HTML document.Actually the image is a different file and there is a tag in the HTML page specifying the location of the image.The browser displays the image in the page as if it were a part of that document.
Image Formats in a HTML page
There are two types of image formats used in web pages.GIF(Graphics Interchangeable Format “.gif”)and JPEG(Joint Photographics Expert Group “.jpg”).The PNG(Portable Network Graphic “.png”) format is still consideration and most probably will be used as web graphic format in the future.
Inserting image into the HTML page
IF you have a JPEG or GIF image you can insert it into HTML page by inserting the<IMG>tag.Refer to lecture 3 for the properties of the <IMG> tag looks like:
<IMG src=”image surce” width=”image width” height=”image height”>
Example <img src=”images/picture.gif” width=”150″ Height=”30>
The SRC property of the <IMG> tag is must.All other tags are optional.If you dono’t specify the width and height property the image dimesion is calculated automatically.If you don’t specify the width and height property the image resized in the browser while displaying. If the width and height property is not specified then the browser will take a little longer time to display the image as it has to calculated the values, so it is better to specify them at design time.
Other properties the<IMG> tag are ALT and LOSRC.The ALT property is used to specify the text that will appear if the image cannot be shown in the page or when the mouse moves will be loaded before the actual high-resolution image is loaded .This property is used when low source image instead of a blank page before the large image appears.
The format will be something like this:
Example:
<IMG src=”image/picture.gif width=”150″ height=”30″ ALT=”Home Buttom” lowsrc=”images/smalliamge.gif”>
Forms are used in a web page to collect information form the user .Generally user cannot write or edit a web page in the browser but in a form he can type and enter data,which can be collect by the web site owner.
For example a from can be used to accept the username and password of a user to log him onto the system or to take his details for any other purpose.
Tags for inserting a form
A form is inserted into a web page using the <FORM> and</FORM>tag.All the elements of a form tag are put between these tags inside the <INPUT >tag.The Type property of the <INPUT>tag determines the type of form element it is.For example <INPUT TYPE=”text”> will be a text box and <INPUT TYPE=”password”>will be a password box.The <INPUT>Tag doesnot have a closing tag.
All types of form fields are inserted using the <INPUT>Tag except the Drop Down and list Box.These are enclosed between <Select> and </select>tags.The list items are placed between these tags.Each list item is enclosed between a pair of <Option> and </option>tags.
The type of elements in a from
|
From Element
|
<INPUT>Tag Type
|
Description
|
| Text Box | Text | Field where the user can enter any text |
| Password Box | Password | Field where the user can enter password |
| Text Area | Textarea | Field where the user can enter multiple line of text |
| Check box | Checkbox | Filed where the user can check one or more of available option |
| Radio Button | Radio | Filed where the user can select any one of available option |
| Button | Button | Command buttton used to enter a command |
| Submit Button | Submit | Command button used to submit the form |
| Reset Button | Reset | Command button used to reset the form |
| Drop Down Box | Filed where the user can select an item from the drop down menu | |
| List Box | Field where the user can select one or more items from a list |
Example
here is a blank web page with only a from
<HTML>
<HEAD>
<TITLE>Form Page</TITLE>
</HEAD>
<BODY>
<form>
Full Name:<INPUT TYPE=”text” NAME=”name”><br>
Gender:<INPUT type=”radio” name=”gender” value=”male”>Male<input type=”radio” name=”Gender” value=”female”>Female<br>
Age Group:<select name =”age”>
<option value=”12″>12</option>
<option value=”13″>13</option>
<option value=”14″>14</option>
<option value=”15″>15</option>
<option value=”16″>16</option>
</select>
<Input type=”submit” value=”submit form”<input type=”reset” value=”reset From”>
</form>
</body>
</html>
From Elements and their properties
<FORM>Tag properties
| Property | Value |
| NAME | Name of the Form |
| METHOD | How the form data will be sent(Get or Post) |
| ACTION | The script or program file that will handle the form data |
Text Field/Password Field/File Field
| Property | Value |
| NAME | Name of the Field |
| SIZE | Width of field in number of characters |
| MAXLENGTH | Themaximum number of character allowed (Including space) |
Check BOX/Radio Button(INPUT TYPE=”CHECKBOX”><INPUT TYPE=”RADIO “>
| Property | Value |
| NAME | Name of the check box/radio button |
| VALUE | Value to pass when checked |
| CHECKED | Doesnot have a value,the box will appear checked initially |
BUTTON /SUBMIT BUTTON /RESET BUTTON
<input type=”button”>/<input type=”submit”>/<input type “reset”>
| Property | Value |
| NAME | Name of the Button(optional) |
| VALUE | Text on the button face |
Hidden field <input type =”hidden”>
| Property | Value |
| NAME | Name of the field |
| VALUE | value of pass |
Drop Down/List Box<select><option></select>
<Select> Tag
| Property | Value |
| NAME | Name of the field |
| SIZE | Number of lines in the list box . |
<option>Tag
| Property | Value |
| VALUE | Value to be passed when selected |
| SELECTED | Doesnot have a value,appears selected initially |
Text Area<textarea></textarea>
| Property | Value |
| NAME | Name of the field |
| ROWS | Height of the field in number of line |
| COLS | Width of the field in number of characters |
| WRAP | Type of text wrapping[off,virtual or physical] |
Until now wach web page when opend takes over the entire browser screen.The browser screen could not be split into separate(unique) sections,showing different but related information.
The HTML tags that divide a browser screen into two or more HTML recognizable unique region is the <FRAMESET></FRAMESET> tags.Each unique region is called a frame.Each frame can be loaded with a different document and hence,allow multiple HTML documents to be seen concurrently.
The HTML frame is a powerful feature that enables a web page to be broken into different unique section that,although realated ,operate independently of each other.
The <FRAMESET> Tag
The spliting of a browser screen into frames is accomplished with the <FRAMESET> and </FRAMESET> tags embedded into the HTML document .The <FRAMESET></FRAMESET>tags require one of the following two attributes depending on whethher the screen has to be divided into rows and columns.
| ROWS | This attribute is used to divide the screen into multiple rows.It can be set equal to a list of values.Depending on the require size of each row.The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen |
| COLS | This attribute is used to divide the screen into multiple columns.It can be set equal to a list of values.Depending on the require size of each Columns..The values can number of pixel,percentage of screen resolution and the symbol of * which indicates the remaining space of the screen |
Example
<FRAMESET ROWS=”33%,33%,33%>
<FRAMESET COLS=”50 %,50%”>
</FRAMESET>
<FRAMESET COLS=”50%,50%”>
</FRAMESET>
</FRAMESET>
The <FRAME> Tag
Once the browser screen is divided into rows(Horizontal sections)and columns (Vertical Sections),Each unique section defined can be loaded with different HTML documents.This is achieved by using the <FRAME>tag,which takes in the following attributes :
| Propery | Value |
| SRC | Indicates the URL of the document to be loaded into the frame. |
| MARGINHEIGHT | Specifies the amount the amount of white space to be left at top and bottom of the frame |
| MARGINWIDTH | Specified the amount of white space to be along the sides of the frame |
| NAME | Gives the frame a unique name so it can be targeted by other documents.The name given must begin with an Alphanumeric character. |
| NORSIZE | Disables the frames resizing capability |
| SCROLLING | Controls the appearance of horizontall and vertical scrollbars in a frame.This takes the values YES/NO/AUTO |
Example
<FRAMESET ROWS=”30%,*”>
<FRAMESET COLS=”50%,50%”>
<FRAME src=”file1.htm”>
<FRAME src=”file2.htm”>
</FRAMESET>
<FRAMESET COLS=”50%,50%”>
<FRAME src=”file3,htm”>
<FRAME src=”file4.htm”>
</FRAMESET>
</FRAMESET>
