Scribd
Upload
3 views

Chapter 2 - Part 2

Internet programing 2

Uploaded by

Dagim Mengesha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Chapter 2 - Part 2

Internet programing 2

Uploaded by

Dagim Mengesha
Copyright
© © All Rights Reserved
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