The Son of How to Make a Website

This is the bigger, and better version of How To Make A Website For Beginners. Unlike the previous version this will include CSS and utilize other markup tags such as the Unordered List and the Div, making it more like a real website. We will also explore setting up a working environment to help keep files organized.

Setting up your work environment is completely a matter of personal preference so I will only make a few suggestions here. It is definitely something you should take under consideration especially if you plan on making several web sites. Having a system of organization can save time and disk space, a place for everything and everything in its place.

I use two main folders, Web and Dev. These two folders have identical sets of sub-folders. I usually pick a name for each project and have a folder for it in both Web and Dev. The Dev folders have the source documents, Photoshop files, original un-cropped photos, Word docs with copy, etc… . The Web folders have the deliverable files, the files that are my client’s web sites, the project files that get posted live.

The first thing you will need to do in order to make a website is to make yourself a Web and a Dev directory. They can be anywhere, in My Documents, the Desktop, or in the root of your C drive. In each of these new folders make another called project1.

|–Web
| |–project1
| | |–css
| | |–images
| | |–js
| |
|–Dev
| |–project1
| |

Next we need to pay a little more attention to the Web/project1 folder, it is going to need a few sub-folders as well. In your Web/project1 folder make three new folders named images, css, and js.

Your file directory should look something like the image to the left. You can obviously name these folders whatever you want, uppercase lowercase whatever, this is just an example that I will attempt to keep consistent.

That’s it. You are all set up.

HTML
HTML first appeared in the early 80s in a paper by a guy named Sir Tim Berners-Lee. It was a system for researchers to exchange and modify documents. By 1989 it had developed into the hypertext system we are familiar with today and in 1990 the Internet was born when the WorldWideWeb (W3) project was accepted by CERN, The European Organization for Nuclear Research. The project was first called Enquire.

The structure of an HTML document is for the most part straight forward though there are a couple of parts that we will not be using now such as the Doctype which deals with technical details beyond the scope of this series.

Create a new text document. I do not recommend using MS Word because I don’t like the way it interprets HTML, it adds stuff, a lot of stuff. Dreamweaver is great but it costs $800 and I don’t expect anyone reading this to have it so, how about text pad or notepad.

Open your text file and type in the following;

<html>
<head>
  <title>How To Make A Website</title>
</head>
<body>

<div>

  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

  <div>
    <h1>Welcome To My Website</h1>
    <h2>This is the home page</h2>
    <p>Please change this text to something useful</p>
    Thank you,<br />
    The Management
  </div>

</div>

</body>
</html>

Now save this document as index.html in your Web/project1 folder.

Open up a web browser. Open up an Explorer window and go to your Web/project1 folder. Drag and Drop index.html onto your browser. There you have it, the homepage… sort of. We’re not done yet but you have the basics that make up a page.

Lets review a few things so you have a better understanding of the HTML syntax.

An HTML document is made up of tags. A tag resides in less-than greater-than brackets like so <the tag>. Notice in the code above that each <tag> has a complimentary </tag> such as <html> and </html>, <p> and </p>. The one with the forward slash signifies the end of the “tagged” content. So everything inbetween the <html> and the </html> is the HTML document… duh. Inbetween <head> and </head> is the … header, <p> a paragraph </p>, <div> a div </div>, etc… Notice also that certain tags live inside other tags, the <title></title> lives inside the <head></head>, and everything of course lives inside <html></html>. Some tags do not require an end tag however, html standards require that you put a forward slash at the end of these tags. For example a line break tag is <br /> and a horizontal rule tag is <hr />.

<html> : This defines the document as an html document, aside from the filename extension. When a browser sees this it knows what to do. Other types of documents a browser knows are PHP which starts with <?, and ASP which starts with <%. You can put PHP in an HTML document and HTML in a PHP so you have to define the document so the browser and server know what’s what. The two sections that live inside the <html></html> block are the <head> and the <body>.

<head> : Many things can go in the header of an HTML document. The header is a reserved area for things that define the document such as the title(below) meta tags and things that the document uses behind the scenes such as Java Scripts and Styles. More on these later.

