Scribd
Upload
6 views

Chapter 2 - Part 2

Internet programing 2

Uploaded by

Dagim Mengesha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Chapter 2 - Part 2

Internet programing 2

Uploaded by

Dagim Mengesha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

Internet Programming I

(CoSc3121)
Chapter 2 (Part II)
Web Page Development Using HTML

Prepared By: Helawe Behailu April, 2022


Content
• Lists
• Linking between pages
• Images
• HTML Tables
• Frames and Forms
Lists
Types of Lists
• There are a number of tags for building lists.
• Serves the purpose of improving the readability of the text.
• Depending on the way the list items are displayed, lists may be
divided into three types:
• Unnumbered list
• Numbered list
• Definition list
Lists (cont...)
Unnumbered List
• Used to display a set of related items that appear in no particular
order.
• Each item is indented with a preceding bullet symbol.
• Specified using the tag:
<UL> ……… </UL>
• The individual items in the list are specified using the <LI> tag.
• Attributes:
type = disc | circle | square
Lists (cont...)
Unnumbered List (cont...)
• The <li> items can contain multiple paragraphs, specified using <p>.
• Example:
<ul>
<li> First item of the list
<li> Second item of the list
<li> Third item of the list
</ul>
Lists (cont...)
Unnumbered List (Example 1)
<html>
<head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Lists (cont...)
Unnumbered List (Example 2)
<html>
<head><title> Bulleted list 2 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>
Lists (cont...)
Numbered List
• Numbered or ordered lists are used when the sequence of the items is
important.
• Specified using the tag:
<OL> ……… </OL>
• The individual items in the list are specified using the <LI> tag.
• Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>
Lists (cont...)
Numbered List (cont...)
• The list items are numbered sequentially as 1,2,3,…
• Attributes:
• type = 1 | A | a | I | i
• Specifies the style of numbering.
• 1,2,3,… or A,B,C,… or a,b,c,… or I,II,III,… or i,ii,iii,…
Lists (cont...)
Numbered List (Example 1)
<html>
<head><title> Numbered list 1 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Lists (cont...)
Numbered List (Example 2)
<html>
<head><title> Numbered list 2 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =A>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Lists (cont...)
Numbered List (Example 3)
<html>
<head><title> Numbered list 3 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =I>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI type=1> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>
Lists (cont...)
Definition List
• Specified using the tag:
<DL> ……… </DL>
• Each definition comprises of a definition term (<DT>) and a definition
description (<DD>).
• Web browsers format each definition on a new line and indent it.
Lists (cont...)
Definition List (Example)
<html>
<head><title> Definition list 1 </title></head>
<body text=white bgcolor=blue>
<h2> Some important protocols: </h2>
<h3>
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>
</h3>
</body>
</html>
Lists (cont...)
Nesting of Lists
• Any list can be nested within another list.
• When unnumbered lists are nested, the browser automatically uses a
different bullet symbol for each level.
• When numbered lists are nested, by default, every level is numbered using
the Arabic numerals (1, 2, 3, …).
Lists (cont...)
Nesting of Lists (Example 1)
<html><head><title> List Nesting 1 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body></html>
Lists (cont...)
Nesting of Lists (Example 2)
<html><head><title> List Nesting 2 </title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3>
</body></html>
Linking between pages
Hyperlinks
• Chief power of HTML comes from its ability to link text and/or image
to another document or section of a document.
• These links are called hyperlinks.
• Browser by default highlights the hyperlinks with color and/or underline.
Linking between pages (cont...)
Hyperlinks (cont...)
• Specified using the anchor tag:
<a> ……. </a>
• Requires an attribute called “HREF” which specifies the path of the resource to be
linked.
• Anchors can be used to go to a particular section in a document.
• Within the same (or different) document.
• Example:
<a href=“face.jpg”> portrait </a>
<a href=www.google.com> search </a>
<a href=“mailto:[email protected]”> Mail me </a>
<a href=slides/ch5.pdf> download pdf </a>
Linking between pages (cont...)
Relative Vs Absolute URLs
• Absolute URL
• The complete path name of the document in the server is specified.
• Necessary when linking to documents on other servers.
• Example:
• <a href=“www.iitkgp.ac.in/people/isg/paper5.pdf”> One of my recent papers </a>
Linking between pages (cont...)
Relative Vs Absolute URLs (cont...)
• Relative URL
• Provides a link to another document relative to the location of the current
document.
• Commonly used when referring to documents residing on the same web site.
• Examples:
• <a href=“TENNIS/sania.html”> Sania Mirza </a>
• means that the document is one folder down from the html document that called for it. This
can go on down as many layers as necessary.
• <a href=“../NEWS/cricket.html”> Cricket </a>
• means that the document is in one folder up from the html document that called for it.
Linking between pages (cont...)
Relative Vs Absolute URLs (cont...)
• Relative URL (cont...)
• Pros:
If you upload the whole directory on another server, the links will still work.
• Cons:
If you copy a part of your web pages on a local disc, the links may not work.
Linking between pages (cont...)
Hyperlinks (Example)
<html><head><title> Link to Other Sites </title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="https://www.google.com"> Google </a>
<li> <a href="https://www.facebook.com"> Facebook </a>
<li> <a href="http://www.bdu.edu.et"> Bahir Dar University</a>
</ol>
<hr>
<address>
Mr. Ayele Kebede<BR> <BR>
<a href="mailto:[email protected]"> Email = [email protected] </a>
</address>
</body></html>
Images
• Supported image formats:
• JPEG, GIF, PNG
• Specified using the standalone tag:
<IMG>
• Attributes of <IMG>:
• SRC: specifies the URL of the image file
• HEIGHT: height (in pixels) to be set aside for the image.
• WIDTH: width (in pixels) to be set aside for the image.
Images (cont...)
• The HEIGHT and WIDTH attributes tells the browser to set aside
appropriate space (in pixels) for the image as it downloads the rest of
the file.
• Some browsers stretch or shrink an image to fit into the allotted space.
• Example:
<IMG SRC=xyz.gif>
<img src=tiger.jpg height=80 width=150>
Images (cont...)
Example 1
<html><body>
An image
<img src=xyz.gif align="bottom" width="48“ height="48">
in the text
<p> An image
<img src =xyz.gif align="middle" width="48“ height="48">
in the text
<p> An image
<img src =xyz.gif align="top" width="48“ height="48">
in the text
</body></html>
Images (cont...)
Example 2
<html>
<body>
<img src = "xyz.gif" align ="left" width="48" height="48">
A paragraph with an image. The image will float to the left of this text.
<p>
<img src = "xyz.gif" align ="right" width="48" height="48">
A paragraph with an image. The image will float to the right of this text.
</body>
</html>
Images (cont...)
Example 3
<html>
<body>
It is possible to use an image as a link. Click on the image below to go to google.
<p>
<a href=“https://www.google.com">
<img src=x.gif>
</a>
</body>
</html>
HTML Tables
• Tables are made up of cells, arranged into rows.
• Tags used in creating an HTML table:
• <table></table> marks the start and end of table contents
• <tr></tr> marks the start and end of each table row
• <td></td> marks the start and the end of the contents of a data cell
• <caption></caption> formats text to appear as a table caption
An example:
<table>
<tr>
<td> Good </td> <td> Bad </td> Good Bad
</tr>
<tr> cute ugly
<td> Cute </td> <td> Ugly </td>
</tr>
</table>
HTML Tables (cont...)
• <TABLE> …… </TABLE>
• Defines the beginning and the end of a table.
• Can have several attributes:
• bgcolor = #rrggbb or color name
• rules = all | cols | rows | none
• border = number
• height = number, percentage
HTML Tables (cont...)
• <TR> …….. </TR>
• Defines a row of cells within a table.
• Can have several attributes:
• bgcolor = #rrggbb or color name
• align = left | center | right | justify
• <CAPTION> …….. </CAPTION>
• Provides a caption for the table.
• Must immediately follow the “table” tag, and precede all other tags.
HTML Tables (cont...)
• <TD> …….. </TD>
• Defines a table data cell.
• A table cell can contain any content, like an image, or even another table.
• Can have several attributes:
• bgcolor = #rrggbb or color name
• colspan = number
• == > specifies the number of columns the currect cell should span (default is 1).
• rowspan = number
• == > similar
HTML Tables (cont...)
• <TH> …….. </TH>
• Defines a table header cell.
• Browsers generally display the contents of the header cells in bold, and
centered.
• Same attributes as the <TD> tag.
HTML Tables (cont...)
Example 1:
<table>
<tr> <td colspan=2> Hello </td> </tr> Hello
<tr> <td> Good </td> <td> Day </td> </tr> Good Day
</table>
HTML Tables (cont...)
Example 2:
<table>
<tr> <td rowspan=2> Hello </td> Hello Good
<td> Good </td> </tr>
Day
<tr> <td> Day </td> </tr>
</table>
HTML Tables (cont...)
Example 3:
<table border=1> My Table
<caption> My Table </caption>
Name marks
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Ayele</td> <td> 86</td> </tr> Ayele 86
<tr> <td> Kebede</td> <td> 65</td> </tr> Kebede 65
</table>
HTML Frames
• What are frames?
• A method for dividing the browser window into smaller sub-windows.
• Each sub-window displaying a different HTML document.
• How does a page with frame look like?
HTML Frames (cont...)
HTML Frames (cont...)
• Merits:
• Allow parts of the page to remain stationary while other parts scroll.
• They can unify resources that reside on separate web servers.
• There is a <noframe> tag, using which it is possible to add alternative content
for browsers that do not support frames.
HTML Frames (cont...)
• Demerits:
• All browsers do not support frames.
• Documents nested in a frame is more difficult to bookmark.
• Load on the server can be significantly increased, if there are a large number
of frames in the page.
• Frames are very difficult to handle for search engines.
HTML Frames (cont...)
<FRAMESET> …….. </FRAMESET>
• Defines a collection of frames or other framesets.
• Attributes:
• cols = list of lengths (number, %, or *)
• rows = list of lengths (number, %, or *)
• Establishes the number and sizes of columns (vertical frames) or rows (horizontal
frames) in a frameset.
• In number of pixels, percentage of total area, or relative values (*) based on available
space.
HTML Frames (cont...)
<FRAME>
• Defines a single frame within a frameset.
• Attributes:
• frameborder = 1 | 0
• src = url
• scrolling = yes | no | auto
• marginwidth = number
• marginheight = number
• name = text
HTML Frames (cont...)
<NOFRAMES> …… </NOFRAMES>
• Specifies the contents to be displayed by browsers that cannot display frames.
• Ignored by browsers that support frames.
HTML Frames (cont...)
Example 1:
<html>
<head><title> A document with frame </title> </head>
<body>
<frameset cols = "*,*">
<frame src = "left.html">
<frame src = "right.html">
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</body></html>
HTML Frames (cont...)
Example 2:
<html>
<head><title> Another one with frames </title> </head>
<body>
<frameset cols = "100,2*,*">
<frame src = "left.htm">
<frame src = "right.htm">
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</body></html>
HTML Frames (cont...)
Example 3:
<html>
<head> <title> Nested frames </title> </head>
<body>
<frameset cols = “25%, *”
<frame src = “one.htm”>
<frameset rows = “100,150,100”>
<frame src = “two.htm”>
<frame src = “three.htm”>
<frameset cols = “*,*”>
<frame src = “four.htm”>
<frame src = “five.htm”>
</frameset> </frameset> </frameset>
</body></html>
HTML Frames (cont...)
Linking to a Framed Document
• When a hyperlink is clicked, by default, the new page is loaded into the same
frame.
• We can load the linked page into new frame also.
• Assign a name to the targeted frame.
<frame src = "somepage.htm" name = "abc">
• Specify this frame in a hyperlink as follows:
<a href = "newpage.htm" target="abc"> … </a>
• The document newpage.htm will load into the frame names "abc".
HTML Forms
• Provides two-way communication between web servers and
browsers.
• Demand for most of the emerging applications.
• Providing dynamic contents.
• What is an HTML Form?
• A form basically contains boxes and buttons.
HTML Forms (cont...)
• Real-life examples
• Search engines
• On-line purchase of items
• Registration
• The form allows a user to fill up the blank entries and send it back to the
owner of the page.
• Called SUBMITTING the form.
HTML Forms (cont...)
FORM Tags and Attributes
• Several tags are used in connection with forms:
<form> …… </form>
<input>
<textarea> …… </textarea>
<select> …… </select>
HTML Forms (cont...)
<FORM> …… </FORM>
• This tag is used to bracket a HTML form.
• Includes attributes which specify where and how to deliver filled-up
information to the web server.
• Two main attributes:
• METHOD
• ACTION
HTML Forms (cont...)
• METHOD:
• Indicates how the information in the form will be sent to the web server
when the form is submitted.
• Two possible values:
• POST: causes a form’s contents to be parsed one element at a time.
• GET: concatenates all field names and values in a single large string.
• POST is the preferred method because of string size limitations in most
systems.
HTML Forms (cont...)
• ACTION:
• Specifies the URL of a program on the origin server that will be receiving the
form’s inputs.
• Traditionally called Common Gateway Interface (CGI).
• The specified program is executed on the server, when the form is submitted.
• Output sent back to the browser.
HTML Forms (cont...)
• Typical usage:
<FORM METHOD="POST"
ACTION="save_form.php">
……
……
</FORM>
HTML Forms (cont...)
<INPUT>
• This tag defines a basic form element.
• Several attributes are possible:
• TYPE
• NAME
• SIZE
• MAXLENGTH
• VALUE
• SRC
• ALIGN
HTML Forms (cont...)
• TYPE:
• Defines the kind of element that is to be displayed in the form.
• “TEXT” – defines a text box, which provides a single line area for entering
text.
• “RADIO” – radio button, used when a choice must be made among several
alternatives (clicking on one of the buttons turns off all others in the same
group).
• “CHECKBOX” – similar to the radio buttons, but each box here can be
selected independently of the others.
HTML Forms (cont...)
• TYPE (cont...)
• “PASSWORD” – similar to text box, but characters are not shown as they are
typed.
• “HIDDEN” – used for output only; cannot be modified (mainly used to refer to
choices that have already been made earlier).
• “IMAGE” – used for active maps. When the user clicks on the image, the (x,y)
co-ordinates are stored in variables, and are returned for further processing.
• “SUBMIT” – creates a box labeled Submit; if clicked, the form data are passed
on to the designated CGI script.
• “RESET” – creates a box labeled Reset; if clicked, clears a form’s contents.
HTML Forms (cont...)
• NAME:
• Specifies a name for the input field.
• The input-handling program (CGI) in reality receives a number of
(name,value) pairs.
• SIZE:
• Defines the number of characters that can be displayed in a TEXT box without
scrolling.
• MAXLENGTH:
• Defines the maximum number of characters a TEXT box can contain.
HTML Forms (cont...)
• VALUE:
• Used to submit a default value for a TEXT or HIDDEN field.
• Can also be used for specifying the label of a button (renaming “Submit”, for
example).
• SRC:
• Provides a pointer to an image file.
• Used for clickable maps.
• ALIGN:
• Used for aligning image types.
• ALIGN = TOP | MIDDLE | BOTTOM
HTML Forms (cont...)
<TEXTAREA> … </TEXTAREA>
• Can be used to accommodate multiple text lines in a box.
• Attributes are:
• NAME: name of the field.
• ROWS: number of lines of text that can fit into the box.
• COLS: width of the text area on the screen.
HTML Forms (cont...)
<SELECT> …. </SELECT>
• Used along with the tag <OPTION>.
• Used to define a selectable list of elements.
• The list appears as a scrollable menu or a pop-up menu (depends on
browser).
• Attributes are:
• NAME: name of the field.
• SIZE: specifies the number of option elements that will be displayed at a time
on the menu. (If actual number exceeds SIZE, a scrollbar will appear).
HTML Forms (cont...)
<SELECT> …. </SELECT> (cont...)
• MULTIPLE: specifies that multiple selections from the list can be
made.
<FORM>
Languages known:
<SELECT NAME=“lang" SIZE=3 MULTIPLE>
<OPTION> English
<OPTION> Amharic
<OPTION> Afan Oromo
<OPTION> Tigrigna
</SELECT>
</FORM>
HTML Forms (cont...)
Example 1
<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF“ LINK="#FF9900"
VLINK="#FF9900“ ALINK="#FF9900">
<CENTER><H3> Student Registration Form </H3>
</CENTER>
Please fill up the following form about the courses you will register for
this Semester.
HTML Forms (cont...)
<FORM METHOD="POST" ACTION="/cgi/feedback">
<P> Name: <INPUT NAME="name" TYPE="TEXT" SIZE="30" MAXLENGTH="50">
<P> Roll Number: <INPUT NAME="rollno“ TYPE="TEXT" SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> <P> Press SUBMIT when done.
<P> <INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM> </BODY> </HTML>
END

You might also like