Licencia de Creative Commons
© Juan Carlos Martínez
tu profesor
particular
!!informate!!

O Juan D Terzas

Estás viendo: El Aula >> TEMA IV, html5 & css3



Desarrollador web indpendiente
Contacto: ojuan@terzas.es

¡Suscribete!

Hoy intentamos hablar de...

'eishshtii emmeeell faaaif an Siii esseess zriii'. pronúncialo despacio, comiendo chicle y alargaaaando las vocales. (¡¡¡ooooh!!!, este sí que sabe, pensarán los que te oigan....)

Dilo en inglés, si quieres parecer importante

¡¡eh!! No toquéis todavia esas rosquillass ...

Indice:

Tema anterior: TEMA III, El largo camino al ISP HTML % y CSS3 ¡qué palabras! Lenguaje de marcado Hipertexto Entonces, ¿qué es hipertexto? Un pequeño paréntesis: HTMl ¡NO es un lenguje de progrmación! ¿y de qué se compone un documento HTML? ¿Y qué pasa con CSS?. (una pausa para café con rosquillas) Palés, cajas, etiquetas, paquetes y rosquillas. El documento más simple en formato HTML EXPLICAMOS,paso a paso , EL CÓDIGO HTML que acabamos de escribir <html lang=”es”> … … … </html> <head> … … … </head> (cabecera del documento html) La caja <head> completa. 1. Las Etiquetas <meta /> 2- Otras etiquetas del <head> El teorema de Terzas o de las cajas básicas: Ir a los comentarios Ir a la caja de comentar Próximo tema:Tema V: ¡¡NECESITAMOS UN SERVIDOR!!

¡¡¡¡Gracias patrocinadores...!!!! Sin vosotros este sitio web no hubiera sido posible.

Publicidad Google

Mi alojamiento: Hosting SSD

TABLÓN DE ANUNCIOS


¡Suscribete!

LISTA DE TEMAS PUBLICADOS:

Línea Editorial

O, dicho en román paladino, de qué [beeeeeeep] va este sito.

Tema 0: organizando el aula

El tema cero introduce la organización y la metodología didactica del aula. así como los objetivos y la motivacion de este proyecto

También te cuento como es el servicio paralelo de clases particulares que te ofrezco

Tema I: ¿dónde estamos?

Un repaso rápido por la parte operativa de internet para que sepamos localizarnos y no nos perdamos cuando entremos en materia.

PERO, apenas comienza la clase, un alumno interrumpe al profe con una pregunta impertinente... ¿o... no era tan impertinente la pregunta?

Tema II: Pero... ¿dónde estamos?, o Samuel Morse e Internet

A ver si esta vez no hay interrupciones y podemos avanzar

Intentaremos hablar de Internet, La última versión del Telégrafo de Samuel Morse... ¿Habrá suerte?

¡¡¡No corras tan despavorido!!!... ¡que no vamos a contar ningún rollazo sobre historia...!

Tema III: El largo camino hasta el ISP

O de como un humilde programa llamado "navegador" realiza un titánico viaje de ida y vuela, no una, si no innumerables veces hasta que te puede mostrar lo que ahora estás leyendo

Tema IV: HTML5 & CSS3

'eishshtii emmeeell faaaif an Siii esseess zriii'. pronúncialo despacio, comiendo chicle y alargaaaando las vocales. (¡¡¡ooooh!!!, este sí que sabe, pensarán los que te oigan....)

En España se puede medir el nivel de incompetencia de un sujeto cualquiera por el número de parrafadas en inglés que suelta por su boca.

Tema V: ¡¡Necesitamos un SERVIDOR!!

Para hacer bien las cosas desde el principio con html y CSS necesitamos un servidor.

Pero contratar uno al principio no es la mejor opción, así que nos vamos de excursión a casa de Rubén Alonso, autor de Mi posicionamiento web a que nos enseñe como instalar el "localhost"

Treinta de junio de 2017.

"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

Se palpa un cierto desconcierto en la clase.

El profesor coloca sus papeles y los alumnos contemplan perplejos un palé de cajas de rosquillas y, en la pizarra, la cita de la clase de hoy es, cuando menos, conmovedora.

- Profe, ¿nos vamos a comer esas rosquillas?… y… Eso de ascender hasta el nivel de incompetencia… ¿es alguna clase de indirecta…?

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

arriba -- índice

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:

- Hipertext markup language: Lenguaje para el marcado de hipertextos.

- Cascade Stylesheets: Hojas de estilos escritas “en cascada”.

Vamos a ver qué significa esto:

