Scribd Logo
Upload

Welcome to Scribd!

  • 21 views

    IKHLAAS

    Uploaded by

    Suhail Malik
    The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    IKHLAAS

    Uploaded by

    Suhail Malik
    21 views10 pages
    The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    21 views10 pages

    IKHLAAS

    Uploaded by

    Suhail Malik
    The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 10

    Program 4 – Write a program to perform hyperlink.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Hyperlink</title>
    </head>
    <body>
    <div >
    <div >
    <h1> It is a example of Hyperlink</h1>
    <p>Here is a <a href="https://chat.openai.com/">link</a> to ChatGPT</p>
    <p>
    And here is another <a href="https://www.netflix.com/in/">link</a> to
    netflix.
    </p>
    </div>
    </div>
    </body>
    </html>

    Output:
    Program 5 – Write a Program to Perform Image Mapping

    <!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>Document</title>
    </head>
    <body>

    <img src="india.jpg" usemap="#image-map" />

    <map name="image-map">
    <area
    target=""alt="Rajathan"title="Rajathan"href="https://rajasthan.gov.in/"coords="93,330,303,4
    95"shape="rect"/>
    </map>

    <map name="image-map"> <area


    target=""alt="Kerla"title="Sikkim"href="https://www.keralatourism.org/"coords="684,386,6
    78,358,693,357,702,363,704,378"shape="rect"/>
    </map>

    <map name="image-map">
    <area target="" alt="Tripura" title="Tripura" href="https://tripura.gov.in/"
    coords="821,486,800,497,786,514,796,530,808,533,814,511,825,507,825,493"
    shape="poly">
    </map>

    <map name="image-map">
    <area target="" alt="Akhand Bharat" title="Akhand Bharat"
    href="https://akhandbharatlive.com/"
    coords="197,448,203,440,209,436,206,429,201,421,201,406,200,394,199,386,203,376,208,3
    70,218,365,225,365,235,364,248,359,259,359,271,354,280,361,297,358,294,342,334,321,37
    2,328,375,344,389,367,393,387,391,394,401,395,414,400,421,402,433,407,443,413,447,418,
    450,426,457,440,459,453,464,462,471,467,492,462,517,457,525,464,521,471,514,484,517,4
    89,525,498,536,503,541,511,542,521,545,534,539,545,521,567,506,555,495,543,486,544,47
    9,542,479,552,478,564,478,576,482,580,494,588,498,593,506,600,510,611,530,694,490,664,
    485,648,466,628,451,613,332,530,332,538,326,570,324,580,338,582,348,600,336,609,310,5
    93,300,579,292,562,289,542,277,517,276,485,266,490,255,484,255,467,241,462,233,452,22
    0,450" shape="poly">
    </map>
    </map>
    </body>
    </html>

    Output
    Experiment No. 7 – Write a program to show embedded Audio &
    Video
    <!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>Document</title>
    </head>
    <body>
    <audio controls>
    <source src="./Pinda Aale Jatt (Dil Diyan Gallan) - Parmish Verma.mp3" />
    </audio>
    <video style="height: 12%;width: 15%;" controls>
    <source src="./pexels-mart-production-7565439-1080x1920-25fps.mp4" />
    </video>
    </body>
    </html>
    Output –
    Experiment 8 – Design a working Calculator using Javascript.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Calculator</title>
    <style>
    .calculator {
    width: 200px;
    margin: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    }

    input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 20px;
    }

    button {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: none;
    outline: none;
    background-color: #f1f1f1;
    color: #333;
    }

    button:hover {
    background-color: #ccc;
    cursor: pointer;
    }

    </style>
    </head>
    <body>
    <div class="calculator">
    <input type="text" id="result" placeholder="0" disabled>
    <button onclick="clearResult()">C</button>
    <button onclick="backspace()"><</button>
    <button onclick="display('/')">/</button>
    <button onclick="display('7')">7</button>
    <button onclick="display('8')">8</button>
    <button onclick="display('9')">9</button>
    <button onclick="display('*')">*</button>
    <button onclick="display('4')">4</button>
    <button onclick="display('5')">5</button>
    <button onclick="display('6')">6</button>
    <button onclick="display('-')">-</button>
    <button onclick="display('1')">1</button>
    <button onclick="display('2')">2</button>
    <button onclick="display('3')">3</button>
    <button onclick="display('+')">+</button>
    <button onclick="display('0')">0</button>
    <button onclick="display('.')">.</button>
    <button onclick="calculate()">=</button>
    </div>

    <script >
    var result = document.getElementById("result");

    function display(value) {
    result.value += value;
    }
    function clearResult() {
    result.value = "";
    }
    function backspace() {
    result.value = result.value.slice(0, -1);
    }
    function calculate() {
    result.value = eval(result.value);
    }
    </script>
    </body>
    </html>

    Output
    Experiment 9: Registration Form Validation on Email, Name and Id.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Registration Form Validation</title>
    <style>
    .container {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

    h1 {
    text-align: center;
    margin-bottom: 20px;
    }
    label {
    display: block;
    margin-bottom: 5px;
    }
    input[type="text"],
    input[type="email"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    }

    button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>Registration Form</h1>
    <form id="registrationForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="id">ID:</label>
    <input type="text" id="id" name="id" required>

    <button type="submit">Register</button>
    </form>
    </div>

    <script >
    var registrationForm = document.getElementById("registrationForm");
    var nameInput = document.getElementById("name");
    var emailInput = document.getElementById("email");
    var idInput = document.getElementById("id");

    registrationForm.addEventListener("submit", function(event) {
    event.preventDefault();
    if (validateName() && validateEmail() && validateId()) {
    alert("Registration Successful!");
    registrationForm.reset();
    }
    });

    function validateName() {
    var name = nameInput.value;
    var nameRegex = /^[a-zA-Z ]+$/;
    if (!nameRegex.test(name)) {
    alert("Invalid name. Only alphabets and spaces allowed.");
    return false;
    }
    return true;
    }
    function validateEmail() {
    var email = emailInput.value;
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
    alert("Invalid email address.");
    return false;
    }
    return true;
    }
    function validateId() {
    var id = idInput.value;
    var idRegex = /^\d{9}$/;
    if (!idRegex.test(id)) {
    alert("Invalid ID. Must be a 9-digit number.");
    return false;
    }
    return true;
    }
    </script>
    </body>
    </html>
    Output-:
    Experiment 10: - Embed Geolocation in your Page and it should update
    your updated location.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Geolocation Example</title>
    </head>

    <body>
    <h2>My Current Location:</h2>
    <p>Latitude: <span id="latitude"></span></p>
    <p>Longitude: <span id="longitude"></span></p>

    <script>
    // Define a function to update the user's location
    function updateLocation(position) {
    // Extract the latitude and longitude from the position object
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    // Update the corresponding HTML elements with the latitude and longitude
    document.getElementById("latitude").innerHTML = latitude;
    document.getElementById("longitude").innerHTML = longitude;
    }

    // Check if the browser supports geolocation


    if (navigator.geolocation) {
    // If it does, call the getCurrentPosition method to get the user's current location
    navigator.geolocation.getCurrentPosition(updateLocation);
    } else {
    // If geolocation is not supported, display an error message
    alert("Geolocation is not supported by this browser.");
    }
    </script>
    </body>
    </html>

    Output
    Experiment 11 - Write an HTML page that contains a selection box with a list of 5 countries,
    when the user selects a country, its capital should be printed next to the list; Add CSS to
    customize the properties of the font of the capital (color, bold and font size).

    <!DOCTYPE html>
    <html>
    <head>
    <title>Country Capital</title>
    <style>
    /* CSS for capital text */
    #capital {
    color: navy;
    font-weight: bold;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <label for="countries">Select a country:</label>
    <select id="countries" onchange="showCapital()">
    <option value="">--Please choose a country--</option>
    <option value="Australia">Australia</option>
    <option value="India">India</option>
    <option value="France">France</option>
    </select>
    <p>Capital: <span id="capital"></span></p>
    <script>
    function showCapital() {
    var country = document.getElementById("countries").value;
    var capital = "";
    switch (country) {
    case "Australia":
    capital = "Canberra";
    break;
    case "France":
    capital = "Paris";
    break;
    break;
    case "India":
    capital = "New Delhi";
    break;
    default:
    capital = "";
    }
    document.getElementById("capital").innerHTML = capital;
    }
    </script>
    </body>
    </html>
    Output:

    You might also like