The 5 min. HTML Course

To start

We regularly have questions about how to make a web site. Contrary to expectations, there is nothing more simple. All you need is a piece of paper. A piece of paper ? Yes. Before doing any coding at all, you must know what you are going to do, otherwise it will take twice as long. So the first thing is really to jot down what you want to put in / on your website. Once you have that, you need to try and see how you are going to structure that information. People don't stay very long on websites, so if they don't find immediately what they are looking for, they will just leave.

If you want to get fancy, you can use a mind mapping tool to produce something like this:

.

Once you have done that, you have the structure of your website. Each main branch is probably going to be an item on the navigation bar. Each sub-branch is going to be either a sub-menu, a subsection, or a page under the main one.

Now that you know how you are going to structure your website, you can start thinking about the visual.
[Top]

Graphic design

Now is the time to start thinking about how your page is going to look like. Not in precise terms, but in functional terms. What does that mean ? It means that what we are interested in are the components of your page, not the details. For example, we just mentioned a navigation bar. That is one element. The second obvious element is the body of your page. As far as I am concerned, that is about all that is really essential, but you can imagine others. For example you can have a zone where you display some kind of logo, or header. Similarly, you may want to have a footer. You can further add a place with additional info, not crucial, but interesting/useful. This stage is called "wireframing" in jargon. Again, you need to have that before starting any kind of coding. Here are some example of wireframes (click to enlarge):


.
When the course was written, this page had the following design (alonside the current one):

I can hear you say: you promised 5 minutes HTML, and we haven't even talked about html yet !. Yes. That's because it is the least important part. But we are getting there.
(By the way, it's HTML5/CSS3 and Internet Explorer below version 9 doesn't understand half of it, so if you want backwards compatibility, you will have to resort to some hacks - which you won't find here).
(But I see you're not using IE - smart move :-) )

[Top]

The basics


Once you have the structure of your website and the graphic design, the only thing left is the coding of the pages itself. For this, we are going to break down the work in 3 steps:
  1. Create an HTML template
  2. Create the CSS
  3. Create the pages

The html template

The purists are going to scream, because I am going to cut corners. That's OK. This is a real primer. An html page is a simple ascii file that starts with <html> and ends with </html>. This is called a "tag".
A simple ascii file, such as produced by vi or notepad, with tags and text in it. The tags will tell the html processor how to display the file. As a general rule, all opened tags must be closed. It is therefore good practice, when you open a tag, to immediately write the corresponding closing tag to avoid forgetting to close it. Most editors do that for you these days, otherwise using an editor that does color syntaxing also helps. On windows Notepad++ does that.
these are the tags you will need (there are not many of them):
This tag:
  • <h1> </h1>

  • <p> </p>
  • <br>

  • <ul> </ul>
  • <ol> </ol>
  • <a href="URL"> </a>
  • <div> </div>
will produce
  • A header (title) of first level.
    Similarly you can have level 2,3 etc.
  • A paragraph
  • This one is not closed.
    A line break
  • A simple (bullet) list
  • A numbered list
  • A reference (anchor)
  • The most important of all: a section

That's it. We are done. You can start writing your page. If you think you need more, you can find it on the w3schools website. But you can check by yourself (ctrl-U) that even the top menu of this page is a simple UL list combined with CSS :-)
Three useful things before you start:
  1. Usually the <html> </html>. section is broken down in two sections: <head> </head>. and <body> </body>.
    The <head> section is reserved for a certain number of "service indications", like where to find the CSS (more on this later), the Javascript (if any), what is the title of the page, etc. The <title> </title>. of the page is just that :-)
  2. The CSS is/are referenced like this:
    <link rel="StyleSheet" type="text/css" href="../common/basic.css">
  3. There is another sign that will help you, and it is the sign that is used to make commentaries.
    <!-- (commentary here) -->
Your basic page therefore looks like this:
<html>
<head>
<title>My HTML page </title>
<link rel="StyleSheet" type="text/css"   href="basic.css">
</head>
 <!-- ******Body****** -->
<body>
<!-- ******section Start****** -->
<div id="start">
<h1> Section 1: the start </h1>
<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie suscipit sapien, eget sagittis tellus porttitor at. Nam vitae mi eget est rutrum convallis. Nullam at nunc magna, quis dictum enim. Suspendisse vehicula lorem quis risus aliquet id pharetra orci cursus. Pellentesque at nisi arcu. Donec ac semper quam. 

</p>
</div >
<!-- ****** End section Start****** -->
</body>
</html>
You will just write all the sections that you have identified in step two, every time identifying them with the correct
<div id="name">
tag. Just place them in sequence on the page: logo, menu, etc. The layout will be done in the CSS file. That is the beauty of the system. In your page, you just identify the different sections, and you put the content. That's all. How this will look will be left to the CSS. That is why it is important to have everything well mapped out on paper before starting to code. Here are two sample pages: Sample01 and Sample02. Click to see what they look like.
If you compare the source code (ctrl-U on firefox or chrome), you will see that they are identical. The only difference is that they use a different CSS. The authoritative website for that is CSS Zen Garden. It really shows the power of CSS. (click on any on right-hand side). My CSS merely swaps the left and right columns, change the background color and the location of the banner, and the background colors of the different sections. Not much :-)

