This lesson gives a step-by-step introduction to HTML coding basics. We’re heading towards simple web frontend design using basic HTML elements as it is being generated by WordPress, ready to be transmitted to the visitors browser at a moments notice.
Yet we want to build that understanding up from scratch. To that end, you could still use one of the fancy visual frameworks like Twitter Bootstrap to get you started, which is totally fine, but would require that you already know about the basics of HTML in order to work effectively. This lesson gives a short introduction into basic markup elements and how they are used.
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.
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> |
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.
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:
1 | <hr /> |
… or using paragraphs:
1 2 | <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 :) |
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> |
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> |
If you wanted to include images within your HTML website, you can use the IMG-Tab like this:
1 | <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:
1 | <a href="https://www.serpbot.org" target="_blank" rel="noopener noreferrer">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:
1 | <!-- 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/
You can experiment on HTML usage by doing some extensive formatting and link creation in your WordPress visual editor, and then switch to “Text” mode. You can then see the post portion of the HTML that is being created by WordPress and then transported to your visitors web browser.
This concludes the HTML basics for now. Please look at the next article for more advanced stuff like HTML forms.