arriba -- índice

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

Una característica del “marcado de texto” son los "corchetes angulares”:

"<” y “>”

Desde hace casi dos siglos, los autores ponían en sus textos marcas encerradas entre corchetes angulares para indicar los formatos y, desde que se inventó la linotipia, el lenguaje de marcado tuvo su primera estructura fija conocida.

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.

arriba -- índice

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

El hipertexto mas reconocible:

¡¡un libro cualquiera!!

se compone de:

- ¡el texto y las imágenes del libro!.

- una distribución por capítulos, párrafos, páginas, …

- sistemas de referencia interna, como un índice, un glosario, etc.

- sistemas de referencias externas, como un listado de fuentes bibliográficas, etc.

- Un sistema de marcado de texto que el lector no ve pero que al impresor le sirvió para componer el libro.

Todo el conjunto es a lo que llamamos hipertexto.

arriba -- índice

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:

tú ves esto:


Con diez cañones por banda,
Viento en popa, a toda vela,
no corta el mar, si no vuela,
un velero bergantín.

En el documento, yo he escrito:

<p style=”text-align:center;”>Con diez cañones por banda,<br/>Viento en popa,<br/>a toda vela, <br/>no corta el mar, si no vuela,<br/>un velero bergantín.</p>

Le he dicho a tu navegador que ésto es un párrafo, que quiero que lo alinee centrándolo en la página y le he indicado (etiqueta “<br/>”) donde quiero que haga saltos de linea.

arriba -- índice

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:

arriba -- índice

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

- Fíjate también en las etiquetas que hay:

<p>, <br/> y </p>

Ya dijimos algo sobre esto en la clase de ayer: Todas las etiquetas tienen una etiqueta de cierre. Pero algunas se cierran a sí mismas.

La etiqueta “<p>” indica que ésto es un párrafo y se cierra el párrafo con su contraetiqueta </p>.

Sin embargo la etiqueta “<br>” indica al navegador que cambie de línea. Cambiar de línea es una acción que no tiene ningún contenido asociado. Por tanto la etiqueta “<br>” debe cerrarse sobre sí misma. Por eso se escribe así: “<br/>”, con la barra de cerrar dentro de la etiqueta de abrir.

Después volveremos sobre esto.

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.

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

arriba -- índice
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.

Un experimento:

- Coge un juego de rotuladores y una página de un periódico.

- Ahora intenta rodear con el rotulador aquello que te parezca que pueden ser “cajas” distintas de texto.

- Intenta hacer cajas de contenido mas amplio y rotula dentro de esas caja otras cajas que queden contenidas dentro de esas cajas mas grandes.

- Pero una regla de oro: todas las cajas serán cuadradas o rectangulares. No valen figuras de mas de cuatro lados ni con ángulos distintos a 90 grados.

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.

Otro experimento:

- Abre tu procesador de textos preferido.

- abre el menú “ver” y activa la caja de herramientas para dibujo.

- En esa caja de herramientas tendrás una que se llama algo así como “cuadro de texto” o “caja de texto” y su icono suele ser una “T” o una “A”.

- juega con esta herramienta e intenta componer la hoja de periódico que antes has rotulado.

- La página por defecto que tienes en tu procesador suele ser DIN A4. Tendrás que redimensionarla para que te quepa la página del periódico.

- ¡muy importante! Juega con todas las propiedades de la caja de texto. Colores, tramas, rellenos, bordes, márgenes, … Juega también con las posiciones.

La importancia de este ejercicio radica en que este juego de cajas de texto es lo que vamos a hacer en los documentos html. Y todas esas propiedades con las que vas a jugar son lo que podrás hacer en los documentos html al utilizar ese otro formato del que aún no sabemos nada mas que su nombre : CSS.

arriba -- índice

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:

<img src=”c:/documentos/fotos/foto1.jpg” style=”width:100%;” />

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:

un documento html sólo contiene etiquetas y texto.

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

arriba -- índice

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> 
	
arriba -- índice

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.

arriba -- índice

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

Las etiquetas podrán, o no, tener atributos añadidos para modificar sus características o ser localizadas. Si no se le añade ningún atributo tendrán los que le corresponda por defecto.

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

Sintáxis de los atributos:

- siempre la misma:

nombre_del_atributo = “valores del atributo”

Muy imprtante: el signo “=” y las comillas, ¡¡¡siempre!!!

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.

arriba -- índice

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

1- decirle al navegador algunos parámetros específicos para que haga su tarea y decirle qué recursos auxiliares debe utilizar para realizarla.

