Figure 3.1: firstpage.html file.
Chapter 3: Body and Basic Text FX
In Chapter 3, we will begin working with our site's body, where your inner artist starts to kick in - or not. This is where the code that displays the site's actual text is stored. Let's dispense with the introduction and get started.
The body section of an HTML document is the main part of the document. It is placed under the head section and is surrounded by <body> </body> tags. To display text on your page, simply type it into the body section.
Figure 3.1 shows how the page looks in IE.
Figure 3.1: firstpage.html file.
Even though you put the text after the word "section" on a separate line, the text still all shows up on the same line. This shows that line breaks have no effect on HTML code in the body. If your text stretches off the screen (which happens very often) you can just start a new line without it affecting the way your text is displayed. New lines, blank lines, and tabs are all collectively known as whitespace and are completely ignored by the browser. Use this to your advantage to help make your HTML code easy to read and edit.
It's not just good HTML practice but also good writing to structure your page into paragraphs, making it easier to read. It also makes it easier to apply formatting to the text. This is done by putting each paragraph between <p> and </p> tags. A line break and blank line will automatically be placed between paragraphs.
Sometimes it is desirable to break a line without adding the blank line that comes between paragraphs. If you need to insert a line break, use the <br> tag. It simply places text following it on the next line. <br> is one of only 11 tags that require no closing tag.
Figure 3.2: Using paragraphs and line breaks
Take a look at the list of assassinated presidents in the last paragraph of the mckinley.html file in your browser. It is headed by Assassinated Presidents, but this doesn't catch the viewer's eye, and it isn't clear at first glance that this is the title of the list.
There is an HTML tag for creating headings - actually, there are six of them! They are <h1>, <h2>, <h3>, etc. all the way down to <h6>. <h1> is the biggest, and <h6> is the smallest, as shown in Figure 3.3. The six heading tags include a line break tag for your convenience.
Figure 3.3: the six heading tags
CAUTION Figure 3.3 shows the relative size of text. However, based on the user's preferences, text may show up larger or smaller than it does in your browser - for example, an elderly person may set the text size to be larger than the size a teenager would set. Know that this can happen and plan for it.
<p> tag before Assassinated Presidents and place it before Abraham Lincoln's name. <body> tag, type 25. William McKinley and format it as Heading 1.
Figure 3.4: Applying headings
A common effect is to add bold and italic text effects to a page to add emphasis. This is done by using any one of four HTML tags.
Bold is added with either the <b> or the <strong> tag. Italic is implemented with <i> or <em> tags. Either tag will work; just take care to use the correct closing tag. Personally, I prefer the single-letter tags because they're shorter to type, but which tag you use is your own personal preference.
You can also create bold-italic text by nesting one pair of tags inside the other. Example: <b><i> </i></b>. Note that the </i> closing tag was placed before the </b> closing tag. The <i> tags must be kept together. Of course, you could also use <i><b> </b></i>. The first tag applied should be the last one closed; no tags should "overlap."
Usually, when including a quote of something in the middle of a text, it is helpful to show that it is a quote by setting it off slightly from the rest of the document. This is the ultimate goal of the quotation tags included in HTML 4.01.
There are two quote tags: <q> and <blockquote>. Use <q> for short snippets of quote and <blockquote> for longer quotations.
To see how your browser displays quotes and blockquotes, look below.
This is how your browser displays blockquotes.
This is how your browser displays
<q>-style quotes.
CAUTION
The W3C's official HTML recommendation specifies that browsers should automatically add quotation marks before and after blockquotes, so be careful coding!
<q>Speak softly and carry a big stick. Theodore Roosevelt</q>
<blockquote>The American flag has not been planted in foreign soil to acquire more territory, but for humanitys sake. Wm. McKinley, 12 July 1900</blockquote>
Figure 3.5: Applying bold, italic, and quotes
CAUTION
For right now we are through with the mckinley.html file, but do NOT delete it - it will be used in later exercises.
Dont forget that even though Internet Explorer is the most popular browser, there are still others out there. Many users want more features, so they switch to another browser. Most browsers are based on the original Mosaic Browser yes, including IE. If you go to Help > About, the evidence is clear.
Figure 3.6: Proving IE derived from Mosaic
Text can be scaled up or down in size for example, for emphasis simply by adding tags. <big> increases text by 1 point, and <small> reduces the text size by 1 point. (A point [or printers point] is a measure of text size. 72 pt. equals 1 inch.) Use multiple tags to increase or decrease the text size dramatically. For very big increases or decreases, however, use heading tags or a stylesheet.
There are two types of fonts: variable width and monospaced. The vast majority of fonts are of the variable width type the letter "I" is much narrower than the letter "W." This books font, Book Antiqua, is of the variable width type. However, monospaced fonts, such as Courier New and Lucida Console, are designed so that each letter is exactly the same width, often giving the text a typewriter-like appearance.
The user can specify two fonts for use in Internet Explorer by going to Tools > Internet Options. This allows for one variable width font and one monospaced font. The defaults are Times New Roman for the variable width and Courier New for the monospaced font. Different browsers may have different default fonts. This is your browser's default monospaced font.
The <tt> tag forces text to be displayed in the specified monospaced font. This is excellent for showing that a block of text is somehow different from the rest. A common example is to show the contents of an e-mail or other source document.
Another common use of the <tt> tag was to set off programming code from normal text. Now, however, this can be achieved with the <code> tag. Generally, this text marked as code will be displayed with a monospaced font...
CAUTION
...but not always!
With these tags, you can use abbreviations and acronyms in your page without having to actually show what the abbreviation stands for in a page. You simply feed the information to the browser with an attribute. The two tags are <abbr> (for abbreviations) and <acronym> (for acronyms). An acronym is an abbreviation that is usually pronounced like a word, rather than spelled out. For example, while USA is usually spelled out, AWOL (absent without leave) is usually pronounced as if it was a word and is therefore an acronym.
Both the acronym and the abbreviation tags accept the title attribute, which tells exactly what the acronym means. However, the browser determines the way this is used. Internet Explorer 6 as well as Opera 7 shows the acronym (or abbreviation) as a ToolTip. In addition, Opera and Firefox will dashed-underline the acronym. The acronym and abbreviation tags are not supported by IE5 and below, and IE6 doesn't support the abbreviation tag.
The horizontal rule simply draws a line across the screen. It starts on the next empty line and will stretch across any available space. The browser determines how the line is displayed. To display a horizontal rule, simply add the <hr> tag. No closing tag is needed. This is the way your browser displays a horizontal rule:
Occasionally, you need to place a symbol on the page that is part of HTML. For example, if you were posting math equations, you might want to add a less-than sign (<). As you know, this is also how HTML tags start, so the browser will probably interpret this a tag and either wont show it, or not allow your site to be shown at all.
Another common requirement is to display characters that are not on the keyboard, such as the inverted (upside-down) exclamation marks and question marks used in Spanish, Greek letters such as pi, and letters with accents and other diacritical marks, like the e in "caf�"
Fortunately, there are character entities, which simply add a character to your document. Entities start with an ampersand (&) and end with a semicolon (;). The most common entities are shown below; however, to get the entire list of character entities, visit this page, from the W3C:
| Description | Entity |
|---|---|
| Hard Space (Space that is not ignored by the browser, regardless of how many spaces there are.) | |
| Ampersand (&) | & |
| Less Than (<) | < |
| Greater Than (>) | > |
| Copyright (©) | © |
| Greek letter pi | π |
The <sup> and </sup> tags will raise the text so that it appears as a superscript, which is text that is raised just a bit above the normal text line. Conversely, the <sub> and </sub> tags make the text appear as a subscript, lowering the text a bit below the normal text line.
Figure 3.6: Superscript and subscript
The <pre> tag simply forces the browser to recognize all whitespace in between the tags. By default, the text is displayed in the monospace font.
template.txt file into it.
"Introduction to Microsoft Visual Basic 6
<h1>Visual Basic Programming</h1>
<h2>Types of Variables</h2>
In Visual Basic, there are many different types of variables available for you to store values in. The string variable is for storing text information. Booleans store yes/no values. There are many types of number variable. The byte variable is for positive numbers up to 256. A byte variable takes only 8 bits of memory - exactly 1 byte, hence the name. The integer is for values ranging from -32,768 to +32,767. A long integer (usually simply called a long) is for values between -2,147,483,648 and 2,147,483,647. Integer and long variable types take 32 bits, or 4 bytes. Most types of processors handle long variables much more efficiently than integers, so for better performance, always use long variables.
One problem with the byte, integer, and long data types is that they cannot hold fractions or decimals. These floating point numbers must be held in single or double variables. The single ranges from -3.402823 x 1038 to 3.402823 x 1038. Singles use 32 bits or 4 bytes as well. The double variable holds values from -4.94065645841247x10324 to 1.79769313486232 x 10308. However, doubles take 64 bits of memory: eight whole bytes! So, you should avoid the double variable type unless it is absolutely necessary.
<h2>Constants</h2>
Occasionally, in the VB6 programming language, it is appropriate to store a value to a name. This is called a <i>constant. Unlike variables, a constant value can never be changed once it is set in code. This code will create a constant from the value of Pi:
Public Const Pi = 3.1415926535897932384626433832795
<h2>Using the For Loop</h2>
The for loop is a way of executing a block of code over and over. It uses a counter variable to determine the number of times the loop has run. Traditionally, this is an integer variable named "i". This is a for loop:
For i = 1 To 10
'Any code put here will be run 10 times.
Next i
You can easily increase the speed of a large program by improving the speed of the code inside a for loop.
Pi in the Constants section larger than the rest of the text. Add code to display this after the word pi: (π)
VB6". The title attribute should read "Visual Basic 6."
vbprog.html.
Figure 3.7: vbprog.html file
vbprog.html file.
Using the For Loop section as preformatted. (Hint: Comment lines in Visual Basic start with single quotation marks [ ' ].)
Figure 3.8: Preformatting text
Create a new file in Notepad. Simply match the answers to each question.
<<Back 1 Chapter Back to Contents Onward!>>