CSC574 DYNAMIC WEB APPLICATION DEVELOPMENThabibalbi.weebly.com/uploads/2/1/2/9/21292280/intro_to... · 2019. 9. 27. · 7. Don‘t be afraid of white space Reduce page load, easy

CSC574 DYNAMIC WEB APPLICATION DEVELOPMENT

CHAPTER:

INTRODUCTION TO HTML

AND HTML STRUCTURE I

Suhailah Mohd Yusof

| [email protected] | 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


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


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.


7


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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

8

http://www.w3.org/TR/html4/sgml/dtd.html

http://www.w3.org/TR/html4/conform.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:


<!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

http://www.w3.org/TR/html4/sgml/loosedtd.html


http://www.w3.org/TR/html4/sgml/framesetdtd.html

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

http://www.w3schools.com/tags/default.asp











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

http://www.w3schools.com/tags/ref_standardattributes.asp

19

<html>

<head>

<title> My Online Page </title>

</head>

<body>

Programming is Fun!

</body>

</html>


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


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.


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>






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>


<body>


<h4 title="Do You See me?">

Put your mouse cursor on me ;)

</h4>

</body>

</html>

• A comment begins with 

• Examples:

1. 

2. 

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>

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

<head>


</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>

<head>


</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>

<head>


</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>

<head>


</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>

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


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


<ol>



</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>


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


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


<ol>


<ul>

<li>An Egg</li>

<li>Sat on the wall</li>

<li>Had a great fall</li>

</ul>


<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


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

http://www.w3schools.com/html/html_colors.asp

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

http://www.w3schools.com/css/default.asp

<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


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


<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


<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


<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


<a href="url">Text to be displayed</a>

<a href="mailto:[email protected]">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>


</tr>

<tr>



</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>


</head>

<body>

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>



</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>


</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>


</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


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

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/html_entities.asp

http://www.quackit.com/html/







http://www.htmldog.com/guides/cssbeginner/

THANKS

Documents

CSC574 DYNAMIC WEB APPLICATION DEVELOPMENThabibalbi.weebly.com/uploads/2/1/2/9/21292280/intro_to... · 2019. 9. 27. · 7. Don‘t be afraid of white space Reduce page load, easy