Chapter 2 HTML (Hypertext Markup Language) Part I.

Chapter 2

HTML

(Hypertext Markup Language)

Part I

Topics

• Introduction• Editing HTML• First HTML Example• Headers• Linking• Images• Unordered Lists• Nested and Ordered Lists• Tables• References

Introduction

• The World-Wide Web used three new technologies:– HTML (HyperText Markup Language) used to write

Web pages.– HTTP (HyperText Transfer Protocol) to transmit those

pages.– A Web browser client program to receive the data,

interpret it, and display the results.• HyperText Markup Language

– HTML is not a “Programming Language”– A markup language– Separation of the presentation of a document from

the structure of the document’s information– Based on Technology of the World Wide Web

Consortium (W3C)

Introduction

• HTML documents can contain: - flashy elements: graphics, animations,

video clips, audio sounds, and even interactive games

• HTML isn't just for Web pages anymore - create corporate intranets- flashy e-mail- news postings - user interfaces for applications: web forms

Editing XHTML

• HTML documents• Source-code form• Text editor (e.g. Notepad, Wordpad)• .html or .htm file-name extension• Web server

– Apache, Internet Information Services (IIS)– Stores HTML documents

• Web browser– Requests HTML documents

Differences between HTML and XHTML

• XHTML Elements Must Be Properly NestedImproperly nested:

<b><i>This text is bold and italic</b></i>

Properly nested:

<b><i>This text is bold and italic</i></b>

• XHTML Elements Must Always Be ClosedThis is wrong:

<p>This is a paragraph

<p>This is another paragraph

This is correct:

<p>This is a paragraph</p>

<p>This is another paragraph</p>


• Empty Elements Must Also Be Closed This is wrong:

A break: <br>A horizontal rule: <hr>An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />A horizontal rule: <hr />An image: <img src="happy.gif" alt="Happy face" />


• XHTML Elements Must Be In Lower CaseThis is wrong:

<BODY>

<P>This is a paragraph</P>

</BODY>

This is correct:

<body>

<p>This is a paragraph</p>

</body>

First HTML Example

• HTML Structure– Comments – <html> element

• <head> element– Head section

» Title of the document (<title> tag)» Style sheets (<link> tag) and scripts (<script> tag), …

• <body> element– Body section

» Page’s content the browser displays

– Start tag• attributes (provide additional information about an element)

– name and value (separated by an equal sign)

– End tag

First HTML Example



<html>

<head>

<title> Our first document </title>

</head>

<body>

Greetings from your Webmaster!

</body>

</html>

BODY Element Tags and Attributes

• Attributes provide additional information about HTML elements. There are many attributes that you can explore later by yourselves.

• Now, let us explore some of the attributes that relate to <BODY element.

BODY Element Tags and Attributes

<body text="#000000" bgcolor="#FFFFFF" link="#0000EF" vlink="#51188E" alink="#FF0000" background="clouds.gif">

– BGCOLOR="white" - Designates the page background color. – TEXT="black" - Designates the color of the page's text. – LINK="blue" - Designates the color of links that have not been

visited. – ALINK="red" - Designates the color of the link currently being

visited. – VLINK="green" - Designates the color of visited links.

Color

