©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements

©SoftMoore ConsultingSlide 2 Headings h1 to h6 Title Chapter Section Attribute: align –legal values: left, right, center, justify

©SoftMoore ConsultingSlide 3 Examples: Headings Title Chapter Section

©SoftMoore ConsultingSlide 4 Paragraphs Basic paragraphs:... –attribute: align Preformatted paragraphs:... –preserves white space –often used for code, but still requires entities (e.g., < ) Quotations:... –usually indented both left and right Addresses:... –supplies author contact information –usually rendered in italics –usually placed at top or bottom of document

©SoftMoore ConsultingSlide 5 Examples: Paragraphs basic paragraph with enough words to show wrapping preformatted paragraph with two lines and the last line indented three spaces blockquote paragraph with enough words to show wrapping and indentation

©SoftMoore ConsultingSlide 6 Lists Ordered (numbered) lists:... –attribute: type values: 1, A, a, I, i –attribute: start starting value for numbering Unordered (bulleted) lists:... –attribute: type values: disc, circle, square List item:... –specifies a single entry within a numbered or bulleted list Definition lists:... –defined term:... –definition:...

©SoftMoore ConsultingSlide 7 Examples: Ordered Lists item one item two item three item one item two item three

©SoftMoore ConsultingSlide 8 Examples: Unordered Lists item one item two item three item one item two item three

©SoftMoore ConsultingSlide 9 Example: Definition List term one definition for term one term two definition for term two term three definition for term three

©SoftMoore ConsultingSlide 10 Example: Nested Lists Programming Languages Java object-oriented portable C++ object-oriented fast

©SoftMoore ConsultingSlide 11 Overview of Tables Format data in columns and rows Used for –traditional tables –layout control Cells can contain –simple text –images –paragraphs –other tables

©SoftMoore ConsultingSlide 12 Basic Table Structure A table must be enclosed in... tags. An optional caption may be included using... tags. Within the table,... tags are used to designate rows. Individual table cells –use... for header cells (default: center, bold) –use... for data cells.

©SoftMoore ConsultingSlide 13 Tables HTML element: table Defines a 2-dimensional table (rows and columns) Common attributes –align : the horizontal alignment of the table as a whole –border : the width of the border in pixels –cellspacing : the space, in pixels, between adjacent cells –cellpadding : the empty space, in pixels, between the cell border and the cell text (i.e., the internal cell margin) –width : the width of the table, either in pixels or in a percentage of the current browser window –bgcolor : the background color for the table as a whole

©SoftMoore ConsultingSlide 14 Table Rows HTML Element: tr Common attributes –align : horizontal alignment for the table row values left, center, right –valign : vertical alignment for the table row values top, middle, bottom, baseline –bgcolor : background color for the table row

©SoftMoore ConsultingSlide 15 Table Headings and Cell Data HTML Elements: th and td Common attributes –align and valign : similar to row attributes –bgcolor : the cell background color –colspan : causes the cell to span multiple columns –rowspan : causes the cell to span multiple rows –nowrap : suppresses word wrapping within a cell –width and height : the cell width and height in pixels

©SoftMoore ConsultingSlide 16 Table Captions HTML Element: caption Attribute –align : specifies alignment of caption with table –values: top, bottom –default is top Centered (left-to-right) with the table Must be defined inside the table tags Can contain valid HTML tags Will not cause table width to increase

©SoftMoore ConsultingSlide 17 Example: Table Soup of the Day Monday Tuesday Wednesday Thursday Friday Split Pea Minestrone French Onion New England Clam Chowder Cream of Broccoli

©SoftMoore ConsultingSlide 18 Example: Table (continued)

©SoftMoore ConsultingSlide 19 Horizontal Rules HTML element: hr Provides a horizontal rule (line) across the browser window Common attributes: –align : horizontal alignment values: left, center, right –width : the width in pixels –size : the thickness in pixels –noshade : tell browser to use a solid color

©SoftMoore ConsultingSlide 20 Examples: Horizontal Rules some text between horizontal rules

©SoftMoore ConsultingSlide 21 Divisions HTML Element: div Divides document into separate, distinct sections Often used with style sheets Attribute: –align –values: left, center, right

Centering Content HTML Element: Shorthand for Center elements horizontally Can use CSS style declaration instead ©SoftMoore ConsultingSlide 22

©SoftMoore ConsultingSlide 23 Example: Centering Content uncentered text centered text more uncentered text more centered text

©SoftMoore ConsultingSlide 24 Example: Centering Content with CSS p { text-align: center; }.centered { text-align: center; }... uncentered text centered text more uncentered text more centered text Same layout as previous slide.