IP Chapter2

Internet Programming I
Chapter Two
Creating and Editing a Web page
1
 With an understanding of the Web development

life cycle, you should have a good idea about
the importance of proper Web site planning,
analysis, and design.
 After completing these phases, the next phase
is the actual development of a Web page using
HTML.
2
 Today, many people — individuals, students,

teachers, business executives, Web developers,
and others — are developing Web pages for
personal or professional reasons.
 Each person has his or her own style and the
resulting Web pages are as diverse as the
people who create them. Most Web pages,
however, include several basic features, or
elements
3
HTML Tags
 HTML tags are like keywords which defines that how web
browser will format and display the content.
 With the help of tags, a web browser can distinguish between
an HTML content and a simple content.
 HTML tags contain three main parts: opening tag, content
and closing tag. But some HTML tags are unclosed tags.
 HTML tags are used to create HTML documents and render
their properties. Each HTML tags have different properties.
– All HTML tags must enclosed within < > these brackets.
– Every tag in HTML perform different tasks.
– If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)
Syntax
<tag> content </tag>
4
HTML Attribute
 HTML attributes are special words which provide additional
information about the elements or attributes are the modifier
of the HTML element.
 Each element or tag can have attributes, which defines the
behavior of that element.
 Attributes should always be applied with start tag.
 The Attribute should always be applied with its name and
value pair.
 The Attributes name and values are case sensitive, and it is
recommended by W3C that it should be written in Lowercase
only.
 You can add multiple attributes in one HTML element, but
need to give space between two attributes.
Syntax
<element attribute_name="value">content</element>
5
HTML Attribute
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in
element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
6
HTML Elements
 An HTML file is made of elements. These elements are
responsible for creating web pages and define content in that
webpage. An element in HTML usually consist of a start tag <tag
name>, close tag </tag name> and content inserted between
them. Technically, an element is a collection of start tag, attributes,
end tag, content between them.
Example
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
7
Windows Elements
 The title of a Web page is the text that appears on the
title bar and taskbar of the browser window when the
Web page appears.
 The title also is the name assigned to the page if a user
adds the page to the browser’s list of favorites, or
bookmarks.
 The title, which usually is the first element you see,
should identify the subject or purpose of the page
 The title should be concise, yet descriptive, and briefly
explain the page’s content or purpose to the visitor
8
Cont …
 The body of the Web page contains the information
that is displayed in the browser window.
 The body can include text, graphics, and other
elements.
 Headings are used to set off paragraphs of text or
different sections of a page.
 Headings are a larger font size than normal text and
often are bold or italic or a different color than normal
text.
 Heading sizes run from 1 (the largest) to 6 (the
smallest).
9
Cont …
 Image Elements:- Web pages typically use several
different types of graphics, or images, such as an icon,
bullet, line, photo, illustration, or other picture
 An image used in a Web page also is called an inline
image, which means the image or graphic file is not
part of the HTML file.
 The HTML file contains <img> tags that tell the browser
which graphic file to request from the server, where to
insert it on the page, and how to display it
 Horizontal rules are lines that are displayed across a
Web page to separate different sections of the page.
 you can use the horizontal rule tag (<hr />) to add a
simple horizontal rule
10
Cont …
 Hyperlink Elements:- One of the more important
elements of a Web page is a hyperlink, or link.
 A link is text, an image, or another Web page element
that you click to instruct the browser to go to a location
in a file or to request a file from a server.
 On the Web, links are the primary way to navigate
between Web pages and among Web sites
 Links point not only to Web pages, but also to graphics,
sound, video, program files, e-mail addresses, and
parts of the same Web page.
 Text links, also called hypertext links, are the most
commonly used hyperlinks.
11
Defining Web page Instruction
 To create an HTML document, you use a text editor to enter
information about the structure of the Web page, the content of
the Web page, and instructions for how that content should be
displayed.
 For this course we use Notepad 0r Notepad ++ text editor.
 The <!DOCTYPE> tag is used to tell the browser which HTML
or XHTML version and type the document uses.
 The World Wide Web Consortium (W3C) supports three
