This brief article gives a step-by-step introduction to HTML coding basics. We’re heading towards simple web frontend design using basic HTML elements. Of course you could use one of the fancy visual frameworks like Twitter Bootstrap, which is totally fine, but would require that you already know about the basics of HTML in order to work effectively. This article gives a short introduction into basic markup elements and how they are used.
What is HTML?
HTML stands for Hyper Text Markup Language and is a sub type of XML, the Extensible Markup Language. Markup is formed using so called “tags”. So HTML is used to describe websites. With that in mind, let’s look at some basic components.
Basic HTML page structure
The following code represents a minimal HTML page.
1 2 3 4 5 6 7 8 9
<!DOCTYPE html> <html> <head> <title>Tab text</title> </head> <body> Black on white. </body> </html>
Basic HTML elements
There are a lot of HTML tags. Let’s focus on some stuff we really need. I will provide links for additional stuff when appropriate.
Basic content structure
Let’s say you want to use headings and sub headings, like the ones within this very article. You can do so using the following h1, h2, h3, … tags:
1 2 3 4 5
<h1>Big Heading<h1> <h2>Sub Heading 1<h2> <h3>Sub Heading 2<h3> <h4>Sub Heading 3<h4> <h5>Sub Heading 4<h5>
Now let’s say you want to separate something from the rest of the content you wrote. You can do that using a horizontal line:
… or using paragraphs:
<p>Paragraph content</p> <p>Another paragraph content</p>
… or using line breaks:
1 2 3
Some text<br /> Some other text<br /><br /><br /><br /> Some other text :)
Ordered and unordered lists
If you want to enumerate list items, do that using a ordered list:
1 2 3 4 5 6 7 8
<ol> <li> A first item </li> <li> A second item </li> </ol>
If you just want those items to be listed with leading dots, you can do it using an unordered list:
1 2 3 4 5 6 7 8
<ul> <li> A first item </li> <li> A second item </li> </ul>
Simple HTML tables
Let’s assume you have a rather complex content you want to structure. You can do that using HTML tables like this:
1 2 3 4 5 6 7 8 9
<table><tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr> </table>
Images, links and comments
If you wanted to include images within your HTML website, you can use the IMG-Tab like this:
<img src="path/to/image/image.png" alt="Description of image" />
To insert links a user can click on, use the A-Tag like this:
<a href="http://www.php-mysql-tutorial.net" target="_blank">Anchor text the user can read</a>
The target “_blank” means a new window/tab will open. You could also use “_self” for the page to load within the same window/tab you’re currently surfing in.
Now you often want to include some comments within your page that is not shown to the user directly but serves you as a marker for something left to be done or anything. You can do that like this:
<!-- Comment -->
Please be aware, however, that the user can always lookup the HTML source and is thereby able to see your comments. So you may not want to write down anything that is coming to your mind :)
If you need other examples on how to use basic HTML tags please visit http://www.w3schools.com/html/
This concludes the HTML basics for now. Please look at the next article for more advanced stuff like HTML forms.