HTML y CSS como nunca antes se lo habían contado E-Book

Tomás Domínguez Mínguez

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2023

Seitenzahl: 291

Beschreibung

En el mundo actual resulta casi impensable vivir al margen de Internet. Desde una simple búsqueda, pasando por la consulta de las últimas novedades en redes sociales, hasta la realización de gestiones o compras online, siempre hay algún motivo para conectarse. En la mayoría de estos casos, lo que está haciendo es realizar una petición a un servidor que devuelve como resultado una página web con la información solicitada. Quizás piense que el desarrollo de estas páginas sea algo complejo, solo al alcance de especialistas con conocimientos de programación. Pero nada más lejos de la realidad, porque para crear páginas web no es necesario ser un experto en este campo. Únicamente deberá saber lo imprescindible de HTML y CSS. En este libro aprenderá a desarrollar sus propias páginas web sin conocimientos previos, desde cómo estructurar la información con HTML hasta cómo darle el aspecto deseado con CSS. Incluso tendrá ocasión de utilizar un servicio de hosting web que le permitirá acceder a ellas desde cualquier dispositivo en cualquier lugar. Si ya tiene conocimientos básicos de ambos lenguajes, este libro también le será de gran ayuda, ya que no se centra en la descripción de un conjunto de etiquetas HTML y propiedades CSS, sino en la manera de organizar en pantalla los elementos de una página según el diseño gráfico establecido. Por ese motivo, se hace un énfasis especial en los diversos modos de presentación, en los distintos tipos de posicionamiento y en la distribución de los espacios que componen las diferentes secciones de una página. Por último, se hace particular hincapié en la adaptación de contenidos a todo tipo de dispositivos, imprescindible si quiere que una misma página se vea correctamente en la pantalla de un ordenador, una tableta o un teléfono móvil. Además del capítulo exclusivo de prácticas que se presenta en el libro, todos los conceptos se describen con ejemplos explicados línea a línea, lo que hará que experimente el efecto de las técnicas aplicadas en cada uno de ellos. Tomás Domínguez es ingeniero de telecomunicación y doctorado en inteligencia artificial. Su labor profesional se ha desarrollado en una multinacional de telecomunicaciones, donde ha ocupado diversos cargos relacionados con la tecnología. Asimismo, ha ejercido como profesor universitario de ingeniería informática en la Universidad Alfonso X el Sabio de Madrid.

Leseprobe

HTML y CSS como nunca antes se lo habían contado

Primera edición, 2023

© 2023 Tomas Domínguez Mínguez

© 2023 MARCOMBO, S. L.

www.marcombo.com

Cubierta: ENEDENÚ DISEÑO GRÁFICO

Maquetación: quimdiaz.net

Revisor técnico: Ferran Fabregas

Corrector: Nuria Barroso

Directora de producción: M.a Rosa Castillo

La presente publicación tiene una finalidad educativa y se destina a la formación de estudiantes y profesionales. Su objetivo es informar de manera precisa y concisa. La elaboración del contenido, aunque se ha trabajado de modo escrupuloso, no puede comportar una responsabilidad específica para el autor ni el editor de los posibles errores o imprecisiones que pudiera contener la presente obra.

En la primera imagen de la introducción se emplean diversas ilustraciones de los autores Freepik, Mavadee y Srip de Flaticon.com, con licencia Creative Commons Attribution 3.0 Unported (CC BY 3.0).

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

ISBN del libro en papel: 978-84-267-3653-6

ISBN del libro electrónico: 978-84-267-3681-9

Producción del ePub: booqlab

TABLA DE CONTENIDO

1. INTRODUCCIÓN

1.1 Qué es HTML

1.2 Qué es CSS

2. ESTRUCTURA DE UNA PÁGINA WEB

2.1 Elementos HTML

2.2 Su primera página web

2.3 Etiquetas básicas de la cabecera

2.3.1 Metadatos

2.3.2 Título del documento

2.3.3 Recursos externos

2.4 Etiquetas básicas del cuerpo

2.4.1 Texto

2.4.1.1 Encabezados y párrafos

2.4.1.2 Formato

2.4.1.3 Entidades HTML

2.4.1.4 Citas

2.4.2 Imágenes

2.4.3 Audio y vídeo

2.4.4 Hipervínculos

2.4.4.1 Enlaces a páginas de otros servidores web

2.4.4.2 Enlaces a páginas locales

2.4.4.3 Enlaces a secciones de una misma página

2.4.4.4 Enlaces a servicios y aplicaciones

2.4.5 Listas

2.4.6 Contenedores

2.4.6.1 Contenedores semánticos

2.4.6.2 Contenedores genéricos

3. APARIENCIA DE UNA PÁGINA WEB

3.1 Formas de aplicar un estilo

3.1.1 Estilos en línea

3.1.2 Reglas de estilo

