.: HTML Basics
By:deadmoon
Category:Home / Computers / Software
Learn HTML
Are you feeling a bit lost when someone mentions those four letters, “HTML”? Well it is actually very easy to learn and understand. We will cover how to set up a simple page, how to format text, insert images, and insert links. Lets start by explaining what it is exactly.
When you visit a page, you see columns, images, links and different colours. This has all been written by someone (or someone used a program to write it). And it is written in HTML. All web pages are sent to your browser (such as “Internet Explorer” or “Firefox”) as HTML.
HTML is the easiest “computer language” to learn. Now, when you write a formal letter to someone, there are things you add at the start and end aren't there (such as at the start their address, the date, and at the end your name and signature). Between these items you write the body of the letter. Well, in some ways, the basics of HTML is very similar.
Let me just give you an example of a simple page. This would display the words “Welcome” in the browser (the numbers in bold are not part of the code – they are just line numbers so we know what we are talking about later on).
1]
2]
3]
Site Title
4]
5]
6]
7] Welcome
8]
9]
All tags start and end. A start tag looks like
and and ending tag for it would look like . There are many tags -
... for underline,
... for bold etc.
If we go back to the letter example, you normally write your address, the date, their address etc at the top. Well this is what the first four lines are like. The first line, (note, in html, it doesn't normally matter if it is upper or lower case. In some technologies such as xhtml it does, but for now it doesn't matter) just declares that between that html “tag” as it is known, and the ending html tag on line 9 (notice the back slash, indicating it has ended) it has html within it.
The head contains information that isn't directly displayed by your browser. The
tag contains the title of the page, which is shown at the top of your browser. Other things such as keywords go into your head tag, but thats a bit more advanced.<br /><br />
<br /><br />
You should put all your content within the <body> tag that you want the user to see inside the main part of their browser.<br /><br />
<br /><br />
<b>To do links</b><br /><br />
A link is something that lets you click on it, and it will request a new page. You use the anchor tag for this:<br /><br />
<br /><br />
<a href="”http://www.techneek.co.uk”" target="_blank">CLICK HERE </a><br /><br />
<br /><br />
Do you see how that would work? It would display the words “CLICK HERE”, and that links to http://www.techneek.co.uk. This tag, the <a target="_blank"> tag has an example of an attribute to it – the href. <br /><br />
<br /><br />
Almost all attributes have a =" ". It is basically like saying, I have an anchor tag. I want to make it link to something. To tell it to link to something, you need to put href=”yourlink”. Remember when ending this tag (</a>), you don't need to put in the href. It is always just </a>.<br /><br />
<br /><br />
<b>Bold, Italic, Underline</b><br /><br />
<br /><br />
These are really simple – you probably already know them. <b> bold text </b> for bold, <u> underline </u> or <i> italic </i><br /><br />
<br /><br />
<b>Spaces in HTML</b><br /><br />
Spaces to some extent don't matter. I could write this line:<br /><br />
<a href="”http://www.example.com”" target="_blank">example.com</a><br /><br />
as:<br /><br />
<a href="”http://www.techneek.co.uk”" target="_blank"><br /> example link<br /> </a><br /><br />
<br /><br />
In HTML, any multiplies of a space - ' ' just show up as one. To display more than one you need to type .<br /><br />
<br /><br />
<b>Images</b><br /><br />
<br /><br />
Images are really simple. It is just <img src=”yourimagelink”>. You don't even need an ending tag (no </img> tag!). If you want to specify the height/width, use height=”120” width=”400”;<br /><br />
<img src=”yourimagelink.jpg” height=”99” width=”89”><br /><br />
<br /><br />
Incase the image can't be loaded for yoru user, you should give an alternative text. This is also good for people who find it hard to see on the screen. To do this, add alt=”a description of your image”. I would personally recommend no more than 6 words.<br /><br />
<br /><br />
<img src=”youimagelink.jpg” width=”200” height=”100” alt=”View of a beach”><br /><br />
<br /><br />
It is recommended that the only image types you use are Gifs (.gif), Jpegs (.jpg), or Portable Network Graphic (.png). Try and keep the file sizes down, some users are on very slow speeds.<br /><br />
<br /><br />
So there you are, you should be able to make a page now. Open up notepad, paste this template in:<br /><br />
<html><br /><br />
<head><br /><br />
<title>Your first webpage
...
Your content goes here, such as
Computer Techneek!
...