chapter 1 - basic html

8/8/2019 Chapter 1 - Basic HTML

http://slidepdf.com/reader/full/chapter-1-basic-html 1/43

Chapter 1

Basic HTML



Ov er view

HTML?

Editing HTML

HTML Examples

Headers Linking

Images

Special characters and more line breaks

Unordered list

Nested and ordered list

References



Introduction

The WWW uses 3 technologies

HTML (to write web pages)

HTTP (to transmit those pages)

A web browser

A program used to receive the data, interpret it and

display the result.



HTML?

Hyper Text Markup Language

Not a programming language

A markup language Separation of the presentation of the document

from the structure of the document¶s information

Based on the technology of the World Wide Web

Consortium.



HTML? (cont.)

A HTML document can contain:

Flashy elements

Graphics

Animation

Video clips

Audio sounds

Interactive games



HTML? (cont.)

HTML isn¶t just for web pages anymore

Create corporate internets

Flashy emails

News postings

User interface for applications (web forms)



Editing HTML

HTML documents Source-code form

Text editor (e.g. Notepad, Wordpad, emacs, etc.)

.html or .htm file-name extension Web server

Apache, Internet Information Services (I I S)

Stores HTML documents

Web browser Requests HTML documents

HTML Examples

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



HTML Examples (cont.)

<html>

<head>

<TITLE>My First Home Page</TITLE>

</head>

<body>

<H1>Dr. Djamel¶s HTML Page</H1>

<P>Hi World, welcome to my HTML page!</P>

<P>Enjoy!</P>

</body>

</html>



HTML Examples (cont.)



HTML Examples (enhancement)

<html>

<head>


</head>

<body>

<H1>Dr. Djamel¶s HTML Page</H1>

<P>Hi World, welcome to my HTML page!</P>

<P>Enjoy!</P>

<P ALIGN=CENTER>Hobbies</P>

</body>

</html>



HTML Examples (enhancement) (cont.)



Headers

6 headers (Header elements)

H1 through H6



Headers (cont.)

<html>

<head>

<TITLE>Headers</TITLE>

</head>

<body>

<H1>Level 1 Header </H1><H2>Level 2 Header </H2>

<H3>Level 3 Header </H3>




</body>

</html>



Headers (cont.)



Link ing

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 m ailto: URL

<strong> tag

Bold

link s.html

(1 of 2)

1 <?x l version = "1.0"?>

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

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

4

5 

6 

7

8 <ht l x lns = "http://www.w3.org/1999/xht l">

9 <head>

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

11 </head>

12

13 <body>

14

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

16

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

18

19 

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

21

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

23

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

25



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

27

28 </body>

29 </ht¡ l>

contact.html

(1 of 1)

1 <?x m l version = "1.0"?>

2 <!DOCTYPE ht m l PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xht m l11/DTD/xht m l11.dtd">

4

5 

6 

<ht m l x m lns = "http://www.w3.org/1999/xht m l">

<head>

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

11 </head>

12

13 <body>

14

15 <p>

16 My e m ail address is

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

18 [email protected] m

19 </a>

20 . Click the address and your browser will

21 open an e- m ail m essage and address it to m e.

22 </p>

23 </body>

24 </ht m l>



Imag es

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

picture.html

(1 of 1)

1 <?x m l version = "1.0"?>



4

5 

6 

7

8 <ht m l x m lns = "http://www.w3.org/1999/xht m l">

9 <head>

10 <title> Internet and WWW How to Progra m - Welco m e </title>

11 </head>

12

13 <body>

14

15 <p>

16 <i m g src = "x m lhtp.jpg" height = "238" width = "183"

17 alt = "XML How to Progra m book cover" />

18 <i m g src = "jhtp.jpg" height = "238" width = "183"

19 alt = "Java How to Progra m book cover" />

20 </p>

21 </body>

22 </ht m l>

na v .html

(1 of 2)

1 <?x¢ l version = "1.0"?>

2 <!DOCTYPE ht ¢ l PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xht¢ l11/DTD/xht¢ l11.dtd" >

4

5 

6 

7

8 <ht¢ l x¢ lns = "http://www.w3.org/1999/xht¢ l">

9 <head>

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

11 </title>

12 </head>

13

14 <body>

15

16 <p>

17 <a href = "links.ht¢ l">

18 <i¢ g src = "buttons/links.jpg" width = "65"

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