document types for HTML or XHTML: strict, transitional, and
frameset.
– The strict document type is specified when you want to prohibit the use
of deprecated tags.
 Deprecated tags are tags that the W3C has earmarked for
eventual removal from their specifications, because those tags
have been replaced with newer, more functional tags.
 transitional document type allows the use of deprecated tags
 The frameset document type, which is used to support frames
12 on a Web page, also allows the use of deprecated tags
Block-level and Inline HTML elements
 For the default display and styling purpose in HTML, all
the elements are divided into two categories:
– Block-level element
– Inline element
 Block-level element:
– These are the elements, which structure main part
of web page, by dividing a page into coherent
blocks.
– A block-level element always start with new line and
takes the full width of web page, from left to right.
– These elements can contain block-level as well as
inline elements.
13
Block-level and Inline HTML elements
 Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>,
<div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>,
<form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>,
<ul> and <video>.
Note: All these elements are described in later chapters.
14
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second

div</div>
<p style="background-color: pink">This is a block level
element</p>
</body>
 </html>
Output:
15
Inline elements:
 Inline elements are those elements, which differentiate
the part of a given text and provide it a particular
function.
 These elements does not start with new line and take
width as per requirement.
 The Inline elements are mostly used with other
elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>,
<button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<script>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <textarea>, <time>, <tt>, <var>.
16
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
<span style="background-color: lightblue">this is inline
element</span>
<p>This will take width of text only</p>
</body>
</html>
Output
17
A Document Type Definition (DTD)
 DTD is a file containing definitions of tags and

instructions for how they should be used in a
Web page.
18
Defining the HTML Document
HTML Tags Function
<!DOCTYPE> Indicates the version & type of HTML or XHTML is used; includes a
URL reference to a DTD
<html> </html> Indicates the start & end of an HTML document
<head> </head> Indicates the start and end of a section of the document used for the
title and other document header information
<meta /> Indicates hidden information about the Web page
<title> </title> Indicates the start and end of the title. The title does not appear in the
body of the Web page, but appears on the title bar of the browser .
<body> </body> Indicates the start and end of the body of the Web page
<hn> </hn> Indicates the start and end of the text section called a heading; sizes
range from <h1> through <h6>. See Figure 2–8a on page HTML 46
for heading
<p> </p> Indicates the start and end of a new paragraph; inserts a blank line
above the new
paragraph
<ul> </ul> Indicates the start and end of an unordered (bulleted) list
<li> </li> Indicates that the item that follows the tag is an item within a list
<hr /> Inserts a horizontal rule
19 <br /> Inserts a line break at the point where the tag appears
How to Create and View an HTML document?
1.Use a text editor such as Notepad ++ or Notepad to

write the document.
2.Save the file as filename.html or .htm on a PC. This is
called the Document Source.
3.Open IE or Mozilla Firefox (or any browser) Off-Line
4.Switch to IE/ Mozilla Firefox
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any
other Web page in IE/ Mozilla Firefox.
20
Cont ..
7.You may now switch back and forth between the
Source and the HTML Document
 switch to Notepad with the Document Source
 make changes
 save the document again
 switch back to IE
 click on RELOAD and view the new HTML
Document
 switch to Notepad with the Document Source......
21
The Basic HTML Tags – elements of a
web page
 All web pages must contain a basic set of tags, that tell
the web browser that the page is a HTML document
<!DOCTYPE html">
<HTML>
<HEAD>
<META charset =“utf-8”>
<TITLE>My Website – first page</TITLE>
</HEAD>
<BODY>
<P>This is the body of the web page.</P>
</BODY>
</HTML>
22
HTML Formatting
 HTML Formatting is a process of formatting text for better
look and feel. HTML provides us ability to format text without
using CSS. There are many formatting tags in HTML. These
tags are used to make text bold, italicized, or underlined.
There are almost 14 options available that how text appears
in HTML and XHTML.
 In HTML the formatting tags are divided into two categories:
