"Todos los empleados públicos deberían descender a su grado inmediato inferior, porque han sido ascendidos hasta volverse incompetentes"

Lo dijo José Ortega y Gasset en 1910
59 años después el profesor Lawrence J Peter dijo que, en una jerarquía, todo empleado tiende a ascender hasta su nivel de incompetencia: la nata sube hasta cortarse.

Tema IV: HTML 5 & CSS 3

- Bueno… las rosquillas nos las vamos a comer después de que comprendamos qué es HTML y CSS.

El “Principio de Peter” lo he puesto como un aviso a navegantes:

Lo que hoy vamos a estudiar en clase es la piedra angular que nos diferenciará como buenos o malos desarrolladores. Podemos ascender a nuestro nivel de incompetencia ignorando los conceptos que hoy vamos a analizar y dedicarnos a hacer desarrollo web usando herramientas sin saber qué se esconde en el fondo y, por tanto, estar vendidos a una especie de azar en el que nunca estamos seguros de si algo funciona o por qué no funciona...

No deberíamos pasa al siguiente tema mientras la clase de hoy no quede totalmente aprendida. Si, así y todo, lees por encima este tema y omites los ejercicios y experimentos que vamos a hacer, ten por seguro que, cuando estudies el tema V estarás ascendiendo a una posición para la que serás incompetente… Y, posiblemente, nunca te enteres de tu propia incompetencia.

En realidad, a pesar de lo que te advierto, un gran número de supuestos profesionales actúan desde ese nivel de incompetencia y, con todo, venden sus productos.

SILA - Dulces Artesanos nos presenta sus 'melindres', el insustituible dulce para acompañar el licor café de la sobremesa.

- Profe, ¿probamos las rosquillas…?

el aroma a anís y azúcar, el revuelo del reparto y bolsas que se abren provocan ese silencio de un grupo con la boca llena de unos ricos dulces artesanos, que nos ha cedido para la clase de hoy Ronth Gonzále<, gerente de “Sila Ribadavia, Dulces Artesanos”, que es una de las patrocinadoras de este Aula.

En fin, Vamos al lío:

html 5 y CSS3:

Ya dijimos en la clase de ayer que estas dos palabrejas son “Un formato de archivo”. Al igual que .jpg es un formato de archivo de imágenes o .doc, un formato de archivos de documentos de texto de microsoft word o como PDF es un formato de archivos de texto “portables”, “.html” y “.css” son formatos de archivos cuyo contenido es capaz de interpretar y renderizar tu programa de navegación web, por ejemplo, Chrome, Opera, Firefox….

También hemos dicho que “html y CSS” ¡¡van de la mano!!; o sea, que aparecen siempre juntos allá donde vayan.

Pero es mas que eso:

Ambas palabras son siglas:

“(H)yper(T)ext (M)arkup (L)anguage” y “(C)ascade (S)tyle(S)heets”.

Si te aprendes bien estas leyendas y las pronuncias con exquisito acento inglés (un chicle o dos en la boca ayudan mucho a pronunciarlo bien) puedes dar la sensación a tu audiencia de que sabes poco menos que latín.

- y.. ¿las rosquillas qué tienen que ver…?

- Espera, eso vendrá luego.

De momento, vamos a traducir esas frases en lengua inglesa al Español:

Vamos a ver qué significa esto:

-Lenguaje de marcado:

La imprenta de Gutenbmerg. Fuente: Pinterest

No se sabe con total certeza si fue en 1450 ni si fue Johannes Gutemberg quién y cuando se creó la imprenta. Lo que es una incuestionable certeza es la revolución que produjo en la cultura europea y, con el tiempo, mundial.

Sin embargo, un aspecto del que se habla mucho menos en las crónicas históricas es una necesidad que surgió al poco tiempo de inventarse la prensa de imprimir o imprenta.

