Hello World! (in HTML)
It's easy to find examples of the Hello World program all over the Internet. We're going to do our own in a slightly different way.
The Task
Create a file called index.html that has the very basic structure of an HTML file. The title should be "My First Web Page!" (without quotes) and the body should contain "Hello World!" (without quotes). Do it using only a plain text editor (leafpad, notepad, etc...). Remember to save the file in your editor before you refresh the browser.
Confused? Read on. Ahead of the game? There is a second task below, so keep reading.
It is important to know that Word and Google Docs are not plain text editors. They have formatting. Notepad in Windows is a great example of a plain text editor - you cannot format the text, create headings, etc. You can only type.
What you need to know
HTML is not a programming language. It is a markup language. That means it describes how information will look or be presented through an application that can interpret it (a web browser).
Hypertext Markup Language uses "tags" to decide how information or media will be presented. For example, this bolded text would be surrounded by <strong> and </strong> tags (or something similar - it has changed many times over the years).
Here is my interactive video on HTML - The Very Basics.
<- 18 minute intro to HTML (shorter version coming soon)
What does that have to do with Hello World?
Normal Hello World actively "prints" Hello World to the screen based on a command in a programming language. Typically this would be to the console or standard output (like a terminal window) but these days we want pretty output to our phone, monitor, television, or projector - anything that can display a pretty picture.
We are going to make our first attempt at displaying text in a webpage by learning the very basics of HTML. Keep in mind, this is not programming in the traditional sense - we cannot do math or react to clicks or interact (yet).
The Structure of HTML
HTML documents have two main parts - HEAD and BODY. Similar to you as a human, your thoughts are kept private in your head but we can see you body and even put makeup and clothing on it.
A document is made of chunked text that might have beginning and ending tags to describe or provide a style to the text (like bold or italics). Here is the basic structure of an empty HTML file:
It is an HTML file because of the first tag, <html>, and lets us know when the HTML code is finished because of the ending (or closing) tag </html> at the very bottom. You can see it has a <head> which ends at </head> and similarly, it has a <body> where the actual visible content goes.
A Second (simple) Task
Your index.html file is pretty boring. Let's spice it up.
There are heading tags with predefined formats for quickly creating a larger, bold heading. Try wrapping your Hello World! text with <h1> and </h1> save the file and refresh your browser. It should look bigger and bolder. There are 6 of these heading tags <h1> through <h6>. Play around with them a bit to see the differences between them.
Last updated