News
WebList
Tutorial
Software
Links
|
|
|
Contrary to what some people may think, creating your own home page is not very hard at all. All the software you need to get up and running can be found in the Software section of this site, and all the skill you need (which is not very much) can be found right here, at the Tutorial.
Well, to get started, fire up the HTML editor of your choice, or just Notepad, and also have your friendly web browser running at the same time also. This allows you to open up your web page in the browser, and watch how your web page is looking as you create it. Then to refresh the view of your web page, all you have to do is save it, and press Reload in your browser.
Now, getting down to the basics of any web page. Every web page is written in a special code, called HTML, and then when that web page is opened up in a browser, the browser interprets that code and displays the web page in its viewing window. The code, HTML, is based on small definition blocks called tags. A tag looks like this:
<TAGNAME>The text to be affected by the tag goes here.</TAGNAME>
As you can see, the tag is initiated by the <TAGNAME> code, and cut off by the </TAGNAME> code. Any text in between these two statements are affected according to what type of tag it is. For example, the bold tag is <B>, so I wrote <B>Welcome to my homepage.</B> into my HTML document, when displayed in a web browser, the words 'Welcome to my homepage.' would be bold.
However, not all tags need to be cut off with a </TAGNAME> piece of code. For example, the line feed tag, which ends text for the current line and goes to the next line, is <BR>. If I wrote this in my HTML document, The cat<BR>sat on the mat, it would appear like this:
The cat
Now that we know how tags work, I'll show you the basic structure of a web page. The foundation of a web page is made up of a set of tags, enclosed in the <HTML></HTML> tag. Here is what the foundation looks like in HTML.
<HTML>
</BODY>
Enclosed in the <HEAD></HEAD> tag is the definition of the web page. Here you can put the title of your web page (using the <TITLE> tag). Inside the <BODY></BODY> tag is the main part of your document. Anything written here will appear on your web page, bar more than one space and carriage returns (hitting the enter key). This is where most of your designing will take place. For an example of what a fully developed web page looks like, right-click on this web page and click View Source on the pop-up menu.
Now that you have the knowledge to make a simple web page, go ahead and try. Write some text in the <BODY></BODY> tag. Save your file as *.html and open it up in your web browser.
Now you are ready to learn some simple text formatting tags, including the bold one you learnt before.
Well, both the italic and underline tags are quite self-explanatory (any text between them is either made italic or underlined), and I've already told you about the line break tag, but I'd better explain the paragraph break. When you put the <P> tag into your document, it ends the line and skips a line before starting a new line. It is useful for starting new paragraphs, and spacing your web page out a little. I used it in this web page to separate the paragraphs.
Some tags include certain attributes, or properties, that change the way that certain tag affects you HTML document. One such tag is the <FONT> tag. Here are a list of its attributes.
SIZE - This attribute determines the size of the text within the font tag.
The attributes of a certain tag are typed inside the starting block of that tag. For example, if I wanted to make the words Grimace Network as size 4, colour red and font Times New Roman, I would simply write the following into my HTML document:
<FONT SIZE=4 COLOR=RED FACE="Times New Roman">Grimace Network</FONT>
It would than appear in a browser like this:
Grimace Network
In addition to these tags that I have shown you for dressing up the text in your web page, there are also a few others. For instance, the <PRE> tag allows the browser to pick up spaces and carriage returns. In a normal section of a web page, you have to use <BR> and <P> tags to get the look you want. But any text that is enclosed in the <PRE> and </PRE> tags will have its spaces and carriage returns automatically recognised by the browser. Unfortunately, the downside to having preformatted text is that it comes out in an ugly typewriter font like this.
Another very widely used set of tags are the heading tags. The heading tags are numbered, from <H1> to <H6>, 1 being the largest heading and 6 being the tiniest. The heading tags are really only an easy alternative to using the <FONT> tag with the SIZE attribute.
Almost every web page I have ever seen uses horizontal lines of some kind to separate the text into sections and add aesthetic quality. The red line under the title of this page is a type of horizontal break. The <HR> tag provides a simple 3D horizontal line in your web page, and is good for breaking the text up, so that it doesn't become so monotonous. Here is a typical horizontal break.
Now that we have learnt how to add text, in many forms, to your web page, we can add something interactive. Its time to add hyperlinks, those little coloured underlined words that made the Internet the Internet. Hyperlinks allow visitors to your page to adjoining pages, or other sites around the world with one click. The basic tag for a link is <A>, but one attribute is required to complete the link.
HREF - This is the address of the page that your link connects the visitor to.
Therefore, a hyperlink to a web page named johnpage.html would look like <A HREF="johnpage.html">My Link</A>. And in a browser it would look like My Link. However, if you wanted to link to an external site such as www.microsoft.com, the HTML would look like <A HREF="http://www.microsoft.com">My Link</A>.
Okay, now that we have got past the boring part, we can get to the good bit: images. Images are all over web pages these days; this page is full of them. The image tag, <IMG>, is similar to the hyperlink tag, in that it needs an attribute to work properly.
SRC - The location of the image file to be displayed
So to put the image johnpic.jpg in your web page, the HTML would be <IMG SRC="johnpic.jpg">. Similarly to the link tag, an image on a remote site, say Microsoft again, would be something like <IMG SRC="http://www.microsoft.com/johnpic.jpg">. Also, an image can double as a hyperlink if it is enclosed in the link tag.
As you probably know, a fair amount of people aren't as lucky as the majority of us and have all the latest browser software. Some browsers do not support images, and if your web page is mostly made up of pictures , it will be incoherent to them. Unless you use the image tag's ALT attribute, that is. The value in the ALT attribute is a description or text equivalent of the picture, for those with older browsers.
This information should have provided you with enough to get up and running with HTML and making your own web page. In upcoming months I will be posting special features for those who wish to delve deeper into the subject. Thankyou for reading. Please mail me and tell you what you think.
sat on the mat
<HEAD>
</HEAD>
<BODY>
</HTML>
Description
Tag
Bold
<B></B>
Italic
<I></I>
Underline
<U></U>
Line Break
<BR>
Paragraph Break
<P>
COLOR - This tells the browser what colour to make the enclosed text.
FACE - This governs what font the enclosed text will be.
guestbook server.