3.1.2.1 Selector de etiqueta.

3.1.2.2 Selector de identificador

3.1.2.3 Selector de clase

3.1.2.4 Selectores compuestos

3.1.3 Hojas de estilo

3.2 Colores

3.2.1 Espacios de color

3.2.2 Transparencias

3.3 El modelo de caja

3.3.1 Ancho y alto del contenido

3.3.1.1 Desbordamiento

3.3.1.2 Valores máximos y mínimos

3.3.2 Márgenes

3.3.3 Bordes

3.3.4 Box sizing

3.4 Textos

3.4.1 Fuente

3.4.2 Tamaño

3.4.3 Alineación

3.4.4 Espaciado

3.4.5 Formato

3.5 Hipervínculos

3.6 Listas

3.7 Imágenes

3.7.1 Dimensiones

3.7.2 Transparencia

3.7.3 Bordes

3.7.4 Fondo de pantalla

3.8 Sombras

3.9 Valores por defecto y heredados

4. DISTRIBUCIÓN DE ELEMENTOS EN PANTALLA

4.1 Modos de presentación

4.1.1 Modos en bloque y en línea

4.1.2 Modo de caja flexible

4.1.2.1 Distribución de elementos en filas.

4.1.2.2 Distribución horizontal de elementos

4.1.2.3 Distribución vertical de elementos

4.2 Elementos flotantes

4.2.1 Ordenación de elementos al mismo nivel

4.2.2 Ordenación de elementos en varios niveles

4.3 Tipos de posicionamiento

4.3.1 Posicionamiento relativo

4.3.2 Posicionamiento fijo

4.3.3 Posicionamiento absoluto

4.3.4 Superposición de elementos

4.4 Centrado y alineación de elementos

4.4.1 Centrado horizontal

4.4.2 Centrado vertical

4.4.3 Alineación lateral

4.5 Reparto del espacio entre elementos

4.5.1 Reparto horizontal del espacio

4.5.2 Reparto vertical del espacio

4.5.3 Reparto combinado del espacio

5. PRÁCTICAS DE DESARROLLO DE PÁGINAS WEB

5.1 Página con un diseño estándar

5.1.1 Diseño general

5.1.2 Cabecera

5.1.3 Barra de navegación

5.1.4 Contenido principal

5.1.5 Contenido relacionado

5.1.6 Pie de página

5.2 Página del buscador Google

5.2.1 Diseño general

5.2.2 Cabecera y barra de navegación

5.2.3 Contenido principal

5.2.4 Pie de página

6. HOSTING WEB

6.1 Acceso al servicio

6.2 Interfaz de usuario del servicio

6.2.1 Gestión de espacios

6.2.2 Gestión de archivos

6.2.3 Editor web de código

6.3 Práctica de uso del servicio

7. PÁGINAS WEB ADAPTABLES AL TIPO DE DISPOSITIVO

7.1 Unidades de medida relativas

7.2 La etiqueta <picture>

7.3 La regla @media

8. ANEXO. CÓDIGO COMPLETO DE LAS PRÁCTICAS DE DESARROLLO DE PÁGINAS WEB

8.1 Página con un diseño estándar

8.1.1 Código HTML

8.1.2 Código CSS

8.2 Página del buscador Google

8.2.1 Código HTML

8.2.2 Código CSS

Unidad 1

INTRODUCCIÓN

Internet forma ya parte inseparable de nuestras vidas. Sin la existencia de esta red, muchas de las actividades que realizamos a diario, tanto personales como profesionales, no serían posibles. La inmediatez de acceso a la información, la facilidad para realizar cualquier tipo de gestión burocrática, la comodidad de las compras online, la colaboración entre equipos de trabajo o la capacidad para compartir opiniones e imágenes en nuestras redes sociales, son solo una pequeña muestra de todo lo que es posible gracias a Internet.

Cuando utiliza un navegador, lo que está haciendo es acceder a las páginas ofrecidas por un servidor web. Entonces, ¿qué es en realidad la web y qué diferencia hay con Internet? Muchas veces ambos términos se usan de forma indistinta y, sin embargo, representan conceptos diferentes, ya que Internet es una red de comunicaciones y la web es un sistema de distribución de documentos hipertexto (texto que contiene enlaces desde los que se puede ir a otros textos).

El término web es la abreviatura del World Wide Web (WWW), que se puede traducir como red global. Fue creada en el CERN (Consejo Europeo para la Investigación Nuclear) por Tim Berners-Lee en 1989 para que universidades y científicos pudieran compartir sus investigaciones. Su principal característica es la de estar basada en una arquitectura cliente servidor donde un navegador (cliente) realiza una petición a un servidor, que le devuelve como respuesta una página web. La siguiente imagen muestra gráficamente este proceso.

