Scribd Logo
Upload

Welcome to Scribd!

  • Name: Faizan Khan Roll No: FA18-BSE-092 Subject: W.E (Lab)

    Uploaded by

    Babar Ali
    20 views16 pages

    Original Title

    W.E Lab

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    20 views16 pages

    Name: Faizan Khan Roll No: FA18-BSE-092 Subject: W.E (Lab)

    Uploaded by

    Babar Ali

    Copyright:

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

    Name: Faizan Khan

    Roll No: FA18-BSE-092


    Subject: W.E (Lab)
    Question no: 1

    Code of Home Page:

    !DOCTYPE
    html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="q1css.css">
    </head>
    <body>
    <h3>All About Butterflies</h3>
    <table class="purpleHorizon" align="right">
    <thead>
    <tr>
    <th>Butterfly Drop Down Menu</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td colspan="4">
    </td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>All about butterflies homepage</td>
    <tr>
    <td>Introduction</td></tr>
    <tr>
    <td><a href="artandculturepage.html" >ArtAndCulture</a></td>
    </tr>
    <tr>
    <td ><a href="fastfact.html" >Fast facts</a></td></tr>
    <tr>
    <td><a href="http://en.wikipedia.org/wiki/Butterfly">Wikepedia
    reference</a></td></tr>
    </tbody>
    </table>

    </body>
    </html>

    Screenshot:

    Code of page 2 (Facts)


    <html
    >
    <head>
    <style>
    p.dashed {border-style: dashed;}
    p.dotted {border-style: dotted;}
    p.double {border-style: double;}
    p.solid {border-style: solid;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}
    </style>
    </head>
    <body>
    <font color = "red">
    <h2>FAST FACTS RELATED TO BUTTERFLIES</h2>
    </font>
    <font color = "green">
    <p class="dotted">Butterfly Wings is Transparent</p>
    <p class="dashed">Butterflies Taste With Their Feet</p>
    <p class="solid">Butterflies Live on an all Liquid Diet</p>
    <p class="double">A Butterfly Must Assemble Its Own Proboscis—Quickly</p>
    <p class="groove">Butterflies Drink From Mud Puddles</p>
    <p class="ridge">Butterflies Can't Fly If They're Cold</p>
    <p class="inset">A Newly Emerged Butterfly Can't Fly</p>
    <p class="outset">Butterflies Often Live Just a Few Weeks</p>
    <p class="none">Butterflies Are Nearsighted but Can See Colors</p>
    <p class="hidden">Butterflies Employ Tricks to Avoid Being Eaten</p>
    </font>
    </body>
    </html>

    Screen Shot:
    Code of Page 3 (Culture,,,)

    <!DOCTYPE
    html>
    <html>
    <head>
    /*8<link rel="stylesheet" type="text/css" href="q1css.css">*/
    <style>
    ul {
    list-style-image: url('ulll.gif');
    }
    </style>
    </head>
    <body>
    <h1>Art and Culture</h1>
    <p>The word culture is derived from the Latin root cultura or cultus meaning
    to "inhabit, cultivate, or honour". In general, culture refers to human activity.art
    may be taken to include forms as diverse as:</p>
    <ul>
    <li>Poetry</li>
    <li>Dance</li>
    <li>Drama</li>
    <li>Film</li>
    <li>Music</li>
    <li>Sculpture</li>
    </ul>
    </body>
    </html>

    Screen Shot:

    CSS CODE:
    h3 {
    color: purple;
    color: #B549A4;
    background: #FFFFFF;
    text-
    shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #4
    9FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
    text-align: center;
    }
    body {
    height: 100%;
    background-image: url('butterfly.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    }
    html{
    height: 100%;
    }
    table.purpleHorizon {
    border: 4px solid #792396;
    background-color: #555555;
    width: 350px;
    text-align: center;
    border-collapse: collapse;
    }
    table.purpleHorizon td, table.purpleHorizon th {
    border: 1px solid #555555;
    padding: 5px 2px;
    }
    table.purpleHorizon tbody td {
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    }
    table.purpleHorizon tr:nth-child(even) {
    background: #CC3BFC;
    }
    table.purpleHorizon thead {
    background: #792396;
    border-bottom: 4px solid #792396;
    }
    table.purpleHorizon thead th {
    font-size: 19px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: left;
    border-left: 2px solid #792396;
    }
    table.purpleHorizon thead th:first-child {
    border-left: none;
    }

    table.purpleHorizon tfoot {
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    background: #CE3CFF;
    background: -moz-linear-gradient(top, #da6dff 0%, #d34fff 66%, #CE3CFF 100%);
    background: -webkit-linear-
    gradient(top, #da6dff 0%, #d34fff 66%, #CE3CFF 100%);
    background: linear-gradient(to bottom, #da6dff 0%, #d34fff 66%, #CE3CFF 100%);
    border-top: 5px solid #792396;
    }
    table.purpleHorizon tfoot td {
    font-size: 13px;
    }
    table.purpleHorizon tfoot .links {
    text-align: right;
    }
    table.purpleHorizon tfoot .links a{
    display: inline-block;
    background: #792396;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
    }

    Question No:2

    Code of Page 1:
    <!DOCTYPE
    html>
    <html>
    <head>
    <title>Page-01</title>
    <style>
    div {
    width: 800px;
    border: 1px solid grey;
    }
    h2 a {
    color: #4A235A;
    }
    </style>
    </head>
    <body>
    <CENTER>
    <p>A comparison between different Types of chocolates</p>
    <div>
    <table border=5 cellspacing="2">

    <tr>
    <th> Type of Chocolate </th>
    <th> Color </th>
    <th> Image </th>
    <th> Percentage of cocoa solids</th>
    </tr>
    <tr>
    <th rowspan="2" align="CENTER"> Non White </th>
    <td> dark </td>
    <td><img src="1.jpg" height="100" width="100"></td>
    <td> 74.4%</td>
    </tr>
    <tr>
    <td> milk </td>
    <td> <img src="2.jpg" height="100" width="100"></td>
    <td> 40.0%</td>
    </tr>
    <tr>
    <th rowspan="1" align="CENTER"> White </th>
    <td> dark </td>
    <td> <img src="3.png" height="100" width="100"></td>
    <td> 74.4%</td>
    </tr>
    <tr>
    <th rowspan="1" align="CENTER"> Conclusion </th>
    <td colspan="3"> The Non White chocolate has more cocoa solids </td>
    </tr>
    </table>
    <h2 align= "left">
    <a href="Page2.html">Is Chocolate Healthy?</a>
    </h2>
    </div>
    </CENTER>
    </body>
    </html>

    Code of Page 2
    <!DOCTYPE
    html>
    <html>
    <head>
    <title>Page-02</title>
    <style>
    div {
    width: 800px;
    border: 1px solid grey;
    }
    h2 a {
    color: #4A235A;
    }
    </style>
    </head>
    <body>
    <CENTER>
    <div>
    <h1 align="left">Calculate Health Effect</h1>
    <ul align="left">
    <li>Positive</li>
    <ol>
    <li>Cocoa or dark chocolate may effect circulatory system</li>
    <li>Chocolate may boost cognitive abilities</li>
    <li>Dark chocolate may lower cholestrole level in adults</li>
    <li>According to one Study,chocolate consumption correlates with lower Body
    Mass Index </li>
    <li>Other Possible Effects under base research include anticancer,brain
    stimulator,cough preventor and antidiarrhoeal activities</li>
    </ol>
    <li>Negative</li>
    <ol>
    <li>Chocolates are believed to cause heartburn</li>
    <li>The unconstrained consumption of large quantities of any energy-rich
    food,such as chocolate,without a corresponding increase in activity, iis thought
    to increase the risc of obesity</li>
    <li>Manufecturers may add other fats,suger and milk as well, all of which
    increase the caloric content of chocolate</li>
    <li>Chocolate and cocoa contains moderate or high amount of axalate</li>
    <li>Chocolate obserbs lead from the environment during production, and there
    is a slight concern of mild lead poisoning for some types of chocolate</li>
    </ol>
    </ul>
    <h2 align= "left">
    <a href="Page1.html">Back to type of chocolate</a>
    </h2>
    </div>
    </CENTER>
    </body>
    </html>

    ScreenShots of Page 1&2


    Question No: 3
    Code of Page 1:
    <!DOCTYPE
    html>
    <html>
    <head>
    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    li {
    float: left;
    }
    li {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>Raja Shahbaz Ahmed</a></li>
    <li>82203-2811054-3</a></li>
    </ul>
    <br>
    <br>
    <hr>
    <h1>About me<h1>
    <p style="font-size:11px;">Hy!<br>I am a student of <b>software
    engineering.</b></p>
    <br><br>
    <img style="width:100%;height:100%"src="images\images.jpg" alt="">
    <br><br>
    <a style="font-size:30px;"href="page 2.html">GO to page 2</a>
    </body>
    </html>

    Code of Page 2: All the links which are asked are included in page 2
    <!DOCTYPE
    html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title>page 2</title>
    </head>
    <body>
    <h1>My favourite websites</h1>
    <ol>
    <li><a href="https://www.google.com/">Google.com</a> <br><br></li>
    <li><a href="https://www.freelancer.com/"><img src="images\images.jpg"
    alt=""></a></li>
    </ol>
    <br><br>
    <a style="font-size:30px;"href="page 1.html">Back to home page</a>
    </body>
    </html>

    ScreenShots of Both pages:


    The End

    You might also like