Scribd Logo
Upload

Welcome to Scribd!

  • Basic HTML Tutorial: Amber Brady

    Uploaded by

    Passionate_to_Learn
    20 views20 pages
    This document provides an introduction to basic HTML tags and examples. It discusses common HTML tags like <html>, <body>, <h1-h6> for headings, <p> for paragraphs, <a> for links, and <img> for images. It also covers other tags like <span> for styling text and <ul> for unordered lists. The document includes examples of code for each tag and explanations. It concludes with a short section on the main web graphic formats GIF, JPG, and PNG and their best uses.

    Original Description:

    HTML Tutorial Basic

    Original Title

    HTML Basics

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction to basic HTML tags and examples. It discusses common HTML tags like <html>, <body>, <h1-h6> for headings, <p> for paragraphs, <a> for links, and <img> for images. It also covers other tags like <span> for styling text and <ul> for unordered lists. The document includes examples of code for each tag and explanations. It concludes with a short section on the main web graphic formats GIF, JPG, and PNG and their best uses.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    20 views20 pages

    Basic HTML Tutorial: Amber Brady

    Uploaded by

    Passionate_to_Learn
    This document provides an introduction to basic HTML tags and examples. It discusses common HTML tags like <html>, <body>, <h1-h6> for headings, <p> for paragraphs, <a> for links, and <img> for images. It also covers other tags like <span> for styling text and <ul> for unordered lists. The document includes examples of code for each tag and explanations. It concludes with a short section on the main web graphic formats GIF, JPG, and PNG and their best uses.

    Copyright:

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

    BASIC HTML TUTORIAL

    Amber Brady

    BASIC HTML + EXAMPLES


    HTML tags are keywords surrounded by angle
    brackets like <html>
    HTML tags normally come in pairs like <b> and
    </b>
    The first tag in a pair is the opening tag, the
    second tag is the closing tag

    BASIC HTML + EXAMPLES


    HTML headings are defined with the <h1> to <h6>
    tags. H1 being the largest, H6 smallest.
    HTML paragraphs are defined with the <p> tag.
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    HTML links are defined with the <a> tag.


    <a href="http://www.w3schools.com">This is a link</a>

    HTML images are defined with the <img> tag.


    <img src=image.jpg" width="104" height="142" />

    BASIC HTML + EXAMPLES


    A text with a span element that can be styled
    with CSS.
    <p>My dog has <span class=black">black</span> eyes.</p>

    An unordered HTML list:


    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>

    BASIC HTML + EXAMPLES


    Example

    Explanation

    <html>
    <body>
    <h1>My Web Page</h1>

    <p>My first
    paragraph.</p>

    </body>
    </html>

    The text between <html> and


    </html> describes the web
    page
    The text between <body>
    and </body> is the visible
    page content
    The text between <h1> and
    </h1> is displayed as a
    heading
    The text between <p> and
    </p> is displayed as a
    paragraph

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    WEB PAGE SAMPLE

    Web Graphic Formats


    Three
    main
    types:
    - GIF
    - JPG
    - PNG

    Web Graphic Formats

    GIF Graphic Information Format


    (Best

    for charts, graphics: ads, logos etc.)


    can contain up to 256 colors
    support transparency. If you dont want a background
    for your graphic or dont want it in a box.
    can be animated
    not good for photographs. Lose quality & files wont be
    compact

    Web Graphic Formats

    JPG Joint Photographic Experts Group


    (Best

    for images w/ many colors. Scanned artwork or


    photos)
    can contain up to 16 million colors
    you can set the compression for each image to reduce
    the file size. The more compressed however the lower
    the quality.
    not good for images w/ few colors, such as graphics or
    images w/ few colors. Will leave them looking blotchy.

    Web Graphic Formats

    PNG - Progressive Network Graphics


    (Newest

    web graphics format)


    Compact and versatile. Can combine features of GIF &
    JPG. (have transparent backgrounds & contain millions
    of colors)
    supported by all modern browsers. May not appear in
    older browsers.

    QUESTION

    What web graphic format


    should this image be saved as?

    Short Quiz
    Take a few minutes to fill in your answers.

    SOURCES
    http://www.w3schools.com
    http://www.buildwebsite4u.com/building/webgraphics-formats.shtml

    You might also like