Lección 2: Formato | Curso HTML

Lección 2: Formato

Todas las páginas webs se componen de texto envuelto en diferentes etiquetas (o tags) donde cada una guarda una propiedad única que es transmitida a su contenido, habitualmente texto. Todas ellas se van interconectando por medio de anidamientos (unas dentro de otras) u orden determinado.

Anatomía

Todas ellas poseen una estructura similar a la siguiente.

<etiqueta>Contenido</etiqueta>

Según trabajes con cada etiqueta irás asimilando y automatizando su uso.

Antes de continuar debes conocer como se añaden comentarios en el código y que solo sean vistos por ti.

Etiqueta <!-- Comentario -->
Descripción Textos que serán ignorados por el navegador, prácticos para dejar comentarios o anotaciones por parte del Diseñador Web.
Atributos Globales
Tipo En línea 
<!-- Bloque de texto que describe a Frodo -->
Protagonista de la novela, hijo de Drogo Bolsón y Prímula Brandigamo. Tras la muerte de sus padres, su tío Bilbo le adoptó y le nombró su heredero, hecho que le llevó a poseer el Anillo Único.
Protagonista de la novela, hijo de Drogo Bolsón y Prímula Brandigamo. Tras la muerte de sus padres, su tío Bilbo le adoptó y le nombró su heredero, hecho que le llevó a poseer el Anillo Único.

Textos

Veamos algunas etiquetas esenciales para dar formato a nuestros textos.

Parrafos

Etiqueta <p>
Descripción Crea párrafos.
Atributos Globales
Tipo Bloque 
<p>En un lugar de la mancha...</p>

En un lugar de la mancha...

Por la red encontrarás que es posible utilizar el atributo align para alinear el texto (centrar, izquierda, justificar o derecha). ¡NO LO UTILICES! Esta obsoleto, hoy en día se utilizan estilos CSS.

Resaltar

No confundir con negrita.

Etiqueta <strong>
Descripción Marca textos importantes o de gran relevancia.
Atributos Globales
Tipo En línea 
Cuando tome este medicamento y guardelo en un sitio oscuro. <strong>No consumir por niños menores de 6 años</strong>
Cuando tome este medicamento y guardelo en un sitio oscuro. No consumir por niños menores de 6 años

Enfatizar

Etiqueta <em>
Descripción Da enfasis a una palabra, solo nombres propios o palabras en otro idioma.
Atributos Globales
Tipo En línea 
¡<em>Legolas</em>! ¡¿Qué ven tus ojos de elfo?
¡Legolas! ¡¿Qué ven tus ojos de elfo?

Títulos

Etiqueta <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Descripción Cabeceras o títulos. Se enumeran del 1 al 6 de mayor a menor importancia.
Atributos Globales
Tipo Bloque 
<h1>El señor de los anillos</h1>
<h2>La Comunidad del Anillo</h2>
<p>Tres Anillos para los Reyes Elfos bajo el cielo.
Siete para los Señores Enanos en palacios de piedra...</p>

El señor de los anillos

La Comunidad del Anillo

Tres Anillos para los Reyes Elfos bajo el cielo. Siete para los Señores Enanos en palacios de piedra...

Superíndice

Etiqueta <sup>
Descripción A nivel tipográfico, eleva el carácter a un superíndice.
Atributos Globales
Tipo En línea 
8 = 2<sup>x</sup>
8 = 2x

Subíndice

Etiqueta <sub>
Descripción A nivel tipográfico, desciende el carácter a un subíndice.
Atributos Globales
Tipo En línea 
Sin la moléculo C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, también llamada cafeína, no podría ir a clase.
Sin la moléculo C8H10N4O2, también llamada cafeína, no podría ir a clase.

Tiempo

Etiqueta <time>
Descripción Marca un tiempo. A nivel visual e interactivo no refleja ningún cambio, a no ser que se especifique intencionadamente con estilos.
Atributos datetime: Fecha u hora que será interpretado por el navegador.
Tipo En línea

Hora

<time>22:03</time>

Fecha

<time datetime="2022-10-12">Última vez que fui al dentista</time>

Fecha y hora

<time datetime="2012-10-12T17:00:00">Cuando acabé la carrera.</time>

Diferencia entre las etiquetas de bloque y en línea

Las etiquetas de bloque, como <p>, ocupan todo el ancho de la fila. Uno de sus efectos secundarios es la de empujar la siguiente etiqueta a una nueva fila. Mientras que las etiquetas, por ejemplo <strong>, permiten concatenar todas las que sean necesarias sin alterar la maquetación.

Debes ser consciente de la naturaleza de cada etiqueta para construir tus sitios sin dificultades.

Con CSS es posible cambiarlo a necesidad.

Etiquetas sin cierre

Etiqueta <br>
Descripción Salto de línea. No es un sustituto a los párrafos sino para ajustes menores.
Atributos Globales
Tipo En línea 
<p>Doctor Who se estrenó en BBC Television​ tras discusiones<br>y planificaciones que habían durado un año.</p>

