Why to study Web Technology ?

Learning Web Technology is crucial for engineering students because it equips them with essential skills to design and develop modern, user-friendly web applications. Understanding web technologies enables them to create interactive and responsive interfaces, integrate with back-end systems, and solve real-world problems. It also opens up diverse career opportunities in a rapidly growing industry, fostering innovation and adaptability in the ever-evolving digital landscape.

HTML Practice

 

Introduction to HTML: Structure and Essential Tags

What is HTML?

HTML (Hyper Text Markup Language) is the standard language used to create and design webpages. It structures the content on the web, using a series of elements represented by tags.

Basic Structure of an HTML Document

Every HTML document follows a standard structure that includes:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <!-- Content goes here --> </body> </html>
  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html>: The root element that contains all other elements.
  • <head>: Contains metadata about the document, such as the title, character set, and links to stylesheets.
  • <title>: Sets the title of the webpage, shown in the browser tab.
  • <body>: Contains the visible content of the webpage.

Essential HTML Tags

1. Headings (<h1> to <h6>)

  • Used to define headings, with <h1> being the highest (or most important) level and <h6> the lowest.
  • Example:
    <h1>This is a Heading 1</h1>
    <h2>This is a Heading 2</h2>

2. Paragraph (<p>)

  • Used to define paragraphs of text.
  • Example:
    <p>This is a paragraph.</p>

3. Links (<a>)

  • Creates hyperlinks to other webpages or resources.
  • Example:
    <a href="https://www.example.com">Visit Example</a>

4. Images (<img>)

  • Embeds images into the webpage.
  • Attributes:
    • src: Specifies the image source URL.
    • alt: Provides alternative text for the image.
  • Example:
    <img src="image.jpg" alt="Description of image">

5. Lists

  • Unordered List (<ul>): Displays items in a bulleted list.
  • Ordered List (<ol>): Displays items in a numbered list.
  • List Items (<li>): Used within <ul> or <ol> to define list items.
  • Example:
    <ul>
    <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>

6. Tables (<table>)

  • Defines a table structure.
  • Table Elements:
    • <tr>: Defines a table row.
    • <th>: Defines a table header.
    • <td>: Defines a table data/cell.
  • Example:
    <table>
    <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>

Code Examples for Practice

Example 1: Basic HTML Structure

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Practice Page</title> </head> <body> <h1>Welcome to HTML Practice</h1> <p>This is a basic HTML document.</p> </body> </html>

Example 2: Creating a Simple List

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple List</title> </head> <body> <h2>My Favorite Foods</h2> <ul> <li>Pizza</li> <li>Burgers</li> <li>Ice Cream</li> </ul> </body> </html>

Example 3: Adding a Link and Image

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Link and Image</title> </head> <body> <h2>Check out this cool website!</h2> <a href="https://www.example.com">Visit Example.com</a> <h3>Here’s an image:</h3> <img src="image.jpg" alt="A beautiful view"> </body> </html>

Example 4: Creating a Table

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Table</title> </head> <body> <h2>Weekly Schedule</h2> <table border="1"> <tr> <th>Day</th> <th>Activity</th> </tr> <tr> <td>Monday</td> <td>Math Class</td> </tr> <tr> <td>Tuesday</td> <td>Science Lab</td> </tr> </table> </body> </html>

Example 5: Creating a Form

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Registration Form</title> </head> <body> <h2>Register Here</h2> <form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> </body> </html>

Chapter Challenges

  1. Challenge 1: Create an HTML page that includes all the basic tags you've learned (headings, paragraphs, lists, tables, images, links) in a meaningful way. For example, create a personal portfolio webpage.

  2. Challenge 2: Develop a webpage that lists your favorite movies using ordered lists and includes images and descriptions of each movie.

  3. Challenge 3: Design a simple registration form with multiple input types (text, email, password, etc.) and use CSS to style the form.

  4. Challenge 4: Create a table displaying a class timetable with different colors for each subject and make the header stand out using CSS.

  5. Challenge 5: Build a webpage that displays a block of text using various formatting elements like bold, italic, underlined text, and a blockquote. Also, add a navigation menu at the top.

Comments

  1. Wireless Video transmitters have become essential tools for modern content creation. Whether you're on a film set, live streaming, or setting up multi-cam events, cutting the cable without sacrificing video quality is a huge win. I’ve personally used systems like the VIDEOCAST Mars series—they offer solid range, low latency, and super clean video transmission.

    ReplyDelete

Post a Comment

Popular posts from this blog

Why to study Web Technology ?