# data[].attributes.attachment_link.description
Uno de los temas más complejos de CSS es aprender a posicionar elementos. El posicionamiento relativo o absoluto es un buen punto de partida para aprender.

# data[].attributes.attachment_link.description
Grid CSS permite dejar atrás la problemática forma de crear diseños en CSS, aportando un modelo de cuadrículas o rejillas muy personalizable y flexible.

# data[].attributes.attachment_link.readable_text
Hoy vamos a aprender sobre cada una de las propiedades de fondo CSS con cada uno de sus posibles valores. Aprenderemos haciendo. ¡Vamos!?

Todas las propiedades

background-image

background-size

background-repeat

background-position

background-origin

background-clip

background-attachment

background-color

Atajos y combinaciones

Conclusión

También puedes ver este tutorial en YouTube:

Todas las propiedades

Esta es la lista de todas las propiedades que vamos a revisar. El texto rojo al final es la taquigrafía.

Las propiedades de fondo CSS nos dejan controlar el tamaño y las propiedades de las imágenes, lo que nos permite hacer imágenes responsive para pequeñas y grandes pantallas. Esto, a su vez, nos ayuda a crear sitios web responsive.
Por ejemplo,

La propiedad background-size nos permite asignar un nuevo valor de ancho y alto para nuestras imágenes de acuerdo al tamaño de la pantalla.

background-position nos permite decir al navegador donde poner la imagen en la pantalla.

Y hay mucho más.

¿Cómo configurar el proyecto?

Antes de programar, necesitas saber un poco sobre HTML, CSS y cómo usar VScode.
Para probar las propiedades y sus valores, sigue los siguientes pasos ?

1. Crea una nueva carpeta llamada 'BACKGROUND-PROJECT'. Abre la carpeta en VScode.

2. Crea los archivos index.html y style.css.

3. Instala 'live server' en VScode.

4. Inicia live server.

HTML

Crea un div con el nombre de la clase 'container' dentro del body tag en el archivo HTML.

<div class="container"></div>

CSS

En CSS, tú debes incluir el tamaño para el 'container', de lo contrario nosotros no seremos capaces de ver la imagen. En nuestro caso, estableceremos 100vh, igual a:

.container{ height : 100vh; }

Descargar las imagenes del proyecto

Las imágenes están en mi GitHub repository. Te explico cómo descargarlas:

1. Copia el link anterior ☝️

2. Ve a downgit y pega el link que ya copiaste.

3. Sigue los pasos del siguiente video ?

y... ¡estamos listos!

Vamos a programar ?

La propiedad background-image

Usando esta propiedad, podemos añadir imágenes a lo largo de nuestra hoja de estilos.

Escribimos la sintaxis después de escribir el selector, igual a:?