Los primeros impresores componían los textos a imprimir según su parecer imitando los libros originales que querían imprimir. Pronto aparecieron “los autores”, es decir, personas que producían nuevos textos y que querían darlos a la imprenta para divulgarlos. Así surgió la necesidad de que el autor pudiera indicarle al impreso “como” quería el aspecto del nuevo texto impreso.

Algo así como:

- aquí quiero el título, a tres filas del tope; este párrafo lo quiero centrado, Esta frase remarcada y oblicua….

Al principio el autor y el impresor se reunían para tomar estas decisiones de “formato de lo impreso”. El trabajo era lento y se tardaba mucho tiempo en componer las planchas e imprimir el trabajo final.

Con el tiempo y la evolución de la imprenta, el trabajo se aceleró y se multiplicó la capacidad de impresión exponencialmente. El autor y el impresor se separaron y se dedicaron cada uno a lo suyo. Así los autores empezaron a añadir marcas en sus textos para que los impresores supieran como dar forma estética a los libros.

Nadie le puso nombre, pero se había inventado el “lenguaje de marcado de textos”. Impresores y autores acordaban un “código” de marcado para entenderse entre sí.

Pero el marcado de textos no sólo es un lenguaje de comunicación entre el autor y el impresor. También es un lenguaje que media entre el autor y el lector.

No solemos ser muy conscientes de ello, pero los autores nos “guían” por el texto mediante un lenguaje de marcas que todos reconocemos. Índices, números de página, etc que nos ayudan a “navegar” por el texto.

Hipertexto:

Sencillo:

- es un documento.

- Se compone de todo lo necesario para que se puede imprimir y sea inteligible para el destinatario.

- y, lo mas importante cuando hablamos de textos informatizados, contiene referencias a otros textos y a diversas partes de si mismo.

Un libro es el documento de hipertexto mas manejado de la historia. Aunque hay quién augura su muerte, aún le queda mucha vida en el formato papel y, en el furmato electrónico, nunca se extinguirá.

Entonces HTML es… ¿qué?

Dos cosas:

- Un documento o hipertexto.

Con todos los elementos que hemos visto para, por ejemplo, un libro.

Y…

- Un lenguaje de marcado para producir documentos.

Pero es algo mas:

- Es un estandar.

Esto es: Un acuerdo a nivel global para que todos llamemos por el mismo nombre a la misma cosa.

Por ejemplo. En HTML llamamos “<p>” a un párrafo de texto. Con esta marca, los autores de un documento, sean quienes sean y escriban en el idioma que escriban, indican a tu programa de navegación (Crhome, por ejemplo) que el texto que se encierra entre “<p>” y “</p>” debe renderizarlo con las propiedades y el aspecto que corresponden a un párrafo cualquiera de texto.

Veamos un ejemplo:

Un pequeño paréntesis: HTMl ¡NO es un lenguje de progrmación!

- Existe cierta mitología por la que se confunde a los lenguajes de marcado, (o, también, llamados “lenguajes de etiquetas”) con lenguajes de programación.

Sin embargo un lenguaje de marcado, aunque presenta una secuencia de marcas que, al modo de un programa, tu navegador sigue estrictamente para renderizar, imprimir, el texto del documento en tu dispositivo (pantalla, tablet, impresora), NO contiene los elementos de control del flujo, sentencias de control, variables y otros elementos que caracterizan a un lenguaje de programación.

De hecho, cuando tu interaccionas con un documento html, (rellenando, por ejemplo, un formulario de suscripción), El navegador no es capaz de, a partir de las instrucciones que tiene el documento, hacer nada con el formulario. Tan solo se limita a enviarlo a la dirección que se le indica en la etiqueta que delimita al formulario.

Los datos de un formulario serán procesado en el servidor con un auténtico lenguaje de programación, por ejemplo PHP, y serán devueltos a tu navegador en un nuevo documento html que tu navegador volverá a renderizar para que tú los puedas ver.

Pero sigamos:

¿y de qué se compone un documento HTML?

Sólo de dos cosas:

Contenido de texto.