Como puede observar, dicha comunicación utiliza el protocolo HTTP (Hypertext Transfer Protocol, Protocolo de Transferencia de Hipertextos), motivo por el que, para acceder a una página web, lo primero que se escribe en la barra de direcciones de un navegador es “http://”.

En el caso de que la comunicación entre el cliente y el servidor vaya cifrada, se emplea el protocolo HTTPS (la ‘S’ final indica que la transmisión de información es segura).

Las páginas web se desarrollan en HTML (acrónimo HyperText Markup Language, lenguaje de marcas hipertexto) y tienen una dirección única de acceso, llamada URL (Uniform Resource Locator, localizador uniforme de recursos). Es la que se escribe en la barra de direcciones del navegador (si la conoce) o la que aparece en dicho campo al pulsar sobre uno de los enlaces contenidos en la página de resultado de una búsqueda. Su formato es el siguiente:

Como puede observar, a continuación del protocolo de comunicaciones se encuentra el nombre de dominio, que identifica el servidor web (por ejemplo, www.amazon.es). El URL acaba con el nombre de la página web, que en realidad es la ruta de acceso al archivo en la que está almacenada en el servidor. Si no se especificara ninguna, por defecto se mostraría la página home (archivo “index.html”) que, por lo general, es la puerta de entrada al resto de contenidos del sitio.

En resumen, un servidor web atiende las peticiones HTTP de los clientes y devuelve como respuesta las páginas web solicitadas, que son archivos de texto escritos en HTML. Siga leyendo para descubrir los fundamentos de este lenguaje.

1.1 QUÉ ES HTML

Tal como se apuntó al principio de este capítulo, el acrónimo HTML hacía referencia a un lenguaje hipertexto. El motivo es porque permite el desarrollo de páginas desde las que se puede saltar a otras pulsando sobre el enlace (hipervínculo) correspondiente. Esta es la base de funcionamiento de HTML y, también, el motivo de la expansión de la web, ya que ha favorecido la creación de una red de conexiones mediante la que es posible acceder a prácticamente cualquier conocimiento humano.

Otra de las características a las que hacía referencia el acrónimo HTML era que se trataba de un lenguaje de marcas. Eso es debido a que está formado por un conjunto de etiquetas (o marcas) que determinan el papel que juega cada elemento de la página y, en consecuencia, su estructura. Así, un texto puede ser un encabezado (el título de la página, un capítulo o un apartado), parte de un párrafo o un hipervínculo. Todo depende de la etiqueta en la que se encuentre, tal como se puede ver en el siguiente código de ejemplo:

Aunque se hable de una etiqueta, estas suelen ir en parejas (una de inicio y otra de cierre), dentro de las cuales se encuentra el contenido afectado.

A continuación, puede ver el aspecto de estos tres textos en un navegador. El incluido entre las etiquetas <h1> y </h1> se muestra de forma destacada, mientras que el que hay entre <p> y </p> lo hace de forma sencilla. El perteneciente a la etiqueta <a> es muy especial, ya que si lo pulsara le llevaría a otra página (la del buscador de Google), motivo por el que su color es azul y está subrayado.

Sin embargo, cuando navega por Internet está acostumbrado a visitar páginas con elaborados diseños gráficos que llaman su atención, a la vez que facilitan su uso, algo que dista mucho de la página anterior. Eso es porque HTML presta atención a la organización del contenido (el papel que juega cada elemento), pero no a la forma en la que se visualiza. Por lo tanto, hace falta algo más que se encargue de este importante aspecto. Continúe leyendo para descubrir de qué se trata.

1.2 QUÉ ES CSS

Tal como ha podido apreciar en la imagen anterior, aunque HTML muestra cada etiqueta de una forma predeterminada, su presentación es muy pobre y, por descontado, siempre es la misma. Eso es debido a que se centra únicamente en la estructura del contenido, motivo por el que no ofrece facilidades para modificar, por ejemplo, la fuente o el color de un texto, el tamaño de una imagen, ni mucho menos determinar su posición en la página. Entonces, ¿cómo se consiguen los depurados diseños de las páginas web actuales? Mediante CSS (Cascading Style Sheets, hojas de estilo en cascada), otro lenguaje que, a diferencia de HTML, se centra en todo lo que tiene que ver con el aspecto visual de los elementos y su distribución en pantalla. Ambos lenguajes se complementan, por lo que, actualmente, todas las páginas web se desarrollan como una combinación de código HTML y CSS.

Además de HTML y CSS, una página web también suele estar compuesta por código JavaScript, lenguaje de programación que dota a la página de características interactivas, como, por ejemplo, las de ofrecer una respuesta dinámica o realizar una serie de tareas al pulsar un botón, rellenar un formulario, etc. Su estudio sale fuera del alcance de esta obra.

