Learn the Basics of HTML Coding

HTML Programming (Lesson 1, the Basic Structure of Webpages)

HTML Programming (Lesson 1, the Basic Structure of Webpages)

When learning how to create quality web pages with high ranking in search engines, you will at some point need to learn how to program 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 web pages.
To see the coding of a web page 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 on the web page, how to read it and what the web page is about. The ‘body’ is the main guts of the web page, the actual content. There is one other section that you need to be aware of from the beginning 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 sentence on a web page I would have to write it between two paragraph tags
and So to write ‘Hello World’ in a web page I simply have to write the following statement:
Hello World

hello-world-html
The paragraph tags tell the computer that ‘Hello World’ should be displayed as a paragraph, everything on an 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 familiarize 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 web page becoming clearer.

You might also like More from author

Leave A Reply

Your email address will not be published.