– Physical tag: These tags are used to provide the visual
appearance to the text.
– Logical tag: These tags are used to add some logical or
semantic value to the text.
NOTE: There are some physical and logical tags which may
give same visual appearance, but they will be different in
semantics.
23
The basic HTML tags:Text Formatting
Tag Description
<B></B> Bold - The text between the tags displays as bold
<U></U> Underline - The text between the tags is underlined
<I></I> Italics - The text between the tags is italicised
<BASEFONT> The default is 3 if this tag is not used to change the size. Font sizes
ranges from 1 to 7. This tag must appear in the <HEAD> section
(Use to change the base font or before any text that is displayed on the page.
size for the web page ) <BASEFONT SIZE=5>
The COLOR and FACE attributes can also be used to change the
default colour and font face for the web page
Note: The COLOR and FACE attributes do not work on Netscape
browsers.
<FONT></FONT> SIZE: a value from 1 to 7; can also specify +/- value to change the size
relative to the base font of the web page e.g. <FONT
(Use to change the font size, SIZE=4>changes to size 4</FONT> or <FONT SIZE=+2>changes
colour and face (family) the size to the base font size plus 2 e.g. to 5 if the default base font
of the text between the is used.
tags, using these COLOR: change the colour of the font
attributes: FACE: set the font family e.g. Arial, Verdana. More than one face
) should be specified – as if the first one is not installed on the
client PC, then the second one will be used and so on e.g. <FONT
FACE="Verdana,Arial" COLOR ="red"> - if the PC has
Verdana installed, it will be used, otherwise Arial will be used.
Note: Verdana and Arial are commonly used fonts on web pages, as
they are very readable and look good.
24
The basic HTML tags: Block Formatting
Block Formatting (tags used to format whole blocks of text – other tags can be
contained or nested in side them)
<P></P> Places the text between the tags in paragraph.
(Paragraph) The ALIGN attribute can be used to position the paragraph –
possible values are center, right, left.
e.g. <P ALIGN="left">
<DIV></DIV> –A block element used to contain a section of a web page;

(Division) paragraph breaks are added before and after the section.
Any other HTML tags can be contained inside the DIV element.
The ALIGN attribute can be used with values of center, left or
right.
e.g. <DIV ALIGN="right">A section of <B>my web page</B>.
</DIV>
<BLOCKQUOT Used to contain text that is being quoted from another source.
E> The text is usually indented, displayed as a new paragraph with
</ space above and below it.
BLOCKQU Some browsers may also display the text in italics.
OTE>
<CENTER></ Causes all the lines of text between the tags to be centred on the
CENTER> page.
25
More on Text Formatting
The Tag Meaning of Tag
 <small>……….. Define small text
 <em>…........... Define emphasize text
 <big>…………. Define big text
 <Strong>…….. Define strong text
 <sub>…… …….. Define subscripted text
 <sup>…… …….. Define superscripted text
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font,
without any logical importance. If you write anything within <b>............</b>
element, is shown in bold letters.
<p> <b>Write Your First Paragraph in bold text.</b></p>
The HTML <strong> tag is a logical tag, which displays the content in bold
font and informs the browser about its logical importance. If you write
anything between <strong>???????. </strong>, is shown important text.
<p><strong>This is an important content</strong>, and this is normal
content</p>
26
The basic HTML tags: Heading Level Tag
 <Hx></Hx>: Heading levels – x is a number from 1 to 6.
 Header tags range from<H1> to <H6>, <H1> the largest and <H6>
is the smallest.
 The headings’ size shows the hierarchy of importance on the page’s
layout.
<H1> My Library </H1> (page title)

<H2> Mission, Vision and Goals </H2> (main topic)
<H3> Objectives</H3> (subtopic)
27
The basic HTML tags: Heading Level Tag
 Use <CENTER> tag to center elements on the page
<CENTER>
<H1> My Library </H1>
<H2> Mission, Vision and Goals </H2>
</CENTER>
<H3> Objectives</H3>
28
The basic HTML tags :Lists
 HTML also supports lists; unordered lists, ordered lists
and, definition list, which is sometimes the best way to
present information
 Unordered list is a bulleted list that uses <UL> and <LI>
tags
<H3> Objectives </H3>
<UL><LI> Acquire a comprehensive collection of
multimedia materials</LI>
<LI> Develop appropriate user education and
training packages</LI>
</UL>
29
The basic HTML tags :Lists
 Ordered list is a numbered list that uses <OL> and <LI>
