Chapter 2: Markup On The Front End

1

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

2

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

3

• 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.
• ltFONT SIZE14 FACESwinggt
• ltBgtBryan Moorelt/BgtltBRgt
• lt/FONTgt
• ltFONT SIZE12 FACETextilegt
• 1234 Sunset AveltBRgt
• WalaWala, WA 12345ltBRgt
• [phone]ltBRgt
• lt/FONTgt

4

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

5

• XML ( eXtensible Markup Language) features a
  total separation of data content and style.
• The address is shown below, formatted using an
  invented XML vocabulary.
• ltaddress id"101"gt
• ltnamegtBryan Moorelt/namegt
• ltstreetgt1234 Sunset Avelt/streetgt
• ltcitygtWalaWalalt/citygt
• ltstategtWAlt/stategt
• ltzipgt12345lt/zipgt
• ltphonegt(123)123.4567lt/phonegt
• lt/addressgt
• 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.

6

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

7

• 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)
  ltelement /gt
• If an element is not empty, it must have a
  closing tag
• ltelementgtlt/elementgt
• 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,
  
• lthr noshadegt must be lthr noshade"noshade"gt

8
Quick review of HTML block structures lists and
tables Ordered Lists
9
Unordered Lists

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

10

• Tables
• Basic structure

• By default, table cells are drawn of minimum
  height and width to accommodate the contents of
  the cells.

11

• Properties of the whole table can be formatted
  using attributes of the table element.

12

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

13

• Here is an example using several of these
  attributes.

14

• Properties of whole rows can be formatted using
  attributes of the tr element.

• However, formatting whole rows is much less
  flexible than formatting individual cells, so the
  book rarely uses attributes of the tr element.

15

• 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

16
Proper indent-ation helps to make complicated
HTML files human readable.
17

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

18

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

19

• Introduction to CSS
• Style rules are placed in an HTML style
  container, usually placed in the head section of
  the document.
• ltstylegt
• lt!--
• style rules go here
• --gt
• lt/stylegt
• 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.
• ltlink rel"stylesheet" href"path/to/mystyles.css"
  gt
• The style container is not used in the external
  file.

20

• The span element is a generic inline element
  which induces no formatting on its own.
• ltspangtsome textlt/spangt
• Its purpose is to be a container for the
  application of styles to text.
• Below is a small sampling of text-level styles.

21

A global rule element property1value
property2value . . causes the styles to be
applied to all instances of the element in the
Web page. Styles from a class rule element.classn
ame property1value property2value .
. are only applied to the element only if if
a call to the class is made. ltelement
class"classname"gt. . .lt/elementgt
See span.html
22

• Styles can be applied to HTML elements other
  than span.
• b.big font-size125
• Then, when you want your bold text to be bigger
• ltb class"big"gtbigger boldlt/bgt
• 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.

23
A generic style class can be invoked on any
element. .redmonospace colorred
font-familyCourier This class can be used
with the bold element ltb class"redmonospace"gtbol
d red courier textlt/bgt or the small
element ltsmall class"redmonospace"gtsmall red
courier
textlt/smallgt or other elements which contain
text.
24

• The div (division) element is the generic block
  container used for the application of styles.
• ltdivgtblock contentlt/divgt
• 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.

25
See div.html
26

• As with text-level styles, block-level styles
  can be applied to block elements besides the
  generic div container.
• h1 margin-left-5pxbackground-color999999
• h2 margin-left10px
• p margin-left10px text-indent5px

27

• 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 positionrelative
• Doing positionabsolute forces absolute
  positioning.

• You then need to specify the block's exact
  location on the screen and the exact size of the
  block.

28

• 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 positionabsolute
• background333333
• top10px
• left5px
• width600px
• height40px
• 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).

29

• 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 fontfamilyGeorgia text-alignjustify
  link colorblue
• visited colorpurple
• active colorred
• hover colororange
• 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.

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