Blog

You are currently viewing Web for Beginners: Session #3 – Deep Dive into HTML Continued

Web for Beginners: Session #3 – Deep Dive into HTML Continued

1. Advanced HTML Elements

  • Tables (Continued)
    • Spanning Rows and Columns
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Rowspan 2</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
  <tr>
    <td colspan="2">Colspan 2</td>
    <td>Cell 6</td>
  </tr>
</table>

Forms (Continued)

  • Textarea, Select, and Fieldset
<form>
  <label for="comments">Comments:</label><br>
  <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

  <label for="cars">Choose a car:</label><br>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
  </fieldset>

  <input type="submit" value="Submit">
</form>

Media Elements

  • Embedding YouTube Videos
<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

2. HTML5 Semantic Elements (Detailed)

  • Sectioning Elements
    • <header>
<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<nav>

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<articel>

<article>
  <h2>Article Title</h2>
  <p>This is the content of the article.</p>
</article>

<section>

<section>
  <h2>Section Title</h2>
  <p>This is the content of the section.</p>
</section>

<aside>

<aside>
  <h2>Related Information</h2>
  <p>This is some related information or sidebar content.</p>
</aside>

<footer>

<footer>
  <p>Footer Content</p>
  <p>&copy; 2024 My Website</p>
</footer>

3. Meta Tags and SEO

  • Meta Tags for SEO
    • Basic Meta Tags
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <title>My Web Page</title>
</head>

Viewport Meta Tag (Responsive Design)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph Meta Tags (Social Media)

<head>
  <meta property="og:title" content="Title of the website">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://www.example.com/">
  <meta property="og:image" content="http://www.example.com/image.jpg">
</head>

4. Linking HTML and CSS

  • Internal CSS
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
</head>

External CSS

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inline CSS

<h1 style="color:blue;text-align:center;">This is a heading</h1>

5. HTML Best Practices

  • Clean and Consistent Code
    • Use proper indentation and spacing.
    • Example:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Comments

  • Use comments to describe sections of code.
  • Example:
<!-- This is a comment -->
<p>This is a paragraph.</p>

Accessibility

  • Use semantic HTML for better accessibility.
  • Add alt attributes to images.
  • Example:
<img src="image.jpg" alt="Description of the image">
  • Validation
    • Use tools like the W3C Markup Validation Service to validate your HTML.

Practice Exercise

  • Create a comprehensive web page using advanced HTML elements.
    • Include a header, navigation menu, sections, articles, aside content, and a footer.
    • Use semantic elements and meta tags for SEO.
    • Link an external CSS file for styling.

Summary

  • Advanced HTML elements and attributes provide more control and functionality for creating sophisticated web pages.
  • Semantic elements improve accessibility and SEO.
  • Meta tags enhance the discoverability and responsiveness of your website.
  • Linking HTML and CSS allows for better design and layout management.
  • Following best practices ensures clean, maintainable, and accessible code.

Leave a Reply