Scribd
Upload
22 views

Web Technology Lab

This document contains the source code for an HTML table displaying a menu with items, descriptions, and prices. The table includes a header, body, and rows for 5 menu items - burger, grilled cheese, classic burger, chocolate cake, and fish and chips. Styling is added to format the table, highlight the header, and alternate row colors.

Uploaded by

Surendiran Surendiran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

Web Technology Lab

This document contains the source code for an HTML table displaying a menu with items, descriptions, and prices. The table includes a header, body, and rows for 5 menu items - burger, grilled cheese, classic burger, chocolate cake, and fish and chips. Styling is added to format the table, highlight the header, and alternate row colors.

Uploaded by

Surendiran Surendiran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

PONDICHERRY UNIVERSITY

(A CENTRAL UNIVERSITY)
R. Venkataraman Nagar, Kalapet,
Puducherry – 605014.

School of Engineering and Technology


Department of Computer Science
Integrated M.Sc. Programme

COMPUTER SCIENCE
CSIG 363 - Practical VI – Web Technology Lab

NAME : SURENDIRAN B
REGISTER NO. : 20384121
DEPARTMENT : COMPUTER SCIENCE
SEMESTER : VI
PONDICHERRY UNIVERSITY
(A CENTRAL UNIVERSITY)
R. Venkataraman Nagar, Kalapet,
Puducherry – 605014.

School of Engineering and Technology


Department of Computer Science
Integrated M.Sc. Programme

BONAFIDE CERTIFICATE

This is to certify that this is a Bonafide record of practical work done by


SURENDIRAN.B with Register Number 20384121 of Integrated M.Sc.
Computer Science in Semester VI during the year 2022-2023.

Faculty-In-Charge

Submitted for the practical examination held on in the


Department of Computer Science, Pondicherry University, Pondicherry –
605014

Internal Examiner External Examiner


Sl. No. Title Date Page No.

9
Source Code: (HTML)

<!DOCTYPE html>
<html>
<head>
    <title>Favorite Things</title>
</head>
<body>
    <h1>My Favorite Things</h1>

    <h2>Favorite Books:</h2>
    <ul>
      <li>The Catcher in the Rye</li>
      <li>To Kill a Mockingbird</li>
      <li>The Great Gatsby</li>
    </ul>

    <h2>Favorite Movies:</h2>
    <ol>
      <li>The Shawshank Redemption</li>
      <li>The Godfather</li>
      <li>The Dark Knight</li>
    </ol>

    <h2>Favorite Foods:</h2>
    <ul>
      <li>Pizza</li>
      <li>Sushi</li>
      <li>Tacos</li>
    </ul>
</body>
</html>
OUTPUT:
Source Code:(HTML)

<!DOCTYPE html>
<html>
  <head>
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form>
      <fieldset>
        <label>Enter Your First Name: <input type="text" name="first-
name" required /></label>
        <label>Enter Your Last Name: <input type="text" name="last-
name" required /></label>
        <label>Enter Your Email: <input type="email" name="email"
required /></label>
        <label>Create a New Password: <input type="password"
name="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <label><input type="radio" name="account-type" class="inline"
/> Personal Account</label>
        <label><input type="radio" name="account-type" class="inline"
/> Business Account</label>
        <label>
          <input type="checkbox" name="terms" class="inline" required
/> I accept the <a>terms and conditions</a>
        </label>
      </fieldset>
      <fieldset>
        <label>Upload a profile picture: <input type="file"
name="file" /></label>
        <label>Input your age (years): <input type="number" name="age"
min="13" max="120" />
        </label>
        <label>How did you hear about us?
          <select name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label>Provide a bio:
          <textarea name="bio" rows="3" cols="30" placeholder="I like
coding on the beach..."></textarea>
        </label>
      </fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

(CSS)

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
}

fieldset:not(:last-of-type) {
  border-bottom: 3px solid #3b3b4f;
}

label {
  display: block;
  margin: 0.5rem 0;
}
input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}
input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}
.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}
input[type="file"] {
  padding: 1px 2px;
}