The css

As you may have guessed by now, this is the catch. While html itself is a complete no-brainer (you have the above and the w3school reference - what else do you need?), creating a CSS that does what you want it to do is a bit more tricky. We will use the (very) simple one used in the example above as a start. Once you have grasped the basic principles, go and look on the internet for some other - more advanced CSS tutorial. There are really beautiful things you can do if you take the time. And if you don't have the time, tools like Enjoy CSS will help you get there fast.

Before delving into the code, another word of explanation: I mentionned earlier that you could have several CSS. There are several reasons for that. First of all, most of the websites identify the caracteristics of their visitor, and use a different CSS based on that. The typical example is that if your visitor uses a full-fledge desktop, you will serve the full page, if it is a phone, you could serve a page with just the necessary info, and no or reduced graphics, and no frills to save time and bandwidth. You could have yet another CSS for tablets, which have a bigger screen than a phone, but smaller than a desktop. You can also detect that the user wants to print the page and offer a "printer-ready" version. The possibilities are endless. you would do something like:

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href=" main.css" media="screen and (min-device-width: 800px)" />
<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href=" tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />
<!-- Mobile -->
<link rel="stylesheet" type="text/css" href=" mobile.css" media="only screen and (max-device-width: 480px)" />

Another reason to have several CSS might be that you have a complex website which has common parts across the different devices. If all the menues are the same, you may want to make a file with only the menues and load that on all devices. The idea is of course to have only one file to modify instead of three, reducing the likelyhood of errors. That said, be careful about having too many files, because it will degrade performances. Also note that using a so called "fluid" design will ensure that the same CSS works across devices, albeit differently.

CSS proper

Just like an html file, a CSS file is a simple ascii file. In there, you will describe all the different elements of your html pages, and how you want them to look or react. For example, if you want the header 1 tag that is in the banner section to be extra big, green and on a yellow background, you just redefine it:
div#banner h1 {
  font-size: 3.1em;
  color: Green;
  background-color: yellow;
}

I think it is pretty straightforward, except maybe the em part An em is a unit of size, and it is equal to the size of one standard character on your screen. Working in em ensures that you have a fluid design, since the fact that your banner is 3 times the size of the other letters will always be true, regardless of the size of your screen. On the contrary, if you specify that your banner must be a certain number of pixels, it will either look too small on a high-definition screen or look to big (or worse, outside the screen) on a smaller screen.

This is also valid to describe the boxes that we had on our wireframe:

div#navigation {
  float: left;
  width: 9em;
  padding-top: 2em;  
  padding-right: 1.30em;
  font-size : 0,8em;
}

The navigation section will be located on the left, will be 9 std char wide, start at 2 char from the top, and the font will be slightly smaller. The section that has the journal widget is located on the right: 

div#more {
  margin: -1em;
  padding: 2em 1em 2em 1em;
  float: right;
  width: 12em;
  color: #ffffff;
}
The central section leaves two margins on the sides:
div#content {
  margin-left: 11.1em;
  margin-right: 13.2em;
}

since my first column is 9em wide and my center column leaves a 11.1em margin, it means I have 2.1 char gap between the two. Similarly, on the right side, the column needs 12 char and the central column stops at 13.2, leaving a 1.2 char gap.
Etc. If you have problems with boxes not going exactly where you thought they would, or columns not sitting nicely side by side but flying all over the place, I recommend you color the background to see what the processor understand (using background-color:green ;), like I did in the examples. The wireframes for the examples are:
Example 01:

Example02:

Now you see why it is important to have a clear idea of the design when starting; If you have in front of you the drawing (which can be done with paper and pencil, or as in this case, with a simple drawing tool, paint or Gimp, or whatever), you then simply create the CSS as you go. Then you test and refine. Similarly, to create the mobile (phone) CSS, I started with the following idea:

You will notice the "more" section is gone altogether; that information is not essential. Back to our example. Here are the different screen part (click to enlarge):



You can download the css example 01 or 02

The pages

Quite simple, really. Once you have one page that looks good, use it as a template to create the others. Usually you have the same banner and menu section, the only thing that changes is the content. Once you have tested all the pages on your hard disk, you just have to host them somewhere on the internet. Before going out and buying your own domain, I suggest you use a free hosting site. If you see you like taking care of a website, then you can easily move it somewhere else. Tip: once your website is ready on your hard disk, make a zip file of it. You can then upload the zip file to your host, and unzip it there, it will be faster than uploading each file manually. Here are some free website hosting to get you started: (Jan 2021)

  1. Free Hosting EU (Blog / Site builder, No ads, Free .eu.pn domain)
  2. Wix.com (Easy Website builder: html5, Flash, mobile, blogs, etc.)
  3. Biz.ly (Website & Blog builder, Photo album, Free .biz.ly domain)
  4. FreeHostia.com (PHP, MySQL, 1-click Scripts, No Ads, Free subdomain)
  5. ByetHost.com (PHP, MySQL, PHPbb, SMF, Wiki, Free subdomain)


[Top]