How to Build a Website from Scratch Lesson – 3


(note: the complete code for Lesson 3 will be included at the end of the lesson.)

If you have completed Lesson 1 and Lesson 2 you should have a page that looks something like this.  So far we have created two files.  We have our web page (default.html) and our external stylesheet (main.css).  We have added a few styles to the page, and divided up the content into a header, footer and content area.  This lesson is going to be focused on typography.  In html we have a variety of common typography tags that can be styled globally to ensure some level of uniformity through out your pages.  Lets start with the “h” or heading tags.

First we need to add all six “h” tags to the body of our page.  In your default.html file, add the following code after the closing “/p” in your site_container div.

  <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

This code will simply show us what each of our headings will look like as we style them.   There are six levels of headings available in HTML, but using classes (which I will discuss later) we could have hundreds of different heading types.  For now lets focus on the default six.  I have already coded some basic CSS for each of our h tags.  Insert the following at the very end of your main.css file.
/--------------------------Typography --------------------------------/
h1{
color: #800000; /this is a hexidecimal color code/
text-decoration:underline;
}
h2{
color:rgb(255,0,0); /this is a rgb color code for red/
}
h3{
color:blue; /certain colors can be simply called by name/
}
h4{
color:silver;
}
h5{
color:green;
}
h6{
color:gray;
}

Note that I have added a new “Typography” heading as a comment.  Keeping your style sheet neat and tidy is incredibly important for future changes and updates.  Now when you load your page you should see all of your “h” tags in a variety of colors.  In my opinion, this is way to many colors for one page, but I wanted to accent the difference between each tag.  The next thing we should style is our paragraph or “p” tag.

Since we already have a paragraph (our Moby Dick excerpt) in our default.html page we simply need to add a new style declaration to our main.css file.  Insert the following code at the very bottom of your stylesheet.

p{
font-weight:bold;
font-style:italic;
}

If you refresh your page, your main paragraph should now be bold and italic.  Pretty easy right!  Now on to the fun stuff.  Links are the backbone of any website.  They are the way we navigate pages and organize many pages of information into an easy to use format.  The link tag is a variation of the “a” anchor tag.  Check out this page at W3schools for more details on the anchor tag.  For now lets add a link to our default.html file and an internal link that will jump us to the top of our page.  Right after your opening body tag add the following html.
<a id="top"></a>

This use of the “a” tag will allow the browser to identify this spot as the top of the page. Next lets add a link to this spot. After the closing “p” tag in the footer_area insert the following code.
<a href="#top">Top</a>

This will be a link with in the page that simply returns your user to the top of the page. Now lets add a link to another site. In this case we will be using a link that references a different page (google.com). After your new “h” tags, paste in the following code.
<a href="http://www.google.com">This Is a Link to Google!</a>

Notice the formatting.  The address “http://www.google.com” is contained in the opening tag.  The text the user sees “This Is a Link to Google” rests between the opening and closing “a” tags.  So now lets add some style to our links.  At the bottom of your main.css file, add the following code.
/the following styles define what a link looks like, and how it changes as the user interacts with it,
in order to work
/
/The classes added after the : are called pseudo classes. These allow the links to live and breath and,
in a way, stand out as links.
/
/this is the basic link style/
a:link {
color:black; /* sets the default link font color to black/
font-weight:bold; /
makes all of our links bold /
padding:5px; /
makes the box around the links a little larger (try changing this number)/
border:thin black solid; /
adds a border to the links /
margin:5px; /
adds a little room on all four sides of the link*/

}
/This will be the style for a link that has already been visited/
a:visited {
color:#660033;
}
/This is the style for a link that is being hovered by the mouse/
a:hover {
color:red;
background-color:silver;
}
/This is the "active link" think of it as a button that is being pressed/
a:active {
color: #663300;
background-color:teal;
}


I know this is a lot of code to look at all at once, but link styling is extremely important to the way people view your page.  I used a lot of comments to delineate the way each of these declarations works.  The best way to further understand these is to try changing the value of each property and observing how it affects the links.  For instance, lets change the padding of a:link to 20px and refresh the page.  You’ll notice that the rectangle around your links has gotten a lot larger.

Take some time and mess with all of these values, and observe how the links change as you interact with them.  The best way to learn is to play, play, play.  If you break it, don’t worry, I will include complete code for lesson 3 at the end of this article.  Before we wrap up this lesson, lets fix some of the ugly colors and layout issues.  First, add the following to your “p” selector in the main.css file.

width:900px;
margin-left:auto;
margin-right:auto;

This will center your paragraphs in their containers and give them a little bit of room to breath.  Now, under each “h” selector, add the following.
padding-left:25px;

This will move all of your headings 25 pixels off of the left edge of the container.  Now paste the following into the “footer_container” selector.
padding-bottom:35px;

