CS 341 Lab 1

CS 341: Web Technologies, Aug-Dec 2017
Lab 1 (Monday 5th September 2017)
LAB 1: (WEB CONTENT CREATION: STRUCTURE)
TASK: To create a simple HTML file to demonstrate the use of different tags.
Procedure:-
1. Create an html page named as “Simple _html_tags.html”
2. Add the following tags detail.:
i. Set the title of the page as “Simple HTML Tags”
ii. Within the body perform the following:
a) Moving text = “Simple HTML Tags”
b) Different heading tags (h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) “Pre” tag
h) Different Logical Style (<b>, <c>, <sub>, <sup>….)
i) Different Physical style (<code>, <del>, <kbd>…)
j) Listing tags (provide different “type” attribute)
Approach:-
In your development environment (e.g. notepad, Sublime, etc.), copy and paste the HTML code
below, and then save the file with the mentioned file name (i.e. with .html extension).
NB: If the “.html” file type is not available in the “Save As Type” in the “Save” dialog box,
choose “All Files”.
File name: Simple_html_tags.html
<html>
<title> Simple HTML Tags Title</title>
<body>
<marquee> Simple Tags</marquee>
<center><font color="#0000FF"> Heading
Tags</font></center>
<h1> Heading H1</h1>
One of the most important technologies on this list

doesn't fully exist yet — HTML 5 — but in 2008, key
features started to trickle out. HTML 5 will
eventually replace HTML 4.01, the dominant programming
language currently used to build web pages. But the
governing bodies in charge of the web are still
drafting the details, and nobody expects HTML 5 to
fully emerge as the new standard for at least a few
more years. But HTML 5 is no vaporware. Many of the
changes to the way the web operates as outlined in
early versions of the new specification are already
being implemented in the latest browsers, and some of
the web's more adventurous site builders are already
incorporating HTML 5's magic into their pages.
HTML 5 will be great step forward, standardizing
things like dragging and dropping elements on web
pages, in-line editing of text and images on sites and
new ways of drawing animations. There's also support
for audio and video playback without plug-ins, a boon
for usability and a worrisome sign for Adobe's Flash,
Microsoft's Silverlight and Apple's QuickTime. The
language will also give a boost to web apps, as there
are new controls for storing web data offline on your
local machine.
<center><font color="#0000FF"> Text Elements</font>

</center>
<p>This is a paragraph tag.

HTML 5
Want Gmail on your desktop? HTML 5 makes it possible.
Alas, the blink tag isn't invited to the party.
</p>
<hr>
<center><FONT COLOR="#0000FF"> Line break
Tags</FONT></center>
This is a long piece of text consisting of three<BR>
sentences and shows you the functions of the<BR>
Line Break tag. This tag is used quite
frequently<BR>
to add line breaks in the HTML code. It is also
used<BR>
to add blank lines to a document. <BR>
<hr>
<center><FONT COLOR="#0000FF"> BLOCK QUOTE

Tags</FONT></center>
<p>This is some text before the quotation. </p>

<blockquote>This is a long blockquote created with
the “blockquote” tag.</blockquote>
</blockquote>
<hr>
<center><FONT COLOR="#0000FF"> PRE Tags</FONT></center>
<pre>
IT 206 JAVA
IT306 WEB SYSTEMS
IT322 WEB SYSTEMS LAB
</PRE>
<HR>
<center> <FONT COLOR="#0000FF"> Logical style </FONT></center>
This is <b>bold</b> This is bold<br>
This is <big>big font</big> This is big font<br>
This is <i>italic</i> This is italic<br>
Was <s>$50</s>; now $40 Was $50; now $40<br>
H<sub>2</sub>O H2O<br>
May 5<sup>th</sup> 2005 May 5th 2005<br>
<tt>fixed-width font</tt> fixed-width font<br>
This is <u>underlined</u> This is underlined<br>
<br>
<hr>
<center> <FONT COLOR="#0000FF"> Physical Style </FONT></center>
This is used for a short <cite>quote</cite>. This is used for a
short quote. <br>
<code>y = m * x + b</code> y = m * x + b <br>
<del>Deleted</del> text Deleted text<br>
<dfn>definition</dfn> text definition text<br>
This is <em> emphasized </em>. This is emphasized<br>.
<ins>inserted</ins> text inserted text<br>
<kbd>code</kbd> sample code sample<br>
<samp>code</samp> sample code sample<br>
This is <strong>strong</strong>. This is strong. <br>
<var>program</var> variable program variable<br>
<br>
<hr>
<center><font color="#0000FF"> Listing Tags</font></center>

