Become More Productive Before Creating an Ugly Webpage
Time to get to Work
Today you are tasked with creating an ugly webpage to practice some of the HTML and CSS you have recently learned.
This is your first project of the quarter and you will be graded on how well you follow the instructions.
We will share our work when we’re done and will vote to choose the ugliest webpage. Make Gordon Watts proud!
Please follow the below instructions:
1. To start, copy and paste the following into Notepad or Notepad + + and save it as uglypage.html. Remember to delete and add any quotation marks.
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}
</style>
</head>
<body>
<h1>Big Headline</h1>
<h2>Sub Headline (smaller)</h2>
<p>This is a paragraph.</p>
</body>
</html>
2. Next, open uglypage.html in Firefox.
3. Find and download a new picture for your background image. You will be replacing the dogs. Remember, you need to know the file name and file type (gif, jpg, png) to put in the correct code.
4. Find the most unappealing way to arrange your background image (repeat it over and over, repeat it vertically or horizontally, or have it take up the entire page). See yesterday’s post on our class website to refresh your memory on how to change the code.
5. Once your background image is in place, find some ugly fonts for your headlines and paragraph. Click here to see a list of fonts. The post from Tuesday’s class will help you figure out where to put the code if you need a reminder. Perhaps you should try using a different font for each headline and the paragraph for extra ugliness?
6. Don’t forget to change your page title!
7. Time to play with colors. Find some clashing colors for your headlines and paragraphs. You will find a good list of color values and color names here. You can also add a background color to your body that could be visible underneath your background image, depending on how large your image is and how you chose to arrange it on your page.
8. Time to resize your text. Change the sizes of the headlines and the paragraph. Try making them obnoxiously large or too small to read. Remember, you can have decimals to give a value to your em (example, 0.5em).
9. Shadows are now possible with CSS3. Try adding one to your h1 headline to really make it pop- click here for a reminder on how to do it. Change the shadow color and experiment with different numbers for the horizontal shadow, vertical shadow, and blur distance (try negative numbers and see what happen).
10. How about some unnecessary graphics to make your page even more busy? Check out wigflip.com and create at least two graphics to add to your page. Hint: you will add them to your page the same way you would an image. Create the graphic, download it to your computer (give it a simple name and note what kind of file it is), save it in the same location as your uglypage, and then add it as an image. Image code is <img src=”imagename.gif” /> or .jpg, for example.
11. Last step- add an ugly favicon. Click here for a reminder on how to do that.
12. Done? Nothing else to do to make your page even more unattractive? Let me know and I will come over to check it out.