#2 Writing HTML by Hand

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Hello World


Write a basic HTML document

This task is going to introduce you to writing a basic html document. But you'll do it on paper, using a pen, for fifteen minutes. Think of this challenge as the Webmaking 101 equivalent of wax on, wax off (from the original Karate Kid film).

You're going to keep doing this until (hopefully) you can do it without making any mistakes and (ideally) by memory. It's important to be able to do this because this basic html document will form the basis for (almost) every html document you write in the future.
 
Below is the code that you're going to write out by hand. Be sure to copy it verbatim. Every quote, space, capitalisation and indentation is important. When you start writing more complex HTML & CSS you'll see why ;)You can be creative with your Hello World and include your name and a personal message.
 
<!DOCTYPE html>
        <meta charset="utf-8">
        <title> Hello World by Susie Creamcheese</title>
    </head>
 <body>

        <h1> Hello World by Susie Creamcheese</h1>
            This code is written by hand. How awesome am I?
        </p>
    </body>
</html>
 
If you make a small mistake that's ok, but if you make a big mistake then start again. If you manage to get to the end without making a mistake in under fifteen minutes, then start again, but this time doing it from memory.
 
At the end of the fifteen minutes you should have got through a few pages or sheets of paper and have something that resembles the above code.

Task Discussion


  • jenEliz said:

    jenEliz

    Check out the blog :)

    on Oct. 30, 2011, 10:13 p.m.

    Philipp said:

    Love the photo of the stack of cars. Nice!

    on Nov. 25, 2011, 2:39 a.m. in reply to jenEliz

  • Luis said:

    I hand wrote the code as asked. I did not see a value with the <meta charset...> tag.

    on Oct. 14, 2011, 1:37 p.m.

    Alexis Hevia said:

     

    Every text document has a specific charset. Most Windows text editors use ISO-8859-1 by default, while most Linux/Unix text editors use UTF-8. The browser doesn't know what charset you used on your text file, so it has to infer it. Most of the time it gets it right, and even when it gets it wrong, as long as you didn't use characters outside the english alphabet it won't matter. 

    The problem comes when you use characters outside the english alphabet and the browser infers the wrong charset.. then you'll see things like !? instead of á, for example. It's recommended to always use meta charset to help the browser render your html files correctly.

    on Oct. 14, 2011, 1:58 p.m. in reply to Luis

    Kevin Byers said:

    I agree. I guess it is something I need to look into. It's always been part of the code that my editor has taken care of for me! Writing it by hand makes you stop and think about exactly what everything does, what is needed, and how content should be removed from the styling as much as possible.

    on Nov. 16, 2011, 6:17 p.m. in reply to Luis