This will give your “top” link a bit more room. Now, lets change the padding for a:link to 10px. This box was just a little bit too big. If you are saving and refreshing as you go, you’ll notice that things are looking better already.  Now lets deal with the link colors. I like black, red and dark red for links.  To make it simple, just replace all your link selectors with the following…
/this is the basic link style/
a:link {
color:black; /* sets the default link font color to black/
font-weight:bold; /
makes all of our links bold /
padding:10px; /
makes the box around the links a little larger (try changing this number)/
border:thin black solid; /
adds a border to the links /
margin:5px; /
adds a little room on all four sides of the link/
text-decoration:none; /
removes the link underline/
/
This will be the style for a link that has already been visited/
a:visited {
color:#333333;
}
/
This is the style for a link that is being hovered by the mouse/
a:hover {
color:black;
background-color:silver
}
/
This is the "active link" think of it as a button that is being pressed*/
a:active {
color: white;
background-color:black;
}

This is should make your links look a little cleaner.  Almost there!  Now change the color of all of your “h” selectors to black.  All those colors were a bit much to stare at.  Lastly, lets make the title of our page a link that directs the user to the home page.  To do this, we need to replace the “Hello World!” in the first “h1″ tag of our default.html with the following.
<a href="default.html">Hello World!</a>

Now our title will also act as a “Home” link. so that our users can always return to the main page by clicking it.  If you followed along you should have a page that looks about like this.  Hopefully this wasn’t too confusing, if I lost you along the way, the finished code for each file is included below.

I think the best thing to do at this point is to play with all of the different CSS values, and observe the effect they have on the page as you save and refresh.  Change the colors, the pixels, the margins etc. and see how it all works.  You can’t see how it all works without taking it apart and breaking it.  Just remember, lesson 4 will start with the code below, so if you’ve radically altered the files, you may want to start with fresh copies.

main.css

/*  This is what a css comment looks like  /
/
use these areas to make notes about the functionality of your css file /
/
css will be explained in more detail as we go, but for now we'll stick
to the basics /
/
the css below is going to control our page layout and positioning we will use a comment to
declare this as a "basic page structure" area /
/
BASIC CSS RULES /
/
For now all your styles will be stored in one style sheet
/* Don't make any inline styles in your page.
/* keeping an organized style sheet is the key to making any changes in the future. /
/
-----------------------------Basic Page Structure------------------------------/
body { /
body is a basic css selector /
background-color:black; /
this is a css declaration it must be inside of braces as shown {}*/
font-family:Verdana, Geneva, Tahoma, sans-serif;
}

headerarea{

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}
/* This is the area we are going to use for our site container */

site_container { /* this is and ID selector it is only allowed to be used once per page */

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
min-height:600px;        /* this sets the minimum height of the white rectangle  */
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}

footer_container{

border:thin white solid; /* here we give our footer container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
margin-top:15px;
margin-bottom:30px;
background-color:#ffffff;/* this sets the background color of the rectangle to white*/
padding-bottom:35px;

}
/--------------------------Typography --------------------------------/
h1{
color: black; /this is a hexidecimal color code/
text-decoration:underline;
padding-left:25px;
}
h2{
color:black; /this is a rgb color code for red/
padding-left:25px;
}
h3{
color:black; /certain colors can be simply called by name/
padding-left:25px;
}
h4{
color:black;
padding-left:25px;
}
h5{
color:black;
padding-left:25px;
}
h6{
color:black;
padding-left:25px;
}
p{
font-weight:bold;
font-style:italic;
width:900px;
margin-left:auto;
margin-right:auto;
}
/the following styles define what a link looks like, and how it changes as the user interacts with it,
in order to work
/
/The classes added after the : are called pseudo classes. These allow the links to live and breath and,
in a way, stand out as links.
/
/this is the basic link style/
a:link {
color:black; /* sets the default link font color to black/
font-weight:bold; /
makes all of our links bold /
padding:10px; /
makes the box around the links a little larger (try changing this number)/
border:thin black solid; /
adds a border to the links /
margin:5px; /
adds a little room on all four sides of the link/
text-decoration:none; /
removes the link underline/
}
/
This will be the style for a link that has already been visited/
a:visited {
color:#333333;
}
/
This is the style for a link that is being hovered by the mouse/
a:hover {
color:black;
background-color:silver
}
/
This is the "active link" think of it as a button that is being pressed*/
a:active {
color: white;
background-color:black;
}

default.html

<!DOCTYPE html><!--declares a document type for the browser to read-->
<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->
<html><!--tells the browser that ths is where the html starts-->
<head><!--this is where the head starts. The head area is used to declare external scripts
and communicate other information about the pag to the browser.-->
<!--the area below is used for giving browsers an search engines information to find your site-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="my first site, tutorial, learning the web"/>
<meta name="author" content="BrianWK (your name goes here)" />
<!--this is the title you see in various places including search
engines and a the top of your browser-->
<title>My First Web Page</title>
<!--Below we are going to attach the style.css that we created so that we can apply some style-->
<link href="style/main.css" rel="stylesheet" type="text/css">
</head><!--this tells the browser the head has ended. This is not a page header-->
<body><!--This is where the page begins, the area that your visitor sees-->
<a id="top"></a>
<div id="headerarea">
<h1><a href="default.html">Hello World!</a></h1><!--this is a heading tag-->
<h3>This is your very first webpage</h3>
</div>
<div id="site_container">
<p>This is an example of a paragraph. I like to use excerpts from Moby Dick when I mock up pages. </p>
<p>Call me Ishmael. Some years ago -- never mind how long precisely -- having
little or no money in my purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen, and regulating the circulation.
Whenever I find myself growing grim about the mouth; whenever it is a damp,
drizzly November in my soul; whenever I find myself involuntarily pausing before
coffin warehouses, and bringing up the rear of every funeral I meet; and
especially whenever my hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off -- then, I account it high time to
get to sea as soon as I can. This is my substitute for pistol and ball. With a
philosophical flourish Cato throws himself upon his sword; I quietly take to the
ship. There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<a href="http://www.google.com">This Is a Link to Google!</a>
</div>
<div id="footer_container">
<p>This is where our footer will go!</p>
<a href="#top">Top</a>
</div>
</body><!--This Tag ends the body, and effectively the visible part of the page.-->
</html><!--tells the browser that ths is where the html ends the "/" is a clsoing tag-->

Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin

1 Comment

  1. Comment by Dr Efficiency


    If the technical side of HTML confuses you and you learn better by following along in a video, I have created a 5 part video series on this which has helped create over 200 websites so far. It’s on youtube: http://www.youtube.com/watch?v=FyIeXnD_1Ho
    You can thank me later!