tags
<H3> Library Resources </H3>

<OL> <LI> Library Collections </LI>
<LI> Library Catalog </LI>
<LI> Electronic Resources </LI> </OL>
30
The basic HTML tags : Lists
 Lists can be nested, one within another
<OL>
<LI> Library Collections
</LI>
<UL> <LI> Books </LI>
<LI> Journals </LI>
</UL>
<LI> Electronic Resources
</LI>
<UL> <LI> CD-ROMs
</LI>
<LI> Abstracts &
Indexes </LI>
</UL>
</OL>
31
 The list item type attribute can be used to change the bullets in <UL> disc, square
or circle, and in <OL> from number 1 to lowercase (a) or uppercase (A) letters, or
lowercase (i) or uppercase (I) roman numerals
<OL type=I>
<LI> Library Collections </LI>
<UL type=square> <LI>
Books </LI>
<LI> Journals </LI>
</UL>
<LI> Electronic Resources
</LI>
<UL type=disc> <LI> CD-
ROMs </LI>
<LI>Abstracts &
Indexes</LI> </UL>
</OL>
32
 Definition list allows listing of terms and definitions. Uses <DL>, <DT> for
the term and <DD> for definition.
<DL>
<DT> Definition Term </DT>
<DD> Definition </DD>
<DT> Membership Card </DT>
<DD> Users of the library must present their membership card to
avail of the library services and privileges. </DD>
</DL>
33
HTML Comments
 As with other programming languages, HTML has a
special syntax to indicate a comment in the code
 A comment is a piece of text that can be seen in the
HTML source but is not displayed on the web page.
 HTML comments are placed inside a pair of tags -
. For example:
<p>this is text that will be displayed on the web
page</p>

<p>this is more text that will be displayed on the web
page</p>
 Use comments to provide information to yourself or
other HTML authors about the page and what is on it.
34
How to add images
 Image and other graphical elements can be

added on the web page through the <IMG> tag
using the src (source) attribute that points to
the image / graphics
< IMG src=“mylogo.gif” >
35
How to add images
<IMG src=“mylogo.gif”>
<CENTER>
<H2> Mission, Vision and
Goals </H2> </CENTER>
36
How to add images
<CENTER>
<IMG src=“mylogo.gif”>
<H2> Mission, Vision and
Goals </H2>
</CENTER>
37
How to add images
<IMG src=“mylogo.gif” width=100

height=100 align=left alt=logo>
38
How to add images
<BODY bgcolor=“#000800”
background=marb.jpg >
39
Images
 <IMG> Used to place an image into a document.

 Attributes:
– SRC="..." Information as to an image's physical location.
– ALT="..." Alternate text to be displayed should an image be
missing, or images are turned off in browser.
– ALIGN="..." Determines horizontal image alignment; either
LEFT or RIGHT.
– VALIGN="..." Determines vertical image alignment; either TOP,
MIDDLE, or BOTTOM.
– WIDTH="..." The width in pixels of an image.
– HEIGHT="..." The height in pixels of the image.
– BORDER="..." Creates a border around a linked image.
– BORDERCOLOR=“… “may also be specified.
40
The basic HTML tags: Hyperlinks
The Anchor/Hyperlink Tag
The anchor tag is used to mark text that is the start or

destination of a hyperlink – also called a bookmark.
It can also be used to provide a link to another part of a

web page or to another web page.
The anchor tag is: <A>…</A>.
41
How to create hyperlinks
 Hypertext links are created on web pages using

the <A> anchor tag with the HREF (Hypertext
Reference) attribute
 Hyperlinks connect your web pages together and
point to other web documents (build your web site)
<A HREF=“collection.htm”>Library Collection</A>
<A HREF=
“http://www.unesco.org/webworld/portal_bib/”>
UNESCO Libraries Portal </A>
42
<A HREF=“collection.htm”>
Library Collection</A>
<A HREF=
“http://www.unesco.org/w
ebworld/portal_bib/”>
UNESCO Libraries Portal
</A>
43
 Hyperlinks are also used to connect to graphic and other