20 </a><br />

21

22 <a href = "list.ht¢ l">

23 <i¢ g src = "buttons/list.jpg" width = "65"

24 height = "50" alt = "List Exa¢ ple Page" />

25 </a><br />



na v .html

(2 of 2)

26

27 <a href = "contact.ht m l">

28 <i m g src = "buttons/contact.jpg" width = "65"

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

30 </a><br />

31

32 <a href = "header.ht m l">

33 <i m g src = "buttons/header.jpg" width = "65"

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

35 </a><br />

36

37 <a href = "table1.ht m l">

38 <i m g src = "buttons/table.jpg" width = "65"

39

height = "50" alt = "Table Page" /> 40 </a><br />

41

42 <a href = "for m .ht m l">

43 <i m g src = "buttons/for m .jpg" width = "65"

44 height = "50" alt = "Feedback For m " />

45 </a><br />

46 </p>

47

48 </body>

49 </ht m l>



Special Characters & More Line Break s

Character entity references (in the form &code;)

Numeric character references (e.g. &)

del

Strike-out text

sup

Superscript text

sub

Subscript text

<hr />

Horizontal rule (horizontal line)

contact2.html

(1 of 2)

1 <?x£

l version = "1.0"?>

2 <!DOCTYPE ht £ l PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xht£ l11/DTD/xht£ l11.dtd">

4

5 

6 

7

8 <ht£ l x£ lns = "http://www.w3.org/1999/xht£ l">

9 <head>

10 <title> Internet and WWW How to Progra£ - Contact Page

11 </title>

12 </head>

13

14 <body>

15

16 

17 

18 <p>

19Click

20 <a href = "£ ailto:[email protected]£ "> here

21 </a> to open an e-£ ail £ essage addressed to

22 [email protected]£

.

23 </p>

24

25 <hr />

26

27 <p> All infor m ation on this site is <strong> © </strong>

28 Deitel <strong> &a m p; </strong> Associates, Inc. 2002. </p>

29

30 

31 

32 

33  34 <p><del> You m ay download 3.14 x 10 <sup> 2 </sup>

35 characters worth of infor m ation fro m this site. </del>

36 Only <sub> one </sub> download per hour is per m itted. </p>

37

38 <p> Note: <strong> < ¼ </strong> of the infor m ation

39 presented here is updated daily. </p>

40

41 </body>

42 </ht m l>



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

1 <?x m l version = "1.0"?>



4

5 

6 

7

8 <ht m l x m lns = "http://www.w3.org/1999/xht m l">

9 <head>

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

11 </head>

12

13 <body>

14

15 <h1> Here are m y favorite sites </h1>

16

17 <p><strong> Click on a na m e to go to that page. </strong></p>

18

19 

20 <ul>

21

22 

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

24

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



26

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

28

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

30 </ul>

31 </body>

32 </ht¤ l>



Nested and Ordered Lists

Represent hierarchical relationships

Ordered lists (ol)

Creates a list in which each item begins with a

number

1 <?x¥ l version = "1.0"?>

2 <!DOCTYPE ht ¥ l PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xht¥ l11/DTD/xht¥ l11.dtd">

4

5 

6 

7

8 <ht¥ l x¥ lns = "http://www.w3.org/1999/xht¥ l">

9 <head>

10 <title> Internet and WWW How to Progra¥ - 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 ¥ eet new people fro¥ countries around

20 the world. </li>

21 <li>

22 You have access to new ¥ edia as it beco¥ es public:

23

24 

25 

26 

27 <ul>

28 <li> New ga¦ es </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 Progra¦ ¦ ing

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 </ht m l>



Special characters

Character entities have two functions:

escaping special characters

displaying other characters not available in

the plain ASCII character set.Example

< the escape sequence for <

> the escape sequence for > & the escape sequence for &



Special Characters (cont.)

<html>

<head>


</head>

<body>

<H1>Dr Djamel¶s HTML Page</H1><P>Hi World, welcome to my HTML page!</P>

<P>Enjoy!</P>

<PRE>Here is the Ampersand: &, greater:>, and lesser: <.

</PRE></body>

</html>



R eferences

www.w3schools.com/html/default.asp

http://www.visibone.com/colorlab/

http://imbolc.ucc.ie/~pflynn/books/htm

lcard.html

chapter 1 - basic html

Documents