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.

The web week is a bonus section of Clases de Python that introduces HTML as a foundation for understanding how web pages are built and served. While the earlier weeks focused on Python for data processing, scripting, and backend logic, this section gives you the front-end context that ties everything together — so when your Python code eventually sends data to a browser, you understand what that browser is actually rendering.
HTML (HyperText Markup Language) is a markup language, not a programming language. It describes the structure and content of a web page using tags, but it does not contain logic, loops, or conditions on its own. Those come from JavaScript (client-side) or Python (server-side).

​
HTML Document Structure

Every HTML file follows the same skeleton, called the boilerplate. The course’s index.html is the simplest possible example — a valid, complete HTML page with a title and a single line of body text.
semanaweb/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titulo de la pagina</title>
</head>
<body>
    Hola
</body>
</html>
Each line in the boilerplate has a specific purpose. The table below breaks them down:
ElementPurpose
<!DOCTYPE html>Tells the browser this is an HTML5 document. Must be the very first line.
<html lang="en">Root element wrapping the entire page. The lang attribute helps screen readers and search engines understand the document’s language.
<head>Container for metadata — information about the page that is not displayed directly in the browser window.
<meta charset="UTF-8">Sets the character encoding to UTF-8, supporting virtually all characters and symbols from any language.
<meta name="viewport" ...>Controls how the page scales on mobile devices. width=device-width matches the screen width; initial-scale=1.0 prevents auto-zoom.
<title>Sets the text shown in the browser tab and used by search engines as the page headline.
<body>Contains all visible content — everything the user actually sees and interacts with in the browser.

​
Headings

HTML provides six levels of heading tags, <h1> through <h6>. They form a hierarchy of importance: <h1> is the most prominent (used for the main page title) and <h6> is the least prominent. Browsers render each level with progressively smaller default text, and screen readers use the heading hierarchy to let users navigate a page by section.
semanaweb/encabezado.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>
    <h1>Encabezado como titulo</h1>
    <h2>Encabezado como subtitulo</h2>
    <h3>Para titulo de caracteristicas</h3>
    <h4>Para mostrar opciones</h4>
    <h5>Encabezado h5</h5>
    <h6>Encabezado h6</h6>
</body>
</html>
A well-structured page typically has a single <h1> (the page title), one or more <h2> sections, and <h3>–<h6> for nested sub-sections. Skipping levels (e.g. jumping from <h1> directly to <h4>) is considered bad practice for accessibility.

​
Paragraphs

The <p> tag defines a paragraph of text. Browsers automatically add a small margin above and below each paragraph, visually separating blocks of prose without any CSS required. You can place as many <p> elements inside <body> as you need — each one starts on a new line and is treated as its own block of content.
semanaweb/parrafo.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>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat quas expedita optio fugit aspernatur voluptatibus ipsam tenetur, at saepe quidem, a veritatis asperiores iure. Tempora voluptatem dolorem veritatis incidunt consequuntur?
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum praesentium sit temporibus perspiciatis veniam harum distinctio aliquam velit consectetur deserunt, pariatur rem eum itaque totam optio odit quis cum iste.
    </p>
    <p>
        La descripcion del documento es la de acontinuacion:
    </p>
</body>
</html>
Whitespace (spaces, tabs, newlines) inside an HTML <p> tag is collapsed by the browser into a single space. To preserve formatting or add a line break inside a paragraph, you would use the <br> tag.

​
Lists

HTML has two types of lists: unordered (<ul>) and ordered (<ol>). Both use <li> (list item) tags for their entries. Unordered lists render with bullet points by default; ordered lists render with sequential numbers. The listas.html source file demonstrates both using the same set of color names.
semanaweb/listas.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listas</title>
</head>
<body>
    <!-- Colores -->
    <ul>
        <li>Blanco</li>
        <li>Negro</li>
        <li>Azul</li>
        <li>Rojo</li>
        <li>Amarrillo</li>
        <li>Naranja</li>
    </ul>

    Colores
    <ol>
        <li>Blanco</li>
        <li>Negro</li>
        <li>Azul</li>
        <li>Rojo</li>
        <li>Amarrillo</li>
        <li>Naranja</li>
    </ol>
</body>
</html>
Use <ul> when the order of items does not matter (e.g. a list of features, ingredients, or options). Use <ol> when order is significant (e.g. steps in a recipe, a ranking, or installation instructions). Lists can also be nested — an <li> can itself contain another <ul> or <ol> for multi-level outlines.

Build docs developers (and LLMs) love

Get started for freeTalk to us