When you are blogging, it is always helpful to have some knowledge of HTML and CSS. If these two terms don’t mean anything to you, read on for a brief introduction and some helpful tips.
HTML means hyper text markup language and is the computer language (also called markup) that web pages are made up of. This language is needed so that your browser understands what you want to show.
By adding CSS – Cascading Style Sheets– you can give these elements some styling. Consider a color, font, bold, italic, and so on. So every web page needs a base of HTML and CSS to view it.
Because today a browser can read and understand more than it used to, that means the capabilities of HTML and CSS are also becoming more sophisticated. Fortunately, there is always a basis to be found and it remains about the same, so that is what we are going to talk about today.
The Basics
By adding markup, a Web page can be read by a browser and viewed by someone browsing the Internet. One thing that always comes back to markup is that when you “open” something, it should then also “close” it. To open and close, use the following characters <...>, that is, a less than and greater than sign. On the three dots add the markup. Close by adding a slash character (/), this looks like this </...>.
To make it clearer, I will give some examples.
The basics of an HTML page
<!DOCTYPE html> <!-- Laat aan je browser zien dat je HTML5 toepast. -->
<html> <!-- openen html -->
<head> <!-- openen head -->
<title>De titel van de webpagina.</title> <!-- openen en sluiten title -->
</head> <!-- sluiten head -->
<body> <!-- openen body -->
<p>Hier komt alles wat je wilt laten zien aan de bezoeker van de webpagina. </p> <!-- openen en sluiten paragraph -->
</body> <!-- sluiten body -->
</html> <!-- sluiten html -->
The part that will appear under <body> is basically everything you get to see on a page.
I do not want to elaborate on this in terms of content. At the end you will find some links where you can find more information.
Useful markup encodings
To denote a paragraph, use the following code:
<b>Dikgedrukte</b>, <i>schuingedrukte</i> en <u><span style="text-decoration: underline;">onderstreepte</span></u> tekst gebruik je zo.
Sometimes you want a text to start on the next line without a white line in between which is often seen with a paragraph.
Like this is on a new line!
And here’s another new line.
You use for this:
</br>Suppose you see a beautiful quote and would like to share it. Then you use a blockquote.
<blockquote>The best design is the simplest one that works. <cite>Albert Einstein (1879 - 1955)</cite></blockquote>
Headings
Headings, also called headings, are headings that appear in your text. You have a total of 6, the lower the number, the more important they are.
H1 is most important and should only be used once on your website. Therefore, it is often applied for the title of your website. H2 comes next and often indicates the slogan. If you don’t have these, you can also use H2 for the titles of your articles. For example, H3 can be used in the article itself and so on.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Styling
Text alignment
Sometimes you want to highlight text or instead of placing it on the left, place it on the right. You can do all that!
The fox jumps over the lazy dog.
<p style="text-align:left;"">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="text-align:center;"">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="text-align:right;"">The fox jumps over the lazy dog. </p>Text Color
The fox jumps over the lazy dog.
<p style="color: red;">The fox jumps over the lazy dog. </p>The fox jumps over the lazy dog.
<p style="color: #998099;">The fox jumps over the lazy dog. </p>Styling Combination
The fox jumps over the lazy dog.
<p style="font-family: Times New Roman; font-size: 19px; font-style: italic; color: #998099">The fox jumps over the lazy dog. </p>The above examples all use inline css. This is only useful when you want to render a small piece differently. For websites or blogs, it is advisable to apply a style sheet. A stylesheet is a document that contains all the styling for the entire Web site.
A stylesheet looks something like this:
body { <!-- openen styling voor body -->
background-color: #f9f9f9;
font-size: 12px;
font-family: "Times New Roman", serif;
} <!-- sluiten styling voor body -->
h1, h2, h3, h4, h5, h6 { <!-- openen styling voor headings -->
font-family: "Arial", sans-serif;
letter-spacing: 2px;
margin: 15px 0;
} <!-- sluiten styling voor headings -->
As with markup, it is also necessary with CSS to close everything properly, however, with CSS you use the following two characters { } for this purpose as you can see in the example.
You understand that for a website or blog, there is a huge amount of CSS that can be applied. And the great thing about this is that new features are added almost daily as browsers are able to support more and more. So you are actually never out of learning.
Useful Links
- W3Schools: The best online site to learn everything about coding (HTML, CSS, PHP, jQuery)
- Handleiding HTML: Dutch-language site with lots of information.
- W3C Markup Service: An online site to have your markup checked for errors.
- More about DOCTYPE. You don’t have to understand everything but it is important to add what markup you are using so that your browser will read everything better.
If you have any questions about HTML and CSS, feel free to ask!
