Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Pradhumna Biswas, Id 200311010

    Uploaded by

    সিদ্ধার্থ বিশ্বাস

    Copyright:

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

    You might also like

    Pradhumna Biswas, Id 200311010

    Uploaded by

    সিদ্ধার্থ বিশ্বাস
    5 views5 pages

    Original Title

    Pradhumna Biswas,Id 200311010

    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
    Download as pdf or txt
    5 views5 pages

    Pradhumna Biswas, Id 200311010

    Uploaded by

    সিদ্ধার্থ বিশ্বাস

    Copyright:

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

    University Of Creative Technology

    Chittagong

    LAB REPORT - 02
    Dept Of CSE
    6th Semester

    Web Programming Laboratory


    CSE-326
    Submission Date: 28-08-2022

    Submitted To Submitted By

    Suvadra Barua Pradhumna Biswas

    Lecturer, ID: 200311010

    Faculty of CSE. Semester: 6th


    University of Creative Technology, Chittagong Level: 3, Autumn-2022
    Experiment NO: 2

    Problem Statement: Design a page layout using HTML and CSS.

    Objective : Here, In this experiment, we will be going to design a HTML page layout
    which has 7 sections and different backgrounds. Additionally, we will learn how to
    use the external CSS file.

    Code:

    HTML:

    !DOCTYPE html>
    <html>

    <head>
    <title>Lab Report Two</title>
    <link rel="stylesheet"
    href="C:\Users\Hp\Documents\html\CSS\web.css">
    </head>

    <body>
    <p class="paragraph" id="tomato">Tomato</p>
    <p class="paragraph" id="orange">Orange</p>
    <p class="paragraph" id="dodgerblue">DodgerBlue</p>
    <p class="paragraph" id="mediumseagreen">MediumSeaGreen</p>
    <p class="paragraph" id="gray">Gray</p>
    <p class="paragraph" id="slateblue">SlateBlue</p>
    <p class="paragraph" id="violet">Violet</p>

    </body>

    </html>
    CSS:

    body {

    margin: 30px 30px;


    }

    p.paragraph {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    padding: 22px 0 22px 0;
    }

    #tomato {
    background-color: tomato;
    }

    #orange {
    background-color: orange;
    }

    #dodgerblue {
    background-color: dodgerblue;
    }

    #mediumseagreen {
    background-color: mediumseagreen;
    }

    #gray {
    background-color: gray;
    }

    #slateblue {
    background-color: slateblue;
    }

    #violet {
    background-color: violet;
    }
    Output:
    Description:
    ● We have created a HTML file named as <>Web.css and a CSS file named
    as #web.css
    ● Then we linked the external file using link tag <link rel="stylesheet"
    type="text/css" href="./web.css">

    ● After that we have Added a <div> <div/> tag. In div we have added 7
    <p><p/> tags and finnaly added class names accordingly: Tomato, Orange
    DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet.
    ● In external CSS ,firstly we have import a google fonts.
    ● Then we set the body display: flex; and the background:#ededed; and justify-
    content: center;
    ● So,now we will set up the div and p styles.
    ● In the end, we will be able to set the different backgrounds for each section.

    Conclusion: By this experiment, we have learned about the process of using


    external CSS and create a HTML page layout.

    You might also like