Learn how to write HTML - lesson 1
A HTML page consists of two over-arching sections: the 'head', and the 'body'. You can think of the 'head' section like a utility area - it's where stuff gets prepared, ready to present to you in the 'body' area. It also contains elements that guide search engines when they crawl, such as a concise description of the page, whether to crawl the page or not, and the title of the page to display when including in search engine results pages, the 'head' and 'body' sit inside 'html' tags, which start and finish the HTML document.A HTML page is constructed using '<tags>'Any tags that you see here in red mean they are 'command' tags which 'tell' the code to 'behave' a certain way. Anything not in <tags> gets displayed on the page. In general, you will surround text with tags to tell it how to display. Generally, each tag that you 'open' (write) will need a closing tag so that the browser knows that you have finished with that tag.
Tags can have attributes which further refine how content will be handled. You will use attributes from the very beginning, when you set the language of your HTML page.
Time to set the scene...
Open up notepad (you can find this in start>programs>accessories).Go up to file, which is in the left hand top corner of notepad, then click on save as. Let's call it Mypage. You do this by typing in MyPage.html in the area at the bottom of the save box called "file name", and then select "all files" from the drop down box under it. This is important, as it saves the page as an html file instead of a text file.
The very first keystroke...
The first thing you need to do is to tell the page the version of HTML that you will be writing. This is done with the 'Doctype' tag: "<!DOCTYPE html>". This is a tag which says that the page is constructed according to the 'HTML 5' specification, and helps to render the page so it looks the same across all browsers. This is the latest version of HTML, and is fairly well supported across all browsers. There are older versions, which use different doctype declarations. If you want to read about these, have a squiz here. You know where I said that all HTML tags get closed? This is a declaration, and it sits before all of your HTML - and doesn't get closed.So, after the doctype, the next thing you need to type is "<html lang = "en-AU">". It doesn't matter if this is on the same line as your doctype, but for ease of reading it is best on the next line. Notice the 'lang' attribute? That tells the browser that this page is written in the English language, specifically Australian (cos you know, that's where I am). This can be changed according to location - if the site is a US site, this can be changed to en-US. If it is a site in Great Britain, it can be en-GB. You will find a list of all the language flavours on our ISO country codes page.
The next thing you need to do is insert a "<head>" tag. This is where you can put all sorts of instructions relating to the page, but they don't get displayed on the page. For instance, you put your keywords and meta tags in the head. These are for search engines to read, and are not displayed 'on' the page (they cannot be seen), which is why they go in the head section.
What you should have on your notepad is:
<!DOCTYPE html>
<html lang = "en-AU">
<head>
Make a name for yourself!!
To put the name of your page into the top of the browser (no, NOT on the page itself, the very very top of your browser!!), you need to tell the page that you are now putting in it's "<title>". After the word "<title>", type in the name of your page. Call it My Page. You then need to tell the page that you've finished writing the title tag...otherwise it will display everything else you write after it in the top of the browser!! To 'end' your tags, meaning to tell the page that you've finished that particular command, you use the / key. So, after you've put the name of your page after "<title>", you need to end the title section by typing "</title>". Remember, you need to put it into < > the same as I have, and the same with everything else highlighted in red.That's all you need for now in the "<head>". So, we need to tell the page we've finished the head section. You guessed it, you need to type in "</head>"
What you should have on your notepad is:
<!DOCTYPE html>
<html lang = "en-AU">
<head>
<title>My Page</title>
</head>
Now you've got your head together...
Now go up to 'file' then 'save'. If you now go to your documents where you saved the 'mypage.html' file, double click it and open it. It will be a blank page, but at the top of the browser it will say 'My Page'. How can the page be blank when you've done typing on it??? Remember, everything within < > doesn't get displayed on the page. The only thing out of the < > is the title of the page, and you instructed the page to put THAT bit into the top of your browser by the "<title>" command. To understand fully how this works, change the name between the "<title>" and "</title>" tags to 'Trying something different'. Save the notepad file again, then refresh your MyPage.html page. Notice the change in the title up the top? That's how easily it's done!!So what you've done up to this stage is taken a notepad, saved it as an html file, typed in that the coding is in <html>, created a 'secret section' called the <head> which is where you tell the page what to do, and given the page a <title>. You're really getting the hang of this, aren't you!!!To see what your notepad is supposed to look like right now, click here