Beginner Web Site Building Guide using HTML and CSS

Beginner Web Site Building Guide - HTML, CSS

This guide will hopefully give beginners a good place to start when it comes to building a simple web site. In it you will learn some basic HTML and CSS. HTML stands for hypertext markup language, and is the language your web browser interprets to display web pages such as this one. CSS stands for cascading stylesheet, and is the method we will use to add color to our page and format our text and other elements. I won't be covering includes, PHP, or other concepts in this guide, but may cover those in future guides.

Index of Contents

»What do I need?
»Plan your site
»Design
»Creating the folders and splicing
»Writing HTML
»Writing CSS
»Writing HTML Continued
»Writing CSS Continued
»Finishing up
»Create additional pages
»Done!
»Additional resources

What do I need?

At a bare minimum you will need your browser and a text editor (such as Notepad or Simple Text). Any plain text editor will do, and you can also get a dedicated HTML editor. There are many free HTML editors out there to choose from, and I have no preference. I use TSW WebCoder, which is unfortunately not a free editor anymore. For now, feel free to stick with your basic text editor included with your operating system.

To publish your website on the web you will need web space. There are many free web space providers, such as Yahoo Geocities. I suggest doing a Google search for "Free Web Space" or along those lines:

You may want to wait until you have gotten your hands dirty with your website before you start worrying about web space, so feel free to skip that for now. You can fully test and use the website you're going to build without a server, using just the browser on your computer.

Plan your site

Every good site starts with a plan. What type of site are you going to be building? How many pages will it have? Since we're starting at the basics, let's build a very simple portfolio web site to showcase a hypothetical artist's drawings. This website will have 3 pages: Home, Portfolio, and Contact. We will make this site center-aligned and give it a basic 3-box layout. That is, we will have a title image up top, nav links to the left, and content to the right. If this doesn't make sense yet don't worry, I have visual examples below.

Just a note, I will be using "design" and "layout" interchangeably in this guide. They both refer to the outward appearance of the website and how it is arranged.

The Home page of our website will have a brief Bio and Introduction for the visitors. It will perhaps have a little portait of the artist so visitors feel like they have a human connection with the website. The Portfolio page will have thumbnail images (small versions of the originals) of each of your drawings. Clicking on a thumbnail will open the full size image in a new browser window. Finally, the Contact page will list your email address, phone number, and other contact information that you want to include.

Design

A good place to start your design is on paper. Create a few sketches of what you may want your site to look like. The sketches don't need to be masterpieces; I usually scribble a design in about 15-30 seconds. Once you have a good idea for your layout, you'll want to move into a graphics program. This isn't absolutely required, but building your website layout in the graphics program first will allow you to set what the final design is going to look like and then work from that.

For the purposes of this guide, I will be providing all needed files and images, so you don't really have to create your own design or artwork yet.

I use Adobe Photoshop to create designs, but a free graphics program will do. Here is an example of a quick design I made for our portfolio website. It's not going to win any awards but it will work. Total time spent on this was about 15 minutes, a lot of which was spent looking for royalty-free stock photography to use.

Click the image to see a full-size version.

Let's examine this design. It uses two main jpg images, a title image and a portrait. It will also use a small gif image that is a light and slightly darker brown, to go behind the text. More on that later. The background is done with a background color specified in the stylesheet that we will be writing soon. Using too many images or too large of images on your site will make loading very slow for people with slow connections such as a modem or basic DSL.

Next we can see that this design is a center-aligned design as I commented on above. What this means it that our design will float in the center of the browser window (horizontally), with an equal margin on both sides. The extra space around the design will be filled with our background color, regardless of the size of the user's browser window and monitor.

An important thing to keep in mind is the width of our website. Not everyone has a 19 inch or larger monitor. This design is 778 pixels wide, meaning it will still look good even on a 15 inch 800 x 600 resolution monitor. Realistically you are safe up to 1000~ pixels wide, since 800 x 600 resolution monitors are very uncommon now. If you do an Internet search for "Most Common Resolution" you can find more information about resolutions and what is safe for websites.

Creating the folders and splicing

Now we are going to create a folder on our computer to house our website. Let's call it firstsite. Create this folder anywhere you want; you can even create it on the desktop. From here on out when I say root directory I am talking about this firstsite folder (folder and directory are also used interchangeably in this guide). Inside our root directory create another folder called media. This will store your images and other media used on the website. Note that the naming of the folder isn't important, and we use media simply because it is descriptive and easy to remember.

