Basic Text Formatting for HTML

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

Reading

Sebesta Section 2.4

Paragraphs

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

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

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

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

  1. Content-Based Styles

  2. Physical style tags

Expanded Font Handling

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

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 <pre> Tag

<?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.