Tags that need to be in every HTML file: html, head, and body. Your file starts with <html> and ends with </html> to tell the browser that duh this is html. The head contains things that don't show up in your browser window, and the body is for things that do. So let's start by copying (or typing)the following basic file into your text editor. The lines are to show you where the html begins and ends, don't copy them into your file. Save it as a text file, but name it lesson2a.htm.
-------------------------------------------------------------------------
<html>
<head>
<title> Lesson 2</title>
</head>
<body>
<h1> HEADER LEVEL 1</h1>
<p> The title contained in the head of an html file does not show up on the page, but it does show up in the title bar of the browser.</p>
<P> The h1 tag designates a level 1 heading</p>
<p align="center"> This paragraph is centered.</p>
<p> </p><p> </p>
<p></p><p></p>
<p>Using multiple empty paragraph tags does not add extra spaces, the browser will ignore them.</p>
</body>
</html>
------------------------------------------------------------------------------
If you already know this much HTML, you can skip this one.
Pay attention to where on your computer you save it because now you need to open it. In your blank browser window or tab, open this file. (Or, open mine by clicking on this link Lesson2a.htm.) Also, read the words in the paragraphs. Each time you open a sample page be sure and look at each line of HTML and see how it is rendered in the browser.
Some things to notice at this point about html:
HTML is not case sensitive.
Paragraph tag: I already showed you the paragraph tag. Notice the <P> before the level one header. It doesn't matter in html whether you use P or p. This is not the case for XML or Javascript.
Line breaks don't mean anything. The browser only cares about start and end tags. They could all be in one long runon sentence, but that would be hard to read.
Paragraph tags with nothing between them (<p> </p>) don't do anything. The paragraph tag is a container tag. It tells the browser to apply paragraph formatting to the contents of the tag. If there are no contents, the tags are ignored. A regular space is the same as empty.
Heading tags: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> and <h6></h6> There are 6 levels of headings, 6 is the lowest and smallest. Headings (and paragraphs) can be aligned center, right, or left, with this format:
<h1 align="center"> This is a level one heading</h1>
Notice that the attribute (center) has to be in quotes. This is true for basically all attributes, even numbers.
<br> tag - mentioned above, this tag is a command to go to the next line. This is an empty tag.
<i> </i> italics tag. You can also use <em> </em> to do italics, but why would you want to? The <i> tag is shorter to type and easier to remember.
<b> </b> bold tag. The <strong> </strong> tags do the same thing.
<tt> </tt> teletype text or typewriter text (monospaced text) Alternate tags that do the same thing are <kbd> </kbd> (keyboard), <code> </code>, and <samp> </samp>
<sup> </sup> Superscript
<sub> </sub> Subscript
<strike> </strike> strikethrough, can also use <s></s> or <del> </del>
<u> </u> underline
<!> comment. This just needs one tag, like this: <!put a comment here>
<blockquote></blockquote> This should go outside the paragraph tags, not inside. This text will be double indented from both margins.
<pre></pre> preformatted text. Anything inside these tags will show up exactly as typed including all spaces. (Html usually ignores more than one space.) This was used in original Html to make tables before the table tags were implemented. Notice the difference in your browser between the preformatted text lalala and the same text in a regular paragraph.
OK, let's look at a script using all these tags so you can see how they work - copy the following into a Wordpad or Notepad file and save as lesson2b.html.
--------------------------------------------------------------------------------------------------
<html>
<head>
<title> Lesson 2B</title>
</head>
<body>
<h1 align = "center"> HEADER LEVEL 1 - Centered</h1>
<h2 align = "right"> A right aligned header level 2 </h2>
<h3 align = "left"> A left aligned header level 3</h3>
<h6> A Small Header Level 6 </h6>
<p> Don't these headers look dumb?</p>
<p> These words</p> <p> are in </p> <p> 3 different paragraphs</p>
<p> These words<br> are in <br> one paragraph <br> with some line breaks </p>
<p align="center"> This paragraph is <b>centered</b> and the word <b>centered</b> is in <u> bold</u>. The word <u> bold </u> is underlined</p>
<p align="center"> This paragraph is <i>centered</i> and the word <i>centered</i> is in <u>italics</u>. The word <u>italics </u> is underlined.</p>
<p> <tt> This is what text surrounded by the tt tag looks like </tt></p>
<!This is a comment so this sentence will not print>
<p> The st in 1<sup>st</sup> is in superscript. </p>
<p> I have put the b in lesson 2<sub>b</sub> in subscript.</p>
<p> <strike> This sentence has strikethrough tags around it. </strike>
<blockquote> All of this text is inside a blockquote. I have to make this longer so that you can see how it works.
All of this text is inside a blockquote. I have to make this longer so that you can see how it works.
All of this text is inside a blockquote. I have to make this longer so that you can see how it works.
</blockquote>
<pre>
lalala lalala lalala lalala lalala
lalala lalala lalala lalala lalala
</pre>
<p>
lalala lalala lalala lalala lalala
lalala lalala lalala lalala lalala
</p>
</body>
</html>
------------------------------------------------------------------------------------------------
Take a look at the script and the resulting html file (lesson2b.htm) to make sure you are still following. This is the end of lesson 2. You have probably been working for at least 15 minutes or so now, so you may want to take a break. :)