HTML5: Creating Your First Web Page

This Quick-Start HTML Tutorial can help you build a simple web page with a text editor like Notepad. The HTML codes you will learn here will be used under the hood when you later use a sophisticated product like Dreamweaver, or an online service like Homestead.

For this page I created a text file using Notepad, and then added HTML tags to tell the browser how to display the page. I saved the document as a text file with the .htm extension, using the File -> Save As commands (details below).

What is HTML?

HTML stands for HyperText Markup Language. HTML5 is the latest version of HTML, and adds new features to handle text and multimedia content on personal computers, tablets and smartphones.

HTML tags will display enhanced text, photos, artwork, and external video clips. Tags are also used as hyperlinks to other web pages, multimedia clips, PDF files, PowerPoint slides, and other document files. Tags are surrounded by angle brackets < and >.

Example: The <strong> opening tag before a word tells a web browser to show the word in bold. The </strong> closing tag after the word sets the text back to normal. I will explain a few more tags later.

Starting Your First Web Page Now!

Right-click on the picture of this cat below and save it to a folder on your computer, so you can use it as an image on your web page. Then create a document in Notepad using the example in the source document below. Further details about tags are listed after the exercise.

When finished, save your Notebook source document by doing the following:

At the File menu, click Save As.
In File name, choose a name, and then add the .htm extension, and then use quotes around the file name (example: "mypage.htm").

The document and the cat's picture must be in the same folder for this example to work.

Source Document

Web Page

<!DOCTYPE html>

<html lang="en-US">

<head>
<title>Your Title</title>
<meta charset="utf-8">
</head>

<body>

<h1>Welcome!</h1>

<p>
<img src="cat.jpg" width="75" height="75" alt="cat">
</p>

<p>
I will <strong> link </strong> to
<a href="http://www.yahoo.com">Yahoo</a>
</p>

</body>

</html>

Welcome!

cat

I will link to Yahoo

HTML Tags Used in the Example

<!DOCTYPE html> declares the Doctype as an HTML5 one for browsers and validatiors.

The source document's text and codes go between the <html> opening and </html> closing tags. Attribute lang="en-US" matches the English language on your page.

An HTML source document contains two sections: <head> and <body>.

The Head section (with the <head> and </head> tags) contains your title for the top of the browser, plus meta tag data for search engines.

Type your title's name between the <title> and </title> tags.

Tag <meta charset="utf-8"> is used because it is the most versatile character encoding.

The contents of the Body section go between the <body> and </body> tags.

Header text goes between the <h1> and </h1> tags. Largest to smallest levels are <h1> to <h6>.

<p> starts a paragraph, and </p> ends it.

The image tag needs source, width, height and alt (description) attributes:
<img src="cat.jpg" width="75" height="75" alt="cat">. The image element and a few others do not have closing tags.

Text between <strong> and </strong> appears in bold type.

<a href="http://www.yahoo.com">Yahoo</a> links this page to Yahoo.com. To link to a second page on your own site, use the attribute href="page2.htm". The a tag stands for anchor. The word Yahoo between the anchor tag and its closing is set as a hyperlink.

Further Study: Visit the tutorials at the right sidebar to learn more about creating good web pages.

CreatingYourFirstWebPage.com
Created March, 1996. Updated February, 2013.
E-mail questions and comments to Bill Dillane