a {
  color: #dfdfe2;
}
Output:
Source Code:
<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        width: 50%;
        margin: auto;
      }
      th, td {
        text-align: center;
        padding: 8px;
      }
      th {
        background-color: #009879;
        color: white;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Time</th>
        <th>Activity</th>
      </tr>
      <tr>
        <td>8:00-9:00</td>
        <td>Yoga</td>
      </tr>
      <tr>
        <td>9:00-10:00</td>
        <td>Breakfast</td>
      </tr>
      <tr>
        <td>10:00-11:00</td>
        <td>Workout</td>
      </tr>
      <tr>
        <td>11:00-12:00</td>
        <td>Shower</td>
      </tr>
      <tr>
        <td>12:00-1:00</td>
        <td>Lunch</td
</tr>
      <tr>
        <td>1:00-2:00</td>
        <td>Study</td>
      </tr>
    </table>
  </body>
</html>
Output:
Source Code:
(HTML)
<!DOCTYPE html>
<html>
<head>
   <title>Job Entry Form</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <h1>Job Entry Form</h1>
   <form action="#" method="post">
      <label for="fullname">Full Name</label>
      <input type="text" id="fullname" name="fullname" required>
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>
      <label for="phone">Phone Number</label>
      <input type="tel" id="phone" name="phone" required>
      <label for="resume">Upload Resume</label>
      <input type="file" id="resume" name="resume"
accept=".pdf,.doc,.docx" required>
      <label for="position">Position Applying For</label>
      <select id="position" name="position" required>
         <option value="" disabled selected>Select position</option>
         <option value="developer">Developer</option>
         <option value="designer">Designer</option>
         <option value="manager">Manager</option>
      </select>
      <label for="salary">Salary Requirements</label>
      <input type="number" id="salary" name="salary" required>

      <label for="start-date">Available Start Date</label>


      <input type="date" id="start-date" name="start-date" required>
      <button type="submit">Submit</button>
   </form>
</body>
</html>
(CSS)
form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
}
h1 {
    text-align: center;
}
label {
    display: block;
    margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: none;
    background-color: #fff;
}
input[type="file"] {
    cursor: pointer;
}
textarea {
    height: 150px;
}
button[type="submit"] {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #007bff;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
button[type="submit"]:hover {
    background-color: #0062cc;}
OUTPUT:
Source Code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Table</title>
      <style>
         table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 20px;
         }
         th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
         }
         th {
            background-color: #f2f2f2;
         }
         tr:nth-child(even) {
            background-color: #f2f2f2;
         }
      </style>
   </head>
   <body>
      <table>
         <thead>
            <tr>
               <th>Item</th>
               <th>Description</th>
               <th>Price</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Burgur</td>
               <td>Hamburgur</td>
               <td>Rs.10.00</td>
            </tr>
            <tr>
               <td>Grilled Cheese</td>
               <td>Melted cheddar cheese between two slices of toasted
bread</td>
               <td>Rs.20.00</td>
            </tr>
            <tr>
               <td>Classic Burger</td>
               <td>Beef patty, lettuce, tomato, onion, and special
sauce on a bun</td>
               <td>Rs.15.00</td>
            </tr>
            <tr>
               <td>Chocolate Cake</td>
               <td>Moist chocolate cake with chocolate frosting and
whipped cream</td>
               <td>Rs.12.50</td>
            </tr>
            <tr>
               <td>Fish and Chips</td>
               <td>Beer-battered cod with fries and tartar sauce</td>
               <td>Rs.18.75</td>
            </tr>
            <tr>
               <td>Caesar Salad</td>
               <td>Romaine lettuce, croutons, parmesan cheese, and
caesar dressing</td>
               <td>Rs.25.00</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>
OUTPUT:
Source Code:
(html)
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
<div class="alert">
  <h2>Hey! Read Me...</h2>
  <p>This is an example of what you can do with pure css to style
radio buttons or checkboxes. If you are looking a more flexible &
mordern way to style radio buttons on forms</p>
</div>

<div class="container">
 
  <h2>Your favorite thing in the world:</h2>
 
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
   
    <div class="check"></div>
  </li>
 
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Bacon</label>
   
    <div class="check"><div class="inside"></div></div>
  </li>
 
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>
   
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

<div class="signature">
  <p>Made with <i class="much-heart"></i> by <a
href="https://codepen.io/AngelaVelasquez">Surendiran</a></p>
</div>
</body>
</html>
External CSS
@import url('https://fonts.googleapis.com/css?family=Lato');

body, html{
  height: 100%;
  background: #222222;
  font-family: 'Lato', sans-serif;
}

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

h2 {
  color: #AAAAAA;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
  color: #FFFFFF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #FFFFFF;
}

ul li .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
  left: 5px;
  margin: auto;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}

.signature {
  margin: 10px auto;
  padding: 10px 0;
  width: 100%;
}

.signature p{
  text-align: center;
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 0.85em;
  color: #AAAAAA;
}

