1sthootowl-blog - Tumblr blog

LET US START AT THE VERY BEGINNING.

One of the most off-putting parts of computer programming is the fact that when an expert in this field writes a tutorial, he or she tends to forget that the person they are writing the tutorial for may have no knowledge of the subject what so ever. This shortsightedness has put many potentially excellent programmers off from ever reaching their potential. Although the language used obviously does make sense, to the novice programmer this language needs watering down to make the whole process easier to understand, there are many words that are used to describe an action, that to the uninitiated means nothing at all and should be minutely broken down to make sure no one gets left behind, and scratching their head.

This part of this post I shall explain how to layout your most important part of your code and that is the hypertext markup language (html for short). As this name suggests, learning html is just the same as learning to write in another language but with the added advantage that your computer does the speaking for you. To anyone who has already done a little bit of coding this next part should be obvious to you, and you may wish to skip this part. Below is a piece of code you will need to start you off, underneath the code, I shall explain each line so you know exactly what each line does in layman terms.

01 <!DOCTYPEhtml> 02 <html lang="en"> 03 <head> 04 <meta charset UTF-8 05 <title>Your Title Goes Here-----</title> 06 Your Resources goes here----- 07 <style> 08 Your Css Styling Goes Here----- 09 </style> 10 </head> 11 <body> 12 Your Html code Goes Here----- 13 <script> 14 Your Javascript / Jquery Goes Here----- 15 </script> 17 </body> 18 </html>

The DOCTYPE declaration is shorthand for document type declaration is required for the first line of any html or xhtml document. The web browser is instructed which type of html language your web page is written in. This ensures that all of the different web browsers parse the web page in the same way.

Doctype syntax for HTML5 and beyond:

<!DOCTYPE html>

Doctype syntax for strict HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.1sthootowl.com/TR/html4/strict.dtd">

Doctype syntax for transitional HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.1sthootowl.com/TR/html4/loose.dtd">

Doctype syntax for frameset HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.1sthootowl.com/TR/html4/frameset.dtd">

These examples above will be explained later as at the beginning of your programming learning this will only confuse you at a time when this knowledge is unnecessary as for now we will use <!doctype html>.

The html tag: Always use lang attribute with the html tag to specify the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.

The head tag: The head tag defines where your cascading style sheets (CSS for short), will be held. Also, other code resources will be held in the head. Resources will be explained later as they are required.

The style tag defines where your css code starts and finishes <style> defines the start of your css code and </style> defines the end of your css code, with your css code sandwiched between the two tags.

The close head tag (</head>): This tag closes your head.

The body tag: The body tag opens the main part of your program and this is where your html code lives as well as your javascript and jquery. Within the body and the close body tags (<body></body>) are the script and close script tags (<script></script>), it is between these two tags where your javascript and jquery live. All of this will become more apparent as you follow all the examples I will show you in due course.