How many times have you heard the term HTML – or HyperText Markup Language – and pretended that you knew exactly what people were talking about while secretly wondering what it actually means? You might have even used HTML a bit already, but still not feel confident to explain what 'markup' actually is...
Well, the great news is, you've already marked-up documents in your own way ever since primary school! By the time you've finished this brief tutorial, you'll see how marking-up an HTML document is not much harder than formatting a word-processing document!
After working through this activity you'll be able to:
- Mark-up a simple HTML document with headings (<h1>...</h1> and <h2>...</h2>) and paragraphs (<p>...</p>)
- Explain what 'mark-up' is in everyday terms and give examples of how we use it every day.
- Explain why we need to get our hands dirty with mark-up languages rather than letting tools like DreamWeaver do all the work for us.
Why hand-code HTML?
Because learning how to use HTML properly will make you a better web designer! Sure you can create a web page using DreamWeaver and Bluefish or other WYSIWYG editors. In fact, you might be thinking "I can already create web pages and I don't know much HTML at all!" – of course you can! But in a certain sense, you can't, because you don't know the essence of what you're doing.
Creating HTML pages using Adobe DreamWeaver is kind-of like delivering a speech through a translator: although you might know exactly what you want to communicate, you can't always control the end result... Why? Because your thoughts and ideas have been translated by someone else (in this case, Dreamweaver)! In the ideal situation we would translate our thoughts ourselves... but to do so, we need to learn the language (in our case, HTML and CSS). Learning the language might be difficult compared to getting a friend to do the translation on your behalf. But it's much more rewarding to do that yourself, right?
Where have I already used markup?
Ever since we learned how to underline important words or headings in primary school we have been using mark-up! Marking-up a document is simply a way of adding meaning or emphasis to a document without changing the content (ie. without changing the words.) Notice how the words in bold stand out as important – the bold adds meaning without changing the content – it tells us which bits of the sentence are most important. Just like when we were in primary school and we underlined the important words in a comprehension exercise, or when we use a highlighter to highlight the important points in an essay.
Perhaps you can find some other examples of mark-up from everyday life, can't you? I remember one student trying to describe how makeup is actually a form of mark-up – adding emphasis without changing the content!
If you've ever used a word processor then you've already been marking-up text like a pro! All word processors (like Microsoft Word or OpenOffice) use mark-up to format documents!
So, it's about time that we had a go at marking-up a Hyper-Text Mark-up Language (HTML) document!
Marking-up a document for the Internet – HTML
Now that we've mark-up a word-processing document, we're going to mark-up the exact same document but in HTML!
Congratulations! You've now marked-up an HTML document without using DreamWeaver or FrontPage!
To sum-up, HTML is an acronym that stands for Hyper Text Markup Language. Web designers use HTML to add meaning to the content of a web page, using tags such as <h1> , <p>, <em>, <body> and <title>. These tags (or mark-up) help web browsers (and therefore people reading your page) to recognize headings, paragraphs and emphasized text on your page (OK, so it gets a bit more complicated, but that's good enough for now!)
The syntax of HTML isn't very difficult to learn but there are some rules that we'll learn to follow in later activities.
You might want to scroll back up to the top and check that you've learned what we set out to learn, noting whether you feel confident or whether you need to spend some more time going over the details.
You may also want to review some of the concepts we've discussed by reading the htmlDog tutorials on paragraphs and headings. When you're ready (and have had a break!) head back to Build a basic web page and take a look at the next suggested activity!
You can also visit https://www.w3schools.com/html/ for a complete HTML tutorial
|Previous: WYSIWYG vs. Manual Coding in HTML — Next: Basic formatting in HTML|