Scribd Logo
Upload

Welcome to Scribd!

  • WT Assi2

    Uploaded by

    om.lohade23
    15 views10 pages

    Original Title

    wt assi2

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, 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 DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views10 pages

    WT Assi2

    Uploaded by

    om.lohade23

    Copyright:

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

    Practical No : 2

    Name : Lohade Om Manoj


    Roll No : 78

    Title : HTML Tags

    Program :

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment no.2</title>

    </head>

    <body background="C:\Users\OM\OneDrive\Pictures\Saved Pictures\background.jpeg">


    <h1 id="1">Lab Assignment No 2- HTML tags</h1>

    <h2 style="text-align: center;">Formatting Elements</h2>


    <p>
    <b>This is Bold text.</b><br>
    <strong> This is Important text. </strong><br>
    <i> This is Italic text. </i><br>
    <em> This text is Emphasized. </em><br>
    Focus on your <mark>Goals.</mark><br>
    <small> This is Smaller text.</small><br>
    My favorite trade is <del>Civil Engineering</del> Information
    Technology.<br>
    My favorite trade is <del>Civil Engineering</del> <ins>Information
    Technology.</ins>.<br>
    This is Subscripted. Symbol of Water = H<sub>2</sub>O<br>
    This is Superscripted. Maths Equation = (a+b)<sup>2</sup> =
    a<sup>2</sup>+2ab+b<sup></sup>
    </p>
    <hr>

    <h2 style="text-align: center;">Quotation and Citation Elements</h2>


    <p>Here is a quote from WWF's website:</p>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    For 60 years, WWF has worked to help people and nature thrive. As the
    world's leading conservation organization, WWF works in nearly 100 countries. At
    every level, we collaborate with people around the world to develop and deliver
    innovative solutions that protect communities, wildlife, and the places in which
    they live.
    </blockquote>
    <p>
    WWF's goal is to: <q>Build a future where people live in harmony with
    nature.</q><br>
    The <abbr title="Web Technology">WT</abbr> course helps in learning Web
    Development.<br>
    <cite>National anthem of India</cite> was composed by Rabindranath Tagore
    in the year 1911.
    </p>
    <address>
    Vishvakarma Institute of Technology<br>
    Visit us at: https://www.vit.edu/<br>
    Upper Indira Nagar, Bibewewadi<br>
    Pune 411037
    </address>
    <p>This line will be written from right to left<br>
    <bdo dir="rtl">This line will be written from right to left</bdo></p>
    <hr>

    <!-- This is Comment


    Comments are not Displayed in yhe browswe -->

    <h2 style="text-align: center;">Color</h2>


    <p style="background-color: blue;">"Education opens doors to endless
    possibilities."</p>
    <p style="color: red;">This is Red color</p>
    <p style="color: yellow;">This is Yello color</p>
    <p style="text-align: center;">RGB : Red , Green , blue</p>
    <p style="border: 3px solid green;">Border is green </p>
    <p style="border: 3px solid orange;">Border is orange </p>
    <p style="background-color:rgb(132, 49, 199);">rgb(132, 49, 199)color made by
    using rgb values</p>
    <p style="background-color:rgb(99,99,99);">rgb(99,99,99)Shade of gray</p>
    <p style="background-
    color:rgb(245,98,69,0.2);">rgba(245,98,69,0.2)Transparent using alpha
    parameter</p>
    <p style="text-align: center;">Hex : Hexadecimal Color</p>
    <p style="background-color:#6a5acd;">#6a5acd</p>
    <p style="text-align: center;"> HSL : Hue, Saturation, Lightness</p>
    <p style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</p>
    <p style="background-color:hsla(9, 100%, 64%, 0.3);">hsla(9, 100%, 64%, 0.3)
    Giving Transprancy using alpha</p>
    <hr>

    <h2 style="text-align: center;">Links</h2>


    <a href="https://www.youtube.com/">Visit Youtube.com</a>
    <p>To open a link in new browser use target Atttribute <a
    href="https://www.youtube.com/"target="_blank">Visit Youtube</a></p>
    <p>Absolute URLs<a href="https://www.w3.org/">W3C</a></p>
    <p>Relativr URLs<a href="html_images.asp">HTML Images</a></p>
    <img src="D:\Addimition\image.webp" alt="HTML tutorial"
    style="width:42px;height:42px;"><br>
    <a href="mailto:admissions@vit.edu.com">Send email</a><br>
    <button onclick="document.location='default.asp'">HTML Tutorial</button>
    <P>Link to a page located in the html folder on the current web site</P>
    <a href="Om.html">Page</a>
    <style>
    a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
    }
    a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
    }
    a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
    }
    a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
    }
    </style>
    <p>color change to link=green , visited= pink, hover=red, active=yello</p>
    <p>styling link a button</p>
    <p><a href="#1">Jump to Start</a></p>

    <h2 style="text-align: center;">Image</h2>


    <p>Image from same folder</p>
    <img src="mumbai taj.webp" alt="mumbai taj" width="200" height="230">
    <p>Image from Another Folder</p>
    <img src="C:\Users\OM\OneDrive\Pictures\canva\pro bgmi.jpg" alt="Pro bgmi"
    width="128" height="128">
    <p>Image from another server/website</p>
    <img src="https://www.w3schools.com/images/w3schools_green.jpg"
    alt="W3Schools.com">
    <p><strong>Float the image to the right:</strong></p><hr>

    <p><img src="mumbai taj.webp" alt="Taj"


    style="float:right;width:500px;height:300px;">
    A paragraph with a floating image. A paragraph with a floating image. A
    paragraph with a floating image.<br>
    A paragraph with a floating image. A paragraph with a floating image. A
    paragraph with a floating image.<br>
    A paragraph with a floating image. A paragraph with a floating image. A
    paragraph with a floating image.<br>
    A paragraph with a floating image. A paragraph with a floating image. A
    paragraph with a floating image.<br>
    A paragraph with a floating image. A paragraph with a floating image. A
    paragraph with a floating image.</p>
    <p>Click on the computer, the phone, or the cup of coffee to go to a new page
    and read more about the topic:</p>
    <img src= "D:\Addimition\workplace.jpg" alt="Workplace" usemap="#workmap"
    width="400" height="379">
    <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer"
    href="computer.html">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee"
    href="coffee.html">
    </map>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <h1>Computer</h1>
    <img src="C:\Users\OM\OneDrive\Pictures\Saved Pictures\computer.jpg"
    alt="computer" height="300" >
    <h2>Wikipedia says : </h2>
    <p>A computer is a device that can be instructed to carry out arbitrary
    sequences of arithmetic or logical operations automatically.<br>
    Read more about computer on
    </p>
    <a href="https://en.wikipedia.org/wiki/Computer" target="_blank">Visit
    Wikipedia</a>

    </body>
    </html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <h1>Phone</h1>
    <img src="C:\Users\OM\OneDrive\Pictures\Saved Pictures\cellphone.jpg"
    alt="Phone" height="300">
    <h2>Wikipedia says : </h2>
    <p>A telephone, or phone, is a telecommunications device that permits two or
    more users to conduct a conversation when they are too far apart to be heard
    directly.<br>
    Read more about phone on
    </p>
    <a href="https://en.wikipedia.org/wiki/Telephone" target="_blank">Visit
    Wikipedia</a>
    </body>
    </html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <h1>Coffee</h1>
    <img src="C:\Users\OM\OneDrive\Pictures\Saved Pictures\coffeehouse2.jpg"
    alt="Coffee" height="300">
    <p>Coffee is a brewed drink prepared from roasted coffee beans, which are the
    seeds of berries from the Coffea plant.<br>
    Read more about coffee on
    </p>
    <a href="https://en.wikipedia.org/wiki/Coffee" target="_blank">Visit
    Wikipedia</a>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
    body {background-color: rgb(176, 230, 185);}
    h1 {color: rgb(44, 44, 124);}
    p {color: rgb(199, 87, 87);}
    </style>
    </head>
    <body>

    <h2 style="text-align: center;">CSS:Cascading Style Sheets</h2>


    <p style="text-align: center;">Inline CSS</p>
    <h1 style="color: blue;">A blue Heading</h1>
    <p style="color:red;">A red paragraph.</p>

    <p style="text-align: center;">Internal CSS</p>


    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>

    <h1 style="text-align: center;">External Link</h1>


    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

    body {
    background-color: powderblue;
    }
    h1 {
    color: blue;
    }
    p {
    color: red;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;

    }
    p {
    border: 2px solid red;
    color: red;
    font-family: courier;
    font-size: 160%;
    }
    </style>
    </head>
    <body>

    <p>Color , font and sizes </p>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

    You might also like