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 tablesOrdered 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 DEFAULTalign left, center, right

(make text flow around table)left with text not flowing around table

background(background image)

URL (relative or absolute)

bgcolor(background color)

#hexcolor, nam ed color inherited from bgcolor of underlyingW eb page

border pixels 0cellpadding pixels browser dependent (about 1)cellspacing pixels browser dependent (about 2)height pixels, % m inimum to accomm odate table

contentswidth pixels, % m inimum to accomm odate table

contents

• Properties of single cells can be formatted using attributes of the td element.

<td >…</td> (table data cell) Used only inside tr element

ATTRIBUTE POSSIBLE VALUES DEFAULTalign(horizontal alignment ofcell contents)

left, center, right left

val i gn (verticalalignment of cellcontents)

top, middle, bottom middle

background(background image)

URL (relative or absolute)

bgcolor(background color)

#hexcolor, named color inherited from bgcolor of tablecontaining the cell

colspan pixels 0rowspan pixels 0height pixels, % minimum to accommodate cell contentswidth pixels, % minimum to accommodate cell contents

* <th >…</ th> ( 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 DEFAULTUses the align, valign, and bgccolor attributes in the sam e capacity as the td elem ent. W henused in tr , they set properties of all cells in the row. We will set cell properties at the td (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 ruleelement { property1:value; property2:value; . . }causes the styles to be applied to all instances of the element in the Web page.

Styles from a class ruleelement.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.