|
|
|
|
|
|
Lesson#6
|
BASICS OF HTML-1
|
|
|
|
BASICS OF HTML
Hypertext links are used to connect HTML documents. Text can be
links. Images can be links. Links can by
used for email also. An attribute ‘href’ is used in anchor tag
<A>, and its value is set as the URL of a web
page or a file name which is required to be opened by clicking
the hyperlink. Content enclosed between
<A> and </A> becomes clickable. See the following example:
<HTML>
<BODY>
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual
University</A> in
Pakistan
</BODY>
</HTML>
Result is shown in Fig. 1 below.
Fig. 1
In order to create a mailto link, one should use the following
syntax: <A
HREF=mailto:vtv@hotmail.com>
email address</A>
Changing colors in a page
In order to provide a specific background color to a web page,
an attribute ‘bgcolor’ is used in the body tag.
We can also use ‘text’ and ‘link’ attributes, respectively, in
the body tag to assign font colors to our text and
hyperlinks, as indicated below:
<BODY bgcolor=“Green” text=“white” link=“red”> Instead of giving
the color name as value of
‘bgcolor’ one can also provide value in terms of a six digit
code based on hexadecimal numbers called RGB
values, e.g, #00FF00 refers to pure green color. RGB values are
set according to following rule:
Red Green Blue
Where we want to provide an image as a background for the page
then the ‘background’ attribute is used in
the body tag keeping its value as the name of that image file,
e.g, <BODYbackground=“filename”>.
Consider the following example:
<HTML>
<BODY bgcolor=yellow text=red link=blue >
<H1>Computer Science</H1>
Welcome to <A HREF=http://www.vu.edu>Virtual
University</A> in
24
Pakistan
</BODY></HTML>
Result is shown in Fig. 2 below.
Fig. 2
Meta information
Meta information is the information about the web page content,
and is located in the <HEAD> of your
HTML documents. It helps make documents easier to locate through
search engines. Meta tag is used
within the head tag for this purpose, as shown in the example
below:
<html> <head> <title>Introduction to e-commerce</title> <Meta
name=“description” content=“Ecommerce
is a newly emerging field that uses internet as a medium of
communication”> <Meta
name=“keyword” content=“e-commerce, internet, medium,
communication”> </head> <body> Page
goes here</body></html>
Tables
Tables are used largely for page layout as well as for
displaying information systematically. Any content that
can go in the body of an HTML page can go inside of a table. It
must accommodate the content put inside
it. Tables are built row-by-row from the top to the bottom of
the table.
Basics tags
Tables use the basic tag <Table> and </Table>. All other table
tags fit between these two tags. <TR>
(table row tag) and </TR> (corresponding end tag) are used to
create/add a row. <TD> (table data tag)
and </TD> (corresponding end tag) are used to divide a row into
number of columns to create cells.
<TH> (table header tag) and </TH> (corresponding end tag) labels
each column as a heading. To provide
the caption of a table <caption> and </caption> can be used.
A basic 2 row, 2 column table
<HTML><BODY><Table
Border=1><TR><TD>Cell1</
TD> Cell 1
Cell 2
<TD>Cell2</TD></TR><TR> Cell 3
Cell 4
<TD>Cell3</TD><T>C
ell4</TD></TR></Tab
le></BODY></HTML
>
25
Spanning text across multiple rows or columns
Attributes ‘colspan’ and ‘rowspan’ are used in <TD> tag for
spanning the cells to a particular no. of
columns or rows, respectively, as is shown in the examples
below:
<HTML> <HEAD><TITLE> Example - COLSPAN </TITLE> </HEAD> <BODY>
<TABLE
BORDER="1” align=center> <CAPTION>Spanning the text</CAPTION>
<TR> <TD
COLSPAN="2">This line is extended to two columns</TD> <TD>This
does not</TD> </TR>
<TR> <TD>First Column</TD> <TD>Second Column</TD>
<TD>Third Column</TD> </TR>
</TABLE>
</BODY>
</HTML>
Result is shown in Fig. 3 below:
Fig. 3
<HTML> <HEAD><TITLE>Spanning Text</TITLE> </HEAD> <BODY> <TABLE
BORDER="1"> <CAPTION>Example - ROWSPAN</CAPTION> <TR> <TD
ROWSPAN="2">This line is stretched to two rows</TD> <TD>First
Row</TD> </TR> <TR>
<TD>Second Row</TD> </TR> <TR> <TD>This does not</TD> <TD>Third
Row</TD>
</TR> </TABLE> </BODY></HTML>
Result is shown in Fig. 4 below.
Fig. 4
Table tag attributes
Border - <table border=“5”> displays the cell boundaries,
accordingly. Width - <table width=“75%> sets
the width of the table, accordingly. Height - <table
height=“100%”> sets the height of the table,
accordingly. Cellpadding - <table cellpadding=“10”> refers to
distance between the cells in pixels.
26
Cellspacing - <table cellspacing=“5”> refers to distance between
cell boundaries andcontent enclosed in
terms of pixels. Color - <table bgcolor=“#cccccc”> provides
background color to the table (you can also
provide color name instead of RGB value code). <table
background=“tablebg.gif”> supplies an image in
the table background.
Attributes for <TD> tag
Width - <td width=“50%”> specifies width of a cell with
reference to the table width. Align - <td
align=“center”> is used to align the text in a cell accordingly
(you can also use left and right as values of
‘align’). Valign- <td valign=“top”> is used to vertically align
the text in a cell (you can also use bottom or
middle as values of ‘valign’).
Using a table to set up a page with a margin
Set the table’s height to 100% using the <table> tag’s height
attribute. First column is the margin. Use
‘bgcolor’ or ‘background’ attribute to define color or image for
the margin. Also set width of the margin as
desired. Second column is where one can put all the regular text
and the graphics. Note the following
example:
<HTML> <HEAD><TITLE>A Page with a Left-Hand Margin</TITLE>
</HEAD> <BODY
LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE
HEIGHT="100%"> <TR>
<TD BACKGROUND=“image2.gif" WIDTH="100"> </TD> <TD
VALIGN="TOP"> This
section contains the contents of your web page. </TD> </TR>
</TABLE> </BODY> </HTML>
Result is shown in Fig. 5 below.
Fig. 5
‘ ’ is the code for a blank space in HTML.
Forms
A form is a web page populated with text boxes, drop-down lists
and commands buttons to get information
from the user. Its basic tag is <form> and </form>. ‘Action’ and
‘Method’ are the two attributes used in
the form tag as shown below to transport the information
received form the user to a particular URL or a
file: <Form action=http://www.forms.com
Method=post>
Types
Submit/Reset button Text boxes Text area Check boxes Radio
buttons Lists
Submit and reset button
To create a submit or reset button use the following instruction
within the form tag: <Input type=“submit”
value=“label”> <Input type=“Reset” value=“label”>
“Label” is the value that appears on the button. You may not
want to use ‘value’ attribute. When the submit
27
button is clicked, the form data is shipped to the URL specified
by the <form> tag’s action attribute.
Text boxes and text area
To create a text box the value of ‘type’ attribute is set as
‘text’ in the input tag. To create abigger box called
text area we use <Textarea> and </Textarea> tag. The size of the
text area is fixed on the basis of value of
attributes ‘cols’ and ‘rows’. Note the following example:
<HTML> <HEAD><TITLE>Text Area Example</TITLE> </HEAD> <BODY>
<H3>Today's
Burning Question</H3> <FORM
ACTION="http://www.gov.pk/scritps/test.asp"
METHOD="POST"> First Name: <INPUT TYPE="TEXT" NAME="First">
<P>
Last Name: <INPUT TYPE="TEXT" NAME="Last">
<P>
Today's <I>Burning Question</I>: <B>How to make Pakistan a
developed
country?</B>
<P>
Please enter your answer in the text area below: <BR> <TEXTAREA
NAME="Answer" ROWS="10"
COLS="60"> </TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="I Know!"> <INPUT TYPE="RESET">
</FORM>
</BODY> </HTML>
Result is shown in Fig. 6 below.
Fig. 6
In the above example ‘name’ attribute used in ‘input’ and
‘textarea’ tags is the unique name for the field. A
field name is the information normally used by the server side
to respond to the client side after the form
has been submitted to it.
|
|
|
|
|