Scribd Logo
Upload

Welcome to Scribd!

  • Exp

    Uploaded by

    Join2Fly
    57 views5 pages
    Web Lab manual

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web Lab manual

    Copyright:

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

    Exp

    Uploaded by

    Join2Fly
    Web Lab manual

    Copyright:

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

    EXP 1

    Study of HTML 5.0

    HTML is amarkuplanguage fordescribingweb documents (web pages).

    HTML stands forHyperTextMarkupLanguage

    A markup language is a set ofmarkup tags

    HTML documents are described byHTML tags

    Each HTML tagdescribesdifferent document content

    HTML Example
    A small HTML document:
    <!DOCTYPEhtml>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>

    Example Explained

    TheDOCTYPEdeclaration defines the document type to be HTML


    The text between<html>and</html>describes an HTML document

    The text between<head>and</head>provides information about the


    document

    The text between<title>and</title>provides a title for the document

    The text between<body>and</body>describes the visible page content

    The text between<h1>and</h1>describes a heading

    The text between<p>and</p>describes a paragraph


    Using this description, a web browser can display a document with a heading and a
    paragraph.

    HTML Tags

    HTML tags arekeywords(tag names) surrounded byangle brackets:

    <tagname>content</tagname>

    HTML tags normally comein pairslike <p> and </p>


    The first tag in a pair is thestart tag,the second tag is theend tag
    The end tag is written like the start tag, but with aslashbefore the tag
    name

    The start tag is often called theopening tag. The end tag is often called
    theclosing tag.

    Web Browsers
    The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
    documents and display them.
    The browser does not display the HTML tags, but uses them to determine how to
    display the document:

    HTML Page Structure


    Below is a visualization of an HTML page structure:
    <html>
    <head>
    <title>Page title</title>
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    </body>
    </html>
    Only the <body> area (the white area) is displayed by the browser.

    HTML Versions
    Since the early days of the web, there have been many versions of HTML:
    Version
    Year
    HTML

    1991

    HTML 2.0

    1995

    HTML 3.2

    1997

    HTML 4.01

    1999

    XHTML

    2000

    HTML5

    2014

    How To Write HTML Using Notepad or


    TextEdit ?
    Step 1: Open Notepad

    To open Notepad in Windows 7 or earlier:


    ClickStart(bottom left on your screen). ClickAll Programs. ClickAccessories.
    ClickNotepad.
    To open Notepad in Windows 8 or later:
    Open theStart Screen(the window symbol at the bottom left on your screen).
    TypeNotepad.

    Step 2: Write Some HTML


    Write or copy some HTML into Notepad.
    <!DOCTYPEhtml>
    <html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    </body>
    </html>

    Step 3: Save the HTML Page


    Save the file on your computer.
    SelectFile > Save asin the Notepad menu.
    Name the file "index.html" or any other name ending with html or htm.
    UTF-8 is the preferred encoding for HTML files.
    ANSI encoding covers USand Western European characters only.

    You can use either .htm or .html as file extension. There is no difference, it is up to
    you.

    Step 4: View HTML Page in Your Browser


    Open the saved HTML file in your favorite browser. The result will look much like
    this:
    To open a file in a browser, double click on the file, or right-click, and choose open
    with.

    EXP 2

    Design and development of Registration form using


    HTML 5.0
    HTML Forms

    HTML Forms are required when you want to collect some data from the site visitor.
    For example during user registration you would like to collect information such as
    name, email address, credit card, etc.
    A form will take input from the site visitor and then will post it to a back-end
    application such as CGI, ASP Script or PHP script etc. The back-end application will
    perform required processing on the passed data based on defined business logic
    inside the application.
    There are various form elements available like text fields, text area fields, dropdown menus, radio buttons, checkboxes, etc.
    The HTML<form>tag is used to create an HTML form and it has following syntax:

    Form Attributes

    Apart from common attributes, following is a list of the most frequently used form
    attributes:
    Attribute Description
    action

    Backend script ready to process your passed data.

    method

    Method to be used to upload data. The most frequently used are GET and
    POST methods.

    HTML Form Controls

    There are different types of form controls that you can use to collect data using
    HTML form:

    Text Input Controls

    Checkboxes Controls

    Radio Box Controls

    Select Box Controls

    File Select boxes

    Hidden Controls

    Clickable Buttons

    Submit and Reset Button

    Example of Registration Form :<html>


    <body>
    <form tag="Create Logon">
    <div align="center">
    Username *: <input type="username" name="username" />
    Password *: <input type="password" name="pwd" />
    Surname *: <input type="surname" name="surname" />
    Other Names *: <input type="other names" name="names" />
    Date of Birth *: <input type="date of birth" name="dob" />
    Email *: <input type="email" name="email" />
    Telephone: <input type="telephone" name="tel" />
    Address *: <input type="address" name="add" />
    Post Code *: <input type="postcode" name="ptc" />
    <input type="submit" value="Submit" />
    </div>
    </form>
    <p>Note: Please make sure your details are correct before submitting form and that all fields marked
    with * are completed!.</p>
    </body>
    </html>

    You might also like