Setting up your own web pages, may not be the simplest thing in the world to do. But, then again, it isn't exactly the most difficult thing in the world to do either. And, of course, there are several, easier ways in which it can be done.
WARNING!The following information will result in a basic homepage, which you may upload to your host server, for display on the WWW. It is not intended as an advanced tutorial. Once you get started though, and have taken note of what happens when you change certain "tags" you may want to have search the web for more HTML resources.
Hire somebody else to do it for you!
By far the easiest way out. And potentially, provided you use someone who will care as much about your homepages, as they do about their own, yields the most "professional homepages".
Buy Software, or download "Shareware" that will, with input from yourself, do it for you!
Fairly new to the market. Bought software may cost you more than hiring a professional service, and shareware is often limited.
Learn to do it yourself!
Learning to use HTML (Hyper Text Markup Language), the tags used to cause certain information and bitmaps to display in a pre-arranged manner, requires an ability to withstand a certain amount of frustration, and patience! Having said that, I'll try to make it a little easier, by taking you through the steps necessary to produce a simple page. Thereafter, it is up to you to decide whether you are going to follow the "do-it-yourself" route, or obtain software/hire a professional.
HTML Tags that you MUST know!
Theoretically every page that contains the following tags will display if loaded in a browser.
<HTML><HEAD><TITLE>My First Web Page</TITLE></HEAD>
<BODY>Loads and loads of useful information, and my own artwork!</BODY></HTML>
Click here to see what the above example looks like.
(Use BACK function.... We know, we know!!!)
Note! You can use either upper or lower case, or combinations of both: Thus <HTML> = <html> = <htML> = <htmL>!
A bit on the drab side, but heck, what do you know, it works! Next, we'll expand a bit... But first an explanation of the above tags
<HTML> </HTML> - Tells the browser that this page is an HTML document! And where it finishes - Use at the beginning and end of HTML documents.
<HEAD> </HEAD> - The header information, causing the display of the Page Title, and may contain other information, not visible to the viewer, eg: META tags, which we'll leave for a later session!
<TITLE> </TITLE> - The Title of the page, contained within the <HEAD> </HEAD> tags.
<BODY> </BODY> - Shows where the BODY of information starts and finishes. In the body we can have text and images, and the <BODY> tag can contain a number of attributes: bgcolor, which forces the page to display with your chosen background colour. eg: <BODY bgcolor=BLACK"> or <BODY bgcolor=000000"> will yield this Example (BACK button....)
Note! Certain colour names are recognised by browsers. To be on the safe side I suggest you use HEX code to denote colours.
Oops! What happened? We forgot to change the text colour, and the default text colour is black, so let's change the text colour: <BODY bgcolor=000000" text="FFFFFF">. Ok! Now have a look: Example.
In the same manner we can specify a background image (background="image_name.gif"). For instance this page has a blue background with a pillar down the one side. If we add it's location to <BODY bgcolor=000000" text="FFFFFF" background="../graphics/art_bk04.gif"> then we get the following Example
<CENTER> </CENTER>, which causes information to be displayed in the horizontal center of the page. Example
Next on the list, text elements: BOLD, italics, which respectively look like this:
There are many more, but the above two will allow for the formatting of most text. Advanced HTML tutorials elsewhere on the web, give full lists of tags.
- Finally: Inserting an image on the page: If we want the "masthead" of this page to display then we will insert it's URL. In this case the following: <IMG SRC="../graphics/art_002.gif"> - inserting this in MY SAMPLE will make it look like this: Example
The following topics, aimed at clients of Ikhaya Design, may help to give a greater understanding of the complete "design" process:
What is a web presence / site?
What does it involve?
The Ikhaya Design philosophy
For more information, I suggest you have a look at the World Wide Web Consortium's Website. (Contains comprehensive information on HTML, specifications, forms, SMGL, cgi, cern, HTTP, etc. And don't worry, they also explain the terms!)