Web Design/What is HTML
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...
Web Design → What is HTML
|
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?Edit
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?
Activity: Why code by hand? | |
Take a few minutes to read Why Code by Hand over at WebDesign From Scratch (don't worry if you don't understand everything in this article). Out of the three reasons given by Ben, choose the one which speaks the loudest to you and then describe to someone (a friend, your facilitator or your mum) why this point convinces you that coding HTML and CSS by hand is the way to go! |
Where have I already used markup?Edit
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!
Activity: Marking up a Word Processing document | |
Start up your favorite word processor (such as OpenOffice, Microsoft Word or even Google Docs). You should be looking at a blank document.
Copy-n-paste the following text into your word processing document:
Is this text easy for you to read? What meaning is missing from this document? How could meaning be added without actually changing any of the text? Have a go at marking-up the word processing file as you see fit by setting headings, changing font sizes, adding bold and italics, newlines or spaces etc., but don't change the text itself. How is your document more meaningful now? If you're doing this as part of an in-class activity, you might want to compare the way you've marked-up the document to others... have you added different meaning? |
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 – HTMLEdit
Now that we've mark-up a word-processing document, we're going to mark-up the exact same document but in HTML!
SummaryEdit
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
Learning HTML |
Previous: WYSIWYG vs. Manual Coding in HTML — Next: Basic formatting in HTML |