HTML Practical 1 | Web-Programming | WebDevs I CS

byCodeVerse -
0

The Combine Website of all Practicals till 1 to 9 will upload Soon !!!






Practical 1

Click here!!

Image.HTML

    <!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>Image</title>
</head>
<body>
    <h2>Adding Image</h2>
    <img src="https://wallpapers.com/images/hd/blue-and-pink-aesthetic-neon-dv2tp51d096l7pjl.jpg" alt="Neon img" style="width:500px; height:600px;">
    <h2>image as a Link</h2>
    <a href="https://youtube.com/">
        <img src="https://logowik.com/content/uploads/images/899_youtube_2017logo.jpg" alt="youtube" style="width:100px; height:100px;">
      </a>
      <p><img src="https://t4.ftcdn.net/jpg/01/36/70/67/360_F_136706734_KWhNBhLvY5XTlZVocpxFQK1FfKNOYbMj.jpg" alt="Smiley face" style="float:right; width:80px; height:100px;">
        The image will float to the right of the text.</p>
      <!-- Adding Image map  -->
        <h1>Image map</h1>
        <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
<h2>To Learn more about Image Map</h2>
<a href="https://www.w3schools.com/html/html_images_imagemap.asp">Click Here!!</a>
</body>
</html>

List Tags.HTML

    <!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>List Tags</title>
</head>
<body>
    <h1>Unordered List</h1>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
      </dl>
      <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <h1>Unordered List with Style</h1>
      <ul style="list-style-type:disc;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <ul style="list-style-type:circle;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <ul style="list-style-type:square;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <ul style="list-style-type:none;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>
      <ul>
        <li>Coffee</li>
        <li>Tea
          <ul>
            <li>Black tea</li>
            <li>Green tea</li>
          </ul>
        </li>
        <li>Milk</li>
      </ul>
      <h1>Ordered list</h1>
      <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ol>
      <ol>
        <li>Coffee</li>
        <li>Tea
          <ol>
            <li>Black tea</li>
            <li>Green tea</li>
          </ol>
        </li>
        <li>Milk</li>
      </ol>
      <h1>other List</h1>
      <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
        <dd>- white cold drink</dd>
      </dl>
</body>
</html>

Structure Tags.HTML

    <!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>Structure Tags</title>
</head>
<body>
    <h1>Structure Tags</h1>
    <p>In this Website Document Structure tags is Used <br>
    Document Structure Tags are  Doctype, HTML, title, head, and body.
    </p>
</body>
</html>

Text Tags.HTML

    &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;b&gt;This text is bold&lt;/b&gt; &lt;br&gt;
&lt;i&gt;This text is italic&lt;/i&gt; &lt;br&gt;
This is&lt;sub&gt; subscript&lt;/sub&gt; and &lt;sup&gt;superscript&lt;/sup&gt; &lt;br&gt;
&lt;strong&gt;This text is important!&lt;/strong&gt; &lt;br&gt;
&lt;em&gt;This text is emphasized&lt;/em&gt; &lt;br&gt;
Do not forget to buy &lt;mark&gt;milk&lt;/mark&gt; today. &lt;br&gt;
My favorite color is &lt;del&gt;blue&lt;/del&gt; red. &lt;br&gt;
This is &lt;sub&gt;subscripted&lt;/sub&gt; text.&lt;br&gt;
This is &lt;sup&gt;superscripted&lt;/sup&gt; text.&lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;

Note

The Image map that Work place it will ask there paste this like (LINK). If doesn't works then download it and give the right location of it.

Tags

Post a Comment

Previous Post Next Post