Setting Up A Web Page

Before we get to the fun stuff, we have to make sure our new HTML document is setup right. Notice that most tags have two parts to them. One opening tag and one closing tag. Think of it like a sandwich, and the tag is the bread. You can't have a sandwich without that bottom piece of bread, so always remember to close your tags!

Here are some things you should make sure you always have when you're starting a new web page:

<!-- Comments -->
Comments are different in each programming language, but in HTML it looks like this:

<!-- top secret comment -->

It is important to use comments a lot in your code, so that you can keep track of where you were and what you were doing. It also helps other people know whats happening if you share it with a friend or colleague.
<!DOCTYPE html>
You only have to use this once per HTML document, and it goes right at the top. It tells the browser that the document will be coded in HTML.
<html>
The HTML tag goes right after the doctype, and acts as that first piece of bread on the sandwich. The whole website will go inside this.
<head>
The head is the brain, really. It does more document setup and it's were you can put a ton of information that will help search engines find your website. On the right side of the screen are the most important parts of the head.
<body>
The body is where all of the visible elements go. It is here that you will start making the skeleton of your site.

Try it out

Check out the code on the right. It's just a blank HTML template, but it's missing some elements. Complete the template before moving on to the next lesson so we can get started on making a cool site.

Got it! ✓

<!DOCTYPE html>

<html>

	<head>

		<meta http-equip="Content-Type" content="text/html; charset=UTF-8">
		<title>My First Web Page</title>
		
	</head>

	<body>

		<h1>Welcome to my site!</h1> <!-- top secret comment -->
		
	</body>

</html>
			

preview