Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/marioaje/Python/llms.txt

Use this file to discover all available pages before exploring further.

Once you understand the basic HTML document structure, you start filling pages with elements — the building blocks that create visible layout and content. This section covers four of the most commonly used element categories in web development: layout containers, data tables, images, and embedded media. All examples come directly from the course’s web week source files.

​
Div Containers

The <div> element is a generic block-level container. By itself it renders nothing — it’s invisible. Its power comes from grouping other elements together so you can apply styles, position sections of a page, or target them with JavaScript. The contendores.html source shows two styled <div> blocks stacked vertically, each using inline style attributes to set background and text colors.
semanaweb/contendores.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: blue; color: white;">
        <h1>Contendores</h1>
    </div>
    <div style="color: brown; background-color: chartreuse;">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione aliquam voluptatibus mollitia culpa eaque earum, minima accusantium beatae qui dolores nemo laudantium saepe dignissimos quibusdam accusamus quod molestias ipsam. Reiciendis.</p>
    </div>
    <div>
        <img src="img/ecommerce.png" alt="" srcset="">
    </div>
    <div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Sj57a1mP_n0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </div>
</body>
</html>
Each <div> wraps a different type of content — a heading, a paragraph, an image, and a video embed — and the inline style on the first two divs changes how those sections appear. Divs are also fully nestable: you can place divs inside divs to build multi-column layouts and card-based designs.
The style attribute used above is called an inline style. It works, but it mixes presentation directly into your HTML, which makes large pages harder to maintain. In production projects you would move those rules into a separate CSS stylesheet (a .css file linked via <link rel="stylesheet" href="styles.css"> in the <head>). Inline styles are useful for quick demos and prototypes.

​
Tables

HTML tables display data in rows and columns using three core tags:
  • <table> — the wrapper for the entire table
  • <tr> (table row) — defines a horizontal row
  • <th> (table header) — a cell in the header row; bold and centered by default
  • <td> (table data) — a regular data cell
The tablas.html source builds a simple two-column color catalog with one header row and six data rows:
semanaweb/tablas.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Blanco</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Negro</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Azul</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Rojo</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Amarrillo</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Gris</td>
        </tr>
    </table>
</body>
</html>
The first <tr> uses <th> cells (Id and Nombre), making it the header row. Every subsequent <tr> uses <td> cells for the actual data. Browsers will bold and center <th> content automatically, visually distinguishing the header from the body rows. For larger tables, HTML also provides <thead>, <tbody>, and <tfoot> wrapper elements to add semantic grouping and enable independent scrolling of the body.

​
Images

The <img> tag embeds an image into the page. It is a self-closing (void) element — it has no closing tag. Its two most important attributes are src (the path or URL of the image file) and alt (a text description of the image). The imagenes.html source loads two course-related PNG files from a local img/ folder:
semanaweb/imagenes.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Imagenes
    <img src="img/diseno web.PNG" alt="" srcset="" height="100px" width="100px">
    <img src="img/ecommerce.png" alt="" srcset="">
</body>
</html>
The first <img> uses height and width attributes to constrain its display size to 100 × 100 px. The second loads at its natural dimensions. Both images reference local paths — the course’s img/ folder contains course-related PNG images such as diseno web.PNG and ecommerce.png.
Always provide a meaningful description in the alt attribute (e.g. alt="Diagrama de diseño web"). The alt text is read aloud by screen readers for visually impaired users, displayed by the browser when the image fails to load, and indexed by search engines. Leaving alt="" (an empty string) is only acceptable for purely decorative images that add no informational value.

​
Embedding Videos

HTML does not have a native video-streaming tag for external platforms like YouTube. Instead, you use the <iframe> (inline frame) element, which embeds an entirely separate HTML page — in this case YouTube’s video player — inside a rectangular region of your page. The course’s videos.html file embeds a YouTube video using the standard embed URL format:
semanaweb/videos.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/Sj57a1mP_n0"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
    </iframe>
</body>
</html>
The key <iframe> attributes for a YouTube embed are:
AttributeValuePurpose
width560Display width of the player in pixels
height315Display height of the player in pixels
srchttps://www.youtube.com/embed/<VIDEO_ID>The embed URL — replace <VIDEO_ID> with the video’s ID from its regular YouTube URL
title"YouTube video player"Accessible label for the iframe (important for screen readers)
frameborder0Removes the default visible border around the iframe
allowfullscreen(boolean)Enables the full-screen button inside the player
The same <iframe> pattern also appears inside a <div> container in contendores.html, showing how you would wrap an embedded video in a layout block to position and size it alongside other page content.

​
Summary of HTML Elements

ElementTypePrimary Use
<div>ContainerGroups and wraps other elements for layout and styling
<table>DataDisplays tabular data in rows and columns
<tr>Table rowDefines a single row inside a <table>
<th>Table header cellBold, centered header cell in a <tr>
<td>Table data cellStandard data cell in a <tr>
<img>MediaEmbeds a raster or vector image; self-closing
<iframe>EmbedEmbeds an external page or media player (e.g. YouTube) inline

Build docs developers (and LLMs) love

Get started for freeTalk to us