0. Today’s featured website:
http://www.distancetomars.com/
1. Make a good-looking web page!
You will spend Monday and Tuesday designing one webpage on a topic of your choice.
You now know enough HTML and CSS to make a pretty nice-looking page. Here is your chance to design whatever you want.
You must include:
– A background image (try finding a free background here)
– Image styles (either a border or hover effects or both)
– Text shadows
– Styled link(s)
– Styled headline(s)
– Styled paragraph(s)
Remember- you can copy and paste the code from your previous Notepad file into this new one. Make your life easier! You do not have to re-invent the wheel!
Here is the code to begin. Copy and paste this into a NEW Notepad++ file. You will change this code as you design your site.
You will need to add your own images and the code to style the images (see the post from Thursday for code OR look at your previous Notepad file). You will also need to add Google fonts, your own background image, text, and links.
<html>
<head>
<title>Page title</title>
<style type=”text/css”>
body
{
background-color: #ffffff;
background-image: url(“blue background.jpg”);
background-repeat: repeat;
background-position: center;
font-family: Verdana;
font-size: 1em;
}
h1
{
color: orange;
text-align: center;
font-family: Verdana;
font-size: 3em;
}
h2
{
color: orange;
text-align: center;
font-family: Verdana;
font-size: 2em;
}
p
{
color: #ffffff;
font-family: Verdana;
font-size: 1em;
}
a:link
{
text-decoration: none;
color: purple;
}
a:visited
{
text-decoration: none;
color: blue;
}
a:hover
{
text-decoration: underline;
color: red;
}
a:active
{
text-decoration: underline;
color: green;
}
</style>
</head>
<body>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, in condimentum, augue justo, tortor sodales ut eiusmod maecenas. Nulla nunc nullam et dui tortor, ante consequat. Est vestibulum diam nulla dolor aliquam inceptos, nec tincidunt etiam quis id, ullamcorper nulla, porttitor cum varius in, eaque pede hac enim mauris vitae. Lacus mi a arcu velit felis risus. Nec in vivamus sodales aenean a. Ut convallis montes massa, tellus erat nec pellentesque. Aliquam ut nunc. Egestas nullam et, donec mi mauris arcu non amet, ante in cum eget proin eget ac. Egestas a interdum sed, mollitia qui cras non quis. Lectus vel sit hendrerit eros ornare ante.</p>
</body>
</html>