Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML Unit - 1

    Cargado por

    vrkatevarapu
    63 vistas149 páginas
    html

    Título original

    HTML unit -1

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    html

    Copyright:

    © All Rights Reserved
    Descargue como PPT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    63 vistas149 páginas

    HTML Unit - 1

    Cargado por

    vrkatevarapu
    html

    Copyright:

    © All Rights Reserved
    Descargue como PPT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 149

    WWW

    Latest revolution in the in the


    internet scenario.
    Allows multimedia documents to be
    shared between machines.
    containing text,image,audio,video,animation.

    Basically a huge collection of interlinked documents.


    Billions of documents.
    Inter-linked in any possible way.
    Resembles a cob-web.

    Cont..
    Where do the documents reside?
    On webservers.
    Also called hypertext transfer
    protocol(HTTP)servers.

    They are typically written in


    Hypertext markup language(HTML).

    Documents get formatted/displayed


    using
    web browsers
    Netscape
    Mosaic
    konquerer

    What is http?
    Hypertext transfer protocol
    A protocol using which web clients(browsers) interact
    with web servers.

    It is a stateless protocol.
    Fresh connection for every item to be downloaded.

    Transfers hypertext across the internet.


    A text with links to other text documents.
    Resembles a cob-web, and hence the name world
    wide web(www).

    Web clients(browsers) and web servers


    communicate via http protocol.

    Basic steps:
    Client opens socket connection to the
    http server.
    Typically over port 80.

    Client sends http requests to server.


    Server sends response back.
    Server closes connection.
    http is a stateless protocol.

    Illustration

    http
    reques
    th
    http
    response

    Webpage

    Types:

    Static
    Webpage

    Dynamic
    Webpage

    a Web page that always comprises the same


    information in response to all download requests
    from all users.
    a Web page that uses a database to generate data or
    information "on the fly", depending on the user's
    request.

    Static vs
    Dynamic
    Internet
    Server
    HTML

    HTML

    HTML

    Static
    Webpage

    Static vs
    Dynamic
    Internet
    Server

    DB

    Web
    page

    Web
    page

    Dynamic
    Webpage

    HTML

    System
    Requirements

    Text Editor

    Web Browser

    other
    applications

    About HTML
    Hypertext markup language:
    Constitutes a collection of platform
    independent styles that define the
    various components of a web
    document.
    Styles indicated by markup tags.
    What is HTML really?
    plain-text documents can be created
    using any text editor.
    WYSIWYG editors are also available.

    What is markup
    language?
    One where we can embed special
    tags or formatting commands in the
    text.
    To describe how the text should be
    displayed/printed.
    HTML is markup language.
    Special formatting codes(called
    tags) to adjust fonts, create
    bulleted lists, create forms,
    display images, create tables etc..

    Html tags
    The left and right angle brackets are
    used to enclose all special
    instructions called tags.
    Two classes of tags.
    Those which appears in pairs
    <i> good morning </i>.
    Those which appear individually
    <img src=baby.jpg>.
    Browsers interpret the tags to display
    a HTML page in properly formatted
    form.

    Most of the tags belong to the first


    category.
    <tagname>directives
    </tagname>
    Tags are case insensitive
    <HEAD>,<Head> and <head> all are
    equivalent.
    Tags may be nested.
    <html><head></head><body>
    </body></html>
    Most of the browsers have view
    source menu option
    The html version of the page can be
    displayed.

    Some pints(contd.)
    Some tags can have one or more
    attributes to define some
    additional characteristics of the
    tag.
    <img src=baby.jpg>
    <body text=red
    bgcolor=blue>

    Some points (contd.)


    Unrecognized tags
    Browsers normally ignore tags it
    does not recognize.

    Comment lines
    Comments are included between
    <!--- and --- >
    Comments cannot be nested
    <!--- a comment here --- >
    <!--- another comment in
    two lines --- >

    Html document structure


    A html document consists of two
    major portions:
    Head
    Contains information about the
    document ,like the title etc.

    Body
    Contains the actual matter of the
    document.
    Gets displayed within the browser
    window.

    A simple HTML Document


    <html>
    <head>
    <title>title of the
    document</title>
    </head>
    <body text=white
    bgcolor=blue>
    This is the content of the
    document.
    This is an <i>italic</i> font,this is
    <b>bold</b>
    </body>
    </html>

    17

    Example-1
    <html>
    <head><title>First Page</title></head>
    <body bgcolor="blue>
    <hr>
    Hello! This is my first page of code. I can't
    believe I'm on my way to
    being a webmaster.<p>
    This is so great!!!
    <hr>
    </body>
    </html>

    Heres what those did

    Structural html tags


    <html></html>
    Used to bracket an entire html
    document.
    Optional for most of the
    browsers.
    Attributes:
    lang = language code
    Language code indicates the primary
    language of the document
    bn-Bengali, hi Hindi, en - English

    Structural HTML Tags


    (contd.)
    <head>.</head>
    Used to provide information
    about web page.
    Nests within itself other tags like
    <base>,<meta> and <title>.

    Structural HTML Tags


    (contd.)
    <body>..</body>
    Used to bracket the body of a html
    document.
    Attributes:
    background=url
    bgcolor=color sets background
    color of the document.
    text=color sets the default color
    for the normal text in the document.

    Structural HTML Tags


    (contd.)
    alink=color sets the color of
    the active links.
    link=color sets the default
    color for all the links in a
    document.
    vlink=color sets the color for
    the visited links.

    Text formatting in html


    paragraphs and
    headings
    <Hn></Hn>

    Used to generate headings,1n6.


    Six different levels of headings.
    <h1> is the largest,<h6> is the
    smallest.
    <p>
    Paragraph marker,used to separate
    text into paragraphs.
    End tag </p> is optional.

    HTML<h1>to<h6>Tags
    <html>
    <head><title>Demonstration of Headings
    </title></head>
    <body text="#FFFFFF"
    bgcolor="#0000FF">
    <h1>This is a first level heading. </h1>
    <h2>The second level</h2>
    <h3>The third level</h3>
    <h4>Fourth level. </h4>
    <h5>Fifth level.</h5>
    <h6>And, finally, the sixth .</h6>
    A small amount of plain non-heading text.
    </body>
    </html>

    Contd.
    <BR>
    Used to indicate that the text
    following <br> should begin on
    the next line.
    The amount of line spacing is
    less than of a <p> break.

    Contd.
    <hr>
    Produces a horizontal line,which
    can be used to delimit sections.
    Length of the line can be
    specified.
    Examples
    <hr>
    <hr size=20> [noshade option
    possible]
    <hr align=right width=75%
    >

    Appearance of Text
    <b>..</b>
    Displays enclosed text in bold.
    <i></i>
    Displays the enclosed text in
    italics.
    <cite>..</cite>
    Tells the browser that this is a
    citation usually displayed in italics.

    Contd.
    <pre>.</pre>
    Allows browser to display
    carefully laid out text.
    Used to display program listings.
    Example
    <pre>
    Main()
    {
    Int I,j;abc();
    }
    </pre>

    Contd.

    <sub>.</sub>
    Displays the enclosed text as subscript.
    <sup>..</sup>
    Displays the enclosed text as
    superscript.
    <font>..</font>
    Specifies the style of the enclosed text.
    Attributes:
    Color=color name
    Face=typeface
    Size=value [ 1 to 7; 3 is the default]
    [can also specify as +n or n]

    contd
    <center>.</center>
    Centers the enclosed elements
    horizontally on the page.
    <p align=option></p>
    Used to align a paragraph
    Option can be left,right or
    center.

    <html>
    <head><title>Paragaph Aligning</title></head>
    <body text=white bgcolor=blue>
    <h3>
    <P ALIGN=CENTER> This paragraph will be
    aligned
    at the center. Even as the browser window
    size changes, the alignment remains the same.
    </P>
    <P ALIGN=LEFT>This demonstrates left
    alignment. </P>
    <P ALIGN=RIGHT>How about aligning by the right
    margin? </P>
    </h3>
    </body>
    </html>

    <html>
    <head><title>Layout Features
    1</title></head>
    <body text=yellow bgcolor=blue>
    <h2> <pre>
    begin
    if (a > b)
    then max := a;
    else max := b;
    end;
    </pre> </h2>
    <hr size=8 width=50%>
    <hr>
    <hr size=20 width="75%" noshade>
    </body>
    </html>

    <html>
    <head><title>Layout Features
    2</title></head>
    <body text=yellow bgcolor=blue>
    <h3>Extended Quotations</h3>
    <blockquote>
    <P>This is the first paragraph within
    the BLOCKQUOTE environment. </P>
    <P>Another paragraph starts here. </P>
    We type some text here without explicitly
    giving paragraph break.
    </blockquote>
    </body>
    </html>

    <html>
    <head><title> Superscript and
    Subscript </title></head>
    <body text=white bgcolor=blue>
    <h1> y = x <sup> 3 </sup> + 2 x
    <sup> 2 </sup> + 4 </h1>
    <br>
    <h2> W <sub> total </sub> = x
    <sup> 2 </sup> - 5 <h2>
    </body>
    </html>

    <html>
    <head>
    <title>Background Image</title>
    </head>
    <body text="#FFFFFF"
    background="starwars.jpg">
    <h2><center>
    This page illustrates how a
    background image
    can be specified.
    </center></h2>
    </body>
    </html>

    HTML Lists

    Types of Lists

    There are a number of tags for


    building lists.
    Serves the purpose of improving
    the readability of the text.

    Depending on the way the list


    items are displayed, lists may be
    divided into three types:
    Unnumbered list
    Numbered list
    Definition list

    Unnumbered List
    Used to display a set of related
    items that appear in no particular
    order.
    Each item is indented with a preceding
    bullet symbol.

    Specified using the tag:


    <UL> </UL>
    The individual items in the list are
    specified using the <LI> tag.
    Attributes:
    type = disc | circle | square

    Unnumbered List
    (contd.)
    The <LI> items can contain multiple
    paragraphs, specified using <P>.
    Example:
    <UL>
    <LI> First item of the list
    <LI> Second item of the list
    <LI> Third item of the list
    </UL>

    Unnumbered List
    (Example 1)

    <html>
    <head><title> Bulleted list 1 </title></head>
    <body text=white bgcolor=blue>
    <h2> The flowers I like: </h2>
    <h3>
    <UL>
    <LI> Rose
    <LI> Lotus
    <LI> Daffodil
    <LI> Marigold
    </UL>
    </h3>
    </body>
    <html>

    Unnumbered List
    (Example 2)
    <html>
    <head><title> Bulleted list 2 </title></head>
    <body text=white bgcolor=blue>
    <h2> The flowers I like: </h2>
    <h3>
    <UL type=square>
    <LI> Rose
    <LI> Lotus
    <LI type=circle> Daffodil
    <LI> Marigold
    </UL>
    </h3>
    </body>
    </html>

    Numbered List
    Numbered or ordered lists are used
    when the sequence of the items is
    important.
    Specified using the tag:
    <OL> </OL>
    The individual items in the list are
    specified using the <LI> tag.
    Example:
    <OL>
    <LI> This is number one
    <LI> This is number two
    <LI> This is number three
    </OL>

    Numbered List (contd.)


    The list items are numbered
    sequentially as 1,2,3,
    Attributes:
    type = 1 | A | a | I | I
    Specifies the style of numbering.
    1,2,3, or A,B,C, or a,b,c, or
    I,II,III, or i,ii,iii,

    Numbered List (Example


    1)
    <html>
    <head><title> Numbered list 1
    </title></head>
    <body text=white bgcolor=blue>
    <h2> To cook Maggi you must: </h2>
    <h3>
    <OL>
    <LI> Put some water to boil
    <LI> Put in noodles and masala
    <LI> Wait for 2 minutes
    <LI> Serve in a plate
    </OL>
    </h3>
    </body>
    </html>

    Numbered List (Example


    <html>
    2)
    <head><title> Numbered list 2 </title></head>
    <body text=white bgcolor=blue>
    <h2> To cook Maggi you must: </h2>
    <h3>
    <OL type =A>
    <LI> Put some water to boil
    <LI> Put in noodles and masala
    <LI> Wait for 2 minutes
    <LI> Serve in a plate
    </OL>
    </h3>
    </body>
    </html>

    Numbered List (Example


    3)
    <html>
    <head><title> Numbered list 3 </title></head>
    <body text=white bgcolor=blue>
    <h2> To cook Maggi you must: </h2>
    <h3>
    <OL type =I>
    <LI> Put some water to boil
    <LI> Put in noodles and masala
    <LI type=1> Wait for 2 minutes
    <LI> Serve in a plate
    </OL>
    </h3>
    </body>
    </html>

    Definition List
    Specified using the tag:
    <DL> </DL>
    Each definition comprises of a
    definition term (<DT>) and a
    definition description (<DD>).
    Web browsers format each
    definition on a new line and
    indent it.

    Definition List (contd.)


    Example:
    <DL>
    <DT> TCP
    <DD> Transmission Control Protocol
    <DT> UDP
    <DD> User Datagram Protocol
    <DT> IP
    <DD> Internet Protocol
    </DL>

    Definition List (Example)


    <html>
    <head><title> Definition list 1 </title></head>
    <body text=white bgcolor=blue>
    <h2> Some important protocols: </h2>
    <h3><DL>
    <DT> TCP
    <DD> Transmission Control Protocol
    <DT> UDP
    <DD> User Datagram Protocol
    <DT> IP
    <DD> Internet Protocol
    </DL></h3>
    </body>
    </html>

    Nesting of Lists
    Any list can be nested within
    another list.
    When unnumbered lists are nested,
    the browser automatically uses a
    different bullet symbol for each level.
    When numbered lists are nested, by
    default, every level is numbered
    using the arabic numerals (1, 2, 3,
    ).

    Nesting of Lists
    <html><head><title>
    List Nesting 1 </title></head>
    (Example
    1)
    <body text=white bgcolor=blue>
    <H3> My favorite languages are:
    <UL>
    <LI> Java <BR>
    <UL>
    <LI> object-oriented
    <LI> platform independent
    <LI> can be embedded within HTML
    </UL> <BR>
    <LI> Perl <BR>
    <UL>
    <LI> a scripting language
    <LI> powerful string handling capabilities
    <LI> widely used for writing CGI scripts
    </UL>
    </UL> </H3>
    </body>
    </html>

    Nesting of Lists
    (Example
    <html><head><title>
    List Nesting 22)
    </title></head>
    <body text=white bgcolor=blue>
    <H3> My favorite languages are:
    <OL>
    <LI> Java <BR>
    <UL>
    <LI> object-oriented
    <LI> platform independent
    <LI> can be embedded within HTML
    </UL> <BR>
    <LI> Perl <BR>
    <OL>
    <LI> a scripting language
    <LI> powerful string handling capabilities
    <LI> widely used for writing CGI scripts
    </OL>
    </OL> </H3></body></html>

    Specifying Hyperlinks

    Hyperlinks
    Chief power of HTML comes from
    its ability to link text and/or
    image to another document or
    section of a document.
    These links are called hyperlinks.
    Browser by default highlights the
    hyperlinks with color and/or
    underline.

    Hyperlinks (contd.)
    Specified using the anchor tag:
    <A> . </A>
    Requires an attribute called HREF which
    specifies the path of the resource to be linked.

    Example:
    <A HREF=face.jpg> portrait </A>
    <a href=www.google.com> search </a>
    <a href=mailto:isg@hotmail.com> Mail
    me </a>
    <a href=slides/ch5.pdf> download
    pdf</a>

    Relative versus Absolute


    URLs
    Relative URL
    Provides a link to another document relative
    to the location of the current document.
    Commonly used when referring to
    documents residing on the same web site.
    Examples:

    <a href=TENNIS/sania.html> Sania


    Mirza </a>
    <a href=../NEWS/cricket.html> Cricket
    </a>
    These kind of links are called relative links.

    Relative versus Absolute URLs


    (contd.)

    Absolute URL

    The complete path name of the


    document in the server is specified.
    Necessary when linking to documents
    on other servers.
    Example:

    <a
    href=www.iitkgp.ac.in/people/isg/p
    aper5.pdf>
    One of my recent papers </a>

    Linking to Specific
    Sections
    Anchors can be used to go to a
    particular section in a document.
    Within the same (or different) document.

    Two steps involved.


    Define a named section in a document.

    <a name=tennis> <h2>About


    tennis</h2> </a>
    Provide a link to the named section.

    <a href=#tennis> Information on


    Tennis </a>
    <a href=http://www.sunny.com/xyz.html
    #LAN>
    Local Area Networks </a>

    Hyperlinks (Example)
    <html><head><title> Link to Other Sites
    </title></head>
    <body text=white bgcolor=blue link=red vlink=green>
    My favorite search engines are:
    <ol>
    <li> <a href="http://www.google.com"> Google </a>
    <li> <a href="http://www.yahoo.com"> Yahoo </a>
    <li> <a href="http://www.khoj.com"> Khoj </a>
    </ol>
    <hr>
    <address>
    Prof. Indranil Sen Gupta <BR> <BR>
    <a href="mailto:isg@hotmail.com"> <img
    src="mbox.gif"
    align=middle> </a>
    </address></body></html>

    Images

    Images
    Supported image formats:
    JPEG, GIF, PNG

    Specified using the standalone tag:


    <IMG>
    Attributes of <IMG>:
    SRC: specifies the URL of the image
    file
    HEIGHT: height (in pixels) to be set
    aside for the image.
    WIDTH: width (in pixels) to be set
    aside for the image.

    Images (contd.)

    The HEIGHT and WIDTH attributes


    tells the browser to set aside
    appropriate space (in pixels) for
    the image as it downloads the rest
    of the file.
    Some browsers stretch or shrink an
    image to fit into the allotted space.

    Example:
    <IMG SRC=blackrose.gif>
    <img src=tiger.jpg height=80
    width=150>

    Images (Example 1)
    <html><body>
    An image
    <img src=book.gif align="bottom" width="48"
    height="48">
    in the text
    <p> An image
    <img src =book.gif align="middle" width="48"
    height="48">
    in the text
    <p> An image
    <img src =book.gif align="top" width="48"
    height="48">
    in the text
    </body></html>

    Images (Example 2)

    <html>
    <body>
    <img src =book.gif align ="left" width="48"
    height="48">
    A paragraph with an image. The image will float to
    the
    left of this text.
    <p>
    <img src =book.gif align ="right" width="48"
    height="48">
    A paragraph with an image. The image will float to
    the
    right of this text.
    </body>
    </html>

    Images (Example 3)
    <html>
    <body>
    <img src="book.gif" width="20" height="20"> <p>
    <img src="book.gif" width="45" height="45"> <p>
    <img src="book.gif" width="70" height="70"> <p>
    Resizing an image by changing the values in the
    "height" and "width" attributes of the img tag.
    </body>
    </html>

    Images (Example 4)
    <html>
    <body>
    It is possible to use an image as a link.
    Click on the
    image below to go to google.
    <P>
    <a href=www.google.com">
    <img src=book.gif>
    </a>
    </body>
    </html>

    HTML Tables

    Introduction

    Tables are made up of cells, arranged


    into rows.
    Use tags <TABLE>, <TR>, <TD>.
    An example:

    <table>
    <tr>
    <td> Good </td> <td> Bad </td>
    </tr>
    <tr>
    <td> Cute </td> <td> Ugly </td>
    </tr>
    </table>

    The Table Tags


    <TABLE> </TABLE>
    Defines the beginning and the end
    of a table.
    Can have several attributes:

    bgcolor = #rrggbb or color name


    rules = all | cols | rows | none
    border = number
    height = number, percentage
    Width=number,percentage

    <TR> .. </TR>
    Defines a row of cells within a
    table.
    Can have several attributes:
    bgcolor = #rrggbb or color name
    align = left | center | right | justify

    <CAPTION> .. </CAPTION>
    Provides a caption for the table.
    Must immediately follow the table
    tag, and precede all other tags.

    <TD> .. </TD>
    Defines a table data cell.
    A table cell can contain any content,
    like
    an image, or even another table.
    Can have several attributes:
    bgcolor = #rrggbb or color name
    colspan = number

    == > specifies the number of columns


    the currect cell should span (default is
    1).
    rowspan = number

    == > similar

    <TH> .. </TH>
    Defines a table header cell.
    Browsers generally display the
    contents of the header cells in
    bold, and centered.
    Same attributes as the <TD>
    tag.

    HTML Frames

    Introduction
    What are frames?
    A method for dividing the browser
    window into smaller subwindows.
    Each subwindow displaying a
    different HTML document.
    How does a page with frame look
    like?
    NEXT SLIDE

    A Web Page that use


    Frames

    The Frame Tags

    <FRAMESET> .. </FRAMESET>
    Defines a collection of frames or other
    framesets.
    Attributes:
    cols = list of lengths (number, %, or *)
    rows = list of lengths (number, %, or *)

    Establishes the number and sizes of


    columns (vertical frames) or rows
    (horizontal frames) in a frameset.
    In number of pixels, percentage of
    total area, or relative values (*) based
    on available space.

    <FRAME>
    Defines a single frame within a
    frameset.
    Attributes:

    frameborder = 1 | 0
    src = url
    scrolling = yes | no | auto
    marginwidth = number
    marginheight = number
    name = text

    <NOFRAMES>
    </NOFRAMES>
    Specifies the contents to be
    displayed by browsers that
    cannot display frames.
    Ignored by browsers that
    support frames.

    Assign a name to the targeted


    frame.
    <frame src = somepage.htm
    name = abc>
    Specify this frame in a hyperlink
    as follows:
    <a href = newpage.htm
    target=abc> </a>
    The document newpage.htm will
    load into the frame names abc.

    HTML Forms

    Introduction
    Provides two-way communication
    between web servers and browsers.
    Demand for most of the emerging
    applications.
    Providing dynamic contents.
    Browser

    WebServe
    r

    What is a HTML FORM?


    A form basically contains boxes and
    buttons.
    Real-life examples:
    Search engines
    On-line purchase of items
    Registration

    The form allows a user to fill up the


    blank entries and send it back to the
    owner of the page.
    Called SUBMITTING the form.

    FORM Example

    FORM Tags and


    Attributes
    Several tags are used in
    connection with forms:
    <form> </form>
    <input>
    <textarea> </textarea>
    <select> </select>

    <FORM> </FORM>
    Tag
    This tag is used to bracket a
    HTML form.
    Includes attributes which specify
    where and how to deliver filled-up
    information to the web server.

    Two main attributes:


    METHOD
    ACTION

    METHOD:
    Indicates how the information in
    the form will be sent to the web
    server when the form is submitted.
    Two possible values:
    POST: causes a forms contents to be
    parsed one element at a time.
    GET: concatenates all field names and
    values in a single large string.

    POST is the preferred method


    because of string size limitations
    in most systems.

    ACTION:
    Specifies the URL of a program on
    the origin server that will be
    receiving the forms inputs.
    Traditionally called Common
    Gateway Interface (CGI).
    Details of CGI to be discussed later.

    The specified program is executed


    on the server, when the form is
    submitted.
    Output sent back to the browser.

    Typical usage:
    <FORM METHOD=POST
    ACTION=cgi-bin/myprog.pl>
    ..
    ..
    </FORM>

    <INPUT> Tag
    This tag defines a basic form
    element.
    Several attributes are possible:
    TYPE
    NAME
    SIZE
    MAXLENGTH
    VALUE
    SRC
    ALIGN

    TYPE:
    Defines the kind of element that is to be
    displayed in the form.
    TEXT defines a text box, which
    provides a single line area for entering
    text.
    RADIO radio button, used when a
    choice must be made among several
    alternatives (clicking on one of the
    buttons turns off all others in the same
    group).
    CHECKBOX similar to the radio
    buttons, but each box here can be
    selected independently of the others.

    PASSWORD similar to text box, but


    characters are not shown as they are typed.
    HIDDEN used for output only; cannot be
    modified (mainly used to refer to choices
    that have already been made earlier).
    IMAGE used for active maps. When the
    user clicks on the image, the (x,y) coordinates are stored in variables, and are
    returned for further processing.
    SUBMIT creates a box labeled Submit; if
    clicked, the form data are passed on to the
    designated CGI script.
    RESET creates a box labeled Reset; if
    clicked, clears a forms contents.

    NAME:
    Specifies a name for the input field.
    The input-handling program (CGI) in
    reality receives a number of
    (name,value) pairs.

    SIZE:
    Defines the number of characters that
    can be displayed in a TEXT box without
    scrolling.

    MAXLENGTH:
    Defines the maximum number of
    characters a TEXT box can contain.

    VALUE:
    Used to submit a default value for a TEXT
    or HIDDEN field.
    Can also be used for specifying the label
    of a button (renaming Submit, for
    example).

    SRC:
    Provides a pointer to an image file.
    Used for clickable maps.

    ALIGN:
    Used for aligning image types.
    ALIGN = TOP | MIDDLE | BOTTOM

    <TEXTAREA>
    </TEXTAREA> Tag
    Can be used to accommodate
    multiple text lines in a box.
    Attributes are:
    NAME: name of the field.
    ROWS: number of lines of text
    that can fit into the box.
    COLS: width of the text area on
    the screen.

    <SELECT> . </SELECT>
    Tag
    Used along with the tag <OPTION>.

    Used to define a selectable list of


    elements.

    The list appears as a scrollable menu or


    a pop-up menu (depends on browser).

    Attributes are:
    NAME: name of the field.
    SIZE: specifies the number of option
    elements that will be displayed at a
    time on the menu. (If actual number
    exceeds SIZE, a scrollbar will appear).

    MULTIPLE: specifies that multiple


    selections from the list can be made.
    <FORM .>
    ..
    Languages known:
    <SELECT NAME=lang SIZE=3
    MULTIPLE>
    <OPTION> English
    <OPTION> Hindi
    <OPTION> French
    <OPTION> Hebrew
    </SELECT>
    </FORM>

    Example 1

    Example 1

    <HTML>
    <HEAD>
    <TITLE> Using HTML Forms </TITLE>
    </HEAD>
    <BODY TEXT="#FFFFFF"
    BGCOLOR="#0000FF"
    LINK="#FF9900" VLINK="#FF9900"
    ALINK="#FF9900">
    <CENTER><H3> Student Registration
    Form </H3>
    </CENTER>
    Please fill up the following form about the
    courses you will register for this Semester.

    <FORM METHOD="POST" ACTION="/cgi/feedback">


    <P> Name: <INPUT NAME="name" TYPE="TEXT"
    SIZE="30" MAXLENGTH="50">
    <P> Roll Number: <INPUT NAME="rollno"
    TYPE="TEXT" SIZE="7">
    <P> Course Numbers:
    <INPUT NAME="course1" TYPE="TEXT" SIZE="6">
    <INPUT NAME="course2" TYPE="TEXT" SIZE="6">
    <INPUT NAME="course3" TYPE="TEXT" SIZE="6">
    <P> <P> Press SUBMIT when done.
    <P> <INPUT TYPE="SUBMIT">
    <INPUT TYPE="RESET">
    </FORM> </BODY> </HTML>

    Example 2

    Example 2

    <HTML>
    <HEAD>
    <TITLE> Using HTML Forms </TITLE>
    </HEAD>
    <BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"
    LINK="#FF9900" VLINK="#FF9900"
    ALINK="#FF9900">
    <CENTER> <H3> Student Registration Form
    </H3>
    </CENTER>
    Please fill up the form below and press DONE
    when
    done.

    <FORM METHOD="POST" ACTION="/cgi/feedback">


    <P> Name: <INPUT NAME="name" TYPE="TEXT"
    SIZE="30" MAXLENGTH="50">
    <P> Roll Number:
    <INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
    <P> Course Numbers:
    <INPUT NAME="course1" TYPE="TEXT" SIZE="6">
    <INPUT NAME="course2" TYPE="TEXT" SIZE="6">
    <INPUT NAME="course3" TYPE="TEXT" SIZE="6">
    <P> Category: SC <INPUT NAME="cat"
    TYPE=RADIO>
    ST <INPUT NAME="cat" TYPE=RADIO>
    GE <INPUT NAME="cat" TYPE=RADIO>

    <P> Mother tongue: <SELECT


    NAME="mtongue" SIZE="3">
    <OPTION> Hindi
    <OPTION> Bengali
    <OPTION> Gujrati
    <OPTION> Tamil
    <OPTION> Oriya
    <OPTION> Assamese
    </SELECT>
    <P> <P> Thanks for the information.
    <P> <INPUT TYPE="SUBMIT" VALUE="DONE">
    <INPUT TYPE="RESET" VALUE="CLEAR
    FORM">
    </FORM>
    </BODY>
    </HTML>

    Example 3

    Example 3
    <HTML>
    <HEAD>
    <TITLE> Using HTML Forms </TITLE>
    </HEAD>
    <BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"
    LINK="#FF9900" VLINK="#FF9900"
    ALINK="#FF9900">
    <CENTER> <H3> Student Feedback Form </H3>
    </CENTER>
    Please fill up the following form and press DONE
    when finished.

    <FORM METHOD="POST"
    ACTION="/cgi/feedback">
    <P> Name: <INPUT NAME="name"
    TYPE="TEXT"
    SIZE="30" MAXLENGTH="50">
    <P> Roll Number:
    <INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
    <P> Password:
    <INPUT NAME="code" TYPE=PASSWORD
    SIZE="10">
    <P> Course Numbers:
    <INPUT NAME="course1" TYPE="TEXT"
    SIZE="6">
    <INPUT NAME="course2" TYPE="TEXT"
    SIZE="6">
    <INPUT NAME="course3" TYPE="TEXT"
    SIZE="6">

    <P> Category: SC <INPUT NAME="cat"


    TYPE=RADIO>
    ST <INPUT NAME="cat" TYPE=RADIO>
    GE <INPUT NAME="cat" TYPE=RADIO>
    <P> Mother tongue: <SELECT
    NAME="mtongue"
    SIZE="3">
    <OPTION> Hindi
    <OPTION> Bengali
    <OPTION> Gujrati
    <OPTION> Tamil
    <OPTION> Assamese
    <OPTION> Oriya
    </SELECT>

    <P> Languages known:


    English <INPUT NAME="lang"
    TYPE=CHECKBOX>
    Hindi <INPUT NAME="lang" TYPE=CHECKBOX>
    <P> Scholarship holder (select for yes):
    <INPUT NAME="schol" TYPE=CHECKBOX>
    <P> General feedback:
    <TEXTAREA NAME="feed" ROWS=3 COLS=20>
    </TEXTAREA>
    <P> <P> Thanks for the information.
    <P> <INPUT TYPE="SUBMIT" VALUE="DONE">
    <INPUT TYPE="RESET" VALUE="CLEAR
    FORM">
    </FORM>
    </BODY> </HTML>

    Cascaded Style Sheets


    (CSS)

    How to specify a rule?


    The basic CSS syntax
    body {background-color:
    #FF0000;}

    properties
    background-color: #FFCC66;
    color: #990000;
    background-image: url("butterfly.gif");
    font-family: arial, verdana, sans-serif;
    font-variant: small-caps;
    font-variant: normal;
    font-style: italic;
    font-weight: bold;

    font-size: 30px;
    text-decoration: underline| overline|
    line-through;
    text-transform: uppercase|lowercase;
    text-transform: capitalize;

    Inline Styles
    <H2 style = color: blue> This will
    appear
    as blue. </H2>
    <P style = font-size: 12pt; fontfamily:
    Verdana>
    This paragraph will be set as per the
    specified
    Style. </P>

    Embedded Style Sheets

    <html><head>
    <style type = text/css>
    <! - H2 {color: blue}
    P {font-size: 12pt;
    font-family: Verdana;
    }
    -->
    </style>
    <title> Example of using style sheets </title>
    </head>
    .
    .
    </html>

    External Style Sheets

    The most powerful way.


    Collect all styles in a separate text
    document.
    Creates links to that document.

    <head>
    <link rel = STYLESHEET
    href =
    /pathname/mystyle.css
    type = text/css>
    </head>

    The id and class Selectors


    In addition to setting a style for a
    HTML element, CSS allows you to
    specify your own selectors called "id"
    and "class".
    #para1
    {
    text-align:center;
    color:red;
    }

    Example for id selector


    <html>
    <head>
    <style>
    #para1
    {
    text-align:center;
    color:red;
    }
    </style>
    </head>
    <body>
    <p id="para1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>
    </body>
    </html>

    The class Selector


    The class selector is used to specify a
    style for a group of elements.
    .center {text-align:center;}

    Example for class selector


    <html>
    <head>
    <style>
    .center
    {
    text-align:center;
    }
    </style>
    </head>
    <body>
    <h1 class="center">Center-aligned heading</h1>
    <p class="center">Center-aligned paragraph.</p>
    </body>
    </html>

    También podría gustarte