Description Demonstrate your ability to create a web site. Your web site should
ID: 652743 • Letter: D
Question
Description
Demonstrate your ability to create a web site. Your web site should consist of at least 4 pages, a main page, an additional information page, a page containing form elements (such as a contact page), and one additional page of your choice.
A theme for the assignment will be announced in class, please make sure to create your page according to the theme announced in class. Any code (such as field names or captions must correspond to the theme covered in this assignment.
It is required that the code be written by hand using a text editor (e.g., Notepad or Notepad++), not an HTML generator (e.g.,DreamWeaver). Notepad++ is a text editor well suited for HTML programming, and is a freeware application that can be downloaded from http://notepad-plus-plus.org/
Please use the following HTML template for your page:
< html lang="en">
< head>
< title>Web Page Title here
< meta charset=utf-8"/>
< /head>
< body>
< p> Student Name: Your Name
Student Section: 231.xxx
your text here
< /html>
Requirements
The project must include:
design material including site map, wireframes, and description and justification (at least one paragraph) for a page layout design technique (site map must be linked to main page, but does not count as one of your 4 pages)
at least 4 web pages (main page, additional information page About Us/Me, page containing form/form elements, additional page of your choice - does NOT include linked sitemap)
form elements must include text field, radio buttons, check boxes, select list, submit and reset buttons, fieldset and legend
web pages must use cascading style sheets for style and layout
cascading style sheets must use an external style sheet (you may also use inline and embedded styles). Use at least 2 different levels of style sheets
cascading style sheets must be used to accomplish any/all styling for all pages
requires style and layout
web pages must provide
navigation structure
header and footer
must include at least one image (on any of the three pages), including the alt attribute
resources pages listing all references (not part of the four required pages)
the project must be presented to the class during the assigned project presentation class period
Description
Demonstrate your ability to create a web site. Your web site should consist of at least 4 pages, a main page, an additional information page, a page containing form elements (such as a contact page), and one additional page of your choice.
A theme for the assignment will be announced in class, please make sure to create your page according to the theme announced in class. Any code (such as field names or captions must correspond to the theme covered in this assignment.
It is required that the code be written by hand using a text editor (e.g., Notepad or Notepad++), not an HTML generator (e.g.,DreamWeaver). Notepad++ is a text editor well suited for HTML programming, and is a freeware application that can be downloaded from http://notepad-plus-plus.org/
Please use the following HTML template for your page:
< html lang="en">
< head>
< title>Web Page Title here
< meta charset=utf-8"/>
< /head>
< body>
< p> Student Name: Your Name
Student Section: 231.xxx
your text here
< /html>
Requirements
The project must include:
design material including site map, wireframes, and description and justification (at least one paragraph) for a page layout design technique (site map must be linked to main page, but does not count as one of your 4 pages)
at least 4 web pages (main page, additional information page About Us/Me, page containing form/form elements, additional page of your choice - does NOT include linked sitemap)
form elements must include text field, radio buttons, check boxes, select list, submit and reset buttons, fieldset and legend
web pages must use cascading style sheets for style and layout
cascading style sheets must use an external style sheet (you may also use inline and embedded styles). Use at least 2 different levels of style sheets
cascading style sheets must be used to accomplish any/all styling for all pages
requires style and layout
web pages must provide
navigation structure
header and footer
must include at least one image (on any of the three pages), including the alt attribute
resources pages listing all references (not part of the four required pages)
the project must be presented to the class during the assigned project presentation class period
Explanation / Answer
Given four pages
1)Home page
2)registration page
3)Login page
4)Your blog articles showing...along with template you are provided.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-left: 500px;
}
li {
float: left;
}
a {
display: block;
width: 100%;
background-color: #dddddd;
}
</style>
<title> My Website</title>
</head>
<header><ul>
<li><a href="home.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="article.html">Articles</a></li>
</ul></header>
<body bgcolor="cyan" text="black">
<marquee>Welcome to my website</marquee>
<center><h1> My first page </h1></center>
<br><br><br><br><br><br>
<center><input type="submit" value="My web pages inside"
/> </center>
<footer>
<img src="footer.jpg" alt="my footer">
</footer>
</body>
</html>
registration.html
<html>
<head>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-left: 500px;
}
li {
float: left;
}
a {
display: block;
width: 100%;
background-color: #dddddd;
}
</style>
</head>
<body>
<header><ul>
<li><a href="home.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="article.html">Articles</a></li>
</ul></header>
<form action="#" name="StudentRegistration">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Website Registration</b></font></center>
</td>
</tr>
<tr>
<td>Enter name</td>
<td><input type=text name=textnames id="name" size="40"></td>
</tr>
<tr>
<td> Address</td>
<td><input type="text" name="address" id="address" size="40"></td>
</tr>
<tr>
<td>Your Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>Enter Country</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="INDIA">INDIA</option>
<option value="USA">USA</option>
<option value="AUSTRALIA">AUSTRALIA</option>
<option value="Netherlands">Netherlands</option>
</select></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="emailaddress" id="emailaddress" size="30"></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" name="mobileNumber" id="mobileNumber" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
<footer>
<img src="footer.jpg" alt="my footer">
</footer>
</body>
</html>
Login.html
<html>
<head>
<title>Login page</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-left: 500px;
}
li {
float: left;
}
a {
display: block;
width: 100%;
background-color: #dddddd;
}
</style>
</head>
<body>
<header><ul>
<li><a href="home.html">Home</a></li>
<li><a href="#news">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="article.html">Articles</a></li>
</ul></header>
<center>
<form>
<br>
<br>
<p><label>Login ID :<input name="Login ID" type="text" size="25"/></label></p>
<p><label>Password :<input name="Password" type="password" size="25"/></label></p>
<br>
<p>
<input name="submit" type="submit" value="Submit">
<input name="clear" type="reset" value="Clear">
</p>
</form>
</center>
<footer>
<img src="footer.jpg" alt="my footer">
</footer>
</body>
</html>
article.html
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
padding-left: 500px;
}
li {
float: left;
}
a {
display: block;
width: 100%;
background-color: #dddddd;
}
</style>
<title> My Website</title>
</head>
<header><ul>
<li><a href="home.html">Home</a></li>
<li><a href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="article.html">Articles</a></li>
</ul></header>
<body bgcolor="cyan" text="black">
<marquee>my article</marquee>
<center><legend>My Blog</legend></center>
<p>Many developers wireframes for develop their sites maening full and for rich look.
Using wireframes is very best choice while developing websites.
</p>
< p> Student Name: Your Name
Student Section: 231.xxx
your text here</p>
<footer>
<img src="footer.jpg" alt="my footer">
</footer>
</body>
</html>