Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering: Lists & Images

    Uploaded by

    Radhay35335
    26 views21 pages
    This document discusses HTML elements for lists, images, and embedding audio/video. It covers: 1) Block and inline elements and examples of each. Block elements contain content in a region while inline elements affect small amounts of content nested in blocks. 2) Different types of lists (ordered, unordered, definition) and their attributes like type and start. Nested lists are also demonstrated. 3) Images and attributes like src, width, height, and alt. Images can also be linked. 4) Embedding audio and video using HTML5 tags and providing sources in different formats for browser compatibility. Forcing text direction and flowing text around images is also covered.

    Original Description:

    Original Title

    Lec # 03 HTML - III

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses HTML elements for lists, images, and embedding audio/video. It covers: 1) Block and inline elements and examples of each. Block elements contain content in a region while inline elements affect small amounts of content nested in blocks. 2) Different types of lists (ordered, unordered, definition) and their attributes like type and start. Nested lists are also demonstrated. 3) Images and attributes like src, width, height, and alt. Images can also be linked. 4) Embedding audio and video using HTML5 tags and providing sources in different formats for browser compatibility. Forcing text direction and flowing text around images is also covered.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    26 views21 pages

    Web Engineering: Lists & Images

    Uploaded by

    Radhay35335
    This document discusses HTML elements for lists, images, and embedding audio/video. It covers: 1) Block and inline elements and examples of each. Block elements contain content in a region while inline elements affect small amounts of content nested in blocks. 2) Different types of lists (ordered, unordered, definition) and their attributes like type and start. Nested lists are also demonstrated. 3) Images and attributes like src, width, height, and alt. Images can also be linked. 4) Embedding audio and video using HTML5 tags and providing sources in different formats for browser compatibility. Forcing text direction and flowing text around images is also covered.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 21

    Web Engineering

    Lecture 03
    Lists & Images
    (HTML5 - III)

    1
    Block and Inline elements
    • Block elements contain an entire large region of
    content.
    • Examples:
    paragraphs, lists, table cells, div, section, header,
    footer, ul etc.

    • Inline elements affect a small amount of content.


    Must be nested inside a block element.
    • Examples:
    bold text, images, SPAN,a ,br, label, input..etc.
    Block Level Elements
    <address> <figcaption> <noscript>
    <article> <figure> <ol>
    <aside> <footer> <p>
    <blockquote> <form> <pre>
    <canvas> <h1>-<h6> <section>
    <dd> <header> <table>
    <div> <hr> <tfoot>
    <dl> <li> <ul>
    <dt> <main> <video>
    <fieldset> <nav>
    Inline Elements
    <a> <i> <small>
    <abbr> <img> <span>
    <acronym> <input> <strong>
    <b> <kbd> <sub>
    <bdo> <label> <sup>
    <big> <map> <textarea>
    <br> <object> <time>
    <button> <output> <tt>
    <cite> <q> <var>
    <code> <samp>
    <dfn> <script>
    <em> <select>
    Ordered List
    • HTML provide several tags for displaying list.

    • <ol>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    </ol>
    Type Attribute of Ordered List
    • HTML provide several tags for displaying list.

    • <ol type=“a”>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    </ol>

    • type = “a”, “1”, “A”, “i”, “I”


    • start = “25”
    Unordered List
    • Example

    • <ul>
    <li> Four </li>
    <li> Five </li>
    <li> Six </li>
    </ul>
    Type Attribute of Unordered List
    • HTML provide several tags for displaying list.

    • <ol style=“list-style-type: disc;”>


    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    </ol>

    • Type = “disc”, “square”, “circle”, “decimal”,


    “Iower-alpha”, “katakana”, “armenian”,
    “hiragana”
    Nested Unordered List
    • Example

    • <ul>
    <li> Four </li>
    <li> Five </li>
    <ul>
    <li> Four </li>
    <li> Five </li>
    <li> Six </li>
    </ul>
    <li> Six </li>
    </ul>
    Nested Unordered List
    • Example

    • <ol>
    <li> One </li>
    <li> Two </li>
    <ol>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    </ol>
    <li> Three </li>
    </ol>
    EXAMPLE
    • <ol>
    <li> One </li>
    <li> Two </li>
    <ol start=“5”>
    <li> One </li>
    <li> Two </li>
    <ol type=“i” start=“7”>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    </ol>
    <li> Three </li>
    </ol>
    <li> Three </li>
    </ol>
    12
    Definition List
    • Example:
    • <dl>
    <dt> One </dt>
    <dd>The first non-zero number. </dd>

    <dt> Two </dt>


    <dd>The number after one. </dd>

    <dt> Three </dt>


    <dd>To get ready. </dd>

    <dt> Four </dt>


    <dd>Now Go, Cat, Go! </dd>
    </dl>
    FORCING TEXT DIRECTION
    • English is written in left to right direction. Some languages are
    written in right to left direction. By using BDO (Bi Directional
    Overwright) tag we can do change the direction.

    • Example:
    <p>
    The attackers set about acquiring the control over the
    computers to be used in the attack. By scanning using Sscan
    SW, a <bdo dir=“rtl”>large numbers of computers attached to
    the Internet.</bdo> Once a computer with a weak security
    scheme is identified, the attackers try a break-in.
    </p>

    14
    EXAMPLE
    • Example:
    <p dir=“rtl”><bdo dir=“rtl”>
    The attackers set about acquiring the control
    over the computers to be used in the attack.
    By scanning using Sscan SW, a large numbers
    of computers attached to the Internet. Once a
    computer with a weak security scheme is
    identified, the attackers try a break-in.
    </bdo></p>

    15
    Images
    • Images are major part of websites.

    • Example:
    <body>
    <h1> HTML Image </h1>
    <img src=“images/sciss.png” width=“240”
    height=“240” alt=“Picture of scissors”
    title=“Running with these is not
    recommended.” />
    </body>
    16
    Link on a Images
    <a href=“index.html” target=“_blank”><img
    src=“images/image1.jpg”
    width=“250”
    height=“250”
    alt=“alternative text”
    /></a>

    17
    FLOWING TEXT AROUND AN IMAGE
    • HTML IMG tag is inline element. Sometimes we want
    to flow text around an image.

    • Example:
    <body>
    <h1> HTML Image </h1>
    <img src=“images/sciss.png” width=“240” height=“240”
    alt=“Picture of scissors” title=“Running with these is
    not recommended.” style=“float: left; margin-right:
    10px; margin-botton: 5px; border: solid black 1px;” />
    </body>
    18
    Embedding Audio
    • HTML5 provides the simple powerful feature of adding
    audio files on your web page.
    • Example:
    <p> Here’s a song: </p>
    <audio id=“audio” controls autoplay loop>
    <source
    src=“media/song.m4a” type=“audio/x-acc” />
    <source
    src=“media/song.mp3” type=“audio/mpeg” />
    <source
    src=“media/song.ogg” type=“audio/ogg” />
    </audio>
    19
    20
    Embedding Video
    • HTML5 provides the simple powerful feature of embedding
    video files on your web page.
    • Example:
    <p> Here’s a song: </p>
    <video id=“video” widht=“860” height=“480” controls autoplay
    loop>
    <source
    src=“media/video.m4v” type=“video/mp4” />
    <source
    src=“media/video.webm” type=“video/webm” />
    <source
    src=“media/video.ogg” type=“video/ogg” />
    </video>
    21

    You might also like