<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>A Definition List:</h4>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<hr>
</body>
</html>
OUTPUT:
LAB ASSIGNMENT 1 (5%)
Consider the static web pages required for an Amazon Books World online book store:
1) HOME PAGE
2) LOGIN PAGE:
3) CATOLOGUE PAGE:
The catalogue page should contain the details of all the books available in the web
site in a table. The details contain the following:
a. Snapshot of Cover Page.
b. Author Name.
c.Publisher.
d. Price.
e. Add to cart button.
4) CART PAGE:
The cart page contains the details about the books which are added to the cart.
5) REGISTRATION PAGE:
A form with fields:
1) Name (Text field)
2) Password (password field)
3) E-mail id (text field)
4) Phone number (text field)
5) Sex (radio button)
6) Date of birth (3 select boxes)
7) Languages known (check boxes – Ewe, English, Akan)
8) Address (text area)
TASK:
As the new “Web Design Intern” at Amazon Books World, you have been asked to overhaul the
company’s current website (code provided). Your task is to:
i. Study the current code to understand the various HTML elements and attributes
used. Take note of all the new HTML elements and attributes (e.g. tables, frames,
etc.), and “internal” CSS, that have been provided.
(Refer to the course’s textbook and resources for clarification)
ii. Redesign the website to comply with XHTML 4.01 strict document type description
(DTD) standards. (Do NOT change the values of the background colours: “bgcolor”)
iii. Debug issues you encounter.
iv. Provide your own set of applicable images (*.jpg, *.png).
SUBMISSION:
Your final deliverable should contain all the saved files, together with your images, in a zipped
folder. This folder should be saved with your student ID (eg. 100100.zip) and submitted on
Courseware by 11:00pm on Friday September 8th, 2017.
THE CURRENT WEBSITE FILES OF AMAZON BOOKS WORLD
1. Create a file and save it as “book.html”:

<html>
<head><title>Book</title></head>
<frameset rows="25%,75%">
<frame src="top.html" name="top" framespacing="0"
scrolling="no" frameborder="0" noresize>
<frameset cols="15%,85%">
<frame src="left.html" name="left"
framespacing="0" scrolling="auto"
frameborder="0" noresize>
<frame src="right.html" name="right"
framespacing="0" scrolling="auto"
frameborder="0" noresize>
</frameset>
</frameset>
</html>
2. Create a file and save it as “top.html”:

<html>
<head>
<title>top</title>
<style>
a:link{text-decoration:none}
a:visited {text-decoration:none;color:red}
a:hover {text-decoration:underline;color:green}
a:active {text-decoration:none;color:blue}
</style>
</head>
<body bgcolor="#fedcba" >
<p align="center">
<table height="100%" width="100%" border="0"
align="center" height="100%">
<colgroup span="5" width="20%"></colgroup>
<tr align="center"><td><img src="logo.gif"
width="85%" name="logo" alt="site logo"></td>
<td colspan="4"><h1>AMAZON BOOKS
STORE</h1></td>
</tr>
<tr align="center">
<td><a name="home" href="home.html"
target="right">HOME</a></td>
<td><a name="login" href="login.html"
target="right">LOGIN</a></td>
<td><a name="registration"
href="registration.html"
target="right">REGISTRATION</a><
/td>
<td><a name="catalogue"
href="catalogue.html"
target="right">CATALOGUE</a><
/td>
<td><a name="cart" href="cart.html"
target="right">CART</a></td>
</tr>
</table>
</p>
</body>
</html>
3. Create a file and save it as “left.html”:

