HTML and CSS: Languages of the Web

Mastering HTML Text Formatting

Here I provide you an overview of all the tags I consider integral to text processing with the HTML standard. Since you've read a lot about XHTML at this point, do take the following with a grain of sand and realize the tags have been around for over ten years and in some cases need to be updated. Still, you can use all these tags in this class with me whenever you want. They represent the very basic tags that a poor classroom in Senegal could use to format some ideas the students wanted to share with us big fat cats in the industrialized world. I am sure those kids have some fascinating thoughts to share with us and the Web continues to bring down the cost of doing so. We don't want to keep them silent by requiring some expensive or computationally intense software, eh? I've been watching a few documentaries on kids in Africa in the orphanages. They seem so happy to greet each new day. They dance and sing (or at least for the camera). Keep that happy thought in your mind if the following gets a little tedious.

Logical HTML styles indicate the way text is used. For example is it used for emphasis, citation, or definition?

The following HTML tags are examples of logical style formatting (each requires a closing tag to properly end the logical element):

Emphasis 
Strong emphasis 
Code <code> -- fixed width ( Courier) font.
Variable name <var>
Definition <dfn>
Citation <cite>
Address <address>

HTML examples of each of the logical text styling above are provided in a bulleted list format:

Basic Emphasis
```

This is emphasised

```
which looks like this in HTML:
This is emphasised
Strong emphasis
```


This is Strong Emphasis

```
which looks like this in HTML
This is Strong Emphasis
Code
```
<code>
begin

for i:= 1 to N
</code>
```
which looks like this in HTML:
begin for i:= 1 to N
Variable name
```
<var>
my_var_name = 2;
</var>
```
which looks like this in HTML:
my_var_name = 2;
Definition
```
<dfn>
Logical Text Style
</dfn>
```
which looks like this in HTML:
Logical Text Style
Citation
```
<cite>
Internet Computing Notes, Marshall 1997
</cite>
```
which looks like this in HTML:
Internet Computing Notes, Marshall 1997
Address
```
<address>
bcampbel01@risd.edu Bruce Donald Campbell
</address>
```
which looks like this in HTML:
bcampbel01@risd.edu Bruce Donald Campbell

In comparison, physical style tags indicate exactly how text is to formatted. For example boldfacing or underline.

The following HTML tags are examples (all require end tags to turn off the formatting effect):

Bold 
Italics 
Underline 
Fixed width <tt> (meaning each character is printed with exactly the same width)
Strike Through <s> (to share edit deletion notes with others)
Bigger print <big>
Smaller print 
Subscript 
Superscript

Examples of these tag in use:

Bold
```

This is bold text.

```
which looks like this in HTML:
This is bold text.
Italics
```

This is italic text.

```
which looks like this in HTML:
This is italic text.
Underline
```

This is text is underlined.

```
which looks like this in HTML:
This is text is underlined.
Fixed width
```
<tt>

This is fixed width text.
</tt>
```
which looks like this in HTML:
This is fixed width text.
Strike Through
```
<s>
This is text is struck through.
</s>
```
which looks like this in HTML:
~~This is text is struck through.~~
Bigger print
```
This is normal text.
<big>
This is bigger text.
</big>
```
which looks like this in HTML:
This is normal text. This is bigger text.
Smaller print
```
This is normal text.

This is smaller text.

```
which looks like this in HTML:
This is normal text. This is smaller text.
Subscript
```
X1 is subcripted (1).
```
which looks like this in HTML:
X₁ is subscripted (1).
Superscript
```
X2. the squared (2) is superscripted.
```
which looks like this in HTML:
X². the squared (2) is superscripted.

Fractions can be made up with Sub/Superscripts. For example:

<sup>1</sup>/<sub>2</sub>

yields:

¹_/2

You can mix and match formatting text tags by nesting them inside of each other. Nesting means that the closing tags should appear in the reverse order of the opening tags. For example:

This text is <u><b><i>italicized boldfaced and underlined</i></b></u>!

yields:

This text is italicized boldfaced and underlined!

Certain characters should be referred to in a special way so as not to confuse the Web browser that expects their use for other purposes. Use appropriate character entities to implement these special characters. For example:

Character strings that represent special symbols, e.g.
- & for &
- > for greater-than (>)
- < for less-than (<)
- " for double quote (")
- — for a longer hyphen (—)

There are two simple tags that can be used to control the layout of your page.

Horizontal Rule <hr>
Line break   -- inserts a end of line where it appear

Neither has a closing tag nor requires any body text. Their use is fairly straightforward.

Horizontal Rule <hr>

The <hr> has 4 attributes that may be associated with it.

The size attribute to specify thickness of line in pixels (pixels are individual dots displayed on the screen).
For example:
```
2 Pixels 
<hr size=2>
4 Pixels 

<hr size=4>
8 Pixels 
<hr size=8>
16 Pixels 
<hr size=16>
```
Which looks like this:
2 Pixels

4 Pixels

8 Pixels

16 Pixels

The align attribute can be with Horizontal Rule.

The width attribute to specify width of line in pixels or percentage of screen width.

For example:

<b>100%</b>
<hr width=100% align=left>
<br><br>

<b>75%</b>
<hr width=75%  align=left> 
<br><br>
<b>50%</b>
<hr width=50%  align=left>
<br><br>

<b>25%</b>
<hr width=25% align=left>
<br><br>
<b>10%</b>
<hr width=10%  align=left>

Which looks like this:

100%

75%

50%

25%

10%

The noshade attribute to specify that a plain black line is to be drawn as opposed to (default) 3D shading. noshade has no value assigned to it.
For example:
```
Default Shaded Horizontal Rule 

<hr>
 
No Shade Horizontal Rule 
<hr noshade>
```
Which looks like this:
Default Shaded Horizontal Rule

No Shade Horizontal Rule

Putting the above together we can create so simple effects. For Example:

The HTML code to achieve this is relatively straightforward:

<HR WIDTH=40% ALIGN=CENTER>
<HR WIDTH=30% ALIGN=CENTER>

<HR WIDTH=20% ALIGN=CENTER> 
<HR WIDTH=10% ALIGN=CENTER>

Fonts and font sizes are now more typically done with style attributes as shown in this weeks video. But, I still use the font tag when I encounter a long page that is already using them. No reason to have a page with mixed approaches that has both local style attributes and HTML tags.

The  tag is used to change the font size and type face of text enclosed between the begin and end tag.

The size attribute changes the size of the font. Allowed values are 1 to 7.
- size attributes can be incremented or decrements with + operator within the above range. E.g size = +2.
The face attribute to select a type face. E.g. face = "futura,helvetica"
- Browsers currently have limited font type face support.
- Availability of fonts vary across browsers and platforms.
- Names of fonts vary across browsers and platforms.
- font face is not that relevant to this course.

Example uses of font tag:

<P><font face="Futura,Helvetica">Sans Serif fonts are fonts without 
the small "ticks" on the strokes of the characters. </font></P>

looks like this:

Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters.

<P>Normal font size. <font size=5>Larger font size.</font></P>

looks like this:

Normal font size. Larger font size.

<font size=1>font size 1</font><br>
	<font size=2>font size 2</font><br>
<font size=3>font size 3</font><br>

	<font size=4>font size 4</font><br>
<font size=5>font size 5</font><br>
<font size=6>font size 6</font><br>
	<font size=7>font size 7</font><br>

looks like this:

font size 1
font size 2
font size 3
font size 4
font size 5
font size 6
font size 7