 |
|
| Welcome to {mpk}online |
23 June 2002
|
Firstly, congratulations on your choice to learn HTML "the language of the web". If you just use a "What you see is what you get" without the knowledge of HTML then the pages take a lot longer to load and of course you are limited to the functions of your software. To work through these tutorials all you need is a text editor. Most people use notepad as that comes with Windows. There are many alterative available like Editpad which is much the same but enables you to have multiple files open at the same time. Another good editor is HTML Kit. Both of which and many more are available from download.com Basic HTML structure When you are creating an HTML document you have the following structure <html> This declares what type of document it is <head> This starts our header. Things which are not shown in the main page, but still very useful. </head> Like most HTML tags you need to close the header when your finised. <body></body> Your main content goes in-between these "tags". </html> Declare the end of your HTML page. If we put that together we have: <html><head></head><body></body></html> So the line above would be a "web page". It might not be the most interesting one, but it doesn't have any errors! Now we want to name our page, so let's add a title. This goes in the "head" section of your page. In another tag, called the .... title tag. Ingenious huh? So know we have <html><head><title>My first Web Page</title></head><body></body></html> Just copy and paste that into notepad and save it as "myfirstwebpage.html" load it up in your browser and hey presto, your first page! But where is the title? No it hasn't put a title at the top of the page as you may expect but actually named you page. Look at the top left! Adding content Anything you write between the <body> and </body> will be displayed in the main screen. Try it out! Formatting your text Nice text, but lets jazz it up a little! Try putting <u> before and </u> after the text you want underlined, you can also do this with <b> to get bold text and <i> to get text in italics. When you want to start a new line just put <br> I notice a pattern! Lots of words in triangular brackets!? You got it, that's pretty much what HTML is. It is also possible to nest (combine) these "Tags". For example, you may want some text to be Bold, Underlined and in italics to produce This. To do this it would be <u><i><b>Text</b></i></u> Please note how the tags go together, the first tag to be opened (underline) is the last to be closed and vice versa. Adding color and fonts You are most likely familiar with using fonts in word processing and the amount of difference they can make to a document. In HTML, we also use the font tag to change the size and color of the text. <font face="times" color="red" size="3">This text is size 3 times in red.</font> Would produce: This text is size 3 times in red We come back to this in part two, until then why not try a few other colors? More on colors Though using the name of colors can be very useful it does limit the number of colors you have. Therefore we have "hex" codes. These are just numbers which relate to colors. Don't worry you don't need to learn these, you can get a free program to do it for you, called Reptile available from sausage software The way it works is quite logical. You have 6 numbers the first 2 are saying how much Red the next 2 green and the last 2 blue. But it is not on a scale from 0-9 but on a scale from 0-F! It goes 0-9 then instead of going to 10 it goes to A, through to F to give you a wider range of colors Adding color to you whole page If you want all the text on a page to be the same color (which you probably do) then you can use the body tag. The HTML looks like this: <body bgcolor="#000046" text="#FFFFFF" link="#D296FF" vlink="#C296FF" alink="#C296FF"> Ok the first part you may recognize being body, this is setting the default colors for everything that is inside the body command. bgcolor stands for Background color. Vlink is visited link and alink is active link So now we can make a nice little web page we want to link to other sites. Which is exactly what we cover in stage 2 |
