Scribd
Upload
56 views

Experiment Format For WT

The document discusses designing static web pages using HTML. It provides theory on HTML including its structure, presentation, interactivity and accessibility features. It then provides the code for multiple static web pages with different HTML elements and features like headings, paragraphs, images, links, lists, tables and forms.

Uploaded by

Disha Goel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views

Experiment Format For WT

The document discusses designing static web pages using HTML. It provides theory on HTML including its structure, presentation, interactivity and accessibility features. It then provides the code for multiple static web pages with different HTML elements and features like headings, paragraphs, images, links, lists, tables and forms.

Uploaded by

Disha Goel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Aca

demic Year: 2022-2023

Dept:EXTC Name –Disha Goel SAP ID - 60002200082

Experiment No - 1
AIM: Design a static web page using HTML

THEORY:
HTML, which stands for Hypertext Markup Language, is a markup language used to create
web
pages and other online content. It consists of a series of elements, tags, and attributes that
define
the structure and content of a web page.

HTML works by defining elements within a page using a set of markup tags. These tags are
enclosed in angle brackets <>, and are used to describe the content of a web page, such as
headings, paragraphs, images, links, lists, tables, and forms. HTML documents are made up
of
nested elements, with each element representing a specific piece of content.

Some of the key features of HTML include:


1. Structure: HTML provides a way to organize content into meaningful sections and
hierarchies. This makes it easy to create and navigate complex documents.
2. Presentation: HTML can be used to define the basic appearance of a web page, such as
fonts, colors, and layout.
3. Interactivity: HTML allows for the creation of interactive elements such as forms, buttons,
and links.
4. Accessibility: HTML is designed to support accessibility features such as screen readers,
making web content more accessible to people with disabilities.

HTML is typically used in conjunction with other web technologies such as CSS and
JavaScript,
which are used to add styling and interactivity to web pages. Together, these technologies
form
the foundation of the modern web, allowing developers to create dynamic, engaging, and
accessible online content.
Aca
demic Year: 2022-2023

CODE:

1.a
<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>EXPT1.a</title>
  </head>
  <body>
    <div style="border: 3px solid; width: fit-content">
      <h1>Welcome to Site Raw</h1>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Forum</a></li>
        <li><a href="">Contact</a></li>
      </ul>
      <h3>Site Raw is awesome</h3>
      <p>
        Site raw is the best site on the web.Site raw is the best site on the
        web.
      </p>
      <p>SiteRaw is awesome..true story</p>
      <h3>About the author</h3>
      <p>SiteRaw was created by...find out never</p>
      <p>© SiteRaw..the best site on the web</p>
    </div>
  </body>
</html>

OUTPUT:
Aca
demic Year: 2022-2023

CODE
1.b
<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>EXPT1.b</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Student Name</th>
          <th>Student Regi No.</th>
          <th>Subject Name</th>
          <th>Marks Obtained</th>
          <th>Total Marks</th>
          <th>Average Marks</th>
        </tr>
      </thead>
      <tbody>
        <!-- student 1  -->
        <tr>
          <td rowspan="3">Allan</td>
          <td rowspan="3">STD-01</td>
Aca
demic Year: 2022-2023

          <td>Math</td>
          <td>50</td>
          <td rowspan="3">150</td>
          <td rowspan="3">50</td>
        </tr>
        <tr>
          <td>Chemistry</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Physics</td>
          <td>50</td>
        </tr>
        <!-- student 2  -->
        <tr>
          <td rowspan="3">Mike</td>
          <td rowspan="3">STD-01</td>
          <td>Math</td>
          <td>50</td>
          <td rowspan="3">150</td>
          <td rowspan="3">50</td>
        </tr>
        <tr>
          <td>Chemistry</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Physics</td>
          <td>50</td>
        </tr>

        <!-- student 3  -->


        <tr>
          <td rowspan="3">Scott</td>
          <td rowspan="3">STD-01</td>
          <td>Math</td>
          <td>50</td>
          <td rowspan="3">150</td>
          <td rowspan="3">50</td>
        </tr>
        <tr>
          <td>Chemistry</td>
          <td>50</td>
        </tr>
        <tr>
          <td>Physics</td>
Aca
demic Year: 2022-2023

          <td>50</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

CSS CODE
table,
th,
td,
tr {
  border-collapse: collapse;
  border: 1px solid;
  text-align: center;
}

