skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Basic Page - L. 01

(This tutorial was begun as a fun project in The Studio at Eons shortly before Eons closed down. Now we will continue it on Epic Years.)

Let's have some fun with HTML and learn a little as we go.

To write the code, you'll need a plain text editor (not MS Word). Some folks use Notepad (Free with Windows) or Textedit (Free with Macs) to write their code. Be sure you have made the necessary settings if using Windows, Notepad or TextEdit. Other plain text editors are Notepad++ (free download for windows) and Text Wrangler (Free download for Macs). Other plain text alternatives are listed on the "necessary settings" page.

To view what the code will look like when it renders - any old browser will do. Whatever you use to surf the web will be fine.

If you want to play along as we go, grab your plain text editor and let's get started!

Organizing

Create a folder on your desktop for your web page files. Although you could name it whatever you like, we'll name it "myweb" for this tutorial.

Next, we're going to create an HTML file with our plain text editor and save it before we add any code. That way, if there are problems that pop up about saving the file, you can troubleshoot and get those out of the way. So . . .

Open Notepad or Textedit (or other plain text editor) and go to "File" --> "New". Then go to "File" --> "Save". When the dialogue box comes up, name the file - index.html

Saving with Notepad:
To keep Notepad from adding the .txt extension:

  1. Click on "File" and then "Save As"
  2. Navigate to the folder you want to save in
  3. Change the "Save As Type" drop-down menu to "All Files (*.*)"
  4. Name your file, be sure to include the .html extension and put the whole name in quotation marks (e.g. "index.html")
Saving with TextEdit:
TextEdit will probably ask if you want to add .txt extension and give you choices. Choose "use .html"

Note: Generally, when you are using basic HTML to create a website, the home page will be named - index.html Later on, you'll be naming your other pages. It's generally best to keep all file names lowercase. Don't include spaces. You can use - and _ But all pages will have the .html extention. Examples: about.html - contact.html - gallery.html

Adding code to the index.html file

Open your plain text editor. Then go to "File" --> "Open" and navigate to where you saved your HTML file. Click on it and then cick "Open". NOTE: The necessary settings file has some tips on opening a file if you are using Notepad.

Your file should now be in a window so you can work with it. The steps might be a little different for opening a file depending on which text editor you use, but it should be similar.

Copy and paste the following into your HTML file:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

Now save it. ("File" --> "Save")

Viewing the index.html file

You already have your browser open or you wouldn't be viewing this page, LOL. Open a new window in your browser. In Firefox, you can go to "File" --> "New Window"

Now open the HTML file you just saved in the new window. In Firefox, you can go to "File" --> "Open File". A dialogue box will open. Navigate to your file and click on it and then click on "Open"

In your browser window, you should see "The content of the document......"

At the very top of your browser window, you should see "Title of the document"

Each time you make changes to your HTML file and save them, you can refresh your browser page and see the changes you've made.

What did you just do?

Let's talk about what you just added to your HTML file.

The Doctype declaration. Don't let the technical talk cause you dismay. You don't need to understand all about doctype as long as you copy and use one that is acceptable. You might think of doctype as something that tells the browser what "type" of HTML is used in the "document". The browser uses the DOCTYPE element to decide how the document should be rendered. We are using:

<!DOCTYPE html>

This is the new HTML5 doctype. We are going to use it because it's simple and it works in all major browsers. The major browsers will render the page in "standard" mode rather than kicking into "quirks" mode which is always a good thing. You can use HTML 4.01 syntax or XHTML syntax in the HTML file as you write it (just don't mix them). You could even use new HTML5 tags, but they aren't fully supported yet, so we won't get into those.

You can learn more about doctype at these links:

Now let's look at the rest of the code so far:

<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Notice the code begins with <html> and ends with </html> Normally, just about everything will go between the beginning and ending html tags.

Each HTML page will have two main sections:
The head section which is in between the beginning and ending head tags <head> </head> In our code, the head section looks like this so far:

<head>
<title>Title of the document</title>
</head>

and the body section which is in between the beginning and ending body tags. <body> </body> which looks like this in our code:

<body>
The content of the document......
</body>

Generally, people will not see what is put in the "head" section of an HTML page. This is where information is put for the browser to read and then do what the instructions say to do. More about that later.

One exception is that people will see what is put in the "title" in the head section. But they won't see it on the HTML page itself. The "title" will appear at the top of the browser window.

Look at the top of the browser window where you are reading this page. You should see
Website with external css file - Lesson 01

Let's change the title in your HTML page and see how it changes. Look for this code in your plain text file: <title>Title of the document</title>

Change the words between the title tags. I think I'll put
<title>Are We Having Fun Yet?!?!?</title>

Save the change you made. ("File" --> "Save") Click to make the browser page active that is showing your HTML file and then refresh/reload the page.

You should see the new text at the top of the browser window.

The Importance of the Title

The title tag is important because it will appear at the top of the browser page, in search result pages and sometimes on external websites at the words for a link. It's generally best to use less than 70 characters since this is the limit Google displays in search results.

You can learn more about titles at these sites:

Next: Common Containers Lesson 02 -->

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08