HTML

Estructura HTML, etiquetas básicas y diseño web

Javier Ribal del Río

2025-11-28

Contenido

Estructura básica de las páginas web
Introducción a HTML5
- Títulos
- Links
- Listas
- Tablas
- Bloques span y div
- Formularios
Reglas del diseño elementales

Estructura básica de las páginas web

¿Qué es una página web?

Una página web es un documento digital accesible desde un navegador, compuesto por HTML, CSS y, cuando es necesario, JavaScript. Representa la unidad básica de contenido o interacción dentro de un sitio web y puede integrar tanto información estática como elementos dinámicos.

¿Qué partes tiene una página web? (externas)

HTML5

¿Qué es HTML?

HTML es un lenguaje de marcas que permite definir la estructura y el contenido de un documento para la web. Mediante un conjunto de etiquetas, el desarrollador describe elementos como textos, imágenes, enlaces o formularios, indicando su función dentro de la página. Es la base sobre la que posteriormente se aplican estilos (CSS) y comportamientos dinámicos (JavaScript).

Estructura básica

<!DOCTYPE html>
<html>
<head>

</head>

<body>

  <p>Clase 1 del TC</p>
  
</body>
</html>

En el código aparecen varias etiquetas HTML, y cada una tiene una etiqueta de apertura y una etiqueta de cierre (por ejemplo, <p> y </p>).
Estas etiquetas delimitan y organizan el contenido del documento:
- <head> agrupa la información del documento,
- <body> contiene lo que verá el usuario,
- <p> define un párrafo.

La función de las etiquetas es indicar al navegador qué es cada parte del documento y cómo debe interpretarla.

Head

Se corresponde con la cabecera de la pestaña, principalmente solo se modifica el logotipo y el contenido de esta.

También se utiliza para almacenar los metadatos de la web, así como scripts de JavaScript y hojas de estilo de CSS.

<!DOCTYPE html>
<html>
<head>

  <title> Web del TC </title>

</head>

<body>

  <p>Clase 1 del TC</p>
  
</body>
</html>

Body

Se corresponde con todo el contenido de la página dentro podemos utilizar multitud de etiquetas, acontinuación expondremos las más importantes.

Hasta el momento hemos trabajado únicamente con etiquietas invividuales, pero pronto veremos como podemos juntar varias etiquetas simples para obtener estructuras más complejas como tablas o formularios.

Todo el código mostrado a partir de ahora se asume que esta correctamente ubicado dentro de una etiqueta body

`<p>` Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

`<br>` Break Line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  <br></br>
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

`<ul>` Unordered list

Francisco de Quevedo
Lope de Vega
Góngora

<ul>
  <li>Francisco de Quevedo</li>
  <li>Lope de Vega</li>
  <li>Góngora</li>
</ul>

`<ol>` Ordered list

Recepción
Discurso del Rector
Despedida

<ol>
  <li>Recepción </li>
  <li>Discruso del Rector</li>
  <li>Despedida</li>
</ol>

`<h#>` Headings

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

`<div>` Divisor y `<span>` Span

Etiquetas contenedores, utilizadas para agrupar otras etiquetas, no presentan ningún efecto visible intrínsico, salvo que tras utilizar <div> se produce un salto de línea. Por lo que utilizaremos <div> para agrupar grandes grupos de etiquetas y <span> para fragementos más pequeños

`<div>`

<div>
  <h2>Capítulo 2 </h2>
  <p>
    Mio Cid Ruy Díaz por Burgos entró,<br></br>
    en su conpaña sessaenta pendones.<br></br>
    Exiénlo ver mugieres e varones,<br></br>
    burgeses e burgesas por las finiestras son,<br></br>
    plorando de los ojos, tanto avién el dolor,<br></br>
    de las sus bocas todos dizían una razón:<br></br>
    — ¡Dios, qué buen vassallo, si oviesse buen señor!—
  </p>
</div>

`<strong>` Strong, `<i>` Italic

Negrita Itálica Negrita e Itálica

<strong>Negrita</strong>
<i>Itálica</i>
<strong><i> Negrita e Itálica</i></strong>

Comentario

Etiqueta invisible

<p>Etiqueta invisible</p>

<!-- Soy un comenario -->

Tablas

Producto	Cantidad	Precio (€)
Manzanas	10	3,50
Naranjas	8	4,00
Plátanos	6	2,80
Total	24	10,30

<table>
  <thead>
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio (€)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Manzanas</td>
      <td>10</td>
      <td>3,50</td>
    </tr>
    <tr>
      <td>Naranjas</td>
      <td>8</td>
      <td>4,00</td>
    </tr>
    <tr>
      <td>Plátanos</td>
      <td>6</td>
      <td>2,80</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>24</td>
      <td>10,30</td>
    </tr>
  </tfoot>
</table>

`<a>` Link

HyperloopUPV

<!-- ¿Qué pasa con la URL -->
<a>Hyperloop UPV</a>

Propiedades HTML

Las etiquetas o elementos html disponen de atributos que nos permiten modificar su comportamiento interno.

En el caso de las etiquetas <a> debemos de especificar en los atributos la referncia en cuestión

  <a href="https://hyperloopupv.com/"> HyperloopUPV </a>

`<img>` Image

“Plaza de la Reina”

<img src="../pr.jpg" alt="Plaza con una fuente en el centro alrdedor casetas y fincas">

`<form>` Forms

Ampliamente utilizados en HTML, trabajan sobre la etiqueta <input> la cual tiene muchos tipos.

`<input type="text">`

<form>

  <label for="first-name">Nombre:</label>

  <input type="text" name="first-name"/>
</form>

`<input type="number">`

<form>

  <label for="age">Edad:</label>

  <input type="number" name="age" />
</form>

`<input type="radio">`

<form>

  <label for="sub">Subsistema: </label><br />
  <input type="radio" name="sub" value="software" /> Software <br />
  <input type="radio" name="sub" value="firmware" /> Firmware <br />

</form>

`<input type="submit">`

<form>

  <label for="first-name">Nombre:</label>
  <input type="text" name="first-name"/>

  <br/>

  <input type="submit"/>
</form>

`<button>` Button

Por ahora no los utilizaremos, pero es importante saber que existen

<button>Suscribirse</button>

Primer repo de Git

Iniciar sesión en cuenta de GitHub
Barra superior derecha, Símbolo + > New Repo
Repository Name
Description of the repo
Visibility
Add README
Crear repositorio

Desde la ventana del repositorio creado
Code <> > Clone > HTTPS > Copiar URL
Desde VScode
Clonar repositorio (si no aparece F1, paleta de comandos Clonar Repositorio)
Pegar la URL del repo
Presionar intro (equivalente a git clone)

Realizar cambios
Desde la barra derecha seleccionar menú de Git (3 nodos interconectados por dos aristas)
Agregar presionando el + los archivos a la staging area (equivalente a git add <file>)
Escribir mensaje de commit y presionar botón de confirmación (equivalente a git commit)

Una vez se hayan realizados todos los commits deseados presionar la rueda de sincronización en la barra de estado. Este último cambio es equivalente a ejecutar git pull y git push.

push sube los cambios al repositorio remoto pull actualiza los cambios de repositorio remoto por el local

HTML

Estructura básica de las páginas web

¿Qué es una página web?

¿Qué partes tiene una página web? (externas)

HTML5

¿Qué es HTML?

Estructura básica

Head

Body

<p> Paragraph

<br> Break Line

<ul> Unordered list

<ol> Ordered list

<h#> Headings

<div> Divisor y <span> Span

<div>

<strong> Strong, <i> Italic