Lo que tú lees ahora, por ejemplo.

Y…

Etiquetas para marcar.

Vuelve a mirar un momento la primera estrofa de la “Canción del pirata” que poníamos mas arriba.

Fíjate bien en la diferencia entre lo que tú ves y lo que yo escribo.

- Lo que ves encerrado entre corchetes angulares, “<” y “>”, son las etiquetas.

- El resto es el contenido de texto. En este caso, los versos de la primera estrofa del poema de Espronceda.

NOTA: Si has trabajado hace tiempo con versiones anteriores a html 5 o con antiguos procesadores de texto como “word Star” o “word perfect”, me dirás que podías poner etiquetas “p”, “br” y otras sin necesidad de cerrarlas. Pues eso ha cambiado. TODAS etiquetas se cierran. También las etiquetas “<meta>”. Antes se escribían “<meta ------ >. ahora se escriben “<meta ------ />". tu navegador es muy listo y “recuerda” que algunas etiquetas no se cerraban. Por eso él va a saber qué hacer en caso de que no cierres algunas. ¡¡PERO!! Google se va a confundir bastante si no eres riguroso cerrando las etiquetas.

Cajas apiladas como en un documento HTML. Las hojas de estilos determinan cómo se van a apilar las cajas, entre otras cosas.

¿Y qué pasa con CSS?. (una pausa para café con rosquillas)

- aún nada. CSS va a dotar de estilo a las etiquetas. Pero aún apenas sabemos nada de las etiquetas. Entonces volveremos a CSS dentro de un rato.

- bueno, vale. ¿Y las rosquillas?… ¿están aquí sólo para glotonear…?

- No. Están por algo mas. Claro que están especialmente ricas y aromáticas. Además son hechas con recetas tradicionales de la zona de Ribadavia en Orense y son elaboradas de la forma artesanal que las hacía la abuela de Ruth González, la gerente de “SILA dulces artesanos”. También hay magdalenas, coquitos, bica, …

durante un rato circula un termo de café, se reparten dulces, …

El profe intenta retomar la clase, pero, claro, cuesta un poco volver al carril….

- ¡¡¡¡A ver…!!!!!. Además de comer rosquillas cuales monstruos de Barrio Sésamo, fijaos un poco en lo que estáis viendo:

html y css sólo sirven para colocar cajas en el lugar que les corresponde.

Palés, cajas, etiquetas, paquetes y rosquillas.

Las rosquillas vienen a cuento para introducirnos de lleno en un concepto que necesitamos manejar constantemente para poder escribir con eficacia los documentos html.

Hemos traído a clase un palé de productos de Sila – Ribadavia. Vienen embalados en paquetes que se embalan, a su vez, en cajas. Las cajas pueden estar en cajas mayores. Se pueden apilar en los tres sentidos del espacio euclidiano. Para su transporte se “paletizan” y los palés se pueden almacenar o cargar en camiones o furgonetas para su transporte…..

Además, los paquetes, por ley, vienen etiquetados. Las cajas y demás embalajes o soportes también se etiquetan para su reconocimiento….

Html hay que verlo desde este punto de vista: cajas apilables.

Este concepto de “cajas apilables” no es, para nada, nuevo referido a documentos de texto como libros, solicitudes, periódicos, cartas, folletos…

Desde que la imprenta existe, los patrones para imprimir se formaban en “cajas” en las que se disponían ordenadamente los moldes de las letras para formar la secuencia del texto. Cuanto mas se evoluciona en el mundo de la imprenta mas cajas de texto se incluyen para hacer textos con formatos mas complejos.

Con el advenimiento de la informática aplicada a la oficina y a la edición de documentos no ha cambiado nada. Tan solo se está dejando de lado el soporte papel y fijando los documentos en soportes electrónicos.

El documento más simple en formato HTML

Ya hemos dicho que html es un formato de documento de hipertexto. Por tanto contiene solo dos cosas.

- etiquetas de marcado que le dan al navegador las pautas para “dibujar el documento”