Now that our folders (directories) are created, it's time to create the needed files. Go back to your root directory and create two new text files and name them "index.html" and "style.css" (without the quotes). Depending on your Operating System settings it may try to keep the "txt" file extension of these files. If you are having troubles or are not sure, download this index.html and this style.css (right-click save as) and put them in your root directory.

For now don't worry about these files and leave them blank. We are going to create the images from the design we created in the graphics program above. This is usually called "splicing". It's the process of extracting the needed images out of our design. I'm not going to go in depth on this part, but you will want to create two jpg (jpeg) images, one of your title and one of your portrait, in the appropriate size. You will also want to make a gif image to tile the colors behind the text. This is difficult to explain, so if you are unsure how to do this, you can download these images here, here and here (right-click save as). Once you have the images, whether you created them or downloaded them, put them in your media folder.

Writing HTML

We're going to dive right in and work with some HTML. We'll start with a completely basic website. Open your index.html file with a text editor and write (or copy and paste) the code below into it.

<html>
<head>
<title>Jeffrey Smith Photography Portfolio</title>
</head>
<body>

Hello World!

</body>
</html>

After saving your index.html file with the above, drag and drop it into your browser window (or open it from within the browser) and you should be confronted by a completely blank page with the text "Hello World!" in the top left, and "Jeffrey Smith Photography Portfolfio" in the browser title.

Let's take a closer look at this code to get a better understanding. Notice that each tag is surrounded by a pair of greater-than and less-than signs (< and >). These signs denote a tag, also called an html tag (we'll just call them tags for short). Most tags also have a corresponding tag with a forward-slash "/" sign, denoting the end of that tag. Not all tags have this however. I'll break down each line here:

<html> - This line denotes the beginning of an HTML document. It tells the browser that this is indeed an HTML file and it should interpret the text as such.

<head> - This line tells the browser that it is working with header data, such as the title of the page. Header data generally deals with information that isn't displayed directly in the body of the web page. Notice that there is a </head> tag that comes a couple lines down. This denotes the end of the header section.

<title>Jeffrey Smith Photography Portfolio</title> - The text between the <title> and </title> tags is the text the browser will use as the title text, which is displayed in the menu bar of the web browser.

</head> - The ending head tag.

<body> - The text and data between the <body> and </body> tags represents the contents of your web page that is displayed on the screen.

Hello World! - This is some plain text in the body portion of the website. Most of the stuff you will be writing will be going in this area.

</body> - The ending body tag.

</html> - The ending HTML tag. This tells the browser that we are done writing HTML and it will not interpret normally any HTML that comes after this line.

That wasn't so hard, was it? Try experimenting with different body text and title text, to see the changes in your browser window. To do this, after editing the index.html file save it, then use the refresh or reload button in your browser to see your changes (F5 is usually a shortcut for refresh/reload).

The HTML code above respresents a bare minimum web page. There are a few more lines that we will want to include so that our web page conforms to web standards and is read properly by search engines:

You can see that we've added 7 new lines to our above code. Their positioning is important so you may want to rewrite the entire code to get the hang of it.

<!DOCTYPE HTML... - This line tells the browser what type of document this is. In this case, it is an HTML 4.01 document using strict HTML. Don't worry about what this means, just be sure to have it at the top of your HTML page to make sure your web page displays properly in different browsers.

<meta http-equiv... - This line is similar to the DOCTYPE line, and tells the browser what type of content the page contains. Don't worry about its specifics, just make sure you have it in there somewhere between the beginning <head> and ending </head> tags. Remember that the data between these two tags is header data.

<meta name="description"... - This line tells the search engines what description to use for your page. It is generally what is displayed in the search engine results page. If it is blank, most search engines will use the first few lines of text from your site's body. Being header data this should go between the <head> and </head> tags.

<meta name="keywords"... - This line tells the search engines what key words to associate with your website. It is used for search engine results and rankings. Separate each key word with a comma. Being header data this should go between the <head> and </head> tags.

<link rel="stylesheet"... - This line tells the browser to use an external cascading stylesheet. I will go into CSS in a moment, just know that you could include the stylesheet directly in the index.html page, but it is cleaner and better to use an external file (which we have, the style.css file). This is also header data like the meta tags above, and needs to go between the <head> and </head> tags.

<div class="main"> - Here is our first bit of formating we will be doing. The div tag denotes a block or a section in our web page. We gave this div the class of main. This allows us to apply styles to this element from within the stylesheet (more on that in a moment). Notice that this tag does have an ending tag.