media
 Icons and other graphic elements can be used as the the
“trigger’ (object) users click on to jump to the referred
document
<A HREF=“mylibrary.jpg”> MyLibrary </A>

<A HREF “mylibrary.jpg”> <IMG src
“mylibrary_sm.jpg”> </A>
<A HREF “mylibrary.jpg” border=0>
<IMG src “mylibrary_sm.jpg”> </A>
44
<A HREF=“mylibrary.jpg”> MyLibrary

</A>
<A HREF “mylibrary.jpg”> <A HREF=“mylibrary.jpg”>

<IMG src “mylibrary_sm.jpg”> <IMG
</A> src=“mylibrary_sm.jpg”
border=0> </A>
45
 Link to e-mail address can be created to

automatically open the e-mail program on the
system supplying the address
Contact <A
HREF=“mailto:me@mylibrary”>
me@mylibrary.edu </A>
46
The basic HTML tags: Basic HTML
Tables
47
Defining a Table Structure
 Tables allow you to organize information on a Web page

using HTML tags.
 Tables are useful when you want to arrange text and
images into rows and columns in order to make the
information straightforward and clear to the Web page
visitor
 The first step to creating a table is to specify the table
structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
 Once the table structure is in place, you can start
entering data into the table.
48
Using the <table>,
<tr>, and <td> Tags
 Graphical tables are enclosed within a two-

sided <table> tag that identifies the start and
ending of the table structure.
 Each row of the table is indicated using a two-
sided <tr> (for table row).
 Within each table row, a two-sided <td> (for
table data) tag indicates the presence of
individual table cells.
49
The General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
two rows
two columns
50
HTML Structure of a Table
beginning of the
table structure
table cells
You do not need to

indent the <td> tags
first row of six or place them on
in the table
separate lines, but you
may find it easier to
interpret your code if
you do so.
After the table

structure is in place,
you’re ready to add
the text for each cell.
end of the table
structure
51
Creating Headings with the <th> Tag
 HTML provides the <th> tag for table

headings.
 Text formatted with the <th> tag is centered
within the cell and displayed in a bold face font.
 The <th> tag is most often used for column
headings, but you can use it for any cell that
you want to contain centered boldfaced text.
52
Adding Table Headings to the Table
Text in cells formatted

with the <th> tag is bold
and centered above each
table column.
table
headings
53
Modifying the Appearance of a Table
 You can modify the appearance of a table by

adding:
 Borders
 background color
 HTML also provides tags and attributes to
control the placement and size of a table.
54
Adding a Table Border
 By default, browsers display tables without

table borders.
 A table border can be added using the
border attribute to the <table> tag.
 The syntax for creating a table border is:
<table border=“value”>
– value is the width of the border in pixels
 The size attribute is optional; if you don’t
specify a size, the browser creates a table
55 border 1 pixel wide.
Tables with Different Borders Values
This figure shows the effect on a table’s border when the border size is varied.
56
Adding a 5-Pixel Border to a Table
Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.
57
Controlling Cell Spacing
 The cellspacing attribute controls the amount

of space inserted between table cells.
 The syntax for specifying the cell space is:
<table cellspacing=“value”>
– value is the width of the interior borders in pixels
– the default cell spacing is 2 pixels
 Cell spacing refers to the space between the

58 cells.
Defining Cell Padding
 To control the space between the table text and

the cell borders, add the cellpadding attribute to
the table tag.
 The syntax for this attribute is:
<table cellpadding=“value”>
– value is the distance from the table text to the cell
border, as measured in pixels
– the default cell padding value is 1 pixel
 Cell padding refers to the space within the cells.

59
Tables with Different
Cell Spacing Values
different cell spacing values
different cell padding values
60
Creating Rules
 The rules attribute lets you control how the

table gridlines are drawn (not supported by
Netscape)
 The syntax of the rules attribute is:
<table
the effect of each of rules=“type”>
the rules attribute values on a table
– type is either “all”, “rows”, “cols”, or “none”
61
Working with Table and Cell Size
 The size of a table is determined by text it contains in its
cells.
 By default, HTML places text on a single line.
 As you add text in a cell, the width of the column and table