y, - texto que será representado tal como el navegador deduzca que tiene que hacerlo a partir de la información de las etiquetas.

- Profe…. ¿y las fotos, videos, audios, ….. que aparecen en todas las páginas web?. El código que vimos ayer hacía una galería de fotos, y las fotos se veían perfectamente. Las fotos tienen que formar parte, entonces, del documento html.

- ¡¡NO!!, para nada.

Mira esto:

Los dos corchetes angulares, ya sabemos, nos indican que ésto es un etiqueta. “img” es el “nombre de etiqueta” y la barra “/” antes del corchete de cierre “>” nos dice que esta etiqueta ¡NO tiene contenido!!.

Pero el navegador nos muestra en donde corresponda la imagen del archivo llamado “foto1.jpg”.

Es decir, con la etiqueta “img” le hemos dicho al navegador qué foto debe renderizar ahora y dónde está la foto para que la consulte.

Lo mismo pasa con cualquier otro material que no sea texto. Habrá una etiqueta con unos parámetros determinados que le dirán a Chrome o Firefox qué documento debe consultar y donde está ese documento.

Así que, repetimos:

Por cierto, para quedar de sabiondillo delante de tus amigos: al “nombre de una etiqueta” puedes llamarle “TagName”, y, a las etiquetas, puedes llamarlas “tags”; en singular, “tag”.

Pero volvamos al tema:

Ïbamos a ver el documento mas simple en formato HTML o, mejor dicho, la estructura mas elemental de un documento HTML.

Aquí está:

- ¿un palé….?

Sí, un palé.

Con ello quiero decir que un documento html es ¡¡un contenedor o caja!! que contiene a todo el resto del documento.

Pero no solo estamos viendo un palé… También estamos viendo impreso sobre el palé un poco de código html. Este es el código mínimo que debe contener todo documento html.

Veámoslo despacio:

	<!DOCTYPE html>
		<html lang="es">
			<head>
			
				Cabecera del documento
			
			</head>
			<body>
			
				todo el contenido del documento.
				
			</body>
		</html> 
	

EXPLICAMOS, PASO A PASO, EL CODIGO HTML

<!DOCTYPE html>

Cuando el navegador abre un documento html, lo primero que busca es esta etiqueta. En cuanto la encuentra sabe muchas cosas solo con encontrarla:

- Sabe que lo que viene a continuación es texto con formato html.

- Sabe que la versión de html que le viene es la “CINCO”. Si fuera una versión anterior habría que indicarlo. Pero html 5 ha optado por la simplicidad y la sola mención de “html” significa, por defecto, “HTML 5”.

Este aula estudia esta versión por ser la última y la que ya se utiliza siempre desde 2013.

<html lang=”es”> … … … </html>

Esta etiqueta define ¡¡LA CAJA!! en la que habrá que mete ¡¡TODO EL CONTENIDO!! del documento html, tanto etiquetas como textos.

- todas las demás etiquetas y textos html estarán, sí o sí, dentro de esta caja.

- Todo lo que haya antes de <html> y después de </html> ¡¡no!! formará parte del código html.

Veremos cuando lleguemos a estudiar PHP que puede haber cosas fuera de esta etiqueta. PERO NO SERÁ HTML y, probablemente, el navegador no recibirá estos contenidos de fuera cuando se le envíe el documento.

Y, ¡¡ojo!!: en un documento html sólo hay una etiqueta <html> y su contraetiqueta </html>

- Pero a esta etiqueta, además del nombre, que no es otro que “html”, le hemos añadido algo. La etiqueta hubiera servido si solo hubiéramos escrito “<html>”.

-Pero… ¿entonces qué hemos puesto y por qué?

-¡buena pregunta!. Hemos añadido ¡¡Un Atributo!!

- A la etiqueta <html>, por lo general, procuraremos añadirle la mínima cantidad de atributos porque su efecto es para TOOODO el documento y eso suele interesarnos poco.