<title> : The Title lives inside the <head></head> block. The Title is what is displayed at the very tippy top of the browser. It is also what is displayed at Google and the other search engines. Very important.

<body> : This is where the actual content of the page begins. The remaining tags live inside the the <body></body> block.

<div> : A div is what you call a block element. OK, it’s a box you put stuff in. By default it produces a line break and some top and bottom margin but this and much more can be controlled with styles (next article).

<ul> <li> : ul = unordered list. li = list item. The unordered list will output a bullet list with top, bottom, and left margins. Another variation is the Ordered List or <ol>. Instead of bullets there will be numbers or letters, whichever you specify. The List Item, <li>, is the bullet points or numbered items.

<h1> <h2> : h1 = header1, h2 = header2. Header tags define font size. They also define a hierarchy of importance for the data that follows them. H1 is the biggest and displays text at about 32 pixels, H2 is next at 24 pixels, H3 is 18px, H4 is 16px, H5 12px, H6 10px. Header tags also produce a line break and top and bottom margins.

<p> : This is a paragraph. It produces a paragraph break automatically.

<br /> : This is a line break

<hr /> : This is a horizontal Rule(line)

There are plenty of modifiers you can use to enhance these tags however most of the direct, old-school tag modifiers are becoming obsolete in the shadow of CSS.

Cascading Style Sheets or just CSS are what we use to “style” the content of our HTML documents. Stylesheets have been around in some form or another since the beginning but were standardized in the 90s after a show-down between 9 different versions. Cascading Style Sheets get their name because a style can inherit or “cascade” from another. Styles are applied to HTML elements such as the <body> and <div> tag. When a tag is nested within another it inherits it’s parent’s styles.

CSS syntax consists of a property, a colon (:), a value, then a semi-colon (;) as follows…

font-size:12px; font-weight:bold;

Styles are applied to page elements in three ways. The first way is called an inline style; this is where the style is applied directly to the HTML element using the “style” tag modifier.

<body style="margin:0px;">
  <div style="font-size:12px; font-weight:bold;" >
    How To Make A Website
  </div>

The second way is to add a <style></style> statement to the <head> of the HTML document.

In the <head> section, under the <title>How To Make A Website</title>, add the following…

<style type="text/css">
body {
  margin:30px;
  background-color:#999;
  font:12px Arial, Helvetica, sans-serif;
  color:#000;
}
a:link, a:visited {
  color:#000099;
  text-decoration:none;
}
a:hover {
  color:#cc0000;
  text-decoration:none;
}
#wrapper {
  position:relative;
  top:0px;
  left:0px;
  margin:auto;
  width:800px;
  background-color:#fff;
  border:1px solid #333;
}
#wrapper div {
  padding:20px;
}
#menu {
  width:100%;
  height:44px;
  margin:0px;
  padding:0px;
  background-color:#ccc;
  font-size:11px;
  font-weight:bold;
  text-transform:uppercase;
}
#menu li {
  padding:0px 10px;
  float:left;
  height:46px;
  margin:0px;
  list-style-type:none;
}
#menu li a {
  display:block;
  padding:15px;
  color:#fff;
}
#menu li a:hover {
  background-color:#999;
}
h1 {
  font:bold 24px Georgia, Times, serif;
  color:#109388;
  margin:0px 0px 18px 0px;
  line-height:normal
}
h2 {
  font:normal 16px Georgia, Times, serif;
  color:#000;
  margin:10px 0px;
}
</style>

Once we’ve inserted the above code, editing the HTML is quite easy…

Just under the <body> tag in our working document you will see a <div> and a <ul>. Add the following id modifiers to them.

<div id="wrapper">

<ul id="menu">

Check it out.

