NHS Designs
Web Design

HTML 01: Beginning tags and structure

What is an HTML File?

  • HTML stands for Hyper Text Markup Language
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page
  • An HTML file must have an htm or html file extension
  • An HTML file can be created using a simple text editor


Let's Try It!

Start Notepad (Start > Programs > Accessories > Notepad).

Type in the following text:

<title>My First HTML</title>
<body><p>This is my first HTML page. <strong>This text is bold.</strong></p>
<p>This is the second paragraph.</p>

Save the file as "mypage.html". 

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.html" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.


Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> and </title> tags is the title of your document. The title is displayed in your browser's top-most bar.

The text between the <body> and </body> tags is the text that will be displayed in your browser.

What happens to the text between the two sets of <p> and </p> tags?

What happens to the text between the <strong> and </strong> tags?


Now Experiment

Create your own HTML page using the tags you've learned so far. Make sure you always include the <html>, <head> and <body> tags for every HTML page, in the order you see above.

Try adding your own text between the main <body> tags which has the following tags wrapped around it:

  • <p><em> and </em></p>
  • <h1> and </h1>
  • <h2> and </h2>
  • <li> and </li>
  • <blockquote> and </blockquote> (put a lot of text inside these to see what they do)

How did these tags effect your text?


Note on HTML Editors:

You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like Dreamweaver, instead of writing your markup tags in a plain text file.

However, if you want to be a skillful Web designer/developer, we strongly recommend that you use a plain text editor to learn your HTML.


Frequently Asked Questions

Q: After I have edited an HTML file, I cannot view the result in my browser. Why?
Make sure that you have saved the file with a proper name and extension like "c:\mypage.html". Also make sure that you use the same name when you open the file in your browser.

Q: I have edited an HTML file, but the changes don't show in the browser. Why?
A browser caches pages so it doesn't have to read the same page twice. When you have modified a page, the browser doesn't know that. Use the browser's refresh/reload button to force the browser to reload the page.

Q: Why aren't my spaces and line returns showing up in my browser window?
HTML does not recognize line returns when displaying text in the browser. It also does not recognize more than one space in a row. We'll talk more about this later.

Source: w3schools.comexternal link



Complete tutorials above. Based on your results, write the answers to the following questions on a sheet of paper and turn it in. You do not need to turn the file in.

  1. What does the <html> tag do?
  2. What does the </html> tag do?
  3. Is text that is inside of the <head> and </head> tags displayed in the browser window?
  4. What do the <title> tags do to the text inside them?
  5. What tags would you put text inside of that you want displayed in the browser window?
  6. What does the p stand for in <p>?
  7. What do <strong> tags do to text?
  8. What do <em> tags do to text?
  9. What do <h1> tags do to text?
  10. What do the <blockquote> tags do to text?


resources · copyright information · Natomas High School Design Department