expands to the edge of the page.
– once the page edge is reached, the browser reduces the size of the
remaining columns to keep the text to a single line
 You can insert line break, paragraph, or other tags within a
cell.
 When the browser can no longer increase or decrease the
size of the column and table it wraps the text to a second
line.
 As more text is added, the height of the table expands to
accommodate the additional text.
 But, you can manually define the size of the table and its
62 cells.
Defining the Table Size
 The syntax for specifying the table size is:

<table width=“size” height=“size”>
– size is the width and height of the table as measured in pixels
or as a percentage of the display area
 To create a table whose height is equal to the entire height
of the display area, enter the attribute height=“100%”.
 If you specify an absolute size for a table in pixels, its size
remains constant, regardless of the browser or monitor
settings used.
 Remember that some monitors display Web pages at a
resolution of 640 by 480 pixels.
63
Setting the Width of the
Table to 500 Pixels
64
Defining Cell and Column Sizes
 To set the width of an individual cell, add the width

attribute to either the <td> or <th> tags.
 The syntax is: width=“value”
– value can be expressed in pixels or as a percentage of the
table width
– width value of 30% displays a cell that is 30% of the total
width of table.
 The height attribute can also be used in the <td> or <th>
tags to set the height of individual cells.
– The height attribute is expressed either in pixels or as a
percentage of the height of the table.
– If you include more text than can be displayed within that
height value you specify, the cell expands to display the
additional text.
65
Aligning a Table on the Web Page
 By default, a browser places a table on the left margin

of a Web page, with surrounding text placed above and
below the table.
 To align a table with the surrounding text, use the align
attribute as follows: align=“alignment”
– alignment equals “left”, “right”, or “center”
– left or right alignment places the table on the margin of the
Web page and wraps surrounding text to the side
– center alignment places the table in the horizontal center of
the page, but does not allow text to wrap around it
 The align attribute is similar to the align attribute used with
the <img> tag.
 The align attribute is available only with browsers that
support HTML 3.2 or later.
66
Results of a Right-Aligned Table
67
Aligning the Contents of a Table
 By default, cell text is placed in the middle of

the cell, aligned with the cell’s left edge.
 By using the align and valign attributes, you
can specify the text’s horizontal and vertical
placement.
 To align the text for a single column, you must
apply the align attribute to every cell in that
column.
68
Values of the Align
and Valign Attributes
69
Spanning Rows and Columns
 To merge several cells into one, you need to

create a spanning cell.
 A spanning cell is a cell that occupies more
than one row or column in a table.
 Spanning cells are created by inserting the
rowspan and colspan attribute in a <td> or
<th> tag.
 The syntax for these attributes is:
rowspan=“value” colspan=“value”
– value is the number of rows or columns that the
cell spans in the table
70
Example of Spanning Cells
This cell
spans two this cell
columns and spans three
two rows columns
This cell
spans three
rows
71
A Table Structure with a
Row-Spanning Cell
four table cells
in the first row
only three table

cells are required
for the second and
third rows
HTML code
resulting table
72
Adding Spanning Cells to a Table
73
Another Example of Spanning Cells
74
Another Example of Spanning Cells
75
Applying a Background Color
 Table elements support the bgcolor attribute.

 To specify a background color for all of the cells in a table,
all of the cells in a row, or for individual cells, by adding the
bgcolor attribute to either the <table>, <tr>, <td>, or
<th> tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
– color is either a color name or hexadecimal color value
76
Specifying Table, Row, and Cell
Colors
77
Specifying Table, Row, and Cell
Colors
78
The bordercolor Attribute
 By default, table borders are displayed in two shades of

gray that create a three-dimensional effect.
 The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
– color is an HTML color name or hexadecimal color value
 Internet Explorer and Netscape apply this attribute
differently.
<table border=“10” bordercolor=“blue”>
Internet Explorer Netscape

79
Applying a Table Background
 Add a background image to your tables using the

background attribute.
 A background can be applied to the entire table or to a
cell.
parch.jpg
<table background=“parch.jpg”> <td background=“parch.jpg”>
80
HTML Forms
The basic HTML tags:

HTML Forms
81
What are forms?
 <form> is just another kind of HTML tag
 HTML forms are used to create GUIs on Web pages
– An HTML form facilitates the user to enter data that is to be sent
to the server for processing.
– Usually the purpose is to ask the user for information
– The information is then sent back to the server
Why use HTML Form?
-HTML forms are required if you want to collect some data
from of the site visitor.
-For example: If a user want to purchase some items on
internet, he/she must fill the form such as shipping address
and credit/debit card details so that item can be sent to the
given address.
82
What are forms…
A form is an area that can contain form elements

– The syntax is: <form parameters> ...form elements... </form>
– Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
 Other kinds of HTML tags can be mixed in with the form elements
– A form usually contains a Submit button to send the
information in the form elements to the server
– The form’s parameters tell JavaScript how to send the
information to the server (there are two different ways it could
be sent)
– Forms can be used for other things, such as a GUI for simple
programs
83
Forms and JavaScript
 The JavaScript language can be used to make pages

that “do something”
– You can use JavaScript to write complete programs, but...
– Usually you just use snippets of JavaScript here and there
throughout your Web page
– JavaScript code snippets can be attached to various form
elements
 For example, you might want to check that a zipcode field
contains a 5-digit integer before you send that information to the
server
 Microsoft sometimes calls JavaScript “active scripting”
 HTML forms can be used without JavaScript, and
JavaScript can be used without HTML forms, but they
work well together
 JavaScript for HTML is covered in a separate lecture
84
The <form> tag
 The <form arguments> ... </form> tag encloses form elements (and
probably other HTML as well)
 The arguments to form tell what to do with the user input
– action="url" (required)
 Specifies where to send the data when the Submit button is clicked
– method=“GET/POST"
 How the data entered on the form is submitted to the server
 GET – data is sent via the query string (so it appears in the URL)
 POST – data is put into the HTTP headers (this means the data does
not appear in the URL)
When to Use GET?
 The default method when submitting form data is GET.
 However, when GET is used, the submitted form data will be visible in the