Styles can be assigned to any tag such as the body, links (anchors or links) , h1, and h2. They are assigned to these tags as a class (.) or an id (#).

We list the style with a pound sign(#) and call it using an id if it occurs only once on the page.

We list the style with a period(.) and call it using a class if it will occur more than once on the page. You can use a class if the style only occurs once as well but usually people prefer the id in these cases.

Lets remove our styles and put them in a separate file. This file will have a .css extension. To do this we simply take out just the styles, everything BUT the <style> and the </style> tags and put them in a separate file.

Sticking with our directory structure we set up, save this file as style.css in Web/project1/css.

Next replace the entire <style> </style> block on your HTML page with the following…

<link rel=stylesheet href="css/style.css" type="text/css" />

This a link to the stylesheet you just created.

Your Web directory should now have two files. The HTML, which should be in your Web/project1 folder. And the CSS, which should be in your Web/project1/css folder.

Now lets add an image, create the rest of the pages, make a few tweaks and we’ll be done for now.

To make the other pages just copy the HTML code from index.html and paste it into three new files. Save them as gallery.html, about.html, and contact.html. Fill in all the correct URLs in the menu section of each page. While doing this add a class=”cp” to the menu link of the current page (cp for Current Page). In other words, on contact.html, in the menu, in the link to contact.html, add the class=”cp”.

<a href="contact.html" class="cp">Contact</a>

The class=”cp” will corresponds to a new style we will add right now.

Go to your stylesheet and add this style…

#menu li a.cp {
  background-color:#bbb;
}

Now lets add an image. I made one that is 800 pixels wide and 116 or so pixels high and just slapped it on top of the menu. The #wrapper style takes care of centering it and the 0 margin on the menu top will see to it that they are flush together. Click the thumbnail below then save it into your images folder.

buildyourownwebsite-top

On every page add the following code directly above the menu…

<img src="images/top.jpg">

That should do it. I know it’s a lot to take in if you’re just starting out and there’s not a lot of explanation but, I have always found it easier to process things when I have a complete subject to study.

In review, your HTML pages should look like this…

<html>
<head>
  <title>How To Make A Website</title>
  <link rel=stylesheet href="css/style.css" type="text/css" />
</head>
<body>

<div id="wrapper">

  <img src="images/top.jpg">
  <ul id="menu">
    <li><a href="index.html" class="cp">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>

  <div>
    <h1>Welcome To My Website</h1>
    <h2>This is the home page</h2>
    <p>Please change this text to something useful</p>
    Thank you,<br />
    The Management
  </div>

</div>

</body>
</html>

For each of the 4 pages the <h1>Page Title</h1> should be different (About, Gallery, Contact) and the class=”cp” will be in the link of the current page.

Your stylesheet should look like this…

<style type="text/css">
body {
  margin:30px;
  background-color:#999;
  font:12px Arial, Helvetica, sans-serif;
  color:#000;
}
a:link, a:visited {
  color:#000099;
  text-decoration:none;
}
a:hover {
  color:#cc0000;
  text-decoration:none;
}
#wrapper {
  position:relative;
  top:0px;
  left:0px;
  margin:auto;
  width:800px;
  background-color:#fff;
  border:1px solid #333;
}
#wrapper div {
  padding:20px;
}
#menu {
  width:100%;
  height:44px;
  margin:0px;
  padding:0px;
  background-color:#ccc;
  font-size:11px;
  font-weight:bold;
  text-transform:uppercase;
}
#menu li {
  padding:0px 10px;
  float:left;
  height:46px;
  margin:0px;
  list-style-type:none;
}
#menu li a {
  display:block;
  padding:15px;
  color:#fff;
}
#menu li a:hover {
  background-color:#999;
}
#menu li a.cp {
  background-color:#bbb;
}

h1 {
  font:bold 24px Georgia, Times, serif;
  color:#109388;
  margin:0px 0px 18px 0px;
  line-height:normal
}
h2 {
  font:normal 16px Georgia, Times, serif;
  color:#000;
  margin:10px 0px;
}
</style>

To test, just drag and drop index.html into your favorite browser. That’s basically how to make a website. Next I’ll discuss adding a form to the contact page which will involve JavaScript and more styles.

Leave a Reply

Your email address will not be published. Required fields are marked *