Si en HTML se utilizaban etiquetas, con CSS manejará reglas de estilo mediante las que se asignan los diferentes valores que deberá tener cada una de las propiedades visuales de los elementos que conforman la página. A modo de ejemplo, si añadiera la siguiente regla CSS al código HTML anterior, modificaría el aspecto del enlace para que parezca un botón:

Aunque en esta sección no se pretende explicar la sintaxis de una regla de estilo, algo que le llevará gran parte de la lectura de esta obra, se describirá brevemente la forma en la que actúa esta en concreto para modificar la apariencia del hipervínculo.

La primera parte de la regla, llamada selector, está formada únicamente por la letra “a”, que corresponde al nombre de la etiqueta del hipervínculo, lo que indica que afecta a dicho elemento. Dentro, encerradas entre llaves, están las declaraciones mediante las que se asignan los valores a las diferentes propiedades visuales del hipervínculo. Así, el texto del enlace se escribirá ahora en color blanco sobre un fondo azul (la propiedad color toma el valor white y background-color el valor blue). Con la propiedad padding se crea un espacio alrededor del texto del enlace de 10 píxeles que se rellena con el color de fondo. La propiedad border-radius redondea las esquinas de dicho espacio con la forma de un arco de circunferencia de 10 píxeles de radio. Por último, al asignar el valor none a la propiedad text-decoration se evita que el texto del enlace quede subrayado. De esa forma, se consigue que el hipervínculo tome la apariencia de un botón, tal como puede ver a continuación:

Ahora la página web está formada por código HTML y código CSS. Esta muestra la misma información que la página original, pero tiene un aire diferente. La página original presentaba todos los elementos HTML de forma predefinida, mientras que en la nueva se ha personalizado el aspecto del hipervínculo. Pero, lo más importante es que, cuando quiera volver a cambiarlo, solo tendrá que sustituir la regla de estilo de este elemento por otra distinta, sin necesidad de modificar el contenido (el código HTML).

Unidad 2

ESTRUCTURA DE UNA PÁGINA WEB

Una página web es un archivo de texto que, en vez de en español, está escrito en HTML. A diferencia de otros lenguajes, este no se utiliza para programar algoritmos (desarrollo de código tradicional) sino con el fin de estructurar el contenido de una página web. Por lo tanto, HTML no es un lenguaje de programación, sino de marcas, motivo por lo que, en vez de variables, funciones, clases o estructuras de control, utiliza etiquetas (marcas) que establecen el papel que juega cada uno de los elementos que conforman la página.

2.1 ELEMENTOS HTML

Los elementos HTML son las piezas con las que se construyen las páginas web. Aunque a lo largo de esta obra se emplearán los términos elemento y etiqueta de forma indistinta, en realidad el primero abarca al segundo, ya que un elemento se compone de:

• Una etiqueta de apertura con cero o más atributos.

• El contenido afectado, que puede ser un texto u otras etiquetas.

• Una etiqueta de cierre.

Por lo tanto, y con carácter general, un elemento HTML tiene el siguiente formato:

Aunque este es el caso general, hay elementos que no tienen atributos, otros que solo requieren una etiqueta (la de inicio) e, incluso, algunos no tienen contenido.

Los nombres de las etiquetas pueden escribirse tanto en mayúscula como en minúscula. Sin embargo, el W3C (consorcio internacional dedicado a la definición de normas y directrices web) recomienda el uso de minúsculas.

Cuando una etiqueta lleva atributos, estos son los encargados de suministrar la información precisa para realizar su función. Por ejemplo, una etiqueta que muestre una imagen requiere un atributo que contenga la ruta de acceso donde está almacenada, la etiqueta de un hipervínculo necesita la dirección de la página a la que se accede, etc.

Observe que los atributos se separan mediante espacios (no con comas) y que sus valores van siempre entre comillas.

Si recuerda, en el capítulo de introducción se utilizó un código HTML de ejemplo en el que se empleaba la etiqueta <a> para crear un hipervínculo mediante el que se podía acceder a la página de búsqueda de Google, cuyo URL se añadió mediante el atributo href:

Si quiere conocer la lista completa de los atributos globales (aquellos que se pueden usar en cualquier etiqueta) visite la página https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes

Las etiquetas imprescindibles en cualquier página web son las siguientes:

Aunque la primera línea tenga el aspecto de una etiqueta, en realidad es una directiva que indica al navegador que este documento está escrito en HTML5 (última versión de este lenguaje). Por ese motivo, esta línea siempre deberá situarse al principio del archivo:

A lo largo de esta obra, para referirse al código HTML de una página web también se utilizará el término documento.

El siguiente par de etiquetas son las que realmente contienen el código HTML de la página y conforman el elemento raíz del documento, ya que agrupa a todos los demás:

Como se ha comentado al inicio de esta sección, la función principal de HTML es estructurar el contenido de la página. Para ello, los elementos se anidan unos dentro de otros formando una jerarquía cuya raíz es la etiqueta <html> (representa la página web), debajo de la que se encuentra el cuerpo y la cabecera (etiquetas <head> y <body>):

