Web Technologies – Practical 2

Exploring Interactive Elements: Building Forms and Navigation in Web Development

Blog Banner

Introduction:

In this blog post, we will delve into a practical exercise of designing a webpage that makes use of various web technologies. Specifically, we will focus on incorporating table tags, form tags with various form elements, navigation across multiple pages, and embedded multimedia elements. This practical exercise is a part of the BSc CS Web Technologies curriculum, aimed at providing hands-on experience with fundamental web development concepts. So, let's get started!

1. Table Tags:

Table tags are essential for organizing and presenting tabular data on a webpage. To demonstrate their usage, we can create a simple table displaying information about a collection of books. Here's an example of how the table structure might look in HTML:

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Publication Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Great Gatsby</td>
      <td>F. Scott Fitzgerald</td>
      <td>1925</td>
    </tr>
    <tr>
      <td>To Kill a Mockingbird</td>
      <td>Harper Lee</td>
      <td>1960</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

2. Form Tags:

Forms are essential for user input and interaction on webpages. We can design a form that allows users to submit their feedback or contact information. Here's an example of a basic form with different form elements:

<form>
  <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="message">Message:</label>
  <textarea id="message" name="message" required></textarea>
  
  <input type="submit" value="Submit">
</form>

This form includes text inputs, email inputs, and a textarea for longer messages. The `required` attribute ensures that the user must fill out all the fields before submitting the form.

3. Navigation across Multiple Pages:

Creating a navigation system that allows users to move across multiple pages is a fundamental aspect of web development. We can achieve this by utilizing anchor tags (`<a>`) to create links between pages. Here's an example of a navigation menu that links to different sections of our website:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

By specifying different `href` attributes for each anchor tag, we can link to separate HTML files, representing different pages of our website.

4. Embedded Multimedia Elements:

Embedding multimedia elements, such as images and videos, enhances the visual appeal and engagement of a webpage. Let's consider embedding an image and a video on our webpage:

<img src="image.jpg" alt="Description of the image">

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

In the above example, the `<img>` tag is used to display an image, while the `<video>` tag is used to embed a video. The `src` attribute specifies the source file (image.jpg and video.mp4) to be displayed. The `alt` attribute for the image provides an alternative text description for accessibility purposes. The `controls` attribute for the video tag enables playback controls.

Practical 2:

Here's an example of a full webpage incorporating all the mentioned tags: table tags, form tags, navigation across multiple pages, and embedded multimedia elements.

HTML CODE:

<!DOCTYPE html>
<html>
<head>
  <title>Web Technologies Example</title>
  <style>
    /* Add some basic styling for demonstration purposes */
    table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    form {
      margin-bottom: 20px;
    }
    
    label, input, textarea {
      display: block;
      margin-bottom: 10px;
    }
    nav {
      background-color: #333;
    }
    
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    nav li {
      display: inline-block;
    }
    
    nav li a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
    }
    
    nav li a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h1>Welcome to our Website!</h1>
    
    <section>
      <h2>Books</h2>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Publication Year</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>The Great Gatsby</td>
            <td>F. Scott Fitzgerald</td>
            <td>1925</td>
          </tr>
          <tr>
            <td>To Kill a Mockingbird</td>
            <td>Harper Lee</td>
            <td>1960</td>
          </tr>
          <tr>
            <td>1984</td>
            <td>George Orwell</td>
            <td>1949</td>
          </tr>
        </tbody>
      </table>
    </section>
    
    <section>
      <h2>Contact Us</h2>
      <form>
        <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="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        
        <input type="submit" value="Submit">
      </form>
    </section>
    
    <section>
      <h2>Embedded Multimedia</h2>
      <img src="image.jpg" alt="Description of the image">
      
      <video src="video.mp4" controls>
        Your browser does not support the video tag.
      </video>
    </section>
  </main>
  
  <footer>
    <p>© 2023 Web Technologies Example. All rights reserved Learn With Atharv.</p>
  </footer>
</body>
</html>

This example provides a complete webpage structure. the <nav> tag has been styled with a dark background color (#333). The navigation links (<a>) are displayed as inline-block elements within an unordered list (<ul>). The links have a white text color (#fff), padding of 10px vertically and 20px horizontally, and no text decoration. When hovering over the links, the background color changes to a darker shade (#555).

You can save it as an HTML file and open it in a web browser to see how the different elements come together.

Feel free to replace the image and video sources with your own files to customize the multimedia content. Remember to update the file paths in the navigation links (`href`) if you decide to split the content into separate HTML files for each page.

Output:

Conclusion:

By combining table tags, form tags, navigation across multiple pages, and embedded multimedia elements, we have successfully designed an interactive webpage. This practical exercise serves as an excellent introduction to key web technologies and concepts, helping BSc CS students gain valuable hands-on experience in web development. As you further explore web technologies, you will discover numerous possibilities for creating dynamic and engaging websites. Happy coding!

Web Technologies – Practical 2

Introduction:

1. Table Tags:

2. Form Tags:

3. Navigation across Multiple Pages:

4. Embedded Multimedia Elements:

Practical 2:

Conclusion:

Atharv shinde

Post a Comment

Introduction to Operating Systems: Unveiling the Backbone of Computing

Made with Love by

Contact form

Cookies Consent

Web Technologies – Practical 2

Introduction:

1. Table Tags:

2. Form Tags:

3. Navigation across Multiple Pages:

4. Embedded Multimedia Elements:

Practical 2:

Conclusion:

Atharv shinde

You may like these posts

Post a Comment

Contact form

Cookies Consent