July 24, 2010

What is HTML?

A graphical despiction of a very simple html d...


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 (...
    and

    ) and paragraphs (…
    )


  • Explain what 'mark-up' is in everyday terms and give examples of how we use it everyday.


  • 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 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 creating HTML pages using 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)!

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? 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 or Microsoft Word or even WritePad will do). You should be looking at a blank document.

Copy-n-paste the following text into your word processing document:
A short history of Mark-up and the WWW: Part 1 - In the beginning… The Internet and email have both been around for some time now. The initial Internet was actually developed by the US military as a means of communication that was impossible to break! It was thought that if there were thousands of communication points (rather than just a few transmitters) then it would be possible to transmit a message even when many communication points had been destroyed. No-one imagined that the Internet would become a house-hold tool for many people throughout the world! Part 2 – The World-Wide-Web Until 1989, the Internet was primarily used by computer geeks who knew all the required tools and commands. But everything changed when Tim Berners-Lee of the CERN nuclear research facility near Geneva, Switzerland, introduced Hypertext documents. Hypertext documents made it very simple to follow links to related information, regardless of which country the information is stored in – all that was required was a single click of the mouse! Yet these links also had an implication for the way people would read the information…
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, new lines 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 – HTML

Now that we've mark-up a word-processing document, we're going to mark-up the exact same document but in HTML!

Activity: Marking-up an HTML document Open NotePad (or any text editor but not a word processor) and copy-n-paste the following text into your blank file:
    A short history of Mark-up and the WWW
    In the beginning…

    The Internet and email have both been around for some time now. 
    The initial Internet was actually developed by the US military 
    as a means of communication that was impossible to break! It was 
    thought that if there were thousands of communication points 
    (rather than just a few transmitters) then it would be possible 
    to transmit a message even when many communication points had 
    been destroyed. No-one imagined that the Internet would become 
    a house-hold tool for many people throughout the world!

    The World-Wide-Web
    Until 1989, the Internet was primarily used by computer geeks 
    who knew all the required tools and commands. But everything 
    changed when Tim Berners-Lee of the CERN nuclear research facility 
    near Geneva, Switzerland, introduced Hypertext documents.
    Hypertext documents made it very simple to follow links to related 
    information, regardless of which country the information is stored 
    in - all that was required was a single click of the mouse! Yet 
    these links also had an implication for the way people would read 
    the information…




Now,


  1. In Notepad (or your text editor), save the file with the name webhistory.html to a folder on your computer. If you are using Notepad, make sure you set the file type to All Files instead of the default Text documents, otherwise Notepad will add a .txt extension to your file.


  2. Minimize Notepad just to move it out of the way, but don't close it as we'll be making some modifications shortly.


  3. Navigate to the folder where you saved the file and double-click on your new file (this should display the file in your web browser). You may need to right-click and choose "open with" and then choose the name of your browser.
How does your new HTML file display in your web browser? What do you notice? That's right! Your web browser ignores all the new-lines and extra spaces in your document! We need to add mark-up to our document to help our web browser understand which bits are headings, which bits are paragraphs, which bits should be emphasized, etc.
Come back to your webhistory.html file in Notepad where we can edit your file. We're going to have a go at using some simple HTML tags to mark-up our HTML document – remember, we're adding meaning without changing the actual content (the words).
To identify a piece of text in your document as the most important heading (a level-1 heading), enclose it in tags like this:


A short history of Mark-up and the WWW


Once you've saved your changes in Notepad, reload 'webhistory.html' in your browser (if you've already got it open in a browser, you can just click on the refresh button to re-load the page with your changes). Can you see the effect of your markup?
See if you can find some other headings in the text and mark those up as well! (You should use 

as these headings will be sub-headings of the first one). And you can also specify which bits of text are paragraphs using , paragraph tags!)
While you're at it, try the following tags:


  1. to add emphasis to some words (displayed as italics in your browser)


  2. to add weight to some words (displayed as bold in your browser)
If you've got someone sitting nearby, make sure you show them the final result in your browser! For your last challenge, see if you can describe what was different between marking-up the word-processing document versus marking-up the HTML document? (If there's no-one around, have a go at explaining it to yourself!)

Summary

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 

, , , and 




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.


About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

 
Iwebslog Blog © 2015 - Designed by Templateism.com