.container{ // El path/URL de la imagen va dentro de las comillas simples ? background-image : url(' '); }

Podemos usar bakbroung-image de dos maneras:

Con el path del directorio local.

Especificando la URl de la imagen.

¿Comó usar background-image a través del directorio

Aquí tenemos la sintaxis para background-image cuando usamos el directorio ?.

.container{ // Coloca la ruta dentro de las comillas simples ? background-image : url(' '); }

Hay tres casos donde necesitamos especificar la ruta de la imagen en nuestro CSS:

1. Cuando la imagen y style.css están en la misma carpeta.

2. Cuando la imagen está en la siguiente carpeta.

3. Cuando la imagen está en la carpeta anterior.

Cuando la imagen y style.css están en la misma carpeta, se va ver de la siguiente manera. ?

Observa que kitty.png y style.cssestán en la misma carpeta padre llamada BACKGROUND-PROJECT:

Para localizar la ruta de kitty.png, escribe el siguiente código en style.css:

.container{ background-image : url("kitty.png"); height: 100vh; // establecer el tamaño y no permitir repetición de la imagen background-repeat : no-repeat; background-size : contain; }

Cuando la imagen está en la carpeta siguiente y style.css en la carpeta anterior. Observa como la imagen debajo kitty.png' está en la carpeta Assets mientras que style.css está en la carpeta anterior.

Para continuar y encontrar el archivo kitty.png, debemos escribir un punto y un slash igual a (./) luego de la comilla en style.css. Entonces escribimos el nombre de la carpeta y luego slash (/) para finalmente colocar el nombre de la imagen, igual a: ?

 .container{ background-image : url("./Assets/kitty.png"); height: 100vh; // establecer el tamaño y no permitir repetición de la imagen background-repeat : no-repeat; background-size : contain; }

Si la imagen está en la carpeta anterior, entonces necesitamos volver. Observa en la imagen abajo ? que style.css está en la carpeta src y kitty.png esta fuera de la carpeta src.

Para volver a la carpeta anterior y encontrar el archivo kitty.png, necesitamos escribir dos puntos seguidos y un slash (../) luego de las comillas en el archivo style.css. Entonces escribimos el nombre de la imagen, igual a: ?

 .container{ background-image : url("../kitty.png"); height: 100vh; // establecer el tamaño y no permitir repetición de la imagen background-repeat : no-repeat; background-size : contain; }

Esto es bastante sencillo. Escribimos la propiedad y colocamos en link dentro link().

Para trabajar con una imagen como link directo, necesitamos escribir el siguiente código.

 .container{ background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png"); height: 100vh; // establecer el tamaño y no permitir repetición de la imagen background-repeat : no-repeat; background-size : contain; }

Tomemos un descanzo

La propiedad background-size

Podemos ajustar el tamaño de una imagen usando la propiedad background-size.

Podemos escribir la sintaxis luego de escribir el nombre del selector, igual a ?

.container{ // Podremos escribir ? aquí background-size : cover; }

Podemos usar background-size de 3 maneras:

Usar los valores cover/contain

Establecer el alto y ancho de la imagen

usar auto

Vamos a empezar revisando los valores cover & contain con tamaño de [718px X 614px].

Valor cover

Para este trabajo debemos incluir una imagen, establecer altura y detener la repetición de la imagen. Podemos hacer esto en CSS: ?

.container{ background-image : url('cute-bear.png'); background-repeat: no-repeat; background-size : cover; // Debe incluir la altura height : 100vh; }

Cuando usamos esta propiedad, estirará la imagen a toda la pantalla incluso cuando cambiamos el tamaño de la ventana. Mira el ejemplo a continuación ?

Este valor conservará el tamaño de la imagen [Responsive Image] incluso cuando cambiamos el tamaño de la ventana. Mira el video a continuación para ver como funciona ?

Tamaño de ancho y alto

Podemos establecer el ancho y la altura de la imagen usando la propiedad background-size.

Aquí esta la sintaxis en CSS: ?

.container{ // Aquí, podemos ver ancho? & ? alto background-size : 200px 200px; }

No olvidemos insertar la imagen, establecer el alto de la imagen y detener la repetición de la imagen. El código se vería así:

.container{ background-image : url('cute-bear.png'); background-repeat: no-repeat; // Aquí, podemos ver ancho? & ? alto background-size : 200px 200px; // Debe incluir la altura height : 100vh; } }

tamaño automático

Cuando usamos este valor, la imagen estaría en su tamaño original. No cambiaria cuando hacemos cambiamos el tamaño de la ventana. Esto se vería así:

La propiedad background-repeat

Esta propiedad nos permite repetir la imagen múltiples veces.

Escribimos la sintaxis luego del selector, igual a ?

.container{ // Podemos cambiar el valor ? aquí background-repeat : repeat; }

Esta propiedad tiene seis valores posibles:

repeat

repeat-x

repeat-y

no repeat

space

round

Aquí podemos ver el resultado de cada uno de los posibles valores. Observemos que el tamaño de la imagen ejemplo es de [200px X 200px].

Ahora, vamosa investigar que ocurre con cada valor. Pero, antes de esto, observemos que necesitamos insertar una imagen usando la propiedad `background-image.

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : ; //Aquí colocaremos las opciones height : 100vh; }

El valor repeat

Usando este valor, podemos repetir la misma imagen múltiples veces a lo largo de los ejes X y Y tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para duplicar este resultado, escribimos ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : repeat; height : 100vh; }

El valor repeat-x

Este valor nos permite repetir la misma imagen múltiples veces a lo largo del eje x tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para que esto ocurra, escribimos ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : repeat-x; height : 100vh; }

El valor repeat-y

Este valor funciona de la misma manera que "repeat-x" pero a lo largo del eje y tanto como el tamaño de la pantalla lo permita. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para esta salida, escribimos ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : repeat-y ; height : 100vh; }

El valor no-repeat

Podemos tener el tamaño original de nuestra imagen sin repeticiones usando este valor. En el ejemplo siguiente el tamaño de la imagen es de 200px x 200px.

Para este resultado, escribimos ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : no-repeat ; height : 100vh; }

El valor space

Trabaja con los ejes X y Y. Podemos ver la principal diferencia en los espacios cuando cambiamos el tamaño de la ventana. Observa que obtenemos espacio en blanco cuando cambiamos el tamaño de la pantalla:

Para experimentar con este valor debemos escribir ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : space ; height : 100vh; }

El valor round

Esto funciona tanto para el eje x como el eje y. Observa que la imagen es expandida cuando nosotros cambiamos el tamaño de la pantalla.

Solo debemos escribir ->

.container{ background-image : url('kitty.png'); background-size : 200px 200px; background-repeat : round ; height : 100vh; }

La propiedad background-position

Esta propiedad es usada para cambiar la posición de la imagen en la pantalla.

Aquí tenemos la sintaxis: ?

.container{ // Esta es eje x? & ? eje y background-position : 300px 200px; }

No podemos olvidar insertar la imagen, establecer la altura y evitar la repetición de la imagen. Podemos establecer el tamaño de la imagen a 300px x 200px usando la propiedad background-size:

.container{ background-image: url("kitty-idea.png"); background-size: 200px 200px; background-repeat: no-repeat; // Este es eje x? & ? eje y background-position : 300px 200px; height: 100vh; }

Como resultado:

Podemos usar una combinación de estos valores:

top

left

right

bottom

percentage values

Por ejemplo, vamos a establecer nuestra imagen abajo a la derecha. Aquí está el código para esto:

.container{ background-image: url("kitty-idea.png"); background-size: 200px 200px; background-repeat: no-repeat; // Este es eje x? & ? eje y background-position : bottom right; height: 100vh; }

Calculando el espacio permitido de la pantalla, el valor porcentaje determina la posición de la imagen. Aquí lo vemos en código:

.container{ background-image: url("kitty-idea.png"); background-size: 200px 200px; background-repeat: no-repeat; // Este es eje x? & ? eje y background-position : 25% 15%; height: 100vh; }

Y esté es el resultado:

La propiedad background-origin

Esta propiedad nos permite establecer el origen de nuestra imagen a través del CSS box model.

Escribimos la sintaxis luego de escribir el selector, igual a ?

container{ // Escribiremos el valor ? aquí background-origin: border-box; }

Tiene cuatro posibles valores:

border-box

padding-box

content-box

inherit

En el standard CSS box model, la parte exterior es border. entonces luego tenemos el padding y finalmente tenemos el content en el centro.

Aquí tenemos el resultado de cada una de las propiedades:

Para recrear estos resultados:

Primero necesitamos una imagen; necesitamos detener la repetición de la imagen, y establecer el alto y el ancho al tamaño del contenedor de la imagen.

Una vez hecho, insertariamos 40px de padding, de lo contrario no podremos ver la diferencia entre padding-box y content-box.

Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de línea discontinua en la pantalla.

Establecemos la propiedad background-size a 400px & 400px.

Aquí podemos ver esto en código:

.container{ background-image: url('cute-girl.png'); background-repeat: no-repeat; background-size: 400px 400px; // Escribiremos el valor ? aquí para ver diferencia background-origin: border-box; padding: 40px; border: 25px solid red; border-style: dashed; // ancho y alto del contenedor ? width : 400px; height : 400px; }

Tomamos un descanso

La propiedad background-clip

Esta propiedad es igual a background-origin. Pero la principal diferencia es que background-clip CORTA la imagen para que quepa dentro del cuadro, mientras background-origin EMPUJA el contenido dentro del cuadro para que quepa.

Podemos escribir la sintaxis luego de escribir el selector, igual a ?

.container{ // Podremos escribir los valores ? aquí background-clip : border-box; }

Tiene cuatro valores posibles:

border-box

padding-box

content-box

inherit

Aquí tenemos el resultado de cada una de las propiedades

Para recrear estos resultados debemos:

Primero necesitamos una imagen, necesitamos detener la repetición, y necesitamos establecer el alto y el ancho ambos como el contenedor de la imagen.

Una vez hecho, podremos insertar 40px de padding, de lo contrario no podremos observar la diferencia entre padding-box y content-box.

Entonces, insertamos un borde rojo de 25px. Establecemos la propiedad border-style a dashed para obtener el borde de linea discontinua en la pantalla.

Establecemos la propiedad background-size a 400px & 400px.

El código se vería así:

.container{ background-image: url('cute-girl.png'); background-repeat: no-repeat; background-size: 400px 400px; // Cambiamos los valores aquí ? para ver las diferencias background-clip: border-box; padding: 40px; border: 25px solid red; border-style: dashed; // Alto y ancho para el contenedor ? width : 400px; height : 400px; }

La propiedad background-attachment

Esta propiedad nos permite manejar el comportamiento de nuestro contenido e imagen cuando hacemos scroll.

Nosotros escribimos la sintaxis luego del selector, igual a ?

.container{ // Podremos escribir los valores ? aquí background-attachment: scroll; }

Hay tres valores posibles:

Cuando usamos scroll la imagen se fija y podemos desplazarnos libremente por nuestro contenido. El valor fijo nos da un efecto de paralaje en el desplazamiento del mouse y produce múltiples imágenes siempre que nuestro contenido no termine.

Podemos ver los resultados en vivo aquí ?

La propiedad background-color

Podemos usar esta propiedad para establecer el background con color.

Debemos escribir la sintaxis luego de escribir el selector, igual a ?

.container{ // Podemos escribir el valor ? aquí background-color : red; }

Existen muchas opciones pero las más populares son:

Color sólido usando nombre o el valor hexadecimal

Usando la función RGB()

Usando la función `linear-gradient()``

¿Cómo obtener un color sólido de fondo utilizando el nombre o el valor hexadecimal?

Podemos usar el nombre del color para establecer el color de fondo haciendo:

.container{ background-color : red; height : 100vh; }

O, podemos usar el color hexadecimal de la siguiente manera:

.container{ background-color : #ff0000; //color rojo height : 100vh; }

Puedes revisar estos recursos para más colores.

coolors.co
flatuicolors.com

¿Cómo usar la función RGB() para establecer el color de fondo?

Podemos usar la función RGB() para establecer el color de fondo haciendo:

.container{ // Nombre del color "American River" background-color : rgb(99, 110, 114); height : 100vh; }

También podemos usar RGBA() para establecer el color y la opacidad

.container{ .container{ // El 0.5 al final representa 50% ? opacity background-color : rgba(99, 110, 114, 0.5); height : 100vh; } }

Este es un experimento con el color 'Eton blue' con varios niveles de opacidad.

Puedes visitar la página para más códigos usando CSS.

Vamos a recrear el siguiente color de fondo:

'#22c1c3'representa el color a la izquierda y '#fdbb2d' representa el color a la derecha. '90deg' nos dice como se inclinaran estos dos colores para generar el degradado.

El código se ve así:

.container{ background: linear-gradient(90deg, #22c1c3, #fdbb2d); height : 100vh; }

Resumen de las propiedades

Este es el resumen de las propiedades de background:

Para este experimento, vamos a colocar kitty.png en nuestro navegador usando un color de fondo azul con 200px en el eje X y 200px en el eje Y. El código referencia sería:

.container{ background-color : skyblue; background-image : url('kitty.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 200px 200px; height : 100vh; }

Y este sería el código usando una sola sentencia:

.container{ background: skyblue url('kitty.png) no-repeat fixed 200px 200px; height : 100vh; }

Usarlo en una sola sentencia nos ahorra tiempo. Si quieres saltar uno de los valores, puedes hacerlo siempre que se mantenga el orden de las propiedades.

Aquí tienes una medalla por leerlo todo hasta el final ❤️
Las quejas y las sugerencias son muy bien apreciadas ❤️

Creditos

YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Traducido del artículo de Joy Shaheb - Every CSS Background Property Illustrated and Explained with Code Examples ?️

# data[].attributes.attachment_link.title
Cada propiedad de fondo CSS ilustrada y explicadas con ejemplos de código?

# data[].attributes.attachment_link.description
Hoy vamos a aprender sobre cada una de las propiedades de fondo CSS con cada uno de sus posibles valores. Aprenderemos haciendo. ¡Vamos!? Tabla de contenidos * Todas las propiedades * background-image * background-size * background-repeat * background-position * background-origin * background-clip

# data[].attributes.body
Web para practicar HTML y CSS para replicar diseños de webs.

# data[].attributes.attachment_link.readable_text
Accelerate your skills by recreating real and carefully chosen websites.

Improve and test your frontend knowledge with various challenges.

Save time with color palettes for each individual project.

Helpful and curated resources to tackle difficult elements.

# data[].attributes.attachment_link.title
Frontend Practice | Become a better frontend developer.

# data[].attributes.attachment_link.description
Accelerate your skills by recreating real and carefully chosen websites. Improve and test your frontend knowledge with various challenges. Save time with color palettes for each individual project. Helpful and curated resources to tackle difficult elements.

# data[].attributes.attachment_link.readable_text
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods.

The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it:

Fills entire page with image, no white space

Scales image as needed

Retains image proportions (aspect ratio)

Image is centered on page

Does not cause scrollbars

As cross-browser compatible as possible

Isn't some fancy shenanigans like Flash

Image above credited to this site.

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Works in:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 supported background-size but not the keywords)

Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Update: Thanks to Goltzman in the comments for pointing out an Adobe Developer Connection article which features some code to make IE do cover backgrounds as well:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead.

Update: Matt Litherland writes in to say that anyone trying to use the above IE filters and having problems with scrollbars or dead links or whatever else (like Pierre above) should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height.

Big thanks, as usual, to Doug Neiner for this alternate version. Here we use an inline <img> element, which will be able to resize in any browser. We set a min-height which keeps it filling the browser window vertically, and set a 100% width which keeps it filling horizontally. We also set a min-width of the width of the image so that the image never gets smaller than it actually is.

The especially clever bit is using a media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.

Here is the CSS:

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Works in:

Any version of good browsers: Safari / Chrome / Opera / Firefox

IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim

IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine

IE 9: Works

One rather simple way to handle this is to put an inline image on the page, fixed position it to the upper left, and give it a min-width and min-height of 100%, preserving it's aspect ratio.

#bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }

However, this doesn't center the image and that's a pretty common desire here... So, we can fix that by wrapping the image in a div. That div we'll make twice as big as the browser window. Then the image will be placed, still preserving it's aspect ratio and covering the visible browser window, and the dead center of that.

#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }

Credit to Corey Worrell for the concept on this one.

Works in:

Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)

IE 8+

Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

Peter VanWylen wrote in to say that if you add the image via JavaScript, the img needs to have width: auto; and height: auto; to work in IE 8, 9, or 10.

Update January 2018: Trying to get this to work on Android? JL García wrote to me saying he needed to add height: 100%; and overflow: hidden; to the html element to get it to work. The full snippet being:

html { background: url(images/bg.jpg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden; }

I tested it, and it seemed totally correct. Without it / With it.

This whole idea becomes a lot easier (from a CSS perspective) if we know if the aspect ratio of the image (inline <img> we intend to use as a background) is larger or smaller than the current aspect ratio of the browser window. If it is lower, than we can set only the width to 100% on the image and know it will fill both height and width. If it is higher, we can set only the height to 100% and know that it will fill both the height and width.

We have access to this information through JavaScript. As usual around here, I like to lean on jQuery.

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });

This doesn't account for centering, but you could definitely alter this to do that. Credits to Koen Haarbosch for the concept behind this idea.

Works in:

IE7+ (could probably get in IE6 with a fixed position shim)

Most any other desktop browser

Update (June 2012): Reader Craig Manley writes in with a technique to load an appropriately sized background image according to screen. As in, don't load some huge 1900px wide background image for an iPhone.

First, you'd make images like 1024.jpg, 1280.jpg, 1366.jpg, etc. Then instead of loading an img, you'd load a shim.

If you don't like the gif shim (personally I think it's OK because it's not "content" it's a background) you could load up one of the real images instead. This code will account for that.

Then you test the screen width and set the src of the image based on it. The code below does it on resize, which you may or may not want. You could just run the code once if you wanted.

(function() { var win = $(window); win.resize(function() { var win_w = win.width(), win_h = win.height(), $bg = $("#bg"); // Load narrowest background image based on // viewport width, but never load anything narrower // that what's already loaded if anything. var available = [ 1024, 1280, 1366, 1400, 1680, 1920, 2560, 3840, 4860 ]; var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null; if (!current || ((current < win_w) && (current < available[available.length - 1]))) { var chosen = available[available.length - 1]; for (var i=0; i<available.length; i++) { if (available[i] >= win_w) { chosen = available[i]; break; } } // Set the new image $bg.attr('src', '/img/bg/' + chosen + '.jpg'); // for testing... // console.log('Chosen background: ' + chosen); } // Determine whether width or height should be 100% if ((win_w / win_h) < ($bg.width() / $bg.height())) { $bg.css({height: '100%', width: 'auto'}); } else { $bg.css({width: '100%', height: 'auto'}); } }).resize(); })(jQuery);

Note that screen width isn't the only possible good information to have when choosing an image size. See this article.

If you use this, please feel free to leave what technique you used and if you altered it in any way in the comments below. Always cool to see techniques "in the wild."
Download Files
Just for posterity's sake, there is another example in here called table.php which uses an old technique that used to be a part of this article. It had some cleverness, but wasn't quite as good as either CSS technique now presented above.

# data[].attributes.attachment_link.description
This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times.

# data[].attributes.body
Ayudar a los buscadores a indexar contenido...

# data[].attributes.attachment_link.readable_text
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen más de 30 nuevas etiquetas semánticas que pueden ser utilizadas en nuestras páginas estáticas. Estas nuevas etiquetas se podrían clasificar en dos grupos:

Etiquetas que extienden a las actuales, como <video>, <audio> o <canvas>, y que además añaden nuevas funcionalidades a los documentos HTML, que podemos controlar desde JavaScript y

etiquetas que componen la web semántica, es decir, que no proponen nuevas funcionalidades pero sirven para estructurar sitios web, y añadir un significado concreto, más allá de las etiquetas generales como <div>.

En este capítulo, veremos como transformar nuestra estructura actual de marcado basada en <div>, a una estructura que utiliza las nuevas etiquetas estructurales como <nav>, <header>, <footer>, <aside>, o <article>.

2.1 Cabecera del documento

Además de las nuevas etiquetas introducidas por HTML5 (que veremos más adelante), el nuevo estándar propone pequeñas mejoras que podemos aplicar en la definición de nuestros documentos, en concreto en la cabecera de los mismos.

2.1.1 DOCTYPE

El estándar XHTML deriva de XML, por lo que comparte con él muchas de sus normas y sintaxis. Uno de los conceptos fundamentales de XML es la utilización del DTD o Document Type Definition ("Definición del Tipo de Documento"). El estándar XHTML define el DTD que deben seguir las páginas y documentos XHTML. En este documento se definen las etiquetas que se pueden utilizar, los atributos de cada etiqueta y el tipo de valores que puede tener cada atributo.

<!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ésta es una de las 15 declaraciones posibles declaradas en los estándares HTML4 y XHTML. En HTML5 se reduce la definición del tipo de documento a una única posibilidad, por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto:

2.1.2 Elemento raíz HTML

En todo documento HTML, su elemento raíz o nodo superior siempre es la etiqueta <html>. Hasta ahora, este elemento raíz se definía de la siguiente manera:

No hay ningún problema en mantener esta sintaxis. Si se desea, se puede conservar, ya que es válido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por lo que podemos eliminarlas.

El primer elemento del que podemos prescindir es el atributo xmlns. Se trata de una herencia de XHTML 1.0, que dice que los elementos de esta página están en el espacio de nombres XHTML, http://www.w3.org/1999/xhtml. Sin embargo, los elementos de HTML5 están siempre en este espacio de nombres, por lo que ya no es necesario declararlo explícitamente. Eliminar el atributo xmlns nos deja con este elemento de la siguiente manera:

En este caso ocurre lo mismo con el atributo xml:lang, es una herencia de XHTML que podemos eliminar, quedando finalmente la etiqueta de la siguiente manera:

2.1.3 Elemento HEAD

El primer hijo del elemento raíz es generalmente el elemento head. El elemento head contiene los metadatos que aportan información extra sobre la página, como su título, descripción, autor, etc. Además, puede incluir referencias externas a contenidos necesarios para que el documento se muestre y comporte de manera correcta (como hojas de estilos o scripts). Este elemento ha sufrido pequeñas variaciones, pero que debemos tener en cuenta:

2.1.3.1 Codificación del contenido

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definición de "caracteres y símbolos que veo en la pantalla de mi ordenador". Pero realmente se tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se almacena con una codificación de caracteres en particular. Hay cientos de codificaciones de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino o inglés, y otros que se pueden utilizar para múltiples idiomas. En términos generales, la codificación de caracteres proporciona una correspondencia entre lo que se muestra en la pantalla y lo que un equipo realmente almacena en la memoria y en el disco.

Se puede pensar en la codificación de caracteres como una especie de clave de descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es "texto", lo que necesitamos saber es qué codificación de caracteres se utiliza para que pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera correcta.

Lo ideal es establecer esta codificación en el servidor, indicando el tipo en las cabeceras de respuesta:

Content-Type: text/html; charset="utf-8"

Por desgracia, no siempre podemos tener el control sobre la configuración de un servidor HTTP. Por ejemplo, en la plataforma Blogger, el contenido es proporcionado por personas, pero los servidores son administrados por Google, por lo que estamos supeditados a su configuración. Aún así, HTML 4 proporciona una manera de especificar la codificación de caracteres en el documento HTML:

El encabezado HTTP es el método principal, y anula la etiqueta <meta> si está presente. Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta <meta> todavía tiene sentido. En el caso de HTML5, es aún más sencillo definir esta etiqueta meta:

Debemos acostumbrarnos a especificar la codificación de nuestros documentos, aunque no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad.

Dentro del elemento head, las etiquetas <link> son una manera de acceder o declarar contenido externo al documento actual, que puede cumplir distintos objetivos:

Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al presente documento.

Es un feed que contiene el mismo contenido que esta página, pero en un formato estándar (RSS).

Es una traducción de esta página en otro idioma.

Es el mismo contenido que esta página, pero en formato PDF.

Es el próximo capítulo de un libro en línea de la cual esta página es también una parte.

En HTML5, se separan estas relaciones de enlace en dos categorías:

Enlaces a recursos externos que se van a utilizar para mejorar el documento actual,

y enlaces de hipervínculos que son enlaces a otros documentos.

El tipo de relación más utilizado (literalmente) es el siguiente:

Esta relación es utilizada para indicar el archivo donde se almacenan las reglas CSS que se desean aplicar al documento. Una pequeña optimización que se puede hacer en HTML5 es eliminar el atributo type. Sólo hay un lenguaje de estilo para la web, CSS, así que ese es el valor predeterminado para el atributo type:

2.2 Nuevas etiquetas semánticas

En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000 de páginas web utilizando el motor de Google, intentando identificar la manera en la que la web real estaba construida. Uno de los resultados de este análisis, fue la publicación de una lista con los nombres de clases más utilizados. Este estudio revela que los desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto llevó a considerar que quizás fuese una buena idea crear etiquetas concretas para reflejar estas estructuras.

Este tipo de etiquetas que componen la web semántica nos sirven para que cualquier mecanismo automático (un navegador, un motor de búsqueda, un lector de feeds...) que lea un sitio web sepa con exactitud qué partes de su contenido corresponden a cada una de las partes típicas de un sitio. Observando esas etiquetas semánticas estructurales, cualquier sistema podrá procesar la página y saber cómo está estructurada. Veamos algunas de estas etiquetas que introduce HTML5 en este sentido.

<section></section>: se utiliza para representar una sección "general" dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web.

<article></article>: representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o cualquier otro artículo independiente de contenido. Cuando los elementos de <article> son anidados, los elementos interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>.

<aside></aside>: representa una sección de la página que abarca un contenido relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página.

<header></header>: representa un grupo de artículos introductorios o de navegación. Está destinado a contener por lo general la cabecera de la sección (un elemento h1-h6 o un elemento hgroup), pero no es necesario.

<nav></nav>: representa una sección de una página que enlaza a otras páginas o a otras partes dentro de la página. No todos los grupos de enlaces en una página necesita estar en un elemento nav, sólo las secciones que constan de bloques de navegación principales son apropiados para el elemento de navegación.

<footer></footer>: representa el pie de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.

<hgroup></hgroup>: representa el encabezado de una sección. El elemento se utiliza para agrupar un conjunto de elementos h1-h6 cuando el título tiene varios niveles, tales como subtítulos o títulos alternativos.

<time>: representa o bien una hora (en formato de 24 horas), o una fecha precisa en el calendario gregoriano (en formato ISO), opcionalmente con un tiempo y un desplazamiento de zona horaria.

2.3 Estructura de un documento HTML5

Como hemos visto con las nuevas etiquetas semánticas introducidas en HTML5, éstas aportan un significado concreto al documento que estamos definiendo, y por lo tanto, afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver como podemos convertir nuestra actual página con las nuevas etiquetas introducidas en HTML5.

2.3.1 Estructura tradicional de un documento en HTML 4

El siguiente código muestra una estructura "clásica" de documento HTML, donde los diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por sí mismas, estas etiquetas no aportan ningún tipo de significado, y el atributo id tampoco se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever">, el significado sigue siendo el mismo, ninguno.

2.3.2 Estructura tradicional de un documento en HTML5

Veamos como podemos añadir un significado a este documento, únicamente aplicando las nuevas etiquetas semánticas incluidas en HTML5.

Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos utilizar. Esto no siempre es así, y cuando estructuramos contenidos de mucho mayor alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar en la correcta selección de etiquetas, es el que proponen en HTML5 Doctor.

2.4 Uso de las nuevas etiquetas semánticas

Según la especificación, un elemento <header> representa lo siguiente:

Un grupo de navegación o contenido introductorio. Un elemento header normalmente contiene una sección de encabezado (un elemento h1-h6 o un elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de contenidos, un formulario de búsqueda o cualquier logo importante.

En nuestro ejemplo, y en la mayoría de los sitios web, la cabecera contiene los primeros elementos de la página. Tradicionalmente el título de la web, su logo, enlaces para volver al inicio... De la manera más simple, nuestra cabecera quedaría de esta forma:

También es muy común que los sitios web muestren un lema o subtítulo bajo el título principal. Para dar mayor importancia a este subtítulo, y relacionarlo de alguna manera con el título principal de la web, es posible agrupar los dos titulares bajo un elemento <hgroup>.

Según la especificación, un elemento <nav> representa lo siguiente:

El elemento <nav> representa una sección de una página que enlaza con otras páginas o partes de la misma página: una sección con enlaces de navegación.

El elemento <nav> ha sido diseñado para identificar la navegación de un sitio web. La navegación se define como un conjunto de enlaces que hacen referencia a las secciones de una página o un sitio, pero no todos los enlaces son candidatos de pertenecer a un elemento <nav>: una lista de enlaces a patrocinadores o los resultados de una búsqueda, no forman parte de la navegación principal, sino que corresponden con el contenido de la página.

Como ocurre con los elementos <header>, <footer> y el resto de nuevas etiquetas, no estamos obligados a utilizar un único elemento <nav> en toda la página. Es posible que tengamos una navegación principal en la cabecera de la página, una tabla de contenidos o enlaces en el pie de la página, que apuntan a contenidos secundarios. Todos ellos son candidatos a pertenecer a un elemento <nav>.

Según la especificación, un elemento <footer> representa lo siguiente:

Representa el pie de una sección. Un pie tradicionalmente contiene información acerca de su sección, como quién escribió el contenido, enlaces relacionados, copyright y similares.

Al igual que ocurre con el elemento <nav>, podemos tener tantos elementos <footer> como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie principal, que contiene los avisos legales (privacidad, condiciones del servicio, copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que pueden ir incluidos en un elemento <nav>.

Según la especificación, un elemento <article> representa lo siguiente:

Este elemento representa un contenido completo, auto-contenido en un documento, página, aplicación o sitio web, que es, en principio, independiente de ser distribuido y reutilizado, por ejemplo en un RSS. Puede ser un post de un foro, un artículo de un periódico o revista, una entrada de un blog, un comentario de un usuario, un widget o cualquier otro elemento independiente.

Cuando los artículos están anidados, los artículos interiores representan contenido que en principio está relacionado con el artículo que los contiene. Por ejemplo, una entrada de un blog puede aceptar comentarios de usuarios, que están incluidos dentro del contenido principal y relacionados con el mismo.

Por lo tanto, la etiqueta <article> se utiliza para encapsular contenido, que tiene significado en sí mismo, y que puede ser distribuido y reutilizado en otros formatos de datos. No nos referimos únicamente a contenidos clásicos de texto, sino que incluso un contenido multimedia con su transcripción, un mapa o email pueden ser totalmente válidos para ser incluidos en una etiqueta <article>.

A diferencia del elemento <article>, este elemento es utilizado para dividir el documento (o artículos) en diferentes áreas, o como su propio nombre indica, en secciones. Según la especificación, un elemento <section> representa lo siguiente:

Representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es un grupo temático de contenido, que generalmente incluye una cabecera.

Consideremos el siguiente marcado válido en HTML 4:

En este caso, y desde un punto de vista semántico, es complicado deducir si el texto Vital caveat about the information above: does not apply on the first Thursday of the month. pertenece al contenido completo o está relacionado con la sección Fan Club uniforms. Gracias a la etiqueta <section>, es muy sencillo separar e identificar a qué sección pertenece cada contenido:

Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar contenido que pertenece a una misma sección, permitiendo incluirlo dentro de un contexto semántico.

Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento en secciones, que incluyen contenido de temáticas diferentes entre sí. Si además queremos separar estos contenidos visualmente en dos columnas, lo lógico sería utilizar las tradicionales etiquetas <div> para agrupar los artículos según su temática, y posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestañas.

En este caso, la etiqueta <div> no nos aporta ningún significado semántico, tan sólo estructural. La etiqueta <section> es la encargada de añadir semántica en estos casos:

Según la especificación, un elemento <aside> representa lo siguiente:

Una sección de una página que consiste en contenido tangencialmente relacionado con el contenido alrededor del elemento, y puede considerarse separado de este contenido. Estas secciones son normalmente representadas como elementos laterales en medios impresos. Este elemento puede utilizarse contener citas, anuncios, grupos de elementos de navegación y cualquier otro contenido separado del contenido principal de la pagina.

Dentro de un artículo, por ejemplo, puede ser utilizado para mostrar contenido relacionado como citas u otros artículos relacionados.

Según la especificación, un elemento <figure> representa lo siguiente:

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

The element can be used to annotate illustrations, diagrams, photos, code listings, etc. This includes, but is not restricted to, content referred to from the main part of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

Hasta ahora, no había una manera correcta de poder añadir un subtítulo o una leyenda a un contenido concreto, como explicar una figura o atribuir una imagen a un fotógrafo. Gracias a la etiqueta <figure> podemos contener una imagen (o un vídeo, ilustración o bloque de código) en un elemento y relacionarlo con un contenido concreto:

En conveniente recordar que el atributo alt indica el texto a mostrar cuando la imagen no está disponible, y no está pensada para contener una descripción de la imagen, y mucho menos para duplicar lo ya indicado en la etiqueta <figcaption>.
Ver enunciado
2.5 Atributos globales

HTML5 también incluye nuevos atributos globales que pueden ser asignados a cualquier elemento. Son los siguientes:

2.5.1 accesskey

El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que permite activar un elemento a asignarle el foco. Este atributo ya existía en HTML 4, aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 está pensado para aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no ha sido eliminado, y ahora está disponible para cualquier elemento.

Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la especificación:

Esto quiere decir que este elemento es accesible a través de dos atajos de teclado, a través de la tecla s o a través de la tecla 0 (en ese orden).

2.5.2 contenteditable

Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta contenteditable es ahora parte de la especificación oficial.

La introducción de esta etiqueta significa principalmente dos cosas:

Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar una marca que indique la posición actual del cursor.

Y segundo, es posible cambiar el formato del texto del contenido, añadiendo negritas, cambiar la fuente, añadir listas, etc.

Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder desde JavaScript a este atributo, hay que tener en cuenta su notación lowerCamelCase, siendo el nombre de la propiedad del DOM contentEditable. Además, existe otra propiedad llamada isContentEditable, que indica si el elemento es editable o no.

Finalmente, el contenido que ha sido seleccionado por el usuario, puede ser objeto de modificaciones, como hemos comentado antes. A través del comando element.execCommand() es posible indicar el tipo de modificación (poner en negrita, copiar, cambiar la fuente...), siempre que el documento se haya indicado como editable.

Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al servidor. No existe ningún API o método en JavaScript que nos posibilite esta acción, por lo que debemos utilizar algún tipo de tecnología tipo AJAX.

2.5.3 data-* (custom data attributes)

HTML5 permite crear atributos personalizados para los elementos. Estos atributos son utilizados para pasar información a JavaScript. Como veremos en el capítulo correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera almacenar información asociada con elementos, pero esto cambia radicalmente con estos atributos.

2.5.4 draggable

Este atributo indica que el elemento indicado puede ser arrastable. Lo veremos en el capítulo correspondiente.

# data[].attributes.attachment_link.description
Una de las novedades que hemos mencionado anteriormente son las etiquetas que se han introducido en HTML5. Existen más de 30 nuevas etiquetas semánticas que pueden ser utilizadas en nuestras páginas estáticas.

# data[].attributes.attachment_link.readable_text
Al principio, la web solo era texto y resultaba más bien aburrido. 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) en las páginas web. Hay otros tipos de elementos multimedia que 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 este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando <figure> y explicaremos cómo se relaciona con las imágenes de fondo en CSS.

Prerrequisitos:

Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, estar familiarizado con los principios básicos de HTML (como se describe en Empezar con el HTML).

Objetivo:

Aprender cómo insertar imágenes simples en HTML y añadirles pies de imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo de CSS.

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 de 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 dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

Si la imagen estaba en el subdirectorio images, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores SEO), entonces deberías incrustar la imagen así:

y así sucesivamente.

Nota: Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO. Por lo tanto, dale a tu imagen un nombre descriptivo; dinosaur.jpg es mejor que img835.png.

Puedes incrustar la imagen usando la URL absoluta, por ejemplo:

Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.

Advertencia: La mayoría de imágenes tienen derechos de autor. No muestres una imagen en tu página web a menos que:

1. seas dueño de la imagen,

2. tengas permiso escrito explícito del dueño de la imagen o

3. 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 apuntes 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.

Nuestro código anterior debería darnos el resultado siguiente:

Nota: Los elementos como <img> y <video> a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video), no en el contenido del elemento en sí.

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 puede ser vista/mostrada o tarde demasiado en mostrarse por una conexión lenta a internet. Por ejemplo, nuestro código anterior podría modificarse así:

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre archivo de nuestra imagen como dinosooooor.jpg, el navegador no podrá mostrar la imagen, en su lugar mostrará el texto alternativo:

¿Por qué vas a ver o necesitar el texto alternativo? Puede ser 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 sucede especialmente en teléfonos móviles y en países en que el ancho de banda es limitado y caro.

¿Qué hay que escribir exactamente en el atributo alt? Esto depende en primer lugar de 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, proporciona 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.

En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.

Puedes usar los atributos ancho ( width) y alto ( height) para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en Mac puedes usar Cmd + I para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

Esto no proporciona una gran diferencia en la pantalla en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, porque el usuario acaba de acceder a la página y esta aún no se ha cargado, observarás que el navegador reserva un espacio para la imagen:

Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y 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.

Nota: Si tienes que alterar el tamaño de una imagen es mejor usar CSS.

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:

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. 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 esta cuestión, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O'Hara.

Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla en la imagen.

¡Ahora te toca jugar a ti! Esta sección de aprendizaje activo te mantendrá activo con un ejercicio sencillo de incrustado. Te proporcionamos una etiqueta básica <img> y nos gustaría que incrustes la imagen ubicada en la URL siguiente:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Ya hemos dicho que nunca se apuntará a imágenes de otros servidores (hotlink), pero esto es solo con fines de aprendizaje, por lo que te lo vamos a dejar hacer por esta vez.

También nos gustaría que hagas lo siguiente:

Añadir un texto alternativo y comprobar que funciona si escribes mal la URL de la imagen.

Establecer las propiedades width y height correctas de la imagen (pista: tiene 200px de ancho y 171px de alto), luego experimentar con otros valores para ver cuál es el efecto.

Establecer un elemento title en la imagen.

Si te equivocas, puedes volver a empezar pulsando el botón Reiniciar. Si te encallas, pulsa el botón Mostrar la solución para ver la solución:

Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:

Esto está bien. 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í:

El elemento <figcaption> 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>.

Nota: 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. Desactiva las imágenes en tu navegador y observa el resultado.

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.

En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un elemento figure:

Delimítalo todo en un elemento <figure>.

Copia el texto del atributo title, elimina el atributo title, y pon el texto dentro de un elemento <figcaption> bajo la imagen.

Si te equivocas, siempre puedes volver a empezar pulsando el botón Reiniciar. Si te quedas atascado, presiona el botón Ver solución para ver la respuesta:

También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso ya es otra historia). La propiedad CSS background-image y las demás propiedades background-* se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:

p { background-image : url ( "images/dinosaur.jpg" ) ; }

La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es entonces cuando las imágenes HTML triunfan!

En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.

Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.

# data[].attributes.attachment_link.title
Imágenes en HTML - Aprende desarrollo web | MDN

# data[].attributes.attachment_link.description
Al principio, la web solo era texto y resultaba más bien aburrido. 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) en las páginas web.

# data[].attributes.attachment_link.readable_text
Los hipervínculos (o enlaces) son elementos verdaderamente importantes - son los que hacen que la web sea web. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.

Prerrequisitos:

Estar familiarizado con HTML, cubierto en [Empezar con HTML](/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started). Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección [fundamentos de texto HTML](/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals).

Objetivo:

Aprender a implementar un hipervínculo de forma efectiva y enlazar múltiples archivos.

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).

Nota: 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 cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo 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).

El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve Convertir bloques de contenido en enlaces), 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.

Este código producirá el siguiente resultado:

Crea un enlace a la página de inicio de Mozilla.

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 el sitio web.

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

Crea un enlace a la página de inicio de Mozilla.

Nota: 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.

Es momento del aprendizaje activo - crea un documento HTML con tu editor de código (nuestra plantilla de aprendizaje te hará la tarea más llevadera).

En el cuerpo del HTML (body), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.

Convierte algún texto en enlaces.

Incluye atributos de título (title).

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>.

Nota: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.

Una localizadora uniforme de recursos (URL, de las iniciales en inglés de " 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.html en 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.

En el 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:

 ¿Quieres contactar con un miembro específico del personal? Encuentra los detalles en nuestra <a href = "contacts.html" > página de contactos.

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:

 Visita mi <a href = "projects/index.html" > página de inicio del proyecto.

Subiendo por nuestro sistema de directorios: 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:

 Un enlace a mi<a href = "../pdfs/project-brief.pdf" > resumen del proyecto.

Nota: 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.

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í:

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla - veamos el ejemplo:

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

Dos términos que encontrarás en la Web son URL absoluta y URL relativa:

URL absoluta: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el protocolo y el nombre del dominio. Por ejemplo, si subes una página de inicio index.html a un directorio llamado projects que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es http://www.example.com, se podrá acceder a la página desde http://www.example.com/projects/index.html (o simplemente http://www.example.com/projects/, ya que la mayoría de los servidores web buscan la página de inicio index.html para cargarla por omisión si no se les especifica otra en la URL).

Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.

Una URL relativa: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza - son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en http://www.example.com/projects/index.html queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: project-brief.pdf) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de projects llamado pdfs, la URL relativa es: pdfs/project-brief.pdf (la URL absoluta equivalente sería: http://www.example.com/projects/pdfs/project-brief.pdf).

Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza - por ejemplo, si movemos nuestro archivo index.html del directorio projects a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa pdfs/project-brief.pdf ahora hará referencia a http://www.example.com/pdfs/project-brief.pdf, en lugar de a http://www.example.com/projects/pdfs/project-brief.pdf.

Por supuesto, la ubicación del archivo pdfs/project-brief.pdf y del directorio pdfs no cambian de repente cuando mueves el archivo index.html; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!

Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.

Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean accesibles para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:

Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.

Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.

Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.

Veamos un ejemplo concreto:

Buen texto en un enlace: Descargar Firefox

Mal texto en un enlace: Pulsar aquí para descargar Firefox

Otras indicaciones:

No repetir la URL como parte del texto - Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.

No escribir "link" o "link a" o "enlace" o "enlace a" en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).

Redacta la etiqueta del enlace de la manera más breve y concisa posible - los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.

Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".

A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del mismo sitio web. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.

Primero, porque el código es mucho más fácil de leer - las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.

Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio (DNS (en-US)), consulta Cómo funciona la web para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.

Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.

Por ejemplo:

Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.

Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.

Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:

Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo download para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:

Para este ejercicio, deberás crear lo que se conoce como web multipágina: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web - usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.

Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio navigation-menu-start para el listado completo):

A continuación:

1. Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (links), por lo que esto es semánticamente correcto.

2. Convierte cada nombre en un enlace a esa página.

3. Copia el menú de navegación en cada una de las páginas.

4. En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).

El ejercicio terminado debería crear una página como la siguiente:

Nota: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio navigation-menu-marked-up para ver la respuesta correcta.

Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla <a> y el elemento mailto: seguido del esquema de la URL.

En su forma más básica, un enlace mailto: simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:

Esto da como resultado un enlace que se ve así: Enviar correo electrónico a ninguna parte.

De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu (href simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.

Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL mailto que proporciones. Los más utilizados son el " subject" (asunto), " cc" (con copia a) o " bcc" (copia oculta), y " body " (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.

Veamos un ejemplo que incluye estos campos:

Nota: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) Código porciento. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace mailto:. Esta es la notación de consulta URL estándar. Lee el método GET para comprender mejor qué notación de consulta URL se usa comúnmente.

A continuación otros ejemplos de utilización de enlaces mailto:

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta Pon a prueba tus habilidades: Enlaces.

Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad - Formato de texto avanzado será la próxima parada.

# data[].attributes.attachment_link.title
Crear hipervínculos - Aprende desarrollo web | MDN

# data[].attributes.attachment_link.description
Los hipervínculos (o enlaces) son elementos verdaderamente importantes - son los que hacen que la web sea web. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.

# data[].attributes.attachment_link.title
Usa tu nuevo conocimiento - Aprende sobre desarrollo web | MDN

# data[].attributes.attachment_link.description
Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

# data[].attributes.attachment_link.title
Fundamentos de texto en HTML - Aprende sobre desarrollo web | MDN

# data[].attributes.attachment_link.description
Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como semántica (en-US)), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar HTML para estructurar una página de texto añadiendo encabezados y…

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.description
There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page.

# data[].attributes.attachment_link.description
The W3Schools online code editor allows you to edit code and view the result in your browser

# data[].attributes.attachment_link.readable_text
When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites.

Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites.

Thankfully, this is no longer the case these days due to the revolutionary introduction of Responsive Web Design.

In this article, I will take you through the evolution of Responsive Web Design, the various integrations that have made it possible, and how you can start to use it in your coding projects for a better user experience.

What is Responsive Web Design?

Responsive web design makes web pages render properly on a wide variety of device screen sizes without cutting short or distorting the content.

This doesn't mean a website will appear exactly the same way on a phone as on a laptop, for example. Rather, it means that the content of the web page adapts to different screen sizes - from large screens (desktops and laptops) to medium screens (tablets) to mobile screens (phones of various screen sizes).

And it does this all while retaining the same content (just perhaps arranged differently to fit each screen).

The Evolution of Responsive Web Design

In the past, people mostly used desktops and laptops to view content online, because websites were optimized for those screens only.

But as more and more people started using mobile phones to surf the web, people started grumbling about the poor display and layouts they were seeing.

This meant one thing for web designers and developers: websites needed to be optimized for mobile, too!

In the last decade, the number of website users on mobile began to surpass that of desktops and laptops for the first time. So everyone from tech giants to small businesses started embracing a responsive web design approach.

Developers and designers also created the shiny new mobile-first design as well. This meant that the developers made the websites for mobile devices first, and desktop later.

This often meant a separate website for mobile devices and larger screens, with the same server system but different domains.

The original website, for example, could be examplewebsite.com, and the mobile version would be examplewebsite.mobi, or m.examplewebsite.com.

The user's device would be detected by ready-made scripts and then the appropriate domain would be rendered. This practice still exists today.

Apart from the two-domain method, web designers and developers can create a website for a particular screen size first (it could be desktop, tablet, or mobile), and then add what are called media queries to make the website adapt to different screen sizes. This is the mobile-first approach.

How to Make Your Site Responsive

Integrating responsive web design approaches into a project includes every part of the code - within the HTML <head> element, the HTML structure, the CSS, and even the JavaScript.

I will describe these processes as clearly and in as much detail as possible.

Set the Viewport in the Head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Since HTML plays a huge role in defining the structure of a web page, then it definitely has something to do with making websites respond (adapt) to different screen sizes.

You'll need to include the meta viewport empty element in the head section of any web page that you want to optimize for different screen sizes.

This tells the browser to render the width of the web page to the exact width of the device. So, if the device has a width of 1200px, the web page width will be 1200px. If the device has a width of 720px, the web page width will be 720px, and so on.

This prevents annoying zooming in and zooming out that mobile phone users experienced in the past, which wasn't good for user experience.

Below is how a website looks on small phones without the <meta> viewport element:

And here's how the same website with the <meta> viewport element looks on small phones:

If you are wondering which website this is, it's a free portfolio website template I made for beginners. I will make it available to all freeCodeCamp readers very soon - so, stay tuned. :)

But the <meta> viewport element is not all you need to make a website adapt to different screen sizes. There's more.

The most crucial tool you'll use to make your sites responsive is CSS3 Media Queries. Media queries let you write the same CSS code in different ways for multiple screens.

With media queries, you tell the browser to display the content in a particular way on a particular screen.

The basic syntax of a media query looks like this:

@media screen and (max-width: 720px) { /*CSS codes go here*/ }

This tells the browser to execute the CSS code written within the media query when the screen width is below a 720 pixel breakpoint. The breakpoint can usually be any value between 1200 pixels and 320 pixels.

In the code snippets below, I'm instructing the browser to change the background-color to dark-grey, and the color to blue when the screen width is below 768 pixels.

<body> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum. </p> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa! </p> </body>

 @media screen and (max-width: 768px) { body { background-color: #333; color: #3498db; } }

Several other breakpoints exist for different devices.

320 - 480px for small phones such as iPhone 6, 7, and 5

478 - 768px for Tablets and iPads

1025 - 1200px for desktops and large screens

Some extra-large screens and TVs can take more than 1200px.

Responsive Text

Since text size won't be the same on a mobile phone as it is on a desktop, text must be made to scale down as the device screen width reduces.

You can do this within the media query for each screen. And one of the ways to make it easier is to use relative units (%, rem, and em) instead of an absolute unit such as px.

In the HTML and CSS code snippets below, I instruct the browser to make the font size of the text 3rem on big screens, and 1.5rem on screens below a width of 768pixels:

<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum. </p> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa! </p>

@media screen and (max-width: 768px) { p { font-size: 1.5rem; } }

Responsive Images

Just like text, images must scale down as screen width reduces, too.

Images have a fixed width and height, so when they are larger than the viewport width (screen width), a user typically has to scroll to see the whole thing, which creates a bad user experience.

Developers get around this by setting a max-width of 100% for all images and displaying them as block-level elements (images are inline elements by default).

You can set this for the images in your code individually, but to foster DRY (Do not repeat yourself) principles, you should do it in your resets for all images.

 img { display: block; max-width: 100%; }

Another way to make images responsive is to use the picture element in HTML. With this element, you can tell the browser to display different images that correlate to the width on different devices.

<picture> <source media="(max-width: 1100px)" srcset="freecodecamp-large-logo.jpg" /> <source media="(max-width: 900px)" srcset="freecodecamp-medium-logo.jpg" /> <source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" /> <img src="freecodecamp-large-logo.jpg" alt="freeCodeCamp" style="max-width: 100%" /> </picture>

On a screen of size 1100px width and below, freecodecamp-large-logo will be shown

On a screen of size 900px width and below, freecodecamp-medium-logo will be shown

On a screen of size 760px width and below, freecodecamp-small-logo will be shown

If the screen width meets none of the conditions, freecodecamp-large-logo will be shown.

Responsive Layout

The layout of any web page determines how the content is displayed in the browser.

In the past, developers had to use tables, which were not easy to control. Then came float and clearfix, which were also difficult to manage.

The introduction of CSS Grid and Flexbox revolutionized layouts and gave more relevance to responsive design.

Flexbox

With CSS flexbox, responsive design gained more relevance because, with it, you don't have to add too many media queries unlike when you use floats for a layout.

Immediately when a display of flex is assigned to the containing element, the element direction is rendered on the row by default.

You can later use a media query to set the direction to a column for smaller screens with the flex-direction property. The flex-direction property value has to be explicitly set to a column.

You can also layout the way you want the content on the web page to render with properties such as flex-grow and flex-shrink. These two properties make the element they contain grow as the screen viewport (width) increases and shrink as the viewport decreases. How cool is that?

In the code snippets below, the direction of the different pieces of text in their respective containers will be a row on screens higher than 768 pixels in width, and a column when the width is lower than 768 pixels.

I was able to do it by displaying the whole items inside the body element as flex.

<body> <div class="container-one"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam delectus molestiae! </p> </div> <div class="container-two"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis dolor amet nostrum quam! Voluptates nam architecto enim neque nemo consectetur molestias unde fugit dolorum alias temporibus expedita doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis consequuntur placeat maiores voluptas, quos esse eum. </p> </div> <div class="container-three"> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat, nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque! Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa! </p> </div> </body>

body { display: flex; } div { border: 2px solid #2ecc71; margin-left: 6px; } @media screen and (max-width: 768px) { body { flex-direction: column; } }

CSS Grid

CSS grid is more or less a hybrid and more powerful form of flexbox. Many have argued that whatever you're doing with Flexbox, you can do in fewer lines of code with Grid.

With CSS grid, you get to create flexible grids in a more straightforward way as you can define the columns and rows you want with the grid-auto-flow property set to either column or row.

You can do the same thing that we did in the Flexbox example this way with Grid:

body { display: grid; grid-auto-flow: column; gap: 6px; } div { border: 2px solid #2ecc71; margin-left: 6px; } @media screen and (max-width: 768px) { body { grid-auto-flow: row; } }

You can learn more about Flexbox and Grid in the freeCodeCamp CSS curriculum.

Conclusion

As internet users now access websites on mobile phones more than on desktops and laptops, responsive design is the way to go when it comes to making modern websites.

Knowing Responsive Design best practices will set you apart from other developers as you will be able to make websites that adapt to different screen sizes within the same HTML, CSS, and JavaScript files.

I hope this article has given you the insights you need to make responsive real-world websites.

Thank you for reading, and keep coding.

# data[].attributes.attachment_link.title
Responsive Web Design - Modern Website Code for Beginners

# data[].attributes.attachment_link.description
When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile phone users had to endlessly zoom and scroll to access and view different parts of those same websites. Thankfully, this is no longer

# data[].attributes.attachment_link.readable_text
Introducción

Los selectores en CSS son una herramienta poderosa para los desarrolladores web, y conocer su funcionamiento y variedad puede ayudar a mejorar la eficiencia y calidad del código CSS.

En este artículo, exploraremos los diferentes tipos de selectores en CSS, desde los selectores básicos de elementos y clases, hasta los selectores más avanzados de pseudoclase y combinados.

Ya sea que seas un desarrollador principiante o experimentado, este artículo te proporcionará una guía completa y detallada sobre cómo usar los selectores en CSS para mejorar el diseño y la funcionalidad de tu sitio web.

¿Qué son los selectores en CSS?

Los selectores en CSS son patrones utilizados para seleccionar elementos HTML específicos a los que se aplicarán estilos.

Los selectores pueden ser tan simples como seleccionar un elemento por su nombre, como un encabezado h1, o más complejos, como seleccionar elementos con un cierto atributo o valor.

Tipos de selectores en CSS

Existen cuatro tipos principales de selectores en CSS, cada uno de los cuales se utiliza para seleccionar elementos HTML específicos.

A continuación, se detallan cada uno de ellos:

1. Selectores de elemento

Los selectores de elemento seleccionan elementos HTML por su nombre de etiqueta. Por ejemplo, el selector h1 seleccionará todos los encabezados de nivel 1 (<h1>) de la página.

Los selectores de elemento son los más simples y comunes en CSS.
Ejemplo de código CSS: Ejemplo de código HTML:
2. Selectores de clase

Los selectores de clase seleccionan elementos HTML que tienen un atributo class específico. Puedes utilizar cualquier nombre para la clase y aplicarla a tantos elementos como desees.

Los selectores de clase se escriben con un punto delante del nombre de la clase.
Ejemplo de código CSS: Ejemplo de código HTML:
3. Selectores de ID

Los selectores de ID seleccionan un único elemento HTML con un atributo id específico. Cada id debe ser único en la página.

Los selectores de ID se escriben con un numeral delante del nombre del ID.
Ejemplo de código CSS: Ejemplo de código HTML:
4. Selectores de atributo

Los selectores de atributo seleccionan elementos HTML que tienen un atributo específico, independientemente de su valor. Puedes utilizar los atributos comunes como href y src, y también crear atributos personalizados.

Los selectores de atributo se escriben entre corchetes.
Ejemplo de código CSS: Ejemplo de código HTML:
Cada tipo de selector en CSS tiene su propia sintaxis y se utiliza para seleccionar elementos específicos de una página web. Al aprender a utilizar cada tipo de selector, podrás aplicar estilos precisos a los elementos HTML de tu sitio web.

En la siguiente sección, exploraremos selectores avanzados en CSS que te permitirán aún más control sobre la selección de elementos.

Selectores avanzados en CSS

Los selectores avanzados en CSS permiten seleccionar elementos HTML de manera más precisa y específica.

A continuación, te presentamos algunos de los selectores avanzados más comunes:

Selectores de descendencia

Los selectores de descendencia seleccionan elementos HTML que son descendientes de otro elemento HTML específico.

Se escriben separando los selectores por un espacio.
Ejemplo de código:
Selectores de hijo directo

Los selectores de hijo directo seleccionan elementos HTML que son hijos directos de otro elemento HTML específico.

Se escriben separando los selectores por un signo mayor que (>).
Ejemplo de código:
Selectores adyacentes

Los selectores adyacentes seleccionan el siguiente elemento HTML adyacente a otro elemento HTML específico.

Se escriben separando los selectores por un signo más (+).
Ejemplo de código:
Selectores de hermanos generales

Los selectores de hermanos generales seleccionan todos los elementos HTML que son hermanos del mismo nivel que otro elemento HTML específico.

Se escriben separando los selectores por un signo tilde (~).
Ejemplo de código:
Selectores de pseudoclase

Las pseudoclases son palabras clave que se agregan a un selector para seleccionar elementos HTML que se encuentran en un estado específico, como cuando el cursor del mouse se coloca sobre un enlace o cuando se selecciona un campo de formulario.

Las pseudoclases se escriben después del selector, separadas por dos puntos (:).
Ejemplo de código:
Selectores de atributo avanzados

Los selectores de atributo avanzados permiten seleccionar elementos HTML que tengan un atributo específico con un valor específico.

Estos selectores pueden buscar valores de atributos que contengan una cadena específica, comiencen con una cadena específica, terminen con una cadena específica o contengan una palabra específica en una lista de palabras separadas por espacios.
Ejemplo de código:
Selectores estructurales

Los selectores estructurales permiten seleccionar elementos HTML en función de su posición en la estructura del árbol de documentos.

Los selectores estructurales pueden seleccionar el primer o último elemento de un tipo específico, seleccionar elementos que sean hijos directos de su padre, seleccionar elementos que estén en una posición específica dentro de un conjunto de elementos, y más.
Ejemplo de código:
Selectores de estado

Los selectores de estado permiten seleccionar elementos HTML que se encuentren en un estado específico.

Por ejemplo, los selectores de estado pueden seleccionar elementos que se encuentren en el estado :hover, :active, :focus o :checked.
Ejemplo de código:
Al utilizar estos selectores, puedes personalizar aún más el diseño de tu sitio web y crear efectos interesantes.

Buenas prácticas al utilizar selectores CSS

Al utilizar selectores en tu código CSS, es importante seguir algunas buenas prácticas para mantener el código organizado, fácil de leer y fácil de mantener.

A continuación, se presentan algunas buenas prácticas para utilizar selectores en tu código CSS:

Selecciona elementos específicos

En lugar de aplicar estilos CSS a un tipo de elemento general, como p, selecciona solo los elementos específicos a los que deseas aplicar el estilo.

Esto puede ayudar a evitar que se apliquen estilos no deseados a otros elementos en tu página web.
Ejemplo de código CSS:
Evita selectores universales

Los selectores universales (*) seleccionan todos los elementos de una página web. Evita utilizar selectores universales en tu código CSS, ya que esto puede afectar el rendimiento de tu sitio web.
Ejemplo de código CSS:
Evita selectores de ID específicos

Los selectores de ID específicos, como #mi-identificador, son muy específicos y pueden limitar la capacidad de reutilizar el estilo en otros elementos. En su lugar, utiliza selectores de clase (.) para aplicar estilos específicos.
Ejemplo de código CSS:
Utiliza selectores de cascada

Los selectores de cascada te permiten aplicar estilos a elementos específicos en función de su relación con otros elementos. Utiliza selectores de cascada para aplicar estilos a elementos específicos de manera más precisa.
Ejemplo de código CSS:
Agrupa selectores

Agrupa selectores similares para evitar la repetición innecesaria de estilos en tu código CSS.

Ejemplo de código CSS:

Utiliza selectores avanzados con moderación

Aunque los selectores avanzados pueden ser útiles para seleccionar elementos específicos de manera más precisa, es importante no abusar de ellos. Demasiados selectores avanzados pueden hacer que el código sea más difícil de leer y mantener.
Ejemplo de código CSS:
Al utilizar selectores en tu código CSS, es importante seguir algunas buenas prácticas para mantener el código organizado y fácil de leer.

Al seleccionar elementos específicos, evitar selectores universales y de ID específicos, utilizar selectores de cascada, agrupar selectores y utilizar selectores avanzados con moderación, puedes mejorar la eficiencia y calidad de tu código CSS.

Referencias

Aquí te presento algunas referencias útiles sobre los selectores en CSS3:

1. La especificación oficial de selectores de CSS3 de la W3C.

2. La guía de selectores en CSS3 de Mozilla Developer Network.

3. La documentación de selectores en CSS3 de CSS Tricks.

Estas referencias ofrecen una guía completa sobre los diferentes tipos de selectores en CSS3, cómo funcionan y cómo utilizarlos en tu código CSS.

También proporcionan ejemplos útiles y explicaciones detalladas para ayudarte a mejorar la eficiencia y calidad de tu código CSS.

# data[].attributes.attachment_link.title
▷ Selectores en CSS → 【 Tipos de Selectores en CSS3 】

# data[].attributes.attachment_link.description
Tutorial sobre selectores en CSS. ❤️❤️ Entra y aprende paso a paso a utilizar en CSS3. ✓☝ ¡Más de 1.000 alumnos satisfechos!

# data[].attributes.attachment_link.readable_text
Saludos desde el área web de Espai.

Me he encontrado que muchos de los alumnos que cursan HTML5/CSS3 confunden el uso del elemento section con el elemento article o viceversa.

Según WHATWG section no es un elemento contenedor genérico, para eso ya tenemos la etiqueta div. El elemento section se usa para representar una parte de un documento o artículo. Una regla general para determinar si su uso es correcto, es numerarlos. Si usando esta numeración el elemento section no pierde sentido entendemos que este es un section realmente.

WHATWG específica que un section debe ser identificado mediante un título que será la etiqueta hija del section, si no tenemos título el validador nos dará una advertencia conforme en el section falta el mismo. En el caso que en el section no sea necesario el título es que el elemento adecuado no es un section.

Con referencia a los artículos (article) la información que encontramos en las especificaciones es:

El article es definido como un componente de la página de contenido independiente, esto implica que esta etiqueta pueda tener un header y un footer propios.

¿Cómo saber si la etiqueta article es correcta en una posición determinada?

Si el contenido del article tiene sentido sin tener en cuenta su contexto, en este caso podemos hacer uso de la etiqueta article.

Aquí tenéis unos ejemplos que os pueden ser de utilidad a la hora de diferenciar las etiquetas article y section.

Un artículo sobre manzanas simple:

  <article>
    <h1>Apple</h1>
    <p>La <b>manzana</b> es la fruta de la semilla de la manzana del árbol.</p>
    ...
  </article>

Un artículo sobre manzanas con un encabezado y un pie en el estilo de un blog:

  <article>
    <header>
      <h1>Apple</h1>
      <p>En línea: <time pubdate="pubdate">09/10/2009</time></p>
    </header>
    <p>La <b>manzana</b> es la fruta de la semilla de la manzana del árbol.</p>
    ...
    <footer>
      <p><small>Licencia Creative Commons Reconocimiento-Compartir bajo la misma</small></p>
    </footer>
  </article>

Un artículo con secciones

  <article>
    <h1>Las variedades de manzanas</h1>
    <p>La manzana es la fruta de la semilla de la manzana del árbol.</p>
    <section>
      <h2>Red Delicious</h2>
      <p>Estas manzanas rojas brillantes son los más comunes se encuentran en muchos supermercados.</p>
    </section>
    <section>
      <h2>Granny Smith</h2>
      <p>Estas manzanas verdes jugosas hacen un gran relleno para tartas de manzana.</p>
    </section>
  </article>

También podemos encontrar casos en que la sección sea el elemento contenedor de distintos artículos relacionados:

  <section>
    <h1>Artículos sobre: Frutas</h1>
    <article>
      <h2>Manzana</h2>
      <p>La manzana es la fruta de la semilla de la manzana del árbol.</p>
    </article>
    <article>
      <h2>Naranja</h2>
      <p>La naranja es un híbrido de origen cultivado antiguo, posiblemente entre el pomelo y la mandarina.</p>
    </article>
    <article>
      <h2>Plátano</h2>
      <p>Los plátanos vienen en una variedad de tamaños y colores cuando madura, incluyendo amarillo, púrpura y rojo.</p>
    </article>
  </section>

Espero que después de su lectura este artículo haya sido de ayuda para todos vosotros.

Un saludo y hasta pronto.

# data[].attributes.attachment_link.description
A veces se confunde el uso del elemento section con el elemento article o viceversa. En este artículo te explicamos cuándo poner section y cuándo article

# data[].attributes.attachment_link.title
How Min-Width and Max-Width Media Queries Work in Responsive CSS

# data[].attributes.attachment_link.description
What are CSS media queries? Learn to use the max-width and min-width properties to code responsive emails for different device screen sizes.

# data[].attributes.attachment_link.title
A Complete Guide to Flexbox | CSS-Tricks

# data[].attributes.attachment_link.description
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser suppor…

# data[].attributes.attachment_link.title
Qué son y cómo funcionan las Variables CSS (Custom Properties)

# data[].attributes.attachment_link.description
Descubre cómo las Variables de CSS (o Custom Properties) pueden transformar tu manera de escribir estilos, haciendo tu código más dinámico y mantenible. Este artículo te explica qué son, cómo funcionan y cómo puedes aplicarlas con ejemplos prácticos.

# data[].attributes.attachment_link.readable_text
Uno de los problemas que se encuentra todo diseñador web a la hora de crear su página web responsive es la inserción de vídeos html5 responsive en la misma. Por defecto, vimeo o youtube, principales plataformas de gestión de vídeos y mundialmente conocidas, nos insertan sus vídeos con un width y height predeterminado fijo que, cuando estamos desarrollando nuestra web para dispositivos tales como Tablets o Smartphone, nos crean problemas con el elemento. Más concretamente, al disponer de un contenedor responsive, conforme este se va escalando, el vídeo en sí "se monta por encima" de otros elementos, produciéndose una salida del flujo web responsive.

¿Cómo insertar un vídeo en tu web correctamente?

Es muy posible que otras plataformas que dan la posibilidad de insertar embeds videos no permiten la posibilidad de utilizar este truco, para ello necesitaremos un código javascript que nos lo solucione, pero funciona a la perfección en las dos plataformas de vídeo por excelencia. Youtube y Vimeo.

Empecemos por cómo compartir un vídeo en youtube o vimeo para poder insertarlo en nuestra web.

Youtube

Una vez elegido el vídeo que queremos insertar, pulsamos sobre el enlace de compartir debajo del vídeo. A continuación copiamos el código iframe que nos proporciona Youtube en la pestaña de insertar.

Vimeo

Se trata de el mismo proceso que para Youtube, simplemente en este caso el botón de compartir es el del avión de papel. Igualmente lo pulsaremos y copiamos el código iframe que nos suministra Vimeo

Una vez obtenidos los iframe de los vídeos, llega la hora de insertarlos en nuestra web. Sea wordpress, joomla o cualquier página, el procedimiento es el mismo.

Debemos de copiar nuestro código iframe suministrado. En mi ejemplo sería el siguiente:

<iframe width="420" height="315" src="https://www.youtube.com/embed/sOnqjkJTMaA" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Para comenzar empezaremos por limpiar el código suministrado, eliminando los atributos width y height. El código pasaría a tener la siguiente forma:

<iframe src="https://www.youtube.com/embed/sOnqjkJTMaA" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

El siguiente paso es envolver el iframe en un contenedor con una clase que nosotros podremos modificar a nuestro antojo. En mi caso he envuelto el vídeo con una etiqueta div que le he puesto la clase "video-resposive". El código pasaría a tener la siguiente estructura.

<pre><div class=""video-responsive"">
<iframe  src="https://www.youtube.com/embed/sOnqjkJTMaA" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
<pre>

Para nuestro CSS debemos de utilizar el siguiente código:

<pre>

.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

</pre>

Lo que este código realiza es asumir la proporción de vídeos 16/9 , el ratio 56.25% y lo aplica como padding para mantener las proporciones del contenedor del vídeo.

Posteriormente al iframe, objet y embed le otrogaremos unos atributos que lo que realizarán es rellenar por completo el contendor que los envuelve, pudiendo así mantener la proporción en todos los dispositivos.

Si además queremos que nuestro contenedor sea mayor o menor, podemos modificar el padding-bottom de 56.25% pero siempre respetando las proporciones. ( Un pequeño truco para respetar las proporciones es abrir el inspector de código y sobre el padding bottom, aumentar o disminuir la cantidad, nunca insertar un número a nuestro antojo)

# data[].attributes.attachment_link.title
Como insertar un Vídeo HTML5 Responsive en tu web.

# data[].attributes.attachment_link.description
Te ayudamos a insetar un vídeo 100% responsive y sin que haya problemas de visualización, overflow, etc en dispositivos móviles o tablets.

# data[].attributes.attachment_link.description
Las CSS Custom Properties son un concepto muy similar (pero no igual) a las variables de programación. ¡Aprende a utilizarlas!

# data[].attributes.body
Hacemos los 4 primeros basicos y los dos de listas

# data[].attributes.attachment_link.description
Ejercicios del libro 'HTML & CSS: Curso práctico avanzado' por Sergio Luján Mora.