Elementos contenido de HTML5¶

Los elementos de contenido en HTML son las etiquetas que se utilizan para definir la estructura de la información que será visible en la página web.

A continuación, se describen algunas de las etiquetas más importantes:

Etiquetas texto
Listas
Enlaces
Imágenes
Tablas

Etiquetas de texto¶

Las etiquetas de texto están comprendidas dentro de la etiqueta <body> y sirven para determinar el contenido escrito en la página. Algunas de las etiquetas más comunes son:

Elemento	Descripción
`<p>`	Definen bloques de texto o párrafos.
`<i>`	Muestra el texto marcado con un estilo en cursiva o itálica.
`<b>`	Representa el texto marcado con un estilo en negrita.
`<u>`	Muestra el texto subrayado.
`<br>`	Inserta un salto de línea.
<sub>``<sup>	Establece un subíndice y un superíndice respectivamente.

index.html

<!-- Elementos <sub> <sup>-->
<h3>Etiquetas &lt;sub&gt; &lt;sup&gt;</h3>
<p>La fórmula química de agua es H<sub>2</sub>O</p>
<p>Trade Mark <sup>TM</sup></p>

<!-- Elemento <i>-->
<h3>Etiqueta &lt;i&gt;</h3>
<i>Texto en italica</i>

<!-- Elemento <b>-->
<h3>Etiqueta &lt;b&gt;</h3>
<b>Texto en negrita</b>

<!-- Elemento <u>-->
<h3>Etiqueta &lt;u&gt;</h3>
<u>Texto subrayado</u>

<!-- Elemento <br>-->
<h3>Etiqueta &lt;br&gt;</h3>
<br>

Listas¶

Las listas permiten crear párrafos agrupados y alineados mediante símbolos como viñetas o números para facilitar la lectura y organización de las ideas del documento.

Tenemos dos tipos de listas:

Listas ordenadas

Las listas ordenadas aparecen dentro del elemento <ol> (de ordered list, lista ordenada), después cada párrafo de la lista estará dentro de elementos de tipo <li>, al igual que las anteriores.
index.html
```
<p>Lista de la compra</p> 

<ol>  
    <li>Agua</li>  
    <li>Vino</li> 
    <li>Cerveza</li>
</ol>
```
Listas no ordenadas

Las listas no ordenadas se deben englobar dentro de un elemento <ul> (acrónimo de unordered list, lista no ordenada), después cada párrafo de la lista estará dentro de elementos de tipo <li> (de list item, elemento de lista).La diferencia ahora es que cada párrafo con <li>, aparece con un punto y no con un número.
index.html
```
<p>Lista de la compra</p> 

<ul>  
    <li>Agua</li>
    <li>Vino</li>
    <li>Cerveza</li>
</ul>
```

Ejemplo en CodePen

See the Pen Untitled by Elena (@aznarel) on CodePen.

Actividad

📝 AA4.10 Tu primera página web¶

(C.ESP2 / CE2.3 / IC1-3p)

Abre el editor de texto y completa el siguiente código como se solicita:

<!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Añade aquí el autor" -->
     <title>Mi primera página web</title>
 </head>
 <body>
     <!-- Añade aquí un título de nivel 3 (h3) con el texto "Información personal" -->

     <!-- Debajo, escribe tu nombre en negrita y tu primer apellido en cursiva -->

     <!-- Después, crea otro título de nivel 3 (h3) con el texto "Gustos" -->

     <!-- A continuación, añade una lista ordenada (ol) con tus hobbies o aficiones -->
 </body>
 </html>

Enlaces¶

Una URL (Uniform Resource Location) es la dirección concreta de un recurso (una página web, una imagen, un vídeo, un directorio,…) en internet.

Hiperenlaces: enlaces externos

La etiqueta que permite realizar enlaces es la etiqueta <a>. El atributo href permite indicar la URL a la que se realiza el salto.
index.html
```
A Augusto le sucedió el emperador 
<a href=”http://es.wikipedia.org/wiki/Tiberio”>Tiberio</a> 
```
1. la palabra Tiberio estará remarcada de modo que al hacer clic en ella saltaremos a la URL http://es.wikipedia.org/wiki/Tiberio.

Imágenes¶