2- Proveer “metadatos”. Los metadatos son unidades de información que le servirán a lso buscadores y a las redes sociales para clasificar nuestros documentos y saber cómo y a quién ofrecerselos.

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.

- Buena práxis de escritura: “empezar por el principio y terminar por el final”. Cada vez que abramos una etiqueta lo primero que haremos será escribir dos líneas mas abajo su etiqueta de cierre y luego iremos redactando las etiquetas y los textos que vayan dentro de esa etiqueta en el orden en que deben ir apareciendo. Esta práctica nos hará que no nos dejemos nada atrás ahorrando mucho tiempo de depuración.

- El objeto de usar html en un documento es porque se va a compartir el documento con el público a través de Internet. Aunque ahora vamos a escribir nuestros documentos en una carpeta del disco duro de nuestro ordenador y le vamos a pedir al navegador que los renderice tomándolos de esa ubicación, el objeto último es colocar estos documentos en un servidor para que sean accesibles al público. Por eso es necesario que pensemos en las redes sociales y en los buscadores antes, incluso, de saber como escribir un simple título o un párrafo en nuestro documento.

Con esto claro, vamos a ver y explicar…

arriba -- índice

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>

- ¡¡¡profe!!!. No querrás decir que tenemos que escribir todo este galimatías cada vez que hagamos una página, ¿no?.

(la clase se rebulle inquieta. Los resoplidos y los aspavientos se oyen cada vez mas….)

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

arriba -- índice

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.

cada etiqueta meta tendrá dos atributos normalmente:

- El primero describe el tipo de metadato que contiene.

- El segundo atributo, por su parte, contiene el valor delmetadato.

Veamos cada pareja “atributo nombre + atributo valor”:

arriba -- índice

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

arriba -- índice

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

arriba -- índice

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

arriba -- índice

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

arriba -- índice

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

arriba -- índice
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.

arriba -- índice

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

arriba -- índice

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

arriba -- índice

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

arriba -- índice

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

Pues ¡¡no!!.. que las etiquetas autocerradas...

¡¡que no tienen contenido, no, no…!!

que no tienen contenido, no, no, no.

Que tienen ¡¡atribuuuuutos!!, nonaino naino.

con nombre de atributo y valor de atrubuto….

Lo canto a ver si así se te queda.

¡¡si es que tanta rosquilla da sueño!!

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:

1- rel=”stylesheet” Vas a usar una hoja de estilos.

2- href=”dominio/ruta/hoja_estilos.css” El documento de la hoja de estilos se llama “hoja_estilos.css” y está en “dominio/ruta/”. Así que el navegador tendrá que hacer todo ese largo camino al ISP que ya vimos ayer.

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

arriba -- índice

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

arriba -- índice

El teorema de Terzas o de las cajas básicas:

Para todo documento escrito con lenguaje de marcado de hipertexto HTML 5 se cumple que:

1- existe una declaración de tipo de documento <!DOCTYPE html>

2- Existe una única caja etiquetada <html> … </html>

3- Dentro de <html> existen sólo otras dos cajas: La caja etiquetada <head> … </head>, que está llena de metadatos, y la caja <body> … </body> que contiene todo lo demás.

Esto es así para todo documento que llegue a tu navegador indistintamente de como esté armado en el servidor o en tu disco duro.

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

Próximo tema: TEMA V: ¡¡NECESITAMOS UN SERVIDOR!!

Podeis ir al recr……..

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

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

arriba -- índice


O Juan de Terzas
©Juan Carlos Martínez Álvarez


¡Suscribete!

Aun no hay comentarios

Sé el primero en comentar

Caja para comentar:

Nombre o alias:

Si no has comentado antes este hilo y deseas enterarte de los nuevos comentarios escribe tu correo.

Tu comentario:

puedes incluir un enlace, si lo deseas. escribe la URL o copiala y pega desde la barra de direcciones de tu navegador

NOTAS:
- Si incluyes tu correo electrónico recibirás notificaciones de los nuevos comentarios de este hilo exclusivamente.
- Si solo quieres seguir el hilo pero no comentar, no escribas en la caja de comentarios pero indica tu correo.
- Si ya has comentado o seguido antes el hilo no hace falta que pongas tu correo de nuevo.
- Reservado el derecho de moderación: Aunque tu comentario se publica automáticamente, después será revisado y puede ser eliminado o editado si no cumple con la politica de uso de este sitio. Si se modera, se publicará un aviso en su lugar indicando las acciones de moderación realizadas.

arriba -- índice


O Juan de Terzas
©Juan Carlos Martínez Álvarez