Chapter 2: Markup On The Front End

• In the old days, authors scribbled markup instructions on

paper in the margins of hand-written works.

• With the advent of electronic documents, the markup

instructions are included in the binary files.

• Word processing files are binary blobs. The markup

languages are proprietary. Only the programmers know how
the markup instructions are encoded as bytes.
• The markup instructions are embedded within the text.
Some word processors can give you a graphical view of how it
is including markup instructions.

• But again, who knows what the corresponding bytes look

like in the binary blob the software creates.

• This is the main reason word processing files tend not to be

interoperable among different software packages. Some do
have translators which attempt to transform different markup
languages into their own.
• The Web was created to be text based (ASCII,Unicode 8,…)
so the markup language used to format Web pages is all text.
• Here is how the address on the previous slide would be
formatted in HTML, the markup language used to format Web
pages.

<FONT SIZE=14 FACE=Swing>

<B>Bryan Moore</B><BR>
</FONT>
<FONT SIZE=12 FACE=Textile>
1234 Sunset Ave<BR>
WalaWala, WA 12345<BR>
(123)123.4567<BR>
</FONT>
• A significant limitation of HTML is that it is not efficient. A
100 of such addresses would require a 100 instances of the
markup instructions.

• The purpose of CSS (Cascading Style Sheets) is to help

separate style rules from the data. Using the CSS formatting
below, one change to the style rules would change 100
instances of formatting in the document.
• XML ( eXtensible Markup Language) features a total
separation of data content and style.
• The address is shown below, formatted using an invented
XML vocabulary.
<address id="101">
<name>Bryan Moore</name>
<street>1234 Sunset Ave</street>
<city>WalaWala</city>
<state>WA</state>
<zip>12345</zip>
<phone>(123)123.4567</phone>
</address>

• XML is meant to describe what the data is, not what it

should look like when rendered by software. XML is covered
in detail in Chapters 16 and 17.
• Chapter 2 assumes you are familiar with basic HTML.
If you are not, Appendix A, begins from the ground up.

• All of the HTML presented henceforth is XHTML

(extensible HTML) , which at the present is little more
than HTML with strict syntax rules.

• A main purpose of XHTML's strict syntax rules is so

the XHTML documents are well-formed, and can thus be
processed by XML parsers.

• The HTML shown on slide 3 violates most of the

XHTML syntax rules. Thus it is just HTML.

• Although XHTML code will be shown henceforth, we

will simply call it HTML.
Here are the XHTML syntax rules in a nutshell:

• Exactly one title element must appear in the head element.

• Syntax for empty elements (no closing tag): <element />

• If an element is not empty, it must have a closing tag:
<element></element>
• All elements and attribute names must be in lower case.
• All attribute values must be quoted (single or double)
attribute="value" or attribute='value'
• Every attribute must have a value. For example,
<hr noshade> must be <hr noshade="noshade">
Quick review of HTML block structures: lists and tables
Ordered Lists
Unordered Lists

• The type attribute can control bullet types (disc, circle,square)

Tables
• Basic structure

• By default, table cells are drawn of minimum height and

width to accommodate the contents of the cells.
• Properties of the whole table can be formatted using
attributes of the table element.
<table >É </table> (table definition) Block Element
ATTRIBUTE POSSIBLE VALUES DEFAULT
align left, center, right left with text not flowing around table
(make text flow around table)
background URL (relative or absolute)
(background image)
bgcolor #hexcolor, named color inherited from bgcolor of underlying
(background color) Web page
border pixels 0
cellpadding pixels browser dependent (about 1)
cellspacing pixels browser dependent (about 2)
height pixels, % minimum to accommodate table
contents
width pixels, % minimum to accommodate table
contents
• Properties of single cells can be formatted using attributes of
the td element.
<td >…</td> ( t ab l e da t a ce l l ) U s e d onl y i ns i de t r e le me nt

ATTRIBUTE POSSIBLE VALUES DEFAULT

align left, center, right left
(horizontal alignment of
cell contents)
v al i gn (vertical top, middle, bottom middle
alignment of cell
contents)
background URL (relative or absolute)
(background image)
bgcolor #hexcolor, named color inherited from bgcolor of table
(background color) containing the cell
colspan pixels 0
rowspan pixels 0
height pixels, % minimum to accommodate cell contents
width pixels, % minimum to accommodate cell contents

* <t h >…</ t h> ( table heading cell) Takes exact same attributes as t d . In heading cells, text is
• Here is an example using several of these attributes.
• Properties of whole rows can be formatted using attributes of
the tr element.

<tr >É </tr> (table row) Used only in table element

