Scribd Logo
Upload

Welcome to Scribd!

  • CSE01606610, MD Altaf Ali Shiblu

    Uploaded by

    b n s bhatiary
    19 views17 pages
    web technology

    Original Title

    CSE01606610, Md Altaf Ali Shiblu

    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
    web technology

    Copyright:

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

    CSE01606610, MD Altaf Ali Shiblu

    Uploaded by

    b n s bhatiary
    web technology

    Copyright:

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

    Report

    On

    Develop a mini website that contains image, list, table and form in distinct pages including
    a homepage

    Course Code: CSE-434

    Course Title: Web Technology Sessional

    Report No: 01

    Date of Submission: 03.03.2021

    Submitted To

    Mohammad Morshed Rana

    Lecturer

    Department of CSE

    Port City International University

    Submitted By

    Md Altaf Ali Shiblu

    ID No: CSE 01606610

    Program: B.Sc. In CSE

    Batch: CSE 16 EA

    1
    Topic: Develop a mini website that contains image, list, table and form in distinct pages
    including a homepage

    Solution:

    Source code of home page:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Home</title>

    <style>

    body{

    background-color: green;

    margin-top: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

    margin-left: 20px;

    h2{

    color:yellow;

    text-align: center;

    background-color: blue;

    a{

    text-decoration: none;

    color:white;

    border:10px;

    border-style: groove;

    2
    border-top-color: red;

    border-left-color: red;

    border-bottom-color: yellow;

    border-right-color: yellow;

    padding: 10px;

    margin-top: 20px;

    margin-left: 30px;

    p{

    color:white;

    direction:ltr;

    text-align: center;

    word-spacing:30px;

    </style>

    </head>

    <h2>Home</h2> <br>

    <body>

    <div align="center">

    <a href="image.html">Image</a>

    <a href="table.html">Table</a>

    <a href="list.html">List</a>

    <a href="form.html">Form</a>

    </div>

    <br>

    <p>Here I try to link same page & can visit that's pages from here</p>

    </body>

    3
    </html>

    Output:

    4
    Source code of image page:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Image</title>

    <style>

    body{

    background-color: lightblue;

    margin-top: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

    margin-left: 20px;

    h2{

    color: red;

    text-align: center;

    background-color: lightyellow;

    </style>

    </head>

    <body>

    <h2>Night's Wallpaper</h2> <br>

    <div>

    <img src="img1.jpg" alt="image 1" height="500px" width="650px">

    <img src="img2.jpg" alt="image 2" height="500px" width="650px">

    5
    </div>

    </body>

    </html>

    Output:

    6
    Source code of table page:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Table</title>

    <style>

    body{

    background-color: lightgrey;

    margin-top: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

    margin-left: 20px;

    h2{

    color:white;

    text-align: center;

    background-color: black;

    table{

    color:black;

    background-color: lightblue;

    border:8px;

    border-style: groove;

    border-top-color: yellow;

    border-left-color: red;

    border-bottom-color: green;

    7
    border-right-color: blue;

    padding: 10px;

    td{

    border-style: dashed;

    padding: 10px;

    </style>

    </head>

    <body>

    <h2>Here, studemt info table</h2>

    <table align="center" border='2'>

    <caption> Student Info</caption>

    <tr>

    <th colspan="4"> Info</th>

    </tr>

    <tr>

    <th>Sl</th>

    <th>Name</th>

    <th>Age</th>

    <th>Optional Sub</th>

    </tr>

    <tr>

    <td>1</td>

    <td>Ali</td>

    <td>24</td>

    <td rowspan="2">Higher Math</td>

    8
    </tr>

    <tr>

    <td>2</td>

    <td>Altaf</td>

    <td>23</td>

    </tr>

    <tr>

    <td>3</td>

    <td>Shiblu</td>

    <td>25</td>

    <td rowspan="4">Biology</td>

    </tr>

    <tr>

    <td>4</td>

    <td>Altaf ali </td>

    <td>23</td>

    </tr>

    <tr>

    <td>5</td>

    <td> M A A Shiblu</td>

    <td>25</td>

    </tr>

    <tr>

    <td>6</td>

    <td>Altaf Shiblu </td>

    <td>23</td>

    9
    </tr>

    </table>

    </body>

    </html>

    Output:

    10
    Source code of list page:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>List</title>

    <style>

    body{

    background-color: lightgreen;

    margin-top: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

    margin-left: 20px;

    h2{

    color:yellow;

    text-align: center;

    background-color: red;

    ol{

    color:green;

    background-color: blue;

    color: lightyellow;

    </style>

    </head>

    <h2>Some Place Are Listed Here</h2>

    11
    <body>

    <div>

    <ol type='A'>

    <li>Dhaka</li>

    <ol type='1'>

    <li>Dhaka</li>

    <ul>

    <li>Nababganj</li>

    <li>Keraniganj</li>

    </ul>

    <li>Gazipur</li>

    <ul>

    <li>Gazipur City Corporation</li>

    <li>Sreepur Upazila</li>

    </ul>

    </ol>

    <li>Chittagong</li>

    <ol type='1'>

    <li>Cox's Bazar</li>

    <ul>

    <li>Ukhia</li>

    <li>Shat kaniya</li>

    </ul>

    <li>Chittagong</li>

    <ul>

    <li>Pahartali</li>

    <li>Agrabad</li>

    12
    </ul>

    </ol>

    </ol>

    </div>

    </html>

    Output:

    13
    Source code of form page:

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Form</title>

    <style>

    body{

    background-color: lightgrey;

    margin-top: 30px;

    margin-right: 20px;

    margin-bottom: 30px;

    margin-left: 20px;

    h2{

    color:white;

    text-align: center;

    background-color: black;

    form{

    color:black;

    background-color: lightblue;

    border:8px;

    padding: 10px;

    table{

    background-color: lightblue;

    14
    border:4px;

    padding: 10px;

    border-style: dotted ;

    td{

    color:green;

    padding: 10px;

    </style>

    </head>

    <body>

    <h2>This is form</h2>

    <table align="center">

    <form action="">

    <tr>

    <td><label>Name</label></td>

    <td><input type="text" placeholder="enter your name"></td>

    </tr>

    <br>

    <tr>

    <td><label>Email</label></td>

    <td><input type="email" placeholder="enter your email"></td>

    </tr>

    <br>

    <tr>

    <td><label>Birthdate</label></td>

    <td><input type="date" placeholder="enter your birthdate"></td>

    15
    </tr>

    <br>

    <tr>

    <td><label>Gender</label></td>

    <td>

    <select name="cars" id="cars" form="carform">

    <option value="hidden">Select</option>

    <option value="male">Male</option>

    <option value="female">Female</option>

    <option value="other">Other</option>

    </select>

    </td>

    </tr>

    <br>

    <tr>

    <td><label>Comment</label></td>

    <td><textarea placeholder="if any comment"></textarea></td>

    </tr>

    <br>

    <tr>

    <td align="right" colspan="2"><input type="button" value="Submit"></td>

    <td align="right" colspan="2"><input type="reset" value="Reset"></td>

    </tr>

    <br>

    </form>

    </table>

    </body>

    16
    </html>

    Output:

    17

    You might also like