Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    HTML

    Uploaded by

    Anti Matter

    Copyright:

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

    You might also like

    HTML

    Uploaded by

    Anti Matter
    3 views30 pages

    Original Title

    html (1)

    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

    Copyright:

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

    HTML

    Uploaded by

    Anti Matter

    Copyright:

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

    Building Web Sites

    Web Browser
    Web Browser

    HTML

    Instruction: a paragraph Displays a paragraph


    with bold text with bold text
    How is a Web Page Served?

    Browser fsf.org

    Address bar HTTP


    Give me page Give me the
    https://fsf.org/philosophy /philosophy page

    HTTP
    /philosophy Rendering of
    HTML page /philosophy page
    HTTP 1.0 Session

    kirk@enterprise:~$ nc fsf.org 80
    GET / HTTP/1.0

    HTTP/1.0 200 OK
    Content­Type: text/html;charset=utf­8
    Content­Length: 27114
    Connection: close

    <!DOCTYPE html>
    <html lang="en">
    ...
    HTML

    ● Hyper Text Markup Language


    ● A simple text format to create web pages
    ● Unlike a binary format like .doc
    ● Use your favorite text editor to create HTML pages
    ● No need for any special software
    Basic Structure
    You You See:
    Write:
    <!DOCTYPE html>
    <html>
    <head>
    <title> My Home Page
    </title>
    </head>
    <body>
    <p>About myself.</p>
    </body>
    </html>
    Basic Structure

    <!DOCTYPE html> HTML declaration


    <html> HTML opening tag
    <head> Page header opening tag
    <title> My Home Page Page title opening tag
    </title> Page title closing tag
    </head> Page header closing tag
    <body> Body opening tag
    <p>About myself.</p> Paragraph (inside body)
    </body> Body closing tag
    </html> HTML closing tag
    Validating Web Pages

    ● HTML Validator: http://validator.w3.org


    ● Checks your HTML page for errors
    ● Like a compiler checks for errors in your program
    ● Always write valid HTML pages even if wrong HTML page
    “works”.
    Paragraph
    You You See:
    Write:

    <p>This is my
    first web
    Page.</p>

    <p>How exciting!</p>
    Heading
    You You See:
    Write:
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h4>This is a heading</h4>
    <h5>This is a heading</h5>
    <h6>This is a heading</h6>
    Formatting
    You You See:
    Write:

    This is <em>
    emphasized </em>
    text.
    This is <strong>
    strong </strong>
    text.
    This is
    <strong><em> strong
    and emphasized
    </em></strong>
    text.
    Formatting
    You You See:
    Write:

    <pre>This is pre­
    formatted text.
    </pre>
    Link to Another Web Page
    You You See:
    Write:
    <a href="https://fsf.org/">
    Free Software Foundation
    </a>
    Image
    You You See:
    Write:

    <img src="gnu.png"
    alt="GNU" />
    Audio
    You You Get:
    Write:

    <audio width="320"
    height="240"
    controls>
    <source
    src="audio.ogg"
    type="audio/ogg">
    </audio>
    Video
    You You Get:
    Write:

    <video width="320"
    height="240"
    controls>
    <source
    src="video.ogx"
    type="video/ogg">
    </video>
    Unordered List
    You You See:
    Write:

    <ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    </ul>
    Ordered List
    You You See:
    Write:

    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    Table
    You You See:
    Write:
    <table border="1">
    <tr>
    <th>First name</th>
    <th>Last name</th>
    </tr>
    <tr>
    <td>James</td>
    <td>Kirk</td>
    </tr>
    <tr>
    <td>Spock</td>
    <td></td>
    </tr>
    </table>
    Comments
    You You See:
    Write:

    <!­­ This is a
    comment ­­>
    <p> This is a
    paragraph </p>
    Inspector

    Node selection
    Node search
    Selected Node Path
    Node Hierarchy
    Selected Node

    Node Details
    Inspector 3D View
    SVG
    You You See:
    Write:

    <svg>
    <circle cx=”50”
    cy=”50” r=”40”
    stroke=”black”
    stroke­width=”3”
    fill=”red”/>
    </svg>
    MathML
    HTML5 Canvas
    WebGL Demo
    WebGL Game Demo
    Other Interesting HTML Tags

    ● <sub> for subscript text


    ● <sup> for superscript text
    ● <code> for computer code
    ● <div> for generic block tag
    ● <span> for generic inline tag
    References

    ● W3C HTML5: http://www.w3.org/TR/html5/


    ● The Pocket HTML Tutorial: http://www.goer.org/HTML/about/
    ● W3 Schools HTML5 Tutorial: http://www.w3schools.com/html/
    ● W3C MathML: http://www.w3.org/Math/
    ● W3C Audio/Video:
    http://www.w3.org/standards/webdesign/audiovideo
    ● W3C SVG: http://www.w3.org/Graphics/SVG/
    ● WebGL: http://www.khronos.org/webgl/

    You might also like