ATTRIBUTE POSSIBLE VALUES DEFAULT
Uses the a l i gn, v al i gn , and bgc c ol or attributes in the same capacity as the t d element. When
used in t r , they set properties of all cells in the row. We will set cell properties at the t d (cell )
level in this book.

• However, formatting whole rows is much less flexible than

formatting individual cells, so the book rarely uses attributes
of the tr element.
• Virtually anything that can be put into a Web page can be put
into a table cell.

• Moreover, a borderless table can be made to cover a whole

page, effectively dividing it into different content regions.

• Thus, borderless tables are commonly used to create fancy

and functional page layouts.

See moesplace.html
Proper indent-
ation helps to
make
complicated
HTML files
human
readable.
• To create "irregular" tables, use the rowspan and colspan
attributes of the td element.

• The spanning is always to the right and down. Notice which td

elements are eliminated.
• A final table example features a page layout created by the
spanning shown below.

• This page layout features a header and footer region, left and
right navigation regions (nav bars), and a couple of main
content areas.
See sports.html.

• Most commercial sites use elaborate tabular layouts such as

this, with many being significantly more complex.
Introduction to CSS
• Style rules are placed in an HTML style container, usually
placed in the head section of the document.

<style>
<!--
style rules go here
-->
</style>

• Styles can provide uniformity among a whole collection of

pages. In that case, style rules are placed into an external text
file and imported into one or more HTML documents.
<link rel="stylesheet" href="path/to/mystyles.css">

• The style container is not used in the external file.

• The span element is a generic inline element which induces
no formatting on its own.
<span>some text</span>
• Its purpose is to be a container for the application of styles to
text.

• Below is a small sampling of text-level styles.

A global rule
element { property1:value; property2:value; . . }
causes the styles to be applied to all instances of the element
in the Web page.

Styles from a class rule

element.classname { property1:value;
property2:value; . . }

are only applied to the element only if if a call to the class is

made.
<element class="classname">. . .</element>

See span.html
• Styles can be applied to HTML elements other than span.

b.big { font-size:125%; }

• Then, when you want your bold text to be bigger:

<b class="big">bigger bold</b>

• This was a class rule. It is usually unwise to define global

rules for HTML elements. If this were a global rule, the b
element would effectively be redefined, and you would have
to jump through hoops to get regular sized bold text.

• Through global rules, one could basically re-define HTML.

For example, all i elements could be made to be normal bold,
and all b elements could be made to be normal italic.
A generic style class can be invoked on any element.

.redmonospace { color:red; font-family:Courier; }

This class can be used with the bold element

<b class="redmonospace">bold red courier text</b>

or the small element

<small class="redmonospace">small red courier

text</small>

or other elements which contain text.

• The div (division) element is the generic block container
used for the application of styles.

<div>block content</div>

• The only formatting it induces by itself is a line break before

and after the block content.

• The next slide shows a small sampling of block-level styles.

• Note that text-level styles can be applied to blocks to control

all of the text within the block.

• However, in most cases, it makes no logical sense to try to

apply block-level styles to inline elements.
See div.html
• As with text-level styles, block-level styles can be applied to
block elements besides the generic div container.
h1 {margin-left:-5px;background-color:#999999;}
h2 {margin-left:10px;}
p {margin-left:10px; text-indent:5px;}
• By default block elements are positioned relative to the page
layout flow.That is, it is placed on the page according to its
position in the HTML document.
• In CSS, that is position:relative;
• Doing position:absolute; forces absolute positioning.

• You then need to

specify the block's
exact location on
the screen and the
exact size of the
block.
• The following defines a dark gray block whose upper left
corner is 10 pixels from the top of the screen and and five
pixels from the left side of the screen. It's a short, wide block.

div.myblock { position:absolute;
background:#333333;
top:10px;
left:5px;
width:600px;
height:40px; }

• Such absolute positioning of blocks is how we duplicated the

previously seen elaborate tabular page layout using only CSS.

• One just has to do the math and make sure the blocks fit
together and don't overlap.
See sports.html (the one in the styles folder).
• Notice the hover links in the CSS version of sports.html.

• They are created using pseudo style classes, which are

special style classes with behaviors. In particular, they react to
mouseover and mouseout events, changing the link colors
depending on the colors the pseudo classes specify.

body { font–family:Georgia; text-align:justify; :link

{ color:blue; }
:visited { color:purple; }
:active { color:red; }
:hover { color:orange; }

• It is important to list the hover state last or some browsers mess this
up. Also, one can assign different hover states to different style classes
of links to provide for varying hover effects.
 Why the
cascading in
CSS?

In a nutshell: Any style rule defined on a more general level is

inherited at the more specific level. Moreover, any style property that is
defined at a more specific level overrides any occurrence of the same
property that may have been defined at a more general level.