Doctor Who se estrenó en BBC Television​ tras discusiones
y planificaciones que habían durado un año.

Anatomía de un documento HTML5

Veamos la estructura mínima de cualquier página web moderna.

<!--Indica que el documento utiliza HTML5-->
<!doctype html>
<!--Hace saber al navegador que la página esta en castellano-->
<html lang="es">
    <head>
        <!--Permite carácteres extraños del alfabeto americano: ñ, á, é...-->
        <meta charset="utf-8"/>
        <!--Título que aparecerá en la pestaña - La estructura será el nombre de la página actual + Descripción del sitio-->
        <title>Document</title>
        <!--Restablece el zoom-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    </head>
    <body>
       Todo mi contenido
    </body>
</html>

Puedes usarla como base para empezar cualquier actividad o sitio futuro. Si quieres una versión más completa puedes descargar la plantilla completa.

Espacios en blanco

Etiqueta &nbsp;
Descripción Espacio. Existen alternativas más flexibles en CSS como margin o word-spacing.
Atributos Ninguno
Tipo En línea 
El otoño​ es una de las cuatro estaciones del año y una de las dos de la&nbsp;zona intertropical.
El otoño​ es una de las cuatro estaciones del año y una de las dos de la zona intertropical.
Etiqueta <pre>
Descripción El contenido respeta los saltos de línea y espacios.
Atributos Globales
Tipo Bloque 
<pre>Pixar:
        - Toy Story.
        - Wally.
        - Los increíbles.
</pre>

Pixar:
        - Toy Story.
        - Wally.
        - Los increíbles.

Entidades (Carácteres especiales)

Las entidades HTML son palabras que empiezan con un ampersand (&) y terminan con un punto y coma (;). Son carácteres avanzados que pueden ser propios de la sintaxis HTML, lo cual hace imposible representarlos, o estar fuera de nuestro teclado. El navegador se encargará de traducir siempre que estén bien escritos.

En la siguiente tabla puedes observar algunos de ellos, aunque la lista oficial extensa.

Carácter literal Equivalencia HTML
< &lt;
> &gt;
” &quot;
’ &apos;
& &amp;
© &copy;
€ &euro;
❤ &hearts;

Los acentos y la ñ también poseen su equivalencia, aunque no es necesario usarlos gracias al meta utf-8.

Obsoletas

A pensar que por la red encuentres ejemplos donde estén presentes, debes evitarlas ya que han sido marcadas como etiquetas antiguas que ya no forman parte del estándar HTML.

Etiqueta <b>
Descripción ¡OBSOLETO! Nunca lo uses. Da un estilo de negrita al texto.
Atributos Globales
Tipo En línea 
Las causas perdidas son las únicas por las que <b>vale la pena luchar</b>.
Las causas perdidas son las únicas por las que vale la pena luchar.
Etiqueta <i>
Descripción ¡OBSOLETO! Nunca lo uses. Da un estilo en cursiva al texto.
Atributos Globales
Tipo En línea 
En <i>900 años por el tiempo y el espacio</i>, nunca me he encontrado con nadie que no fuera importante.
En 900 años por el tiempo y el espacio, nunca me he encontrado con nadie que no fuera importante.
Actividad 1

Crea la siguiente página usando párrafos

Actividad parrafos

Actividad 2

Crea la siguiente página.

Actividad titulos

Actividad 3

Crea la siguiente página.

Actividad h1 hasta h6

Actividad 4

Crea la siguiente página.

Actividad negrita y cursiva

Actividad 5

Crea la siguiente página.

Actividad entidades

Actividad 6

Utiliza el siguiente texto: 

Julio Verne

Jules Gabriel Verne, conocido en los países hispanohablantes como Julio Verne (Nantes, 8 de febrero de 1828-Amiens, 24 de marzo de 1905), fue un escritor, poeta y dramaturgo francés célebre por sus novelas de aventuras y por su profunda influencia en el género literario de la ciencia ficción. Se le considera, junto con H. G. Wells, el «padre de la ciencia ficción».

Nacido en una familia burguesa, estudió para continuar los pasos de su padre como abogado, pero muy joven decidió abandonar ese camino para dedicarse a la literatura. Su colaboración con el editor Pierre-Jules Hetzel dio como fruto la creación de Viajes extraordinarios, una popular serie de novelas de aventuras escrupulosamente documentadas y visionarias entre las que se incluían las famosas Cinco semanas en globo (1863), Viaje al centro de la Tierra (1864), De la Tierra a la Luna (1865), Veinte mil leguas de viaje submarino (1870), La vuelta al mundo en ochenta días (1872) o La isla misteriosa (1874).

Para lograr el siguiente objetivo

Actividad entidades

Actividad 7

Realiza una página web donde describas tus últimas vacaciones.

  • Añade títulos.
  • Marca con negritas.
  • Marca con cursivas.
  • Usa párrafos.
  • Se original.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario