NHS Designs
Web Design
HTML

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:

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

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?
A:
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:
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?
A:
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

 

Assignment

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?

 


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by >