Aunque más adelante se describirán las estructuras jerárquicas, la que forman el cuerpo y la cabecera de una página se puede representar gráficamente así:

En la cabecera está la información general de la página, como los metadatos y las referencias a los archivos externos donde se almacenan las hojas de estilo CSS, el código JavaScript, etc.

Los metadatos reciben este nombre porque son datos que describen otros datos. Aunque no sea información visible, es muy importante porque la utilizan los buscadores para localizar las páginas que mejor se adapten al contenido solicitado por un usuario.

Por último, el cuerpo del documento contiene los elementos visibles de la página web:

Ahora que ya conoce las etiquetas que no pueden faltar en ninguna página web, en la siguiente sección desarrollará la primera y más sencilla de todas.

La lista de todos los elementos HTML los puede encontrar en https://developer.mozilla.org/es/docs/Web/HTML/Element y en https://www.w3schools.com/tags.

2.2 SU PRIMERA PÁGINA WEB

Una vez conocida la estructura básica de una página web y las etiquetas que intervienen, ya está en condiciones de crear la primera. Por lo tanto, ha llegado la hora de ponerse manos a la obra y empezar a practicar lo aprendido. Pero ¿es necesario algún tipo de entorno de desarrollo para ello? No, ya que una página web es un documento de texto, por lo que podrá editarse con cualquier procesador de texto, por muy sencillo que este sea (por ejemplo, el bloc de notas de Windows o TextEdit si utiliza Mac).

En Windows, para abrir el bloc de notas solo tiene que escribir su nombre en el campo de búsqueda situado en la parte inferior izquierda del escritorio y, luego, pulsar sobre él.

Si va a trabajar de forma habitual con archivos HTML, le recomiendo usar Visual Estudio Code. Aunque no es un editor específico de HTML, una vez que detecta ese lenguaje le ofrece infinidad de facilidades que le facilitarán la escritura del código, como la función de autocompletar, el cierre automático de etiquetas, menús contextuales de ayuda sobre la sintaxis o enlaces a la web https://developer.mozilla.org/ en la que se ofrece toda la información que necesite de un elemento determinado. Puede descargarlo desde https://code.visualstudio.com/download.

Una vez abierto el editor, escriba el siguiente código:

En dicho código, la única línea cuya sintaxis no se ha explicado es:

Se trata de un comentario. Como en cualquier otro lenguaje de programación, en HTML también se pueden añadir comentarios que ayuden a entender el código. Se trata de líneas de texto que ignora el navegador, ya que van destinadas al desarrollador de la página web. Se utilizan en labores de mantenimiento, sobre todo cuando se trata de páginas complejas. Los comentarios también son útiles durante la fase de depuración de errores, ya que permiten ocultar líneas de código que pueden ser sospechosas de provocarlos.

Una vez finalizado el documento HTML, guárdelo con el nombre “hola-mundo.html”. Si quiere seguir la estructura de carpetas del material descargable del libro, el código de este y los sucesivos ejercicios se encuentra dentro de la carpeta “Practicas”, agrupados en subcarpetas por capítulos (“Capitulo1”, “Capitulo2”, ...). Por lo tanto, el correspondiente a esta primera página web estaría en:

Es importante que su extensión sea “.html”, ya que es la correspondiente a los archivos que contienen páginas web. De esta forma, podrá abrirlos desde un navegador. También es importante que, al guardar el archivo, en el campo “Codificación” elija “UTF-8”. Se trata de un formato de codificación estándar de caracteres que permite el almacenamiento, la transmisión y, muy especialmente, la correcta visualización de aquellos específicos de cada idioma, en el caso del español, los acentos y la letra ‘ñ’.

Como puede observar en la imagen anterior, he situado la carpeta “Practicas” (obtenida el material descargable) debajo de otra llamada “HTML”, en la que tengo todo lo relacionado con este lenguaje. Naturalmente, usted puede ponerla donde quiera.

Ahora, acceda a la carpeta donde guardó el archivo y pulse sobre él con el botón derecho del ratón. En el menú contextual que aparece, seleccione la opción “Abrir con” y, finalmente, “Google Chrome”.

Aunque en todas las prácticas se haga referencia a Google Chrome, puede utilizar cualquier otro navegador. Si fuera el configurado por defecto en su ordenador, solo tendría que pulsar dos veces seguidas con el botón izquierdo del ratón sobre el documento HTML (igual que se hace con los archivos de cualquier otra aplicación).

El resultado es el que puede ver a continuación, en el que el navegador muestra el texto “Hola Mundo”. Observe que en la solapa aparece el nombre del archivo que contiene la página web (“hola-mundo.html”) y en la barra de direcciones su ruta de acceso absoluta (“C:/Users/Tomas/Documents/HTML/Practicas/Capitulo2/hola-mundo.html”)

