Durante mucho tiempo, las únicas herramientas fiables para crear diseños CSS con una alta compatibilidad entre navegadores, fueron los elementos flotantes y el posicionamiento. Cumplen su propósito, pero tienen una funcionalidad bastante limitada.
Con tales herramientas resulta difícil, si no imposible, lograr obtener un diseño de página sencillo y flexible que cumpla con unos requisitos como los siguientes:
Centrar verticalmente un bloque de contenido dentro de su elemento padre.
Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
Hacer que todos los elementos en una distribución de columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.
Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de distribución de elementos dentro de la página.
Un ejemplo sencillo
En esta unidad te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. En el siguiente ejemplo verás que tenemos un elemento <header> con un encabezado de nivel superior en él, y un elemento <section> que contiene tres elementos <article>. Los usaremos para crear una distribución bastante habitual de tres columnas:
<header>
<h1>Comunidad Valenciana</h1>
</header>
<section>
<article>
<h2>Alicante</h2>
<p>El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.</p>
</article>
<article>
<h2>Valencia</h2>
<p>Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.</p>
</article>
<article>
<h2>Castellón</h2>
<p>La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.</p>
</article>
</section>
Usando el código del ejemplo anterior, crea una nueva página web con un contenido similar. Puedes utilizar el texto que quieras y los colores y fuentes que más te gusten.
Especificar qué elementos serán cajas flexibles
Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. En este caso, queremos distribuir los elementos <article>, por lo que lo activaremos la propiedad correspondiente en el elemento <section> (que se convierte en un contenedor flexible):
section {
display: flex;
}
Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra distribución en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este.
Para dejarlo un poco más claro, vamos a observar detenidamente el resultado. El elemento al que le hemos dado un valor de display de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. También podemos usar un valor de display de inline-flex si queremos que los elementos secundarios de un elemento sean elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.
Ejercicio propuesto: Cajas flexibles
Añade al ejercicio anterior el código CSS necesario para que todo el contenido dentro del elemento <section> se muestre como cajas flexibles (display: flex) que se muestran de izquierda a derecha, todas ellas con la misma altura.
Como hemos explicado antes, solo tienes que añadir tres líneas de código y ¡solucionado! Dispondrás de cajas flexibles:
section {
display: flex;
}
El modelo flexible
Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:
El eje principal (main axis) es el eje en el que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio principal (main start) y final principal (main end).
El eje transversal (cross axis) es el eje perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio transversal (cross start) y extremo cruzado (cross end).
El elemento padre que tiene establecido display: flex (el elemento <section> en nuestro ejemplo) se llama contenedor flexible.
Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan elementos flexibles (son los elementos <article> de nuestro ejemplo).
¿Filas o columnas?
A los elementos flexbox les podemos aplicar una propiedad llamada flex-direction que especifica en qué dirección aparece el eje principal, o lo que es lo mismo, en qué dirección estarán dispuestos los elementos hijo de un elemento flexbox. Por defecto, está establecido en el valor row, por lo que se presentan en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).
Ejercicio propuesto: Distribución en una columna
Añade al ejercicio anterior el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna (flex-direction: column), de forma similar a la distribución que teníamos antes de aplicar el código CSS.
Bastará con utilizar unas pocas líneas de código CSS:
También puedes distribuir elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse.
Ejercicio propuesto: Distribución en fila en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en la misma fila, pero en orden inverso (flex-direction: row-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Ejercicio propuesto: Distribución en columna en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna, pero en orden inverso (flex-direction: column-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Un problema que surge cuando tienes una cantidad fija de ancho o alto es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y no se ajustan al diseño de nuestra página. Echa un vistazo al ejemplo de este enlace (donde vemos que los elementos hijo se pueden llegar a salir de su contenedor), o fíjate en el resultado que se observa a continuación, donde el ancho de cada columna es muy reducido:
Ejercicio propuesto: Establecer el tamaño de cada columna
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> tengan un ancho fijo de 200px.
Una forma de conseguir esto fácilmente es añadir una propiedad más (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño (flex:200px) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 200px;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.
Ejercicio propuesto: Establecer el número de columnas por fila
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en dos columnas.
Una forma de conseguir esto fácilmente es utilizar la propiedad correspondiente (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño especificando el porcentaje (flex:48%) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 48%;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ejercicio propuesto: Orden inverso en cada fila
Partiendo del código anterior, cambia el valor de tu propiedad flex-direction a row-reverse. Ahora verás que todavía tienes tu distribución en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés:
Usando el código del último ejemplo anterior, añade tres ciudades más (para mostrar al menos 9 ciudades en total) y también inserta una imagen por cada una. Añade sombras al texto y a las cajas y también puedes cambiar los colores y el texto a tu gusto.
El resultado podría ser similar al siguiente (con ancho fijo o con porcentaje):
Alineación horizontal y vertical
También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo (puedes mirar el resultado aquí), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda. Si miramos el código HTML, observaremos que simplemente tenemos 5 botones dentro de un bloque <div>:
Si aplicamos algo de código CSS, por ejemplo, utilizando la propiedad align-items podremos controlar dónde se ubican los ejemplos flexibles del eje transversal:
Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.
El valor center mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal.
También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta align-items para conocer todos los detalles al respecto.
Por otro lado, también podemos modificar el valor de la propiedad justify-content para controlar dónde se ubican los elementos flexibles sobre el eje principal:
El valor por defecto es flex-start, que coloca todos los elementos al comienzo del eje principal.
Puedes usar flex-end para que se coloquen al final.
center también es un valor de justify-content (para alinear contenido), que coloca los elementos flexibles sobre el centro del eje principal.
El valor space-around puede resultar muy útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.
Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.
Ejercicio propuesto: Alineación vertical y distribución uniforme
Partiendo del código anterior de los cinco botones, cambia el valor de las propiedades align-items y justify-content como se indica a continuación. Cambia además el tamaño del bloque <div>, la fuente del texto y añade también alguna sombra al elemento <div> y a los botones y actualiza el contenido del navegador para observar el resultado.
div {
display: flex;
align-items: center;
justify-content: space-around;
}
Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear unos elementos con otros. En esta unidad echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños más complejos entendiendo cómo funciona y llegando a conocer la terminología relacionada.
¿Qué es el modelo de cajas CSS?
El modelo de cajas CSS define cómo funcionan las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página.
Partes de una caja
Al definir una caja de tipo bloque en CSS tenemos los siguientes elementos:
El contenido de la caja (o content box): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height.
El relleno de la caja (o padding box): El relleno es el espacio en blanco alrededor del contenido. Es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas.
El borde de la caja (o border box): El borde de la caja envuelve el contenido y el relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas.
El margen de la caja (o margin box): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde, así como el espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas.
El diagrama siguiente muestra estas capas:
En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.
Observemos por ejemplo la caja que viene definida por el siguiente código CSS, que establece los valores para las propiedades width, height, margin, border, y padding:
El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.
El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.
Ejercicio propuesto: Jugando con el modelo de cajas
En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase definida en CSS que establece los valores de las propiedades width, height, margin, border y padding. Utilizando ese código, crea una página web con cinco cajas diferentes, cada una con diferentes estilos. Tienes que cambiar también el color del texto (puedes elegir los colores que más te gusten). Y finalmente añade algunas sombras al texto usando diferentes estilos y colores.
<div class="caja1">Esta es una caja de 250x200px con un borde rojo de 5px y un fondo gris claro, un relleno de 10px y un margen de 25px.</div>
<div class="caja2">Esta es una caja de 300x200px con un borde verde de 7px, fondo gris, color de texto blanco, relleno de 5px y margen de 0px.</div>
...
Y el resultado:
Márgenes, relleno y bordes
En el ejemplo anterior ya has visto cómo usar las propiedades margin, padding y border. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.
Vamos a explorar estas propiedades más detalladamente.
Margen
El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.
Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar:
Crea una página web con el ejemplo que tienes a continuación y cambia los valores de los márgenes para ver cómo se desplazan las cajas debido a que el margen crea o elimina espacio (si es un margen negativo) entre este elemento y el elemento contenedor. Finalmente, añade tres cajas más con cualquier estilo que desees dentro del mismo contenedor.
<div class="contenedor">
<div class="caja1">Esta es una caja con 50% de ancho y 10px desde la parte superior e izquierda dentro de un contenedor</div>
<div class="caja2">Esta es una caja con 50% de ancho y 10px desde la parte superior y 50px a la izquierda dentro de un contenedor</div>
<div class="caja3">Esta es una caja con 50% de ancho y 10px desde la parte superior y 100px a la izquierda dentro de un contenedor</div>
...
</div>
Relleno
El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.
Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad padding, o para cada lado uno de los lados usando las propiedades equivalentes:
Si cambias los valores para el relleno de las clases «.caja» del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja. También puedes cambiar el relleno en la clase «.contenedor», que ampliará el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y aumentará el espacio entre su borde y lo que esté dentro del elemento. Crea una página web con el siguiente código y añade tres cuadros más con diferentes rellenos y estilos.
<div class="caja1">
Esta es una caja sin relleno
</div>
<div class="caja2">
Esta es una caja con 25px de relleno
</div>
<div class="caja3">
Esta es una caja con 50px de relleno
</div>
...
Bordes
El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.
Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.
Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad border.
Para establecer las propiedades de cada lado de forma individual, puedes utilizar:
En el siguiente ejemplo hemos utilizado varios métodos abreviados y largos para diseñar los bordes. Crea una nueva página web con ese código y combina las diferentes propiedades para comprobar cómo funcionan. Finalmente, añade tres cajas más y configura los estilos de borde como más te guste.
Puedes echar un vistazo a las páginas de MDN (enlazadas arriba) para obtener información sobre los diferentes estilos de borde que puedes elegir. También puedes echar un vistazo a los diferentes colores aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
<div class="caja1">Esta es una caja con diferentes tipos de bordes</div>
<div class="caja2">Esta es otra caja con diferentes tipos de bordes</div>
<div class="caja1">
<div class="caja2">Esta es una caja con diferentes tipos de bordes dentro de otra caja</div>
</div>
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
<div class="caja3">
Estas son cajas dentro de cajas
</div>
</div>
</div>
</div>
</div>
</div>
...
Here we’ll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
What is involved in styling text in CSS?
The CSS properties used to style text generally fall into two categories, which we’ll look at separately in this unit:
Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.
Bear in mind that the text inside an element is all affected as one single entity. You can’t select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>, for example).
Font color
Let’s move straight on to look at properties for styling fonts. In this section we’ll apply some different CSS properties to the same HTML sample.
The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property):
p {
color: red;
}
Proposed exercise
Create a new web page made of 2 files: one HTML file with the code below, and another one with some CSS code to change the <h1> and <p> elements to any color you like. Do not forget to link the CSS file from the HTML file, and validate your code.
<h1>Tommy the cat</h1>
<p>Well I remember it as though it were a meal ago...</p>
<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
Font families
To set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:
p {
font-family: arial;
}
This would make all paragraphs on a page adopt the arial font, which is found on any computer.
Default fonts
CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive and fantasy. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.
The five names are defined as follows (you will find below some examples about how they look like):
serif: Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces).
sans-serif: Fonts that don’t have serifs.
monospace: Fonts where every character has the same width, typically used in code listings.
cursive: Fonts that are intended to emulate handwriting, with flowing, connected strokes.
fantasy: Fonts that are intended to be decorative.
Proposed exercise: Default fonts
Using the code of the previous exercise, copy and paste the paragraphs several times (5 in total) and define some classes to apply all default fonts (serif, sans-serif, monospace, cursive, fantasy). You must set a different font and color each time. Your source code and the result should look something like this:
HTML code:
<h1>Tommy the cat</h1>
<p class="serif">Well I remember it as though it were a meal ago...</p>
<p class="serif">Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
...
<p class="fantasy">Well I remember it as though it were a meal ago...</p>
<p class="fantasy">Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p>
Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.
Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).
The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):
Arial (sans-serif)
Courier New (monospace)
Georgia (serif)
Times New Roman (serif)
Trebuchet MS (sans-serif)
Verdana (sans-serif)
Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.
Proposed exercise: Main safe fonts
Create a new web page with a header (<h1>) and six other paragraphs (<p>) with any content you like, and set a different font for each of them (Arial, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana). You can also change the color of the text too.
Font names that have more than one word (like Trebuchet MS) need to be surrounded by quotes, for example:
font-family: "Trebuchet MS";
Font stacks
Since you can’t guarantee the availability of the fonts you want to use on your webpages (even a web font could fail for some reason), you can supply a font stack so that the browser has multiple fonts it can choose from. This simply involves a font-family value consisting of multiple font names separated by commas, e.g.
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.
It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser’s default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!
Proposed exercise: More safe fonts and font stacks
Create a new web page with a header and five other paragraphs with any content you like, and set a different font for each of them, but this time you cannot use any font used previously: you must select some other fonts from cssfontstack.com. Moreover, in this exercise you have to use font stacks to ensure at least one font is always available, and you can also change the color too. Finally, check your web page using several browsers from several devices and operating systems, to make sure that all fonts are shown.
If you are changing the color and the font family using font stacks, your CSS and HTML code should look like this:
Online font services generally store and serve fonts for you, so you don’t have to worry about the font availability, and generally you just need to insert a simple line or two of code into your site to make everything work. Examples include Adobe Fonts and Cloud.typography. Most of these services are subscription-based, with the notable exception of Google Fonts, a useful free service, especially for rapid testing work and writing demos.
Most of these services are easy to use, so we won’t cover them in great detail. Let’s have a quick look at Google fonts, so you can get the idea. These are the steps that you have to follow to use one or several of the fonts they provide:
You may use the filters to display the kinds of fonts you like.
To select a font family, click on it, and after that press the «+ Select this style» option on the right hand side.
When you’ve chosen the font families, press the «View your selected families» icon at the top right corner of the page.
In the resulting screen, you first need to copy the line of HTML code shown and paste it into the head of your HTML file. Put it above the existing <link> element, so that the font is imported before you try to use it in your CSS.
You then need to copy the CSS declarations listed into your CSS as appropriate, to apply the custom fonts to your HTML.
Proposed exercise: Google fonts
Create a web page with ten paragraphs, each one using a different Google font.
For example, to use the Google fonts «Nerko One», «Permanent Marker» and «Rock Salt», your HTML code should look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web font example</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nerko+One&family=Permanent+Marker&family=Rock+Salt&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Web font example</h1>
<p class="nerko">This is a text with Nerko One font</p>
<p class="marker">This is a text with Permanent Marker font</p>
<p class="rock">This is a text with Rock Salt</p>
</body>
</html>
Font size (set with the font-size property) can take values measured in several units (such as percentages), however the most common units you’ll use to size text are:
px (pixels): The number of pixels high you want the text to be (this is an absolute unit).
em: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but t is quite natural once you get used to it, and you can use em to size everything, not just text. You can have an entire website sized using em, which makes maintenance easy.
rem: These work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle (rem is not supported in Internet Explorer 8 and below).
Absolute size (pixels)
The easiest way to change the size of your text is setting a specific number of pixels. However, this might not be the best solution, since in case you want to increase (or decrease) the size of all text in your website, you should change each value manually (one time per each CSS rule). So, we are going ahead with a first exercise using pixels, but after that we will use a more convenient way in another exercise using relative values.
Proposed exercise: Absolute sizing with «px»
Create a new web page with at least 15 paragraphs of some text you like, and set the font size for each paragraph a bit larger each time. You must use pixels to set each font size.
Your source code and result should look like this (you may choose any class names, colors and sizes you like):
<p class="ten">This is a text with 10 px font size</p>
<p class="eleven">This is a text with 11 px font size</p>
<p class="twelve">This is a text with 12 px font size</p>
<p class="thirteen">This is a text with 13 px font size</p>
...
Relative size («em» and «rem»)
The font-size of an element is inherited from that element’s parent element. This all starts with the root element of the entire document (<html>) the font-size of which is set to 16 px as standard across browsers. Any paragraph (or another element that doesn’t have a different size set by the browser) inside the root element will have a final size of 16 px. Other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of 32 px.
Things become more tricky when you start altering the font size of nested elements. For example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?
<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
<p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>
You would need to set its em value to 20/24, or 0.83333333 em. The maths can be complicated, so you need to be careful about how you style things. It is best to use rem where you can, to keep things simple, and avoid setting the font-size of container elements where possible.
When sizing your text, it is usually a good idea to set the base font-size of the document to 10px, so that then the maths is a lot easier to work out (required (r)em values are then the pixel font size divided by 10, not 16). After doing that, you can easily size the different types of text in your document to what you want. Also it is a good idea to list all your font-size rulesets in a designated area in your stylesheet, so they are easy to find.
Proposed exercise: Relative sizing with «rem»
Create a new web page with at least 15 paragraphs of some text you like, and set the font size for each paragraph a bit larger each time. This time, you must use relative sizing to set each font size (for example, with «rem» units). When you finish writing your code, check the results using your browser, and set different values for the main size (inside the <html> element) and check that the size of all the paragraphs changes accordingly.
Your source code and result should look like this (you may choose any class names, colors and sizes you like):
<p>This is a text with 1 rem font size</p>
<p class="eleven">This is a text with 1.1 rem font size</p>
<p class="twelve">This is a text with 1.2 rem font size</p>
<p class="thirteen">This is a text with 1.3 rem font size</p>
...
Font style, font weight, text transform, and text decoration
CSS provides four common properties to alter the visual weight/emphasis of text:
font-style: Used to turn italic text on and off. Possible values are as follows (you’ll rarely use this, unless you want to turn some italic styling off for some reason):
normal: Sets the text to the normal font (turns existing italics off)
italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
font-weight: Sets how bold the text is. This has many values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you’ll rarely use any of them except for normal and bold:
normal, bold: Normal and bold font weight
lighter, bolder: Sets the current element’s boldness to be one step lighter or heavier than its parent element’s boldness.
100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.
text-transform: Allows you to set your font to be transformed. Values include:
none: Prevents any transformation.
uppercase: Transforms ALL TEXT TO CAPITALS.
lowercase: Transforms all text to lower case.
capitalize: Transforms all words to Have The First Letter Capitalized.
full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
text-decoration: Sets/unsets text decorations on fonts (you’ll mainly use this to unset the default underline on links when styling them.) Available values are:
none: Unsets any text decorations already present.
underline: Underlines the text.
overline: Gives the text an overline.
line-through: Puts a strikethrough over the text.
You may use some combinations of the options above. For example:
p {
font-weight: bold;
text-transform: uppercase;
text-decoration: line-through;
}
You should also note that text-decoration can accept multiple values at once, if you want to add multiple decorations simultaneously, for example text-decoration: underline overline. Also note that text-decoration is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color. You can use combinations of these property values to create interesting effects, for example:
p {
font-weight: bold;
text-transform: uppercase;
text-decoration: line-through red wavy;
}
Proposed exercise: Style, weight, transform and decoration
Create a website with at least 15 paragraphs to show most of the values that can be used with font-style , font-weight , font-transform and font-decoration properties.
This is an example of the result you should get (you may choose your own combinations):
Text drop shadows
You can apply drop shadows to your text using the text-shadow property. This takes up to four values, as shown in the example below:
text-shadow: 4px 4px 5px red;
The four properties are as follows:
The horizontal offset of the shadow from the original text. This can take most available CSS length and size units, but you’ll most commonly use px. Positive values move the shadow right, and negative values left. This value has to be included.
The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
The blur radius. A higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
The base color of the shadow, which can take any CSS color unit. If not included, it defaults to currentColor, i.e. the shadow’s color is taken from the element’s color property.
You can also apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:
text-shadow: 1px 1px 1px red,
2px 2px 1px red;
Proposed exercise: Simple shadows
Create a website with at least 15 paragraphs with shadows, each one with different offsets and colors. You can also change any other properties you like, such as the font-family. You should use Google Fonts to ensure that everything is displayed in the right way for all the operating systems and browsers.
This is an example of the result you should get (you may choose your own combinations):
Proposed exercise: Multiple shadows
Create a website with at least 10 paragraphs each one with multiple shadows and also different offsets and colors. You can also change any other properties you like, such as the font-family and font-size. You should use Google Fonts to ensure that everything is displayed in the right way for all the operating systems and browsers.
This is an example of the result you should get (you may choose your own combinations):
Text-alignment
The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:
left: Left-justifies the text.
right: Right-justifies the text.
center: Centers the text.
justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully, since sometimes it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.
For example, you can center some text just by using the following CSS code:
text-align: center;
Proposed exercise: Alignment types
Create a web page with 4 headers and 4 paragraphs, each one with a different alignment type.
You can use any text you like, but keeping in mind that you must insert several lines to properly see how the alignment is done:
Line height
The line-height property sets the height of each line of text. This can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option (the font-size is multiplied to get the line-height). Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you’d use this:
line-height: 1.6;
Proposed exercise: Line heights
Create a web page with at least 3 headers and 3 paragraphs, each one with a different line height.
Letter and word spacing
The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won’t use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.
So as an example, we could apply some word-spacing and letter-spacing like this:
word-spacing: 4px;
letter-spacing: 4px;
Proposed exercise: Spacing
Create a web page with at least 2 headers and 2 paragraphs, each one with different word and letter spacing (you may choose any values you like).
Font shorthand
Many font properties can also be set through the shorthand property font. These are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. Among all those properties, only font-size and font-family are required when using the font shorthand property. A forward slash has to be put in between the font-size and line-height properties.
A full example would look like this:
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
Proposed exercise: Font properties in one line
Create a new web page with at least five paragraphs and change the font properties using one single CSS line (font shorthand) for each one.
Other properties worth looking at
The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you’ve become used to using the above, you should also explore the following:
Font styles:
font-variant: Switch between small caps and normal font alternatives.
font-kerning: Switch font kerning options on and off.
font-variant-numeric: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-variant-position: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
font-size-adjust: Adjust the visual size of the font independently of its actual font size.
font-stretch: Switch between possible alternative stretched versions of a given font.
text-underline-position: Specify the position of underlines set using the text-decoration-line property underline value.
text-rendering: Try to perform some text rendering optimization.
Text layout styles:
text-indent: Specify how much horizontal space should be left before the beginning of the first line of the text content.
text-overflow: Define how overflowed content that is not displayed is signaled to users.
white-space: Define how whitespace and associated line breaks inside the element are handled.
word-break: Specify whether to break lines within words.
direction: Define the text direction (This depends on the language and usually it’s better to let HTML handle that part as it is tied to the text content.)
hyphens: Switch on and off hyphenation for supported languages.
line-break: Relax or strengthen line breaking for Asian languages.
text-align-last: Define how the last line of a block or a line, right before a forced line break, is aligned.
En el módulo de Introducción al HTML, puedes encontrar los conceptos básicos para saber qué es HTML y cómo se usa para definir documentos que puedan se interpretados por un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Estos estilos vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al fichero HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito. Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así, con los mismos estilos por defecto. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, pudiendo establecer el diseño que cada uno desee.
¿Para qué sirve CSS?
Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.
Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: HTML es el más común, pero también existen otros como SVG o XML.
Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los navegadores, como por ejemplo Firefox, Chrome o Edge, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.
El código CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar también para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación.
Sintaxis de CSS
CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre con letras grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:
h1 {
color: blue;
font-size: 5em;
}
La regla se abre con un selector. Este selecciona el elemento HTML al que queremos aplicar nuestros estilos. En este caso, cambiaremos el diseño de los encabezados de nivel uno (<h1>).
Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.
Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra:
Algunos valores se aprenden rápidamente, mientras que otros son difíciles de recordar. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o si deseas saber qué más se puede usar como valor. Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características) enumeradas en la referencia CSS del proyecto MDN. También puedes buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre alguna particularidad de CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».
Añadir CSS a un documento
Lo primero que debemos hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el código CSS desde el encabezado del documento. Para ello bastará con crear un archivo en la misma carpeta que el documento HTML y guardarlo como estilos.css. La extensión .css indicará que nuestro archivo contiene código CSS.
Para vincular estilos.css a index.html, bastará con añadir la siguiente línea en algún lugar dentro del <head> del documento HTML:
<link rel="stylesheet" href="estilos.css">
Este elemento <link> utiliza el atributo rel para indicarle al navegador que debe utilizar una hoja de estilo y especifica la ubicación de esa hoja de estilo con el valor del atributo href. Puedes probar si el código CSS funciona correctamente añadiendo una regla al fichero estilos.css. Para ello puedes usar cualquier editor de código para añadir lo siguiente al archivo CSS:
h1 {
color: blue;
}
Debes tener en cuenta que después de hacer cualquier cambio, deberás guardar los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser azul. Si esto es correcto, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no cambia el color del encabezado, verifica que hayas escrito todo correctamente.
Puedes continuar trabajando en estilos.css localmente o usar cualquier otro editor (como repl.it) para continuar con este tutorial.
Ejercicio propuesto: Enlazar ficheros y añadir estilos
Nuestro punto de partida en esta unidad es un documento HTML. Copia el código que tienes a continuación y guárdalo en un nuevo archivo HTML para trabajar en tu propio ordenador. Después de eso, crea un nuevo archivo CSS para configurar todos los títulos <h1> en color rojo y guárdalo con el nombre «estilos.css» en la misma carpeta que el documento HTML. Finalmente verifica los resultados usando un navegador y no olvides validar el código.
Recuerda que la parte más importante de este ejercicio es vincular tu archivo CSS colocando una sola línea dentro de la sección <head>. Después de eso, dentro de «estilos.css» solo necesitarás insertar tres líneas:
HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Empezando con CSS</title>
<!-- Utilizaremos los estilos que tengamos dentro de 'estilos.css' -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Yo soy un estilo de nivel 1</h1>
<p>Esto es un párrafo de texto.</p>
<p>Esto es un párrafo y también un enlace a <a href="https://google.com">Google</a>.</p>
<ul>
<li>Primer elemento de una lista</li>
<li>Segundo elemento de una lista</li>
<li>Tercer elemento de una lista</li>
</ul>
</body>
</html>
Fichero CSS (estilos.css):
h1 {
...
}
Ejercicio propuesto: Estilos de encabezados
Usando los archivos HTML y CSS del ejercicio anterior, añade algunos encabezados <h2> y cambia el color con el que aparecen utilizando CSS. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para seleccionar todos los párrafos del documento, se usa el selector p. De esta forma, para hacer que el texto de todos los párrafos se muestren de color verde, bastará con utilizar el siguiente código:
p {
color: green;
}
Puedes utilizar múltiples selectores a la vez, separándolos con una coma. Por ejemplo, si queremos que el texto de todos los párrafos y de todos los elementos de cualquier lista sea verde, el código a utilizar sería el siguiente:
p, li {
color: green;
}
Ejercicio propuesto: Cambiar el color de varios elementos
Usando los archivos HTML y CSS del ejercicio anterior, cambia el color de los párrafos y elementos de la lista. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
CSS nos ofrece la capacidad de aplicar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anchor). Tiene diferentes estados dependiendo de si se ha visitado o no, si se pasa el ratón por encima, o si se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. Utilizando el código CSS que se muestra a continuación se deberían visualizar en color rosa los enlaces que no se han visitado y en verde los que sí.
También puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:
a:hover {
text-decoration: none;
}
En el ejemplo de arriba hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, es conveniente recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento.
Ejercicio propuesto: Aplicar estilos a los enlaces
Usando los archivos HTML y CSS del ejercicio anterior, inserta varios párrafos con algunos otros enlaces a tus páginas preferidas y cambia el color de todos los enlaces. También debes usar diferentes colores cuando se ha visitado el enlace y cuando el ratón está sobre el enlace. Puedes probar varios colores y elegir el que más te guste (red, green, blue, gray, purple, olive, navy, etc). Como viene siendo habitual, verifica los resultados con tu navegador y no olvides validar el código.
Cambiar el comportamiento predeterminado de los elementos
Cuando visualizamos una página web, incluso con un código tan simple como el de nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se amontonaría y tendríamos que darle formato desde cero. Todos los navegadores modernos suelen mostrar el contenido HTML por defecto de la misma manera.
Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia. Un buen ejemplo es <ul>, que muestra una lista desordenada. Por defecto tiene viñetas, pero si decidimos que no las queremos, podemos eliminarlas fácilmente de este modo:
ul {
list-style-type: none;
}
Puedes consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior donde podrás probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página). También descubrirás en esa página que además de eliminar las viñetas de la lista, también puedes cambiarlas.
Ejercicio propuesto: Cambiar las viñetas de una lista
Utilizando los archivos HTML y CSS del ejercicio anterior, intenta configurar el list-style-type con square. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Deberías obtener un resultado similar a este:
Ejercicio propuesto: Cambiar el estilo de una lista numerada
Usando los archivos HTML y CSS del ejercicio anterior, agregue una lista ordenada (<ol>) y configura el list-style-type con upper-roman. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
Deberías obtener un resultado similar a este:
Utilizando clases
Hasta ahora, hemos utilizado selectores cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y establecer el estilo que se aplicará al utilizar dicha clase.
Puedes añadir un atributo de clase a cualquier elemento dentro de tu fichero HTML. Por ejemplo, podríamos utilizar el atributo «class» sobre elementos de tipo lista de la siguiente forma:
Después de escribir ese código HTML, en tu CSS, puedes diseñar las clases lista-roja-con-cuadrados y lista-roja-con-cuadrados creando un par de selectores que comiencen con un punto:
Para observar el resultado después de escribir nuevo código HTML y CSS, bastará con guardar los archivos y refrescar el contenido del navegador pulsando Ctrl+F5.
Ejercicio propuesto: Estilos diferentes para cada lista
Usando los archivos HTML y CSS del ejercicio anterior, añade varias listas para obtener algo similar al resultado que se muestra a continuación. Como de costumbre, verifica los resultados con tu navegador y no olvides validar el código.
En lo que respecta a las listas no ordenadas (<ul>) debes crear 4 clases diferentes, cada una de ellas con un valor diferente de la propiedad list-style-type (none, disc, circle, square). Para las listas ordenadas (<ol>) debes crear otras clases, cada una también con valores diferentes para la propiedad list-style-type (upper-roman, lower-greek, lower-alpha, upper-alpha).
Ejercicio propuesto: Usar CSS con encabezados, párrafos y texto general
Cambia el color, las viñetas y la numeración de diversas listas de los ejercicios de listas de la unidad 4 de HTML (https://fernandoruizrico.com/html-unidad-4/). No olvides validar tu código de nuevo.
Al principio, las páginas web solo contenían texto y resultaba más bien aburrida. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes). Existen elementos multimedia que debemos tener en cuenta, pero es lógico comenzar con el humilde elemento <img> utilizado para insertar una imagen simple en una página web. En esta unidad veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando <figure>.
¿Cómo ponemos una imagen en una página web?
Para poner una imagen simple en una página web, utilizamos el elemento <img>. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento <a> contiene los valores del atributo href.
Por ejemplo, si tu imagen se llama dinosaurio.jpg, y está en el mismo directorio que tu página HTML, incluir la imagen de la siguiente manera:
<img src="dinosaurio.jpg" />
El código anterior debería darnos el resultado siguiente:
Si la imagen está en el subdirectorio imagenes, ubicado en el mismo directorio que la página HTML (lo que Google recomienda con fines de indexación y posicionamiento en buscadores SEO), entonces la imagen se puede incluir así:
<img src="imagenes/dinosaurio.jpg" />
Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, elige para tu imagen un nombre descriptivo. Por ejemplo, dinosaurio.jpg es mejor que img835.png.
También puedes incluir la imagen usando la URL absoluta, por ejemplo:
Aunque esta última opción es menos habitual, ya que provoca que el navegador tenga que buscar la dirección IP desde el servidor DNS cada vez. Al ser posible, conviene almacenar las imágenes de tu página web en el mismo servidor donde guardes tu código HTML.
Por último, conviene mencionar que la mayoría de imágenes tienen derechos de autor. Por ello, no debes mostrar una imagen en tu página web a menos que:
seas dueño de la imagen,
tengas permiso escrito explícito del dueño de la imagen o
tengas suficientes pruebas de que la imagen es de dominio público.
El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no debes apuntar nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama hotlinking. Asimismo es ilegal robar el ancho de banda de alguien. Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.
Texto alternativo
El próximo atributo que veremos es alt. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no se pueda mostrar o tarde demasiado en mostrarse por una conexión de Internet muy lenta. Por ejemplo, nuestro código anterior podría modificarse así:
<img src="imagenes/dinosaurio.jpg"
alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados">
...
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="MDN logo" />
La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre de archivo de nuestra imagen como dinosaurioooooo.jpg, el navegador no podrá mostrar la imagen, y en su lugar mostrará el texto alternativo.
Además de ser necesario (la validación de tu página web no será correcta si omites algún texto alternativo), el texto alternativo podría resultar necesario por varias razones:
El usuario tiene alguna discapacidad visual y utiliza un lector de pantalla para leer el contenido de la web. De hecho, disponer de texto alternativo para describir las imágenes es útil para la mayoría de los usuarios.
Como ya hemos dicho anteriormente, es posible que se haya escrito mal el nombre del archivo o su ruta.
El navegador no admite el tipo de imagen. Algunas personas aún usan navegadores de solo texto, como Lynx, que muestran el texto del atributo alt.
Quieres que los motores de búsqueda puedan utilizar este texto. Por ejemplo, los motores de búsqueda pueden hacer coincidir el texto alternativo con la consulta de búsqueda.
Los usuarios han desactivado las imágenes para reducir el volumen de transferencia de datos y de distracciones. Esto puede suceder especialmente en teléfonos móviles y en países en los que el ancho de banda está bastante limitado.
Para saber qué hay que escribir exactamente en el atributo alt, debemos pensar primero por qué la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:
Decoración. Para las imágenes decorativas deberían utilizarse imágenes de fondo CSS. Pero si es inevitable usar HTML, la mejor forma de hacerlo es con alt="". Si la imagen no es parte del contenido, el lector de pantalla no debería malgastar el tiempo en leerla.
Contenido. Si tu imagen proporciona información significativa, se debe proporcionar la misma información en un texto alternativo (alt) breve. O mejor aún, en el texto principal que todos pueden ver. No escribas texto alternativo redundante. ¿Acaso no resultaría molesto para un usuario con visión ordinaria si todos los párrafos se escribieran dos veces en el contenido principal? Si la imagen se describe en el cuerpo principal del texto de modo adecuado, puedes simplemente usar alt="".
Enlace. Al poner una imagen dentro de una etiqueta <a> para convertirla en un enlace, aun debes proporcionar texto de enlace accesible. En tal caso podrías escribirlo dentro del mismo elemento <a>, o dentro del atributo alt de la imagen. Lo que mejor funcione en tu caso.
Texto. No deberías poner tu texto en imágenes. Si tu título de encabezado principal necesita, por ejemplo, un sombreado paralelo, usa CSS para ello en vez de poner el texto en una imagen. Pero, si realmente no puedes evitarlo, deberías proporcionar el texto en el atributo alt.
Resumiendo, el objetivo es ofrecer una experiencia de navegación adecuada en términos de usabilidad, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario se pierda ninguna parte del contenido.
Puedes usar los atributos ancho (width) y alto (height) para especificar la anchura y altura de cada imagen. Puedes encontrar el ancho y el alto de cualquier imagen de diversas maneras. Por ejemplo, con el botón derecho del ratón, o en Mac también puedes usar Cmd + I para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:
<img src="imagenes/dinosaurio.jpg"
alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados"
width="400"
height="341">
Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse pixeladas o borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la proporción de aspecto correcta. Deberías utilizar un editor de imágenes para dar a tu imagen el tamaño adecuado antes de colocarla en tu página web. Y si tienes que alterar el tamaño de una imagen desde tu código fuente, es mejor usar CSS.
Título de la imagen
Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:
<img src="imagenes/dinosaurio.jpg"
alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados"
width="400"
height="341"
title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">
Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces. Sin embargo, no se recomienda incluir esta propiedad en las imágenes, ya que title presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en este tema, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O’Hara.
Resumiendo, es más adecuado incluir en el texto principal de la página la información que pondríamos en el title, en lugar de adjuntarla en la imagen.
Ejercicio propuesto: Insertar imágenes
Crea una página web para mostrar varias imágenes. Tienes que usar la etiqueta básica <img> y el atributo «src» para apuntar a la URL de cada imagen individual. Por ejemplo, puedes usar imágenes como estas:
También debes añadir un texto alternativo a cada imagen y verificar que se muestra al escribir mal la URL de cada imagen. Finalmente experimente con diferentes valores de ancho y alto para ver cuál es su efecto.
Imágenes con enlaces
Este ejemplo se basa en los anteriores y muestra cómo convertir la imagen en un enlace. Para hacerlo, debes anidar la etiqueta <img> dentro de <a>. Además, se debe usar el texto alternativo para describir el recurso al que apunta el enlace, como si se estuviera usando un enlace de texto en su lugar:
<a href="https://developer.mozilla.org">
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="Visita la web de MDN" />
</a>
Ejercicio propuesto: Las diez páginas más importantes
Crea una página web que muestre una lista ordenada (<ol>) de las diez páginas web que más te gusten. Debes utilizar imágenes para crear enlaces a cada página y establecer el atributo de altura con el mismo valor para todas las imágenes para que todas tengan la misma altura. Por ejemplo:
Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:
<div class="figure">
<img src="imagenes/dinosaurio.jpg"
alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados"
width="400"
height="341">
<p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
</div>
Este código es completamente correcto, ya que incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?
Una solución mejor es utilizar los elementos HTML5 <figure> y <figcaption>. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior podría reescribirse así:
<figure>
<img src="imagenes/dinosaurio.jpg"
alt="La cabeza y el torso de un esqueleto de dinosaurio;
tiene una cabeza grande con dientes largos y afilados" width="400"
height="341">
<figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
</figure>
El elemento <figcaption> le dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento <figure>. Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo alt cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto alt proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra.
También debemos tener en cuenta que el elemento figure no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:
Expresa un significado en una forma compacta y fácil de entender.
Se puede poner en varios sitios en el flujo lineal de la página.
Proporciona información esencial que da apoyo al texto principal.
Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.
Ejercicio propuesto: Figuras con leyenda
Crea una página web para mostrar varias imágenes que te gusten, usando el elemento <figure>, y agrega un título a cada una usando el elemento <figcaption>, como se hace en el siguiente ejemplo:
<figure>
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="Página web de MDN (Mozilla Developer Network)">
<figcaption>MDN Logo</figcaption>
</figure>
<figure>
<img src="https://validator.w3.org/images/w3c.png"
alt="Validador de W3C">
<figcaption>W3C Logo</figcaption>
</figure>
...
Ejercicio propuesto: Las diez películas más interesantes
Crea una nueva página web que muestre una lista ordenada (<ol>) de las diez películas que más te gusten. En este caso, debe utilizar figuras con subtítulos para crear enlaces a cada página. Utiliza el mismo valor para el atributo de altura de todas las imágenes para que todas tengan la misma altura. Por ejemplo:
<ol>
<li>
<a href="https://en.wikipedia.org/wiki/Steve_Jobs_(film)">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/49/SteveJobsMacbookAir.JPG"
alt="Steve Jobs y el Macbook Air" height="100" />
<figcaption>Steve jobs</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/2001:_A_Space_Odyssey_(film)">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/0/09/2001child2.JPG"
alt="Bebé, espacio, y la Tierra" height="100" />
<figcaption>2001: Una Odisea Espacial</figcaption>
</figure>
</a>
</li>
...
</ol>
Test
Comprueba tus conocimientos con este test sobre imágenes y otros conceptos relacionados con esta unidad.
Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.
Listas no ordenadas (elemento <ul>)
Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:
leche
huevos
pan
hummus
Utilizando HTML, esa misma lista se mostrará de la siguiente forma:
leche
huevos
pan
hummus
Para conseguir ese resultado y mostrar la lista con viñetas, cada vez que creemos una lista no ordenada, debemos utilizar el elemento <ul> (unordered list) para agrupar todos los artículos dentro de la lista. A continuación deberemos encerrar cada artículo con un elemento <li> (list item):
Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:
Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras glorietas
Gira a la izquierda en la tercer glorieta
El colegio está a la derecha, 300 metros más adelante
Utilizando HTML, esa misma lista se mostrará de la siguiente forma:
Conduce hasta el final de la calle
Gira a la derecha
Sigue derecho por las dos primeras glorietas
Gira a la izquierda en la tercer glorieta
El colegio está a la derecha, 300 metros más adelante
La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta <ol> («ordered list»), en lugar de <ul>:
<ol>
<li>Conduce hasta el final de la calle</li>
<li>Gira a la derecha</li>
<li>Sigue derecho por las dos primeras glorietas</li>
<li>Gira a la izquierda en la tercer glorieta</li>
<li>El colegio está a tu derecha, 300 metros más adelante</li>
</ol>
Ejercicio propuesto: Receta de hummus
Llegados a este punto de esta unidad, tienes toda la información necesaria para marcar la página de ejemplo con una receta que aparece a continuación. Utilizando dicho texto, crea un nuevo fichero y utiliza las etiquetas adecuadas para mejorar el formato con el que se muestra la receta.
Note: Debes utilizar <h1> para el título principal, <h2> para el resto de títulos, <p> para los párrafos, <ul> para los ingredientes, y <ol> para las instrucciones. Si tienes dudas, puedes consultar el ejemplo completo en el repositorio de Github: text-complete.html.
Receta rápida de hummus
Con esta receta puedes conseguir un hummus rápido y sabroso, sin ensuciar. Ha sido adaptado a partir de varias recetas diferentes que he leído a lo largo de los años.
El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabrosa y se puede combinar con ensalada, carnes a la brasa y pan de pita.
Ingredientes
1 lata (400g) de garbanzos
175g de tahini
6 tomates secos
Medio pimiento rojo
Una pizca de pimienta de cayena
1 diente de ajo
Una pizca de aceite de oliva
Instrucciones
Pelar el ajo y picarlo en trozos gruesos.
Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
Meter todos los alimentos en un procesador de alimentos.
Mezclar todos los ingredientes hasta conseguir una pasta.
Mezclar brevemente si deseas un hummus "grueso".
Picar durante más tiempo si se desea obtener un hummus "suave".
Para obtener un sabor diferente, puedes intentar mezclar un poco de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Experimenta para probar qué te gusta más.
Almacenamiento
Mantener el hummus terminado en la nevera en un recipiente cerrado. Deberías poder consumirlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.
El hummus es apto para congelar; se puede descongelar y consumir en un par de meses.
Listas anidadas
Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior:
Primer elemento
Segundo elemento
Primer subelemento del segundo elemento
Segundo subelemento del segundo elemento
Tercer subelemento del segundo elemento
Tercer elemento
<ul>
<li>Primer elemento</li>
<li>Segundo elemento
<!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
<ul>
<li>Primer subelemento del segundo elemento</li>
<li>Segundo subelemento del segundo elemento</li>
<li>Tercer subelemento del segundo elemento</li>
</ul>
<!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
</li>
<li>Tercer elemento</li>
</ul>
Y es posible que también quieras tener por ejemplo una lista ordenada dentro de una lista desordenada:
Primer elemento
Segundo elemento
Primer subelemento del segundo elemento
Segundo subelemento del segundo elemento
Tercer subelemento del segundo elemento
Tercer elemento
<ul>
<li>Primer elemento</li>
<li>Segundo elemento
<!-- La etiqueta </li> de cierre del primer elemento no se coloca aquí -->
<ol>
<li>Primer subelemento del segundo elemento</li>
<li>Segundo subelemento del segundo elemento</li>
<li>Tercer subelemento del segundo elemento</li>
</ol>
<!-- La etiqueta </li> de cierre del primer elemento se coloca aquí -->
</li>
<li>Tercer elemento</li>
</ul>
Tomemos ahora como ejemplo la segunda lista de nuestro ejemplo de la receta:
<ol>
<li>Pelar el ajo y picarlo en trozos gruesos.</li>
<li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
<li>Meter todos los alimentos en un procesador de alimentos.</li>
<li>Mezclar todos los ingredientes hasta conseguir una pasta.</li>
<li>Mezclar brevemente si deseas un hummus "grueso".</li>
<li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
</ol>
Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:
<ol>
<li>Pelar el ajo y picarlo en trozos gruesos.</li>
<li>Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
<li>Meter todos los alimentos en un procesador de alimentos.</li>
<li>Mezclar todos los ingredientes hasta conseguir una pasta.
<ul>
<li>Mezclar brevemente si deseas un hummus "grueso".</li>
<li>Picar durante más tiempo si se desea obtener un hummus "suave".</li>
</ul>
</li>
</ol>
Ejercicio propuesto: Receta de hummus con lista anidada
Usando el ejercicio propuesto anteriormente de la receta de hummus, actualiza la segunda lista para usar elementos anidados para obtener el siguiente resultado:
Pelar el ajo y picarlo en trozos gruesos.
Retirar las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.
Meter todos los alimentos en un procesador de alimentos.
Mezclar todos los ingredientes hasta conseguir una pasta:
Mezclar brevemente si deseas un hummus «grueso».
Picar durante más tiempo si se deseas obtener un hummus «suave».
Ejercicio propuesto: Lista de la compra
Escribe tu propia lista de la compra, con al menos 20 productos. Debes utilizar tipos y subtipos, colocando los elementos en listas anidadas como en el siguiente ejemplo:
Crea un nuevo archivo que contenga una lista de tareas, con al menos 20 elementos. Debes usar listas anidadas combinando tareas e instrucciones, por ejemplo, insertando listas ordenadas dentro de una lista desordenada, más o menos como en el ejemplo siguiente:
Alimentar al gato
Limpiar el cuenco
Abrir la comida para gatos
Poner la comida en el cuenco
Lavar el coche
Aspirar el interior
Lavar el exterior
Encerar el exterior
Comprar comida
Planificar el menú
Limpiar la nevera
Escribir la lista de la compra
Ir al supermercado
<ul>
<li>Alimentar al gato
<ol>
<li>Limpiar el cuenco</li>
<li>Abrir la comida para gatos</li>
<li>Poner la comida en el cuenco</li>
</ol>
</li>
<li>Lavar el coche
<ol>
<li>Aspirar el interior</li>
<li>Lavar el exterior</li>
<li>Encerar el exterior</li>
</ol>
</li>
<li>Comprar comida
<ol>
<li>Planificar el menú</li>
<li>Limpiar la nevera</li>
<li>Escribir la lista de la compra</li>
<li>Ir al supermercado</li>
</ol>
</li>
</ul>
Listas de descripciones (elemento <dl>)
Ya hemos visto cómo marcar listas básicas en HTML. Ahora veremos un tercer tipo de lista con el que te puedes llegar a encontrar: listas de descripciones. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:
soliloquio
En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
monólogo
En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
aparte
En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas: <dl> («description list» o lista de descripciones). Además, cada término está envuelto en un elemento <dt> («description term» o término a describir), y cada descripción está envuelta en un elemento <dd> («description definition» o definición de descripción).
Colocando las etiquetas HTML adecuadas, el ejemplo anterior quedaría de la siguiente forma:
<dl>
<dt>soliloquio</dt>
<dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
<dt>monólogo</dt>
<dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
<dt>aparte</dt>
<dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
</dl>
De forma predeterminada, el navegador mostrará las listas de descripciones con las descripciones sangradas un poco más que los términos, o con los términos un poco más destacados que las descripciones:
Para concluir, ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:
<dl>
<dt>aside</dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
<dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
</dl>
Ejercicio propuesto: Café, té y chocolate
Es hora de probar suerte con las listas de descripciones. Crea un nuevo archivo y añade elementos al texto sin formato que tienes a continuación para que aparezca como una lista de descripciones:
Café
El café es una bebida elaborada con un aroma y un sabor distintos que se prepara a partir de las semillas tostadas de la planta Coffea.
Té
El té es una bebida aromática que se prepara comúnmente vertiendo agua caliente o hirviendo sobre las hojas curadas de la planta del té.
Chocolate caliente
El chocolate caliente es una bebida que generalmente se obtiene mezclando chocolate rallado, chocolate derretido o cacao en polvo, leche o agua caliente y azúcar.
Ejercicio propuesto: bacon, huevos y café
Crea un nuevo archivo con el texto que tienes a continuación y añade elementos al texto para que aparezca como una lista de descripción. Puedes usar tus propios términos y descripciones si lo deseas.
Nota: observa que el término café tiene dos definiciones.
Bacon
Carne curada preparada a partir de carne de cerdo.
Huevos
Comida común y uno de los ingredientes más versátiles utilizados en la cocina.
Café
La bebida que hace que el mundo funcione por la mañana.
Un color marrón claro.
Ejercicio propuesto: Componentes de ordenador
Escribe una lista de definiciones para explicar el significado de los siguientes términos: unidad central de procesamiento, monitor, ratón, teclado, tarjeta gráfica, tarjeta de sonido, altavoces y placa base.
Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace (URL).
Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe qué hacer con un archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y leerlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).
Por ejemplo, si observamos cualquier página web en la que se publiquen noticias (la página web de la BBC, por ejemplo), observaremos que contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes apartados (funcionalidad de navegación), secciones de acceso/registro (herramientas de usuario) y otras.
El elemento <a>
The elemento <a> (o elemento ancla) junto con el atributo href , crea a hipervínculo a páginas web, ficheros, correos electrónicos, enlaces dentro de la misma página, o cualquier cosa a la que una URL pueda apuntar. El contenido dentro del elemento <a> debería proporcionar una descripción clara de dónde nos dirigiremos al hacer click.
Los enlaces también proporcionan información implícitamente sobre la actividad de navegación, ya que el estilo de los enlaces cambia según vamos haciendo click en ellos:
Un enlace no visitado aparece subrayado y con texto azul.
Un enlace visitado aparece subrayado y en color morado.
Un enlace activo aparece subrayado y en rojo.
Un enlace básico se crea incluyendo el texto (o cualquier otro contenido), que queramos convertir en un enlace usando un elemento ancla <a>, dándole un atributo href (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace:
<p>Crea un enlace a
<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
</p>
The code above gives as the following result: I’m creating a link to the Mozilla homepage.
Añadiendo información con el atributo «title»
Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en la página web. Por ejemplo:
<p>Crea un enlace a
<a href="https://www.mozilla.org/es-ES/"
title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
y cómo contribuir">la página de inicio de Mozilla</a>.
</p>
Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):
Debemos tener en cuenta que el título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.
Ejercicio propuesto: Enlaces con información
Crea una página web como la que se muestra a continuación o una similar, mostrando información en español y en inglés. Utiliza encabezados del tipo <h1> y <h2>, y varios párrafos y enlaces a diversas páginas, como las que se indican.
Nota: Deberás utilizar el atributo title para mostrar información sobre cada enlace al pasar el ratón por encima.
https://es.wikipedia.org/wiki/Puerto_de_Alicante (El puerto de Alicante es un puerto marítimo español, situado en la ciudad de Alicante, en el mar Mediterráneo con actividades comerciales, con transporte de mercancías y de viajeros, pesqueras y de recreo)
https://es.wikipedia.org/wiki/Benacantil (El Benacantil es una elevación rocosa, colindante con el mar, que tuvo un papel clave para la construcción del castillo de Santa Bárbara, y consecuentemente con el desarrollo de la ciudad española de Alicante.)
https://en.wikipedia.org/wiki/Mount_Benacantil (Mount Benacantil is a mount (or rather a large hill) that dominates the urban part of Alicante, and is the characteristic image of the city)
…
Alicante
Español
Entre las principales características de la ciudad se encuentran el Castillo de Santa Bárbara, ubicado muy por encima de la ciudad, y el Puerto de Alicante. Este último fue objeto de una amarga controversia en 2006-2007 cuando los residentes lucharon, con éxito, para evitar que se convirtiera en un polígono industrial.
El castillo de Santa Bárbara está situado en el Monte Benacantil, con vistas a la ciudad. La torre (La Torreta) en la parte superior, es la parte más antigua del castillo, mientras que parte de la zona más baja y las murallas se construyeron a finales del siglo XVIII.
English
Amongst the most notable features of the city are the Castle of Santa Bárbara, which sits high above the city, and the port of Alicante. The latter was the subject of bitter controversy in 2006–2007 as residents battled, successfully, to keep it from being changed into an industrial estate.
The Santa Bárbara castle is situated on Mount Benacantil, overlooking the city. The tower (La Torreta) at the top, is the oldest part of the castle, while part of the lowest zone and the walls were constructed later in the 18th century.
URLs y rutas
Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección proporcionaremos la información que necesitas sobre el tema.
Una URL (de las iniciales en inglés «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.
Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).
Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.
Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.htmlen un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.
Mismo directorio
Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html del nivel más alto) que apunte al archivo contacts.html, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo index.html desde donde lo queremos llamar. Por lo tanto, usamos la URL contacts.html — veamos el código:
<p>¿Quieres contactar con un miembro específico del personal?
Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>
Bajando por la estructura de subdirectorios
Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html de nivel más alto) que apunta a projects/index.html, debemos bajar hasta el directorio projects antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL projects/index.html:
<p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>
Subiendo por nuestro sistema de archivos
Si ahora queremos incluir un hipervínculo dentro del archivo projects/index.html que apunte a pdfs/project-brief.pdf, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio pdf. Para «Subir un nivel» utilizamos los dos puntos — (..) — por lo que usamos la URL ../pdfs/project-brief.pdf:
<p>Un enlace a mi<a href="../pdfs/project-brief.pdf"> resumen del proyecto</a>.</p>
Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.
Ejercicio propuesto: Menú de navegación
Crea un fichero «index.html» que enlace varias ficheros web con un menú de navegación. Este índice puede enlazar todas las páginas que hayas creado antes. Echa un vistazo al ejemplo y tendrás una idea de cómo deberá quedar tu código fuente. Además, deberás utilizar el atributo title para insertar la descripción de la página web enlazada:
<h1>Ejercicios de HTML</h1>
<h2>Encabezados y párrafos</h2>
<p><a href="encabezados_y_parrafos_1.html">Ejemplo de encabezados y párrafos 1</p>
<p><a href="encabezados_y_parrafos_2.html">Ejemplo de encabezados y párrafos 2</p>
...
<h2>Formato de texto</h2>
<p><a href="formato_texto_1.html">Ejemplo de formato de texto 1</p>
<p><a href="formato_texto_2.html">Ejemplo de formato de texto 2</p>
...
Fragmentos de documento
Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo id al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:
<h2 id="direccion_de_envio">Dirección de envío</h2>
Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:
<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#direccion_de_envio">Dirección de envío</a>.</p>
También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:
<p>La <a href="#direccion_de_envio">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>
Ejercicio propuesto: Índice
Crea una página similar a esta: https://es.wikipedia.org/wiki/Alicante (puedes escoger cualquier otra página similar, que tenga un índice con enlaces). Debes comenzar escribiendo el índice, colocando a continuación las diferentes secciones, cada una de ellas con el correspondiente encabezado y los diferentes párrafos. Inserta además otros enlaces a otras páginas de la wikipedia, tal como se hace en la página original, sin olvidar rellenar los atributos «title». Cuando acabes prueba el resultado en el navegador. Tu código debería parecerse al siguiente:
<h1>Alicante</h1>
<p><a href="#geografia">Geografía física</a></p>
<p><a href="#demografia">Demografía</a></p>
...
<h2 id="geografia">Geografía física</h2>
La ciudad se halla a orillas del <a href="https://es.wikipedia.org/wiki/Mar_Mediterráneo">Mediterráneo</a>, en una planicie sorteada por una serie de colinas y elevaciones. El monte <a href="https://es.wikipedia.org/wiki/Benacantil">Benacantil</a>, con 169 m de altura, sobre el que se asienta el <a href="https://es.wikipedia.org/wiki/Castillo_de_Santa_Bárbara_(Alicante)">castillo de Santa Bárbara</a>, domina la fachada urbana y constituye la imagen más característica de la urbe..
...
<h2 id="demografia">Demografía</h2>
En la actualidad, según los datos del INE del 1 de enero de 2019 la ciudad cuenta con 334.887 habitantes, siendo la segunda ciudad valenciana y la 11ª de España en población. Según los datos del Ayuntamiento de Alicante a 1 de enero de 2017 la población de la ciudad era de 336.478 habitantes, de los cuales vivían en el núcleo urbano 329.635 y 6.843 en las partidas rurales, siendo los barrios más populosos <a href="https://es.wikipedia.org/wiki/Playa_de_San_Juan_(Alicante)">Playa de San Juan</a>, con 22.424 habitantes y <a href="https://es.wikipedia.org/wiki/Polígono_San_Blas">Polígono de San Blas</a> con 22.292 habitantes.
...
Convertir bloques de contenido en enlaces
Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso elementos de bloque y elementos en línea. Si quieres convertir una imagen en un enlace, simplemente usa el elemento <a> encerrando el elemento <img> entre <a> y </a>.
<a href="https://www.mozilla.org/es-ES/">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Mozilla_dinosaur_head_logo.png" alt="Logotipo anterior de Mozilla que dirige a la página inicial de Mozilla">
</a>
Encontrarás más información y ejercicios sobre el manejo de imágenes en próximos artículos en esta web.
En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta unidad veremos algunos de los más comunes, como por ejemplo:
<b>Texto en negrita</b>
<strong>Texto importante</strong>
<i>Texto en cursiva</i>
<em>Texto enfatizado</em>
<u>Texto subrayado</u>
<mark>Texto marcado (o resaltado)</mark>
Otros elementos menos habituales
<small>Texto más pequeño</small>
<del>Texto eliminado</del>
<ins>Texto insertado</ins>
<sub>Subíndice</sub>
<sup>Superíndice</sup>
El elemento <strong>
Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:
Este líquido es altamente tóxico.
Cuento contigo. ¡No llegues tarde!
En HTML usamos el elemento <strong> para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por defecto, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento <span> y CSS, o un elemento <b> (explicado más adelante).
Ejercicio propuesto: Texto importante
Crea una página web con el siguiente texto (u otro similar), utilizando encabezados y párrafos, y añade además una importancia adicional a varias palabras dentro de cada párrafo.
Médicos sin fronteras
Quiénes somos
Somos una organización de acción médico-humanitaria: asistimos a personas amenazadas por conflictos armados, violencia, epidemias o enfermedades olvidadas, desastres naturales y exclusión de la atención médica. La acción humanitaria es un gesto solidario de sociedad civil a sociedad civil, de persona a persona, cuya finalidad es preservar la vida y aliviar el sufrimiento de otros seres humanos: esta es nuestra razón de ser.
Debemos nuestra independencia financiera a los más de seis millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo. Gracias a ellas, nosotros decidimos a quién atendemos y cómo, y nuestro único interés es el de las poblaciones a las que asistimos. Con el fin de mejorar su situación, también podemos prestar testimonio para denunciar las situaciones que presenciamos. Pero no aspiramos a transformar una sociedad, sino a permitirle superar un periodo crítico: nuestro objetivo son las personas, no los Estados. Por este motivo, nuestras intervenciones son limitadas en el tiempo.
Cómo nos financiamos
La mayor parte de nuestros fondos son privados: en 2019, procedían de las 6,5 millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo, de las cuales casi 569.900 en España. En 2019, el 96,2% de nuestros ingresos mundiales eran de origen privado y el resto correspondía a organismos públicos, como las agencias de ayuda humanitaria de algunos Gobiernos.
No tenemos ánimo de lucro: no generamos beneficios para nosotros mismos, y destinamos los fondos recibidos a nuestra misión social –acción médica y testimonio– y a las tareas de administración y captación de recursos necesarias para cumplirla.
El elemento <em>
Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:
Me alegro de que no llegues tarde.
Me alegro de que no llegues tarde.
La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.
En HTML usamos el elemento <em> («emphasis») para marcar estos casos:
<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores, que lo expresan con un tono diferente de voz. El navegador, de manera predeterminada, aplica el estilo de letra cursiva, pero no debes utilizar esta etiqueta solamente para establecer este estilo de letra cursiva. Para usar ese estilo, debes utilizar la etiqueta del elemento <span> y algo de CSS u otra etiqueta como el elemento <i> (explicado a continuación).
Ejercicio propuesto: Texto enfatizado
Crea una página web con el texto del ejemplo (u otro similar) utilizando encabezados y párrafos. A continuación aplica la etiqueta <em> a las expresiones que creas más relevantes.
Cómo escribir mensajes de WhatsApp en negrita, cursiva o subrayados
La app te permite cambiar el aspecto de las palabras que escribes de dos maneras. Aprende a subrayar y poner en negrita.
Desde que nos despertamos hasta que nos acostamos, la usamos a diario, constantemente, y ya es difícil imaginar el mundo sin ella. WhatsApp es de esas apps que han traspasado la barrera de meras aplicaciones y junto a otros elementos de la cultura electrónica como los emojis, se ha hecho un hueco en la sociedad, en el día a día. Y como toda app multitarea, WhatsApp oculta decenas de funciones desconocidas, pequeños trucos que nos hacen la experiencia más fácil y/o variada a la hora de usarla.
En Word, Pages y otros procesadores de texto estamos acostumbrados a cambiar el formato del texto con un sólo botón. De esta manera podemos colocar una cita en cursiva, subrayar encabezados o resaltar en negrita un nombre en particular. Y esto mismo puedes hacer en WhatsApp, ya que hace unos años que la app de mensajería admite un cambio de formato de texto entre sus funciones.
Los elementos <i>, <b> y <u>
Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con <b> (negrita o «bold»), <i> (cursiva o «italic») y <u> (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se utilizan habitualmente porque la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos. Sin embargo, HTML5 redefinió los elementos <b>, <i> y <u> con roles semánticos nuevos un tanto confusos (puedes encontrar más información en este hilo de StackExchange, y en HTML Living Standard).
Para clarificar un poco en qué momento podríamos usar estos elementos, nos podemos remitir a la siguiente regla de oro: el uso de <b>, <i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de cursiva no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.
Por último, es conveniente añadir una observación muy importante acerca del subrayado (<u>): La mayoría de los lectores de una página web suelen asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado .
En resumen, y concretando más:
<i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento…
<b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales…
<u> se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos…
Ejercicio propuesto: Ejemplos de uso
Crea una página web para obtener el siguiente resultado:
Ejercicio propuesto: Negrita y cursiva
Crea una página web con el siguiente texto (u otro similar), utilizando un encabezado y párrafos, y aplica letra negrita y cursiva a las palabras correspondientes dentro de cada párrafo.
Diez casos en los que demos emplear la letra cursiva
Títulos de obras literarias, periódicos, revistas, etcétera: Cien años de soledad, El País, Qué leer.
Títulos de obras de arte y composiciones musicales: Las señoritas de Avignon, Sinfonía nº. 5 de Beethoven.
Títulos de películas: El apartamento, La tentación vive arriba, Ben-Hur…
Palabras o expresiones que provengan de otro idioma: affaire, coaching, hardware.
Palabras empleadas con uso metalingüístico, como meras referencias, prescindiendo de su significado. Es lo que sucede cuando citamos una palabra: La palabra empoderamiento se ha puesto de moda en los últimos años.
Para resaltar partes del texto. Los motivos pueden ser varios, y no los vamos a enumerar en esta ocasión: Era una cuestión de amor propio, ¿me entiendes?
Advertencias o indicaciones en los textos: Sigue leyendo, Continúa en la página 75.
Locuciones del latín y de otras lenguas que no tienen adaptación al castellano: ad infinitum, alter ego, full time, delirium tremens.
Los apodos y sobrenombres que van intercalados entre el nombre y el apellido: Ernesto Che Guevara, Roberto Mano de Piedra Durán (boxeador panameño).
En las obras teatrales, para resaltar acciones o aportar algún dato que no pertenece al parlamento del personaje sino a la pluma del autor:
TÍO.- (Aparte a CASTELAR.) Pues tenía él razón. Beringola no ve tres en un burro
CASTELAR.- (Aparte al Tío). Beringola es un idiota.
(Por el primero derecha salen DANIEL Y FELIPE.)
Los elementos <del> e <ins>
El elemento <del> se utiliza para definir un texto que se ha eliminado de un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de un sitio web, cuando se ha eliminado parte del texto después de que el desarrollador haya subido una nueva versión.
Por otro lado, el elemento <ins> se utiliza para definir un texto que se ha insertado en un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de una página web, cuando se reemplaza algún texto después de que el desarrollador haya subido una nueva versión.
Depende del navegador cómo mostrar el texto dentro de estos elementos, pero la mayoría de ellos marcarán una línea sobre el texto eliminado y subrayarán el texto insertado de forma predeterminada.
Ejercicio propuesto: Texto reemplazado
Crea una página para mostrar varios párrafos donde anteriormente se dijeron algunas palabras u oraciones, pero ahora los autores han cambiado de opinión y quieren contarles a sus lectores una nueva versión de lo que piensan. Usando las etiquetas <ins> y <del>, muestra los textos anteriores y los nuevos de forma que quede claro que el nuevo texto está reemplazando al primero. El resultado obtenido debería ser similar al siguiente, añadiendo algunos otros ejemplos:
La Tierra es plana redonda.
El 31 de diciembre del 2020 se acabará el mundo no pasará nada.
...
El elemento <mark>
El elemento <mark> representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.
Ejercicio propuesto: Datos relevantes
Crea una página web con el siguiente texto usando encabezados y párrafos, y a continuación resalta varias palabras o cifras dentro de los párrafos:
Récords de Super Mario
Mario Bros, el fontanero italiano, es el personaje de videojuegos más famoso del mundo. La primera vez que Mario apareció fue en 1981 en el juego virtual Donkey Kong, llamándose Jumpman (saltador, en español).
Dentro del universo de Mario Bros, el videojuego Super Mario Bros para NES de 1985 es el más vendido con más de 40,24 millones de copias vendidas a principios del 2019.
En la categoría de speed-runners, los más rápidos en completar un videojuego, en octubre del 2018, el usuario “somewes” consiguió el menor tiempo en completar Super Mario Bros, fijando el récord en 4 minutos y 55 segundos.
Récords de Fornite
Seas o no seas un gamer, has oído hablar de este famoso videojuego. Fornite es un videojuego de lucha, supervivencias y batallas desarrollado por Epic Games y lanzado en 2017.
Tal ha sido el éxito de Fornite que, el 20 de marzo del 2019, se convirtió en el primer battle royale con 250 millones de jugadores registrados. Además, Fornite también superó el récord de juego con más jugadores simultáneos llegando a alcanzar los 10,8 millones de jugadores.
...
Ejercicio propuesto: Resultado de una búsqueda
Crea una página web similar a la del ejemplo, y resalta todas las apariciones de una palabra en concreto a lo largo de todo el texto. En este caso resaltaremos todas las apariciones de «Minecraft» que encontremos:
Resultados de búsqueda de la palabra "Minecraft":
Minecraft consigue 12 récords mundiales.
En el Guinness Book of World Records 2015: Gamer's Edition, Minecraft consiguió 12 récords mundiales. El impacto que tiene este juego parece no tener límites.
Lo que ha logrado Minecraft hasta el momento es de esa clase de fenómenos que convierten su entorno en un antes y un después. Su forma peculiar de jugar ha hecho que propios y extraños del mundo gamer dediquen su tiempo a construir sus propios mundos.
El primer país modelado a escala real en un videojuego establece un nuevo récord para Minecraft. Danish Geodata Agency publicó la recreación a escala 1:1 de Dinamarca. Se consiguió representar todos los edificios del país utilizando cuatro mil millones de bloques.
...
Los elementos <sub> y <sup>
En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos <sup> y <sub> se ocupan de ello. Por ejemplo:
Ejercicio propuesto: Subíndices
Crea una página web con el siguiente texto, añadiendo algún ejemplo más que conozcas o encuentres por Internet:
Una de mis moléculas favoritas es C8H10N4O2, también conocida como "cafeína".
Las posiciones de las coordinadas horizontales a lo largo del eje X se representan como x1 ... xn.
...
Ejercicio propuesto: Nomenclatura y formulación
Crea una página web para mostrar la formulación química de algunos compuestos comunes, aplicando formato de superíndices a los números (debes imprimir cada compuesto en un párrafo diferente, utilizando el elemento <p>). El resultado debería ser similar al siguiente, donde los puntos suspensivos indican que debes añadir algunos otros ejemplos que conozcas o encuentres por Internet:
Oxígeno: O2
Agua: H2O
Dióxido de carbono: CO2
Vinagre: C2H4O2
Bicarbonato de sodio: NaHCO3
Azúcar: C12H22O11
Alcohol: C2H5OH
...
Ejercicio propuesto: Superíndices
Crea una página web para mostrar el siguiente texto, añadiendo algunos otros ejemplos:
El teorema de Pitágoras se expresa con la siguiente ecuación: a2 + b2 = c2
Una de las ecuaciones más conocidas en física es: E = mc2
El número ordinal "quinto" se abrevia en inglés de esta forma: 5th
...
Ejercicio propuesto: Potencias
Imprime los cuadrados de los números del 1 al 25. Cada número deberá colocarse en una línea independiente (utilizando el elemento <br />). Justo después de cada número se colocará el número 2 con formato de superíndice, y a continuación el signo igual, y el resultado. Se debería mostrar algo del siguiente estilo:
12 = 1
22 = 4
...
252 = 625
El elemento <span>
Si necesitamos marcar un texto pero consideramos que ninguna de las etiquetas existentes es una buena opción, podemos utilizar el elemento <span>. Así, podemos aislar un fragmento de texto sin introducir a priori cambios en la apariencia del texto marcado. La ventaja de esta etiqueta se aprecia al usarla junto con algunos atributos tales como class o style, combinados con algún código CSS. Trabajaremos en esto más adelante, pero de momento echemos un vistazo a este código de ejemplo, donde usamos un elemento <span> para colorear solo una parte del texto dentro de un párrafo:
<p>Mi madre tiene los ojos <span style="color:blue">azules</span>.</p>
Ejercicio propuesto: Color del texto
Utilizando los elementos <p> y <span>, crea una página web para mostrar el color de ojos de gente que conozcas, como por ejemplo: azules (blue), marrones (brown), verdes (green) o grises (gray).
Test
Comprueba tus conocimientos con este test sobre formato de texto y otros conceptos relacionados con esta unidad.
HTML («Hypertext Markup Language«) no es exactamente un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. Este lenguaje está formado por varios elementos que definen diversos tipos de contenido. Un fichero HTML se puede editar con un simple editor de texto, pero hay algunos editores que usan colores y consejos para ayudar al desarrollador. Uno de los mejores editores es el Visual Studio Code. Se puede descargar desde aquí.
Elementos
HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera.
Cada elemento tiene dos partes, una al comienzo y otra al final, y el contenido se coloca en medio:
<etiqueta>Contenido...</etiqueta>
El elemento HTML quedará definido por todo ese bloque, desde la etiqueta de apertura, hasta la etiqueta de cierre. Por ejemplo:
<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo</p>
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. Sin embargo, se recomienda escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.
Elementos vacíos
No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se quiera incluir. Por ejemplo, podemos utilizar el elemento <br> para insertar un salto de línea, y el elemento <img> para insertar una imagen en la página de la siguiente forma:
<p>Mi perro es un gruñón.<br />Tiene muy malas pulgas.</p>
Atributos
Los elementos también pueden tener atributos. Los atributos contienen información extra sobre el elemento. Por ejemplo, con siguiente código podemos utilizar el atributo class para asignar al elemento un identificador que se puede utilizar para dotarlo de información de estilo:
<p class="estilo">Mi perro es un gruñón</p>
Para ver otro ejemplo, podemos utilizar el siguiente código para saltar a la página https://www.wikipedia.org (la etiqueta <a> define un hipervínculo, y el atributo href especifica la url donde queremos saltar):
<a href="https://www.wikipedia.org">Wikipedia</a>
Es muy importante que tengamos en cuenta que un atributo deberá tener:
Un espacio entre este y el nombre del elemento. Para un elemento con más de un atributo, los atributos también deben estar separados por espacios.
El nombre del atributo, seguido por un signo igual.
Un valor del atributo, rodeado de comillas de apertura y cierre.
Omitir comillas en valores de atributos
Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero provocará un error en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:
<a href=https://www.wikipedia.org/>Wikipedia</a>
Sin embargo, el código no sería correcto si añadimos el atributo title también sin comillas:
<a href=https://www.wikipedia.org/ title=La página de inicio de Wikipedia>Wikipedia</a>
En este punto el navegador interpretará mal el código y pensará que el elemento <a> tiene atributos incorrectos y esto causará errores o comportamientos inesperados. Por ello es muy importante incluir siempre las comillas en los atributos. Evitarás muchos problemas y además obtendrás un código más legible.
Comillas simples o dobles
En esta unidad todos los valores de los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:
<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>
<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un código incorrecto:
<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:
<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
Así que tendrás que hacer esto:
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
Internet y páginas web
Para que un usuario pueda obtener y leer el contenido de una página web, se deben seguir algunos pasos básicos:
Para crear páginas web, el desarrollador tiene que crear archivos escritos en HTML (con cualquier editor de texto) y colocarlos en un servidor web (por ejemplo, usando un cliente ftp).
El código HTML de una página web le dice al navegador lo que necesita saber para mostrar la página. Si el programador completa el desarrollo de la página web correctamente, las páginas incluso se mostrarán bien en dispositivos móviles y de escritorio.
Una vez que los archivos se colocan en un servidor web, cualquier navegador puede recuperar las páginas web a través de Internet.
Finalmente, los usuarios utilizarán un ordenador o cualquier otro dispositivo conectado a Internet para visualizar la página web mediante un navegador.
El servidor web
Un servidor web es simplemente un ordenador conectado a Internet esperando peticiones de navegadores:
Los programadores almacenan HTML, archivos, imágenes, sonidos y otros tipos de archivos.
Los navegadores solicitan páginas HTML u otros recursos, como imágenes.
Si el servidor puede localizar los recursos, los envía a los navegadores.
El navegador web
Un navegador simplemente es una aplicación que se encarga de mostrar páginas web. El código HTML realizará el siguiente recorrido:
El código HTML parte del servidor, quien se encarga de enviar páginas web completas a los navegadores.
Los navegadores recuperan las páginas.
Los navegadores muestran las páginas HTML a los usuarios finales.
Elementos <!doctype> y <html>
En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, que indica estamos utilizando la última versión de HTML (HTML5).
En segundo lugar debemos utilizar obligatoriamente el elemento <html> (elemento raíz), que incluirá todo el contenido de la página.
En resumen, todos los documentos HTML deben comenzar con una declaración de tipo de documento seguida del código de la página web en sí entre las etiquetas <html> and </html>:
<!doctype html>
<html lang="es">
...
</html>
El elemento <head>
Este elemento actúa como contenedor para todos los parámetros que se quieran incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que se quieran mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Por ejemplo:
Es importante que las páginas web contengan una lista de elementos de metadatos para proporcionar a los motores de búsqueda (por ejemplo, Google, DuckDuckGo, Bing, etc.) información semántica como el autor, palabras clave, descripción, etc. Dado que este tipo de información no se muestra al usuario directamente por el navegador, los elementos de metadatos deben colocarse dentro del elemento <head>:
Uno de los elementos <meta> más importantes es el que define la especificación del charset. Es muy habitual especificar que el documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. De esta forma, el navegador mostrará correctamente cualquier contenido textual que pongamos en el documento, tales como caracteres á, é, ü, ñ, etc.:
<meta charset="utf-8" />
Viewport
HTML5 introdujo un método para permitir a los desarrolladores controlar ciertos parámetros del área visible de la página web (viewport), a través de la etiqueta <meta> . El viewport puede variar dependiendo del dispositivo, y puesto que hay diferencias entre un móvil y una pantalla de ordenador, es conveniente establecer el comportamiento adecuado para que nuestra página web se muestre correctamente en cualquier dispositivo. Podemos utilizar por ejemplo la siguiente línea de código en todas nuestras páginas web:
Este elemento establece el título de la página web, que es el título que aparece en la pestaña del navegador en la que se carga dicha página. El título también se utiliza para describir la página cuando se marca como favorita. Se puede definir de la siguiente forma:
<title>Mi primera página web</title>
El elemento <link>
El elemento <link> especifica que el documento actual se encuentra enlazado con un recurso externo. El uso más habitual de este elemento es el de aplicar hojas de estilos al documento.
Mediante el atributo <rel> especificaremos el tipo de relación del documento enlazado con el actual. El atributo debe ser una lista de tipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo rel se establece con valor stylesheet, y el atributo href se establece con la URL de la hoja de estilos externa para dar formato a la página:
<link rel="stylesheet" href="estilos.css" />
El elemento <script>
El elemento<script>se utiliza para incluir código ejecutable o datos. Se usa principalmente para incluir o enlazar código JavaScript, aunque también se puede usar para incluir otros lenguajes de programación tales como WebGL o incluso también datos en formato JSON. Utilizando el atributo <src> podemos especificar la url de un fichero externo (esto se puede usar como alternativa a incluir el código JavaScript directamente en nuestro documento). Por ejemplo, en el caso de querer utilizar código JavaScript en nuestra página web, procederíamos de la siguiente forma:
<!-- Fichero externo con código JavaScript -->
<script src="javascript.js"></script>
...
<!-- Definimos código JavaScript dentro del fichero HTML -->
<script>
function miFuncion() {
document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>
El elemento <body>
El elemento <body> contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. Se abre justo después de cerrar el elemento <head> y se debe cerrar justo antes de cerrar el elemento <html>. Por ejemplo, con el siguiente código, el navegador sólo mostrará en pantalla el texto «¡Hola mundo!»:
Debemos matizar que dentro de una página web no podemos poner directamente los caracteres “<” y “>” porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas.
Para cierto tipo de caracteres, es necesario utilizar otra sintaxis que suele constar de un ampersand seguido de su nombre identificativo y un punto y coma. Por ejemplo:
Crea una página web para mostrar el texto «¡Hola mundo, mi nombre es … !» dentro del elemento <body>. Además, deberás utilizar el elemento <head> para mostrar el texto «Saludos» como título en la pestaña del navegador. Para finalizar, añade y completa la página web con el resto de elementos <meta>(charset, viewport, author, description y keywords), y comprueba el resultado en el navegador.
Párrafos y secciones
Para que el contenido textual de una página web resulte más legible, es muy importante utilizar párrafos y secciones.
El texto de cada párrafo se debe colocar entre las etiquetas <p> y </p>, y para indicar el comienzo de cada sección de nuestro contenido, disponemos de encabezados de varios niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (del más grande al más pequeño). Podemos utilizar estos elementos de la siguiente forma:
...
<h1>Encabezado de primer nivel</h1>
<p>Mi primer párrafo</p>
<p>Mi segundo párrafo</p>
<p>Mi tercer párrafo</p>
<h2>Encabezado de segundo nivel</h2>
<p>Mi cuarto párrafo</p>
<p>Mi quinto párrafo</p>
...
Ejercicio propuesto: Párrafos
Crea una página web para mostrar diferentes párrafos utilizando las etiquetas <p> y </p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos <meta> (charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.
Ejercicio propuesto: Encabezados y párrafos
Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas <h1> a <h6>. Añade además varios párrafos (encerrados entre las etiquetas <p> y </p> ) con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos <meta> (charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.
Ejercicio propuesto: Párrafos dentro de la misma sección
Utilizando las etiquetas correspondientes (<h1> y <p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:
Alicante
Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país.
Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes.
Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.
Ejercicio propuesto: Encabezados de diferente nivel
Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).
Ejercicio propuesto: Encabezados, niveles y párrafos
Utiliza las etiquetas correctas (<h1>, <h2>, <h3> y <p>) sobre el texto que aparece a continuación:
Valencia
Valencia (en valenciano y oficialmente, València) es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano. Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona.
Geografía
Localización
La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente.
Clima
Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.
El elemento <br>
El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es muy relevante.
Debemos tener en cuenta que no se debe utilizar <br> para incrementar el espacio entre líneas de texto; para ello se debe utilizar la propiedad margin de CSS o el elemento <p>.
Como se puede observar en el siguiente ejemplo, se utiliza un elemento <br /> cada vez que queremos cambiar de línea. El texto que coloquemos después del elemento <br /> aparecerá al comienzo de la siguiente línea:
<p>
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
</p>
Ejercicio propuesto: Poemas
Crea una página web que contenga diversos poemas de diversos autores, como el que tienes a continuación. Debes utilizar <h1> y <h2> para los títulos, y párrafos y saltos de línea para el resto.
Nota: Deberías utilizar <h1> para el encabezado principal y <h2> para el resto de encabezados. Ten en cuenta también que no puedes utilizar <br /> para crear márgenes entre cada poema. Deberás usar párrafos que contengan cada poema, y saltos de línea para cada verso.
POEMAS
Gustavo Adolfo Bécquer
Del salón en el ángulo oscuro,
de su dueña tal vez olvidada,
silenciosa y cubierta de polvo,
veíase el arpa.
¡Cuánta nota dormía en sus cuerdas,
como el pájaro duerme en las ramas,
esperando la mano de nieve
que sabe arrancarlas!
¡Ay!, pensé; ¡cuántas veces el genio
así duerme en el fondo del alma,
y una voz como Lázaro espera
que le diga «Levántate y anda»!
...
Ejercicio propuesto: Direcciones
Crea una página web para mostrar diferentes direcciones, similares a la que tienes a continuación (debes usar encabezados de tipo <h1> y <h2> , párrafos y saltos de línea).
Nota: Deberías utilizar un encabezado <h1> para el título principal y <h2> para el resto de encabezados. Ten en cuenta también que no debes utilizar <br /> para crear márgenes entre cada dirección. Al igual que el ejercicio anterior, utiliza párrafos para cada dirección y saltos de línea para el resto.
DIRECCIONES
Mozilla
331 E. Evelyn Avenue
Mountain View, CA
94041
USA
...
El elemento <pre>
El elemento <pre> (o Texto HTML Preformateado) representa texto que mantiene la estructura que se utilizó en el editor. El texto en este elemento típicamente se muestra con una fuente fija o monoespaciada (no proporcional), exactamente como se mostraba en el archivo mientras se editaba. Los espacios dentro de este elemento también se muestran como se escribieran en el editor. Por ejemplo:
<pre>
-----------------------------
< Soy un experto en mi campo. >
-----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
Ejercicio propuesto: ASCII art
Crea un documento para mostrar diversos dibujos utilizando caracteres, de forma similar al ejemplo.
La muy esperada continuación del exitoso libro Cuentos para ser escuchados
Acompaña a nuestros protagonistas en estos doce nuevos cuentos.
Emotivos relatos para potenciar la capacidad de superación
Cuentos infantiles educativos que tratan por un lado temas cotidianos tales como la sostenibilidad del medio en el que vivimos y los beneficios del trabajo en equipo, y por otro lado abordan temas sensibles tales como la pobreza, los complejos, la discapacidad y las enfermedades raras, para que los más pequeños crezcan acostumbrados a la diversidad y no les dé miedo lo diferente.
Conmovedoras historias que ensalzan el valor de la amistad y la familia
Nos ofrecen un punto de vista entrañable y espontáneo ante diversas situaciones inspiradas en hechos reales a las que se enfrentan nuestros protagonistas, utilizando un lenguaje adaptado a los niños que consigue emocionar a los adultos.
El discurso. Conoceremos a un niño con una actitud muy positiva, capaz de mejorar el estado de ánimo de quienes le rodean.
Con sus ojos y los míos. Un cuento dentro de otro cuento… Dos amigas inseparables con fantásticas habilidades… ¿Ficción o realidad?
La propuesta. Si todos viéramos el mundo con los ojos de un niño, no habrían problemas grandes ni soluciones imposibles.
¿Y en vacaciones? El protagonista se pone triste cuando comienzan las vacaciones… ¿por qué?
Ocaso tecnológico. La evolución de las nuevas tecnologías podría llegar a conducirnos a un futuro incierto. Las nuevas generaciones deberán encontrar el equilibrio entre uso y abuso.
El coche solar. Un equipo de ingenieros debe aprender una lección que no está en sus libros de texto.
Villa sonrisas. Una pequeña con mucho desparpajo elegirá el nuevo nombre del pueblo en el que vive.
Secretos en reunión. Descubre por qué Julia y Andrés se han enfadado. Es importante conocer el punto de vista de quienes nos rodean.
¿Has oído eso? Esta historia te pondrá los pelos de punta… ¿quieres conocer el final?
El uniforme. Una conmovedora historia dedicada a esos amigos incondicionales que siempre están a nuestro lado, pase lo que pase, sin pedir nunca nada a cambio.
Papá «pesao». Un cuento muy típico, y un papá muy pesado.
Los candidatos. Un fantástico reto que conducirá al protagonista a resolver diversos acertijos con ayuda de sus padres.
La Pandilla Digital y el Profesor Analógico: Novela infantil-juvenil sobre profesores, familia, amistad, valores, hábitos y videojuegos, inspirada en un futuro que ya es presente.
Todos los beneficios son para Alianza española de familias de VHL
Comprando el libro además ponemos un granito de arena para ayudar a la asociación de enfermos de von Hippel-Lindau (alianzavhl.org). Por ello, no sólo pretendemos regalar ilusión a quien lea el libro, sino a todos aquellos enfermos y familiares que están esperando que les echemos una mano, ya que todos los beneficios de la venta del libro van destinados íntegramente a ellos.
