Scribd
Upload
24 views

Lecture3 Ak

This document discusses various HTML elements including block-level vs inline elements, lists, tables, links, and images. It provides examples and explanations of common tags such as <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <a>, and <img>. It also covers attributes, nested lists, customizing lists, definition lists, table structure, internal and external links, alternative text for images, and width/height specifications.

Uploaded by

Thameiyenthi Letchumanan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
24 views

Lecture3 Ak

This document discusses various HTML elements including block-level vs inline elements, lists, tables, links, and images. It provides examples and explanations of common tags such as <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <a>, and <img>. It also covers attributes, nested lists, customizing lists, definition lists, table structure, internal and external links, alternative text for images, and width/height specifications.

Uploaded by

Thameiyenthi Letchumanan
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

Attributes, Lists, Tables,

Links, and Images


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
– may be used within a block
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=“margin-
right: 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 type=“square”>
– <ol type=“A”>
– <ol type=“a”>
– <ol type=“I”>
– <ol type=“i”>
• “type” attribute is not allowed in XHTML
1.0 Strict, so use style sheets instead
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 don’t 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.um.edu.my/”>UMCCed at
Wisma R&D</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

You might also like