Unfortunately, I haven't updated this website in a very long time. I have since developed 20+ Wordpress websites that are not included in this site's portfolio. Please contact me for an updated portfolio

Learning xHTML and CSS – day 11 of 30

Learning xHTML and CSS – day 11 of 30

The quiz

Well, last time we left off with a bunch of criteria to accomplish the picture on the left. As a web designer, you’ll often find really beautiful websites that make you want to try and replicate them. My suggestion? DO IT! The best way to learn the art of website design is by actually doing it. Actually, that’s probably the best approach to learning anything in life. I’ve perfected all of my skills through web design projects and side projects. What were my side projects? Replicating simple and complicated sites.

Anyway…

Back to business. Today I won’t reveal any new info to you, I won’t try to teach you something new, all I’ll do is show you the answer to the quiz and discuss why I coded it that way. If you have more specific questions, contact me via my contact form.

Here we go–

The xHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My first website</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="pagewrap">
 <div id="header">
   <h1>Welcome to my new website!</h1>
 </div>

 <div id="navigation">
   <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
 </div>

 <div id="content">
   <p>This is the content section</p>
 </div>

 <div id="footer">
   <p>This is the footer section</p>
 </div>
</div>

</body>
</html>

Of course, without CSS styles, this would not look like the picture at the top. The magic is through the CSS styles. These are all styles that we’ve gone over and previously discussed.

The CSS

body { background-color: white; font-size: 12px; }
a { color: red; font-size: 12px; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: 20px; border-bottom: solid 2px orange; }
#header { height: 30px; }
#navigation { height: 20px; }
#content { height: 50px; border-top: dotted 1px black;}
#footer { height: 20px; border-top: dotted 1px black; }

And that’s it!

Let’s discuss things now…

  • The page is divided into four sections: header, navigation, content, footer. All sections are made up of DIVs. All four DIVs are wrapped with a pagewrap DIV.
  • We’ve discussed the form to make links in the last post. As specified in the criteria, all links link to ‘#’.
  • All links are red and without underline using the color and text-decoration properties
  • I used the :hover pseudo-selector to specify a blue color and underlining
  • The heading (h1 tag) has a bottom border of solid 1px orange
  • Finally, both the content as well as the footer DIVs have  a top border of dotted 1px black

That should cover all of it.

Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription on the right). Also, feel free to contact me with any questions or use my contact form to send me any private comments or questions.

Thanks for reading and see you tomorrow! I’ll provide the full answer (xHTML and CSS) code!

Tags: , , , , , , , ,

Related Posts