#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


  • dilys said:

    i also want to have a concise blog this time, keeping the good habit of keeping code efficient and concise as well

    http://codesum.blogspot.com/2012/04/handwriting-html-code-great-way-to.html

     

    This post alone will track all my handwriting HTML activities

    on April 23, 2012, 7:03 p.m.

  • Pau Company said:

    My task:

    on April 23, 2012, 6:58 p.m.

  • Anonym said:

    http://distilleryimage5.instagram.com/68440e1c8d4011e1b10e123138105d6b_7.jpg

     

    www.jonbarrios.com

    on April 23, 2012, 10:36 a.m.

  • Mirek said:

    enjoy smiley

    http://mirek101.wordpress.com/2012/04/18/2-writing-html-by-hand/

    on April 18, 2012, 1:38 p.m.

  • dp17 said:

    and the reason i don't ever write things by hand can be found here

    http://www.piggbydesign.co.uk/news/school-of-webcraft/handwritten-code/

    on April 17, 2012, 5:39 a.m.

  • eshu9e said:

    done this  from last couple of months in my blog have a look into it once

    here it is

     

     

    eshunrd.blogspot.in

    http://eshunrd.blogspot.in/p/all-time-great-hackers.html

    on April 13, 2012, 2:54 a.m.

  • MissAjayG said:

    3 pages and 2 hand cramps later...

    http://28.media.tumblr.com/tumblr_m2boisu7xv1rtcylho1_500.jpg

    on April 11, 2012, 12:07 p.m.

  • Anonym said:

    Posted 2 images of my handwritten html on my blog.

    on April 7, 2012, 1:27 a.m.

  • Ruff said:

    Check it out - didn't make it too fancy. 

    on April 3, 2012, 2:41 p.m.

  • Jeremiah said:

    I have finished this task, which I enjoyed. Have a look at my blog and leave a comment if you like.

    on April 2, 2012, 10:37 p.m.

    dp17 said:

    mate, your hyperlink is wrong, it looks like this

     http://http//thedeveloperdeveloper.wordpress.com/2012/04/02/writing-out-html-by-hand/

    might want to change that. saw the code anyway with a bit of chopping,  i'm a doodler too.

    peace jonny

    on April 17, 2012, 5:27 a.m. in reply to Jeremiah

  • Kriztyna86 said:

    Yey, finished this task, unfortunaly I don't have a scanner so can't post it. 

    on April 2, 2012, 3:08 p.m.

  • janster said:

    As a programmer of twenty some odd years, I don't quite understand this task.  If I ever (ha) had a syntax error, it was because i couldn't see it.  The task should read, write the HTML down by hand, and then, from that handwritten document, try to input the code into whatever processor you are using.  Once that process completes, you will have fullfilled the requirements.  Really, how do you expect someone to write down a page of a brand new language and then be able to see what they've left out or misspelled?   Perhaps I misunderstand.  And no, I'm not a curmurgeon.cheeky

    on April 1, 2012, 2:58 p.m.

  • Karan Bhullar said:

    Here it is- http://webcrafter.posterous.com/basic-html-document

    on March 31, 2012, 6:18 a.m.

  • Maitre Kaio said:

    I wonder why the code of this task is colored this way...

    Maybe P2P2U has a problem with syntax colourng ? surprise

    on March 23, 2012, 1:35 p.m.

    janster said:

    Good catch on the  syntax coloring system!

    on April 1, 2012, 11:34 p.m. in reply to Maitre Kaio

  • Zach said:

    I've done my lines cheeky and i'm about to hand them into the teacher. I'd almost forgotten what it's like to actually write anything by hand! I'll get the post up on the blog soon.

    on March 18, 2012, 12:35 a.m.

  • Doug Belshaw said:

    I hacked the format a little as I didn't want to be 'Susie Creamcheese'!

    My handwritten HTML

    This was fairly straightforward as I'm used to the 'HTML' view in WordPress - it was just the 'meta charset' thing I found a bit tricky...

    on March 15, 2012, 10:32 a.m.

  • Josue Cerda said:

    My First html code is done and well memorized.

    on March 3, 2012, 10:20 p.m.

  • Warren said:

    I just completed the HTML by Hand.  It is located at: http://pk1997.wordpress.com/2012/02/24/code-by-hand/

     

    I did my entries within Notpad.

    on Feb. 24, 2012, 4:24 p.m.

  • dolmsted said:

    Here's my code:

    http://dolmsted.posterous.com/coding-by-hand

    on Feb. 21, 2012, 8:50 p.m.

  • RedrumRedward said:

    Here it is!  http://redrumredward.wordpress.com/2012/02/21/handwritten-html-for-p2pu/

    Love writing this by hand now only if it could process it on the other side of the paper...

    on Feb. 21, 2012, 5:45 p.m.