- El atributo que casi siempre le vamos a añadir es el que acabamos de ver:

lang=”es”

- que significa, no otra cosa que, “lengua de los textos incluidos en el documento”. Para el navegador ésto tiene una importancia capital porque, según el idioma que le digamos, va a admitir, o no, en el texto ciertos caracteres como la “eñe”, las vocales acentuadas, El signo del Euro o del Dolar como respuesta a al carácter [Alt Gr]+e, …

Así que lo normal es que, en los documentos en Español la etiqueta “html” tenga esta sintaxis:

<html lang=”es”> … … … </html>

y, entre las dos, la etiqueta de apertura y la de cierre, estará, sí o sí, TOOODO el resto del documento html.

En versiones anteriores de html se permitía algunas veces no poner las comillas. Html 5 es capaz de interpretar la falta de comillas para ciertos valores correctamente, (en concreto, para los valores numéricos). Sin embargo Google y compañía lo entienden mal y esto puede hacernos “mucha pupa” cuando queramos que nuestra página se posicione bien en los resultados de Google.

<head> … … … </head> (cabecera del documento html)

- Observa que han sido sangradas respecto a la etiqueta <html>

A, por ejemplo, Chrome le trae sin cuidado que se hayan sangrado, o no, las etiquetas respecto a las que las contienen. El navegador sólo necesita, y Google también, que todas las etiquetas tengan su contraetiqueta de cierre y que ninguna etiqueta sea cerrada antes de que se hayan cerrado todas las etiquetas que se hayan colocado dentro de esta etiqueta.

Lo de sangrar, sin embargo, lo hacemos para darnos a nosotros mismo una ayuda visual. Vuelve a fijarte en el código de mas arriba. Se percibe visualmente que <head> o <body> quedan dentro de <html>. Y se percibe también que han sido cerradas, </head> y </body>, antes de cerrar la primera, </html>.

Muy importante: En documento html SÓLO puede haber una etiqueta <head> y su contraetiqueta </head>

¿Para qué sirve <head>?

Para dos cosas:

La segunda tarea es muy importante. Aunque podría omitirse esta función, no es conveniente porque eso empeorará el posicionamiento de nuestra página en los buscadores como google. Así que es mejor empezar bien desde el principio e incluir y comprender esta parte del documento html.

La mayoría de libros y cursos de html NO empiezan por aquí. Esperan a avanzar bastante en el conocimiento de html para explicar estas etiquetas que ahora veremos y que son muy fáciles de entender.

Yo, por mi parte, considero que las etiquetas que se incluyen dentro de <head> ha que verla ya para, desde el principio, sentar una buena práxis de escritura.

Estos son los motivos por los que introduciremos ahora las etiquetas del <head>, de la cabecera del documento html.

Con esto claro, vamos a ver y explicar…

La caja <head> completa.

Vamos a ver el head escrito y luego lo explicamos línea a linea:

<!DOCTYPE html>
<html lang="es">
  <head>
    <metacharset="utf-8"/>
    <meta name="description" content="Describe de qué va tu pagina”/>
    <meta name="author" content="Di quien eres para copyright"/>
    <meta name=”keywords” content=”palabras, separadas, por, comas, o frases cortas, 
para, que, Google, te, encuentre”/>
    <meta property="og:url" content="url de tu dominio" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Un título para este documento" />
    <meta property="og:image" content="dominio/ruta/foto1.jpg" />
    <meta property="og:description" content="Repite la descripción" />
    <link rel="stylesheet" href="dominio/ruta/ESTILO.css"/>
    <title>
      Titulo para este documento
    </title>
  </head>
  <body>
     todo el contenido del documento.

  </body>
</html> 
	

- Sí y no:

Sí, en todos los documentos html deberéis escribir, como mínimo, estas líneas.

Y no. Siempre podéis guardar este texto con un nombre parecido a “plantilla_basica.html” y modificar el contenido de las comillas para cada nuevo documento. Así no tenéis que escribir lo mismo una y otra vez.

