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 = 2^x

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 C₈H₁₀N₄O₂, 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>

22:03

Fecha

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

Última vez que fui al dentista.

Fecha y hora

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

Cuando acabé la carrera.

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	` `
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
<	`<`
>	`>`
”	`"`
’	`'`
&	`&`
©	`©`
€	`€`
❤	`&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