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


  • Kal_Rad said:

    Would like to state that this is the barebones HTML 5 sourcecode. Also, when it comes to the indent as mentioned a few posts earlier it's mine and a lot of other programmer's style guide to go by <HTML><HEAD></HEAD><BODY></BODY></HTML> on the first line first space with no indents and by using the "FOUR SPACE" code indentation usage. NOT TAB. It keeps it manageable, neat and looks nice this way. You can use and adopt to any style usage you prefer though as HTML is not very strick when it comes to it's format. Hope this helped a little bit. LEARN ON! enlightened

    on Jan. 4, 2013, 10:43 a.m.
  • Jsantos350z said:

    All done with this first project check it out below!

    Stop by my blog to see this project Link

    Hello World by Jonathan Santos

    Hello World by Jonathan Santos

    This code is written by hand. How Awesome AM I!

    on Jan. 3, 2013, 2:29 p.m.
  • CarlosT said:

    Just completed the Hello World challenge:

     

    http://carlostrujilloweb.blogspot.com/2013/01/hello-world_2.html

    on Jan. 2, 2013, 10:35 a.m.
  • Eenvincible said:

    Hello guys,

    I completed my first project of creating the html hello world page! I hope you guys like it and leave me some comments!

    simple developer blog

    Thanks again

    on Dec. 27, 2012, 1:53 p.m.
  • Broderick Reyes said:

    I finished the challenge. I'm also curious about the two <body> tags being indented differently.

    http://autonutz.wordpress.com

    on Dec. 18, 2012, 10:50 a.m.
  • d-designer said:

    Here is a link my blog post on this exercise.

    I put together some short definitions for each tag for those who are writing this repeatedly wondering what it all really does. 

    -D

    on Dec. 14, 2012, 3:23 p.m.
  • Borzislav said:

    Haven't used a pencil in quite a while ;)



    Did anyone notice the difference in indentation of opening <body> and closing </body> tags? Is this done for some purpose?

    While completing this task, I tried to indent  the opening and closing tag the same amount . And now, I wonder if I made a mistake by not copying the above code with 100% exactness.

    on Dec. 8, 2012, 10:51 a.m.

    Victor said:

    No mistake in your case.

    No matter how many spaces or tabs you use between words, browser will consider that it's just one indent.

    For example,

        <p>Hello, world!</p>

    and

        <p>Hello,     world!</p>

    will be paragraph "Hello, world!" in both cases.

    There is only one exception to the rule: tag <pre></pre> that takes number of spaces into account.

    On the other hand, you can even code without spaces between tags as follows:

        <p>Hello, world!</p><p>Here are two paragraphs</p>

    Browsers are quite "smart" for that ))))

    on Dec. 9, 2012, 12:23 p.m. in reply to Borzislav

    Borzislav said:

     

    Hello Victor!

    Thank you for your reply!

    I hope it will also clarify this for other users. I do remember indentations being there only for our human comfort.

    Moreover, there are no "silly" questions, right?

    Once again, thank you for your reply!

    Cheers,

    Borzislav

    on Dec. 11, 2012, 3:13 a.m. in reply to Victor
  • Andy Crowe said:

    http://myhtmljourney.posterous.com/coding-by-hand-literally

    Just finished this challenge. Haven't coded HTML before so it was cool seeing how the different parts of the code are like doors, opening and closing the different layers! Excited to learn more :D

    on Dec. 6, 2012, 12:23 a.m.
  • P2PU_New said:

    http://myviews1969.blogspot.co.uk/  Have a look at my latest post

    on Nov. 30, 2012, 7:06 p.m.
  • Some Guy in Baltimore said:

    Hey everyone, as you all know we had to write out HTML by hand. Here is my interpretation. I had to use my mobile to take the photo so I edited it to make it a little more interesting.

    - Some Guy In Baltimore

    on Nov. 29, 2012, 12:22 p.m.
  • ILMostro said:

    *Hello World-School of Webcraft* Task #2: Writing HTML by Hand

    Hello World by ILMostro

    This is my first attempt at writing HTML code. Ohh Yeahhh!!

    This page was generated and scripted as part of a learning project on "Wrtiting HTML by Hand" with the help and support of the P2P University community.

    on Nov. 24, 2012, 11:51 a.m.
  • Anonym said:

    Hey,

    Check you my cool hand writting here .

    Regards

    on Nov. 21, 2012, 6:15 a.m.
  • Aaron Marshall said:

    on Nov. 9, 2012, 11:31 a.m.
  • CoderGirlDesign said:

    I have to say, not as easy as it sounds or looks.

    http://codergirldesign.wordpress.com/2012/11/01/html-by-hand/

    -Meisha

    on Nov. 1, 2012, 2:35 p.m.
  • Mr Brightside 66 said:

    I typed the code into Notpad. My scanner isn't working, so writing it out on paper seemed pointless and I've wrote code on paper before. It's at :

    http://myschoolofwebcraftblog.wordpress.com/tag/writing-html-by-hand/

     

    MEK

    on Oct. 19, 2012, 5:48 p.m.
  • Mario V Mtz said:

    Hello World by Sirmarz

    Hello World by SirMarz

    This code was written by hand because i still remember how to build things with my own hands.

    on Oct. 15, 2012, 7:24 p.m.
  • trilok said:

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title> Hello World by TPNanda</title>
        </head>
     <body>
     
            <h1> Hello World by TPNanda</h1>
            <p>This code cannot be erased by the sands of time. Yeeha!</p>
        </body>
    </html>
    on Oct. 15, 2012, 4:12 a.m.
  • jsrothwell said:

    Hey there

     

    I wrote my own code and did it a bit different. Its located at http://www.jamiesonrothwell.com/codesample.html. Ive been working with html for awhile so if you want to see more take a look around my site source code

    on Oct. 5, 2012, 5:27 p.m.
  • Patty said:

    Here is the link to my handwritten code.  This was an interesting exercise taking me back to when I first started programming.

     

    on Sept. 20, 2012, 11:30 a.m.