HTML Intermediate (Part 2)

HTML Tables

HTML tables allow web developers to arrange data into rows and columns. They are useful for displaying tabular data like spreadsheets, schedules, or any data that needs to be organized in a grid-like format.

Basic Table Structure

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Canada</td>
    </tr>
</table>

Name	Age	Country
John Doe	30	USA
Jane Smith	25	Canada

Table Elements

Element	Description
`<table>`	Defines a table
`<tr>`	Defines a table row
`<th>`	Defines a table header cell
`<td>`	Defines a table data cell
`<caption>`	Defines a table caption
`<thead>`	Groups the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a table
`<colgroup>`	Specifies a group of one or more columns in a table for formatting
`<col>`	Specifies column properties for each column within a `<colgroup>` element

Advanced Table Structure

<table>
    <caption>Monthly Savings</caption>
    <colgroup>
        <col style="background-color: #f1f1f1">
        <col span="2">
    </colgroup>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
            <th>Expenses</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
            <td>$50</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
            <td>$70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
            <td>$120</td>
        </tr>
    </tfoot>
</table>

Monthly Savings
Month	Savings	Expenses
January	$100	$50
February	$80	$70
Sum	$180	$120

Table Cell Spanning

You can make a cell span multiple rows or columns using the rowspan and colspan attributes.

<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Contact</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>555-1234</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td rowspan="2">Jane Smith</td>
        <td>555-5678</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td>555-8765</td>
        <td>[email protected]</td>
    </tr>
</table>

Name	Contact
John Doe	555-1234	[email protected]
Jane Smith	555-5678	[email protected]
Jane Smith	555-8765	[email protected]

Table Accessibility

To make tables more accessible, use the following techniques:

Use <caption> to provide a title for the table
Use <th> elements for header cells
Use the scope attribute to associate header cells with data cells
Use <thead>, <tbody>, and <tfoot> to group rows
Use the headers attribute to associate data cells with header cells in complex tables

<table>
    <caption>Quarterly Sales</caption>
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Widgets</th>
            <td>100</td>
            <td>200</td>
            <td>300</td>
            <td>400</td>
        </tr>
        <tr>
            <th scope="row">Gadgets</th>
            <td>50</td>
            <td>100</td>
            <td>150</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

HTML Multimedia

HTML introduced several elements for multimedia content, including <audio>, <video>, and <canvas>.

Audio

The <audio> element is used to embed sound content in a document.

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

The controls attribute adds audio controls, like play, pause, and volume. It's also possible to specify other attributes:

autoplay - Specifies that the audio will start playing as soon as it is ready
loop - Specifies that the audio will start over again, every time it is finished
muted - Specifies that the audio output should be muted
preload - Specifies if and how the author thinks the audio should be loaded when the page loads

Video

The <video> element is used to embed video content in a document.

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

Like the <audio> element, the <video> element supports controls, autoplay, loop, muted, and preload attributes. Additionally, it supports:

poster - Specifies an image to be shown while the video is downloading, or until the user hits the play button
width and height - Specify the dimensions of the video player

Canvas

The <canvas> element is used to draw graphics, on the fly, via JavaScript.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    Your browser does not support the canvas element.
</canvas>

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

SVG

SVG stands for Scalable Vector Graphics. It's an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

Responsive Images

HTML introduced the <picture> element and the srcset attribute for responsive images.

<!-- Using srcset -->
<img src="small.jpg"
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 500px) 100vw, (max-width: 1500px) 50vw, 800px"
     alt="Responsive Image">

<!-- Using picture -->
<picture>
    <source media="(min-width: 1000px)" srcset="large.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

The srcset attribute specifies the URL of the image to use in different situations. The sizes attribute specifies image sizes for different page layouts. The <picture> element gives web developers more flexibility in specifying image resources.

HTML Metadata

Metadata is data about data. In HTML, metadata is information about the HTML document that is not displayed on the page but is used by browsers, search engines, and other web services.

The <head> Element

The <head> element contains metadata about the HTML document. It is placed between the <html> tag and the <body> tag.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

The <meta> Element

The <meta> element is used to specify various kinds of metadata about a document.

Attribute	Description	Example
`charset`	Specifies the character encoding for the HTML document	`<meta charset="UTF-8">`
`name` and `content`	Specifies a name for the metadata and its value	`<meta name="description" content="Page description">`
`http-equiv` and `content`	Provides an HTTP header for the information/value of the content attribute	`<meta http-equiv="refresh" content="30">`
`property` and `content`	Used for Open Graph Protocol (OGP) metadata	`<meta property="og:title" content="Title">`

Common Meta Tags

<!-- Character encoding -->
<meta charset="UTF-8">

<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Page description (important for SEO) -->
<meta name="description" content="A description of the page content">

<!-- Keywords (less important for SEO now) -->
<meta name="keywords" content="HTML, CSS, JavaScript">

<!-- Author information -->
<meta name="author" content="John Doe">

<!-- Refresh the page every 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Open Graph Protocol (for social media sharing) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="image.jpg">

The <link> Element

The <link> element defines the relationship between the current document and an external resource.

<!-- External stylesheet -->
<link rel="stylesheet" href="styles.css">

<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- Canonical URL (important for SEO) -->
<link rel="canonical" href="https://example.com/page">

<!-- Preconnect to external domain -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- Prefetch resource -->
<link rel="prefetch" href="page2.html">

<!-- Preload resource -->
<link rel="preload" href="important.js" as="script">

The <title> Element

The <title> element defines the title of the document, which appears in the browser's title bar or tab.

<title>Document Title</title>

The title is very important for SEO (Search Engine Optimization) as it's one of the main factors search engines use to determine the topic of a page.

HTML Intermediate Content