- Pero, ¿por qué?

- Porque, desde el principio, tenéis que estar pensando en que tenéis que gustarle a Google y a las redes sociales.

- Pero en los experimentos de ayer solo pusiste en el <head> la etiqueta <title>

- Y también puse <link>.

Sólo puse esas porque TODAS ellas son optativas. Las puedes poner o no poner. El navegador siempre va a dar un resultado al interpretar el documento. Incluso la mismísima caja <head> es optativa.

PEEEEERO!!!!!!!!!!!!!!!!!

En cuanto veas por qué ponemos cada una de las etiquetas de la caja <head>, por muy optativas que sean, comprenderás lo mucho que te interesa tenerlas.

Lo primero que vamos a decir de todas esas etiquetas que hemos puesto en el <head> es que ¡¡son metadatos!!. Esto es, datos que no van a ser representados en la ventana del navegador pero que van a proporcionar información al navegador y/o a terceros.

1. Las Etiquetas <meta />

- Llevan una barra “/” antes del corchete angular “>”, ¿no?

murmullos de asentimiento

Pues entonces son… ¡etiquetas que se cierran sobre sí mismas! y no tienen contenido de texto.

Pero Lo que sí tienen atributos. Por defecto no tienen ningún atributo, todos se los habrá que explicitar escribiéndolos.

Veamos cada pareja “atributo nombre + atributo valor”:

<meta charset="utf-8"/>

A la etiqueta <html> le pusimos el atributo lang=”es” para indicarle al navegador y a los buscadores que nuestro documento está en lengua española.

Ahora este meta nos permite elegir el alfabeto que debe usar el navegador para el idioma seleccionado.

El alfabeto electrónico “UFT-8” es el mas adecuado para el idioma castellano escrito desde teclados con distribución española. Así que TODOS nuestros documentos incluirán este alfabeto.

<meta name="description" content="Describe tu pagina”/>

Este meta va dirigido a Google y otros buscadores. Así cuando le muestran a los usuarios tu página saben qué contarle de ella. Así que piénsate bien qué pones aquí.

En la pestaña “mas temas del aula”, a la derecha hay un listado de maestros en eso de que Google te encuentre. Estúdialos despacio.

<meta name="author" content="quien eres tú"/>

Esto es para defender tus derechos como autor. Además, a las redes sociales les gusta mostrar el autor cuando compartes el documento en los post, o tuits, o …

<meta name=”keywords” content=”palabras, separadas, por, comas”/>

Esto también es para Google. Piensa palabras por las que crees que la gente puede buscar este documento concreto en Internet. Pon todas las que se te ocurran, pero sin pasarte porque Google es muy caprichoso y lo mismo le parece que abusas.

Ten un poco de sentido común: No pongas “cafetera” si tu página va sobre “jabón lagarto”.

Y ten aún mas sentido común: Eso de elegir las keywords forma parte de eso a lo que llaman SEO (Search Engine Optimization, Optimización para que los Ingenios de Búsqueda te encuentren). De eso quien mas sabe son los maestros de que te hablé antes, Hazles caso.

<meta property="og:url" content="url de tu dominio" />

Todos los meta property=”og: “ son metadatos destinados a que facebook, twiter, linkedin, google+ y compañía nos pongan bonitos los enlaces a nuestro documento al compartirlos en los post.

Este meta concreto hace que facebook cree bién el enlace a este documento. Asi que escribe bien la URL completa del documento (protocolo+dominio+ruta+documento)

Lo de protocolo, dominio, etc. lo vimos en el tema II

- Pero, profe: ¿y si ahora estamos en una carpeta del ordenador y no tenemos el documento aún en un servidor, qué ponemos aquí?

Pon la ruta y el nombre del documento. Cuando lo subamos al servidor lo corriges y listo.

Los metas sirven, precisamente, para controlar como muestran las redes sociales los enlaces a nuestro sitio... ¡más o menos!

