CS134 Web Design & Development

Attributes, Lists, Tables, Links, and Images

Mehmud Abliz

Block-Level vs. Inline Elements

This works
<h2><em>Bold and italic</em></h2>

How about this

<em><h2>Bold and italic</h2></em>

Block-level element/tag
define a complete section or block of text Can contain inline element and block-level element

Inline elements
Define the structure of a sequence of characters within a line may not contain a block-level element

Block-Level vs. Inline Elements

Partial list of block-level tags

p, blockquote, h1 h6, div, ul, ol, li, table, tr, td, th

Partial list of inline tags

a (anchor tag), em, strong, img, q (short quotation)

Attribute

An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. Basic syntax for xhtml tags and attributes
<tag attribute="value"> </tag> All tags must be lower case all values of attributes need to be surrounded by quotes

Common Attributes

id
unique identifier for elements

class
the class of the element, used to specify similar attributes for dissimilar elements by putting them in the same class

style
an inline style definition

title
a text to display in a tool tip

Common Attributes

Examples 1
<p id=firstParag class=indent title=This paragraph introduces html attributes>

Assuming style sheet contains .indent { margin-right: 5%; margin-left: 5%;}

Example 2
<p id=firstParag style=marginright: 5%; margin-left: 5%; title=This paragraph introduces html attributes>

Common Attributes

lang
sets the language code; en: English, fr: French, es: Spanish, de: German etc.

dir
sets the text direction, left to right or right to left <p lang=fr dir=ltr>bonjour!</p>

accesskey
assigns an access key to an element. An access key is a single character from the document character set.

tabindex
Sets the tab order of an element

Deprecated Attributes

In order to separate structure from presentation

many HTML attributes/tags used for presentation were deprecated, starting from HTML version 4

Some deprecated attributes

font, <font size=5 color=red>Text</font> align, <p align=center>Centered text</p> bgcolor, width, height, etc.

Lists

Ordered lists & Unordered lists

<ol> for ordered <ul> for unordered <li> for each item inside the list

Browser inserts a blank line before & after the list (block-level element) Example
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item3</li> </ol>

Lists

Nested lists
<ul> <li>Top Level, Item 1</li> <li>Top Level, Item 2 <ul> <li>Sublevel 1, Item 1 <ul> <li>Sublevel 2, Item 1</li> <li>Sublevel 2, Item 2</li> </ul> </li> <li>Sublevel 1, Item 2</li> </ul> </li> <li>Top Level, Item 3</li> </ul>

Customizing List Display

List numbers or marks can be customized type attribute Example

<ul <ol <ol <ol <ol type=square> type=A> type=a> type=I> type=i>

type attribute is not allowed in XHTML 1.0 Strict, so use style sheets

Definition Lists

<dl> for list element; <dt> for definition terms; <dd> for definition data Example
<dl> <dt><strong>CPU</strong></dt> <dd>Central Processing Unit</dd> <dt><strong>ALU</strong></dt> <dd>Arithmetic Logic Unit</dd> <dt><strong>GHz</strong></dt> <dd>Gigahertz</dd> </dl>

Tables <table>

Tables used not only for displaying data in tabular format A table (<table>) in HTML
Consists of rows (<tr>) Each row consists of rectangular boxes called cells (<td>)
<table> <tr><td>R1,Cell1</td><td>R1,Cell2</td></tr> <tr><td>R2,Cell1</td><td>R2,Cell2</td></tr> </table>

Tables

By default
Text in each cell is automatically aligned to the left All the cells in a column have the same width Width of the column is determined by the cell with the most text in it

<th> for table header

<tr> <th>Header1</th> <th>Header2</th> </tr>

Tables

Other attributes of <table>

align, cellpadding, cellspacing, colspan Yet XHTML 1.0 Strict dont allow this attributes, so use stylesheet instead

Other tags
<caption> <colgroup> <thead>, <tfoot>, <tbody>

Links

The true power of WWW comes with hyperlinks Surfer click on a specially marked word or image on a web page and automatically be jumped to another web page or another place in the same web page.
Another web page External link Another place Internal link

Use <a> (anchor) tag to create a link

Links

External Links
<a href=SomeURL>Text/image</a>

Create a link to CS web page

<a href=http://www.cs.pitt.edu/>CS Department at Pitt</a>

Be careful about the quotation mark

Internal Links Create a place/anchor

<a id=SomeLabel></a> or <a id=SomeLabel name=SomeLabel/></a>

Link to the anchor

<a href=#SomeLabel>Go to some place</a>

Links

Combining External and Internal Links

<a href=SomeURL#SomeLabel>Link Text</a>

Images <img>

Insert an image using <img> tag

<img src=URL of the image file />

Image can an image on a remote machine on the Internet, or an image in your local machine. Examples,
<img src="http://www.cs.pitt.edu/~mehmud/gallery /nature/images/Desert_and_Blue_Sky.jpg"/> <img src="../images/Lake_Karakul.jpg" />

Images

Alternative Text for images

<img src=Image URL alt=Alternative Text />

Example
<img src="../images/Lake_Karakul.jpg" alt="Lake Karakul"/>

width & height attributes

<img src="../images/Lake_Karakul.jpg" alt="Lake Karakul" width="257" height="161" />

Use style sheet instead of attributes, even though XHTML 1.0 Strict supports these two attributes