Using HTML , create a personal website that contains the following four web page
ID: 3870739 • Letter: U
Question
Using HTML , create a personal website that contains the following four web pages
1. Home page (index.htm): Brief description about yourself *make something up
2. resume page (resume.htm): formal resume in HTML format *resume doesnt have to be true
3. resource page (resource.htm): A resource page containing links to websites *facebook, instagram, etc.
4. survey page (research.htm): This page should contain a marketing survey form that should include the following form elements
-text box
-check box
-dropdown list
-text area
-submit and reset button
* PLEASE CODE IN HTML AND MAKE SURE THE 4 PAGES ARE ACCESSIBLE BY PLACING A MENU BAR ON TOP OF THE HOME PAGE (index.htm)
Explanation / Answer
<html>
<head>
<!-- your webpage info goes here -->
<title>My Website</title>
<meta name="author" content="your name" />
<meta name="description" content="" />
<!-- you should always add your stylesheet (css) in the head tag so that it starts loading before the page html is being displayed -->
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- webpage content goes here in the body -->
<div id="page">
<div id="logo">
<h1><a href="/" id="logoLink">My Website</a></h1>
</div>
<div id="nav">
<ul>
<li><a href="#/home.html">Home</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="resource.html">Resource </a></li>
</ul>
</div>
<div id="content">
<h2>Home</h2>
<p>
This is my first webpage! I was able to code all the HTML and CSS in order to make it. Watch out world of web design here I come!
</p>
<p>
I can use my skills here to create websites for my business, my friends and family, my C.V, blog or articles. As well as any games or more experiment stuff (which is what the web is really all about).
</p>
</div>
<div id="footer">
<p>
</p>
</div>
</div>
</body>
</html>
/*
* multi-line comment
*/
p{ line-height: 1em; }
h1, h2, h3, h4{
color: orange;
font-weight: normal;
line-height: 1.1em;
margin: 0 0 .5em 0;
}
h1{ font-size: 1.7em; }
h2{ font-size: 1.5em; }
a{
color: black;
text-decoration: none;
}
a:hover,
a:active{ text-decoration: underline; }
/* you can structure your code's white space so that it is as readable for when you come back in the future or for other people to read and edit quickly */
body{
font-family: arial; font-size: 80%; line-height: 1.2em; width: 100%; margin: 0; background: #eee;
}
/* you can put your code all in one line like above */
#page{ margin: 20px; }
/* or on different lines like below */
#logo{
width: 35%;
margin-top: 5px;
font-family: georgia;
display: inline-block;
}
/* but try and be as concise as possible */
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
#nav ul li a:hover{
background-color: #ffb424;
box-shadow: 0px 1px 1px #666;
}
#nav ul li a:active{ background-color: #ff8f00; }
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
}
#footer{
border-bottom: 1px #ccc solid;
margin-bottom: 10px;
}
#footer p{
text-align: right;
text-transform: uppercase;
font-size: 80%;
color: grey;
}
/* multiple styles seperated by a , */
#content,
ul li a{ box-shadow: 0px 1px 1px #999; }
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RESUME | JOHN DOE</title>
</head>
<body>
<!-- BEGIN DIV FOR OVERALL BOX -->
<div id="resume">
<!-- THIS DIV CENTERS OUR HEADING -->
<div id="topinfo">
<p>
</p>
<h1>Name:</h1>
<h2>Address:</h2>
<h2>City</h2>
<br />
<!-- END CENTERING DIV -->
</div>
<h2>Profile</h2>
<br />
<h2>Education</h2>
<h3>Research Project</h3>
<br />
<h2>Related Experience</h2>
<p>
Teaching Assistant
</p>
<p>
<h3>Camp Group Leader<h3>
</p>
<!-- END CENTERING LINKS -->
<!-- END DIV FOR OVERALL BOX -->
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.