3 | Page Web Technology Lab
Assignment No. 2
1. Title: -
Design a static website using HTML, CSS & Bootstrap.
2. Objectives: -
Understand basic concepts of HTML, CSS & Bootstrap.
3. Problem Statement: -
Implement a web page index.htm for any client website (e.g., a restaurant website
project) using following:
a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists,
links for text and images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS.
4. Problem Outcome: -
Students will be able to understand
1. Design static webpages using HTML.
2. Apply CSS on web sites.
3. Apply CSS Bootstrap on web sites.
5. Hardware & Software Requirement: -
Hardware Requirements Software Requirements
At least 64 MB RAM, Windows/ Linux OS, Notepad or any web
350 MB Free fixed disk space code editor, web browser
6. Theory Concepts: -
a. What is HTML?
HTML: HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on
Browsers do not display the HTML tags, but use them to render the content of
the page
b. What is CSS?
CSS stands for Cascading Style Sheet. It is nothing, but design language intended
to simplify the process of making web pages presentable.CSS handles the feel and
look part of a web page.By using CSS, one can control the color of text, style of
fonts, spacing between paragraphs, layout designs.
Department of Computer Engineering Army Institute of Technology, Pune
4 | Page Web Technology Lab
CSS is easy to learn, easy to understandand it provides powerful control on
presentation of an HTML document.
Advantages of CSS: It saves the time, Pages load faster, Easy maintenance,
Superior styles to HTML, Multiple Device Compatibility, Global web standards,
Offline Browsing, Platform Independence.
c. What TECHNOLOGY / TOOL has used?
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements. An inline CSS is used to
apply a unique style to a single HTML element.
Example.
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal - by using a <style> element in the <head> section. An internal CSS is
used to define a style for a single HTML page. An internal CSS is defined in the
<head> section of an HTML page, within a <style> element.
Example:
<style>
body {background-color: powderblue;}
h1 {color: blue;} p {color: red;}
</style>
External - by using an external CSS file. An external style sheet is used to define
the style for many HTML pages. With an external style sheet, you can change the
look of an entire web site, by changing one file!To use an external style sheet, add
a link to it in the <head> section of the HTML page.
Example: <link rel="stylesheet" href="styles.css">
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Department of Computer Engineering Army Institute of Technology, Pune
5 | Page Web Technology Lab
7. DESIGN / EXECUTION STEPS
Following steps are used to Create and Execute web applications,
1) Write the HTML code in notepad/VS Code editor and save with .html extension.
2) Write the CSS code in notepad and save with .css extension.
3) Import CSS file in HTML page. Also import Bootstrap file from either way.
4) Add styles to HTML page elements through CSS & Bootstrap styles.
5) Open HTML page in the browser.
8. Implementation: -
Program Code
Login.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet1.css">
<title>Login Form</title>
</head>
<body onload="document.Login.UN.focus();">
<form name="Login" onsubmit="valLogin();">
<table border="2" width="90%" align="center" bgcolor="cyan">
<tr align="center">
<td><img src="logo.jpg" width="150" height="40"></td>
<td><h1>Login Form</h1></td>
</tr>
<tr>
<td colspan="3"><marquee><a href="Registration.html">If Not
Registered Click Here</a></marquee></td>
</tr>
</table>
<table width="90%" border="2" align="center" bgcolor="pink">
<tr>
<td><b>    User Name</b></td>
<td>    <input type="text" placeholder="Enter
User Name" name="uid" size="25"required/></td>
</tr>
<tr>
<td><b>    Password</b></td>
<td>    <input type="password"
placeholder="Enter Password" name="pwd" size="25" required/></td>
</tr>
<tr align="center">
<td><input type="submit" value="Login" class="ab" name="submit"
onclick="Loginval()"></td>
<td><input type="Reset" value="Cancel" class="ab"
name="reset"></td>
</tr>
</table>
</form>
</body>
</html>
Department of Computer Engineering Army Institute of Technology, Pune
6 | Page Web Technology Lab
Register.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet1.css">
<title>Registration Window</title>
</head>
<body>
<form name='Registration'>
<table border="2" width="90%" align="center" bgcolor="cyan">
<tr align="center">
<td><img src="logo.jpg" width="150" height="40"></td>
<td><h1>Registration Form</h1></td>
</tr>
<tr>
<td colspan="3"><marquee><a href="Login.html">Already Registered Click
Here</a></marquee></td>
</tr>
</table>
<table width="90%" border="2" align="center" bgcolor="pink">
<tr>
<td rowspan="2"><b>    Full Name: </b></td>
<td align="center"><input type="text" name="fname" maxlength="50"
size="25" placeholder="Enter First Name"required></td>
<td align="center"><input type="text" name="lname" maxlength="50"
size="25" placeholder="Enter Last Name"required></td>
</tr>
<tr align="center">
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
</tr>
<tr>
<td ><b>     Gender</b></td>
<td>    <input type="radio" name="sex"
value="Male"/>Male     <input type="radio" name="sex"
value="Female"/>Female     <input type="radio"
name="sex" value="Other"/>Other</td>
</tr>
<tr>
<td><b>    Date of Birth</b></td>
<td colspan="2">    <input type="Date"
name="DOB"/></td>
</tr>
<tr>
<td><b>    Mobile Number</b></td>
<td colspan="2">    <input type="text"
placeholder="Enter Mobile Number" name="mono" size="10"
maxlength="10"/></td>
</tr>
<tr>
<td><b>    Email</b></td>
<td colspan="2">    <input type="text"
placeholder="Enter Email Id" name="email"/></td>
</tr>
<tr>
<td ><b>    User Name</b></td>
Department of Computer Engineering Army Institute of Technology, Pune
7 | Page Web Technology Lab
<td colspan="2">    <input type="text"
placeholder="Enter UserId" name="uid" size="25"/></td>
</tr>
<tr>
<td><b>    Password</b></td>
<td colspan="2">    <input type="password"
placeholder="Enter Password" name="pwd" size="25"/></td>
</tr>
<tr>
<td><b>    Repeat Password</b></td>
<td colspan="2">    <input type="password"
placeholder="Repeat Password" name="rpwd" size="25"/></td>
</tr>
<tr>
<td colspan="3"><input type="checkbox" checked="checked"
required/>    By creating an account you agree to our
<a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p></td>
</tr>
<tr align="center">
<td></td>
<td><input type="Reset" value="Cancel" class="ab" name="reset"></td>
<td><input type="submit" value="Sign Up" name="submit"class="ab"
onclick="valid()"/></td>
</tr>
</table>
</form>
</body>
</html>
Stylesheet.css
h1{
font-family:Poor Richard;
font-size:300%;
}
td{
font-family:Bodoni MT;
font-size:100%;
}
input
{
font-family:Bodoni MT;
font-size:100%;
margin:5px 0;
}
.ab{
background-color: Gray;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
opacity: 0.9;
}
Department of Computer Engineering Army Institute of Technology, Pune
8 | Page Web Technology Lab
Output
9. Conclusion: -
From above assignment I have conclude that: ________________________________
Department of Computer Engineering Army Institute of Technology, Pune
9 | Page Web Technology Lab
10. Programming Questions (Submit code files on Moodle & Code print):
a. Create a Book Catalogue web page: The catalogue page should contain the
details of all the books available in the web site in a table. The details should
contain the following: Snap shot of Cover Page, Author Name, Publisher, Price,
Add to cart button. For this page use HTML, CSS & Bootstrap.
b. Write a HTML program for time-table using tables, Text formatting tags.
11. Viva Questions (attach additional sheets):
a. What is the difference between HTML and HTML5?
b. What is the difference between html elements and tags?
c. What is marquee?
d. What is the use of span tag? Give an example?
e. What is the use of ‘required ’attribute in HTML5?
f. What is External stylesheet? What are the advantages and disadvantages?
g. What is CSS selector?
h. What are the components of CSS style?
i. What is browser safe color?
Performance Indicators Dated
Process related (6 Marks) signature
1 Logic formation (3)
Marks Obtained of
2 Debugging ability (2) Teacher
3 Follow ethical practices (1) Process Product
Total
Product related (4 Marks) Related Related
(10)
4 Expected output (1) (6) (4)
5 Timely Submission (2)
6 Answer to sample questions (1)
Department of Computer Engineering Army Institute of Technology, Pune