Una ruta absoluta es aquella que especifica la ubicación de un archivo desde el directorio raíz, en este caso, el disco duro (“C:/”).

Si quisiera ver cualquier otra página web solo tendría que escribirla en dicha barra de direcciones.

2.3 ETIQUETAS BÁSICAS DE LA CABECERA

Como sabe, un documento HTML se estructura en una cabecera y un cuerpo. En esta sección estudiará las etiquetas más comunes de la cabecera (las del cuerpo forman parte de una sección posterior). Son las que permiten mostrar el título y el icono de la página en la pestaña del navegador, definir las reglas de estilo con las que se determina su apariencia, añadir metainformación útil que facilite su localización por parte de los buscadores o importar todo tipo de recursos externos.

Las etiquetas que usará con más frecuencia en la cabecera de un documento HTML son las siguientes:

• <title>. Establece el título del documento.

• <link>. Importa recursos externos, es decir, aquellos que no están incluidos en el propio documento HTML. Se usa para cargar código JavaScript, hojas de estilo y, como pronto descubrirá, imágenes como la del pequeño icono que aparece al lado del título en la pestaña del navegador.

• <meta>. Si en la cabecera es donde se colocan los metadatos de una página web, esta etiqueta es la que mejor representa dicha definición, ya que normalmente se emplea para identificar al autor, dar un breve resumen de lo que trata la página, añadir las palabras clave que mejor representen la información contenida (aquellas que introducirían en un buscador las personas interesadas en ella), identificar el juego de caracteres manejado, etc.

• <style>. Agrupa las reglas de estilo con las que se determina el aspecto de los elementos mostrados en pantalla, por ejemplo, el color o el tamaño del texto de un párrafo. Estas reglas, que se escriben en lenguaje CSS, también son las responsables de la distribución de estos elementos en la página según un diseño o una composición gráfica determinada.

Un juego de caracteres especifica la forma en la que un ordenador los representa internamente. Aunque existen distintos estándares, el W3C recomienda el formato de codificación de caracteres Unicode UTF-8.

A continuación se describirá cada una de estas etiquetas, a excepción de <style>, cuyo estudio se llevará a cabo en el próximo capítulo.

2.3.1 Metadatos

Un metadato es un dato que describe a otro dato. En el contexto de las páginas web, los metadatos son información sobre esta, como el autor o el tema del que trata, las palabras clave que mejor representan su contenido o el juego de caracteres empleado.

Los metadatos de un documento HTML se expresan en su cabecera mediante la etiqueta <meta>. Al igual que la etiqueta <link>, esta requiere de atributos que proporcionen información adicional. Uno de ellos es charset, con el que se establece el juego de caracteres empleado, imprescindible para que el navegador muestre correctamente la letra ‘ñ’ o los acentos. El que utilizará será UTF-8, por lo que la línea de código que deberá añadir a la cabecera de todos sus documentos será:

Observe que esta etiqueta no requiere la correspondiente de cierre.

Para que alguien encuentre su página debe proporcionar la máxima información posible a los buscadores. A tal fin, la etiqueta <meta> se usa con la combinación de atributos name y content. El primero indica de qué trata la información que se va a dar en el segundo.

Los valores de la propiedad name más utilizados son:

• “author”. Autor de la página.

• “description”. Breve resumen de su contenido.

• “keywords”. Palabras clave que alguien escribiría en un buscador para encontrarla.

El valor de la propiedad content puede ser cualquier texto.

El valor de la propiedad name también podría ser cualquier texto, por ejemplo, “autor” (escrito en castellano) u otro inventado, como “bibliografía”. Sin embargo, se recomienda encarecidamente valerse de términos muy conocidos y en inglés (como los de la lista anterior).

A modo de ejemplo, si introdujera las siguientes etiquetas en la cabecera de una página web, informaría a los buscadores de que yo soy el autor (así, sería posible encontrar esta página a partir de mi nombre), junto con las palabras clave que podría escribir alguien interesado en un libro sobre HTML:

Aunque la página web no sufrirá ningún cambio de aspecto, los buscadores dispondrán de información muy valiosa que ayudará a localizarla a todos aquellos interesados en algún libro que yo hubiera escrito sobre HTML.

2.3.2 Título del documento

El título del documento sirve para identificar una página web, ya que se muestra en la pestaña del navegador. Se establece con la etiqueta <title>, tal como se ha hecho en la siguiente línea de código:

Al igual que sucede con los metadatos (aprenderá a añadirlos a una página con la etiqueta <meta> un poco más adelante), los motores de búsqueda utilizan el título para decidir el grado de coincidencia entre su contenido y lo que busca un usuario. Además, es el texto con el que se guarda la página cuando se agrega a la lista de favoritos del navegador.