Being the astute observer you are, you probably noticed that 5 of these new lines do not have ending tags. That is ok and do not worry about the reason for this.

Writing CSS

Before we dive too deep into the HTML code, let's add some style to our web page. Open up your style.css file and add the following lines:

body
{
background-color: #EBE7D9;
font-family: arial, verdana;
font-size: 13px;
}

Don't panic! This may look nothing like the HTML you just wrote, with the brackets, colons, and semi-colons, but it really is simple. Let's break it down.

body - This represents the element that we are applying styles to. In this example, it is the body tag. The styles we apply below will affect the body of the website. Next we will learn how to apply styles to individual elements, such as a paragraph or the div we created above.

{ - This is an opening bracket, and denotes the beginning of the style information for a certain element. Notice there is also an ending } bracket, denoting the end.

background-color: #EBE7D9 - This is a background-color style, and applies the color EBE7D9 to the background of the body tag. "background-color:" (ending with the colon) is the style, and "#EBE7D9" is the color being applied (the value). The colon is required to denote the end of the style and the beginning of the style's value. EBE7D9 is a hexadecimal color value, and is a light shade of brown. Web pages use the hexadeicaml system for colors. Read about web colors here. Notice that the line ends with a semi-colon. This is required, otherwise the browser will interpret multiple lines together, and they will not function properly.

font-family: arial, verdana; - This line tells the browser to use arial font for the body, and if that font is not available on the user's system use verdana. You can add more fonts (separated by commas) in case the user may not have those fonts. In this case, just about every computer has arial, so we aren't too concerned. You may be tempted to use some flashy font you have found on your system, but try not to. Most users probably won't have it, and it likely won't be very readable.

font-size: 13px; - Hopefully this is self-explanatory. It specifies the font size, in this case 13 pixels. You can use "pt" for the font size as well, and many people prefer that (note that px and pt result in different sizes).

} - The ending bracket.

Now that you have either written or copy and pasted the above code into your otherwise blank style.css file, save it and refresh your browser. You should notice that the background color has changed and the font looks a little different.

Let's add a few more lines, which will describe our layout:

I added a margin: 0; line to the body style. This makes it so the web page hugs the margins of the browser, as opposed to using the default margin. You will see that your text hugs the very upper left corner now, as opposed to being spaced out a little ways.

div.main - Here we are applying styles to an individual element in our web page. The first part div is the type of element, while the second part main is the name we gave that element in the HTML. These two values are separated by a period. Remember the <div class="main"> tag in our HTML? This is where we give some style to that element

width: 778px; - The width attribute in pixels. Hopefully self-explanatory.

background: #D2C8BC url(media/bg.gif) repeat-y; - This is the short-hand version of the background-color line used above. Using this short-hand version, we are able to specify a background color, a background image, and tell it to repeat the background image on the y axis.

border... - The three border lines should also be self-explanatory. If you refer to our design image above, you will see I have a solid black border on the left, bottom, and right sides of our page (don't worry about the solid black border under the title image, we'll do that in a minute). These three lines add those three borders.

margin: auto; - This line tells the browser is to automatically adjust the margins. This has the effect of centering our design in the browser window, since we have specified a fixed width for our page (778px).

Still with me? Good. Try refreshing your page after saving the style.css and index.html files. You should see that your Hello World text is in a box that has a border on three sides. Our web page is coming along nicely!

Writing HTML Continued

Let's write some more HTML. I'm going to put in the place holders for our title, nav, and contents divs and do away with the Hello World line.

This is actually our completed index.html file! Don't feel overwhelmed, I'm going to break down each of our new lines of code, and introduce you to the link and image tags

<div class="title"> - Here we have another div tag, which we have named title. Notice that there is nothing between this tag and its ending tag. Why is that? We could put an image in here using an image tag, but instead will put the image in here using the stylesheet.

<div class="nav"> - Another div tag, this one naved nav. This div contains three links; one to our home page (which is the index.html file), one to the portfolio page, and one to the contact page. Don't worry, we haven't created those other two pages yet.

<a href="index.html"> - Here we have the official HTML link tag. That's it, <a>, they couldn't have made it simpler! An <a> tag denotes a link, which is what users click on to take them places. Notice that there is an ending </a> tag. The text (or images) between the two tags is what users can click on to take them places. The href part of this tag specifies where the link takes them. In this case it is the "index.html" file. This isn't too difficult to understand, just spend a moment looking at the link line and you'll get it.

<br> - Following our link tag we have a break tag (<br>). This tag is a line break, so the browser will go to the next line.

