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.
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
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.
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>
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.
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">
<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>
<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
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 Properties
<UL>tag
Type Type of bullet(circle,sqaure or disc)
<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)
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)
Align Alignment of paragraph(left,center,right ro justify)
Example
<html>
<head>
<title>List </title>
</head>
<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>
<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>
<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>
<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.
<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.
Table in an HTML document
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.
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.
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
<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>
<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.
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.
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">
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.
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>
<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
<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 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>
***
0 comments:
Post a Comment