Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    DaWheng Vargas
    103 views28 pages
    html;

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html;

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    103 views28 pages

    HTML

    Uploaded by

    DaWheng Vargas
    html;

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 28

    Doctype declaration

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">


    <!DOCTYPE html>

    Html element
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head><meta http-equiv="content-type"content="text/html; charset=utf8" /><title>02_03</title> </head> <body> </body>

    html>

    Important things to remember:


    Were adding element according to their meaning.

    CSS will create all the visual presentation. Wrong: <p1><strong>WorrySome.com</strong></p1> Correct: <h1>WorrySome.com</h1>

    Wrong:
    <p> Baldness <br /> Cellulite <br /> CSS bugs </p>

    Correct:
    <ul> <li>Baldness</li> <li>Cellulite</li> <li>CSS bugs</li> </ul>

    Outline

    Forms
    iFrames Audio/Video

    Forms
    The web started as a way for people to post static information, but now is largely about "usercontributed content." All that content means a lot of forms! Users see form on social sites, login screens, banking sites, and more:

    Form element
    A form consists of a form element with multiple input

    controls inside of it that help retrieve user data in some way, and attributes that specify how a server should handle the form. The example below asks for a search query, and then sends the query to the Google server once submitted. Google
    Search

    <form > <label>Google:<input type="search" name="q"> <input type="submit" value="Search"> </label> </form>

    Input element
    The input element is used for many different types of

    user input, depending on value of the type attribute. It defaults to a simple 1-line text input. The "name" attribute gives the server a way to identify that piece of attribute. The "value" attribute can be set to specify a default value. The "placeholder" provides a hint to the user.
    <input type="text" name="animal" placeholder="e.g. fox">

    Label element
    The label element is used to caption a form control, so users know what they should put in it. <label> Animal: <input type="text" name="animal" placeholder="e.g. fox"> </label>
    Animal
    e.g. fox

    Checkboxes
    The input element can be used for letting users pick multiple in a list or simply indicate yes/no, using type="checkbox".
    <label> Extra cheese? <input type="checkbox" name="extracheese"/> </label>

    Pizza Toppings: <label> <input type="checkbox"/> Bacon </label> <label> <input type="checkbox"/> Extra Cheese </label> <label> <input type="checkbox"/> Onion </label>

    Radio buttons
    Similarly, the input element can be used for creating a group of radio buttons, for letting users pick one in a list, with type="radio".

    Pizza Size: <label> <input type="radio" name="size" value="small"/>Small </label> <label> <input type="radio" name="size" value="medium"/>Medium </label> <label> <input type="radio" name="size" value="large"/>Large </label>

    Range sliders
    The input element can be used for users to pick a value in a range, using type="range".

    <label> Cheesiness: <input type="range" min="0" max="10" name="cheesiness"/> </label>

    *New, only supported in modern browsers.

    The select element


    The select element used with the option element produces a dropdown of options for the user to pick from.
    <label>Crust type: <select name="crust"> <option value="thin">Thin</option> <option value="thick">Thick</option> <option value="cheese">Cheese</option> </select> </label>

    Textarea element
    To let the user specify multiple lines of text, use the textarea element, and specify cols or rows to specify a specific size.
    <label>Delivery instructions: <br> <textarea></textarea></label>

    Button element
    The button element is most commonly used to submit a form to the server, but can also be used for resetting a form or other scripted actions.
    <button type="submit">Submit order</button>

    Iframes
    The iframe element
    You can use HTML to embed other webpages in your

    own page using an iframe element pointing at a URL: <iframe src="http://www.slideshare.net/BlogGrowth/how-tobuild-your-brand-like-a-ppo" width="500" height="300"></iframe>

    Iframe embeds
    The iframe element makes it easy for websites to

    become embeddable on other websites, and for users to share content that they've created on a site. Most websites don't naturally look good when embedded at small sizes, so websites create special versions that are designed for embedability, and the provide users with those URLs.

    Iframe embeds: Docs


    In its "Publish" dialog, Google docs provides this

    HTML for embedding a presentation on your site: <iframe src="https://docs.google.com/present/embed?id=dggj rx3s_2119zdj9k4cf" width=300" height="300"></iframe>

    Iframe embeds: Calendar and Youtube


    In settings, Google Calendar provides this HTML for embedding a calendar:
    <iframe src="http://www.google.com/calendar/embed?src=developercalendar%40google.com" width=300" height=300"></iframe> Youtube : <iframe width="420" height="300" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe>

    Multimedia
    The object element
    You can use object to embed non-HTML content in

    your page, like a quicktime movie or a flash file. Typically, users need a "plug-in" to view that content. The object tag should have one or more param child tags that give info to the browser on what to embed.

    <object width="300" height="150"> <param name="movie" value=xa.swf"/> </object>

    The embed element


    The embed tag is similar to the object tag, but is

    sometimes used in cases where the object tag doesn't work. The embed tag should specify src and type attributes.

    <embed type="application/x-shockwave-flash" src=xa.swf"/>

    Embeds: Youtube
    Youtube gives user an embed code that includes an object and an embed tag.
    <embed src="http://www.youtube.com/v/BHtGcZ9XqjY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"/>

    Audio
    <object height="100" width="100" data="a.mp3"></object>

    Video
    <object id="mediaplayer" width="192" height="190" classid="clsid:22d6f312-b0f611d0-94ab-0080c74c7e95" standby="loading windows media player components..." type="application/xoleobject"> <param name="filename" value="wildlife.wmv"> <param name="autostart" value="false"> <param name="showcontrols" value="true"> <param name="showstatusbar" value="false"> <param name="showdisplay" value="false"> <embed type="application/x-mplayer2" src="wildlife.wmv" name="mediaplayer" width="192" height="190" showcontrols="1" showstatusbar="0" showdisplay="0" autostart="0"> </embed> </object>

    You might also like