La etiqueta <img> en HTML se utiliza para incrustar imágenes en una página web. Es una etiqueta vacía, lo que significa que no tiene una etiqueta de cierre y no contiene contenido dentro de ella. En su lugar, se utilizan atributos dentro de la etiqueta para especificar la fuente de la imagen, el texto alternativo y otros detalles relacionados con la presentación y el comportamiento de la imagen.

Los atributos más comunes en las etiquetas de imagen HTML son:

src: especifica la ruta o URL de la imagen.
alt: proporciona texto alternativo que se muestra si la imagen no se puede cargar.
title: proporciona texto descriptivo que se muestra al pasar el cursor sobre la imagen.
width: especifica el ancho de la imagen en píxeles o como un porcentaje del ancho disponible.
height: especifica la altura de la imagen en píxeles o como un porcentaje de la altura disponible.
figure: permite englobar una imagen (u otra cosa) junto con su pie.
figcaption: define el pie de la imagen

<img src="./imagenes/imagen.jpg"  
alt="Descripción de la imagen"  
title="Título de la imagen"  
width="300"  
height="200">  <!-- (1) -->

La imagen se carga desde el archivo «imagen.jpg». Si la imagen no se puede cargar, se mostrará el texto «Descripción de la imagen». Al pasar el cursor sobre la imagen, se mostrará el texto «Título de la imagen». La imagen tendrá un ancho de 300 píxeles y una altura de 200 píxeles.

Actividad

📝 AA4.11 Tu primera página web II¶

(C.ESP2 / CE2.4 / IC1-3p)

Edita la página web que creaste en el ejercicio anterior y añade un link a Wikipedia y una imagen.

Imágenes sin derechos de autor

Utilizar imágenes con derechos de autor sin el permiso adecuado puede resultar en demandas legales, multas y sanciones. Sin embargo, utilizar imágenes de manera ética y legal refuerza la percepción de profesionalismo y seriedad de tu sitio web y de tu marca. Existen muchos bancos de imágenes sin derechos de autor, por ejemplo Adobe Stock

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Añade aquí el autor" -->
    <title>Mi primera página web</title>
</head>
<body>
    <!-- Añade aquí un título de nivel 3 (h3) con el texto "Información personal" -->

    <!-- Debajo, escribe tu nombre en negrita y tu primer apellido en cursiva -->

    <!-- Después, crea otro título de nivel 3 (h3) con el texto "Gustos" -->

    <!-- A continuación, añade una lista ordenada (ol) con tus hobbies o aficiones -->

    <!-- NUEVO: Añade una imagen -->
    <!-- Ejemplo: <img src="nombre-de-tu-imagen.jpg" alt="Descripción de la imagen" width="300"> -->

    <!-- NUEVO: Añade link a la web del instituto -->
</body>
</html>

Tablas¶

Las tablas son estructuras que organizan y presentan datos en filas y columnas.

Sintaxis básica:

El principio y final de una tabla se define con las etiquetas <table> y </table>.
Las filas se engloban con las etiquetas <tr> </tr> y las columnas se crean mediante las etiquetas <td> </td> (las etiquetas <td> siempre estarán dentro de una fila <tr>).
Las etiquetas <th> </th> se utilizan para representar los encabezados.
El título de la tabla se representa mediante las etiquetas <caption> </caption>

Ejemplo código html que muestra uso etiquetas de tabla

index.html

   <table border="1">
   <caption>Tabla I: Etiquetas</caption> <!--(1)-->
   <tr> <!--(2)-->
      <th>Encabezado 1</th> <!--(3)-->
      <th>Encabezado 2</th> 
      <th>Encabezado 3</th>
      <th>Encabezado 4</th>
   </tr>
   <tr>
      <td>Campo 1</td> <!--(4)-->
      <td>Campo 2</td>
      <td>Campo 3</td>
      <td>Campo 4</td>
   </tr>
   <tr>
      <td>Campo 5</td> 
      <td>Campo 6</td>
      <td>Campo 7</td>
      <td>Campo 8</td>
   </tr>
   <tr>
      <td>Campo 9</td>
      <td >Campo 10</td>
      <td>Campo 11</td>
      <td>Campo 12</td>
   </tr>
   <tr>
      <td>Campo 13</td>
      <td>Campo 14</td>
      <td>Campo 15</td>
      <td>Campo 16</td>
   </tr>
   </table>

