Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Assignment2

The document outlines an assignment to design a static website using HTML, CSS, and Bootstrap, focusing on understanding their basic concepts. It includes a problem statement, expected outcomes, hardware and software requirements, and detailed instructions for creating web pages with HTML and CSS. Additionally, it provides example code for a login and registration form, along with a stylesheet and programming questions for further practice.

Uploaded by

kaushalvyas077
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Assignment2

The document outlines an assignment to design a static website using HTML, CSS, and Bootstrap, focusing on understanding their basic concepts. It includes a problem statement, expected outcomes, hardware and software requirements, and detailed instructions for creating web pages with HTML and CSS. Additionally, it provides example code for a login and registration form, along with a stylesheet and programming questions for further practice.

Uploaded by

kaushalvyas077
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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>&nbsp&nbsp&nbsp&nbspUser Name</b></td>
<td>&nbsp&nbsp&nbsp&nbsp<input type="text" placeholder="Enter
User Name" name="uid" size="25"required/></td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspPassword</b></td>
<td>&nbsp&nbsp&nbsp&nbsp<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>&nbsp&nbsp&nbsp&nbspFull 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>&nbsp&nbsp&nbsp&nbsp Gender</b></td>
<td>&nbsp&nbsp&nbsp&nbsp<input type="radio" name="sex"
value="Male"/>Male &nbsp&nbsp&nbsp&nbsp<input type="radio" name="sex"
value="Female"/>Female &nbsp&nbsp&nbsp&nbsp<input type="radio"
name="sex" value="Other"/>Other</td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspDate of Birth</b></td>
<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="Date"
name="DOB"/></td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspMobile Number</b></td>
<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="text"
placeholder="Enter Mobile Number" name="mono" size="10"
maxlength="10"/></td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspEmail</b></td>
<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="text"
placeholder="Enter Email Id" name="email"/></td>
</tr>
<tr>
<td ><b>&nbsp&nbsp&nbsp&nbspUser Name</b></td>

Department of Computer Engineering Army Institute of Technology, Pune


7 | Page Web Technology Lab

<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="text"


placeholder="Enter UserId" name="uid" size="25"/></td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspPassword</b></td>
<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="password"
placeholder="Enter Password" name="pwd" size="25"/></td>
</tr>
<tr>
<td><b>&nbsp&nbsp&nbsp&nbspRepeat Password</b></td>
<td colspan="2">&nbsp&nbsp&nbsp&nbsp<input type="password"
placeholder="Repeat Password" name="rpwd" size="25"/></td>
</tr>
<tr>
<td colspan="3"><input type="checkbox" checked="checked"
required/>&nbsp&nbsp&nbsp&nbspBy 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

You might also like