<img src="media/portrait.jpg" class="portrait"> - We're on a roll. Here is the all important image tag used in HTML to display images on screen. The tag <img> does not have an ending tag, you'll notice. The tag in this example also has two attributes. The first is the source of the image: src="". This tells the browser where to pull the image from (notice it is coming from our media folder). The second attritube is another class attribute. We have named this image portrait, which will allow us to apply styles to it from the stylesheet.

<h3> - This is a headline tag. It denotes a headline, such as Welcome, and it can be changed using the stylesheet to use our desired font, text size, etc.

<p> - This is a paragraph tag. We use this around our paragraphs to organize our text. Notice that the text "My name is Jeffrey Smith and I like to take pictures!" is between the two paragraph tags. This denotes a paragraph, and based on our stylesheet we can give it padding, margin, and other attributes.

<p class="copyright"> - A perfect example of a paragraph tag being used in conjuction with a class, so we can apply styles to this paragraphs contents only.

<br clear="all"> - This is a break tag with a special attribute. The clear="all" forces the main div to contain the full height of the divs it contains. Difficult to explain, but just make sure you have that line in there.

Before you move on, take a few moments to look at the structure of the website. Take note of the nesting of the div tags and their corresponding closing tags. The initial <div class="main"> tag isn't ended until the very last </div> tag. All the other divs, links, and text occur inside that div.

Writing CSS Continued

Going back to our stylesheet, I'm going to take a little leap and fill in the rest. Try not to feel overwhelmed, it is just more of what you've already learned. I have applied styles to all of the elements we talked about above. Just remember that you only use a period when you are applying styles to an element you have named.

body
{
background-color: #EBE7D9;
font-family: arial, verdana;
font-size: 13px;
margin: 0;
}

div.main
{
width: 778px;
background:#D2C8BC url(media/bg.gif) repeat-y;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: auto;
}

div.title
{
width: 778px;
height: 104px;
background: url(media/title.jpg) no-repeat;
border-bottom: 1px solid #000000;
}

div.nav
{
width: 130px;
float: left;
font-size: 20px;
padding:15px 0 0 20px;
line-height:32px;
}

div.nav a, div.nav a:visited, div.nav a:hover
{
text-decoration: none;
color: #000000;
}

div.contents
{
width: 588px;
padding: 20px;
float: left;
}

h1
{
font-weight: normal;
font-size: 19px;
margin: 0;
}

img.portrait
{
float: right;
border: 1px solid #000000;
margin-left: 20px;
margin-bottom: 20px;
}

p.copyright
{
margin-top: 40px;
font-size: 12px;
color: #4D4D4D;
}

There is probably a few things that need clearing up. When applying styles to links, you'll see above the line div.nav a, div.nav a:visited, div.nav a:hover. What the heck does this mean? The a refers to a link, but it follows a div.nav. What that does is it only applies styles to the links inside of the div that is named nav. The comma allows us to apply the same set of styles to multiple elements. In this case we are applying the styles to the regular a link, as well as its visited and hover attributes. I realize this may have just gone over your head. Just know that we are applying styles to the links in the nav div, and the same style will be used for links that are not visisted, visited, or have the mouse hovering above them.

Next you may be wondering what the float: left and float: right lines are for. In the case of the div, it tells it to float to a specific side of its containing element. We float both the nav and the contents div to the left, so they sit next to each other (otherwise the contents div would be below the nav div). As for the float: right on the image, that tells it to float to the right of the text, and allows the text to wrap around it.

Finishing up

Now that we have the style.css done, let's add a little more content to the index.html file before we're done:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jeffrey Smith Photography Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="This is Jeffrey Smith's Photography Portfolio website!">
<meta name="keywords" content="jeffrey, smith, photography, portfolio, camera">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="main">

<div class="title"></div>

<div class="nav">
<a href="index.html">Home</a><br>
<a href="portfolio.html">Portfolfio</a><br>
<a href="contact.html">Contact</a><br>
</div>

<div class="contents">

<img src="media/portrait.jpg" class="portrait">

<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non mauris ligula, eu luctus purus. In hac habitasse platea dictumst. Nam id iaculis eros. Morbi et consectetur leo. In mollis scelerisque adipiscing. Aenean ultricies, odio sed semper dignissim, urna est cursus augue, eu consectetur sem mi id lacus. Sed non leo a ligula consequat dapibus quis ac arcu. In purus tortor, porttitor gravida consequat vitae, luctus id libero.</p>

