Coding with Tawfiq | Introduction to HTML

Enhancing Content

🎯 Objectives

By the end of this tutorial, you will:

🖼️ Use advanced HTML5 elements to enrich web content.
🛠️ Build interactive and accessible forms with validation.

📚 Content Overview

Lists

HTML provides different types of lists to organize content. The three main types are:

Ordered Lists (<ol>) – use when the order of items matters. Each item is automatically numbered.

Syntax:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

You can change the numbering style using the type attribute:

<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Unordered Lists (<ul>) – use when order doesn’t matter. Items use bullet points.

Syntax:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
</ul>

Customize bullet style via type (disc, circle, square):

<ul type="square">
  <li>Apples</li>
  <li>Bananas</li>
</ul>

Definition Lists (<dl>) – pair terms with descriptions.

Syntax:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

HTML Images

Images are added using the <img> tag (it’s self-closing). Always include alt text.

Basic Syntax

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

src: Image URL or path
alt: Shown if the image can’t load; improves accessibility

Setting Image Width and Height

<img src="image.jpg" alt="A sample image" width="300" height="200">

Using Images as Links

<a href="https://example.com">
  <img src="image.jpg" alt="Click to visit example" width="200">
</a>

Adding a Favicon (in <head>)

<link rel="icon" type="image/png" href="favicon.png">

HTML Tables

Tables display data in rows and columns. Use <thead> and <tbody> for structure and accessibility.

Basic Table Structure

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Canada</td>
    </tr>
  </tbody>
</table>

Why Use <thead> and <tbody>?

Better readability
Improved styling control
Accessibility for screen readers
Easier scripting

Adding a Table Caption

<table border="1">
  <caption>Employee Data</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>Manager</td>
  </tr>
</table>

Merging Cells

<!-- colspan (merge columns) -->
<tr>
  <td colspan="2">Merged Column</td>
</tr>

<!-- rowspan (merge rows) -->
<tr>
  <td rowspan="2">Merged Row</td>
  <td>Data 1</td>
</tr>
<tr>
  <td>Data 2</td>
</tr>

Embedding Multimedia with `<audio>`, `<video>`, and `<canvas>`

HTML5 brings multimedia to life—add audio, video, and draw graphics without plugins!

Audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

controls show playback UI
autoplay starts automatically (use responsibly)
loop repeats the audio

Video

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

width/height set video size
poster shows an image before playback
muted starts video muted

Canvas

<canvas id="c" width="300" height="120"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = '#b80b0b';
  ctx.fillRect(10,10,80,60);
</script>

🌀 Vibe Coding Session + AI Spark

Make content pop—with the help of some creative AI support.

Tool	Use Case	Sample Prompts
ChatGPT	Generate lists, tables, alt text	- "Generate a table showing 5 programming languages and their use cases." - "Create a bulleted list of healthy snacks." - "Give me descriptive alt text for an image of a person hiking."
Claude	Content enhancement, ethical writing	- "Refine this HTML table to be more accessible and meaningful." - "Generate copy for a simple pricing table."
Gemini	Content + SEO suggestions	- "Best practices for accessible images?" - "Give me 5 SEO keywords for a travel blog."
DALL·E / Midjourney	Create visuals	- "Create an illustration of a laptop on a wooden desk." - "Design a set of productivity icons."
Notion AI	Write captions, lists	- "Write 3 image captions for a portfolio gallery." - "List reasons to use tables on websites."

✅ Challenge

Build a fun page showcasing:

A pricing or comparison table
Two creative lists
Three images with helpful alt text

Tip: Let AI help brainstorm, then you refine and build!

💻 `Try It: Lists + Images + Table`

