View
1
Download
0
Category
Preview:
Citation preview
CSC574 DYNAMIC WEB APPLICATION DEVELOPMENT
CHAPTER:
INTRODUCTION TO HTML
AND HTML STRUCTURE I
Suhailah Mohd Yusof
| suhailah_my@kedah.uitm.edu.my | 011-1141-8288 |
Hypertext Markup Language (HTML)
Introduction to HTML
Brief history of HTML
Effective HTML Page
HTML Version Information
HTML Elements
HTML Attributes
HTML Document Head & Body
HTML Character References
HTML Basic Tags
HTML Comments
Lengths: Dates and Times
HTML Structure Bodies
HTML Structure: Text
HTML Structure: List
Alignment & Font Styles
CSS
Links
Table
2
Upon completion of this chapter, you will learn:
Hyper Text Markup Language
Contain markup tags
- Tell web browser how to display the page
It has either ".htm" or ".html" file extension
HTML Editor / Can be created using
- Notepad
- Dreamweaver
Did you know?
- HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so on to facilitate information sharing between researcher
3
Introduction To HTML
-MS Visual web Developer -NetBeans IDE
Brief History of HTML
Developed by Tim Berners-Lee at Particles Lab, Geneva
Was popularized by the Mosaic browser developed by computer
scientists of University of Illinois, US
Since 1990’s, HTML has been extensively developed with the
explosive growth of the Web.
Hyper Text Markup Language (HTML)
1. Don‘t make users think
Obvious & self-explanatory
2. Don‘t squander users‘ patience
Less action is required from users (user friendly)
3. Manage to focus users‘ attention
Images are more eye-catching than text
Human eye is a non-linear, instantly recognize edges, patterns, motions
4. Strive for feature exposure
Visually appealing: inviting, informative
5. Make use of effective writing
No long texts, use effective simple text or images
Effective HTML Page
5
Hyper Text Markup Language (HTML)
6. Strive for simplicity
K-I-S, users are looking for information, not enjoying the design
7. Don‘t be afraid of white space
Reduce page load, easy for users to look for information
8. Communicate effectively with a visible language
Organize, economize, communicate
9. Conventions are our friends
Reduce the learning curve
10.Test early, test often (TETO)
Provide crucial insights into significant problems and issues
Effective HTML Page
6
Hyper Text Markup Language (HTML)
HTML 2.0
– developed by the Internet Engineering Task Force HTML Working Group in 1996.
– is an outdated version of HTML. For a Web developer there is no need to study the HTML 2.0 standard.
HTML 3.2
– W3C Recommendation 14. January 1997.
– HTML 3.2 contained new features such as fonts, tables, applets, superscripts, subscripts and more
HTML 4.0
– W3C Recommendation 18. December 1997.
– A second release was issued on 24. April 1998 with only some editorial corrections. (CSS)
HTML 4.01
– W3C Recommendation 24. December 1999.
– a minor update of corrections and bug-fixes from HTML 4.0.
XHTML 1.0
– reformulates HTML 4.01 in XML.
– W3C Recommendation 20. January 2000.
HTML 5
– January 22nd, 2008, W3C published a working draft for HTML 5.
– improves interoperability, and reduces development costs,
– embedding audio, video, graphics, client-side data storage, and interactive documents.
HTML Version Information
7
Hyper Text Markup Language (HTML)
The document type declaration names the document type definition (DTD) in use
for the document
The DTDs vary in the elements they support
The HTML 4.01 Strict DTD includes all elements and attributes that have not been
deprecated or do not appear in frameset documents. For documents that use
this DTD, use this document type declaration:
HTML Version Information
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
8
Hyper Text Markup Language (HTML)
The HTML 4.01 Transitional DTD includes everything in the strict DTD plus
deprecated elements and attributes (most of which concern visual
presentation). For documents that use this DTD, use this document type
declaration:
The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus
frames as well. For documents that use this DTD, use this document type
declaration:
HTML Version Information
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
9
HTML Tags
A HTML tag is encapsulated within ‘<’ and ‘>’ brackets, in form of :
<tag-name>
Some of the tags are single-element tags, referred to stand alone
tags.
The most common stand alone tag is <p> which starts and ends a
paragraph
Other tags are in pairs with the beginning tag that tells the Web
browser to start the tag function and the ending tag that tells the
Web browser to stop the function.
The ending tag is created by adding a forward slash (/) to the
beginning tag.
The syntax is: <tag-name> example</tag-name>
Structure of a HTML Page:
<html> = "open html"
<head> = "page heading begins here"
<title> = "this is the page title" (Shows up in the browser top border.)
</title> = "title is ended"
</head> = "the page heading is complete"
<body> = "the actual display (body) begins here"
[ Here you insert all of the tags, words, and graphics that comprise your
page. ]
</body> = "the display is finished (page end)"
</html> = "html is complete."
12
HTML Tags
Markup tags should be in:
– Lowercase OR
– Uppercase
HTML tags are not case sensitive BUT for good practice, please avoid mix
up the tags with lowercase and uppercase
13
HTML Tags
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HtML>
<HEaD>
<TITle></TItle>
</HeaD>
<BodY>
</bODY>
</hTML>
Good Good Avoid
If you are going to use tag pairs in combination (which you will probably be
doing quite a bit), then to avoid confusing the browser (not to mention
confusing yourself) they should be nested, not overlapping.
----- overlapping tags…. bad
----- nested tags…. good
14
HTML Tags
<this><that>HTML Attributes</this></that>
<this><that>HTML Attributes</that></this>
Remember your first code?
− Notice that all tags are used to markup HTML elements
− Notice that all tags started with "<" and end with ">"
− The element content is everything between the start and the end tag
− Notice that all tags came in pairs
− <html>...</html>, <body>...</body>, etc
− Some HTML elements have empty content
− Empty elements are closed in the start tag
− Most HTML elements can have attributes
Willing to know what are available tags in HTML?
- Visit: http://www.w3schools.com/tags/default.asp
15
HTML Elements
Remember your first code?
– Example:
• <title>MY Online Page</title>
• <body>Programming is Fun!</body>
– HTML element:
• HTML element: body
• Start with a start tag: <body>
• Content of the element is: Programming is Fun!
• End with an end tag: </body>
– Nested HTML elements (element inside element)
• Example: <p>I <b>Love</b> HTML</p>
16
HTML Elements
An attribute is a property or modifier of a tag.
Specified in the start tag of HTML element
Attributes come in name/value pairs like: name="value"
Provide additional information to an HTML element
17
HTML Attributes
<html>
<head>
<title>HTML Attributes</title>
</head>
<body>
<h4 title="Do You See me?">
Put your mouse cursor on me ;)
</h4>
</body>
</html>
Have you tried the code?
– <h4>...</h4>: define the start of the heading
– title: is an attribute placed in <h4>...</h4>. It suggested the title for the
element
Willing to know what are available attributes in HTML?
– Visit: http://www.w3schools.com/tags/ref_standardattributes.asp
18
HTML Attributes
19
<html>
<head>
<title> My Online Page </title>
</head>
<body>
Programming is Fun!
</body>
</html>
HTML Document Head & Body
<html>
<head>
</head>
<body>
</body>
</html>
20
These tags are compulsory to
create an HTML file/document.
HTML elements and attributes
are some kind of information
that you HAVE to know.
HTML Document Head & Body
21
<html>
<head>
</head>
<body>
</body>
</html>
identify the document as an HTML (Web) document
Meta-information:: information about the document such as its title & keywords, that may be useful to search engines, & other data that is not considered as document content. ex: <title> :: identifies the document displayed in the browser’s title bar
contains of the document’s content you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc.
HTML Document Head & Body
It includes mathematical symbols, Greek characters, various arrows, technical
symbols and shapes.
22
HTML Characters References | Entities
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
23
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document’s body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break | Enter |
<hr> Defines horizontal rule
<!-- … --> Defines a comment in HTML
It is very important for you to know the most important tags in HTML for:
– Headings
– Paragraphs
– Line breaks
Headings
24
Basic HTML Tags
<h1> This is heading 1 </h1>
<h2> This is heading 2 </h2>
<h3> This is heading 3 </h3>
<h4> This is heading 4 </h4>
<h5> This is heading 5 </h5>
<h6> This is heading 6 </h6>
Paragraphs
– Defined with <p> tag
25
Basic HTML Tags
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
Line breaks
– <br> forces line break wherever you place it
26
Basic HTML Tags
<p>This <br> is a para<br>graph with line breaks</p>
Comment in HTML
– Comment tag is used when you want to put comment in the HTML code
– Comment tag can be placed anywhere, as long as in the HTML code
– Comment will not appear in the web browser
27
HTML Comments
<html>
<head>
<title>Comment Tag in HTML</title>
<!–- This is comment tag -->
</head>
<!–- This is comment tag -->
<body>
<!–- This is comment tag -->
<h4 title="Do You See me?">
Put your mouse cursor on me ;)
</h4>
</body>
</html>
• A comment begins with <!-- and ends with -->
• Examples:
1. <!-- This is a comment -->
2. <!-- and so is this one,
which occupies more than one line -->
28
HTML Comments
HTML LENGTHS
• HTML specifies three types of length values for attributes:
– 1. Pixel – used especially for image and table settings.
Example: <img src=/images/res3.gif border=“0”
width=“38” height=“20”>
– 2. Percentage - percentage of the available horizontal or vertical space.
Thus, the value "50%" means half of the available space.
– Example: <hr width= “50%”>
– 3. Multilength – may be relative length, of the form “i*” where i is an
integer
• Each relative length receives a portion of the available space that is proportional
to the integer preceding the "*". The value "*" is equivalent to "1*". Thus, if 60
pixels of space are available after the user agent allots pixel and percentage
space, and the competing relative lengths are 1*, 2*, and 3*, the 1* will be
alloted 10 pixels, the 2* will be alloted 20 pixels, and the 3* will be alloted 30
pixels.
<time> tag is used for declaring the date and/or time within an HTML
document
Introduced in HTML 5
HTML Date & Time (HTML5)
<p>On Saturdays, we open at <time>09:00</time>.</p>
<p>The concert is
<time datetime="2011-12-07">next Wednesday</time>.</p>
<p>We finally hit the road at
<time datetime="2011-11-29T05:00-07:00">
5am last Tuesday</time>.</p>
30
31
HTML Text Formatting
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Renders as emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Define strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Bold
– <b> tag is used to bold any characters in your HTML
32
HTML Text Formatting
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
This is how we <b>bold</b> characters in HTML.
<br>
<b>Another example in bold-ing characters</b>
<br>
</body>
</html>
Italic & Emphasized
– <i> & <em> tags are used to define italic and emphasized text
33
HTML Text Formatting
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
<i>This text is italic</i>
<br>
<em>This text is emphasized</em>
<br>
</body>
</html>
Strong
– <strong> tag is used to render emphasized text
34
HTML Text Formatting
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
<strong>Strong</strong> the text
<br>
<strong>Try Again</strong>
</body>
</html>
Superscript & Subscript
– <sup> & <sub> tags are used to define superscript and subscript text
35
HTML Text Formatting
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
This text contains <sup>superscript</sup>
<br>
This text contains <sub>subscript</sub>
</body>
</html>
Small & Big
– <small> & <big> tag are used to define small and big text
36
HTML Text Formatting
<html>
<head>
<title>HTML Formatting</title>
</head>
<body>
<small>
This text is small
</small>
<br>
<big>
This text is big
</big>
</body>
</html>
Preformatted
– <pre> tag is used to control spaces and line breaks in HTML
37
HTML Text Formatting
<html>
<head>
<title>Preformatted</title>
</head>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
</body>
</html>
Open a new notepad.
Write down the html tags in order to display the following text format in a web page.
38
Lets Test Your Skills
HTML Lists
• HTML offers several mechanisms for specifying
lists.
• Types of Lists:
• Unordered List
• A Numerically Ordered List
• Definition List
• Directory List
HTML Lists
UNORDERED LIST
• Uses two tag elements: ul (Unordered list) & li
(Listed Items)
• Both tags (start & end) for ul are required but li
end tag is optional
• ul is bullet list, li are text listing between <ul>
</ul>
• lh is a list header
HTML Lists
UNORDERED LIST
Example:
<ul>
<lh>This is a list header
<li> List 1
<li> List 2
<li> List 3
</ul>
Output:
This is a list
header
•List 1
•List 2
•List 3
HTML Lists
Unordered List
– <ul> tag is used to create ordered list in HTML
42
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h2>Unordered List:</h2>
<ul>
<li>Humpty Dumpty</li>
<li>Hickery Dickery</li>
</ul>
</body>
</html>
HTML Lists
NUMERIC ORDERED LIST
• 2 tag elements: ol (Ordered list) & li (Listed Items)
• Both tag (start & end) for ol are required but li end tag is optional
• Using a numerically ol tag= numbers, li are text listing between <ol> </ol>
• lh is a list header
Lists
ORDERED LIST
Example:
<ol>
<lh>This is a list header
<li> List 1
<li> List 2
<li> List 3
</ol>
Output:
This is a list
header
1. List 1
2. List 2
3.List 3
HTML Lists
Ordered List
– <ol> tag is used to create ordered list in HTML
45
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h2>Unordered List:</h2>
<ol>
<li>Humpty Dumpty</li>
<li>Hickery Dickery</li>
</ol>
</body>
</html>
Lists
DEFINITION LIST
• 3 tag elements: dl (Definition list) & dt
(Definition Term) & dd (Definition Definition)
• Both dl tags (start & end) are required but both
dt & dd tags are optional
HTML Lists
DEFINITION LIST
Example:
<dl>
<lh>This is a list header
<dt> Term
<dd> Definition
<dt> Another Term
<dd> Another Definition
</dl>
Output:
This is a list header
Term
Definition
Another Term
Another Definition
HTML Lists
DIRECTORY LIST
• Using 2 tag elements: dir (Directory) & li (List
Items)
• Both dir tags (start & end) are required
• li start tag is required but end tag is optional
• Normally used for short lists of items such as file
names.
Lists
DIRECTORY LIST
Example:
<dir>
<lh>This is a list header
<li> un_order_list.htm
<li> order_list.htm
<li> definition_list.htm
<li> directory_list.htm
</dir>
Output:
This is a list header
•un_order_list.htm
•order_list.htm
definition_list.htm
directory_list.htm
HTML Lists
NESTED LIST
• Lists can be “nested” within each other and
different types of lists can be included each
other
• For example; a catalog might list various
products with an unordered list, and then list
each version of the product numerically, using
an ordered list an so on.
HTML Lists
NESTED LIST
Example: <ol type= “I"> <li>Top level entry <ul> <li>Second level entry <li>Second level entry <li>Second level entry </ul> </li> <li>Top level entry <ul> <li>Second level entry <ol type = "a"> <li>Third level entry <li>Third level entry </ol> </li> <li>Second level entry </ul> </li> <li>Top level entry </ol>
HTML Lists
NESTED LIST
Example (Output):
HTML Lists
Nested List
53
<html>
<head>
<title>List</title>
</head>
<body>
<h2>Unordered List:</h2>
<ol>
<li>Humpty Dumpty</li>
<ul>
<li>An Egg</li>
<li>Sat on the wall</li>
<li>Had a great fall</li>
</ul>
<li>Hickery Dickery</li>
<ol>
<li>A clock</li>
<li>A mouse</li>
<li>Run around</li>
<li>Fall down</li>
</ol>
</ol>
</body>
</html>
HTML Lists
Common Attributes of a List 1. type – Sets the style of a list item
• “1” for Arabic numbers 1,2,3….
• “a” for lower alpha a,b,c..
• “A” for upper alpha A,B,C…
• “i” for lower roman i,ii, iii…
• “I” for upper roman I,II,III …
HTML Lists
Common Attributes of a List (Cont.) 2. start (for Ordered List Only) – specifs the starting number of the
first item in an Ordered List.
• The default starting number is “1” or “I” or “i” or “A” or “a”.
• By using this attribute we can specify any number for starting number.
• Example: <ol type = “A” start =3>
HTML Lists summary
56
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
Open a new notepad.
Write down the html tags in order to display the following bullet & text format.
57
Lets Test Your Skills
Exercise 1
Exercise 2
Fonts
Sample: using <font> tag to display text
<html>
<body>
<p><font size="2" face="Verdana">
This is a paragraph.
</font></p>
<p><font size="5" face="Times" color="blue">
This is another paragraph.
</font></p>
</body>
</html>
58
Fonts
We can change the fontsizetoo... It's pretty easy!
‒ Specify the size attributes
‒ Fonts come in 7 sizes:
59
<font size="2">
Font with size 2
</font>
Fonts
We can also change the fo t typ too... It's pretty easy!
-specify the face attributes
- some common fonts that are on *most* computers and are pretty safe bets.
Arial Arial Black Arial Narrow
Bookman Old Style Century Gothic Comic Sans MS Courier New Georgia Impact
Lucida Console Tahoma Times New Roman
Trebuchet MS Verdana
60
<font face="impact"> Impact </font>
<font face="georgia"> Georgia </font>
Fonts
We can also change the font color too... It's pretty easy!
-specify the color attributes
61
<font color="red"> Dazzling RED </font>
<font color="#999ccc"> Crazy Blue </font>
Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the combination of
RED, GREEN, and BLUE color values (RGB).
The combination of RGB values from 0 to 255, gives more than 16 million different colors
(256 x 256 x 256).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
Web Safe Colors?
HTML Color Picker
62
HTML Color
Fonts
Remember!!!
A <tag> tells the browser to do something
An attribute goes inside the <tag> and tells the browser how to do it.
Defaults
default value is a value that the browser assumes if you have not told it otherwise.
A good example is the font size. The default font size is 3 (usually). If you say
nothing it will be 3. If you make faces at your computer it will still be 3!
Every browser has a default font setting - font name, size and color. Unless you
have messed with it, the default is probably Times New Roman or Verdana 12pt
(which translates into 3 for our purposes) and it's black.
63
Fonts
Unfortunately <font> tag is deprecated in HTML 4, and removed from
HTML5.
The World Wide Web Consortium (W3C) has removed the <font> tag from its
recommendations.
In HTML 4, Cascading Style Sheets (CSS) should be used to define the
layout and display properties for many HTML elements.
64
Cascading Style Sheet (CSS)
W3C recommends the uses of Cascading Style Sheet (CSS) to create
layout and display properties of HTML
CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the
HTML is the content, the style sheet is the presentation of that document.
Styles is different from HTML, they have a format of 'property: value'
and most properties can be applied to most HTML tags.
About CSS
| you need to learn by urself |
65
<align> to align tables, images, objects, paragraphs, etc. within web browser
Possible values:
– left : text lines are rendered flush left.
– center : text lines are centered.
– right : text lines are rendered flush right.
– justify : text lines are justified to both margins.
This attribute has been deprecated in favor of CSS
66
Alignment
<H1 align="center"> How to Carve Wood </H1>
Deprecated example:
<center><h1> How to Carve Wood </h1></center>
Solution example:
Better Solution CSS: http://www.w3.org/TR/html4/present/graphics.html
Fonts
67
Open a new notepad. Write html tags in order to display the following output.
The sequence of the alphabet size are:
3 , 4 , 4, 5, 6, 7, 7, 6, 5, 4, 3, 2,1
The sequence of the alphabet color are:
#ee0000
#ff7700
#eeee00
#00bb00
#0000ee
#dd00dd
#880088
68
HTML Links (Hyperlinks)
Tag Description
<a> Defines an anchor. Always use with href attribute
Anchor Tag and href Attribute
– <a> tag use to point to any resource (document | Web) on the Web:
• HTML file, sound, movie, Website, etc
69
HTML Links (Hyperlinks)
<a href="url">Text to be displayed</a>
<a href="http://www.facebook.com/">Sign in Facebook</a>
<a href=“my_hometown.asp“>HOMETOWN</a>
Target Atrribute
Defined where linked documet will be opened
• _blank : open the linked document in a new window or tab
• _self : open the linked document in the same frame as it was clicked (default)
• _parent : open the linked document in the parent frameset.
(only applicable when using frames)
• _top : open the linked document in the full body of the window
• _framename : open the linked document in a named frame
70
HTML Links (Hyperlinks)
<a href="http://www.google.com/" target="_blank">Google</a>
Anchor Tag and Name Attribute
– The link will "jump" to another section on the same page
71
HTML Links (Hyperlinks)
<a name="link_target"<h2>I Am Here!></h2></a>
<a href="#link_target/">Link Target</a>
Email Link
– Create a hyperlink to an email address
72
HTML Links (Hyperlinks)
<a href="url">Text to be displayed</a>
<a href="mailto:baya151@yahoo.com">Email to me</a>
7/12/2010 73
HTML Table
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in
a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
Table
– <table> tag is used to create table in HTML
– <tr> tag is used to create row, and
– <td> tag is used to create table data where it can contains text, image, and so
forth
– Attribute like border can be placed in <table> tag.
• If border value is 0, there will be no border will be displayed
• If border value is 1, there will be a border.
– If you want to place the content in the (center | left | right), place align attribute
in <td> tag like below:
*Note: specify align value with center, left, or right. Default value is left.
7/12/2010 74
HTML Table
<td align="center"> content </td>
Table
– <table> tag is used to create table in HTML
7/12/2010 75
HTML Table
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
Table with heading
– <th> tag is used to create heading in a table
7/12/2010 76
HTML Table
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
</body>
</html>
Table with cellpadding Attribute
– cellpadding is used to create more white space between the cell content and
its border
7/12/2010 77
HTML Table
<html>
<body>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table with cellspacing Attribute
– cellspacing is used to increase the distance between the cells
7/12/2010 78
HTML Table
<html>
<body>
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Table with colspan Attribute
– To make a cell span multiple columns
7/12/2010 79
HTML Table
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="30%">
<tr>
<td colspan="2">Table header</td>
</tr>
<tr>
<td width="20%">Table cell 1</td>
<td>Table cell 2</td>
</tr>
</table>
</body>
</html>
80
Table with rowspan Attribute
– To make a cell span multiple rows
7/12/2010 81
HTML Table
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="30%">
<tr>
<th rowspan="2">Table header</th>
<td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>
</table>
</body>
</html>
Open a new notepad.
Write down the html tags in order to display the following table & text format.
7/12/2010 82
Lets Test Your Skills
Bibliography (Book)
Knuckles (2001). Introduction to Interactive Programming on the Internet using
HTML & Javascript. John Wiley & Sons, Inc.
Bibliography (Websites)
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/html_entities.asp
http://www.quackit.com/html/
http://www.w3.org/TR/html4/conform.html#deprecated
http://www.w3.org/TR/1999/REC-CSS1-19990111
http://www.htmldog.com/guides/cssbeginner/
83
Bibliography
THANKS
Recommended