Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Web Engineering: Hyperlinks, Tables & Frames

    Hochgeladen von

    Radhay35335
    23 Ansichten21 Seiten

    Originaltitel

    Lec # 04 HTML - IV

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    23 Ansichten21 Seiten

    Web Engineering: Hyperlinks, Tables & Frames

    Hochgeladen von

    Radhay35335

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 21

    Web Engineering

    Lecture 04
    Hyperlinks, Tables & Frames
    (HTML5 - IV)

    1
    URL
    • URL stands for Uniform Resource Locator.

    • Is a way of specifying the location of resource


    on internet.

    • Resource can be a web page, image, file of


    some kind.

    • URL is simply just an address.


    URL
    • URL looks like this:

    http://www.bw.org:80/object?query#location
    Scheme Host Port Path Query Fragment
    String Identifier

    • Scheme: specifies the protocol being used most


    URL for web pages will be either http or https.

    • Host: is the IP address of the host server.


    • Port: is the TCP port number, default port number is 80
    for http scheme, normally emit port number and colon
    before it.

    • Path: field is the path of the object that specify, typically


    it look likes a unix file path. and it always begin with /

    • Query String: is we passed on the software running on


    the server, its typically used CGI, PHP queries.

    • Fragment Identifier: is used to jump to location within a


    page or other resource.

    4
    EXAMPLE
    • http://www.bw.org/

    This URL specifies a host name and path is


    single slash (/) indicating the root directory. It is
    often default if you emit path.

    • http://www.bw.org/contact/

    This URL specifies host name and a path. Path in


    this case is /contact/. This indicates the default
    resource on contact directory.
    Relative URL
    • Filename.html

    • This is called relative URL. In this case web


    browser will search for this page in the same
    directory.
    Hyper Link
    • In HTML, you create a hyper link with Anchor
    tag.

    • Example:
    <body>
    <p>
    Here is a link to
    <a href=“http://www.uol.edu.pk/”
    target=“_blank”>my home page</a>.
    </p>
    </body>
    EXAMPLE
    • Anchor tag is block level element, it can have several
    tags inside.
    • <body>
    <h1>HTML Hyperlinks</h1>
    <a href=“http://uol.edu.pk” target=“_blank”>
    <section style=“margin-left: 50px”>
    <h1>Billybot 9000! </h1>
    <p>Only $9.99 plus shipping and handling</p>
    </section>
    </a>
    </body>
    8
    RELATIVE URL
    • Relative URLs are URL, don’t specify a complete
    host name path. Relative URL are great way to
    refer objects we use in same file space.

    • Example:
    <p>
    Here is a link to <a href=“page1.html”> Page
    1 </a>.
    The text around the link is not par of the link.
    </p>
    9
    Linking with a Page
    • In HTML, It is possible to link to a part of the
    page. Causing the browser to scroll that point.

    10
    EXAMPLE
    • <h1 id=“TOP”>Countries<h1>
    <p>
    <a href=“#AFG”>Afghanistan</a>
    <a href=“#PAK”>Pakistan</a>
    </p>
    …
    <h1 id=“AFG”>Afghanistan</h1><a href=“#TOP”>[Top]</a>
    <p>Herat, Pop: 186,800</p>
    <p>Kabul, Pop: 1,780,000</p>

    <h1 id=“PAK”>Pakistan</h1><a href=“#TOP”>[Top]</a>


    <p>Islamabad, Pop: 524,500</p>
    <p>Karachi, Pop: 9,269,265</p>
    <p>Lahore, Pop: 5,063,499</p>
    11
    Using Image as Links
    • It is very common to use images as links.

    • Example:
    <p>
    Here is a link to <a
    href=“http://sites.google.com/site/cs1113web
    prog/”><img src=“images/paper.png”
    border=“0” /></a>.
    </p>

    12
    <head>
    <title></title>
    <style>
    a img { border-style: none; }
    </style>
    </head>
    <body>
    <p>
    Here is a link to <a
    href=“http://sites.google.com/site/cs1113webprog/”>
    <img src=“images/paper.png” /></a>.
    </p>
    </body>
    13
    Table
    <TABLE>
    (made up of rows)
    Row
    <TR>
    (made up of data cells)
    Heading Data Cell
    <TH> (Can contain paragraphs,
    images, lists, forms, tables)
    Data Cell
    <TD> (Can contain paragraphs,
    images, lists, forms, tables)

    14
    Tables
    • Tables are very useful feature in HTML.
    • Example:
    <h1>HTML Tables</h1>
    <table>
    <caption>My Favorite Albums</caption>
    <tr>
    <th> Title </th>
    <th> Artist </th>
    <th> Comment </th>
    </tr>
    <tr>
    <td> Electric Lady Land </td>
    <td> Jimi Hendrix </td>
    <td> Revolutionary </td>
    </tr>
    </table>
    15
    SEMENTICS PART OF TABLE
    • HTML5 provides few semantic elements just for tables.
    • <table>
    <caption></caption>
    <thead>
    <tr>
    <th> Title </th>
    <th> Artist </th>
    <th> Comments </th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    ….
    </tr>
    </tfoot>
    16
    <tbody>
    <tr>
    <td></td>
    …
    </tr>
    <tr>
    <td></td>
    …
    </tr>
    </tbody>
    </table>
    17
    TABLE Attributes
    • CELLPADING
    – Determines the distance between the border of a cell and
    the contents of the cell
    – Example: <TABLE CELLPADDING = “3”>

    • CELLSPACING
    – Determines the empty spacing between the borders of
    two adjacent cells
    – Example: <TABLE CELLSPACING = “1”>

    18
    <TH> & <TD> Attributes
    • COLSPAN
    – No. of rows the current cell should extend itself downward
    – Example: <TD COLSPAN = “2”>

    • ROWSPAN
    – The number of columns the current cell should extend
    itself
    – Example: <TD ROWSPAN = “5”>

    19
    Expenses Income
    Year Quarter
    Quetta Dubai Quetta Dubai
    1 1,900 8,650 9,000 7,780
    2 2,230 8,650 8,500 8,670
    2001
    3 4,000 8,650 9,900 9,870
    4 2,200 8,650 9,800 9,900
    1 7,780 8,650 7,780 9,000
    2 8,670 8,650 8,670 8,500
    2002
    3 9,870 8,650 9,870 9,900
    4 9,900 8,650 9,900 9,800
    20
    iFRAME
    <iFRAME
    id=“frame1”
    name=“frame1”
    src=“page.html”
    width=“330”
    height=“370”
    border=“2”
    ></iFRAME>
    21

    Das könnte Ihnen auch gefallen