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

This page is part of the Web Design project.

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?

	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?

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:

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, 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 – 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 other text editor like Notepad++ or Textpad which provide the syntax highlighting, but not a word processor because it doesn't create flat files) and copy-n-paste the following text into your blank file:

<!DOCTYPE HTML>

<html>

  <head>

    <title>A short history of Mark-up and the WWW: Part 1</title>

  </head>

  <body>

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

</body>

</html>

Now,

In Notepad (or in 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.
Minimize Notepad just to move it out of the way, but don't close it as we'll be making some modifications shortly.
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 emphasised, 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:

<h1>A short history of Mark-up and the WWW</h1>

As you can see, the text has been surrounded by two tags, an opening tag (without the slash) and a closing tag (with the slash). This markup will affect just the text inside the two tags and ignore the rest of the text.

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 <h2>...</h2> as these headings will be sub-headings of the first one). You can also specify which bits of text are paragraphs using paragraph tags!<p>...</p>

While you're at it, try the following tags:

<em>...</em> to add emphasis to some words (displayed as italics in your browser)
<strong>...</strong> 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 <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