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

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


  • AmyAmy said:

    Hi Everyone

    Took me longer to work out how to upload photos than it did to do the task.  I found GThumb and Gimp.   Also found the filters in Gimp :)

    The results are here :-

    http://amyscoolpc.Wordpress.com

    on July 13, 2013, 6:56 p.m.
  • Anonym said:

    on July 5, 2013, 8:36 a.m.
  • sinead said:

    Couple of questions.

    1. Do you need a line space between body and h1?

    2. Are head and body tags meant to align with one another? Does that matter?

    on July 2, 2013, 5:07 p.m.

    Jared said:

    I was going to answer this on your blog, because I saw it there first, but I couldn't figure out how to comment, so here it goes :)

    To your first question:

    no, you don't need it, it's just there to make it easier to read for people, like us. But it could have been written with it right next to it (i.e. <body><h1>Header</h1)

    And to your second

    Again, it's just to make it look pretty, it looks nicer if they're aligned with each other, but don't have to be.

    I hope I helped answer your questions

    on July 2, 2013, 6:31 p.m. in reply to sinead

    algotruneman said:

    Any time you plan to share your code, as in this time of learning, making it easier for us other humans to read is the best thing to do.

    Consistent indents can help in some cases. "White space" which is outside the brackets and also not part of visible text doesn't matter in html.

    However, making structure visible in your coding helps not only others, but also helps you when you go back to reuse or repair your own work weeks or months later.

    Blank lines can also help the visibility of your structure. Use them.

    on July 2, 2013, 6:53 p.m. in reply to Jared
  • Culsti said:

    I didn't write it by hand, I typed it, repeatedly and have a feel for that much html.  Back when I was a programmer I had a real issue with sloppy coding and sloppy looking coding.  I expected my team to follow the format we'd agreed to for columns and comment alignment. 

    This example we just typed has a line that is a space or two out of alignment in the original.  That bothered me and I didn't repeat it in my code. 

    I know that all sounds very anal but I developed, helped code, and maintain a simulation model with over 12,000 lines of code.  Errors are easier to spot if you can always trust your eyes to find the same type of statements by looking for the same format.  I actually loved to debug back in those days.

    on June 25, 2013, 6:09 a.m.
  • Cristian Gomez said:

    This its my html writen by  hand

    on June 20, 2013, 9:06 p.m.

    Teresa said:

    lol, so true! at least yours is cleaner than mine!

    on Aug. 22, 2013, 7:44 p.m. in reply to Cristian Gomez
  • Neha said:

    Could anyone tell me the meaning of    <meta charset="utf-8">

    I mean..what is it doing?

    on June 18, 2013, 6:27 a.m.

    0be1 said:

    Good day Neha;

    Here is a site (W3 Schools) that I have referred to over the years. Might I suggest that you bookmark it as it may become a valuable site for your questions in the future. The site has a lot of great information and is broken down into easy to understand sections. I hope this helps, and have a GREAT day!!

    http://www.w3schools.com/tags/tag_meta.asp

     

    Sincerely,

    Shawn

    on Aug. 21, 2013, 7:13 a.m. in reply to Neha
  • Javi.ITG said:

    Here's my hand written hmtl code!

     

    on June 4, 2013, 5:45 a.m.
  • BOZY said:

    WAOOO THIS IS MY HAND WRITTEN CODE.I HOPE I'M ON TRACK

    on June 3, 2013, 11:26 a.m.
  • Felix said:

    THe code above is my hand writing code

    on June 1, 2013, 4:09 p.m.
  • GENTLE JACK said:

    This is my code

    on June 1, 2013, 12:16 p.m.
  • Yusup Saepul Rohman said:

    It took me some time, but it's new experience for me writing a code on paper..

    Handwriting HTML code

    on May 30, 2013, 2 a.m.

    hamabeboi said:

    Great job! One thing tho, the forward slash within the meta tag is unnecessary. Speaking of meta, I found this article about utf-8 useful, which I'd like to share with you and anyone else who happens upon this discussion, and which I'll be including in a post on my blog. ~HB

    on May 31, 2013, 12:16 a.m. in reply to Yusup Saepul Rohman
  • Red_Squall said:

    Done!

    on May 28, 2013, 10:48 p.m.
  • Red_Squall said:

    I Haven't started yet, after reviewing the content that we're supposed to be writing I have a (probably stupid) question...

    Doesn't the (meta) tag need to be closed (/meta)? We open all of the others and close them.. Why is the "meta" tag left un-closed?

    • (html) (/html)
    • (head) (/head)
    • (body) (/body)
    on May 25, 2013, 4:03 a.m.

    Red_Squall said:

    Nevermind... I found the answer to my own question.. The answer by the way is NO.. It does not need to be closed in HTML. It does have to be closed in XHTML though..

    on May 25, 2013, 4:08 a.m. in reply to Red_Squall

    0be1 said:

    Hello Red;

    Here is a link to W3 Schools, which I have referred to over the years and the information is very helpful and broken down into easy to understand pieces. I suggest you bookmark it as it may come in handy down the road. I hope this answeres your question(s). Have a GREAT day!!

    http://www.w3schools.com/tags/tag_meta.asp

    S
    incerely,

     

    Shawn

    on Aug. 21, 2013, 7:11 a.m. in reply to Red_Squall

    van said:

    W3 Schools rock! Thanks for referring me to that link. I think if I were to compare p2pu vs. 3w, I think 3w have so much more feature that works for me (which I hope p2pu will incorporate soon). On Wed, Aug 21, 2013 at 7:14 AM, 0be1 <
    on Aug. 21, 2013, 7:22 a.m. in reply to 0be1
  • Saivamsi said:

    This took me some time, but I kinda rember it so it never took me another paper. How cool I am?

    Check that out in here : http://saivamsiwebcraft.blogspot.com/2013/05/2-writing-html-by-hand.html

    on May 19, 2013, 11:57 p.m.
  • Briana said:

    My submission is here.

     

    Had fun with this one! Read it and thought it was tedious, but I think it was actually really helpful.

    on May 18, 2013, 3:14 p.m.
  • CircaDesigns said:

    Took me longer to figure out how to get back to posting a dang comment than writing the code.
     

    on May 17, 2013, 12:19 p.m.
  • Alex Dodd said:

    Feel free to visit my blog and leave some feedback!

    on May 12, 2013, 12:21 p.m.
  • alhassan said:

    Alsibdow

    AND now 'boooooooom' LIFT OFF! Here come a great Web Designer

    on May 9, 2013, 6:41 a.m.
  • alhassan said:

    AND now 'boooooooom' LIFT OFF! Here come a great Web Designer

    on May 9, 2013, 6:07 a.m.
  • Chidinma John-opara said:

    on May 6, 2013, 6:20 a.m.