Scribd Logo
Carica

Benvenuto in Scribd!

  • Chapter2 HTML Part2

    Caricato da

    Gobinath Mann
    10 visualizzazioni15 pagine
    html

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    10 visualizzazioni15 pagine

    Chapter2 HTML Part2

    Caricato da

    Gobinath Mann
    html

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    Outline

    Chapter 2
    HTML (Hypertext Markup Language) Part II

    2003 Prentice Hall, Inc.


    All rights reserved.

    Topics
    Internal Linking Creating and Using Image Maps Meta Elements Form (will be learnt together with PHP topic)

    Chap 2: Web Programming (CCSB144) - HTML

    Internal Linking
    Enables the user to jump between locations in the same document

    43
    Chap 2: Web Programming (CCSB144) - HTML

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 5.6: links.html --> <!-- Internal Linking -->

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

    <title>Internet and WWW How to Program - List</title>

    links.html (1 of 3)

    <!-- id attribute creates an internal hyperlink destination --> <h1 id = "features">The Best Features of the Internet</h1> <!-- an internal link's address is "#id" --> <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p> <ul> <li>You can meet people from countries around the world.</li> <li>You have access to new media as it becomes public:

    44

    26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

    <ul> <li>New games</li> <li>New applications <ul> <li>For Business</li> <li>For Pleasure</li> </ul> </li>

    <li>Around the clock news</li> <li>Search Engines</li> <li>Shopping</li> <li>Programming <ul> <li>XHTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>New languages</li> </ul> </li> </ul> </li> <li>Links</li>

    links.html (2 of 3)

    45

    51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

    <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul> <!-- id attribute creates an internal hyperlink destination --> <h1 id = "bugs">My 3 Favorite Bugs</h1> <p>

    <!-- internal hyperlink to features --> </a></p> <ol> <li>Fire Fly</li> <li>Gal Ant</li> <li>Roman Tic</li> </ol> </body>

    links.html (3 of 3)

    <a href = "#features">Go to <em>Favorite Features</em>

    71 </html>

    46

    47
    Chap 2: Web Programming (CCSB144) - HTML

    Creating and Using Image Maps


    Designate certain areas of an image (called hotspots) as links
    Element map
    Attribute id
    Identifies the image map

    Element area
    Defines hotspot Attribute shape and coords Specify the hotspots shape and coordinates Rectangular ( shape = rect ) Polygon ( shape = poly ) Circle ( shape = circle )
    Chap 2: Web Programming (CCSB144) - HTML

    48

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

    <?xml version = "1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Fig. 5.7: picture.html -->

    <!-- Creating and Using Image Maps -->

    <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> </title> </head> <body> <p>

    picture.html (1 of 3)

    Internet and WWW How to Program - Image Map

    <!-- the <map> tag defines an image map --> <map id = "picture"> <!-- shape = "rect" indicates a rectangular <!-- and lower-right corners --> -->

    <!-- area, with coordinates for the upper-left -->

    49

    25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

    <area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area href = "contact.html" shape = "rect" coords = "126,122,198,143" alt = "Go to the contact page" /> <area href = "main.html" shape = "rect"

    coords = "3,7,61,25" alt = "Go to the homepage" /> <area href = "links.html" shape = "rect" coords = "168,5,197,25" alt = "Go to the links page" /> <!-- value "poly" creates a hotspot in the shape --> <!-- of a polygon, defined by coords <area shape = "poly" alt = "E-mail the Deitels" -->

    picture.html (2 of 3)

    coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:deitel@deitel.com" /> <!-- shape = "circle" indicates a circular --> <!-- area with the given center and radius --> <area href = "mailto:deitel@deitel.com" shape = "circle" coords = "100,36,33" alt = "E-mail the Deitels" /> </map>

    50

    50 51 52 53 54 55

    <!-- <img src =... usemap = "#id"> indicates that the --> <!-- specified image map is used with this image <img src = "deitel.gif" width = "200" height = "144" alt = "Deitel logo" usemap = "#picture" /> </p> </body> -->

    56 </html>

    picture.html
    (3 of 3)

    51

    meta Elements
    Specify information about a document
    Attribute name
    Identifies the type of meta element keywords ( name = keywords )
    Provides search engines with a list of words that describe a page

    description ( name = description )


    Provides a description of a site

    Attribute content
    Provides the information search engine use to catalog pages
    52
    Chap 2: Web Programming (CCSB144) - HTML

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

    <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 5.8: main.html --> <!-- <meta> tag -->

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

    <title>Internet and WWW How to Program - Welcome</title> <!-- <meta> tags provide search engines with --> <!-- information used to catalog a site --> <meta name = "keywords" content = "Web page, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, frame, deitel" /> <meta name = "description" content = "This Web site will

    main.html (1 of 2)

    help you learn the basics of XHTML and Web page design through the use of interactive examples and instruction." /> </head>

    53

    25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

    <body> <h1>Welcome to Our Web Site!</h1> <p>We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>. <em>XHTML</em> is better equipped than <em>HTML</em> to represent complex

    data on the Internet. <em>XHTML</em> takes advantage of XMLs strict syntax to ensure well-formedness. Soon you will know about many of the great new features of <em>XHTML.</em></p> <p>Have Fun With the Site!</p> </body>

    main.html (2 of 2)

    40 </html>

    54

    The Meta Refresh


    If your page has moved, or you have a need to redirect your visitors automatically, you can use a meta refresh to send them the page of your choice.
    <meta http-equiv="refresh" content="5;URL=http://www.yahoo.com">

    55
    Chap 2: Web Programming (CCSB144) - HTML

    Potrebbero piacerti anche