Learning HTML is easy because it is logical and it makes sense. It is the life blood that courses through the veins of billions of web pages, intranets and applications. So learning HTML it is a must.
Learning HTML is easy because it is logical and it makes sense. It is the life blood that courses through the veins of billions of web pages, intranets and applications. So learning HTML it is a must.
Stages of Learning HTML
- Learn what it means, I mean in relation to the real world. I find that applying techy stuff to the real world helps me learn. So in this article we will be using the idea of literacy to teach you what this HTML lark is all about.
- Get your hands dirty and try out the different tags
- Copy an existing web page without looking at their code
- Design your own web page and code it by hand (or foot if you are ambidextrous)
HTML as Words
HTML is a meta-language meaning it describes the content you see in the browser. Languages need words and so each tag can be thought of as a word. Example: <p> means paragraph, if I want to see a paragraph on the page then I speak the word <p>, if I want to see a heading then the word is <h1> and if I need to list something in order then <ol> and <li> are my chosen words.
If I say “think of a cool beer”, in your mind you see a cool beer. If I code <h1>Cool Beers</h1>, in your browser you see Cool Beers.
Simple, no? Let’s move onto the grammar.
Think of HTML as a Story
Over the years of teaching HTML I found that thinking of it as a story really helps you remember not only the structure but to help you look thousands of lines of code and see how it all fits together.
Let us take, for example, the humble <p> tag/word. When I am writing a paragraph the story has a beginning middle and an end. So we get <p>this is the middle</p>, did you spot the parts that say beginning and end?
Now some stories are short and self-contained. We can see that a paragraph will potentially have more than one word between its <start> and </end>. What about images? Well these are the neat self-contained stories. Ready, if you`re not paying attention you might just miss this story…<img />.
Images, line breaks, horizontal lines, form input fields all have this same self-contained story (also known as self-terminating tags). The difference is that their middle is in the opening tag itself. Example <img src=”picture.jpg” alt=”Web Courses Bangkok Logo” />. Why? Because that word/tag does not contain anything, it is self-contained.
Ohh I see a link!
Build Your Vocabulary
So now we know what a word is and the story behind writing most tags, now we need to know the vocabulary i.e. what different words do we have available to describe this fantastic world, contained in a browser, that we want to create.
Here are a few cheat sheets containing all the useful tags web designers use.
The Importance of a Good Vocabulary
As your mother and teachers always said, it is important to have a good vocabulary. Why? So you can be understood. The better you are understood the better important people like Google will like your story.
When telling the story of your web page use the best words possible i.e. when writing your HTML code choose the best tags to describe your content.
Make It Easy for Yourself with Good Handwriting
HTML gets long! You can potentially, and often do even for medium size pages, have thousands of lines of code. Following our theme of literacy, think of this as your handwriting. To help you learn HTML quicker use tabs to indent nested tags e.g.
<ul>
<li>the ul is the start</li>
<li>so this is the middle</li>
<li>which is easy to see because of the tabs</li>
</ul>
Now trust me when I say this helps! If you have potentially hundreds to thousands of lines to search through then tabs will really help you identify the start, middle and end of all the sub stories.
Another thing I do is to put two or three lines between sections. For example the heading and the navigation I will put some line spaces between their stories.
Structure
A good book will have you weaving in and out of plots to knit together the whole story. Another way to think of the HTML structural elements like <header>, <article> and <footer> is like folders on your computer. You can`t actually open and read a folder but you can see its contents. HTML has these structural elements to group tags together to give extra meaning aka semantic value.
For example let’s look at two sets of headings that could appear on the same webpage:
<header>
<h1>Your Website</h2>
<p>this is taglinetastic</p>
</header>
Then we have
<article>
<h1>Manchester United Loose Against Cardif City</h1>
<p>The Welsh win! In a grooling match the Cardif boys stuck it to the English 2 . 0</p>
</article>
We are using the same tags but they belong to completely different sections. By using structural elements we give extra meaning to our HTML tags and stories. Learning this is the final stage and leads us onto the next article which will be about learning CSS, the code behind the design of your web pages.
Learn HTML at Web Courses Bangkok
I love teaching HTML to beginners. The look on their face as they realize this web design business is not that hard and you instantly get to see a web page be created with just a few simple tags.
We run group courses every month and you can learn online at a time that suits you. Contact us today for more information on our web design for beginner’s courses.