.signature .much-heart{
  display: inline-block;
  position: relative;
  margin: 0 4px;
  height: 10px;
  width: 10px;
  background: #AC1D3F;
  border-radius: 4px;
  -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.signature .much-heart::before,
.signature .much-heart::after {
    display: block;
  content: '';
  position: absolute;
  margin: auto;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #AC1D1D;
  top: -4px;
}

.signature .much-heart::after {
  bottom: 0;
  top: auto;
  left: -4px;
}

.signature a {
  color: #AAAAAA;
  text-decoration: none;
  font-weight: bold;
}

.alert {
  box-sizing: border-box;
  background-color: #BDFFE1;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 20px 40px;
  color: #333;
}

.alert h2 {
  font-size: 22px;
  color: #232323;
  margin-top: 0;
}

.alert p {
  line-height: 1.6em;
  font-size:18px;
}

.alert a {
  color: #232323;
  font-weight: bold;
}
OUTPUT:
Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <title>Digital clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="time">
        <div class="circle" style="--clr:#ff2972;">
            <div class="dots hr_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="hh"></circle>
            </svg>
            <div id="hours">00</div>
        </div>
        <div class="circle" style="--clr:#fee800;">
            <div class="dots min_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="mm"></circle>
            </svg>
            <div id="minutes">00</div>
        </div>
        <div class="circle" style="--clr:#04fc43;">
            <div class="dots sec_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="ss"></circle>
            </svg>
            <div id="seconds">00</div>
        </div>
        <div class="ap">
            <div id="ampm">AM</div>
        </div>
    </div>

    <script>

        setInterval (() => {


        let hours = document.getElementById('hours')
        let minutes = document.getElementById('minutes')
        let seconds = document.getElementById('seconds')
        let ampm = document.getElementById('ampm')

        let hh = document.getElementById('hh')
        let mm = document.getElementById('mm')
        let ss = document.getElementById('ss')

        let hr_dot = document.querySelector('.hr_dot');


        let min_dot = document.querySelector('.min_dot');
        let sec_dot = document.querySelector('.sec_dot');

        let h = new Date().getHours();


        let m = new Date().getMinutes();
        let s = new Date().getSeconds();
        let a = h >= 12 ? "PM" : "AM";

        //convert 24hours clock to 12hours clock


        if(h > 12){
            h = h - 12;
        }
        //add zero before single digit numvers
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        hours.innerHTML = h + "<br><span>Hours</span>";
        minutes.innerHTML = m + "<br><span>Minutes</span>";
        seconds.innerHTML = s + "<br><span>Seconds</span>";
        ampm.innerHTML = a;

        hh.style.strokeDashoffset = 440 - (440*h)/12;


        mm.style.strokeDashoffset = 440 - (440*m)/60;
        ss.style.strokeDashoffset = 440 - (440*s)/60;

        hr_dot.style.transform = `rotate(${h*30}deg)`
        min_dot.style.transform = `rotate(${m*6}deg)`
        sec_dot.style.transform = `rotate(${s*6}deg)`

        })

    </script>
   
</body>
</html>
(CSS):
@import url('https://fonts.googleapis.com/css?family=Poppins:
200,300,400,500,600,700,800,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2f363e;
}

#time{
    display: flex;
    gap: 40px;
    color: #fff;
}

#time .circle{
    position: relative;
    width: 150px;
    height:  150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#time .circle svg {


    position: relative;
    width: 150px;
    height: 150px;
    transform: rotate(270deg);
}

#time .circle svg circle {


    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #191919;
    stroke-width: 4;
    transform: translate(5px, 5px);
}

#time .circle svg circle:nth-child(2) {


    stroke: var(--clr);
    stroke-dasharray: 440;
}

#time div {
    position: absolute;
    text-align: center;
    font-weight: 500;
    font-size: 1.5em;
}

#time div span {


    position: absolute;
    transform: translateX(-50%) translateY(-10px);
    font-size: 0.35em;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#time .ap{
    position: relative;
    font-size: 1em;
    transform: translate(-20px);
}

.dots{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.dots::before {
    content: '';
    position: absolute;
    top: -3px;
    width: 15px;
    height: 15px;
    background: var(--clr);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
}
OUTPUT:
Source Code:
(HTML)
<!DOCTYPE html>
<html>
  <head>
    <title>Palindrome Checker</title>
  </head>
  <body>
    <h1>Palindrome Checker</h1>
    <label for="input">Enter a word:</label>
    <input type="text" id="input" />
    <button onclick="checkPalindrome()">Check</button>
    <p id="result"></p>
    <script src="palindrom or not.js"></script>
  </body>
</html>

(Java Script)

// program to check if the string is palindrome or not


function checkPalindrome() {
  const input = document.getElementById("input").value;
  const reversed = input.split("").reverse().join("");
  const result = document.getElementById("result");
  if (input === reversed) {
    result.innerText = `${input} is a palindrome!`;
  } else {
    result.innerText = `${input} is not a palindrome.`;
  }
}
OUTPUT:
SOURCE CODE:
(HTML,JS)
<!DOCTYPE html>
<html>
<head>
    <title>Calculator App</title>
</head>
<body>
    <h1>Calculator App</h1>
    <input type="text" id="num1">
    <input type="text" id="num2">
    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
    <button onclick="multiply()">Multiply</button>
    <button onclick="divide()">Divide</button>
    <p id="result"></p>

    <script>
        function add() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerHTML = "Result: " + result;
        }

        function subtract() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 - num2;
            document.getElementById("result").innerHTML = "Result: " + result;
        }

        function multiply() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 * num2;
            document.getElementById("result").innerHTML = "Result: " + result;
        }

        function divide() {
            var num1 = parseFloat(document.getElementById("num1").value);
            var num2 = parseFloat(document.getElementById("num2").value);
            var result = num1 / num2;
            document.getElementById("result").innerHTML = "Result: " + result;
        }
    </script>
</body>
</html>
OUTPUT:

You might also like