When learning how to create quality webpages with high ranking in search engines, you will at some point need to learn how to programme in HTML. When first looking at the coding, this may seem very daunting, but this guide will give anyone the basics to understand the structure of webpages.
To see the coding of a webpage either open one up in Windows Notepad, or in ‘Internet Explorer’ go to ‘Page’ and then ‘View Source.
The web page can be broken down into 2 parts, the ‘Head’ and the ‘Body’
The ‘Head’ is the upper section and the ‘Body’ is the lower section. The ‘Head’ section is all the coding in between these two tags and . The body is everything in between these two tags and . The ‘Head’ section basically tells the computer how to display the content in the webpage, how to read it and what the webpage is about. The ‘body’ is the main guts of the webpage, the actual content. There is one other section that you need to be aware of from the beggining of your tuition and that is the ‘style’ section which is situated within the ‘head’ section and is defined by the following two tags . The ‘style’ section defines styles of anything in the ‘body’ section.
Tags are the first stage of understanding HTML coding, basically all coding is defined by a tag. The tag tells the computer what to do with a statement. For example if i wanted to write a sentance on a webpage i would have to write it between two paragraph tags
and So to write ‘Hello World’ in a webpage i simply have to write the following statement:
Hello World
The paragraph tags tell the computer that ‘Hello World’ should be displayed as a paragraph, everything on a HTML page can be understood by examining the tags that it resides within. If you wanted ‘Hello World’ to be displayed in bold you would simply add the tag for bold either side of ‘Hello World’, but within the paragraph tags. The two tags for bold are and so the following statement would write Hello World in bold.
Hello World
As i said earlier the ‘style’ section defines styles for anything in the ‘body’ section. So if you wanted to style the ‘Hello World’ statement further, you could define a style within the ‘style’ section and then use this style on the ‘Hello world’ statement in the ‘body’ section.
An example of this would be the following statement wrote within the ‘style’ section.
style_1 {
font-family: “Comic Sans MS”, cursive;
font-size: x-large;
color: #036;
text-decoration: underline;
}
This defines the name of the style as ‘style_1’, the font type as ‘Comic Sans MS’, the font size as ‘x-large’, the text color and underlines the text too.
Now to use this style on the ‘Hello World’ statement within the ‘body’ section you would use the ‘class’ tag to tell the computer you want to add a style to your hello world statement using the style you have named as ‘style_1’ like so.
Hello World
Notice the opening class tag has the style name within it but the closing class tag doesn’t need it.
This is the end of Lesson 1, please take some time to familiarise yourself with the concept of the ‘head’ section, the ‘style’ section and the ‘body’ section. Especially how the ‘style’ section, styles things within the ‘body’ section and how tags are used on all html statements. Hopefully now you will begin to see the structure of the webpage becoming clearer. Once you are happy with these concepts please move on to Lesson 2.
