Wickham's HTML & CSS tutorial

A basic webpage

A tutorial for people wanting to move on from tables to CSS or to progress from using coding programs.

Code a simple page

See the result you will achieve after a little effort here.

Open Notepad and copy and paste the following code:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="keywords" content="Wickham, HTML, CSS, tutorial">
<meta name="description" content="Elementary HTML and CSS examples">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>A basic webpage</title>
<style type="text/css"></style>
</head>
<body>

<h1>Some bird photos</h1>
<p>The photo below is of a Little Egret</p>
<p><img src="littleegret.jpg" alt="Little Egret"></p>
<p><a href="http://www.birdforum.net">Bird Forum website</a></p>
</body>
</html>

Save as basicpage.html using Save As (not just Save) - make sure you do NOT save as a text document with "Save as type ... Text Documents (*.txt)"; you should see an alternative in a drop down menu All Files (*.*) use that and then your file will be saved with the .html extension if you include it in the filename. Check that your file hasn't been saved with both extensions like basicpage.html.txt which would happen if you saved as a text document. Also save with encoding ANSI. The second time you save the file (after editing, for instance) you should be able to use just Save in the Notepad menu as it will have already recorded your page as a html file.

You won't see the image unless you save the image lower down this page or change the filename within the <img src=" " tag to one of your own images. Put the image file in the same folder as the html file.

Double click the filename in your file list or desktop and the file will show the page in your browser. (Note: if saved without .html it will be given the default .txt file extension and only open in Notepad.) If you want to edit the code instead of looking at the page in your browser, right-click the filename in your file list and click "Open with...Notepad".

The code above shows a heading, a text paragraph, an image and a hyperlink (a clickable link to another page, either internal or external).

A webpage includes three main sections:-
1. The Doctype which tells a browser which coding standards to follow.
2. A head section which includes general instructions to the browser.
3. A body section which includes your page content.
The head and body are enclosed in html tags to define the type of the code.

The code above is very basic; all styles, etc. will be given the default styles by whichever browser is being used. The application of styles can be within the element tag in the body, within style tags in the head or in a separate stylesheet. See General Advice for stylesheet advice and add a simple stylesheet as outlined below.

The head section should include at least these basic codes:-
<meta name="keywords" content="..."> insert words for a search engine to latch onto, separated by commas.
<meta name="description" content="..."> insert what you want a search engine to display with link to your page.
<title>...</title> insert what you want shown in someone's browser window at the very top in the blue banner.
<meta http-equiv="content-type" content="text/html; charset=utf-8"> or another character code. Note that charset=utf-8 is more strict than charset=iso-8859-1 and a validator may show errors unless you use the character codes for many symbols like & or £ (the codes are shown here).
<style type="text/css"></style> and also style codes inside these tags if not included in a separate style sheet.

Use h1 to h6 tags for headings. The browser provides default sizing for each based on the webpage font size. Insert <h1> at the beginning and </h1> at the end of headings; similarly for h2 to h6.

Text normally starts with <p> and ends with </p>. The tag starts a new line and causes a new line after it, usually with some default top and bottom margin or padding provided by the browser. If you want just an intermediate line break with normal line spacing use <br> within text.

The image tag includes the image filename within <img src=" " and a description of the image within alt=" " before the closing tag >. The alt description is required so that if the image is unavailable the viewer can see what it is supposed to show.

Hyperlinks

The hyperlink tag includes the url of the target page within <a href=" ">. The text following is the text that appears in the finished page, usually in color and underlined by default so that it is clearly a link. The closing tag </a> follows, like this:-
<a href="filename.html">Link description</a>

If the target page is an external file the full address is required including http:// (and www. if applicable).
Links to an html file in the same folder can be simply inserted between the tags as filename.html .
If the file is in a different folder (often called a directory when related to your host's server) the code is more complicated. For every movement to a folder/directory at a lower level add the folder name and / before the filename (but not when accessing a filename in the same folder); for every movement up add ../
Consider the following folder arrangement:-
folder1------->folder2------>folder3
folder1------->folder4 .......so folder1 has another folder4 in it as well as folder2.
Assume your html file is in folder2.
If the target file is in folder3 - directly below folder2 - the link code has to go directly down so the link will be:-
<a href="folder3/filename.html">Link</a>
If the target file is in folder1 - directly above folder2 - the link code has to go directly up so the link will be:-
<a href="../filename.html">Link</a>
If you need to go up two folders/directories the code would be:-
<a href="../../filename.html">Link</a>
If the target file is in folder4 the route is up to folder1 then down to folder4; the link code will be:-
<a href="../folder4/filename.html">Link</a>

There is an additional link code called the root-relative link. This is used to target the root directory of a website. The hyperlink code might be repeated in many pages, some of which might be in the same root directory and some might be in sub-directories but the same code will always go back to the root directory to find the file or folder. Remember to add in any sub-directory names into the link from the root directory (if any). See Motive Glossary which gives the code:-
<a href ="/index.php">Motive homepage</a>
which has just a single / in front of the file name or in front of a sub-folder/sub-directory name like
<a href ="/images/photo1.jpg">Photo 1</a> .
I have found that this only works online, it's inconvenient to use because when you check a page on your computer the link goes back to the computer's root directory which is C:\ and it probably won't find the file in there.

Add a Style Sheet

Add this in your head section of the file basicpage.html (right-click the filename in your file list and click "Open with...Notepad" to edit the file):-

Now open a new Notepad window, copy the code below and save as stylebasic.css in the same folder as the html file (with Save as Type: Text Documents {*.txt} and Encoding ANSI ). Although the type is .txt make sure that the file has not been saved as stylebasic.css.txt as it should only be stylebasic.css if that is what you typed in the File Name window. Delete the extra .txt extension if you see it:-

body { font-family: arial, monospace; line-height: 1.1; color: #556b2f; font-size: small; margin: 20px; background-color: #f5f5dc; }
h1 { font-weight: bold; text-align: center; color: #b8806b; background-color: #f5f5dc; }
img { border: 6px double #cccccc; }
p { text-align: center; }
/*Add invisible notes in the stylesheet within these start and end tags*/

Note that stylesheets use curly brackets and note that the body has a default margin all round of 8px in all browsers (it looks about 18px at the top and bottom in IE because of the scrollbar top and bottom arrows). Add margin: 0; to the body style if you don't want this default space.

Your page should now look like this (first save my image or substitute your own image filename within the <img src=" " tag and put the image in the same folder as the html file):-

Some bird photos

The photo below is of a Little Egret

Little Egret

Bird Forum website

If you look at the source code of my page, do not expect the code to be the same as I described for the example above. I had to counteract the styles in my own stylesheet so I had to repeat the stylebasic.css codes in the html tags to enable it to display as it would if coded on its own in empty Notepad files.

The above tutorial shows how to view the webpage locally on your computer. You then need to upload the files to your hosting service; see Hosting.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev | next