Basic Text Formatting for HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Section 2.4

Paragraphs

The <p> tag signals the start of a paragraph.
The browser puts a blank line between paragraphs.
Words (ignoring leading and trailing whitespace) and images are fit into the margins by the browser.
Deprecated, but useful attribute (deprecated, but needed until we discuss cascading style sheets): align
- Possible values: left, right, center
- Default is left-justification

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>p</title></head>
<body>
<p>The following paragraph is copied from CNN </p>
<p>LA CONCHITA, California (CNN) -- Three people were killed and up to 12 
other people were feared trapped beneath a mound of mud and debris late 
Monday after a massive mudslide crashed down on this coastal community 
northwest of Los Angeles, crushing several homes.</p>

</body>
</html>

The following paragraph is copied from CNN

LA CONCHITA, California (CNN) -- Three people were killed and up to 12 other people were feared trapped beneath a mound of mud and debris late Monday after a massive mudslide crashed down on this coastal community northwest of Los Angeles, crushing several homes.

Line Breaks

Denoted by the <br /> tag.
Line break inserted after the tag.
No blank line inserted between text before and after the tag.

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test</title></head>
<body>
<p>
This is line 1<br />
This is line 2<br />
This is line 3<br /><br />
The above is a blank line <br />
</p>
</body>
</html>

This is line 1
This is line 2
This is line 3

The above is a blank line

Headings

Six levels of headings specified by the tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Indicates highest (<h1>) to lowest (<h6>) precedence a heading may have.
Generally, <h1> is used for the title of the document (to be displayed), <h2> is used for section titles, etc.
The heading level used depends on size desired
- <h1>, <h2>, <h3> -- larger than text
- <h4> --same size as text
- <h5>, <h6> --smaller than text
Vertical space inserted before and after headings.

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Heading test</title></head>
<body>
<h1>Biggest</h1>
<h2>Bigger</h2>
<h3>Big</h3>
<h4>Normal</h4>
<h5>Small</h5>
<h6>Smaller</h6>
</body>
</html>

Biggest

Bigger

Big

Normal

Small

Smaller

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Heading test</title></head>
<body>
<h1>PIC40A</h1>
<p>The class is a basic introduction to PIC40A</p>
<h2>Week 1</h2>
<p>Basic html</p>
<h2>Week 2</h2>
<p>Perl</p>
</body>
</html>

PIC40A

The class is a basic introduction to PIC40A

Week 1

Basic html

Week 2

Perl

Quotations

The <blockquote> tag
- Sets off enclosed text from the rest of the document.
- Generally used to set off long quotations from surrounding text.
- Browser determines how quote is displayed: indented, italicized, etc.

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Heading test</title></head>
<body>
<h1>Famous Quotes</h1>
<p>Albert Einstein (1879 - 1955)</p>
<blockquote>
<p>The most incomprehensible thing about 
the world is that it is at all comprehensible.</p>
</blockquote>
</body>
</html>

Famous Quotes

Albert Einstein (1879 - 1955)

The most incomprehensible thing about the world is that it is at all comprehensible.

Changing Text Appearance

Content-Based Styles
- Tell the browser that the enclosed text has a specific meaning, context, or usage.
- The browser formats the text consistent with that meaning.
- Some tags
  - <code> --Rendered in monotype (like Courier). Used to present segments of source code.
    Example: In C++, the command ++a*2; gives a different result than a++*2;.
  - <em> --Tells browser to print enclosed text with emphasis. Generally rendered in italics.
    Example: "You should always eat your vegetables."
  - <strong> --Emphasizes text, stronger than <em>. Rendered in bold.
    Example: Never leave out the end tag in an HTML document.
Physical style tags
- Used to cause text to explicitly appear in a specific way.
- Some tags
  - <b> --bold
  - <i> --italic
  - <big> --renders the text one font size larger than the surrounding text
    Example: This is a big deal.
  - <small> --decrease size of text one font size
    Example: Don't sweat the small things.
  - <sub> --displays half a character's height lower, same font size
    Example: H₂0
  - <sup> --displays half a character's height higher, same font size
    Example: Avogadro's number is 6.022 x 10²³
  - <tt> --direct browser to display enclosed text in monospaced typeface
- <big>, <small> can be nested to grow or shrink text more than one level
  Example: This is too big for me.

Expanded Font Handling

Deprecated, but use is widespread.
We will use it only until we discuss Cascading Style Sheets. The main ideas will carry through, though.
Extended font model: sizes from 1 (smallest) to 7 (largest).
Default size is 3.
Each size is successively 20% smaller (or larger) than default.