<html>
<head><title>left</title>
<style>
a:link{text-decoration:none}
a:visited {text-
decoration:none;
color:red}
a:hover {text-
decoration:underli
ne;
color:green}
a:active {text-
decoration:none;
color:blue}
</style>
<title>Left</title>
</head>
<body bgcolor="#fabecd">
<p align="center"><a href="ece.html"
target="right">ece</a></p >
<p align="center"><a href="eee.html"
target="right">eee</a></p >
<p align="center"><a href="mech.html"
target="right">mech</a></p >
<p align="center"><a href="csit.html"
target="right">cse</a>
</body>
</html>
4. Create a file and save it as “right.html”:
<html>
<head>
<title>right frame</title>
</head>
<body bgcolor="#abcdef">
<font color='#123123' size='+3'>Welcome to Amazon
Books World</font>
<br>
This site provides the books information related to
various categories.
</body>
</html>
5. Create a file and save it as “home.html”:

<html>
<head>
<title>home page</title>
</head>
<font color='#123123' size='+3'> Welcome to Amazon
Books World</font>
<br>
This site provides the books information related to
various categories.
</body>
</html>
6. Create a file and save it as “login.html”:

<html>
<head>
<title>login form</title>
</head>
<h3 align="center">login into the site</h3>
<form method="post">
<table align="center">
<tr><td>name</td><td><input type="text"
name="uname"></td></tr>
<tr><td>password</td><td><input type="password"
name="pass"></td></tr>
<tr align="center"><td><input type="submit"
value=" login "></td><td><input type="reset"
value=" reset "></td></tr>
</table>
</form>
</body>
</html>
7. Create a file and save it as “registration.html”:
<html>
<head>
<title>Registration form</title>
</head>
<body bgcolor="orange">
<h3 align="center" color="pink">Registration form</h3>
<center>
<form name="regform" method="post">
<table cellspacing="15">
<tr><td>NAME</td><td><input type="text"
name="name" size="25"></td></tr>
<tr><td>PASSWORD</td><td><input type="password"
name="pass" size="25">
</td></tr>
<tr><td>PHONE NUMBER</td><td><input type="text"
maxLength="10" name="phno" size="25"></td></tr>
<tr><td>E-MAIL</td><td><input type="text"
name="emai" size="25"> </td></tr>
<tr><td>GENDER</td><td>male <input
type="radio" name="gender" value="male"
checked="checked"> female <input type="radio"
name="gender" value="female"></td></tr>
<tr><td>DATE OF
BIRTH</td><td>day<select
name="day"><option
value="1">1</option><option
value="2">2</option></select>
month   <select name="month"><option
value="jan">jan</option><option
value="feb">feb</option></select>
year<select name="year"><option
value="1990">1990</option><option
value="1991">1991</option></select>
</td></tr>
<tr><td>LANGUAGES
KNOWN</td><td>EWE
<input type="checkbox" name="ewe"
value="ewe"><br>ENGLISH <input
type="checkbox" name="english"
value="english"><br>AKAN
   <input type="checkbox" name="akan"
value="akan"> </td>
</tr>
<tr><td>ADDRESS</td><td><textarea
rows="3" cols="25" name="address"
wrap="soft"></textarea></td>
</tr>
</table>
<br><br>
<input type="submit" align="center"
value="send"> <input type="reset"
align="center" value="cancel">
</form>
</center>
</body>
</html>
8. Create a file and save it as “catalogue.html”:

<html>
<head>
<title>catalogue page</title>
</head>
<table width="100%">
<tr><td><img src="xml.jpg"></td>
<td>Book: XML
Bible<br>
Author:
Winston<br>
Publication
: Wiley
</td>
<td>$ 40.5</td>
<td><img src="cartbutton.jpg"></td>
</tr>
<tr><td><img src="html.jpg"></td>
<td>Book : HTML in
24 hours<br>
Author : Sam
Peter<br>
Publication :
Sam publication
</td>
<td>$ 50</td>
</tr>
<tr><td><img src="ai.jpg"></td>
<td>Book : AI<br>
Author :
S.Russel<br>
Publication :
Princeton
hall
</td>
<td>$ 63</td>
</tr>
<tr><td><img src="java.jpg"></td>
<td>Book :
Java
2<br>
Author :
Watson<br
>
Publication :
BPB
publications
</td>
<td>$ 35.5</td>
</tr>
</table>
</body>
</html>
9. Create a file in notepad and save it as “cart.html”:

<html>
<head>
<title>cart page</title>
</head>
<table align="center" width="75%">
<tr align="center"><th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr align="center"><td>Java2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr align="center"><td>XML Bible</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr align="right"><th colspan="4">Total amount -
$110</th>
</table>
</body>
</html>
10. Create a file and save it as “csit.html”:
<html>
<head>
<title>csit books</title>
</head>
<body bgcolor="skyblue">
<h3 align="center">Computer Science & IT Books</h3>
<td>Book: Mobile
Computing<br>
Author:
Winston<br>
Publica
tion:
Wiely
</td>
<td>$ 40.5</td>
</tr>
<td>Book : Computer
Networks<br>
Author : Sam
Peter<br>
Publication : Sam
publication
</td>
<td>$ 50</td>
</tr>
<td>Book : Computer
Communications<br>
Author : S.Russel<br>
Publication : Princeton hall
</td>
<td>$ 63</td>
</tr>
<td>Book : Web
Design<br>
Author :
Watson<br>
Publication :
BPB
publications
</td>
<td>$ 35.5</td>
</tr>
</body>
</html>
11. Create a file and save it as “eee.html”:

<html>
<head>
<title>eee books</title>
</head>
<h3 align="center">Electrical and Electronics Eng.
Books</h3>
<td>Book:
Machines<br
> Author:
Winston<br>
Publica
tion:
Wiely
</td>
<td>$ 40.5</td>
</tr>
<td>Book : Power
Electronics<br>
Author : Sam
Peter<br>
Publication :
Sam publication
</td>
<td>$ 50</td>
</tr>
<td>Book :
Transmision
Systems<br> Author
: S.Russel<br>
</td>
<td>$ 63</td>
</tr>
<td>Book : Network
Theory<br>
Author :
Watson<br>
Publication :
BPB
publications
</td>
<td>$ 35.5</td>
</tr>
</body>
</html>
12. Create a file and save it as “ece.html”:

<html>
<head>
<title>ece books</title>
</head>
<h3 align="center">Electronics & Communtion Eng. Books</h3>
<td>Book: Micro
Processor<br>
Author:
Winston<br>
Publication:
Wiely
</td>
<td>$ 40.5</td>
</tr>
<td>Book : Priciples of
Communtion<br> Author
: Sam Peter<br>
Publication :
Sam publication
</td>
<td>$ 50</td>
</tr>
<td>Book : Digital
Logic Design<br>
Author :
S.Russel<br>
</td>
<td>$ 63</td>
</tr>
<td>Book : Signal
Processing<br>
Author :
Watson<br>
Publication :
BPB
publications
</td>
<td>$ 35.5</td>
</tr>
</body>
</html>
A GUIDING SAMPLE OUTPUT:

CS 341 Lab 1

Uploaded by

Document Information

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

CS 341 Lab 1

Uploaded by

Copyright:

Available Formats

CS 341: Web Technologies, Aug-Dec 2017

Lab 1 (Monday 5th September 2017)

LAB 1: (WEB CONTENT CREATION: STRUCTURE)

File name: Simple_html_tags.html

One of the most important technologies on this list

<center><font color="#0000FF"> Text Elements</font>

<p>This is a paragraph tag.

<center><FONT COLOR="#0000FF"> BLOCK QUOTE

<p>This is some text before the quotation. </p>

<center><font color="#0000FF"> Listing Tags</font></center>

<h4>Lowercase letters list:</h4>

<h4>Roman numbers list:</h4>

<h4>Lowercase Roman numbers list:</h4>

<h4>Disc bullets list:</h4>

<h4>Circle bullets list:</h4>

<h4>Square bullets list:</h4>

<h4>A Definition List:</h4>

1. Create a file and save it as “book.html”:

2. Create a file and save it as “top.html”:

3. Create a file and save it as “left.html”:

5. Create a file and save it as “home.html”:

6. Create a file and save it as “login.html”:

8. Create a file and save it as “catalogue.html”:

9. Create a file in notepad and save it as “cart.html”:

11. Create a file and save it as “eee.html”:

12. Create a file and save it as “ece.html”:

A GUIDING SAMPLE OUTPUT:

You might also like