<meta property="og:type" content="website" />

Facebook es mas tonto que mandado de encargo. Así que le ponemos este metadato para decirlo lo que es evidente: Esto es un sitio web.

<meta property="og:title" content="Un título" />

Este título lo mostrarán tal como lo escribamos las redes sociales… Bueno, mas o menos idéntico.

<meta property="og:image" content="dominio/ruta/foto1.jpg" />

A Facebook y compañía les gusta mostrar una imagen cuando pones un enlace a tu documento. Aquí le dices tú cual debe mostrar.

Si no pones este metadato, las redes buscarán las imágenes que hayas referenciado en el documento y pondrán aquella que les parezca bien con un criterio muy parecido al del estado cuántico de una partícula. El resultado, entonces, es tan incierto como la vida del gato de la caja de Shrodinger.

Procura que sea una imagen de poco peso. Menos de 100kb, que si no, no les gusta.

<meta property="og:description" content="Repite la descripción" />

- ¿Que repita la descripción del otro meta de descripcion…? ¿para qué?

- Para darle gusto a twiter y compañía, ¿para qué, si no?

2- Otras etiquetas del <head>

<link rel="stylesheet" href="dominio/ruta/ESTILO.css"/>

La etiqueta <link> tiene la barra de cierre, así que se auto cierra y no tiene contenido de texto.

- Joer… profe… me da que me tomas el pelo y no me cae bien… Decías lo mismo de las <met>, que no tenían contenido, y llevas poniendo etiquetas sin parar llenas de contenido… A ver, aclárate. ¿tienen, o no tienen, contenido….?

- Vamos que “to be, or not to be...”

En fin.. volvamos al tema:

la etiqueta <link> ya no está destinada a los mirones. Esta va destinada al navegador. Con ella le decimos dónde puede encontrar recursos que necesite para renderizar lo que haya en la caja <body> (que, con lo tarde que es, me temo que va a quedar para después del recreo).

El recurso que siempre vamos a necesitar, si planteamos ordenadamente el documento, va a ser una “hoja de estilos en cascada” o documento “CSS”.

Con esta etiqueta <link>, usando dos atributos, le vamos a decir al navegador que:

¡Venga…! ¿un esfuercito más que ya acabamos con las etiquetas del <head>

<title>Un título para documento</title>

Tenemos “<title>” sin “/” antes de “>”.

así que debemos tener, sí o sí, una contraetiqueta </title>

Entonces… ¿tenemos o no tenemos contenido?

Con gran clamor la clase responde. ¡¡¡¡¡¡Sí!!!!! ¡Habemus contenido!

- ¡Anda…! ¡pero si estabais despiertos!

En efecto, habemus contenido. El contenido es “Un título para mi documento”.

El contenido de title se muestra como títulos en la barra del navegador.

¿para qué tenemos un título?… Pues para gustarle a Google, por una parte, y para que en la pestaña del navegador aparezca a modo de orientación para el usuario.

En esta página que estás leyendo hay, naturalmente, una caja <head>. No está llena de rosquillas pero sí tiene una caja dentro etiquetada como <title> que escrita así:

<title> Juan, TEMA IV, HTML5 & CSS3</html>

Y si te fijas en la cima del navegador ves esto:

Y por hoy vamos a dejarlo ya.

Ruth, Si eres tan amable, llévate, por favor, esas rosquillas que si no estos se van a poner malos….

¡huy!… ¿que ya no quedan?… ¿Os habéis comido un palé de rosquillas...? ¿qué barbaridad!.

Comienza el revuelo de la escapada, de la libertad, ….

¡¡Quietos, leñe!!

Antes de irnos vamos a formular un teorema:

Mañana seguiremos viendo la otra caja que no hemos visto hoy

Podeis ir al recr……..

¿¿¿¿Pero dónde están éstos????

Ruth, en serio: ¿No han quedado rosquillas?.

Se ha deshabilitado esta caja por una invasion de spam