Your first web page with html: hello world

You can make a web page simply by typing HTML code (for ‘HyperText Markup Language’) in a text editor and saving it as a file with the .html extension. Browsers can open these files and show them as web pages.

So, while you’ll learn a lot about HTML when time comes,  let’s first get our hands dirty as fast as possible to get a feel for what you’ll be doing, and create your first web page!

Open notepad and type (to learn faster it’s best not to simply copy-paste!) the following:

<!doctype html>
 <title>My first web page!</title>
 <h3>Hello world!</h3>
 This is a paragraph of text.

Next, select File > Save As … in the top menu, choose ‘any type (*.*’, type index.html and hit save.

This creates a file named index.html on your computer. If you navigate to it with your file explorer and double-click, it will open in your browser, and show something like this:

Screen Shot 2014-01-16 at 13.52.49

Smile: you’re web coding!

Congratulations, you just created your first web page in HTML – maybe you’re not such an idiot after all! Now go eat a cookie, you’ve earned it.

You just did for the first time what you will be doing hundreds of times from now on, if you don’t chicken out of course. A great part of the work in building web sites consists of editing code in a text editor, pressing CTRL+S or CMD+S to save your changes, going to your browser, and hitting ‘refresh’ to see their effect.

Trust me, you’ll learn to love the ALT+TAB shortcut to switch between applications, and CTR+R to refresh your browser (or their mac equivalents using CMD) in no time.

What’s more, this lesson was more useful than it probably seemed. This web page serves as a template for all the work that follows. To follow the code snippets we show, which you should, put them between the <body> and </body> parts of your hello world page to see them in action.

In a next tutorial, we will have a closer look at the meaning of the HTML code that you used to create your web page. But first read about using a good free text editor for building web sites.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s