Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML - Part Iii

    Загружено:

    Abdul Ghani Khan
    22 просмотров22 страницы
    HTML Tables are made up of cells, arranged into rows. A table cell can contain any content, like an image, or even another table. Frames are a method for dividing the browser window into smaller subwindows. Each subwindow displaying a different HTML document.

    Исходное описание:

    Оригинальное название

    Lecture 15

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    HTML Tables are made up of cells, arranged into rows. A table cell can contain any content, like an image, or even another table. Frames are a method for dividing the browser window into smaller subwindows. Each subwindow displaying a different HTML document.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    22 просмотров22 страницы

    HTML - Part Iii

    Загружено:

    Abdul Ghani Khan
    HTML Tables are made up of cells, arranged into rows. A table cell can contain any content, like an image, or even another table. Frames are a method for dividing the browser window into smaller subwindows. Each subwindow displaying a different HTML document.

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 22

    Indian Institute of Technology Kharagpur

    HTML – Part III

    Prof. Indranil Sen Gupta


    Dept. of Computer Science & Engg.
    I.I.T. Kharagpur, INDIA

    Lecture 15: HTML – Part III

    On completion, the student will be able to:


    1. Explain the various tags and attributes required to
    specify a table.
    2. Demonstrate the creation of tables with varied
    degrees of complexity.
    3. Explain and demonstrate how frames can be used to
    make a web page look more attractive.
    4. CSS

    1
    HTML Tables

    Introduction

    • Tables are made up of cells, arranged


    into rows.
    ¾Use tags <TABLE>, <TR>, <TD>.
    ¾An example:
    <table>
    <tr>
    <td> Good </td> <td> Bad </td>
    </tr>
    <tr>
    <td> Cute </td> <td> Ugly </td>
    </tr>
    </table>

    2
    Good Bad

    Cute Ugly

    The Table Tags

    • <TABLE> …… </TABLE>
    ¾Defines the beginning and the end of a
    table.
    ¾Can have several attributes:
    ƒ bgcolor = #rrggbb or color name
    ƒ rules = all | cols | rows | none
    ƒ border = number
    ƒ height = number, percentage

    3
    • <TR> …….. </TR>
    ¾Defines a row of cells within a table.
    ¾Can have several attributes:
    ƒ bgcolor = #rrggbb or color name
    ƒ align = left | center | right | justify
    • <CAPTION> …….. </CAPTION>
    ¾Provides a caption for the table.
    ¾Must immediately follow the “table” tag,
    and precede all other tags.

    • <TD> …….. </TD>


    ¾Defines a table data cell.
    ¾A table cell can contain any content, like
    an image, or even another table.
    ¾Can have several attributes:
    ƒ bgcolor = #rrggbb or color name
    ƒ colspan = number
    == > specifies the number of columns the
    currect cell should span (default is 1).
    ƒ rowspan = number
    == > similar

    4
    • <TH> …….. </TH>
    ¾Defines a table header cell.
    ¾Browsers generally display the contents
    of the header cells in bold, and
    centered.
    ¾Same attributes as the <TD> tag.

    Table Example 1

    <table>
    <tr> <td colspan=2> Hello </td> </tr>
    <tr> <td> Good </td> <td> Day </td> </tr>
    </table>

    Hello

    Good Day

    5
    Table Example 2

    <table>
    <tr> <td rowspan=2> Hello </td>
    <td> Good </td> </tr>
    <tr> <td> Day </td> </tr>
    </table>

    Good
    Hello
    Day

    Table Example 3

    <table border=1>
    <caption> My Table </caption>
    <tr> <th> Name </th> <th> Marks </th> </tr>
    <tr> <td> Anil </td> <td> 72 </td> </tr>
    <tr> <td> Kamal </td> <td> 58 </td> </tr>
    </table>

    Name Marks

    Anil 72
    Kamal 58

    6
    HTML Frames

    Introduction

    • What are frames?


    ¾A method for dividing the browser
    window into smaller subwindows.
    ¾Each subwindow displaying a different
    HTML document.
    • How does a page with frame look
    like?
    ¾NEXT SLIDE

    7
    A Web Page that use Frames

    Merits and Demerits

    • Merits:
    ¾Allow parts of the page to remain
    stationary while other parts scroll.
    ¾They can unify resources that reside on
    separate web servers.
    ¾There is a <noframe> tag, using which it
    is possible to add alternative content
    for browsers that do not support
    frames.

    8
    • Demerits:
    ¾All browsers do not support frames.
    ¾Documents nested in a frame is more
    difficult to bookmark.
    ¾Load on the server can be significantly
    increased, if there are a large number of
    frames in the page.
    ¾Frames are very difficult to handle for
    search engines.

    The Frame Tags

    • <FRAMESET> …….. </FRAMESET>


    ¾Defines a collection of frames or other
    framesets.
    ¾Attributes:
    ƒ cols = list of lengths (number, %, or *)
    ƒ rows = list of lengths (number, %, or *)
    Establishes the number and sizes of columns
    (vertical frames) or rows (horizontal frames) in a
    frameset.
    In number of pixels, percentage of total area, or
    relative values (*) based on available space.

    9
    • <FRAME>
    ¾Defines a single frame within a
    frameset.
    ¾Attributes:
    ƒ frameborder = 1 | 0
    ƒ src = url
    ƒ scrolling = yes | no | auto
    ƒ marginwidth = number
    ƒ marginheight = number
    ƒ name = text

    • <NOFRAMES> …… </NOFRAMES>
    ¾Specifies the contents to be displayed
    by browsers that cannot display frames.
    ¾Ignored by browsers that support
    frames.

    10
    Frame Example 1

    <html>
    <head><title> A document with frames
    </title> </head>
    <frameset cols = “*,*”>
    <frame src = “left.htm”>
    <frame src = “right.htm”>
    </frameset>
    <noframes>
    Browser does not support frames.
    </noframes>
    </html>

    Frame Example 2

    <html>
    <head><title> Another one with frames
    </title> </head>
    <frameset cols = “100,2*,*”>
    <frame src = “left.htm”>
    <frame src = “right.htm”>
    </frameset>
    <noframes>
    Browser does not support frames.
    </noframes>
    </html>

    11
    Frame Example 3

    <html>
    <head> <title> Nested frames </title> </head>
    <frameset cols = “25%, *”
    <frame src = “one.htm”>
    <frameset rows = “100,150,100”>
    <frame src = “two.htm”>
    <frame src = “three.htm”>
    <frameset cols = “*,*”>
    <frame src = “four.htm”>
    <frame src = “five.htm”>
    </frameset> </frameset> </frameset>
    </html>

    Linking to a Framed Document

    • When a hyperlink is clicked, by


    default, the new page is loaded into
    the same frame.
    • We can load the linked page into a
    new frame also.

    M
    E
    N
    U

    12
    ¾Assign a name to the targeted frame.
    <frame src = “somepage.htm” name = “abc”>

    ¾Specify this frame in a hyperlink as follows:


    <a href = “newpage.htm” target=“abc”> … </a>

    ¾The document newpage.htm will load into


    the frame names “abc”.

    Cascaded Style Sheets (CSS)

    13
    Introduction

    • Style sheets in HTML allows us to


    specify typography styles and
    spacing instructions for elements on
    a page.
    • Key concept:
    ¾How to define rules?
    ¾How to attach those rules to one or
    more HTML documents?

    How to specify a rule?

    • Some examples:
    H2 {color: blue}

    P {font-size: 12pt;
    font-family: Verdana, sans-serif;
    }

    14
    Inline Styles

    <H2 style = “color: blue”> This will appear


    as blue. </H2>

    <P style = “font-size: 12pt; font-family:


    Verdana, sans-serif”>
    This paragraph will be set as per the specified
    Style. </P>

    Embedded Style Sheets

    <html><head>
    <style type = “text/css”>
    <! - -
    H2 {color: blue}
    P {font-size: 12pt;
    font-family: Verdana, sans-serif;
    }
    -->
    </style>

    15
    <title> Example of using style sheets </title>
    </head>
    …….
    …….
    </html>

    External Style Sheets

    • The most powerful way.


    ¾Collect all styles in a separate text
    document.
    ¾Creates links to that document.

    <head>
    <link rel = “STYLESHEET”
    href = “/pathname/mystyle.css”
    type = “text/css”>
    </head>

    16
    There is more ….

    • We have just given a brief introduction


    to CSS.
    • There are many different ways to
    specify properties.
    • To resolve conflicts in style definitions,
    cascading rules are defined.
    ¾Specify which definition is to be given
    priority.

    17
    SOLUTIONS TO QUIZ
    QUESTIONS ON
    LECTURE 14

    Quiz Solutions on Lecture 14

    1. What are the tags used for unnumbered


    lists?
    <UL> … </UL>, and <LI>
    2. What are the tags used for ordered lists?
    <OL> … </OL>, and <LI>
    3. How can you change the bullet style in an
    unnumbered list?
    By specifying an attribute along with the
    <UL> or <LI> tags. The possible values
    are disc, circle, and square.

    18
    Quiz Solutions on Lecture 14

    4. Show hyperlink definitions that provide link


    to a pdf file, and a jpeg image.
    <a HREF = “./slides/new/chap5.pdf”> Ch5 </a>
    <a HREF = “images/rose.jpg”> Green Rose </a>
    5. Can relative URL’s be used to provide link to
    a different web site?
    No. When referring to a document located on
    some other server, the name of the server must
    be specified. In other words, absolute URL must
    be given.

    Quiz Solutions on Lecture 14

    6. How can you provide a hyperlink to a


    section in the same document?
    Step 1: Specify a named section in the
    document.
    <a name=“tennis”> <h2>About tennis</h2> </a>
    Step 2: Provide link to the named section.
    <a href=“#tennis”> Information on Tennis </a>

    19
    Quiz Solutions on Lecture 14

    7. How can you provide a hyperlink to a section


    in a document located on some other web
    server?
    Provide a link to the named section using
    an absolute URL.
    <a href=“http://www.sunny.com/xyz.html #tennis”>
    Information on Tennis </a>

    Quiz Solutions on Lecture 14

    8. What do the HEIGHT and WIDTH attributes in


    the IMG tag specify?
    They specify the height and width of the image (in
    pixels) in the browser window. The browser can
    resize the image using these values.
    9. How can you provide an image hyperlink?
    An example is shown below:
    <a HREF = “india.html”>
    <img src = “./images/ india.gif”>
    </a>

    20
    QUIZ QUESTIONS ON
    LECTURE 15

    Quiz Questions on Lecture 15

    1. What are the HTML tags associated with


    table definitions?
    2. How do you specify table entries spanning
    multiple columns?
    3. What is the purpose of the <FRAMESET>
    tag>
    4. What is the purpose of the <NOFRAMES>
    tag?
    5. What does “*” signify when specifying the
    width/height of a frame?
    6. What does “%” signify when specifying the
    width/height of a frame?

    21
    Quiz Questions on Lecture 15

    7. What is inline style for specifying style


    sheets? Give an example.
    8. What is external style for specifying style
    sheets?

    22

    Вам также может понравиться