table sirve para definir inDefine la tabla.
caption sirve para definir el título de la tabla.
th sirve para definir el encabezado de una tabla.
tr Representa una fila de celdas en una tabla.
td Representa una celda de datos en una tabla.

Actividad

📝 AA4.12 Tu primera página web III¶

(C.ESP2 / CE2.4 / IC1-3p)

Edita la página web que creaste en el ejercicio anterior y añade una tabla con dos filas y dos columnas indicando nombre de la asignatura que más te gusta y lo que esperas sacar este trimestre y nombre de la asignatura que menos te gusta y la nota que esperas.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Añade aquí el autor" -->
    <title>Mi primera página web</title>
</head>
<body>
    <!-- Añade aquí un título de nivel 3 (h3) con el texto "Información personal" -->

    <!-- Debajo, escribe tu nombre en negrita y tu primer apellido en cursiva -->

    <!-- Después, crea otro título de nivel 3 (h3) con el texto "Gustos" -->

    <!-- A continuación, añade una lista ordenada (ol) con tus hobbies o aficiones -->
    <!-- A continuación , añade imagen y link a la web del instituto -->

    <!-- NUEVO: Añade una tabla con 2 filas y 2 columnas -->
    <!-- En la primera fila, escribe la asignatura que más te gusta y la nota que esperas sacar -->
    <!-- En la segunda fila, escribe la asignatura que menos te gusta y la nota que esperas sacar -->

    <table border="1">
        <tr>
            <th>Asignatura que más me gusta</th>
            <th>Nota esperada</th>
        </tr>
        <tr>
            <td><!-- Escribe aquí el nombre de la asignatura que más te gusta --></td>
            <td><!-- Escribe aquí la nota que esperas sacar --></td>
        </tr>
        <tr>
            <th>Asignatura que menos me gusta</th>
            <th>Nota esperada</th>
        </tr>
        <tr>
            <td><!-- Escribe aquí el nombre de la asignatura que menos te gusta --></td>
            <td><!-- Escribe aquí la nota que esperas sacar --></td>
        </tr>
    </table>
</body>
</html>

Actividad

🏆 R4.13 Reto en grupo¶

(C.ESP2 / CE2.4 / IC4-60p)

Crear una página web (no se permite CSS) sobre un tema libre (videojuegos, deporte, música, cine…) que incluya:

Metadatos
Estructura semántica
Enlaces
Imagen
Lista
Tabla

Actividad

🏆 PO4.14 Prueba objetiva: Currículum¶

(C.ESP2 / CE2.4 / IC6-60p)

Crear una página web con tu currículum. (no se permite CSS). La información debe ser inventada, no proporcionar datos personales reales más allá del nombre.

En la sección requeridas:

Formación, que tendrá dentro dos subapartados uno llamado Idiomas donde deberás indicar los idiomas que puedes hablar o escribir correctamente (en uno o dos párrafos), y otro llamado Estudios donde también en uno dos párrafos indiques los estudios que has alcanzado hasta ahora, incluyendo tus estudios actuales (graduado de ESO, Bachillerato, etc.)
Habilidades y destrezas, que tendrá dentro dos subapartados : uno llamado Intereses o aficiones donde deberás indicar tus aficiones, si colaboras con alguna organización (en uno o dos párrafos) y otro llamado Habilidades informáticas donde también en uno dos párrafos indiques las aplicaciones que más usas y tu nivel de destreza.

Actividad Refuerzo

🔨 AAR4.15 Refuerzo Receta¶

(C.ESP2 / CE2.4 / IC1-3p)

Crear una web, con estructura HTML correcta (cabecera, cuerpo, pie..), con la receta para cocinar una tortilla francesa. Debes usar una lista ordenada para los pasos y desordenada para los ingredientes.

Ingredientes:

Huevos
Aceite de oliva
Sal

Pasos:

Batir los huevos con una pizca de sal.
Calentar el aceite en una sartén.
Verter los huevos batidos en la sartén.
Doblar la tortilla cuando esté cuajada.

Actividad Refuerzo

🔨 AAR4.16 Refuerzo Tabla informativa¶

(C.ESP2 / CE2.4 / IC1-3p)

Crear una tabla que represente:

Horario semanal
5 filas (días)
3 columnas (asignatura, profesor, aula)
Con encabezados y caption

Referencias¶

Blog Cheatsheet HTML
Mdn WebDocs HTML