Your first lesson: Learning HTML and web page layout
Getting Started
Congrats on starting your first tutorial in this collection. Getting started with this tutorial should be straight forward. You won’t need to download anything or set anything up. Everything you need is already on your computer. The two programs or ‘tools’ you will use today are a text edit or and your preferred Internet browser (Safari, Chrome, Internet Explorer, FireFox, etc).
Let’s start by opening our first tool, called a text editor. If you’re using a Mac, open TextEdit. If you’re using Windows, open Notepad. If you’re not sure how to find them, you can click the links. We have to use a text editor like TextEdit or Notepad, rather than something like a Word document, because Word documents and other similar programs embed code and special characters in the background that the user can’t see. Those characters would interfere with the code that we are about to write, so we will use a simple text editor, which will only include the characters and text that we add ourselves.
HTML — The Language of Web Pages
Every web page uses a technology called HTML. HTML is used to create the main page that the user will interact with, and to give it structure. The HTML file is then read by the browser, which knows how to turn your code into a web page.
We’re going to start with the basic layout that every web page uses. While you can copy and paste the code below, it’s best to type it into your text editor yourself, so you can start getting the feel of HTML. Be sure to pay attention to the indentation. Indentation will not affect how the browser reads the code, but it will help you keep your code in order as you go. Taking indentation seriously is a good habit to start now. It will save time, and make your code easier to read when you with others on a larger project.
Here is the basic code structure for HTML.
<html>
<head>
</head>
<body>
</body>
</html>
After you’ve written that, the first thing we always do when we finish typing, is save our work. Power failures or other minor catastrophes can be really frustrating when you lose hours worth of work or study. So click Save As, and let’s name this file hello_world.html Make sure you change the file extension from .txt to .html in the Save As window.
Now that your file is saved let’s go line-by-line, and describe what our HTML is telling the browser to do.
Our first keyword: HTML ‘tags’
The <html> tag
The first line of our file is simply <html>. When two arrows surround a word like that (< >) the entire set of characters is called a tag. This is an important keyword that you’ll want to remember, because HTML revolves around the use of these ‘tags’. The <html> tag will always go in the first line of any web page. Otherwise, your browser won’t know that it’s working with HTML and won’t render the page properly.
The <head> tag
Right after the <html> tag, we have the <head>. The next line is almost the same, but it has an extra slash in it: </head>. The first line, <head>, is known as the opening tag. The next line, </head> is the closing tag. Each tag must be opened and closed. If you skip to the bottom, you can see that the last line is </html>. That line closes tells the browser that there is no more HTML to read. So just keep in mind that whenever you open a tag, you must eventually close it as well.
When a web page is opened on a browser, the user won’t be able to see what’s in the <head> section. In this section, we will put links to other code files, information for search engines, and the title of our page. For now, let’s start by adding a title.
...
<head>
<title>My first web page!</title>
</head>
...Notice how <title> is another tag and the line ends with a closing </title> tag. Everything that goes in the middle, the browser will render according to that tag. You’ll notice that this time, we have the opening and closing tag on the same line. This is a matter of preference and won’t affect how the HTML is read into the browser. As with indentation, this is something programmers use to keep their code readable. As you work with more code, you’ll get a feel for when to have a tag open and close on the same line, like <title> and when to have it on separate lines, like <head>.
The <body> tag
The next tag is the <body> tag. This is where you will put every thing that the user will see. Inside of here, there are several tags we will use. We will start with a header, called <h1>. There are headers 1–6 (<h1>, <h2>, <h3>… etc). Each header is slightly smaller than the one before. The main title of your webpage should always use an <h1>. We can adjust the size later, so don’t think you’re set on just the 6 header sizes.
Inside of body, let’s add a header that says “Hello World!”. Hello world is the first program that every programmer starts out with, no matter what progamming language they learn.
...
<body>
<h1>Hello World!</h1>
</body>
...Once again, we see an opening and closing tag, with text in between.
Opening the HTML in your browser
Your final code should look like this.
<html>
<head>
<title>My first web page!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Save the text file again, and open it with a browser. You can do this by finding the file, using right click and using ‘open with’ to select the browser you’d like to display your first web page in.
Once you click that, you should have a new tab on your browser. The tab itself should say, “My first web page!”. On the page you should see the words “Hello World!” on a plain background.
Congratulations! You just made your first web page.
Summary
Great start! That’s it for today. Today, you learned what tool to use and why. You also learned how and why to save to the correct file extension, and you learned how to layout your first webpage, using several tags that you will use in every project.
That didn’t take long, did it? Each tutorial will be short, like this, and focus on a single skill. That way, you can see progress every time you sit down at the computer. I would recommend not doing too many in a day. Let all of that new knowledge sink in, so it’s like second nature. Don’t rush, take your time and have fun.
Our next lesson is going to be about how to add more HTML to your webpage. You will use paragraphs, lists, and links to other websites. Connecting your page with the millions of sites on the broader Internet.
See you then!
