link to hitmill.com home page


Lesson 2: Headings and Special Effects

HTML Tutorial

If you are new to this HTML tutorial and did not read the previous HTML tutorials, I talked about making a Web document (coding HTML) using a text editor.
Examples of text editors are NotePad (for Windows), SimpleText(for Mac), EditPlus(for Windows), BBEdit(for Mac),and Vim for Linux.
Amaya, free from the World Wide Web Consortium is an Editor/Browser.
Changing Sizes of Titles and Making Paragraphs,
Special Effects, and Line Breaks
This section is really a fun part of learning about HTML 3.2. Text properties you can control include the text color, the text size within the constraints of <H1> through <H6>, and the face which is the font type. The largest heading size (without using style sheets) is the H1 heading coded this way:

<H1>Very Large </H1>

It begins with the <H1> "tag" and ends with the </H1> "tag". Essentially the beginning and the ending looks just the same except the ending "tag" has the forward slash in front of it. This will pretty much be the rule with the forward slash in front of all ending "tags" in HTML coding. I hate the word "tag" since the H1 heading is really considered to be an "element". But you see, the "element" is made up of all of the parts, the beginning "tag" and the ending "tag" and the text in between is all grouped together and called the H1 "element".
The H2 heading is coded:

<H2>This is an H2 Heading</H2>

This is an H3 Heading:

<H3>This is an H3 Heading</H3>

Sometimes you will want to put a line break into a heading so that part of your heading continues on the next row. The line break is done by coding <BR>. There is no closing "tag" required for a line break. Remember that with headings you must use the closing "tag" that looks like the opening "tag" but has the forward slash in front of it. The opening "tag" for the H4 heading is <H4> and the closing "tag" for the H4 heading is </H4>. It looks like this:

<H4>This is the H4 heading<BR>
with a break in the middle</H4>

Anytime you want to force the browser to make a line break just code <BR>. This can be done with all text formatting, not just in headings, but in paragraphs and table cells as well.
More About the <BR> Tag
The <BR> line break tag will not appear on the Web page but the result of the <BR> tag will be seen as a line break. Does that make sense? The "tag" <BR> itself will not be seen.
You do not have to hit the Enter key for a line return just because you coded a forced line break. White space in the Web document where you code is empty white space which does not appear on the actual Web page. Only when you code the <BR> tag, will the line of text actually halt and begin anew on the next line. Without this tag, typing word-wraps inside whatever "container" (like a table cell) the text is being coded within. In the document, a line break can occur anywhere but in order to force a line to break where you want to on the Web page you should code the <BR> tag.  If you work with tables of a specific width any text placed into a <TD></TD> element pair will be constrained by the width of the column or the table cell, depending upon how you code your table. You will get to understand this better when studying about HTML tables.
Beginning and Ending A Paragraph, Boldface, Underline, <EM>, and Italic Text
A paragraph begins with <P> and ends with </P>. To make certain text appear bold use the <B> to make text bold and</B> to turn off the boldface type. The <EM> will emphasize type and </EM> will turn off the emphasis. If your type is already a boldface these effects will not increase the amount of boldface (character width or darkness). You may turn on and off underlining text with the <U>underlining tags</U>. Lastly, you may use the <I>italic effect</I>.
Teletype Text with <TT>, Subscripts and Superscripts
<TT>Teletyped text is monospaced. This text is useful for formatting money in dollars and cents so the decimal "lines-up" in the table you use.</TT>
To make characters subscripted or superscripted use the <SUB></SUB> or the <SUP></SUP> such as coding H<SUB>2</SUB>0 to write H20.
To write exponents use the <SUP></SUP> "tags", such as before and after the 4 in this next example: 24=16. In other words, just code:  
If you are citing a particular reference or book use the <CITE></CITE> element ("tags" and content) such as:
The following information was found in the <CITE>San Francisco Chronicle</CITE> newspaper.
Avoid special effects like the <BLINK> tags which are proprietary rather than multiplatform. <BIG> increases the font to the next larger size and <SMALL> decreases font size.
The <BASEFONT> tag will allow you to set the font size that the browser will use to render the normal document text. Size is the only attribute of the <BASEFONT> tag. Turn it off before using a <FONT> tag.
When you are working in NotePad or a different text editor program and are coding HTML code, it does not matter a bit about "white space" in the coded document because the browser will ignore any extra "white space" in your typing. The browser will not put that extra "white space" onto your Web page. What will be on the Web page is the browser's interpretation of how that page should be rendered (interpreted) based on certain HTML elements ("tags") that you have coded.
Other Factors Affecting HTML Text and Titles
Besides pure HTML code affecting HTML Text and HTML Titles the styling technology of Cascading Style Sheets (CSS) will also affect how your Web page looks... Purists believe that the HTML tags should only be responsible for content while any styling such as size of font, color of font and even spacing, line-height and layering should be done using Cascading Style Sheets rules. To say Cascading Style Sheets rules is not a grammatical error but the technology itself is called Cascading Style Sheets.
In Review, take a look at relative sizes of these headings:






Ultimately, the Web Author who is familiar with and is using Cascading Style Sheets rules will be able to control the color and the size of the Heading element content from either external or internal style sheets or from inline style rules. See Introduction to Cascading Style Sheets.



Updated 11 April 2006
© hitmill.com
All Rights Reserved