Incorpore la etiqueta anterior a la cabecera del código de su primera página, que quedaría así:

Refresque la página o cárguela de nuevo en el navegador. Como puede observar, ahora en la pestaña no aparece el nombre del archivo donde está almacenada sino el título que le acaba de dar.

Hay tres formas distintas de refrescar el contenido de una página web:

• Pulsar con el ratón en la barra de direcciones y luego la tecla de retorno de carro.

• Presionar la tecla F5.

• Pulsar sobre el botón

2.3.3 Recursos externos

Los recursos externos son archivos de diversa naturaleza (generalmente, imágenes, hojas de estilo o código JavaScript) necesarios para el correcto funcionamiento de una página web. Para incorporarlos a esta, HTML proporciona la etiqueta <link>, que deberá usarse junto con una serie de atributos que determinen su ruta de acceso, la naturaleza de su contenido y el formato en el que está almacenado.

Con el fin de mostrar la forma de utilizar esta etiqueta, la empleará para mostrar un icono (favicon) al lado del título en la pestaña del navegador.

La manera de importar el archivo que contiene la imagen de un favicon en una página web es asignar su ruta de acceso al atributo href de la etiqueta <link>. Pero ¿cómo se especifica una ruta? De forma absoluta, tal como aparecía en la barra de direcciones del navegador al abrir el documento HTML de su primera página web, o de forma relativa, a partir de la carpeta (directorio) en la que se encuentra la página web.

Para explicar cómo se escribe una ruta de acceso relativa (forma recomendada), se analizarán tres escenarios:

• El archivo se encuentra en la misma carpeta que la página web.

• El archivo se encuentra en una carpeta creada a partir de la que contiene la página web.

• El archivo se encuentra en una carpeta creada a partir de otra anterior a la que contiene la página web.

En el primer escenario, imagine que la página web “hola-mundo.html” se encuentra en la carpeta “Capitulo2” dentro de otra llamada “Practicas”. Si el archivo que contiene el icono fuera “mi_favicon.ico” y estuviera situado en la misma carpeta que la página web, la estructura de directorios resultante se podría representar de la siguiente manera:

En este caso, como la página y el recurso externo están en la misma carpeta, la ruta relativa de acceso a dicho archivo sería:

El punto (‘.’) de la ruta representa la carpeta donde se encuentra la página web.

Aunque los caracteres ‘./’ son opcionales, se recomienda utilizarlos.

Ahora, imagine un segundo escenario en el que el favicon no está en la misma carpeta que la página web, sino en otra llamada “Imagenes” creada como subcarpeta dentro de “Capitulo2”, tal como se muestra a continuación:

En ese caso, la ruta de acceso a dicho archivo sería:

Por último, imagine un tercer escenario en el que la carpeta “Imagenes”, donde se encuentra el favicon, no se ha creado como una subcarpeta de “Capitulo2”, sino dentro de “Practicas”:

En este caso, la ruta de acceso al favicon sería:

Los dos puntos de la ruta (‘..’) representan el directorio padre (“Practicas”), aquel dentro del que se ha creado “Imagenes” como subcarpeta.

Puesto que esta es la estructura de directorios del contenido descargable del libro, será la ruta utilizada en el ejercicio desarrollado en esta sección.

Siguiendo este razonamiento de forma recursiva, se podría especificar la ruta de acceso relativa de cualquier archivo situado en cualquier carpeta creada en la estructura de directorios del ordenador.

Se preguntará si el hecho de que la carpeta “Imagenes” no lleve acento es un error. No se ha puesto porque los directorios que forman parte de una ruta no pueden llevarlos. Por otra parte, en las rutas de acceso no se distingue entre mayúsculas y minúsculas. Por lo tanto, el nombre de la carpeta “imagenes” sería el mismo que “Imagenes”.

Los nombres de archivos o directorios no pueden llevar caracteres especiales como acentos o la letra ‘ñ’.

Solo con asignar la ruta de acceso del favicon al atributo href de la etiqueta <link> no es suficiente para incorporar esta pequeña imagen a la página. Tal como se indicó al principio de la sección, esta etiqueta sirve para integrar recursos externos en el propio documento HTML, que no tiene por qué ser necesariamente un favicon, sino una hoja de estilos, código JavaScript, etc. Por ese motivo, es necesario expresar de forma explícita el tipo de recurso del que se trata, en este caso un icono. Para ello, deberá utilizar el atributo rel, al que tendrá que asignar el valor icon.

Como estudiará en una sección posterior, cuando el recurso importado sea una hoja de estilo, el valor de esta propiedad será stylesheet.

Por último, para cargar un recurso externo en la página también es necesario especificar el formato del archivo (la extensión del archivo no es indicativo) con la propiedad type. En este caso concreto, su valor es “image/x-icon”.