page address field:
Notes on GET:
 Appends form-data into the URL in name/value pairs
 The length of a URL is limited (about 3000 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user want to bookmark the result
85  GET is better for non-secure data, like query strings in Google
The <form> tag
When to Use POST?
 Always use POST if the form data contains sensitive or personal information.
The POST method does not display the submitted form data in the page
address field.
 Notes on POST:
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked
– Other arguments are defined for the input tag but have
meaning only for certain values of type
The Target Attribute
– The target attribute specifies if the submitted result will open in
a new browser tab, a frame, or in the current window
 target= _blank means open in a new window
 target= _top means use the same window
<form action="/action_page.php" target="_blank">
86
The <input> tag
 Most, but not all, form elements use the input tag, with
a type="..." argument to tell which kind of element it is
– type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
 Other common input tag arguments include:
– name: the name of the element
– value: the “value” of the element; used in different ways for
different values of type
– readonly: the value cannot be changed
– disabled: the user can’t do anything with this element
87
Text input
A text field:
<input type="text" name="textfield" value="with an initial value">
A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret">
• Note that two of these use the input tag, but one uses textarea
88
Buttons
 A submit button:
<input type="submit" name="Submit" value="Submit">
 A reset button:
<input type="reset" name="Submit2" value="Reset">
 A plain button:
<input type="button" name="Submit3" value="Push
Me">
 submit: send data

 reset: restore all form elements to
their initial state
 button: take some action as
specified by JavaScript
• Note that the type is input, not “button”
89
Checkboxes
 A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
 type: "checkbox"
 name: used to reference this form element from
JavaScript
 value: value to be returned when element is
checked
 Note that there is no text associated with the
checkbox—you have to supply text in the
surrounding HTML
90
Radio buttons
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female
 If two or more radio buttons have the same name, the user
can only select one of them at a time
– This is how you make a radio button “group”
 If you ask for the value of that name, you will get the value
specified for the selected radio button
 As with checkboxes, radio buttons do not contain any text
91
Drop-down menu or list
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
 Additional arguments:
– size: the number of items visible in the list (default is "1")
– multiple: if set to "true", any number of items may be
selected (default is "false")
92
Hidden fields
 <input type="hidden" name="hiddenField"

value="nyah">
<-- right there, don't you see it?
 What good is this?

– All input fields are sent back to the server, including hidden
fields
– This is a way to include information that the user doesn’t need
to see (or that you don’t want her to see)
– The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
93
<html><head>
<meta content="text/html">
<title>Example Form</title>
</head><body>
A HTML Form Example<p>
<b>Enter your details below</b><br>
<form name=frmExample method=get><table >
<tr><td>Name: </td><td><input type="text" name="txtName" value=""
maxlength=40 size=30></td></tr>
<tr><td>Father's Name: </td><td><input type="text" name="txtFathersName"
value="" maxlength=40 size=30></td></tr>
<tr><td>Select your region: </td><td><select name="selRegion">
<option name="option1" value="TG">Tigray</option>
<option name="option2" value="AM">Amhara</option>
<option name="option3" value="OM">Oromiya</option>
<option name="option4" value="AA">Addis Ababa</option>
<option name="option5" value="O">Other</option>
</select></td></tr><tr><td>
Are you interested in receiving further information from us? </td><td><input
type="checkbox" name="chkMoreInfo" value="on">
</td></tr>
94
<tr><td valign=top>
Please indicate your main area of interest:</td><td>
Service 1 <input type="radio" value="1" name="radServices"><br>
</td></tr>
<tr><td colspan=2><br>
If you have any further comments, please enter them below:<br>
<textarea name="txtComments" rows=12 cols=50>
</textarea>
</td></tr><tr><td colspan=2>
<input type=submit value="Submit your details"> <input type=reset
value="Reset the form"></td></tr></table>
</form></body></html>
95

IP Chapter2

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IP Chapter2

Uploaded by

Copyright:

Available Formats

Internet Programming I

Creating and Editing a Web page

 With an understanding of the Web development

 Today, many people — individuals, students,

<div style="background-color: lightgreen">This is second

 DTD is a file containing definitions of tags and

<hr /> Inserts a horizontal rule

1.Use a text editor such as Notepad ++ or Notepad to

<DIV></DIV> –A block element used to contain a section of a web page;

<H1> My Library </H1> (page title)

<H3> Library Resources </H3>

 Image and other graphical elements can be

< IMG src=“mylogo.gif” >

<IMG src=“mylogo.gif” width=100

 <IMG> Used to place an image into a document.

The Anchor/Hyperlink Tag

The anchor tag is used to mark text that is the start or

It can also be used to provide a link to another part of a

The anchor tag is: <A>…</A>.

 Hypertext links are created on web pages using

<A HREF=“collection.htm”>Library Collection</A>

 Hyperlinks are also used to connect to graphic and other

<A HREF=“mylibrary.jpg”> MyLibrary </A>

<A HREF=“mylibrary.jpg”> MyLibrary

<A HREF “mylibrary.jpg”> <A HREF=“mylibrary.jpg”>

 Link to e-mail address can be created to

 Tables allow you to organize information on a Web page

 Graphical tables are enclosed within a two-

You do not need to

After the table

 HTML provides the <th> tag for table

Text in cells formatted

 You can modify the appearance of a table by

 By default, browsers display tables without

Only the outside

 The cellspacing attribute controls the amount

 Cell spacing refers to the space between the

 To control the space between the table text and

 Cell padding refers to the space within the cells.

different cell padding values

 The rules attribute lets you control how the

 The syntax for specifying the table size is:

 To set the width of an individual cell, add the width

 By default, a browser places a table on the left margin

 By default, cell text is placed in the middle of

 To merge several cells into one, you need to

only three table

 Table elements support the bgcolor attribute.

 By default, table borders are displayed in two shades of

Internet Explorer Netscape

 Add a background image to your tables using the

<table background=“parch.jpg”> <td background=“parch.jpg”>

The basic HTML tags:

A form is an area that can contain form elements

 The JavaScript language can be used to make pages

A multi-line text field

 submit: send data

 <input type="hidden" name="hiddenField"

 What good is this?

You might also like