Scribd Logo
Upload

Welcome to Scribd!

  • 03 HTML2

    Uploaded by

    kamran khan
    7 views61 pages
    This document discusses advanced HTML topics including frames, embedded objects, and forms. It provides examples of how to use the <frameset>, <iframe>, <embed>, <object>, and <param> tags to divide pages into frames and embed multimedia objects like videos. It also explains how HTML forms work using the <form> tag and how forms send input data to servers using the action and method attributes.

    Original Description:

    Original Title

    03_HTML2

    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 advanced HTML topics including frames, embedded objects, and forms. It provides examples of how to use the <frameset>, <iframe>, <embed>, <object>, and <param> tags to divide pages into frames and embed multimedia objects like videos. It also explains how HTML forms work using the <form> tag and how forms send input data to servers using the action and method attributes.

    Copyright:

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

    03 HTML2

    Uploaded by

    kamran khan
    This document discusses advanced HTML topics including frames, embedded objects, and forms. It provides examples of how to use the <frameset>, <iframe>, <embed>, <object>, and <param> tags to divide pages into frames and embed multimedia objects like videos. It also explains how HTML forms work using the <form> tag and how forms send input data to servers using the action and method attributes.

    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 61

    Advanced HTML: Frames,

    Embedded Objects, and Forms

    By
    Fahad Satti
    Revisiting Previous Lecture
    • HTML fundamentals – Basic example
    • Text Formatting elements
    • Style Attribute – Introduction of CSS in HTML
    • Hyperlinks and Anchors
    • HTML Lists – Unordered, Ordered, Definition
    • HTML Tables – Rowspan and Colspan

    2
    Tables, Rows, and Data

    <table border="1">
    <tr>
    <td>Student</td>
    <td
    align="right">CGPA</td>
    </tr>
    <tr>
    <td>Mansoor</td>
    <td align="right">3.8</td>
    </tr>
    <tr>
    <td>Hamid</td>
    <td align="right">3.7</td>
    </tr>
    </table>
    Result
    3
    Tables – Rowspan and Colspan
    <TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
    <TR>
    <TD colspan=2 align='center'>
    <font color="red"><b>Student Grades</b></font>
    </TD>
    </TR>
    <TR>
    <TD><b>Student</b></TD>
    <TD><b>Grade</b></TD>
    </TR>
    <TR>
    <TD>Tom</TD>
    <TD rowspan=2>A</TD>
    </TR>
    <TR>
    <TD>Sue</TD>
    </TR>
    </TABLE>

    4
    HTML – Fundamentals
    Frames

    • Frames divide a browser window into several pieces or


    panes, each pane containing a separate HTML page.
    • Key advantages that frames offer is that you can then
    load and reload single panes without having to reload
    the entire contents of the browser.
    • A collection of frames in the browser window is known
    as a frameset.
    • The window is divided up into frames in a similar
    pattern to the way tables are organized (into rows and
    columns)
    5
    Frames and Framesets
    • Separation of contents in multiples pages
    <html> rows vs. cols
    <head>
    <title>Its main page</title>
    </head>
    <frameset rows="30%,70%">
    <frame name="top" src="banner.html"/>
    Frameset
    <frame name="bottom" src="main.html"/>
    </frameset>
    </html>

    Frame (banner.html)

    Another Frame (main.html)


    6
    Frames and Framesets
    <frameset cols="33%,33%,33%">
    <frame name="bing" src="http://bing.com"/>
    <frame name="google" src="http://google.com"/>
    <frame name="duck" src="http://duckduckgo.com"/>
    </frameset>

    7
    HTML – Fundamentals
    Basic Frames

    Basic tags
    • <frameset> ..</frameset>
    • <frame />
    • <noframes> .. </noframes>

    Basic attributes
    • cols = “values”
    • rows = “values”
    • name = “frame_name”
    • src = “frame_source(url)”
    • target = “frame_name”

    8
    HTML – Fundamentals
    Basic Frames

    Banner

    Menu Content

    Footer

    9
    HTML – Fundamentals
    Basic Frames

    <frameset rows=“80,*,80”> Banner

    <frame src=“banner.html” /> Menu Content

    <frameset cols = “25%,75%” > Footer


    <frame src=“menu.html” />
    <frame src=“content.html” />
    </frameset>
    <frame src=“footer.html” />
    </frameset>
    TIP: Do not write frameset within the body. Should be in head or outside.
    10
    HTML – Fundamentals
    Basic Frames – Noframe element

    <frameset rows=“80,*,80”>
    <frame src=“banner.html” />
    <frameset cols = “25%,75%” >
    <frame src=“menu.html” />
    <frame src=“content.html” />
    </frameset>
    <frame src=“footer.html” />
    <noframes>
    <body>
    Welcome to my page.
    <A HREF="noframes.htm">Continue</A>
    to the frame-free version.
    </body>
    </noframes>
    </frameset>

    11
    HTML – Fundamentals
    Basic Frames

    FRAMESET attributes

    • FRAMEBORDER="yes|no"
    • BORDER=pixels | default is ‘6’
    • BORDERCOLOR="#hexcolor|colorname"

    • e.g.
    < frameset rows="80,*,80" border=2 bordercolor=“red" >
    ..
    </frameset>

    12
    HTML – Fundamentals
    Basic Frames

    Individual FRAME attributes

    • SCROLLING="yes|no|auto"
    • NORESIZE
    • MARGINWIDTH=pixels
    • MARGINHEIGHT="pixels"
    • BORDERCOLOR="color"
    • FRAMEBORDER="yes|no"|0
    • NAME=“frame_name”

    13
    HTML – Fundamentals
    Floating Frames – iframe element

    • Floating frames allow you to create a frame


    within the boundaries of a page

    Basic Frames Floating Frames

    14
    HTML – Fundamentals
    Floating Frames

    <IFRAME attributes ></IFRAME>


    Attributes
    • SRC=URL
    • HEIGHT=pixels|percent,
    • WIDTH=pixels|percent
    • ALIGN=left|right
    • FRAMEBORDER=0

    TIP: Usually written inside the body of a page


    15
    HTML – Fundamentals
    Floating Frames
    <html>
    <head>
    <title>My 100th Web Page</title>
    </head>
    <iframe
    src="SimpleFirstWebPage.html“
    style="overflow:hidden;
    margin:0;
    padding:0;
    width:1200px;
    height:400px;“

    frameborder="0"></iframe>
    <!– More Page Contents -->
    </html>

    16
    Multimedia in HTML
    • Playing Background Sound
    • Embed Tag
    • Embedding Flash Files
    • Embedding Movie
    • Embedding youtube movie
    Playing Sound
    • BGSound Tag (for Internet Explorer)
    – Works under the HEAD tag
    – Syntax: <BGSOUND src=“bird.mp3” loop=2>
    – LOOP = 1 … infinite

    • Embed Tag (works in almost every browser)


    – Syntax: <EMBED src=“bird.mp3” Autostart=“true”
    Height=60 width=140>

    18
    Embed TAG
    • The easiest and "most supported" way to add video or sound to your web site
    is to include the special HTML tag called EMBED.
    • This causes the browser itself to include controls for the multimedia. No
    ActiveX, Java, VBscript or JavaScript is needed for this method. This tag is one-
    sided, meaning that there is no </EMBED> tag.
    <EMBED SRC="mymovie.mov" WIDTH=100 HEIGHT=100>
    Embedding Flash File
    • After creating a Flash movie you choose File > Save As from the top menu
    to save your movie. Save the file as "Somefilename.fla".

    • To embed the Flash movie you just made into an HTML page, you should
    go back to your Flash program and do the following steps:
    • Step 1
    Choose File > Open. Open a Flash movie you have created.
    • Step 2
    Choose File > Export Movie.
    • Step 3
    Name the file "somefilename.swf". Choose the location where the file is to be
    stored (in your Web folder). Click OK.
    • Step 4
    Open the HTML page where you want to insert your Flash movie. Insert this
    code:
    Embedding Flash File
    <object width="550" height="400">
    <param name="movie" value="somefilename.swf">
    <embed src="somefilename.swf" width="550" height="400">
    </embed>
    </object>

    • Note: A broken icon will appear on the Web page if the user does
    not have the Flash plug-in installed.
    Embedded Objects

    • Object Tag: Embedding multimedia objects


    • Param Tag: Runtime Settings
    <object name="unique name" type="MIME Type"
    height="nn" width="nn" >
    <!-- parameters -->
    </object>

    <param name="unique name" value="data value“/>

    22
    Example: Embedding YouTube Video

    <h1>Beautiful Pakistan</h1>
    <object width="425" height="355"
    type="application/x-shockwave-flash">
    <param name="movie"

    value="http://www.youtube.com/v/lIoPEf9h4QY&rel=1"/>
    <param name="wmode" value="transparent"/>
    <param name="allowFullScreen“ value="true“>
    <param name="quality" value="best" />
    </object>

    23
    What are forms?
    • HTML forms are used to create (rather primitive) GUIs on Web
    pages
    • Usually the purpose is to ask the user for information
    • The information is then sent back to the server
    • A form is an area that can contain form elements
    • The syntax is: <form parameters> ...form elements... </form>
    • Form elements include: buttons, checkboxes, text fields, radio
    buttons, drop-down menus, etc
    – Other kinds of HTML tags can be mixed in with the form elements
    • A form usually contains a Submit button to send the
    information in the form elements to the server
    • The form’s parameters tell how to send the information to the
    server
    The <form> tag
    • The <form attributes> ... </form> tag encloses form elements (and
    probably other HTML as well)
    • The attributes to form tell what to do with the user input
    – action="url" (required)
    • Specifies where to send the data when the Submit button is clicked
    – method="get" (default)
    • Form data is sent as a URL with ?form_data info appended to the end
    • Can be used only if data is all ASCII and not more than 100 characters
    – method="post"
    • Form data is sent in the body of the URL request
    – target="target"
    • Tells where to open the page sent as a result of the request
    • target= _blank means open in a new window
    • target= _top means use the same window
    The <input> tag
    • Most, but not all, form elements use the input tag, with a type="..."
    attribute to tell which kind of element it is
    • type can be text, checkbox, radio, password,
    hidden, submit, reset, button, file, or image
    • Other common input tag attributes include:
    • name: the name of the element
    • value: the “value” of the element; used in different ways
    for different values of type
    • readonly: the value cannot be changed
    • disabled: the user can’t do anything with this element
    • Other arguments are defined for the input tag but have
    meaning only for certain values of type
    Input Tags (1/n)
    Textfield
    <label for="textfield">Input field:</label>
    <input type="text" name="textfield" value="with an initial value" />

    Password
    <label for="passwordField">Input field:</label>
    <input type="password" name="passwordField" value="secret" />

    Textarea
    <label for="textarea">Input field:</label>
    <textarea name="textarea" cols="24" rows="2">This is a large input
    area.</textarea>

    Number
    <label for="number">I am:</label>
    <input type="number" id="age" name="age" min="1" max="100">
    years old</input>

    27
    Input Tags (2/n)
    Color
    <label for="color">My favourite color is:</label>
    <input type="color" id="color" name="color">

    Date
    <label for="birthday">I was born on:</label>
    <input type="date" id="birthday" name="birthday">

    Email
    <label for="email">My email address is:</label>
    <input type="email" id="email" name="email" size="30"
    placeholder="fahad.satti@seecs.edu.pk">

    Tel
    <label for="tel">My phone number is:</label>
    <input type="tel" id="tel" name="tel" pattern="[0-9]{2}-3[0-9]3-[0-9]
    {7}" placeholder="92-3XXX-XXXXXXX">

    28
    Input Tags (3/n)
    File
    <label for="pic">Here is my picture:</label>
    <input type="file" id="pic" name="pic">

    Checkbox
    <label for="robo">I am a robot!</label>
    <input type="checkbox" name="robo" value="checkbox"
    checked />

    • name: used to reference this form element from JavaScript


    • value/id: value to be returned when element is checked

    Note that there is no text associated with the checkbox—you have to supply text
    in the surrounding HTML

    29
    Input Tags (4/n)
    Radio
    <label for="fake">This is a fake web page.</label>
    <input type="radio" name="fake" value="yes" checked>Yes</input>
    <input type="radio" name="fake" value="no">No</input>

    • If two or more radio buttons have the same name, the user can only select
    one of them at a time
    – This is how you make a radio button “group”
    • If you ask for the value of that name, you will get the value specified for the
    selected radio button
    • As with checkboxes, radio buttons do not contain any text

    30
    Input Tags (5/n)
    Select
    <label for="select">What color is the sky?</label>
    <select name="select">
    <option value="red">Red</option>
    <option value="blue" selected="selected">Blue</option>
    <option value="green">Green</option>
    </select>

    • Select an option:
    – Selected=“selected”
    • Additional Arguments
    – size: the number of items visible in the list (default is "1")
    – multiple: if set to "true", any number of items may be selected (default is "false")

    31
    Hidden fields
    • A hidden field:

    <p>A hidden field:


    <input type="hidden" name="hiddenField"
    value="nyah" />
    &lt;-- right there, don't you see it?
    </p>

    • What good is this?


    – All input fields are sent back to the server, including hidden fields
    – This is a way to include information that the user doesn’t need to see (or that
    you don’t want her to see)
    – The value of a hidden field can be set programmatically (by JavaScript) before
    the form is submitted
    Buttons
    Submit
    <input type="submit" name="submit1" value="Submit">

    Reset
    <input type="reset" name="submit2" value="Reset">

    Input type button


    <input type="button" name="button1" value="Push Me">

    Button
    <button name="button2">Push Me 2</button>

    Self-Study: https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use 33
    A complete example
    HTML – Fundamentals
    DIV

    • Allows you create a position-able block of


    content.

    Content
    positioned
    within this
    block

    35
    HTML – Fundamentals
    DIV

    <div attributes> content </div>

    attributes
    • ID=“name”
    • STYLE = “style parameters”

    36
    HTML – Fundamentals
    DIV

    < DIV ID=“fred”


    STYLE = “POSITION:absolute|relative;
    VISIBILITY:visible|hidden;
    Z-INDEX:number;
    WIDTH:width in pixels;
    HEIGHT:height in pixels;
    TOP:pixels from top of page or block;
    LEFT:pixels from left edge of page or block;
    PADDING:margin in pixels;
    other style attributes; “ >
    content
    </DIV>

    37
    HTML – Fundamentals
    DIV

    content

    content
    content content

    content
    content

    38
    HTML – Fundamentals
    DIV

    <div style="position:absolute; left:100px;


    top:100px; width:100px; height:100px;
    background-color:#ffffff; ">

    39
    Images

    • Image Tag
    – <img src=“url” height=“…” width=“…” />
    – Relative path in src attribute
    • Image Maps
    <img usemap=“url” …

    <map name=“…”>
    <area shape=“rect” href=“url” coords=“x1,y1, x2,y2”/>
    …
    </map>
    40
    HTML – Fundamentals
    Using Images

    • Images take longer to download than text


    • The larger the image, the slower the page
    • Use optimization software
    • Use thumb nail images

    41
    HTML – Fundamentals
    Other uses of Images

    • Page background
    – <body background = “url” >
    – <body class=“background”>
    – body.background { background-image:$url; }

    • Table background
    – <table background=“url”>
    – <table class=“background”>
    – table.background { backlground-image:url; }

    • DIV background
    – <div style={ background-image:url; } >

    42
    Relative Paths
    Current Page Address Destination Address Relative URL

    http://www.demo.com/index.html http://www.demo.com/staff.html staff.html

    http://www.demo.com/index.html http://www.demo.com/products/list.html products/list.html

    http://www.demo.com/index.html http:// products/specification/


    www.demo.com/products/specification/spe spec1.html
    c1.html
    http:// http://www.demo.com/index.html ../index.html
    www.demo.com/products/list.html
    http:// http://www.demo.com/index.html ../../index.html
    www.demo.com/products/special/sp
    ec1.html
    Relative URL Formation Examples

    43
    44 HTML Head
    Control Information and Type Declaration
    Control Information
    • Meta Tag
    – Author, Description, Keywords
    – http-equiv
    <head>
    <meta name="Author" content="Ali" />
    <title>Title of the page</title>
    <!-- Some more information --> Page Refresh
    </head>
    or Redirection
    <META HTTP-EQUIV=“refresh"
    CONTENT=“10;URL=http://www.cricinfo.com">

    <META HTTP-EQUIV="Refresh"
    CONTENT="5;URL=http://www.seecs.edu.pk">
    45
    Document Types

    • DOCTYPE
    • Available Options
    – Strict
    – Transitional/Loose
    – Frameset
    <!DOCTYPE HTML PUBLIC
    "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!-- Rest of the page -->
    </html>

    46
    W3C Validation Service
    • http://validator.w3.org

    47
    No surprises!

    48
    Conclusion
    • Recap
    – Frames, Forms and Embedded Objects
    – Header Information

    49
    HTML5
    <!DOCTYPE html> Simplified DOCTYPE
    <html>
    <head>
    Simplified Character Encoding
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>

    <body>
    Content of the document......
    </body>

    </html>

    Web Engineering. More HTML 50


    There’s more!!
    • New semantic elements like <header>,
    <footer>, <article>, and <section>.
    • New form control attributes like number,
    date, time, calendar, and range.
    • New graphic elements: <svg> and <canvas>.
    • New multimedia elements: <audio> and
    <video>.

    Web Engineering. More HTML 51


    And More!!
    • New HTML5 API's (Application Programming
    Interfaces)
    – HTML Geolocation
    – HTML Drag and Drop
    – HTML Local Storage
    – HTML Application Cache
    – HTML Web Workers
    – HTML SSE

    Web Engineering. More HTML 52


    HTML5 Browser Support
    • HTML5 is supported in all modern browsers.
    • In addition, all browsers, old and new,
    automatically handle unrecognized elements
    as inline elements.
    • Because of this, you can "teach" older
    browsers to handle "unknown" HTML
    elements.

    Web Engineering. More HTML 53


    New Semantic/Structural Elements
    • <article> Defines an article in the document
    • <details> Defines additional details that the user can view or hide
    • <dialog> Defines a dialog box or window
    • <figcaption> Defines a caption for a <figure> element
    • <figure> Defines self-contained content, like illustrations, diagrams, photos, code
    listings, etc.
    • <footer> Defines a footer for the document or a section
    • <header> Defines a header for the document or a section
    • <nav> Defines navigation links in the document
    • <progress> Defines the progress of a task
    • <section> Defines a section in the document
    • <summary> Defines a visible heading for a <details> element
    • <time> Defines a date/time
    • <wbr> Defines a possible line-break

    Web Engineering. More HTML 54


    New Form Elements
    • <datalist> Defines pre-defined options for
    input controls
    • <keygen> Defines a key-pair generator field
    (for forms)
    • <output> Defines the result of a calculation

    Web Engineering. More HTML 55


    New Input Types
    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week

    Web Engineering. More HTML 56


    HTML5 Graphics
    Tag Description

    <canvas> Defines graphic drawing using JavaScript

    <svg> Defines graphic drawing using SVG

    Web Engineering. More HTML 57


    New Media Elements
    Tag Description

    <audio> Defines sound or music content

    Defines containers for external


    <embed>
    applications (like plug-ins)

    <source> Defines sources for <video> and <audio>

    <track> Defines tracks for <video> and <audio>

    <video> Defines video or movie content

    Web Engineering. More HTML 58


    HTML5 Semantic Elements
    • Semantics is the study of the meanings of words
    and phrases in language.
    • Semantic elements are elements with a meaning.
    • A semantic element clearly describes its meaning
    to both the browser and the developer.
    • Examples of non-semantic elements: <div> and
    <span> - Tells nothing about its content.
    • Examples of semantic elements: <form>, <table>,
    and <img> - Clearly defines its content.
    Web Engineering. More HTML 59
    HTML5 Semantic Elements
    HTML5 offers new semantic elements to
    define different parts of a web page:  
    • <article>
    • <aside>
    • <details>
    • <figcaption>
    • <figure>
    • <footer>
    • <header>
    • <main>
    • <mark>
    • <nav>
    • <section>
    • <summary>
    • <time>

    Web Engineering. More HTML 60


    Questions?

    THANK YOU

    Copyright 2005 - The Small Business


    61
    Depot

    You might also like