This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed Lesson One, you should begin there.
Adding Content and Style, Part One
Welcome back! Let’s start adding content to our framework.
Adding Real Content
You’re going to add more text to your home page (the index.html page). Beneath the “Hello, world!” paragraph, write a short paragraph about yourself. Make sure you enclose it in the PARAGRAPH tags:
<p> and </p>
Refresh your browser with your file open. See what's different.
Adding a Main Title
We're going to put a HEADING on our page. This will serve as your page's MAIN TITLE. Above your “Hello, world!” paragraph, type this exactly:
<h1>Your Name's First Web Page</h1>
The <h1> tag means “Heading 1.” We’re going to learn more about headings shortly. Don’t forget to replace the Your Name with, well, your name.
Refresh your browser with your file open. See what’s different.
If you like, change the heading text from the rather generic “____’s First Web Page” to something that suits you. Remember, this first <h1> heading introduces – brands – your site to the world, and should serve as a good title for your site.
Adding a Little Style with CSS
Now we’re going to add some style to this page.
Go into your styles.css file (your stylesheet).
Let’s start by changing the font of the heading.
Copy this and paste it into your stylesheet:
h1 {
font-family: "Trebuchet MS", sans-serif;
}
Save your file.
Refresh your browser with your file open. See what’s different.
If you’re on target, your <h1> is now showing in a different font than it did before.
You have just created your first CASCADING STYLESHEET.
Congratulations!
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.
Note: If your heading didn’t change in appearance, you may not have “Trebuchet MS” on your system. Though almost all modern computers have this font, some few do not. In that case, the next section will help you out. And, that’s why we added the sans-serif element to the h1 selector. Even though a particular computer may lack that font, it will at least display the heading in a "sans-serif" font (like Trebuchet MS) instead of whatever font the browser has as its default. Something is better than nothing.
Changing Our Heading Font
Now it's time to make your page begin to reflect your style choices. Let’s start by changing the heading font to something you like. To see all the fonts on your computer, we’re going to cheat and let Microsoft Word list the fonts for us. We’re not going to write anything in Microsoft Word, just use it for fonts.
Open Microsoft Word. Click the Home tab. You will see a listing of fonts. Pick one you like.
Note: If you don’t have Microsoft Word, use whatever word processor is on your computer. Even most text editors have a way to display the fonts on your computer. I like Word because it gives you a visual display of the various fonts you have.
In the style code, change “Trebuchet MS” to the font you like. Don’t forget to keep it inside the quotes.
Close Microsoft Word.
Save your file, refresh your browser, and see what’s different.
Note: Actually three things. First, I’m deliberately deviating from best principles here. Most Web designers limit themselves to a relatively small selection of widely available fonts such as Trebuchet MS, Arial, Georgia, Times New Roman, and others. I’m having you change the font to something more individual in order to let you personalize your page. If you picked something rather obscure, say, “Black Chancery” or “KlingonTNG,” don’t expect a lot of people to be able to see your page in that font — they don’t see fonts they don’t have. (Neither do you.) Secondly, your choice of font may well not be a “sans-serif“ font. Let’s leave the “sans-serif” element for now, but be aware that it may not go with your chosen font. And finally, there are free font viewers out there that you can download to manage your fonts. Check the toolbox page for more information.
Changing the Color of the Background
Let’s change the color of the background.
In your style sheet, just above your font command, copy this exactly:
body {
background-color: gray;
}
Refresh your browser with your file open, and see what’s different. Mmmm, boring!
Changing the Background to Your Choice, Not Mine
Let’s change the background color to something you like. Go back into that other browser window that’s been minimized. Go to this Web site:
http://www.december.com/html/spec/color.html
Pick a color family: neutrals, warms (reds, oranges, etc), greens, blues, or purple. Click into it. For an example, I’m going to go into the blue colors, but you pick what you like.
You will see that each color has a name and a number with a # in front of it. Let’s say we pick this one: lake michigan #50a6c2.
Your browser probably won’t recognize the name of the color, but it will definitely recognize the number. Copy it, including the # (hash mark). (Remember, don’t bother copying the color name. The browser almost certainly won’t recognize it.)
Now, go to your background-color command. Change gray to the number: #50a6c2 (use your number, not my example). Like so:
body {
background-color: #50a6c2;
}
Don’t forget the hash mark.
Save your file, refresh your browser, and see what’s different.
Note: Notice that I changed the letters in the code from UPPER to lower case?
Changing the Color of Your Paragraph Text
I bet your words don’t look as good as they could against that background color. Let’s pick a color that will stand out against your background color. For our example, I’m going to find a light, light blue to go against that darker blue I chose. You pick something you like.
I picked aliceblue(SVG) #f0f8ff. Remember, just use the #number (we call this the HEX CODE for the color).
Underneath your h1 command, write this, using your color choice:
p {
color: #f0f8ff;
}
Save your file, refresh your browser, and see how it looks. Do you like the color combination? If not, take a few minutes and get it the way you want it. Try different color combinations.
Changing the Heading Color to Match Your Other Color Choices
I bet that heading could use being a different color, too. For my example, I’m going to change my heading color to a stylish gray: let’s say #4b4f5c. You choose something you like.
In this command, you’re going to add a line to an element of your CSS:
h1 {
font-family: "Trebuchet MS", sans-serif;
}
becomes
h1 {
font-family: "Trebuchet MS", sans-serif;
color: #4b4f5c;
}
Save your file, and refresh your browser with your file open. Do you like the color combination? If not, take a few minutes and get it the way you want it. Try different color combinations.
Centering Your Heading
We’re going to CENTER that heading by adding another line to the h1 style command.
h1 {
font-family: "Trebuchet MS", sans-serif;
color: #4b4f5c;
}
becomes
h1 {
font-family: "Trebuchet MS", sans-serif;
color: #4b4f5c;
text-align: center;
}
Save your file, refresh your browser with your file open, and see if your heading is now centered.
The text-align attribute is nearly self-explanatory; it aligns the text in your page.
Check your work: take a look at an example page to see if you’ve gotten it right so far. Use your browser’s View Source (or Source, or maybe View Page Source), found in your right-click menu, to see the source code in the example, and make sure it matches up with yours. Why the example code is not exactly like the code you’re generating.