• Color can be specify in 3 ways:– Standard colors (blue, red, black, white)– Hexadecimal (#FFFFFF, #99FF66)– Decimal (255,255,255 or 0,0,0)

• Example of web color chart:

http://html-color-codes.com/rgb.html

http://html-color-codes.com/rgb.html

Headers

• Six headers ( header elements)– h1 through h6

<html> <head> <TITLE>Headers</TITLE> </head> <body> <H1>Level 1 Header</H1> <H2>Level 2 Header</H2> <H3>Level 3 Header</H3> <H4>Level 4 Header</H4> <H5>Level 5 Header</H5> <H6>Level 6 Header</H6></body> </html>

Linking

• Hyperlink– References other sources such as HTML documents

and images– Both text and images can act as hyperlinks– Created using the <a> (anchor) element

• Attribute href– Specifies the location of a linked resource

• Link to e-mail addresses using mailto: URL

1 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Internet and WWW How to Program - Links</title>

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click a name to go to that page.</strong></p>

18

19 

20 <p><a href = "http://www.deitel.com">Deitel</a></p>

21

22 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>

23

24 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>

25

26 <p><a href = "http://www.usatoday.com">USA Today</a></p>

27

28 </body>

29 </html>

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Contact Page</title>

11 </head>

12

13 <body>

14

15 <p>

16 My email address is

17 <a href = "mailto:[email protected]">

18 [email protected]

19 </a>

20 . Click the address and your browser will

21 open an e-mail message and address it to me.

22 </p>

23 </body>

24 </html>

Images

• Three most popular formats– Graphics Interchange Format (GIF)

– Joint Photographic Experts Group (JPEG)

– Portable Network Graphics (PNG)

– img element• src attribute

– Specifies the location of the image file

• width and height

• br element– Line break

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Welcome</title>

11 </head>

12

13 <body>

14

15 <p>

16 <img src = "xmlhtp.jpg" height = "238" width = "183"

17 alt = "XML How to Program book cover" />

18 <img src = "jhtp.jpg" height = "238" width = "183"

19 alt = "Java How to Program book cover" />

20 </p>

21 </body>

22 </html>

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Navigation Bar

11 </title>

12 </head>

13

14 <body>

15

16 <p>

17 <a href = "links.html">

18 <img src = "buttons/links.jpg" width = "65"

19 height = "50" alt = "Links Page" />

20 </a><br />

21

22 <a href = "list.html">

23 <img src = "buttons/list.jpg" width = "65"

24 height = "50" alt = "List Example Page" />

25 </a><br />

26

27 <a href = "contact.html">

28 <img src = "buttons/contact.jpg" width = "65"

29 height = "50" alt = "Contact Page" />

30 </a><br />

31

32 <a href = "header.html">

33 <img src = "buttons/header.jpg" width = "65"

34 height = "50" alt = "Header Page" />

35 </a><br />

36

37 <a href = "table1.html">

38 <img src = "buttons/table.jpg" width = "65"

39 height = "50" alt = "Table Page" />

40 </a><br />

41

42 <a href = "form.html">

43 <img src = "buttons/form.jpg" width = "65"

44 height = "50" alt = "Feedback Form" />

45 </a><br />

46 </p>

47

48 </body>

49 </html>

Basic Text Formatting

• Blockquotes

– Content of <blockquote>– To set a block of text off from the normal flow

and appearance of text– Or, using a simple word, <blockquote>

indents the text as though it were a quote.


<p>

Quoted from The Star, July 2009:<br>

</p>

<blockquote>

Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of conserving what we have and overcoming the problems of water too contaminated to consume.

</blockquote>

-------OUTPUT-------

Quoted from The Star, July 2009:

Water as a resource has been one of the main drivers behind the rapid industry development and good standard of living. In a rapidly changing world, there are now challenges of

conserving what we have and overcoming the problems of water too contaminated to consume.


• Font Styles and Sizes (can be nested)

– <b>..</b> - Sets bold text. – <big>..</big> - Sets larger than normal text. – <em>..</em> - Sets text in italics and denotes emphasis. – <i>..</i> - Sets text in italics. – <small>..</small> - Makes text smaller than normal. – <strike>..</strike> - Draws a line through the text as a "strikeout". – <strong>..</strong> - Same as bold but denotes strong emphasis. – <sup>..</sup> -Superscript– <sub>..</sub> -Subscript– <tt>..</tt> - Monospaced typewriter font. – <u>..</u> - Underlined text. – <var>..</var> - Mark a variable.


This is an example of the <b><b> tag </b>.<br>

This is an example of the <big><big> tag</big>.<br>

This is an example of the <em><em> tag</em><br>

This is an example of the <i><i> tag</i>.<br>

This is an example of the <small><small> tag</small>.<br>

This is an example of the <strike><strike> tag</strike>.<br>

This is an example of the <strong><strong> tag<strong>.<br>

This is an example of the <sup><sup> tag<sup>.<br>

This is an example of the <sub><sub> tag<sub>.<br>

This is an example of the <tt><tt> tag<tt>.<br>

This is an example of the <u><u> tag</u><br>

This is an example of the <var><var> tag</var><br>


• Note:– < – to display <– > – to display >


• Subscripts with <sub>• Superscripts with <sup>

• Examples: x<sub>2</sub><sup>3</sup>

• Displays x23

• Horizontal rules <hr /> draws a line across the display, after a line break.

Unordered Lists

• Unordered list element ul– Creates a list in which each item begins with a

bullet symbol (called a disc)– li (list item)

• Entry in an unordered list

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Links</title>

11 </head>

12

13 <body>

14

15 <h1>Here are my favorite sites</h1>

16

17 <p><strong>Click on a name to go to that page.</strong></p>

18

19 

20 <ul>

21

22 

23 <li><a href = "http://www.deitel.com">Deitel</a></li>

24

25 <li><a href = "http://www.w3.org">W3C</a></li>

26

27 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>

28

29 <li><a href = "http://www.cnn.com">CNN</a></li>

30 </ul>

31 </body>

32 </html>

Nested and Ordered Lists

• Represent hierarchical relationships

• Ordered lists (ol)– Creates a list in which each item begins with a

number

4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Lists</title>

11 </head>

12

13 <body>

14

15 <h1>The Best Features of the Internet</h1>

16

17 

18 <ul>

19 <li>You can meet new people from countries around

20 the world.</li>

21 <li>

22 You have access to new media as it becomes public:

23

24 

25 

26 

27 <ul>

28 <li>New games</li>

29 <li>

30 New applications

31

32 

33 <ol>

34 <li>For business</li>

35 <li>For pleasure</li>

36 </ol>

37 </li>

38

39 <li>Around the clock news</li>

40 <li>Search engines</li>

41 <li>Shopping</li>

42 <li>

43 Programming

44

45 

46 <ol>

47 <li>XML</li>

48 <li>Java</li>

49 <li>XHTML</li>

50 <li>Scripts</li>

51 <li>New languages</li>

52 </ol>

53

54 </li>

55

56 </ul> 

57 </li>

58

59 <li>Links</li>

60 <li>Keeping in touch with old friends</li>

61 <li>It is the technology of the future!</li>

62

63 </ul> 

64

65 </body>

66 </html>

Table

• A table is a matrix of rows and columns, each possibly having content

• Each position in a table is called a cell

• Some cells have labels, but most have data

• A table is specified as the content of a <table> tag

• A border attribute in the <table> tag specifies a border between the cells

Table

• If border is set to "border", the browser’s default width border is used

• The border attribute can be set to a number, which will be the border width

• Without the border attribute, the table will have no lines!

• Tables are given titles with the <caption> tag, which can immediately follow <table>

Table

• Each row of a table is specified as the content of a <tr> tag

• The row headings are specified as the content of a <th> tag

• The contents of a data cell is specified as the content of a <td> tag

Table

<table border = "border">

<caption> Fruit Juice Drinks </caption>

<tr>

<th> </th>

<th> Apple </th>

<th> Orange </th>

<th> Screwdriver </th>

</tr>

<tr>

<th> Breakfast </th>

<td> 0 </td>

<td> 1 </td>

<td> 0 </td>

</tr>

<tr>

<th> Lunch </th>

<td> 1 </td>

<td> 0 </td>

<td> 0 </td>

</tr>

<tr>

<th> Dinner </th>

<td> 0 </td>

<td> 0 </td>

<td> 1 </td>

</tr>

</table>

Table

• A table can have two levels of column labels

• If so, the colspan attribute must be set in the <th> tag to specify that the label must span some number of columns

Table

<tr>

<th colspan = "3"> Fruit Juice Drinks </th>

</tr>

<tr>

<th> Orange </th>

<th> Apple </th>


</tr>

Table

• If the rows have labels and there is a spanning column label, the upper left corner must be made larger, using rowspan

Table

<table border = "border">

<caption> Fruit Juice Drinks

</caption>

<tr>

<td rowspan = "2"> </td>

<th colspan = "3"> Fruit Juice Drinks </th>

</tr>

<tr>

<th> Apple </th>

<th> Orange </th>


</tr>

…</table>

References

• Programming The WWW Third EditionRobert W. Sebesta

Pearson Prentice Hall

ISBN 0-321-31257-0

• http://www.comptechdoc.org/independent/web/html/index.html

• http://www.w3schools.com/XHTML/xhtml_html.asp

http://www.comptechdoc.org/independent/web/html/index.html

http://www.comptechdoc.org/independent/web/html/index.html

http://www.w3schools.com/XHTML/xhtml_html.asp

Chapter 2 HTML (Hypertext Markup Language) Part I.

Documents

Transcript of Chapter 2 HTML (Hypertext Markup Language) Part I.