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.
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?
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.
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.
- What does the <html> tag do?
- What does the </html> tag do?
- Is text that is inside of the <head> and </head> tags displayed in the browser window?
- What do the <title> tags do to the text inside them?
- What tags would you put text inside of that you want displayed in the browser window?
- What does the p stand for in <p>?
- What do <strong> tags do to text?
- What do <em> tags do to text?
- What do <h1> tags do to text?
- What do the <blockquote> tags do to text?