Create Your Home Page
Before you can create your first webpage, you should have chosen an HTML Editor, and possibly found a template or inspirational page you'd like to use as a basis.
The Page Header
Open your chosen template file in whichever HTML editor you've chosen. You can use index-4.htm if you like.
The first few lines contain some standard stuff that should be at the top of all your web pages. The first line defines what sort of document this is, and what standards it complies with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The next line begins the html document, and the document header. Notice how these tags (and the <body> tag) define the different sections of the page:
<html><head>
This one defines the content type (text and html using the character set defined by standard iso-8859-1):
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
The title tag defines the title of the document - This is important - it appears as the title line in search engine results: e.g.
<title>The Webmaster's Bureau - Home Page</title>
Change the title of the document to your own title - it's your Home Page. Just change the text between the <title> and </title> tags!
Tags that start like this: '<!-- ' are comments - you can write anything you like in here and the browser will ignore it.
It's good practise to explain what the current bit of code is for (and how it works) in a comment just before the code! The examples have lots of comments in them explaining what the tags are and what they do. Once you understand HTML a bit better you can delete them, or replace them with more meaningful comments, if you like. |
Click on Arachnophilia's 'Preview' button (the furthest right on the toolbar - it looks like a paint palette!) to see what the web page looks like. It should now have your title at the top!
|
TIP: If you're not using an HTML editor with a preview function, you'll have to open your files in BOTH the text editor and the browser. You'll then save changes in the editor, and then click on the browser's 'Refresh' button to see the changes you made. |
Change the META tags that come next as follows:
- The KEYWORDS tag: Put the keywords you decided on here. The keywords determine how your page is indexed by search engines. See the page on Keywords.
- The DESCRIPTION tag: Put the description of your website here. This is the description that appears in the search engine results.
- The AUTHOR tag: Put your name here (optional).
You've probably seen that some websites offer 'free meta-tag creation tools'. All these tools do is edit the contents of these tags - which you can do so easily by hand. When you use these tools, they still require you to actually come up with the keywords etc.yourself - and that's the most difficult part!
If your pages are in a private members area where search engine spiders can't go, there's less point in setting the keywords and description meta tags.
Style Settings
The next part of the header defines the style information for the page. See the page on HTML for a description of cascading style sheets.
To start with - it's probably best to put all your style info in the head section of this first document. This is embedded style info. You should refer to the CSS documentation you downloaded for definitive info on what you can set. You can use my examples to cut and paste code from.
For a great quick tutorial in the basics of HTML and CSS read this HTML 4.0 Tutorial
Get used to creating style info for the elements you use in your webpages. You'll soon discover that the separation of style and content is quite logical and practical.
Next, the </head> tag ends the header definition for this document. The next tag is the <body> tag.
The Page Body
The body tag contains a number of attributes you can set for the document as a whole: the background color, background image, the margin sizes etc... For a complete list of the attributes you can set for any tag, refer to either the guides listed in the HTML page.
The body is the main part of the HTML document. This is where you actually add the content to your first web page... This is your 'home page' or 'index' page - so it needs to tell your visitors what there is on your site, and how to find it.
All your pages will need some type of navigation bar, and this is dealt with in the next module.
The first task you can do is replace the example logo with your own. Edit the image tag to change the image displayed and its size. Then preview it (by clicking on the preview button) to see if it looks OK.
If something doesn't work the way you anticipated, be patient, try different things out until you get the result you require and feel comfortable with how the tags work.
Programming - even for professionals - involves a lot of trial and error. You WILL have to just try options out by changing the code and re-running the preview... You may have to do this many times until you get the result you want.
After your logo is in place - it's really up to you what to do next. Your home page could have a number of different features, all your choice:
- A description of the site - it's aims.
- Detailed descriptions of the other pages / areas of the site.
- Site news / changes.
- Product info / sales copy (especially if this is a 'mini-website')
- A site search facility.
- Adverts
The index.html example - contains extra comments explaining what each of the tags is doing. These comments aren't in all the files as it would be too cluttered. Once you know what the main tags are, and what attributes they can take, you'll find HTML quite easy to write.
Tables are used extensively in HTML. They allow for great flexibility in positioning items in the page. As previously explained, tables are built up sequentially, row-by-row, column-by-column. Read the code. If it's not clear to you how tables work, try experimenting with building your own tables until you understand them - it's quite intuitive when you get the hang of it.
You'll see examples of the following tags:
<font> - Set the current font, size and colour.
<div> - define a division (or paragraph) in the text - allows for justification (left, right, center)
<p> - a paragraph.
<ul> <li> - Unordered List and List Item. The Ordered List tag <ol> allows you to create numbered lists. You can nest lists - one inside the other.
<img> - an image. The image tag is unusual because it has no closing tag </image> because it does't require it.
<a> - a hyperLink
<br> - line break (Carriage Return)
<pre> - The text contained by this tag is pre-formatted.
<table> - Tables are the way you'll create your pages' layout.
Mastering this basic set of tags, with tables, will enable you to build fully functional webpages.
Using the examples provided, any templates you may have found, and the 'inspirational' webpages you downloaded during the last lesson, create your home page. This page is also going to be used as a template for all your other web pages.
- Replace the example text in the body of your home page with the your own content.
- Format the text as you desire using HTML tags.
- Replace the example logos with your own. Add your own graphics.
- Change the layout and colors as you desire. Using the code that's already there as an example, you can cut and paste bits to do whatever you want, wherever you want. If you want to add new images, for example, copy the
<img... tag, and change it's attributes so it shows your image file, at the size you choose etc...
|
|
