Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Computation & Problem Solving

    Hochgeladen von

    Kairliyev Alibi
    12 Ansichten14 Seiten
    Graphics html

    Originaltitel

    Lecture 2

    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
    Graphics html

    Copyright:

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

    Computation & Problem Solving

    Hochgeladen von

    Kairliyev Alibi
    Graphics html

    Copyright:

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

    Lecture 2

    Computation & Problem Solving

    Adding Graphics
    To understand how images work on the
    Web, you need to know two things:
    They dont reside in your HTML files.
    Instead, you store each image as a
    separate file.
    To display pictures on a page, you use the
    <img> element in your HTML document.

    The <img> Element


    <img src="photo01.jpg" />
    inside element: <p><img src="photo01.jpg"
    /></p>
    alternate text: <img src="photo01.jpg alt="There's
    no picture, so all you get is this alternate text." />
    title: <img src="matador.jpg alt="A matador
    extends his cape in welcome. title="Welcome to
    the ring." />
    size: <img src="photo01.jpg" alt="An explicitly
    sized picture" width="100 height="150" />
    Quiestion?
    What is the pixel?

    File Formats for Graphics


    JPEG format is suitable for photos that can tolerate
    some loss of quality. JPEG doesnt work as well if
    your picture contains text or line art.
    GIF format is suitable for graphics with a very small
    number of colors. It gives terrible results if you use
    it to display photos.
    PNG format is suitable for all kinds of images, but it
    doesnt always compress as well as JPEG. PNG is
    particularly good for small, sharp graphics.
    SVG (Scalable Vector Graphics) is an up-and-coming
    standard for vector drawings. SVG has a number of
    advantages, including its small size and flexibility.

    Image file format


    Format

    Type of
    Compressio
    n

    JPEG

    Lossy

    GIF

    Lossless

    8-bit color (256


    colors)

    Simple logos, graphical


    text, and diagrams with
    line art.

    PNG-8

    Lossless

    8-bit color (256


    colors)

    Not commonly used


    since its similar to GIF
    (but it does have better
    transparency support).

    PNG-24

    Lossless

    24-bit (16.7
    million
    colors)

    Images that would


    normally be GIF files,
    but need more colors.

    Lossless (but
    its
    optional, as
    SVG data is

    24-bit (16.7
    million
    colors)

    Art drawn in an
    illustration program.
    However, versions of IE
    before IE 9 dont

    SVG

    Maximum
    Colors
    24-bit (16.7
    million
    colors)

    Best Suited For

    Photos.

    How to embed Video


    1. Click Playlists left on your page YouTube.
    2. Click on the name of the playlist that
    you want to insert.
    3. Select Share.
    4. Click on the link HTML-code.
    5. Copy the embed code listed below.
    6. Paste the code on your website or blog.
    You can also use:
    <object></object>
    <iframe></iframe>

    Styling HTML with CSS


    CSS styling can be added to HTML elements the
    following 3 ways:
    Inline - using the styleattributein HTML elements
    <pstyle="color:green;margin-left:20px;">This is a paragraph.</p>

    Internal - using the <style>elementin the <head> section


    <style>
    body {background-color:lightgrey}
    h1 {color:blue}
    p {color:green}
    </style>

    External - using external CSSfiles


    <linkrel="stylesheet"href="styles.css">

    HTML Input and Forms


    HTML forms are used to pass data to a server.
    An HTML form can contain input elements like text fields,
    checkboxes, radio-buttons, submit buttons and more. A
    form can also contain select lists, textarea, fieldset, legend,
    and label elements.
    The <form> tag is used to create an HTML form:
    <form>
    input elements
    </form>

    The <input> element is used to select user information.


    An <input> element can vary in many ways, depending on
    the type attribute. An <input> element can be of type text
    field, checkbox, password, radio button, submit button, and
    more.

    Some other tags


    - <fieldset> tag is used to group related
    elements in a form.
    - <legend>tag defines a caption for the
    <fieldset> element.
    - <label> tag defines a label for an <input>
    element.
    - <select> element is used to create a dropdown list.
    - <optgroup> is used to group related options in a
    drop-down list.
    - <option> tags inside the <select> element define
    the available options in the list.

    <TABLE>

    Divisions and Spans or <div> and <span>


    The <div> tag defines a division or a section in
    an HTML document.
    The <div> tag is used to group block-elements to
    format them with CSS.
    The <span> tag is used to group inline-elements
    in a document.
    The <span> tag provides no visual change by
    itself.
    The <span> tag provides a way to add a hook to
    a part of a text or a part of a document.
    <p>My mother
    has<spanstyle="color:blue">blue</span>eyes.</p
    >

    class attribute
    The class attribute specifies one or
    more classnames for an element.
    The class attribute is mostly used to
    point to a class in a style sheet.

    HTML5Semantic Elements
    What are Semantic Elements?
    A semantic element clearly describes its meaning
    to both the browser and the developer.
    Examples ofnon-semanticelements: <div> and
    <span> - Tells nothing about its content.
    Examples ofsemanticelements: <form>,
    <table>, and <img> - Clearly defines its content.
    - <header>
    - <footer>
    - <nav>
    - etc.

    Question?

    Das könnte Ihnen auch gefallen