Scribd Logo
Upload

Welcome to Scribd!

  • Lab 3

    Uploaded by

    Jawad Qamar
    3 views10 pages

    Original Title

    lab 3

    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
    3 views10 pages

    Lab 3

    Uploaded by

    Jawad Qamar

    Copyright:

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

    LAB 3

    Lab Task:
    1. You are going to design the page given below
    2. Use CSS for styling of buttons, shapes, images, colors and other formatting.
    3. There should be only one html. And upon clicking every button content must be
    changed using java script.
    4. Please consult lectures for more help.
    5. Layout of Abous will be similar to home just the change of content.
    6. Gallery layout must be having Grid of images. Sample is shown below

    7. Above image is gallery layout. The page you are going to design is shown below.
    8. Sample code have been explained in lower section of the manual.
    Being in Pakistan the major issue that a woman face is the
    environment of the industry which includes behavior of
    management who do not see a woman equally fit for the job as men.
    Women a being paid less then men when it comes to technical jobs
    and there are less percentage of woman being hired in technical
    jobs. Due to family responsibilities women are not being considered
    as responsible as men in their professional career. Due to these
    reasons many of our women loose confidence in their selves that
    they can equally work alongside men. And they can do multitasking
    by being equally responsible towards their family and their career as
    well. Being part of the solution, I want to motivate all the girls
    outside that they can perform well in both fields either home making
    or career by joining tech industry myself and build my career as
    software engineer. There is a huge need of awareness that girls are
    not lesser then men and they can support them equally in both
    areas. Although with the passage of time things have improved a lot
    in education sector as well as at industry level.
    Round Corner Image

    Code:
    <style>

    #rcorners1 {

    border-radius: 25px;

    background: #73AD21;

    padding: 20px;

    width: 200px;

    height: 150px;

    </style>

    Adding Button to HTML


    Code:

    <button type="button" onclick="any function call">Click Me!</button>

    Output:
    Calling a Function in java script

    Code:
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>
    </head>

    <body>

    <h1>A Web Page</h1>


    <p id="demo">A Paragraph</p>
    <button type="button"

    onclick="myFunction()">Try it</button>

    </body>
    </html>

    Adding Two Columns in Html Page

    Code:
    <!DOCTYPE html>

    <html>

    <head>

    <style>
    *{

    box-sizing: border-box;

    /* Create two equal columns that floats next to each other */

    .column {

    float: left;

    width: 50%;

    padding: 10px;

    height: 300px; /* Should be removed. Only for demonstration */

    /* Clear floats after the columns */

    .row:after {

    content: "";

    display: table;

    clear: both;

    </style>

    </head>

    <body>

    <h2>Two Equal Columns</h2>


    <div class="row">

    <div class="column" style="background-color:#aaa;">

    <h2>Column 1</h2>

    <p>Some text..</p>

    </div>

    <div class="column" style="background-color:#bbb;">

    <h2>Column 2</h2>

    <p>Some text..</p>

    </div>

    </div>

    </body>

    </html>

    Output:
    Adding Image Grid to Html
    Code:

    <!DOCTYPE html>

    <html>

    <style>

    *{

    box-sizing: border-box;

    body {

    margin: 0;

    font-family: Arial;

    .header {

    text-align: center;

    padding: 32px;

    /* Create two equal columns that floats next to each other */

    .column {

    float: left;

    width: 30%;

    padding: 10px;
    }

    .column img {

    margin-top: 12px;

    /* Clear floats after the columns */

    .row:after {

    content: "";

    display: table;

    clear: both;

    </style>

    <body>

    <!-- Header -->

    <div class="header">

    <h1>Image Grid</h1>

    </div>

    <!-- Photo Grid -->

    <div class="row">

    <div class="column">

    <img src="wedding.jpg" style="width:100%">


    <img src="rocks.jpg" style="width:100%">

    <img src="falls2.jpg" style="width:100%">

    <img src="paris.jpg" style="width:100%">

    <img src="nature.jpg" style="width:100%">

    <img src="mist.jpg" style="width:100%">

    <img src="paris.jpg" style="width:100%">

    </div>

    <div class="column">

    <img src="underwater.jpg" style="width:100%">

    <img src="ocean.jpg" style="width:100%">

    <img src="wedding.jpg" style="width:100%">

    <img src="mountainskies.jpg" style="width:100%">

    <img src="rocks.jpg" style="width:100%">

    <img src="underwater.jpg" style="width:100%">

    </div>

    <div class="column">

    <img src="wedding.jpg" style="width:100%">

    <img src="rocks.jpg" style="width:100%">

    <img src="falls2.jpg" style="width:100%">

    <img src="paris.jpg" style="width:100%">

    <img src="nature.jpg" style="width:100%">

    <img src="mist.jpg" style="width:100%">

    <img src="paris.jpg" style="width:100%">

    </div>
    </div>

    </body>

    </html>

    Output:

    You might also like