#3 Choose Your Weapon

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

Task Navigation 

View Your File in a Browser


Create your first web page

In choosing your text editor and writing the 'helloworld.html' file, you've just created your first web page. Now you will view it in all of its glory. This is just a quick task and it should only take five minutes at most. 

Open up your web browser and from the file menu at the top choose File > Open and open the 'helloworld.html' file that you've just created. Congratulations for the second time. That's a web page that you created.

Task Discussion


  • Teresa said:

    Here's a link to my assignment. I used Dreamweaver to code the HTML and the tools for CSS in the program for the colors of everything.

    Good luck, everyone!

    on Aug. 27, 2013, 8:28 p.m.

    SamCoulter said:

    Looking good keep up the good work :)

    on Sept. 7, 2013, 3:09 p.m. in reply to Teresa

  • 0be1 said:

    Here is the link to my assignment. Not very impressive, I know, but necessary :o)

    http://sdgwebdesigns.com/p2pu/2013/08/21/3-choose-your-weapon-view-your-file-in-a-browser/

    on Aug. 21, 2013, 2:01 p.m.

  • wikiglobalgov said:

    phewww... as a complete noob it took me a little while to figure out and save as a .html file so that it would open. Very pleased with my first ever web page!

    on July 30, 2013, 6:32 a.m.

    ays said:

    I hear you!

    on July 30, 2013, 6:37 a.m. in reply to wikiglobalgov

  • Philomath said:

    I've used many editors, and finally settled on KomodoEdit for web-related editing and various scripting languages, the community (open source) edition of ActiveState's commercial IDE.

    It's built with JavaScript and runs on the Gecko engine from Mozilla.

    http://www.activestate.com/komodo-edit

    on July 28, 2013, 11:22 a.m.

  • lkeude96 said:

    I compare 2  of my favorites for mac users http://keepcoding101.wordpress.com/2013/07/24/choose-my-weapon/

    on July 24, 2013, 12:20 a.m.

  • Joby John KJ said:

    here is my blog on "Choose your  weapon"

    http://jobyjohnkj.blogspot.com/2013/07/school-of-webcraft-webmaking-101_289.html

    on July 21, 2013, 4:35 a.m.

  • S.Norman said:

    Here we go.  Notepad++ and Dreamweaver.  Notepad++ is easier to use for me right now.  Dreamweaver seems to have a LOT of stuff going on.

    Dreamweaver

    Notepad++

    on July 18, 2013, 7:04 p.m.

  • Beth said:

    Here is my screenshot!

    on July 9, 2013, 12:42 p.m.

  • S1Gen said:

    Learn to code: http://codepen.io/anon/pen/szcaI

    on July 7, 2013, 6:34 p.m.

  • Nicolem said:

    Hi hoping someone may be able to assist? I have tried this twice once with sublime and one with notepad and when I open both html documents in ie all the tags show up on the ie page, I have posted a temporary pic on my blog - thanks for any assist.

    http://nicolemwhite.tumblr.com/

    on June 26, 2013, 9:33 a.m.

    algotruneman said:

    Nicolem,

    In your photo of the screen, the file name seems to be helloworld.

    Double check to see if you saved the file  with a name and an appropriate file extension after a period like: helloworld.html

    If you only saved the file without the html file extension (or the Microsoft alternative file extension htm), it seems Internet Explorer thinks it is just a text file and shows you the text. Microsoft made much of creating the file extension system long ago. It looks like the extension may be required for proper IE display of the file.

    The Firefox browser is also on the Windows 7 machine where I tested this issue. Firefox rendered the file correctly even without the file name extension.

    Avoid any confusion. Use file extensions with the Web files you create. You will need them later when you work with cascading style sheets, etc. (style.css)

    --Algot

    P.S.

    Some time back, Microsoft changed the settings to hide file extensions as the default in screen views. Go to the Control Panel to change the default if you need to show the exensions.

    on June 26, 2013, 1:28 p.m. in reply to Nicolem

    Nicolem said:

    hi Algot,

    Thank you so much for taking the time out to answer my question. It's so simple, but I tried and tried and couldn't figure it out for the life of me as I was presuming when I saved the file type as HTML the file would automactically be saved as .html - as this happens with other apps I use. Thank you I was getting worried there for a second :-)

    Have a great day/ night!

    nic :-)

    on June 27, 2013, 9:04 a.m. in reply to algotruneman

    algotruneman said:

    Nicole,

    You are right. Most applications have a default type for a file and add the appropriate extension on a computer running Windows.

    When using a basic text editor, the file may turn out to be anything, of course, html, css, xml, etc. (No etc. isn't a recognized extension as far as I know [Wait! Just checked, and it is used for a kind of compressed file, almost like .zip, I guess.]) Adding the appropriate extension needs to be your job.

    The smallest of details are often what mess up our pages on the web. One of the great things about doing web coding by hand is the chance to become aware of the way correct code looks. Of course, it also introduces the chance to make more typos.

    Glad to help.

    --Algot

    on June 27, 2013, 9:25 a.m. in reply to Nicolem

    Nicolem said:

    Hi Algot,

    Fantastic thank you again :-) that all makes perfect sense, yes the smaller details are almost always the most important :/)

    thank you!!!

    on June 27, 2013, 12:19 p.m. in reply to algotruneman

    Christina said:

    Hi Nicole, is this still an issue? If so, I noticed the code  is missing the left quote around utf-8.

    You have:

    <meta charset=utf-8">

    should be:

    <meta charset="utf-8">

    Hope this helps!

    on June 30, 2013, 8:59 a.m. in reply to Nicolem

  • Cristian Gomez said:

    Here you can watch my html hello world

    on June 20, 2013, 10:47 p.m.

  • S1Gen said:

    Here is my posting of the HelloWorld.html file.  Link: http://codepen.io/anon/pen/KGCgh

    on June 16, 2013, 2:19 a.m.

  • BlueHwyaden said:

    Proof of viewing my file in a browser.

    http://dafyddcollard.wordpress.com/2013/06/13/view-your-file-in-a-browser/

    on June 13, 2013, 9:31 a.m.

  • Felix said:

    Iam done, but can anyone assist me in coping my page and posting it here like other guys have done?

    on June 13, 2013, 5:18 a.m.

    BlueHwyaden said:

    In the case of you don't know how to printscreen + paste:

    On your keyboard you should have a PrintScreen button.

    By pressing this button you take a copy of the monitor, and if you open up an image editing software (e.g. paint, paint.net) and you press Ctrl+V this pastes your screen shot for you to be able to save and upload here.

    In the case of you don't know how to post an image by commenting:

    When you click post comment; there is a tab above the box in which you type your message in.

    Of coruse there are a number of tabs, the only you're looking for is beneath the HTML and general font settings tabs. I have highlighted this tab in this image for you:

    In the highlighted tab - clicking the third button - this should be labeled as "Image". This allow you to upload a photo.

     

    I hope this has helped.

    on June 13, 2013, 9:25 a.m. in reply to Felix

  • GENTLE JACK said:

    This is how my codes appeared on the browser. I am excited because I am making a head way.

    on June 2, 2013, 7:25 a.m.

  • Yusup Saepul Rohman said:

    Hello world

    on May 31, 2013, 3:03 a.m.

  • Shep4isa said:

    on May 14, 2013, 2:15 p.m.

  • Shoe Mogul said:

    I did mine using Notepad++

    on May 11, 2013, 11:28 p.m.