Hello World!

This lesson is part of the Web Programming 1 Course.

In this activity we will create our first web page, which will say "Hello World!"

We'll use NotPad to do this activity. If you're on a Mac, you could use Text Wrangler.

For this activity, we'll need to see the file extensions for the files that we work with. Here's a link that explains file extensions and how to see them.

Create a file by right-clicking on your desktop, choosing New, then choosing Text Document.

Note that the file name will end in .txt, this is known as the file extension.

When you double click on a .txt file, Windows will open the file in NotePad, which is a very basic text editor that we can use to write HTML code (in the next lesson we'll install a text editor that is much better than NotePad for writing HTML code).

HTML code is made up of elements. For now you can think of elements as containers, that can contain other elements (we'll see later in the course that not all elements can act as containers).

An element is made up of an opening tag and a closing tag.

The closing tag includes a forward slash.

Every programming language has a syntax, which are the characters that you use when you write the code. Syntax in programming is like grammar in English (it's a bunch of characters that must be used properly to follow the rules of the language).

Every web page should include the following elements:

html - contains the entire html document (web page), also known as the root element
head - contains information about the web page
title - displays the title of the page in the browser tab (should be inside the head element)
body - contains the content of the page that is visible in the browser window.

When you put an element inside of another element, you should indent it.

Here's the HTML code we wrote in the activity:

<html>
	<head>
		<title>My first web page!</title>
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

Inside the body element we added an h1 element that contained the content 'Hello World!'. If you put content inside an h1 element, it will appear big and bold. We'll talk much more about various elements throughout the course.

Review Questions

What is the file extension for a web page?
Why do elements consist of an opening tag and a closing tag?
What is syntax?
What is the syntax difference between an element's opening tag and closing tag.
What is the purpose of the head element?
What is the purpose of the body element?
What is the purpose of the title element?