|
|
11. maaliskuuta
|
|
 |
 |
 |
|
|
Introduction
Right, so now you have the basics of your website (from the Getting Started section) it time to put something onto your website. I am going to show you how to put text, images, links and a few other basics items onto your site. (Everything in this tutorial is going to be set inbetween your body tags)
Text
If you want you can just type your text directly between your body tags e.g.: <body> YOUR TEXT </body> This just produces the default values for everything (a white background, size 12, Times New Roman font in black) with the words YOUR TEXT. Bit boring really so why not edit your text a bit? Well, as pretty much everything else in HTML it is going to involve tags, put two tags around your text (<font> & </font>). (Whenever you edit something in HTML you will put the editing code in the first tag).
- Right, lets edit the font style, add face="arial" to your tag e.g. <font face="arial">, changing arial to whatever font you want to use. Please be aware that the fonts that are avaialble on your computer are not available on everyones computer, so keep with major fonts e.g. arial, times new roman, courier, courier new, etc.
- How about editing the font size? Well, just add size="3" e.g. 3 to whatever font size you want to use e.g. 1, 2, 3, 4, 5.
- Finally, editing the colour of the font, add color="0000ff" e.g. <font color="0000ff">, changing 0000ff to whatever HEX colour code you want. For a list of HEX colour codes click here, just choose the colour you want and copy and paste the code which goes with it.
Right, well, thats the basics of editing text, of course, you can combine these three in any <font> tag e.g. <font face="times new roman" size="4" color="ff00ff">.
Images
Right, now, adding an image to your page. To do this involves a tag (but in this case it only requires one tag, just a 'starting tag' (<img>)). Firstly you need to know each image has a file format, the most common types are .jpg, .jpeg, .bmp or .gif, but there are many many other types. To find out the file type of your image you can go to a folder on your computer e.g. My Documents, click on Tools, Folder Options, View, and then click on Hide extensions for know file types to make it unchecked. Then all your files should show their type after them (it will be last few letters after the last . e.g. image1.gif the file type is .gif, image.1.jpeg has a file type of .jpeg. When you have finished finding the file format you can go re-check the 'Hide extensions for know file types' check-box and it will hide them again.
- Right, lets add an image to your <img> tag. Add src="filename.gif" e.g. <img src="filename.gif">, changing the filename to whatever the name of your image is and changing the gif to whatever the file type your image is.
- To edit the width of your image add width="100" e.g. <img src="filename.gif" width="100>, changing the 100
- To edit the height of your image add height="100" e.g. <img src="filename.gif" height="100>, changing the 100
- When you hover over an image you can make it have a little box appear which gives a brief explination of what the image is (try the image to the right) To add this to your image add alt="Explination" e.g. <img src="filename.gif" alt="Explination>, changing Explination with whatever text you want to pop-up.
The code for the image to the above left is <img src="extensions.gif" width="33%" alt="Click to zoom in"> (there is also some java involved, but that isnt even thought of at this stage).
Links
To add a link is relativly simple, you just add two link tags around whatever you want to give a link to, the tags are <a> & </a>.
- Editing the link is simple, you just need to tell the link where to go to, just add href="http://www.link.html" e.g. <a href="http://www.link.html">, changing http://www.link.html to whatever link you want.
- If you want your link to open in a new page then add this code to your link tag target="_blank" e.g. <a href="link.html" target="_blank">
When you add a link to an image it will create a border around the image, to get rid of the border just add border="0" to the <img> tags e.g. <img src="filename.gif" border="0">
Other
There is one more little code I think I should include in this tutorial:
- The <br> tag (there is just a 'starting tag' for this code). This creates a new line on your page.
One major thing to remember is it is not a good idea to mix tags up e.g. <i><b><u>TEXT<b><i><u>, it confuses your Internet Explorer if it is done.
|  |
 |
 |
 |
|
|
|
| |
|
|
|
|
Creating The Document
Okay, so you want to create a website, well, there are a few ways of going about it really, you could use a website builder, get someone to build it for you, or you could produce your own. If the latter sounds like an option you would like to follow then read on:
Firstly you will need to create a HTML document (this is a file which will store your website, like a Microsoft Word file holds your letter, assignment, etc). I would recommend using good old Notepad, it’s very basic, but does the job just fine. To find the program (using Windows) click on the start button, All Programs, Accessories, Notepad.
The Building Blocks
Once the program is open you will need to type (or copy & paste) your building blocks of HTML. HTML is made up of two parts, a head and a body. The head holds all the information which is not normally seen on your site (e.g. page title, which can be found at the top of your Internet Browser. The body holds the website you can see, for example, this text, its all in the body part of your document. Right, the 'building blocks' I speak of is this code:
<html>
<head>
</head>
<body>
</body>
</html>
What you can see above is a group of tags. Tags usually consist of a beginning tag (<html> for example) and an ending tag (</html> for example). What tags do is act as a way of telling your Internet Browser where a piece of information starts and ends (adding a / to the tag signifies the end tag). Above you can see there are three sets of tags, one is the head tags, another is the body tags, these both have nothing in yet because were just getting started and finally there are the html tags, what this states is that everything in between <html> and </html> is, well, HTML coding.
Saving & Opening The Document
Right, now you have to save your document, click File, Save As... and select where you want your document to be saved as, when you have found a suitable location type in a file name and then add .html to the end.
Believe it or not, that’s the basics of HTML, albeit the extreme basics. You can open your file as a webpage (by double clicking on the file you have created) or open it as a notepad document (for editing) by either; opening Notepad, clicking File, Open and opening the file you want, or right clicking on the file and choosing Open With..., then choosing Notepad from the list, or when you have the file open in your Internet Browser click on View, Source and it should open in Notepad. Sorted!
| |
| |
|
|
|
|
|
|
|
Työkalut 
Ohje
Lähetä yksityisviesti
Tilaa RSS-syöte
Kerro ystävälle
Lisää Live.comiin
Lisää verkostoosi
Tilaa ilmoitukset