<p>Vivamus ac justo non sem tristique fringilla. In hac habitasse platea dictumst. Vestibulum sit amet quam eu sapien fermentum tristique eu eu tortor. Aenean ac augue volutpat neque fringilla commodo quis mattis. Nullam at libero ut odio semper blandit non non elit. Vivamus ac turpis leo, nec aliquet turpis. Aenean dictum est sit amet est faucibus non ullamcorper risus pharetra. Praesent vestibulum lectus vitae neque ultricies posuere. Quisque ac metus ligula, a blandit ante. Sed vitae nulla nunc.</p>

<h1>About Me</h1>
<p>Fusce placerat malesuada tempus. Suspendisse non orcivel tellus accumsan malesuada viverra id elit. Curabitur tristique, ante in tristique sollicitudin, lectus nisi malesuada sem, cursus imperdiet lacus ante vitae erat. Donec pulvinar risus sed augue volutpat molestie. Nunc at ante arcu. Ut eget metus ac felis elementum laoreet ut ullamcorper odio. Etiam lorem nisl, euismod ac lacinia vel, fringilla vel est. Etiam ullamcorper sodales lobortis. Morbi nisi dolor, lacinia ut vulputate sed, gravida sit amet diam. Sed dignissim consectetur quam, adipiscing lobortis magna sodales vitae. Fusce felis nibh, faucibus vitae facilisis ut, viverra sed nibh. Nam a vulputate nunc. Donec sit amet laoreet neque. Mauris vitae ligula. Sed sodales orci non libero porta sed dictum dolor scelerisque. Curabitur a odio purus, at sollicitudin lacus. Duis et ligula vitae turpis pharetra rutrum ac quis elit.</p>

<p class="copyright">© Jeffrey Smith 2009</p>

</div>

<br clear="all">

</div>

</body>
</html>

You'll see that the only thing I changed here is I added a bunch of gibberish as placeholder text. Feel free to fill this in with your own text. I also added an "About Me" headline. Take some time and experiment with differen things. Try changing some colors or sizes in the stylesheet (style.css). At any time you can save your changes and refresh your browser window.

Create additional pages

Now it's time to create the portfolio and contact pages. Go into your root directoy and duplicate (copy/paste) the index.html file twice. Then rename the two copies to portfolio.html and contact.html respectively. If you are unable to do that, you can find these files here and here (right-click save as); put them in your root directory.

Now that we have these pages, lets edit them. We'll start with the portfolio.html page:

There isn't much different. We removed a lot of the contents, including the portrait image. The main thing you'll notice is that we have 10 images, and that each image is inside of a link tag. This is a good example of using links with images. One other thing you'll see is the target="_blank" attribute of the link tags. This tells the browser to open a new window (or in some cases a new tab) when the user clicks on the link. You can remove this attribute and the images will open in the same window.

Now that you have the portfolio page, you should be able to click on the Portfolio link on your index (home) page, and it will take you to a page with some portfolio pieces.

Oops, I almost forgot! You will need images, otherwise all you will see is a bunch of broken image symbols (or nothing at all). You can find the images I used in this zip file. Just extract the images to the media folder.

Does everything work? Alright! On to the contact page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jeffrey Smith Photography Portfolio - Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="This is Jeffrey Smith's Photography Portfolio website!">
<meta name="keywords" content="jeffrey, smith, photography, portfolio, camera">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="main">

<div class="title"></div>

<div class="nav">
<a href="index.html">Home</a><br>
<a href="portfolio.html">Portfolfio</a><br>
<a href="contact.html">Contact</a><br>
</div>

<div class="contents">

<h1>Contact</h1>

<p>Please contact me at:</p>

<p>Telephone: 123-456-7890</p>

<p>Email: <a href="mailto:jeffreysmith@emaildomain.com">jeffreysmith@emaildomain.com</a></p>

<p class="copyright">© Jeffrey Smith 2009</p>

</div>

<br clear="all">

</div>

</body>
</html>

Not much new here. I added - Contact to the title. For the email link, notice that there is a mailto: line in front of the email address. This tells the browser to open the user's email program when he clicks that link.

Done!

That's right, you're all done! Feel free to visit the complete project here. Hopefully yours turned out the same or better.

Where do you go from here? Anywhere you want. You can try editting lines and seeing what it does. Or make a website for your dog! See below for HTML and CSS resources, as there will undoubtably be questions about certain tags or lines that aren't covered in this guide.

Additional resources

W3Schools - W3Schools is an excellent site for learning all sorts of web-related languages. It covers HTML and CSS, and gives comprehensive tag lists for both.

Guides, Tutorials and How-To's