Edit and run to preview lists, an image with alt text, and a simple table.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lists, Images, Table</title>
  <style>
    body{font-family:Arial; background:#fff4f4; margin:0; padding:18px}
    .box{background:#fff; padding:16px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1)}
    img{max-width:140px; border-radius:8px}
    table{border-collapse:collapse; width:100%; margin-top:10px}
    th, td{border:1px solid #ccc; padding:8px; text-align:left}
    th{background:#b80b0b; color:#fff}
  </style>
  </head>
  <body>
    <div class="box">
      <h2>Shopping List</h2>
      <ul type="square">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Bread</li>
      </ul>

<h2>Team</h2>
      <table>
        <thead>
          <tr><th>Name</th><th>Role</th><th>Country</th></tr>
        </thead>
        <tbody>
          <tr><td>John</td><td>Developer</td><td>USA</td></tr>
          <tr><td>Jane</td><td>Designer</td><td>Canada</td></tr>
        </tbody>
      </table>

Building and Managing HTML5 Forms

Forms are essential for collecting user input. HTML5 offers powerful elements and attributes to simplify and enhance forms.

✨ HTML5 Form Elements

Here are common elements for building forms:

<input>: For single-line inputs (e.g., text, email).

<input type="text" name="username" placeholder="Enter your name">

<textarea>: For multi-line text input.

<textarea name="comments" rows="4" cols="50" placeholder="Write your comments here"></textarea>

<button>: For actions like submit or reset.
```
<button type="submit">Submit</button>
```

<select> & <option>: Dropdown menus.

<select name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

<label>: Links text to form controls for accessibility.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

🌀 Vibe Coding Session + AI Assist

Design smart forms using your logic and AI’s structure support.

Tool	Use Case	Sample Prompts
ChatGPT	Generate form code, label help	- "Create a contact form with name, email, and message fields." - "Add accessibility features to this HTML form."
Claude	Improve semantics and user flow	- "How would you rewrite this form to be clearer and more user-friendly?" - "Explain the purpose of each input type in this form."
Gemini	SEO-friendly form structure	- "What form elements affect SEO or page performance?" - "Create a form for newsletter signup with email validation."
Copilot	Auto-complete input groups	Tip: Start typing <form> or <input type="email"> — you’ll get complete groups.
Figma AI	Visualize form layouts	- "Design a responsive login form layout with email + password."
Notion AI	Write form instructions or placeholder copy	- "Write a placeholder message for a contact form textarea." - "Suggest copy for a job application form button."

✅ Challenge

Design a complete form (e.g., contact, feedback, signup).
Use at least one accessibility improvement (e.g., aria-label or a proper <label>).
Let AI help create realistic input options, labels, and placeholder content.

💻 `Try It: Accessible Contact Form`

Edit and run to preview a simple, accessible form with labels and validation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible Contact Form</title>
  <style>
    body{font-family:Arial; background:#fff4f4; margin:0; padding:18px}
    form{background:#fff; padding:16px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width:420px}
    label{display:block; margin-top:10px; font-weight:600}
    input, textarea, select{width:100%; padding:10px; margin-top:6px; border:1px solid #ccc; border-radius:8px}
    button{margin-top:14px; background:#680202; color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer}
    button:hover{background:#8b0b0b}
    small{color:#666}
  </style>
  </head>
  <body>
    <h1>Contact Us</h1>
    <form aria-label="Contact form">
      <label for="name">Name</label>
      <input id="name" name="name" required placeholder="Your full name" aria-required="true">

<label for="email">Email</label>
      <input id="email" type="email" name="email" required placeholder="name@example.com" aria-required="true">

<label for="topic">Topic</label>
      <select id="topic" name="topic">
        <option>General</option>
        <option>Support</option>
        <option>Feedback</option>
      </select>

<label for="message">Message</label>
      <textarea id="message" name="message" rows="4" placeholder="Write your comments here">

We usually respond within 24 hours.

Form Attributes and HTML5 Validation

Objectives🎯

By the end of this tutorial, you’ll be able to:🎢

Understand the structure and purpose of HTML5📢

Build basic web pages using HTML5 elements.📢

Master semantic HTML for a well-organized and accessible web structure.📢

🎇Building the Foundation: HTML5 Basics 🎇

HTML5 is like the LEGO bricks of the web. Each tag is a brick, helping you construct beautiful web pages!

The Blueprint: Structure of an HTML Document Here's what every HTML document looks like:

Let’s Break It Down:

`!DOCTYPE html`: Tells browsers you’re using HTML5

`html lang="en"`: Starts the HTML zone don’t forget the `lang="en"` for accessibility!

`head`: Think of this as the control room where you load important tools like fonts, titles, and styles

`body`:The canvas for all your web page content!

🎇Adding Components to Your Page: Common Tags🎇

Here’s where the fun starts!You can use these tags to create content that pops:

Paragraphs Write amazing content with `p`

🔤 `Basic Elements Demo`

Play with headings, paragraphs, lists, and images.

🧱 `Semantic Layout (header/nav/section/article/footer)`

Edit and run to preview a simple semantic HTML5 layout.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Layout</title>
    <style>
      body{margin:0; font-family:Arial, sans-serif}
      header, nav, main, footer{padding:16px}
      header{background:#b80b0b; color:#fff}
      nav{background:#8a0a0a}
      nav a{color:#fff; margin-right:10px; text-decoration:none}
      main{display:grid; grid-template-columns: 2fr 1fr; gap:16px; padding:20px}
      article, aside{background:#fff; border-radius:10px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,0.1)}
      body{background:#fff4f4}
      footer{background:#b80b0b; color:#fff; text-align:center}
      @media(max-width:700px){ main{grid-template-columns:1fr} }
    </style>
    </head>
    <body>
      <header>
        <h1>Coding with Tawfiq</h1>
        <p>HTML5 Semantic Structure</p>
      </header>
      <nav>
        <a href="#home">Home</a>
        <a href="#tutorials">Tutorials</a>
        <a href="#contact">Contact</a>
      </nav>
      <main>
        <article>
          <h2>Article Area</h2>
          <p>This is where your main content lives. Use headings and paragraphs for clarity.</p>
        </article>
        <aside>
          <h3>Aside</h3>
          <p>Useful links or related info can go here.</p>
        </aside>
      </main>
      

<div class="ad-slot ad-center ad-between">
  </div>

Additional Resources

Objectives🎯

Understand the importance of accessibility and SEO in web development🎢

Learn techniques to make web pages accessible to everyone.📢

Discover basic SEO strategies to improve visibility. 📢

🎇Content Overview 🎇

1. Understanding Accessibility in Web Development

Web accessibility ensures that websites can be used by everyone, including people with disabilities. It’s not just ethical but also improves user experience and compliance with standards like WCAG (Web Content Accessibility Guidelines).

Key Concepts of Accessibility

Perceivable: Content must be presented in ways that users can perceive (e.g., using alt text for images).

Operable: Users should navigate and interact with the website easily (e.g., keyboard navigation)

Understandable: Content should be clear and predictable.

Robust: Works across various devices and browsers.

HERE ARE TECHNIQUES TO IMPROVE ACCESSIBILITY

2. Basics of SEO (Search Engine Optimization) (1 Hour)

SEO makes your website discoverable by search engines like Google, increasing traffic and visibility.

Key Concepts of SEO

• On-page SEO: Optimizing content, titles, and metadata.

• Off-page SEO: Building backlinks from other websites.

• Technical SEO: Improving website speed, mobile-friendliness, and structure.

Here are Techniques to Improve SEO

3. Combine Accessibility and SEO

Why Accessibility Helps SEO

• Search engines reward accessible practices, as they align with good user experience.

• Accessible websites often rank higher because they’re more user-friendly and compliant.

Summary

• Accessibility ensures everyone can use your site.

• SEO increases your site’s visibility.

• Both are essential for modern, user-friendly web development.

🎨Ready to level up your skills? Dive into practice and start building amazing,🎞🎪 inclusive, and optimized websites!

🎉 Summary

Use multimedia elements (<audio>, <video>, <canvas>) to enhance engagement.
Build forms with modern HTML5 elements like <input> and <textarea>.
Use attributes like required, pattern, minlength for built‑in validation.
Ensure accessibility with <label>, grouped controls using <fieldset> and <legend>.

🚀 Practice makes perfect – start building today! 🖼️

🌀 AI-Powered Vibe Coding: Smart Forms Edition

“Let’s build smart forms that guide users and validate cleanly—AI makes it smoother!”

Tool	Use Case	Sample Prompts / Notes
ChatGPT	Generate forms with validation	- "Create a registration form with required fields and HTML5 validation." - "What’s a good pattern for validating a Kenyan phone number?"
Claude	Explain validation attributes & logic	- "What does the `novalidate` attribute do?" - "Explain HTML5 input types and when to use them."
Gemini	Form UX + advanced validation	- "Generate a responsive login form with proper HTML5 validation." - "Benefits of using `pattern` vs JavaScript validation?"
Copilot	Auto-suggest validation attributes	Type `<input type="email"` and get suggestions for `required`, `placeholder`, `maxlength`, etc.
Perplexity AI	Research patterns & constraints	- "Best HTML5 pattern for password strength?" - "Examples of birthdate input constraints."
Notion AI	Write tooltips & feedback copy	- "Helpful tooltip for a password field." - "Message for invalid email format."

✅ Challenge

Build a smart form using required, pattern, and other validation attributes.
Use AI to suggest realistic and user‑friendly validation patterns.
Bonus: Use AI to simulate UX messages (success, error, tooltip).

♿ `Accessible Form`

Labels, required fields, and ARIA attributes in action.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Form</title>
<style>
 body{font-family:Arial; background:#fff4f4; margin:0; padding:18px}
 form{background:#fff; padding:16px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width:400px}
 label{display:block; margin-top:10px; font-weight:600}
 input, select{width:100%; padding:8px; margin-top:4px; border:1px solid #ccc; border-radius:6px}
 button{margin-top:14px; background:#680202; color:#fff; border:none; padding:10px 18px; border-radius:8px; cursor:pointer}
 button:hover{background:#8b0b0b}
</style>
</head>
<body>
 <h1>Signup Form</h1>
 <form aria-label="Signup form">
   <label for="name">Name</label>
   <input id="name" name="name" required placeholder="Your name" aria-required="true">
   <label for="email">Email</label>
   <input id="email" type="email" name="email" required placeholder="name@example.com" aria-required="true">
   <label for="role">Role</label>
   <select id="role" name="role" aria-label="Select role">
     <option>Student</option>
     <option>Developer</option>
     <option>Designer</option>
   </select>
   <button type="submit">Submit</button>
 </form>
</body>
</html>

Advanced HTML5 Topics

Enhancing Content

🎯 Objectives

📚 Content Overview

Lists

Nested Lists

HTML Images

HTML Tables

Embedding Multimedia with `<audio>`, `<video>`, and `<canvas>`

🌀 Vibe Coding Session + AI Spark

✅ Challenge

💻 `Try It: Lists + Images + Table`

Building and Managing HTML5 Forms

✨ HTML5 Form Elements

🌀 Vibe Coding Session + AI Assist

✅ Challenge

💻 `Try It: Accessible Contact Form`

Form Attributes and HTML5 Validation

🔤 `Basic Elements Demo`

🧱 `Semantic Layout (header/nav/section/article/footer)`

Additional Resources

🎉 Summary

🌀 AI-Powered Vibe Coding: Smart Forms Edition

✅ Challenge

♿ `Accessible Form`

🎨 `Canvas Drawing`

Advanced HTML5 Topics

Enhancing Content

🎯 Objectives

📚 Content Overview

Lists

Nested Lists

HTML Images

HTML Tables

Embedding Multimedia with <audio>, <video>, and <canvas>

🌀 Vibe Coding Session + AI Spark

✅ Challenge

💻 Try It: Lists + Images + Table

Building and Managing HTML5 Forms

✨ HTML5 Form Elements

🌀 Vibe Coding Session + AI Assist

✅ Challenge

💻 Try It: Accessible Contact Form

Form Attributes and HTML5 Validation

🔤 Basic Elements Demo

🧱 Semantic Layout (header/nav/section/article/footer)

Additional Resources

🎉 Summary

🌀 AI-Powered Vibe Coding: Smart Forms Edition

✅ Challenge

♿ Accessible Form

🎨 Canvas Drawing

Embedding Multimedia with `<audio>`, `<video>`, and `<canvas>`

💻 `Try It: Lists + Images + Table`

💻 `Try It: Accessible Contact Form`

🔤 `Basic Elements Demo`

🧱 `Semantic Layout (header/nav/section/article/footer)`

♿ `Accessible Form`

🎨 `Canvas Drawing`