Introduction to HTML Outline 3 1 3 2

Objectives In this chapter, you will learn: l l l To understand important components

3. 1 Introduction l HTML = Hyper. Text Markup Language l A markup language

3. 2 Editing HTML l HTML documents are in source-code form l It can

3. 3 First HTML Example l HTML Comments: start with <!-- and end with

Comments Head section <!-- Fig. 4. 1: main. html --> <!-- Our first Web

Example 1: First HTML example: main. html <!-- Fig. 4. 1: main. html -->

Creating your first html file: (a) l l l l (b) Make sure you

3. 5 HTML Header Elements Six headers ( header elements): h 1 through h

3. 6 Linking l Linking is done through Hyperlink l l l Created using

Example 3: Linking to other Web pages: links. html <body> <p><a href = "http:

Example 4: Linking to an e-mail address: contact. html <p> My e-mail address is

3. 7 Images l Three most popular formats l l Image element: <img />

Example 5: Images in XHTML files: picture. html <p> <img src = "xmlhtp. jpg"

Example 6: Images as link in anchors: nav. html <a href = "links. html">

3. 8 Special Characters and More Line Breaks l Character entity references (in the

Example 7: Special characters in HTML: contact 2. html <hr /> <!-- inserts a

3. 9 Unordered Lists l Unordered list element: ul l Creates a list in

Example 8: Unordered lists in HTML: links 2. html <ul> <li><a href = "http:

3. 10 Nested and Ordered Lists l Represent hierarchical relationships l Ordered lists: ol

<ul> Example 9: Nested and ordered lists in HTML: list. html <li>New games</li> <li>New

3. 11 Web Resources l l l l www. w 3. org/TR/xhtml 11 www.

Slides: 22

Download presentation

Introduction to HTML Outline 3. 1 3. 2 3. 3 3. 4 3. 5 3. 6 3. 7 3. 8 3. 9 3. 10 3. 11 Introduction Editing HTML First HTML Example W 3 C HTML Validation Service Headers Linking Images Special Characters and More Line Breaks Unordered Lists Nested and Ordered Lists Web Resources 1

Objectives In this chapter, you will learn: l l l To understand important components of HTML documents. To use HTML to create Web pages. To be able to add images to Web pages. To understand how to create and use hyperlinks to navigate Web pages. To be able to mark up lists of information. 2

3. 1 Introduction l HTML = Hyper. Text Markup Language l A markup language l Separation of the presentation of a document from the structure of the document’s information l Technology of the World Wide Web Consortium (W 3 C) 3

3. 2 Editing HTML l HTML documents are in source-code form l It can be edited by using a text editor (e. g. Notepad, Wordpad, emacs, etc. Edit. Plus text editor is included in IPositif CD) l . html or. htm file-name extension l Web server: Stores HTML documents l Web browser: Requests HTML documents 4

3. 3 First HTML Example l HTML Comments: start with  l html element: <html> l head element: <head> § § § l Head section of HTML document Title of the document Style sheets and scripts body element: <body> § § Body section of HTML document Page’s content the browser displays l Start tag l End tag 5

Comments Head section   <html> <head> </head> <body> Body section Start tag end tag </body> </html> 6

Example 1: First HTML example: main. html   <html> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> Welcome to XHTML! </body> </html> 7

Creating your first html file: (a) l l l l (b) Make sure you have installed Edit. Plus text editor included in IPositif CD Click on Edit. Plus icon. (a) Select: File -> New -> HTML Pages: Delete all the initial content of the page Copy the codes in the example 1 and paste it in Edit. Plus (b) Save the file. Select File -> Save As. At the file name, type ‘name. html’ Click the file ‘name. html’ from the directory where you saved the file. You will see the browser page similar like the one in page 7 8

3. 5 HTML Header Elements Six headers ( header elements): h 1 through h 6 <body> <h 1>Level 1 Header</h 1> <h 2>Level 2 header</h 2> <h 3>Level 3 header</h 3> <h 4>Level 4 header</h 4> <h 5>Level 5 header</h 5> <h 6>Level 6 header</h 6> </body> Example 2: Headers elements h 1 trough h 6: header. html 9

3. 6 Linking l Linking is done through Hyperlink l l l Created using the a (anchor) element l l l References other sources such as HTML documents and images Both text and images can act as hyperlinks Attribute href: specifies the location of a linked resource Link to e-mail addresses using mailto: URL tag is use to create a bold text 10

Example 3: Linking to other Web pages: links. html <body> <a href = "http: //www. deitel. com">Deitel</a> <a href = "http: //www. prenhall. com">Prentice Hall</a> <a href = "http: //www. yahoo. com">Yahoo!</a> <a href = "http: //www. usatoday. com">USA Today</a> </body> User click 11

Example 4: Linking to an e-mail address: contact. html My e-mail address is <a href = "mailto: deitel@deitel. com"> deitel@deitel. com</a> . Click the address and your browser will open an e-mail message and address it to me. Email Client Application 12

3. 7 Images l Three most popular formats l l Image element: <img /> l l l Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) src attribute: specifies the location of the image file width and height attribute: measure in pixels (picture elements) Empty elements l Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag 13

Example 5: Images in XHTML files: picture. html <img src = "xmlhtp. jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp. jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> Image jhtp. jpg not available 14

Example 6: Images as link in anchors: nav. html <a href = "links. html"> <img src = "buttons/links. jpg" width = "65" height = "50" alt = "Links Page" /> </a> <a href = "list. html"> <img src = "buttons/list. jpg" width = "65" height = "50" alt = "List Example Page" /> </a> . . links. html 15

3. 8 Special Characters and More Line Breaks l Character entity references (in the form &code; ) Numeric character references (e. g. & ) l del: Strike-out text l l sup: superscript text sub: subscript text l <hr />: Horizontal rule (horizontal line) l 16

Example 7: Special characters in HTML: contact 2. html <hr />  All information on this site is © Deitel & Associates, Inc. 2004. <del>You may download 3. 14 x 102 characters worth of information from this site. </del> Only one download per hour is permitted. Note: < &frac 14; of the information presented here is updated daily. . 17

3. 9 Unordered Lists l Unordered list element: ul l Creates a list in which each item begins with a bullet symbol (called a disc) l li (list item) l Entry in an unordered list 18

Example 8: Unordered lists in HTML: links 2. html <ul> <li><a href = "http: //www. deitel. com">Deitel</a></li> <li><a href = "http: //www. w 3. org">W 3 C</a></li> <li><a href = "http: //www. yahoo. com">Yahoo!</a></li> <li><a href = "http: //www. cnn. com">CNN</a></li> </ul> add four list items 19

3. 10 Nested and Ordered Lists l Represent hierarchical relationships l Ordered lists: ol l Creates a list in which each item begins with a number 20

<ul> Example 9: Nested and ordered lists in HTML: list. html <li>New games</li> <li>New applications nested ordered list <ol> <li>For business</li> Another nested ordered list <li>For pleasure</li> </ol> </li> <li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li>Programming <ol> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> 21 </li> </ul>

3. 11 Web Resources l l l l www. w 3. org/TR/xhtml 11 www. xhtml. org www. w 3 schools. com/xhtml/default. asp validator. w 3. org hotwired. lycos. com/webmonkey/00/50/index 2 a. html wdvl. com/Authoring/Languages/XML/XHTML www. w 3. org/TR/2001/REC-xhtml 11 -20010531 22