td,
th {
  padding: 10px;
}

OUTPUT:
Aca
demic Year: 2022-2023

CODE
1.c
<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>Expt1.c</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Lord Of The Rings</h1>
    <img src="images\1.jpg" alt="fellowship-of-the-ring-photo" />
    <details>
      <summary>Fellowship Of The Ring</summary>
      <p>
        An ancient Ring thought lost for centuries has been found, and through a
        strange twist of fate has been given to a small Hobbit named Frodo. When
        Gandalf discovers the Ring is in fact the One Ring of the Dark Lord
        Sauron, Frodo must make an epic quest to the Cracks of Doom in order to
        destroy it.
      </p>
Aca
demic Year: 2022-2023

    </details>
    <img src="images\2.jpg" alt="the-two-towers-photo" />
    <details>
      <summary>The Two Towers</summary>
      <p>
        The continuing quest of Frodo and the Fellowship to destroy the One
        Ring. Frodo and Sam discover they are being followed by the mysterious
        Gollum. Aragorn, the Elf archer Legolas, and Gimli the Dwarf encounter
        the besieged Rohan kingdom, whose once great King Theoden has fallen
        under Saruman's deadly spell.
      </p>
    </details>
    <img src="images/3.jpg" alt="the-return-of-the-king" />
    <details>
      <summary>The Return Of The King</summary>
      <p>
        The final confrontation between the forces of good and evil fighting for
        control of the future of Middle-earth. Frodo and Sam reach Mordor in
        their quest to destroy the One Ring, while Aragorn leads the forces of
        good against Sauron's evil army at the stone city of Minas Tirith
      </p>
    </details>
  </body>
</html>

CSS
img {
  height: 35%;
  width: 15%;
}

OUTPUT:
Aca
demic Year: 2022-2023

CODE
1.d
<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" />
Aca
demic Year: 2022-2023

    <title>Expt1.d</title>
  </head>
  <body>
    <div>
      <form>
        <!-- first name -->
        <label for="fname">First Name</label>
        <br />
        <input type="text" id="fname" />
        <br />
        <!-- last name -->
        <label for="lname">Last Name</label>
        <br />
        <input type="text" id="lname" />
        <br />
        <!-- year -->
        <label for="year">Choose a Year</label>
        <select name="year" id="year">
          <option value="FY Btech">FY Btech</option>
          <option value="SY Btech">SY Btech</option>
          <option value="TY Btech">TY Btech</option>
        </select>

        <!-- gender -->


        <p>Specify your gender</p>
        <input type="radio" id="Male" name="gender" />
        <label for="Male">Male</label>
        <br />
        <input type="radio" id="Female" name="gender" />
        <label for="Female">Female</label>
        <br />
        <!-- contact number -->
        <label for="connumber">Contact Number</label>
        <br />
        <input type="number" id="connumber" />
        <br />
        <!-- date of birth -->
        <label for="dob">Specify your Date of Birth</label>
        <br />
        <input type="date" id="dob" />
        <br />
        <!-- Current Address -->
        <label for="address">Current Address</label>
        <br />
        <textarea id="address" cols="30" rows="10"></textarea>
        <br />
Aca
demic Year: 2022-2023

        <!-- pincode -->


        <label for="">Pincode:</label>
        <input type="number" max="6" />
        <br />
        <!-- state -->
        <label for="state">State</label>
        <select id="state">
          <option>Maharashtra</option>
          <option>Delhi</option>
          <option>Goa</option>
          <option>Jammu</option>
          <option>Tamil Nadu</option>
        </select>
        <br />
        <!-- country -->
        <label for="country">Country</label>
        <input type="text" id="country" />
        <br />
        <!-- email -->
        <label for="email">Email Address</label>
        <input type="email" id="email" />
        <br />
        <!-- register -->
        <input type="submit" value="Register" />
      </form>
    </div>
  </body>
</html>

OUTPUT:
Aca
demic Year: 2022-2023

CONCLUSION:

In conclusion HTML is a fundamental language used for creating web pages and other online content. It
provides a way to define the structure and content of a webpage, allowing the creation of complex and
interactive documents. HTML works in conjunction with other web technologies such as CSS and JavaScript
to provide a rich user experience. As the backbone of the web, HTML remains an essential language for
anyone interested in creating content for the web

You might also like