Using HTML and CSS: Create a personal set of Web pages on any topic that you lik
ID: 3606182 • Letter: U
Question
Using HTML and CSS:
Create a personal set of Web pages on any topic that you like. Use CSS to provide a consistent style to your pages. Your site should incorporate the following requirements:
Include a home page.
Include at least 3 additional pages
All pages should use the same CSS external file for styles. You may also use embedded or in-line CSS on individual pages, but the primary look should come from the external CSS file.
Include appropriate images on each of your pages. An appropriate image is one that is incorporated into the design or is related to your content, but would fit most reasonable persons guidelines of taste (in general, assume that your Mom is the arbiter of good taste and try not to use images that would embarrass her).
Include a consistent set of navigation elements across your pages
Try to use a consistent design such as color scheme and typography. Do your best here, we haven't really discussed what makes good design and this can be hard. As long as you're consistent in your choices here, I won't make any judgement calls about your actual choice of color or fonts. The only exception to this is that you should at least strive to make everything legible (i.e. - no black text on black background)
Divide each of your pages to include at least the following divisions: a header section, a footer section, a navigation section, and a main content section. You may create more divisions of the pages if you want.
Use either relative or absolute positioning for your page sections.
Include and style at least one of each of the following items on your site: list; table; hyperlink; image; span; content image
Include at least one page that has a form.
Keep in mind that I will be looking mostly at how you use html and css to design the pages. You might keep the actual content to a minimum to save time or even just use filler.
Explanation / Answer
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
CSS Code:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d
}
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black
}
ul.navbar a {
text-decoration: none
}
a:link {
color: blue
}
a:visited {
color: purple
}
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.