Scribd Logo
Upload

Welcome to Scribd!

  • Web Tech Lab

    Uploaded by

    Ravi Sharma
    203 views11 pages

    Original Title

    web tech lab.docx

    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

    Copyright:

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

    Web Tech Lab

    Uploaded by

    Ravi Sharma

    Copyright:

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

    Practical No.

    Aim: Create a HTML static web page which shows the use of different tags in that.

    Program:

    <html>

    <head>

    <title>WebNots - Static Page Example</title>

    </head>

    <body bgcolor="#f1f1f1" text="Red">

    <h1>Create Your Static Website</h1>

    Here is the content of your site.

    </body>

    </html>

    Output:
    Practical No.2

    Aim: Insert an image and create a link such that clicking on image takes user to other page.

    Program:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Image Hyperlink Example</title>
    </head>
    <body>
    <p>Click following link</p>
    <a href = "https://www.mmmut.ac.in" target = "_self">
    <img src ="logo1.png" alt = "MMMUT Logo" border = "0"/>
    </a>
    </body>
    </html>

    Output:
    Practical No.3

    Aim: Prepare a sample code to illustrate three types of lists in HTML.

    Program:

    HTML Unordered List

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Unordered List</title>
    </head>
    <body>
    <ul>
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ul>
    </body>

    </html>

    HTML Ordered List


    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Ordered List</title>
    </head>
    <body>
    <ol>
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ol>
    </body>
    </html>

    HTML Definition List

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Definition List</title>
    </head>

    <body>
    <dl>
    <dt><b>HTML</b></dt>
    <dd>This stands for Hyper Text Markup Language</dd>
    <dt><b>HTTP</b></dt>
    <dd>This stands for Hyper Text Transfer Protocol</dd>
    </dl>
    </body>

    </html>

    Output:

    HTML Unordered List

    HTML Ordered List

    HTML Definition Lists


    Practical No.4

    Ain: Use tables to provide layout to your HTML page describing your university infrastructure.

    Program:

    <table width="100%" border="1" cellpadding="5">


    <tr>
    <th colspan="2"><h2>Example HTML Table Page Layout</h2></th>
    </tr>
    <tr>
    <td valign="top" width="20%"><center><a href="index.html">Home</a><br><a
    href="about.html">About Us</a><br><a href="contact.html">Contact
    Us</a></center></td>
    <td valign="top"><p>Here we will have the page content.</p><p>The home page
    should be an introduction to the purpose of your site.</p><p>It should also encourage
    people to go deeper and learn more about you.</p></td>
    </tr>
    <tr>
    <td colspan="2">&copy; MMM of University Technology </td>
    </tr>
    </table>

    Output:
    Practical No.5

    Aim: Use frames such that page is divided into 3 frames 20% on left to show contents of pages, 60% in
    center to show body of page, remaining on right to show remarks.

    Program:

    <html>

    <frameset cols="20% ,60%,*">

    <frame src="content.html"><br>

    <frame src="body1.html"><br>

    <frame src="right.html">

    </frameset>

    </html>

    Output:
    Practical No. 6

    Aim: Create a simple form that will show all the INPUT METHODS available in HTML.

    Program:

    <html>

    <body>

    <form>

    Name:-<input type="text"><br><br>

    Password:-<input type="password"><br><br>

    Gender:-<input type="radio">Male <input type="radio">Female<br>

    Subject:-<input type="checkbox">Web<br>

    <input type="checkbox">CD<br>

    <input type="checkbox">CN<br>

    State:-<select>

    <option>UP</option>

    <option>Bihar</option>

    <option>MP</option>

    </select><br><br>

    Address:-<textarea rows="4" cols="6">

    </textarea><br><br>

    Photo:-<input type="file"><br><br>

    <input type="RESET">

    <input type="SUBMIT">
    Output:
    Practical No. 7

    Aim: Create a sample code to illustrate the Embedded, External and Inline style sheets for your web
    page.

    Program:

    <html>

    <head>

    <link rel="stylesheet" type="text/css" href="a.css">

    <style type="text/css">

    color:green;

    </style>

    <body>

    <h1>Web Technology</h1>

    <p>Web twchnology refer to the means by which cmputer communicate with each
    other using markup language and multimedia packages.</p>

    <h5 style="color:red">There are various application of this -</h5>

    </body>

    </html>

    Output:
    Practical No.8

    Aim: Write an XML example of given tree that demonstrates the creation of user-designed tags and
    display it in a browser.

    Program:

    <?xml version="1.0" encoding="UTF-8"?>

    <bookstore>

    <book category="cooking">

    <title lang="en">Everyday Italian</title>

    <author>Giada De Laurentiis</author>

    <year>2005</year>

    <price>30.00</price>

    </book>

    <book category="children">

    <title lang="en">Harry Potter</title>

    <author>J K. Rowling</author>

    <year>2005</year>

    <price>29.99</price>

    </book>

    <book category="web">

    <title lang="en">Learning XML</title>

    <author>Erik T. Ray</author>

    <year>2003</year>

    <price>39.95</price>

    </book>

    </bookstore>
    Output:

    You might also like