El valor del atributo type debe ser uno de los establecidos en el estándar MIME (Multipurpose Internet Mail Extensions, extensiones multipropósito de correo de Internet), que clasifica la naturaleza y el formato de los documentos que se intercambian por Internet. Esta información la utilizará el navegador para visualizar o reproducir los archivos correctamente. Aunque no se pretende describir este estándar, observe que su formato es:

“tipo/subtipo”

Por eso, si el formato de una imagen fuera jpg, su tipo MIME sería image/jpg. Y si en vez de una imagen fuera un texto normal o HTML, este sería text/plain y text/html, respectivamente. Algo similar sucedería con los archivos de sonido o vídeo.

En consecuencia, la etiqueta <link> que deberá utilizar para cargar y mostrar la imagen contenida en el archivo “favicon.ico” (almacenado en la carpeta “Imágenes”) al lado del título, es la siguiente:

Añada dicha etiqueta al código de la cabecera de su primera página web, que quedaría así:

Refresque la página o cárguela de nuevo en el navegador. Ahora, en la pestaña verá la imagen del favicon al lado del título.

Un favicon es una imagen muy pequeña, generalmente de 16 × 16 o 32 × 32 píxeles. Puede estar almacenada en un archivo con extensión “.png”, “.gif” o, como en el ejemplo anterior, “.ico”. Si quiere utilizar alguno, puede buscar uno que encaje con sus necesidades en Internet o, aún mejor, crearlos usted mismo con un generador de favicones online. Aunque existen muchos disponibles, uno de los fáciles de usar es https://www.favicon.cc/. Fue el empleado para dibujar la inicial de mi nombre (la letra “T”).

Si experimentara problemas de visualización en Chrome, acceda a esta herramienta desde otro navegador como Edge.

Es muy intuitivo de manejar, por lo que empezará a crear sus propios iconos nada más abrirlo. Puede hacerlo de cero (botón “Create New Favicon”) o cargar una imagen que, con mayor o menor fortuna, la reducirá a un tamaño de 16 × 16 píxeles (botón “Import Image”). Además, en la propia pestaña de la herramienta se muestra cómo quedaría en su página web.

Una vez completada la imagen, solo tiene que descargarla en su ordenador pulsando el botón “Download Favicon”.

2.4 ETIQUETAS BÁSICAS DEL CUERPO

Las etiquetas que forman parte del cuerpo de un documento HTML son las relacionadas con los elementos visibles de la página (textos, imágenes, listas, hipervínculos, etc.). Estos podrán agruparse en contenedores mediante los que se sea posible aplicar un mismo estilo o situarlos de la forma deseada en una determinada zona de la pantalla.

Con el fin de describirlas de una manera ordenada, las etiquetas se estudiarán por categorías:

• Texto. Hacen posible la creación de los párrafos y los encabezados con los que se estructura el contenido. En este grupo también se incluyen aquellas que le dan cierto formato (subrayándolo, poniéndolo en cursiva, etc.). Cuando el texto tiene una semántica especial como sucede, por ejemplo, con las citas literales de otras fuentes, los títulos de libros, las películas, etc., existen etiquetas específicas que permite mostrarlo de forma diferenciada.

• Imágenes. Junto con el texto, componen el contenido principal de la página.

• Multimedia. Incorporan archivos de audio y vídeo que complementan el contenido principal.

• Hipervínculos. Si una de las principales características de la web es su carácter hipertexto, los hipervínculos son los que la hacen posible.

• Listas. Imprescindibles cuando hay que organizar o clasificar información.

• Contenedores. Agrupan los elementos de la página por su temática (aquello de lo que tratan) o con el fin de aplicar las mismas reglas de estilo.

Empecemos por las etiquetas que tienen que ver con el texto.

2.4.1 Texto

Aunque las páginas web actuales son cada vez más visuales y los elementos multimedia tienen un papel predominante, el texto sigue siendo, sin lugar a dudas, el protagonista. Por ese motivo, en esta sección empezará estudiando las etiquetas que permiten estructurarlo en capítulos y secciones.

A continuación, se presentarán aquellas otras con las que se da formato a dicho texto, hacen posible añadir subíndices o superíndices e, incluso, realizar anotaciones al margen.

En la siguiente sección conocerá un grupo de etiquetas especializado en la inserción de citas procedentes de fuentes externas o el nombre de las propias fuentes. En este grupo también se incluye aquellas que asocian descripciones emergentes a términos que requieran una aclaración adicional, como, por ejemplo, los acrónimos.

Un apartado específico dedicado a las entidades HTML le permitirá utilizar caracteres especiales que no encontrará en su teclado, con los que podrá escribir fórmulas matemáticas, añadir símbolos de uso común como los del copyright o marca registrada, etc.

Empecemos por las etiquetas más comunes: las de los encabezados y los párrafos.

2.4.1.1Encabezados y párrafos