Blog

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

Web for Beginners: Session #2 – Deep Dive into HTML

1. Introduction to HTML

  • What is HTML?
    • HTML (HyperText Markup Language) is the standard language for creating web pages and web applications.
    • It describes the structure of a webpage using a series of elements and tags.
  • Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

2. HTML Elements and Attributes

  • Elements
    • Elements are the building blocks of HTML pages.
    • They consist of a start tag, content, and an end tag.
    • Example: <h1>This is a heading</h1>
  • Attributes
    • Attributes provide additional information about elements.
    • They are always included in the opening tag.
    • Example: <a href="https://www.example.com">This is a link</a>

3. Common HTML Tags

  • Headings
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>

Paragraphs

  • <p>
  • Example:
<p>This is a paragraph.</p>

Links

  • <a>
  • Example:
<a href="https://www.example.com">This is a link</a>

Images

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

Lists

  • Unordered Lists: <ul> and <li>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered Lists: <ol> and <li>

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

4. HTML Forms

  • Form Element
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <input type="submit" value="Submit">
</form>

Common Form Elements

  • Text Input: <input type="text">
  • Password Input: <input type="password">
  • Radio Buttons: <input type="radio">
  • Checkboxes: <input type="checkbox">
  • Submit Button: <input type="submit">

5. HTML Tables

  • Table Element
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Table Tags

  • <table>: Defines the table.
  • <tr>: Defines a row.
  • <th>: Defines a header cell.
  • <td>: Defines a data cell.

6. HTML Semantic Elements

  • Definition and Purpose
    • Semantic elements provide meaning to the HTML structure.
    • They help with accessibility and SEO.
  • Common Semantic Elements
    • <header>: Defines a header for a document or section.
    • <nav>: Defines navigation links.
    • <section>: Defines a section in a document.
    • <article>: Defines an independent, self-contained content.
    • <footer>: Defines a footer for a document or section.

7. HTML5 New Features

  • New Form Elements
    • Examples: <input type="email">, <input type="url">, <input type="date">
<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
</form>

Multimedia Elements

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

Video

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

Practice Exercise

  • Create a simple web page using the elements covered in this session.
    • Include headings, paragraphs, links, images, lists, a form, and a table.
    • Use semantic elements to structure your page.

Summary

  • HTML is the backbone of web development, providing the structure and content of web pages.
  • Understanding and utilizing various HTML elements and attributes allows you to create well-structured, accessible, and interactive web pages.
  • Practice using different HTML elements to become proficient in web development.

Next Session Preview

  • Session #3: Introduction to CSS
    • Understanding Cascading Style Sheets (CSS)
    • Applying styles to HTML elements
    • Layout and design principles

Feel free to ask any questions or request further clarification on any of the topics covered in this session!

Leave a Reply