Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 6K views

    1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments

    Uploaded by

    THE KING
    The document provides instructions for 8 lab experiments on creating web pages using HTML and CSS: 1. Creating a simple web page using formatting tags. 2. Creating lists and tables with attributes. 3. Creating three types of lists. 4. Creating a bio-data form with attributes. 5. Adding hyperlinks and images to a page. 6. Developing web forms. 7. Implementing framesets. 8. Applying inline, internal, and external stylesheets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments

    Uploaded by

    THE KING
    6K views23 pages
    The document provides instructions for 8 lab experiments on creating web pages using HTML and CSS: 1. Creating a simple web page using formatting tags. 2. Creating lists and tables with attributes. 3. Creating three types of lists. 4. Creating a bio-data form with attributes. 5. Adding hyperlinks and images to a page. 6. Developing web forms. 7. Implementing framesets. 8. Applying inline, internal, and external stylesheets.

    Original Description:

    Original Title

    1 Bcom -2 Semester -E-commerce and Web Designing -LAB-Experiments

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides instructions for 8 lab experiments on creating web pages using HTML and CSS: 1. Creating a simple web page using formatting tags. 2. Creating lists and tables with attributes. 3. Creating three types of lists. 4. Creating a bio-data form with attributes. 5. Adding hyperlinks and images to a page. 6. Developing web forms. 7. Implementing framesets. 8. Applying inline, internal, and external stylesheets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    6K views23 pages

    1 Bcom - 2 Semester - E-Commerce and Web Designing - LAB-Experiments

    Uploaded by

    THE KING
    The document provides instructions for 8 lab experiments on creating web pages using HTML and CSS: 1. Creating a simple web page using formatting tags. 2. Creating lists and tables with attributes. 3. Creating three types of lists. 4. Creating a bio-data form with attributes. 5. Adding hyperlinks and images to a page. 6. Developing web forms. 7. Implementing framesets. 8. Applying inline, internal, and external stylesheets.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 23

    1

    I B.Com SECOND SEMESTER


    COMPUTER APPLICATIONS

    E – COMMERCE
    AND
    WEB DESIGNING

    LAB
    EXPERIMENTS
    2

    INDEX

    PAGE
    SL.NO DATE NAME OF THE EXPERIMENTS REMARKS
    NO

    Creation of Simple Web page using Formatting


    1
    Tags

    2 Creation of lists and Tables with Attributes

    3 Creation of Three Types of Lists

    4 Creation of Bio-Data with Attributes

    5 Creation of Hyperlinks and including Images

    6 Creation of Forms

    7 Creation of Framesets

    Cascading Style Sheets – Inline, Internal And


    8
    External
    3

    1. Creation of Simple Web page using Formatting Tags


    Procedure:
    Source code:
    Open the notepad, type the below code and save as “textformats.html”
    <html>

    <head>

    <title>Formatting Text in HTML</title>

    </head>

    <body>

    <P>This is <b>bold text</b></p>

    <P>This is <strong>strongly important text</strong></p>

    <p>This is <i>italic text</i></p>

    <p>This is <em>emphasized text</em>.</p>

    <p>This is <mark>highlighted text</mark></p>

    <p>This is <code>computer code</code></p>

    <P>This is <small>smaller text</small></p>

    <p>This is <sub>subscript</sub> and <sup>superscript</sup> text </p>

    <P>This is <del>deleted text</del></p>

    <p>This is <ins>inserted text</ins></p>

    <p>This is <b>bold text</b> </p>

    </body>

    </html>
    4

    OUTPUT
    5

    2. Creation of lists and Tables with Attributes

    Procedure:
    Source code:
    Open the notepad, type the below code and save as “listandtable.html”
    <html>
    <head>
    <title>Lists and Tables with Attributes</title>
    <table>
    <style>
    table,th,td {border:1px solid black; width:400px;}
    </style>
    </head>
    <body>
    <h1> Total Points</h1>
    <tr>
    <th>Technologies</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Programming Languages <ul>
    <li>C++</li>
    <li>Java</li>
    <li>C</li>
    </ul>
    </td>
    <td>100</td>
    </tr>
    <tr>
    <td>Database
    6

    <ul>
    <li>MySQL</li>
    <li>Oracle</li>
    <li>CouchDB</li>
    </ul>
    </td>
    <td>50</td>
    </tr>
    </table>
    </body>
    </html>
    OUTPUT
    7

    3. Creation of Three Types of Lists


    Procedure:
    Source code:
    Open the notepad, type the below code and save as “List.html”
    <html>
    <head>
    <title>Three types of Lists</title>
    <body>
    <h1> Three Types of List</h1>
    <hr color=Blue size=3>

    <h2> 1.Definition List</h2>


    <dl>
    <dt> Coffe</dt>
    <dd>Black Hot Dring</dd>
    <dd>Whit Cold Dring</dd>
    </dl>

    <h2> 2. OrderList</h2>
    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    <h2> 3. Un-OrderList</h2>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
    </body>
    </html>
    8

    4. Creation of BIO-DATA with Attributes

    Procedure:
    Source code:
    Open the notepad, type the below code and save as “Biodata.html”
    <html>
    <head>
    <title>BIO-DATA</title>
    <caption><center><b>BIO-DATA</center></b></caption>
    <center>
    <table border=5 >
    <tr><th align=left colspan=6>Name<td align=left colspan=15>S.K Raju
    9

    <tr><th align=left colspan=6>Gender<td align=left colspan=15>Male


    <tr><th align=left colspan=6>Date of Birth<td align=left colspan=15>03-05-1983
    <tr><th align=left colspan=6>Religion<td align=left colspan=15>INDIAN
    <tr><th align=left colspan=6>Community<td align=left colspan=15>BC-B
    <tr><th rowspan=4 align=left colspan=6>Address<td>D.No<td align=left
    colspan=10>11/632-1
    <tr><td>Street<td align=left colspan=10>GDS Street
    <tr><td>District<td align=left colspan=10>Kadapa
    <tr><td>State<td align=left colspan=10>Andhra Pradesh
    <tr><th rowspan=2 align=left colspan=5>Mobile/E-mail<td>Mobile<td align=left
    colspan=10>984902339
    <tr><td>E-mail<td align=left colspan=10>skrajakdp3gmail.com
    <tr><th align=center colspan=20>Educational Qualification
    <tr><th colspan=4><th>DEGREE<th>UNIVERSITY<th>MONTH & YEAR <th>GRADE/MARK
    <tr><td colspan=4><td>Tenth<td>SSC<td>March, 1999<td>Second
    <tr><td colspan=4><td>Inter<td>Board of Intermediate<td>March, 2001<td>First
    <tr><td colspan=4><td>B.Sc<td>SVU<td>March, 2004<td>First
    <tr><td colspan=4><td>M.C.A<td>SVU<td>March, 2007<td>First
    </table>
    </center>
    </html>
    10

    OUTPUT
    11

    5. Creation of Hyperlinks and including Images


    Procedure:
    Source code:
    Open the notepad, type the below code and save as “Hyperlinks.html”
    <html>
    <head>
    <title> Internal hyper links</title>
    <body>
    <h1>Internal Links Demo</h1>

    <a href = "#MS-Office">MS-Office Tutorial</a></br>


    <a href = "#ICT">ICT Tutorial</a></br>
    <a href = "#Programming in C">Programming in C Tutorial</a></br>
    <br><br><br><br><br><br><br><br><br><br>

    <a name =”MS-Office”>


    <h1>MS-Office Tutorial</h1>
    <p>This is sub topic.1</p>
    <p>This is sub topic.2</p>
    <p>This is sub topic.3</p>
    <p>This is sub topic.4</p>
    <br><br><br><br><br><br><br><br><br><br>

    <a name="ICT">
    <h1>ICT Tutorial</h1>
    <p>This is sub topic.1</p>
    <p>This is sub topic.2</p>
    <p>This is sub topic.3</p>
    <p>This is sub topic.4</p>
    <br><br><br><br><br><br><br><br><br><br>
    12

    <a name="Programming in C">


    <h1>Programming in C Tutorial</h1>
    <p>This is sub topic.1</p>
    <p>This is sub topic.2</p>
    <p>This is sub topic.3</p>
    <p>This is sub topic.4</p>

    <h1> External Link Demo</h1>


    <a href="Sample.html">Sample HTML </a>

    <H1>Mailto Link Demo<h1>


    <a href="mailto:skrajakdp3@gmail.com">Click Here go to E-mail</a>

    <h1> Image Link Demo</h1>


    <a href="Sample.html"> <img src="sample.jpg" width=100 height=100></a>
    </body>
    </html>
    13

    OUTPUT
    14
    15

    6 . Creation of Forms
    Procedure:
    Source code:
    Open the notepad, type the below code and save as “Forms.html”
    <html>
    <head>
    <title> Creation of Forms</title>
    </head>
    <body>
    <font size=4 face=verdana>
    <p align="center">
    <font size=6 face=Arial style="background-color:yellow">Form Example</font>
    </p>
    <fieldset>
    <legend>User lnformation:</legend>
    First name:<input type="text" name="firstname"><br>
    Lastname: <input type="text" name=lastname">
    </fieldset>
    <br>

    <fieldset>
    <legend>User Detai is: </legend >
    Username:<input type="text" name="user"><br>
    Password:<input type="password" name=password>
    </fieldset>
    <br>

    <fieldset>
    <legend>Male/Female Details:</legend>
    <input type="radio" name="sex" value="Male"> Male<br>
    <input type="radio" name="sex" value="Female">Female
    </fieldset>
    <br>
    16

    <fieldset>
    <legend>Choose Your Country:</legend>
    <select name="select">
    <option value="lndia">lndia</option>
    <option value="United State">United States</option>
    <option value=''Austalia">Austalia</option>
    <option value="New Zealend">New Zealend</option>
    <option value="England">England</option>
    </select>
    <br>
    </fieldset>
    <br>

    <input name="submit" type="submit" value="Submit">


    <input name="Reset" type="reset" value="Reset">
    </form>
    </body>
    </html>
    OUPUT
    17

    7 . Creation of Framesets
    Procedure:
    Source code:
    open the notepad, type the below code and save as “frames.html”
    <html>
    <head>
    <title>frames</title>
    <frameset cols="20%,80%">
    <frame src="a.html">
    <frame src="b.html" name="right">
    </frameset>
    </head>
    </html>
    Open the notepad, type the below code and save as “a.html”
    <html>
    <body>
    <h3>Courses Offered</h3>
    <h4>
    <ul type="*">
    <li><a href="bsc.html" target="right">B.Sc Courses</a><br><br>
    <li><a href="bcom.html" target="right">B.Com Courses</a><br><br>
    </ul>
    </h4>
    <br><br>
    </body>
    </html>
    Open the notepad, type the below code and save as “b.html”
    <html>
    <body>
    <h1><center>
    GITAMS Degree College-KADAPA</center></h1>
    <hr><hr>
    </html>
    18

    Open the notepad, type the below code and save as“bsc.html”
    <html>
    <body>
    <h3>B.Sc Courses</h3>
    <hr>
    <h4><ul type="*">
    <li>B.Sc - MSCS<br>
    <li>B.Sc - MPCS<br>
    <li> B.Sc - MPC
    <li>B.Sc - BZC
    </ul>
    </h4>
    </body>
    </html>

    open the notepad, type the below code and save as “bcom.html”
    <html>
    <body>
    <h3>BCOM Courses</h3>
    <hr>
    <h4>
    <ul type="*">
    <li>B.Com - General<br>
    <li>B.Com - Computer Applications<br>
    <li>BBA<br>
    </ul>
    </h4>
    </body>
    </html>
    19

    OUTPUT
    20

    8 . Creation of Cascading Style Sheets – Inline, Internal and External


    Procedure:
    Source code:
    open the notepad, type the below code and save as “Inline.html”
    <html>
    <head>
    <title>Inline Cacading Style Sheet</title>
    </head>
    <body bgcolor=yellow>
    <p> This is Simple text</p>
    <p Style="font-size:30pt;color:blue; font-family:Script"> This Text is different </p>
    </body>
    </html>
    OUTPUT

    Open the Notepad, Type the below code and save as “Internal.html”
    Procedure:
    Source code:
    <html>
    <title> Internal/Embeded Style Sheet </title>
    <style>
    21

    h1
    {
    font-family:Arial;color:green;
    }
    h2
    {
    font-family:verdana;color:red;
    }
    p
    {
    font-family:script;color:blue
    }
    </style>
    </head>
    <body>
    <h1>GITAMS Degree College-Kadapa</h1>
    <h2>Simple embedded/Internal Style Sheet </h2> <br>
    <p> This is B.Com Computer Application</p> <br>
    </body>
    </html>
    OUTPUT
    22

    Open the Notepad, Type the below code and save as “Style.css”
    Procedure:
    Source code:
    h1
    {
    font-family:Arial;color:green;
    }
    h2
    {
    font-family:verdana;color:red;
    }
    p
    {
    font-family:script;color:blue
    }
    Open the Notepad, Type the below code and save as “External.html”
    Procedure:
    Source code:
    <html>
    <head>
    <title> External Style Sheet</title>
    <link rel=”stylesheet” href=”style.css”>
    </head>
    <body>
    <h1>GITAMS Degree College-Kadapa</h1>
    <h2>Simple embedded/Internal Style Sheet </h2> <br>
    <p> This is B.Com Computer Application</p> <br>
    </body>
    </html>
    23

    OUTPUT

    You might also like