The <font> tag

Can change size, color, style of text.
size attribute: value is either 1-7 or preceded by + or - to define a relative font size that the browser adds to or subtracts from the base font size. Browser automatically rounds to 1 or 7 if the value exceeds either boundary.
Example: <font size="+2">Help me!</font> is rendered as: Help me!
Nested relative size changes are not cumulative.
face attribute: lets you choose the font style
- Value is the font name enclosed in quotes.

color attribute: sets color of enclosed text.

Two ways to set color

RGB components of desired color
- Given in hexadecimal representation (base 16) because it only requires two digits for 8-bit byte.
- Hex system: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
- Primary colors:
  - In paint: red, yellow, blue.
  - For light: red, green, blue (RGB).
  - Each primary color represented by 8 bits -> 24 bits total (8 for R, 8 for G, 8 for B).
  - So, for each color, there are 2⁸ "levels" (0, 1, 2, ..., 2⁸ - 1 = 255).
  - Each color takes 2 hex digits.
- So, color: #FF0000 is bright red (R has value of 255).
- How to get gray? #808080 (Other shades of gray appear when RGB all have the same value.)
- When given a color it doesn't understand, the browser will either convert the color to the closest color found or mix different ratios of the available colors to approximate the given color (dithering).
- There is a list of 216 colors that is virtually guaranteed to be displayable by Windows- and Macintosh-based browsers, but may not be correctly displayed with some older terminals used on UNIX systems. These colors, called the Web palette, are listed on the back cover of the text.

Standard color name (quotes preferred)

16 standard color names (can use in place of RGB number) guaranteed to be displayable by all browsers on all color monitors.

They are

aqua (#00FFFF)	navy (#000080)
black (#000000)	olive (#808000)
blue (#0000FF)	purple (#800080)
fuchsia (#FF00FF)	red (#FF0000)
gray (#808080)	silver (#C0C0C0)
green (#008000)	teal (#008080)
lime (#00FF00)	yellow (#FFFF00)
maroon (#800000)	white (#FFFFFF)

Many browsers support several hundred names.

Example

Not W3 Standard

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Text test</title></head>
<body>
<p>
<font color="red">Red</font>
</p>
<p>
<font size="+2" color="green">Big green</font>
</p>
<p>
<font size="-1" color="#CC12BB">Color with RGB CC12BB</font>
</p>
</body>
</html>

Red

Big green

Color with RGB CC12BB

Character Entities

Special characters you might not normally be able to represent in an HTML document, e.g., <.
They are represented by an associated character entity.

Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Special characters</title></head>
<body>
<p>
You can use &lt;br /&gt; to create a line break.
</p>
</body>
</html>

You can use <br /> to create a line break.

Horizontal Rules

The <hr /> tag
- Can specify horizontal width of the rule using the width attribute --specify a number (representing width in pixels) or a percentage (indicates portion of screen width the rule will occupy); deprecated, but we will use until we discuss Cascading Style Sheets
- Can specify height of rule in pixels using size attribute.
- Alignment can be specified via the deprecated align attribute (at least until we discuss Cascading Style Sheets).

The `<pre>` Tag

Define a segment inside which the browser renders in text exactly what the source code has, including extraneous space, line breaks.
Displayed in monospaced font.
Can have physical and content-based style changes, images, horizontal rules, etc., but not tags that cause a paragraph break.
Need to use the entity equivalents for <, >,& (>, <, &).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pre test</title></head>
<body>
<pre>
This is
a test.
</pre>
<p>
This is 
a test.
</p>
</body>
</html>

This is
a test.

This is a test.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>pre test</title></head>
<body>
<pre> #include &lt;iostream&gt;
 using namespace std;

 int main() {
    cout &lt;&lt; "Hello world!\n";

    return 0;
 }</pre>
</body>
</html>

 #include <iostream>
 using namespace std;

 int main() {
    cout << "Hello world!\n";

    return 0;
 }

Here is a more advanced web page.

Character	Character entity
&	`&`
<	`<`
>	`>`
°	`°`
©	`©`

Basic Text Formatting for HTML

Reading

Paragraphs

Example

Line Breaks

Example

Headings

Example

Biggest

Bigger

Big

Normal

Small

Smaller

PIC40A

Week 1

Week 2

Quotations

Example

Famous Quotes

Changing Text Appearance

Content-Based Styles

Physical style tags

Expanded Font Handling

Example

Character Entities

Example

Horizontal Rules

The <pre> Tag

The `<pre>` Tag