Tema 2 - Etiquetas HTML

Hackerman empezó en este curso, y luego hackeó el tiempo

Contenido del Tema 2

2.1.- Nuestras amigas las etiquetas

HTML no es un lenguaje de programación al uso.

No hay que hacer operaciones matemáticas, no tenemos objetos, clases, matrices, etc etc que sí existen en otros lenguajes de mayor o menor complejidad.

Con esto quiero decir que HTML es muy fácil de aprender. Además, el nuevo standard HTML5 ha añadido elementos semánticos que lo hacen más entendible.

Estos elementos semánticos, que veremos más adelante, son tan obvios como header, footer, section, article, que por sí solos nos dan una idea de lo que pueden o deben contener.

hay gente muy colgada

¿Por qué las etiquetas?

HTML literalmente significa: Hyper Text Markup Language.

El Markup hace referencia al marcado o etiquetado. Muy bien, pero, ¿qué es eso del marcado?

En HTML los elementos, el texto que escribimos, y casi todo lo demás, va "encapsulado" o "metido" entre corchetes angulares:

<elemento> Este sería un elemento de apertura

      aquí va el contenido del elemento

</elemento> Este sería un elemento de cierre

Nótese que para abrir una etiqueta usamos los corchetes angulares y el elemento, y para cerrarlas, se pone la barra truncada /

Ejercicio 2

Vamos a empezar a escribir código HTML de verdad.

Para este ejercicio seguiremos los siguientes pasos:

1.- Abrir el block de notas

2.- Copiar y pegar dentro del bloc de notas, el siguiente contenido:

<!DOCTYPE html> 

<html> 

	<head>

		 <title>Mi web</title> 

	 </head> 

	 <body> 













	 </body> 

</html>

3.- Ahora vamos a practicar con la etiqueta <p>

3.1.- Entre la apertura y el cierre de la etiqueta body vamos a abrir una etiqueta <p> y escribir el texto que nos plazca. No nos olvidemos de cerrar la etiqueta "p" al final del texto.

4.- Después de abrir y cerrar la etiqueta y meterle algo de texto dentro, vamos a repetir el proceso otra vez, pero esta vez vamos a dejar a propósito un montón de espacio entre dos palabras cualquiera, pulsar la barra espaciadora a placer.

5.- Vamos a hacer lo mismo, pero esta vez, empezamos a escribir, pulsamos unas cuantas veces el enter, seguimos escribiendo, y al final cerramos la etiqueta "p".

6.- En este ejercicio, debemos de utilizar, al menos, cuatro veces la etiqueta <p> y así vamos practicando.

7.- Para terminar, vamos a guardar el archivo como html

Seguramente habréis observado que pasan cosas extrañas, como que por muchos espacios y enter que le demos, solo nos va a respetar un espacio, o que las tildes y las eñes salen rarunas...

Más tarde hablaremos de eso.

2.2.- Las meta etiquetas

Las meta etiquetas son etiquetas que se colocan dentro de la etiqueta <head> de nuestra págia web.

Proporcionan información del tipo: quién ha hecho la página, una descripción general de la página, palabras clave, etc etc...

Las meta etiquetas contienen una información crucial para los buscadores, como veremos a continuación.

El modo de declarar una meta etiqueta, generalmente es el siguiente:

<meta name="nombre de la meta" content="valor de la meta" />

Algunas meta etiquetas importantes:

  • charset: para definir con qué juego o grupo de caracteres está escrita la web
  • description: para asignar una descripción a la página web
  • keywords: para declarar que palabras clave, separadas por "," (comas) son importantes en la web
  • http-equiv: para informar del contenido, (aunque generalmente sirve para redireccionar)
  • viewport: relacionado con la vista de la página y su comportamiento en el móvil u otras resoluciones de pantalla

Por ejemplo

<meta name="description" content="Esta es una web para aprender a hacer páginas web" />

<meta name="keywords" content="html, css, javascript, churrigueresco" />

Las metas description y keywords son importantísimas para el SEO.

La meta description nos permite dar una breve descripción del sitio, y aparecerá en los buscadores debajo del título de la web. Ahora veremos lo del título.

La meta keywords define una serie de palabras clave, que serán por las que la gente nos localice en los buscadores. ¿Cúantas metemos? Es una buena pregunta y cada gurú tiene una respuesta diferente. Yo os recomiendo siete u ocho palabras. El tema de qué palabras elegir... no os quiero marear con "auditorías de palabras clave", logarítmos neperianos ni Robocop en bicicleta; simplemente decir que hay gente que se gana la vida holgadamente con esa profesión.

La meta etiqueta charset es diferente, más sencilla

<meta charset="utf-8" />

Sirve para decir qué caracteres usamos. En el caso que nos concierne, es decir, escribiendo en español con "eñes", tildes, e incluso diéresis, elegimos el "utf-8" que entre todos los caracteres que incluye, también están los que usó Cervantes con su ordenador de cartón pluma (y los que usó Gogol, Tesla, Delacroix, Yoshikawa y un montón de drogadictos).

De no usar la declaración de charset, cuando escribimos una eñe, en pantalla veríamos un símbolo raro.

La meta etiqueta charset debe ponerse al principio, la primera de todas, ya que si antes de esta ponemos la etiqueta keywords o description y sus valores llevan caracteres latinos raarunos para los british, nos puede acarrear problemas.

Existen más valores que el utf-8; antiguamente yo usaba el ISO-8859-1, que incluía los caracteres latinos extendidos, pero el UTF-8 tiene éstos y algunos más, y el erotismo de la U y el 8 me puede, frente a la angosta secuencia 59-1 que si la miras fijamente te dan ganas de mear, aunque no hayas bebido nada.

Por último, la meta etiqueta viewport, sirve para decir cómo de grande (que valor de zoom) se verá la página en la pantalla del dispositivo.

Está pensada para móviles o tablets y su valor o valores son muy importantes para estos dispositivos (o lo eran, hasta que el iphone 7 llegó para tocarnos los webs como antiguamente lo hacía internet explorer).

Cuando demos algo de CSS y veamos los principios del RWD (Responsive Web Design") retomaremos el asunto de la meta viewport; de momento os pongo un ejemplo bastante legible de una meta viewport:

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

Esto querría decir que la página será de ancha tanto como el dispositivo en el que se muestra, y q el nivel de escala ha de ser tan grande como la pantalla (a tope).

La meta http-equiv sirve para informar sobre contenido y el estilo de la página, pero también sirve para redireccionar la página a otra url, y ese es el uso más frecuente que se le suele aplicar.

<meta http-equiv="refresh" content="3;url=http://www.chiripitiflauticos.com" >

En el ejemplo de arriba, la meta http-equiv tiene el valor refresh (puede tener otros dos diferentes que nunca usaremos), y su valor, su content, se compone de dos partes: la primera es el número de segundos que hay que esperar (3 en este ejemplo), y luego una url a la que redirigirse pasado ese tiempo.

Como conclusión, hay que recordar estas cosas:

Las meta etiquetas siempre van entre la apertura y el cierre de la etiqueta <head>

Las meta etiquetas charset, keywords y description deberían usarse siempre

2.3.- La etiqueta <title>

La etiqueta <title> no es una meta etiqueta, es una etiqueta del html que también va dentro del <head>, y nos indica el nombre o título de la página web.

Es lo que aparece en el navegador, sobre la pestaña de la página web:

muestra de la etiqueta title en funcionamiento

Para obtener eso, dentro del <head> escribiríamos lo siguiente:

<title>Tema 2 - Etiquetas en HTML</title>

2.4.- Etiquetas de texto

Bien, como os he prometido que aprenderíamos HTML de un modo semántico y accesible a la vez, es decir, bien, vamos a aclarar una cosa.

Hay mucha gente, alguna con la que colaboro día a día, que aun utiliza las etiquetas mal, y coloca texto donde le place, o no hace distinción entre un párrafo (la etiqueta "p" significa párrafo) o un titular (veremos las etiquetas h1, h2... que son headliness) y coloca el texto dentro de un contenedor llamado divisor o div.

Esto no hace que la web se rompa ni mucho menos. Visualmente será idéntica a haberla hecho de un modo correcto, pero no está bien.

Hacer este tipo de distinción entre etiquetas de texto, imagen, contenedoras, etc etc... es una recomendación por varias razones:

1.- SEO: Los robots de búsqueda leen el código e identifican dentro de una web elementos que difieren unos de otros, como artículos, titulares, párrafos, secciones, encabezados, etc.. por lo que escribir el código de este modo nos situará la página mejor posicionada.

2.- Accesibilidad: La accesibilidad, que trataremos por separado más adelante, no solo se trata de que el usuario lo tenga todo fácil e intuitivo. Aunque os cueste creerlo, las personas con visibilidad reducida y las personas invidentes también navegan por las páginas web, y utilizan programas o extensiones de chrome u otros navegadores llamados lectores de pantalla. Si escribimos nuesrto código de este modo, es decir: semánticamente, el lector de pantalla ayudará a estas personas a disfrutar de una mejor experiencia mientras navegan por la web.

3.- Semántica: esto engloba un poco los dos puntos anteriores. La web semántica es accesible y optimizada para SEO por definición, además de ser el modo correcto de usar las cosas.

Hecha esta aclaración, entramos ahora a listar las etiquetas de texto.

2.4.1.- La etiqueta <p>

El lenguage HTML, y especialmente el CSS (las hojas de estilo, que veremos en el capítulo "Luz y Color") tienen cierta relación con el mundo editorial y la imprenta.

En el ejercicio anterior ya hemos conocido la etiqueta <p>, que significa párrafo. Vamos a profundizar un poquín más en ella.

Cuando escribimos un texto en HTML, en vez de pulsar el enter como haríamos en Word, empleamos una nueva etiqueta <p>, como podemos ver en este ejemplo:

<p>Esto aparece en una primera línea</p>

<p>Esto aparece en otra línea debajo</p>

No es necesario poner las líneas una debajo de otra en nuestro código, pero sí nos ayudará a entenderlo mejor.

<p>Esto aparece en una primera línea</p><p>Esto aparece en otra línea debajo aunque lo escribamos después de la primera.</p>

Pues bien, la etiqueta <p> no tiene más secreto.

2.4.2.- Las etiquetas de titular<h1>,<h2>,<h3>,<h4>,<h5> y <h6>

Habíamos comentado antes que el HTML y el múndo editorial tienen ciertas similitudes.

Pues bien, en el mundo editorial se usan títulos, subtítulos,... echemos un vistazo a la siguiente imagen:

noticia de ejemplo

Olvidémonos de la parte superior donde pone el nombre del periódico, la fecha, etc... y echemos un vistazo a lo que sería el titular (Man on the Moon), el subtitular (And the message from Earth: We're breathing again!), y el cuerpo de la noticia.

El titular, si eso fuera la edición digital del Daily Mirror del 69, lo meteríamos dentro de una etiqueta <h1>, y el subtitular en una etiqueta <h2>. El texto de la noticia, que curiosamente está en un sólo párrafo, lo meteríamos enterito dentro de una etiqueta <p>.

La imagen veremos más adelante como insertarla.

La etiqueta <h1> es de las más importantes dentro del código.

Las etiquetas de titular y subtitular, también tienen hermanas pequeñas. Existen hasta el <h6>, y el número significa un poco la importancia que tiene dentro del texto.

En la práctica no se suelen usar headlines más allá del h3 o h4, pero como todo en la vida, depende del contexto.

Ejercicio 3:

1.- Antes de empezar, os podéis descargar la plantilla HTML en este enlace.

Si estáis usando Google Chrome, os debería descargar el archivo automáticamente. En caso contrario, clickar con el botón secundario del mouse y darle a "Guardar enlace como..." y le ponéis el nombre que más rabia os dé, con la extensión html.

Ahora mismo no me importa que al guardar el archivo le pongais un nombre con espacios, eñes e incluso tildes; pero en la vida real de las páginas web, debemos guardar el archivo con una sola palabra y sin caracteres no británicos.

Si tenéis muchas ganas de ponerle un nombre raro, podéis usar los guiones, que está permitido, y guardar el archivo, por ejemplo, como el-profe-me-tiene-mania.html

Como nota para el futuro, no os tenéis q aprender la estructura esa que lleva la plantilla de memoria. Casi siempre está bien aprender cosas, y si os dedicáis a esto la aprenderéis de verla tantas veces, pero cuando profundicemos un poquito más le diremos adiós al NotePad o esos editores cutres y utilizaremos uno muy chachi, q nos genera la plantilla de un modo supersencillo.

2.- Abrimos la plantilla y vamos a practicar un poco.

3.- Escribe un poco de texto practicando con las etiquetas <p> y <h1>,<h2>,<h3>,<h4>,<h5> y <h6>.

4.- Observa los resultados.

2.4.3.- Otras etiquetas de texto

Básicamente, el texto lo solemos englobar en titulares, o texto importante (<h1>,<h2>,<h3>...) y texto normal y corriente (<p>).

Como os habréis dado cuenta antes, cuando escribimos una etiqueta H1, el texto sale más grande que en una H2, y esta a su vez es mayor que una H3, etc etc etc...

Los efectos cosméticos, a lo que respecta a tamaño, color, forma, etc... nunca deben de declararse en el HTML, sino en el CSS u hojas de estilo, con alguna excepción que ahora veremos.

Aun así, tenemos ciertas etiquetas para escribir en negrita, cursiva o itálica, subíndice o superíndice.

Comentaba que esto se debe declarar con hojas de estilo, que nos pueden hacer que un titular H1 tenga la forma de un subíndice cursiva y bien regordete.

Vamos a listar estos elementos:

2.4.3.1.- <b> y <strong>: Negrita

Para escribir un texto en negrita podemos utilizar las etiquetas <b> y <strong>.

Estéticamente son iguales, pero hay una importante diferencia: como decía antes, todos los efectos cosméticos deben declararse en las hojas de estilo o CSS que veremos más adelante. Pero, la etiqueta <strong> tiene un valor semántico per sé, que indica al robot de Google que el texto que lleva dentro es importante.

2.4.3.2.- <i> y <em>: Itálica

Para poner un texto en cursiva o itálica podemos utilizar las etiquetas <i> o <em> indistintamente. Aunque personalmente, no recomiendo utilizar ninguna de ellas. De hecho, a excepción de la etiqueta strong, no recomiendo usar el HTML para efectos cosméticos.

2.4.3.3.- <u>: Subrayado

Para subrayar texto en HTML, utilizamos la etiqueta <u>.

Recordar que estas étiquetas adicionales las muestro con fines didácticos. En la práctica, es una aberración usar la etiqueta <u>.

2.4.3.4.- <sup>: Superíndice copón

Para escribir un superíndice, utilizamos la etiqueta <sup>.

2.4.3.5.- <sub>: Subíndice copín

Para escribir un subíndice, utilizamos la etiqueta <sub>.

2.4.3.6.- <s>: Tachado

He de decir que esta etiqueta ni la conocía, y que para conseguir su efecto con CSS hay q hacer un poco de bricomanía.

Para tachar texto, tenemos 3 opciones: <strike>, <s> y <del>.

2.4.3.7.- <big> y <small> Palabras grandes y pequeñas:

Si lo del subrayado era para hinchar a collejas a quien las use, lo del texto grande y pequeño es para tirarle magdalenas como a Bustamante, por ridículo.

A modo de ejercicio y con fines ilustrativos, he de deciros que existen las etiquetas <big> y <small> para obtener sendos resultados grandes y pezqueños.

2.4.3.8.- <br> Salto de línea:

Para hacer un salto de línea, o lo que en un editor de texto sería un "enter", utilizamos la etiqueta <br>.

Mucha gente sigue utilizando esta etiqueta para crear espacios entre un párrafo y otro. Es un craso error. Para efetos visulaes (colores, tamaños, márgenes, etc...) utilizamos el CSS.

La etiqueta <br> tiene sentido si queremos hacer un salto de línea dentro de un mismo párrafo, por ejemplo.

2.5.- Etiqueta de imagen <img>

La etiqueta de imagen es muy facilina, basta con poner el nombre de la etiqueta img y la ruta o dirección donde se encuentra la imagen.

Aquí vamos a explicar un par de cosas, pero primero veamos dos ejemplos de etiquetas de imagen:

<img src="http://www.pablofv.com/cursoweb/pics/hackerman.jpg" alt="imagen de hackerman">

<img src="imagenes/hackerman.jpg" alt="imagen de hackerman">

Aquí observamos dos cosas nuevas, un par de atributos.

El primer atributo, src hace referencia a la fuente source de donde procede el archivo.

Este archivo, en el ejemplo de arriba lo indicamos de forma absoluta, diciéndole la dirección de internet donde está alojado.

En el ejemplo de abajo, le indicamos que la imagen de Hackerman está dentro de la carpeta imágenes, es decir, un nivel por encima de donde está el archivo HTML donde la pondríamos. Ésta es la forma relativa.

El segundo atributo: alt, significa texto alternativo, y su finalidad es la accesibilidad. Esto quiere decir, que si la imagen no se carga por cualquier razón, aparecerá ese texto en su lugar. También es utilizada por personas con problemas de visión, que al utilizar dispositivos o extensiones para poder navegar por internet, les leerá el contenido o descripción alternativa de la imagen.

El HTML acepta las siguientes imágenes, o formatos de imagen:

  • JPG
  • GIF
  • PNG
  • SVG
  • BMP

Algunos navegadores empiezan a aguantar APNG (Animated PNG), pero olvidaros de meter fotos en formato TIFF u otros formatos exóticos.

Huelga decir, que cuanto más pese la foto,(hablando en kilobytes o megas), más tardará en cargar la página, así que sed finas y finos a la hora de subir las fotos de vuestra última borrachera.

2.5.1.- Mapas de imagen

Los mapas de imágenes son tan pintorescos como viejunos.

Se tratan de imágenes en las que, pasando el ratón por determinadas áreas, aparece un cartelito (usando el atributo title ).

Veamos un ejemplo:

Fenix Anibal Murdock MA Barracus

El código es para mear y no echar gota...

Existen programas, como Gimp y puede que hasta el Potochó que nos ayudan a hacer los mapas de bits. Básicamente se generan áreas poligonares con coordenadas por puntos y demás. Hacerlo a pelo es de valientes.

Si buscamos en nuestro buscador favorito "generador de mapas de bits html" nos saldrán un montón de herramientas online para crear, cortar y pegar nuestro mápa de bits.

Como detalle, os dejo el código del mapa de la imagen del Equipo A.

<img src="../pics/ateam.jpg" alt="" usemap="#Map" />

<map name="Map" id="Map">

    <area alt="Fenix" title="Fenix" href="#" shape="poly" coords="2,216,48,184,37,123,64,95,94,91,118,102,130,118,130,142,124,171,117,193,120,209,139,227,146,252,146,292,129,320,97,340,86,368,13,377,3,377" />

    <area alt="Anibal" title="Anibal Smith" href="#" shape="poly" coords="90,375,113,344,151,314,163,291,155,274,151,233,164,205,196,193,220,197,234,221,236,242,238,268,237,285,238,298,269,305,280,319,294,301,306,311,292,339,293,364,290,376" />

    <area alt="Murdock" title="Murdock" href="#" shape="poly" coords="147,228,141,214,151,190,167,175,170,150,178,123,184,81,204,106,230,96,221,28,240,2,283,7,300,51,295,96,323,117,350,138,349,162,321,198,295,222,283,278,277,301,246,297,243,221,230,192,219,181,196,173,169,183" />

    <area alt="MA Barracus" title="MA Barracus" href="#" shape="poly" coords="314,373,307,335,317,289,301,285,295,254,312,221,339,195,365,162,361,114,375,86,404,77,421,96,437,116,436,163,442,190,478,205,497,215,496,295,491,279,493,317,475,297,487,373" />

</map>

2.6.- Etiqueta de hypervínculo (un enlace o link) <a>

Cada vez que navegamos por internet pinchamos en un sitio y en otro que nos llevan de aquí para allá. O le preguntamos al friki de turno que nos pase un link para ver el último capítulo de Juego de Tronos.

Internet y la química orgánica están repletos de enlaces. En el primer caso, estos se representan con la etiqueta <a>. En el otro caso no.

Como habíamos visto con las imágenes, los links también tienen atributos, o mejor dicho, un atributo, el atributo href, que nos indica hacia dónde apunta el enlace.

Como breve inciso, podemos observar como los atributos se escriben dentro de la etiqueta, y van seguidos de un signo igual =, y el valor del atributo "entrecomillado".

Veremos los atributos en otro capítulo aparte.

Los enlaces o links, pueden ser a otra página, a una imagen, o a una sección dentro de una determinada página. Estos últimos los retomaremos cuando veamos los atributos.

Para representar un enlace se hace de este modo:

<a href="http://www.elpais.es" >pincha aquí para ir a El País</a>

Por defecto, si escribimos un texto dentro de la etiqueta de enlace, suele aparecer en color azul y subrayado.

Pero también podríamos usar una imagen, a modo de icono, para representar un enlace:

<a href="http://www.google.com"> <img src="imagenes/rigodon.png" alt="imagen de Rigodón comiendo berberechos" > </a>

Ejercicio 4

Antes de continuar, vamos a hacer una paradinha para practicar con los nuevos conceptos que hemos aprendido.

Como antes, podéis bajaros la plantilla en este enlace para poder escirbir dentro.

Para completar el ejercicio con orgullo y satisfacción, deberemos escribir un artículo de temática libre, y siguiendo los estándares del HTML, es decir, usando las etiquetas que hemos visto anteriormente.

El artículo deberá incluir al menos:

  • - Un titular h1
  • - Dos subtitulares de menor importancia que el h1
  • - Un par de párrafos con:
    •     - dos palabras en negrita
    •     - dos palabras en cursiva
    •     - dos palabras tachadas
    •     - un superíndice
    •     - un subíndice
  • - Un link a donde más os plazca
  • - Una imagen

Podéis enviarme los ejercicios a pablofveiga@gmail.com y gustosamente los corregiré con la ayuda de Ricky Guau.

La alumna o alumno que mejor lo haga, podrá disfrutar de una cervecita Cisk o brebaje a su libre elección, cortesía del señor profesor.

2.7.- Etiquetas de listas

En HTML existen tres tipos de listas:

- Listas ordenadas

- Listas desordenadas

- Listas de diccionario (no las usa ni el Tato)

Las listas tienen su intríngulis, ya que se componen de un elemento padre, que sería el elemento de lista por sí mismo, y sus descendentes o descendente, que serían los ítems o ítem de la lista.

Según el tipo de lista que tengamos, el elemento será uno u otro; mientras que, a excepción de las listas de diccionarios, los elementos son idénticos. Veámoslo:

2.7.1.- Listas ordenadas: <ol>

Las listas ordenadas se declaran con el elemento <ol> y sus contenidos van metidos en elemtos <li>


<ol>

	<li>Primero</li> 

	<li>Segundo</li> 

	<li>Tercero</li> 

</ol>	

Las listas ordenadas, pueden llevar una serie de números, letras o caracteres para enumerar su contenido.

Para decidir que tipo de numeración, letras, etc... utilizaremos en un futuro las hojas de estilo.

2.7.2.- Listas desordenadas: <ul>

Las listas desordenadas se declaran con el elemento <ul> y sus contenidos van metidos en elemtos <li>


<ul>

	<li>Verde</li> 

	<li>Azul</li> 

	<li>Fucsia</li> 

</ul>	

Las listas desordenadas, en vez de números, letras o caracteres para enumerar su contenido, utilizan guiones, discos, puntos, etc... y con las hojas de estilo podemos poner incluso chirimoyas, si así lo requiere el cliente.

2.7.3.- Listas de diccionario o descripción: <dl>

Las listas de diccionario se declaran con el elemento <dl> y sus contenidos son un poco más puñeteros.

Estas listas, enumeran contenidos, y cada contenido tendría su definición correspondiente.

Cada elemento de la lista iría dentro de un <dt>, e inmediatamente después de éste, vendría su definición dento de un elemento <dd>


<dl>

	<dt>Barco</dt> 

	<dd>Vehículo flotante</dd> 

	<dt>Avión</dt> 

	<dd>Vehículo volador</dd> 

	<dt>Kalimotxo</dt> 

	<dd>Bebida refrescante</dd> 

</dl>	

Las listas de definición rara vez se usan, pero está bien saber que existen por si os encontráis con alguna por la web.

2.8.- Anidar etiquetas

Antes de empezar con los contenedores, vamos a aclarar algo que no me he dado cuenta hasta hace un rato.

Anidar etiquetas, o meter unas dentro de otras, es el día a día de un futuro hackerman o hackerwoman como vosotros, así que vamos a explicar de que va el tema ese.

Recordemos como iban esto de las etiquetas:

<etiqueta> Contenido de la etiqueta </etiqueta>

Las etiquetas se abren con los corchetes angulares, y se cierran del mismo modo, pero anteponiendo la barra truncada / antes del nombre de la etiqueta.

Ejemplo práctico:

<p>esto es un texto dentro de un párrafo</p>

Ahora bien, ¿y si queremos que la palabra texto vaya en negrita?

Sabemos que para poner una palabra, o un fragmento de texto vaya en negrita, tenemos que "abrazarlo" o meterlo dentro de la etiqueta <strong>. Veamos cómo se haría:

<p>esto es un <strong>texto</strong> dentro de un párrafo</p>

Una cosa muy importante, es acordarnos de cerrar las etiquetas una vez las abrimos.

Vamos a ver un ejemplo un poco más intrincado. Para ello, queremos que la palabra texto vaya en negrita, y además, sea un hypervínculo que nos lleve a google.es

<p>esto es un <a href="http://www.google.es"> <strong>texto</strong> </a> dentro de un párrafo</p>

No existe un límite para anidar etiquetas, podemos anidar tantas y tantas como el proyecto lo requiera.

Sin embargo sí existen unas reglas que dicen qué etiquetas se pueden anidar dentro de otras.

Es una regla que básicamente dice: Los elementos en bloque pueden contener elementos en línea, y otros elementos en bloque. Los elementos en línea, sólo deben contener otros elementos en línea.

2.9.- Elementos en bloque y en línea

Una forma de diferenciar los elementos o etiquetas en HTML, es si estos son en bloque o en línea.

Como hoy es lunes y tengo la mente en otros lares, os hago un corta y pega de una página que me gusta mucho.

Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Debido a este comportamiento, el tipo de un elemento influye de forma decisiva en la caja que el navegador crea para mostrarlo. La siguiente imagen muestra las cajas que crea el navegador para representar los diferentes elementos que forman una página HTML:

ejemplo de elementos en linea y en bloque

El primer elemento de la página anterior es un párrafo. Los párrafos son elementos de bloque y por ese motivo su caja empieza en una nueva línea y llega hasta el final de esa misma línea. Aunque los contenidos de texto del párrafo no son suficientes para ocupar toda la línea, el navegador reserva todo el espacio disponible en la primera línea.

El segundo elemento de la página es un enlace. Los enlaces son elementos en línea, por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos. Si después de este elemento se incluye otro elemento en línea (por ejemplo otro enlace o una imagen) el navegador mostraría los dos elementos en la misma línea, ya que existe espacio suficiente.

Por último, el tercer elemento de la página es un párrafo que se comporta de la misma forma que el primer párrafo. En su interior, se encuentra un enlace que también se comporta de la misma forma que el enlace anterior. Así, el segundo párrafo ocupa toda una línea y el segundo enlace sólo ocupa el espacio necesario para mostrar sus contenidos.

Por sus características, los elementos de bloque no pueden insertarse dentro de elementos en línea y tan sólo pueden aparecer dentro de otros elementos de bloque. En cambio, un elemento en línea puede aparecer tanto dentro de un elemento de bloque como dentro de otro elemento en línea.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

2.10.- Etiqueta de contenedor <div>

La etiqueta <div> es sin duda, la etiqueta más utilizada en HTML.

Semánticamente, no tiene ningún significado. Su finalidad, como su nombre indica, es de "dividir" partes del código.

Es muy práctica, por ejemplo, si tenemos varios bloques de contenido y queremos separarlos o agruparlos de algún modo.

<div>

	<p>Aqui pongo lo que va denrto del primer bloque</p>

</div>

<div>

	<p>Aqui pongo lo que va denrto del segundo bloque</p>

</div>

2.11.- Nuevas etiquetas semánticas en HTML 5

Antes he pasado muy por encima sobre la etiqueta <div>, a pesar de ser una de las etiquetas que se usan con más cotidianeidad.

Cuando escribimos un código en una página web, solemos meterlo en contenedores, y a cada contenedor le damos un nombre (clase o identificador) diferente.

Eso de las clases y los identificadores lo veremos en un rato, dentro de la sección Atributos de las etiquetas html. De momento saber que le podemos poner un nombre o varios a cada etiqueta para diferenciarlas de otras aparentemente iguales, o porque sí.

Pues bien, retomando el tema de los contenedores, habíamos dicho que la etiqueta <div> carece de significado semántico. Es decir, pongamos lo que pongamos dentro (texto, imagenes, titulares, párrafos,...) a los robots de Google y de los buscadores, se la va a traer mucho al pairo y se lo va a tragar sin más, sin saborearlo.

Para dotar a la web de un contenido más rico, en HTML5 se han añadido nuevas etiquetas con la labor de contenedor, es decir, de las que se espera que tengan algo dentro, y ese algo sí tenga un contenido semántico por estar metido dentro de ellas.

Sin más dilación, vamos a ennumerar estas etiquetas, y las describiremos una a una.

Las nuevas (o más importantes) etiquetas semánticas de HTML5 son:

  • <header>
  • <footer>
  • <section>
  • <article>
  • <nav>
  • <aside>
  • <address>

Para ver esto de un modo gráfico, veamos la siguiente imagen:

estructura semántica de una web

Un modo correcto de hacer una web sencillina, sería como en esa imagen.

Dentro del header pondríamos un elemento h1, por ejemplo.

El nav sería el contenedor para un menú de navegación. (Por cierto, los menús de navegación suelen usar listas para representarlos).

En la imagen sale una sección central con tres artículos. Esto sería equiparable, por ejemplo, a la sección de deportes de un periódico, con 3 artículos, uno de curling, otro de paddle-surf, y otro de bowsleig.

El aside representa un pedazo de la web con una información no tan importante. Podría ser otro menú de navegación (por lo que llevaría otro nav dentro de ella), una lista con los últimos tweets de Donald Trump, o cualquier cosa que nos apetezca con un significante menor que lo que iría en el section.

Por último aparece un footer, o pie de página. Aquí colocaríamos lo típico de un pie de página en una web (direcciones, logos, lo que queramos...).

Veámoslas una por una:

2.11.1.- Etiqueta <header> para encabezados

La etiqueta <header> tiene mucho significado semántico, así que utilizarla es una buena práctica.

Dentro debe ir al menos un elemento de encabezado h1, h2, ..., y más contenido si así lo deseamos, pero una de los "haches", debe ir.

Las etiquetas <article> y <section>, según los estándares de la W3C, deben llevar dentro una etiqueta <header>. Luego lo vemos.

<header>

	<h1>Mi página web</h1>

</header>

2.11.2.- Etiqueta <footer> para pinreles de página

La etiqueta <footer> tiene significado semántico, pero su contenido es menos relevante para los navegadores.

Podemos usarla o no, al gusto. Para un código más ordenado es recomendable utilizarla.

<footer>

	<p>Síguenos en <a href="http://www.frinsbuk.com">Frinsbuk</a></p>

</footer>

los frigopies son para el ver ano

2.11.3.- Etiqueta <section> para secciones de la página

La etiqueta <section> divide grandes bloques de contenido en una página.

Entre la etiqueta <section> y <article> existe una notoria controversia que alguna vez a acabado en graves altercados entre maquetadores y programadores .

La controversia reside en decidir si una sección lleva dentro artículos, o un artículo lleva dentro secciones.

En la última reunión con los colegas del gremio, me acompañó Lucille, que sin pronunciar una palabra puso ecuménicamente de acuerdo a todos los allí presentes. Haced lo que más os plazca; incluso en la misma página de la W3C no se ponen de acuerdo, así que por qué pelearnos para una vez que la ley es laxa.

para que discutir si podemos resolverlo a mamporros

Eso sí, tanto la etiqueta <section> como <article> deben llevar anidado dentro una etiqueta <header>, y como sabemos, ésta a su vez lleva un headline h1,h2,... o más.

<section id="seccion-2">

	<header>

		<h2>Seccion Cachuli</h2>

	</header>

	<p>Cachuli es un chulo piscinas.</p>

	<p>Y todo el resto de la sección.</p>

</section>

2.11.4.- Etiqueta <article> para "artículos"

Antes ya he explicado la controversia existente entre <section> y <article>.

El uso de uno u otro es algo personal, y al fin y al cabo termina siendo algo de sentido común. En algunas ocasiones, ambas etiquetas pueden llegar a ser semánticamente iguales, así que no os voy a rallar la cabeza con estas cuestiones.

<article id="seccion-2">

	<header>

		<h2>Pipi Lanstrung en Benidorm</h2>

	</header>

	<p>El mono está borracho.</p>

	<p>Y todo el resto del artículo.</p>

</article>

2.11.5.- Etiqueta <nav> para zonas de navegación

La etiqueta <nav> se utiliza para colocar dentro botones, enlaces o elementos que sirvan como menú de navegación.

Antes habíamos dicho que para los menús utilizamos listas, al fin y al cabo estamos listando unas opciones que nos sirven para navegar, y esa lista es desordenada. Veamos un ejemplo:


<nav id="menu-principal">

	<ul>

		<li><a href="index.html>Inicio</a></li>

		<li><a href="tema1.html>Tema 1</a></li>

		<li><a href="tema2.html>Tema 2</a></li>

	</ul>

</nav>

2.11.6.- Etiqueta <aside> para zonas periféricas o de menor importancia

La etiqueta <aside> lleva un contenido adicional al contenido principal de la web. Es una etiqueta bastante pija y poca gente la usa.

Uno de los ejemplos donde la he visto utilizar correctamente sería algo como esto:

<p>Ayer me comí ciento cuarenta y tres castañas y hoy ya no tengo hambre.</p>

<aside>

	<h4>Castañas</h4>

	<p>Las castañas son unas frutas muy punkis mientras están por las ramas. Tienen muchos pinchos.</p>

</aside>

Como veis, se está haciendo un uso perimetral para mostrar una información adicional, de la que se podría prescindir sin que la página o el mensaje (comer castañas como un cerdo), perdiese su significado.

Un <aside> sería un sitio indicado para poner publicidad, banners o cosicas que nos gusten.

2.11.7.- Etiqueta <address> para direcciones

La etiqueta <address> sirve para poner direcciones físicas, es decir, direcciones de toda la vida, las señas.

La especificación de la W3C se refiere a la dirección del autor de un documento, o un artículo, dependiendo de donde se coloque. Pero a las alumnas y alumnos de este curso, nos la repampinfla, y pondremos la dirección que nos dé la gana, siempre que sea una dirección. Ya veréis como los zanguangos del consorcio cambian la especificación tarde o temprano.

Si quieres poner la dirección de un negocio en la página web, podríamos ponerla en el <footer>, y dentro del footer en una etiqueta <address>.

<footer>

	<h4>Ortopedia Gepetto</h4>

	<p>Puedes encontrarnos en:</p>

	<address>

		<p>Calle Melancolia</p>

		<p>Entre el puticlub y la parada del tranvía</p>

	</address>

</footer>

2.12.- Atributos de las etiquetas

Las etiquetas en html pueden llevar atributos. Mola. Otras además, deben llevarlos, como el caso de las imágenes, que llevan el atributo alt para poner un texto alternativo.

Los atributos van siempre dentro de la etiqueta de apertura de un elemento:

<elemento atributo="valor del atributo"> contenido </elemento>

Los atributos se componen del nombre y del valor entrecomillado.

Los atributos tienen diferentes finalidades, pero básicamente dan información adicional del elemento.

Existen unos atributos globales que puede llevar cualquier elemento de html, y hay otros atributos más específicos de cada elemento.

2.12.1.- Atributo id

Cada elemento en el HTML puede tener un atributo id.

Ese id será único en el código, no otro elemento tendrá esa id.

Además, ese code, como la inmensa mayoría de atributos, será una sola palabra.

Ejemplo:

<p id="primero">Primera frase</p>

<p id="segundo">Segunda frase</p>

A simple vista y estéticamente las dos frases son iguales.

Los atributos son muy útiles cuando usemos las hojas de estilo o CSS y ya son la pera limonera cuando usamos javascript.

De este modo podríamos decir con CSS que la primera frase fuera en verde y la segunda en rojo:

#primero {

	color: green;

}

#segundo {

	color: red;

}

Pero no os precipitéis... aun queda un poquín, no mucho, lo prometo, para empezar con las hojas de estilo y dotar a la web de luz y color.

El atributo id tambien nos es muy util dentro de los hypervínculos.

Os había contado que los enlaces podían ser relativos o absolutos; repasemos:

<a href="http://www.google.es">ir a google</a> (esto sería un enlace absoluto)

<a href="temas/tema2.html">ir al tema 2</a> (esto sería un enlace relativo)

Lo que me había callado como un zorrucu, era que también podemos hacer enlaces dentro de nuestra propia página, hacia un lugar determinado.

Para hacer esto, primeramente debemos dotar de una id al lugar donde queremos que enlace, y luego enlazar a él.

Imaginemos que tenemos un índice de temas al principio de la página, y queremos hacer que cuando pinche en un enlace, la página baje automáticamente hacia el tema indicado, pues bien, haremos lo siguiente:

<h1>Lista de temas</h1>

<ul>

	<li><a href="#tema1">Tema 1</a></li>					

	<li><a href="#tema2">Tema 2</a></li>					

	<li><a href="#tema3">Tema 3</a></li>					

</ul>



(imaginemos que hay un montón de contenido entre medias)



<div id="tema1">

	....

	(contenido del tema 1)

</div>

<div id="tema2">

	....

	(contenido del tema 2)

</div>

<div id="tema3">

	....

	(contenido del tema 3)

</div>

Este código haría que al pinchar sobre alguno de los enlaces <a> fueran hacia el tema en cuestión.

¿Y si queremos que vayan a una sección, pero en otra página distinta?

Muy fácil, ponemos la página, y luego la id:

<a href="temario.html#tema3">

2.12.2.- Atributo class

El atributo class es el hermano pequeño de id.

Sirve para lo mismo que id, pero con una importante diferencia: mientras sólo puede haber una id en toda la página, la clase o class puede repetirse. Veámoslo en acción!

<div id="bloque1">

	<p class="verde">Esta frase tiene la clase "verde" </p>

	<p class="azul">Esta frase tiene la clase "azul" </p>

	<p class="verde">Esta frase también tiene la clase "verde" </p>

	<h3 class="verde">Este subtitular también tiene la clase "verde" </h3>

</div>	

Las clases y las id's tienen una gran importancia a la hora de la estética (CSS) y la funcionalidad (JavaScript). Su uso, con moderación, es una práctica recomendada.

2.10.3.- Atributo title

El atributo title sirve para añadir visualmente un "cartelito" al pasar el ratón por encima del elemento al que se lo hayamos aplicado.

Como los demás atributos, se usa dento de una etiqueta y escribimos así:

<a href="http://www.google.es" title="pincha aquí para ir a Google">Ir a Google</a>

Esto se vería así: Ir a Google

2.10.X.- Listado de atributos

Para mentes inquietas y/o curiosas, me he permitido hacer una especie de "corta/pega" de no me acuerdo qué página con el listado completo de atributos.

Ni qué decir tiene que es absurdo aprendérselos de memoria. Con la práctica usaremos algunos de ellos, e incluso con mucha práctica, otros no los usaremos en la vida.

Para mostrar u ocultar la lista completa de atributos, pulsa sobre la foto del perro drogadicto.

el perro guardián de los atributos html

Nombre del Atributo Elementos Descripción
accept <form>, <input> Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset <form> Lista de juegos de caracteres soportados.
accesskey Atributos Globales Define una tecla que activa o agrega un foco al elemento.
action <form> La URL del programa que procesa la información enviada en el formulario.
align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> Especifica el alineamiento horizontal del elemento.
alt <applet>, <area>, <img>, <input> Texto alternativo en caso de que la imagen no se pueda mostrar.
async <script> Indica que el script debería ejecutarse asincrónicamente.
autocomplete <form>, <input> Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus <button>, <input>, <keygen>, <select>, <textarea> El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay <audio>, <video> El audio o video debería empezar lo antes posible.
autosave <input> Previous values should persist dropdowns of selectable values across page loads.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

Color de fondo del elemento.

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS background-color en su lugar.

border <img>, <object>, <table>

El ancho del borde.

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS border en su lugar.

buffered <audio>, <video> Contiene un rango de tiempo multimedia almacenado.
challenge <keygen> Cadena de desafío que se envía junto con la clave pública.
charset <meta>, <script> Declara la codificación de caracteres de la página o del script.
checked <command>, <input> Indica que el elemento debería estar marcado al cargar la página.
cite <blockquote>, <del>, <ins>, <q> Contiene una URL que apunta a la fuente de la cita o cambio.
class Atributo Global Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code <applet> Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase <applet> Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color <basefont>, <font>, <hr>

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS color en su lugar.

cols <textarea> Define el número de columnas en un área de texto.
colspan <td>, <th> Define el número de columnas que una celda debe contener.
content <meta> Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditable Atributo Global Indica si el contenido del elemento es editable.
contextmenu Atributo Global Define el ID del elemento <menu> que servira como menú de contexto para otro elemento.
controls <audio>, <video> Indica si el navegador debe mostrar controles de reproduccion al usuario.
coords <area> Un conjunto de valores que especifican las coordenadas del area.
data <object> Especifica la URL del recurso.
data-* Atributo Global Permite asociar atributos presonalizados a un elemento HTML.
datetime <del>, <ins>, <time> Indica la fecha y hora asociadas con el elemento.
default <track> Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.
defer <script> Indica que el código debe ser ejecutado despues de que la página este cargada.
dir Atributo Global Define la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname <input>, <textarea> Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indica si el usuario puede interactuar con el elemento.
download <a>, <area> Indica que el hipervínculo es utilizado para descargar un recurso.
draggable Atributo Global Define si el elemento puede ser arrastrado.
dropzone Atributo Global Indica que el elemento acepta contenido soltado en el mismo.
enctype <form> Define el tipo de contenido del formulario cuando el método del mismo es POST.
for <label>, <output> Describe elementos que pertenecen a éste.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indica el formulario al que pertenece el elemento.
formaction <input>, <button> Indica la acción del elemento, anulando la acción definida en <form>.
headers <td>, <th> IDs de los elementos <th> que aplican a este elemento.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS height en su lugar.

Nota: En algunos casos, como los <div>, este es un atributo de referencia, en donde debes usar la propiedad CSS height en su lugar.

hidden Atributo Global Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high <meter> Indica el menor valor del rango alto.
href <a>, <area>, <base>, <link> La URL de un recurso asociado.
hreflang <a>, <area>, <link> Especifica el lenguaje del recurso asociado.
http-equiv <meta> Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon <command>

Especifica una imagen relacionada con el comando.

Note: El elemento <command> es obsoleto y no se recomienda su uso.

id Atributo Global Identificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.
ismap <img> Indica que la imagen es parte de un mapa de imagen del servidor.
itemprop Atributo Global Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype <keygen>

Especifica el tipo de clave generada.

Nota: RSA es el valor por defecto.

kind <track> Specifies the kind of text track.
label <track> Especifica el título de la pista con un formato legible por el usuario.
lang Atributo Global Define el lenguaje utilizado en el elemento.
language <script> Define el lenguage (de programación) utilizado en el elemento.
list <input> Identifica una serie de valores predefinidos para ser sugeridos al usuario.
loop <audio>, <bgsound>, <marquee>, <video> Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.
low <meter> Indica el valor mas alto del rango bajo.
manifest <html> Especifica la URL del manifiesto de cache para el documento.
max <input>, <meter>, <progress> Indica el máximo valor aceptado.
maxlength <input>, <textarea> Define el mayor número de caracteres aceptados.
media <a>, <area>, <link>, <source>, <style> Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method <form> Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min <input>, <meter> Indica el valor mínimo aceptado.
multiple <input>, <select> Indica si múltiples valores pueden ser ingresados.
muted <video> Indica si el audio será silenciado inicialmente al cargar la página.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate <form> Este atributo indica que el formulario no debe ser validado cuando se envíe.
open <details> Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum <meter> Indica el valor numérico óptimo.
pattern <input> Define una expresion regular con la cual el valor del elemento debe ser validado.
ping <a>, <area> Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder <input>, <textarea> Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.
poster <video> Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload <audio>, <video> Indica si el recurso o partes del mismo deben ser precargadas.
pubdate <time> Indica si esta fecha y tiempo concuerda con la fecha y tiempo del <article> mas cercano (ancestro).
radiogroup <command>

Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.

Note: El elemento <command> es obsoleto y no se recomienda su uso.

readonly <input>, <textarea> Indica si el elemento puede ser editado por el usuario.
rel <a>, <area>, <link> Especifica la relación entre el objeto destino y el objeto enlace.
required <input>, <select>, <textarea> Indica si se requiere rellenar o no este elemento.
reversed <ol> Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows <textarea> Define el número de filas en un área de texto.
rowspan <td>, <th> Define el número de filas que una celda de una tabla debe abarcar.
sandbox <iframe> Lista de restricciones a ser desactivadas en el iframe.
scope <th> Define las celdas que la cabecera definió en este elemento.
scoped <style> Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.
seamless <iframe> Indica si el iframe debe ser cargado como parte del mismo documento.
selected <option> Define un valor que será seleccionado al cargar la página.
shape <a>, <area> Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size <input>, <select> Define el ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes <link>, <img>, <source> Define los tamaños en los que el icono puede ser cargado.
span <col>, <colgroup> Indica el número de columnas que se agrupan.
spellcheck Atributo Global Indica si se permite la corrección ortográfica para el elemento.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> La URL del contenido integrable.
srcdoc <iframe> Especifica el contenido de la página incluida.
srclang <track> Especifica el lenguaje del contenido de la pista.
srcset <img>
start <ol> Define el número inicial de la lista (si es diferente a 1).
step <input> Indica el valor del incremento para un valor numerico o de fecha.
style Atributo Global Define los estilos CSS que anulan los estilos establecidos previamente.
summary <table>

Contiene una descripción del contenido de la tabla.

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento <caption> en la tabla.

tabindex Atributo Global Sobrescribe el orden de tabulacion del navegador y usa el especificado.
target <a>, <area>, <base>, <form>

Especifica el marco destino en un vínculo.

Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

title Atributo Global Texto a ser mostrado cuando el cursor esté sobre el elemento.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Define el tipo de elemento.
usemap <img>, <input>, <object>

Indica la URL parcial de un image map asociado con el elemento.

Note: Este atributo no puede ser usado si el elemento <img> desciende de un <button> o <a>

value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Define el valor predeterminado a ser mostrado al cargar la página.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Para los elementos enumerados aquí, esto establece el ancho del elemento.

Nota: En algunos casos, como los <div>, este es un atributo de referencia, en donde debes usar la propiedad CSS height en su lugar.

wrap <textarea> Indica la forma en la cual el texto debe ser envuelto.

2.13.- Tablas <table>

Al igual que el típico profesor de biología que os mandaba al recréo cuando tenía que explicar la reproducción sesuá, y no por vergüenza sino por una pereza titánica, se me hace muy cuesta arriba explicar las tablas.

Las tablas, semánticamente hablando, SOLO deben usarse para mostrar "información tabulada".

La RAE, que es poco más que una mierda pinchada en un palo, define "tabular" como Expresar valores, magnitudes u otros datos por medio de tablas, y encima dice que es un verbo transitivo... discutible.

Son muy controvertidas (no, no se doblan ni son elásticas, son puñeteras). Lo son porque hay gente que piensa que cosas como un horario (en inglés "timetable") debería ir en una tabla. O una lista de precios en un restaurante (aquí lo de "lista" nos da una pista de porqué no).

Entonces, ¿qué metemos en las tablas? Veamos primero lo que no debemos meter, golos@s...

Bajo ningún concepto, se usarán las tablas para maquetar contenido.
En los años 90 los webmasters usaban las tablas para colocar el contenido en un sitio y en otro. Esta práctica junto con los peinados horteras y la corbata con teclas de piano han sido relegados al olvido y se les mira con vergüenza cuando se hace memoria.

Nunca meteremos contenido relevante en una tabla.
A Google se la repampinfla las tablas. Cuando ve que en el código hay una tabla, mira para otro lado (o quizás no), pero para Google es como cuando estamos leyendo un libro, pasamos páginas, y no nos enteramos de nada.

En una tabla podemos meter contenido de todo tipo (imágenes, texto, vídeo, audio, ...).

Ahora veamos qué meteremos en una tabla:

Para abreviar, os diré mi truco para saber que es lo que se puede meter:

1.- La información no debe ser relevante: es decir, algo que no nos importe que aparezca en los navegadores.
Si tenemos una zapatería, y queremos mostrar nuestros modelos de zapatos, su precio, color, etc.. algo que pensaríamos que quedaría muy bonito en una tabla, NO lo meteremos allí, porque si alguien quiere buscar manoletinas unisex de colorines por Google, y esa información la hemos metido en una tabla, no aparecerá.
Existen alternativas con CSS para mostrar esa información con <div> y darle un aspecto muy cuqui de tabla.

2.- La información podría pasar de una celda a otra pulsando la tecla "Tab" del teclado.
Esto no es fácil de entender, pero imaginémonos que estamos buscando información en una larga lista de elementos en una tabla, y para navegar rápidamente en la tabla pulsaríamos la tecla TAB para avanzar sobre ese contenido de una celda a otra.

Bien, ahora que sabemos cuando y cuando no usar el elemento <table>, vamos a ver como se usa a nivel de código.

Las tablas empiezan con el elemento: <table> y se cierran como el resto de elementos, </table>.

De toda la vida, las tablas se componen de filas y columnas.

El método para escribir el código de una tabla sería:

  • 1.- Abrimos la etiqueta de tabla <table>
  • 2.- Abrimos una fila con el elemento <tr> (table row)
  • 3.- Dentro de la fila, añadimos la celda con el elemento <td> (table data) y lo cerramos </td>
  • 4.- Podemos repetir el proceso, añadiendo otra celda
  • 5.- Ahora ceraríamos la fila </tr>
  • 6.- Si queremos, podemos añadir otra fila con el elemento <tr>
  • 7.- Dentro de esta fila, deberíamos meter el mismo número de celdas que la anterior (dos en este caso), o indicar que una de sus celdas ocupa dos espacios (con el atributo colspan="2" que veremos más adelante)
  • 8.- Cerraremos nuestra tabla </table>

Veamos una tabla sencilla:


<table id="mitabla">

	<tr>

		<td>VEHÍCULO</td>

		<td>COLOR</td>

	</tr>

	<tr>

		<td>Bicicleta</td>

		<td>Verde</td>

	</tr>

	<tr>

		<td>Canoa</td>

		<td>Burdeox</td>

	</tr>

	<tr>

		<td>Helicóptero</td>

		<td>Fucsia</td>

	</tr>

</table>	

VEHÍCULO COLOR
Bicicleta Verde
Canoa Burdeox
Helicóptero Fucsia

2.13.1.- Partes de una tabla

En las tablas no nos limitamos a poner celdas, filas y columnas. Tenemos en cuenta que los elementos en una tabla pueden ser un encabezado (las celdas que van en la primera fila), un pie de tabla, un grupo de columnas, la leyenda de la tabla, etc...

A modo de lista, vamos a enumerar los elementos de las tablas y luego pasaremos a definirlos individualmente.

  • <table>: define una tabla
  • <thead>: define el grupo de encabezado de una tabla
  • <th>: define una celda de encabezado
  • <tr>: define una fila
  • <td>: define una celda individual
  • <tbody>: define el comienzo del cuerpo en una tabla
  • <tfoot>: define el grupo de celdas del pie de la tabla
  • <colgroup>: define un grupo de una o más columnas en una tabla para darles formato
  • <col>: especifica as propiedades para las columnas denrto de un <colgroup>
  • <caption>: define la leyenda o título de una tabla

2.13.2.- <thead> y <th>

Habíamos dicho que <thead> y <th> nos sirven para encabezados en las tablas.

Siguiendo el ejemplo anterior, vamos a ver como aplicarnos el cuento a la tabla:

VEHÍCULO COLOR
Bicicleta Verde
Canoa Burdeox
Helicóptero Fucsia

Visualmente es idéntica a la anterior, pero veamos el código:


<table class="tablita">

	<thead>

		<tr>

			<th>VEHÍCULO</th>

			<th>COLOR</th>

		</tr>

	</thead>

	<tr>

		<td>Bicicleta</td>

		<td>Verde</td>

	</tr>

	<tr>

		<td>Canoa</td>

		<td>Burdeox</td>

	</tr>

	<tr>

		<td>Helicóptero</td>

		<td>Fucsia</td>

	</tr>

</table>	

La diferencia es simple: las celdas que son de encabezado, llevan th en lugar de td.

Las filas siguen siendo tr, pero como son filas o fila de encabezado, se anidan dentro de un thead

2.13.3.- <tbody> y <tfoot>

Como habréis adivinado, las etiquetas <tbody> y <tfoot> se refieren al cuerpo y al pie de la tabla, respectivamente.

Dentro de estas etiquetas, que al igual que <thead> sirve para agrupar, a diferencia de ésta, dentro seguiremos usando <tr> y <td> para definir filas y celdas.

Vamos a crear una tabla diferente y ya veréis que despiporre. (una mierda, las tablas son más aburridas que Noche de Fiesta)

Nombre Apellido Edad
total nombres total apellidos suma edades
3 4 733
Piluca Rostropovic 146
Wenceslao Vinokulov 14
Ricky Guakiloslav Fernández 573

El código para esta tabla es muy pintoresco:


<table class="tablita">

	<thead>

		<tr>

			<td>Nombre</td>

			<td>Apellido</td>

			<td>Edad</td>

		</tr>

	</thead>

	<tfoot>

		<tr>

			<td>total nombres</td>

			<td>total apellidos</td>

			<td>suma edades</td>

		</tr>

		<tr>

			<td>3</td>

			<td>4</td>

			<td>733</td>

		</tr>

	</tfoot>

	<tbody>

		<tr>

			<td>Piluca</td>

			<td>Rostropovic</td>

			<td>146</td>

		</tr>

		<tr>

			<td>Wenceslao</td>

			<td>Vinokulov</td>

			<td>14</td>

		</tr>

		<tr>

			<td>Ricky</td>

			<td>Guakiloslav Fernández</td>

			<td>573</td>

		</tr>

	</tbody>

</table>	

Podemos ver que, aunque escribamos la etiqueta <tfoot> al principio de la tabla, se dibujará al final, donde corresponde al pie de tabla.

2.13.4.- <caption>

Caption se refiere a la leyenda de la tabla. Tan simple como eso.

La etiqueta <caption> debe insertarse justo después de la apertura de la etiqueta <table>.

Solo puede haber un caption por tabla.

El elemento <caption> por defecto saldrá centrado sobre la tabla. Más tarde veremos cómo modificar esto con CSS.

Veamos un ejemplo sobre la tabla anterior:


<table class="tablita">

	<caption>Super Tabla Morena</caption>

	<thead>

		<tr>

			<td>Nombre</td>

			<td>Apellido</td>

			<td>Edad</td>

		</tr>

	</thead>

	<tfoot>

		<tr>

			<td>total nombres</td>

			<td>total apellidos</td>

			<td>suma edades</td>

		</tr>

		<tr>

			<td>3</td>

			<td>4</td>

			<td>733</td>

		</tr>

	</tfoot>

	<tbody>

		<tr>

			<td>Piluca</td>

			<td>Rostropovic</td>

			<td>146</td>

		</tr>

		<tr>

			<td>Wenceslao</td>

			<td>Vinokulov</td>

			<td>14</td>

		</tr>

		<tr>

			<td>Ricky</td>

			<td>Guakiloslav Fernández</td>

			<td>573</td>

		</tr>

	</tbody>

</table>	

Esto se dibujaría así:

Super Tabla Morena
Nombre Apellido Edad
total nombres total apellidos suma edades
3 4 733
Piluca Rostropovic 146
Wenceslao Vinokulov 14
Ricky Guakiloslav Fernández 573

2.13.5.- <col> y <colgroup>

Las etiquetas <col> y <colgroup> tienen como propósito aplicar estilos a columnas enteras.

Si pretendes hacerte un hackerman o hackerwoman, te recomiendo que pases de esta sección. Estas etiquetas son un full de Estambul y no las voy ni a explicar, de momento.

La teoría de las tablas, como todo lo demás, está meridianamente bien que diría algún tontaco, pero no sirve para nada sin hacer muchos ejercicios.

En breve, subiré ejercicios de tablas y lo que queda de teoría sobre estas.

2.13.6.- Atributos colspan y rowspan para celdas que ocupan más de un espacio

Seguramente recordéis esos horarios que hacíamos en el colegio, con una fila entera bien gordita con la palabra recreo que ocupaba los cinco días de la semana. O alguna asignatura de dos o tres horas que también ocupaba más espacio, aunque menos divertido.

Estos desbordamientos, por llamarlos de algún modo, es lo que en html serían los atributos colspan y rowspan.

Para definirlo, dentro de la celda en cuestión, le ponemos el atributo y su valor.

colspan sirve para que la celda ocupe más de una columna (espacio horizontal); mientras rowspan hace que la celda ocupe más de una fila (espacio vertical).

Veamos un ejemplo básico y su código.

Lunes Martes Miércoles Jueves Viernes
Mates Lengua Física Química Música
Música Pintura Gimnasia Onanismo Historia
Filosofía Carpintería Botánica Papirofléxia
Recreo

Como podéis ver, la asignatura de onanismo lleva un par de horas, y por eso hemos utilizado el atributo rowspan con el valor 2.

Asímismo, el recreo lo tenemos los cinco días de la semana, por lo que hemos utilizado el atributo colspan con un valor de 5.

La tabluca está un poco fea, ya que los elementos no están centrados ni vertical ni horizontalmente. Podríamos utilizar atributos como valign, pero a día de hoy son obsoletos y cualquier cambio estético lo debemos de hacer con CSS, en estos casos concretos con propiedades como vertical-align o text-align.


<table class="tablita"> 

	<thead>

		<tr>

			<th>Lunes</th>

			<th>Martes</th>

			<th>Miércoles</th>

			<th>Jueves</th>

			<th>Viernes</th>

		</tr>

	</thead>

	<tbody>

		<tr>

			<td>Mates</td>

			<td>Lengua</td>

			<td>Física</td>

			<td>Química</td>

			<td>Música</td>

		</tr>

		<tr>

			<td>Música</td>

			<td>Pintura</td>

			<td>Gimnasia</td>

			<td rowspan="2">Onanismo</td>

			<td>Historia</td>

		</tr>

		<tr>

			<td>Filosofía</td>

			<td>Carpintería</td>

			<td>Botánica</td>

			<td>Papirofléxia</td>

		</tr>

		<tr>

			<td colspan="5">Recreo</td>

		</tr>

	</tbody>

</table>	

2.13.7.- Anidar tablas

Las tablas se pueden anidar unas dentro de otras. Pueden llegar a ser una auténtica pesadilla.

Algún día subiré algún ejercicio resuelto cuya utilidad práctica es similar a la del anillo vaginal que utilizaba la duquesa de Alba con su última pareja.

Si necesitáis hacer una tabla rápida para salir del paso, os recomiendo que utilicéis un generador online (de tablas). Pero como Ricky Guau os vea utilizarlos para hacer los ejercicios, os va a echar azúcar en el depósito de gasolina de vuestro aeropatín. Y luego os cagará en la bañera.

2.14.- Formularios <form>

Preparaos un café bien cargado, que este tema es espesito, casi tanto como las tablas.

Los formularios sirven para recibir información del usuario. Normalmente se usan como formularios de contacto, aunque también pueden ser buscadores, como la cajita de Google, e incluso pueden servir para hacer el mal...

2.14.1.- Elementos de formularios

Vamos a enumerar los elementos que puedene formar parte de un formulario:

  • <form>: Elemento de declaración de formulario
  • <input>: Elemento para recoger datos (existen múltiples tipos de "inputs")
  • <label>: Elemento de etiqueta para un input u otro elemento de formulario
  • <select>: Elemento para mostrar diferentes opciones seleccionables
  • <option>: Cada opción disponible en un select
  • <textarea>: Crea un campo de texto donde escribir dentro
  • <button>: Crea un botón
  • <fieldset>: Elemento para agrupar partes dentro de un formulario
  • <legend>: Legenda utilizada en los fieldsets

2.14.1.1- Elemento <form>

El elemento <form> se utiliza para declarar un formulario.

A parte de los atributos globales que queramos añadirle, la etiqueta <form> debe llevar dos atributos: action y method.

El atributo action sirve para declarar que archivo va a procesar el tratamiento de datos recogidos en el formulario. Puede ser el mismo archivo donde se encuentra el formulario, es decir, la misma página; u otro archivo.

El atributo method nos indica cómo se van a procesar estos datos. Los valores más comunes para method son: get y post.

Las diferencias básicas entre post y get son estas:

GET:

  • - La información recogida se muestra en la barra del navegador (fijaos tras buscar algo en Google)
  • - La longitud de esa información, ese chorrillo que aparece arriba, está limitado a cerca de 3000 caracteres
  • - GET nunca debe usarse para manejar información sensible (contraseñas, etc etc), ya que serán visibles por pantalla y algún mirillas puede estar observándonos.

POST:

  • - La información se trata en los encabezados HTTP y no es visible para el/la/los/las/lis/lus usuarios
  • - Se usan para tratar información sensible (contraseñas, números de tarjetas de crédito, el teléfono de Mari Pili)
  • - No tienen ningún tipo de limitación de caracteres.

Veamos un ejemplo:

<form action="funciones/procesar_formulario.php" method="post" >

	(aquí van los elementos del formulario)

</form>

2.14.1.2- Los <input>

Ya están aquí. Los inputs.

Los inputs son elementos donde el usuario puede introducir información.

2.14.1.3- Elemento <label>

2.14.1.4- Elementos <select> y <option>

2.14.1.5- Elemento <textarea>

2.14.1.6- Elemento <button>

2.14.1.7- Elemento <fieldset>

2.14.1.8- Elemento <legend>

2.15.- La etiqueta <iframe>

La etiqueta <iframe> se utiliza para meter dentro de nuestro HTML otra página o documento HTML.

Uno de los usos más comunes de la etiqueta <iframe> es el utilizado para meter o embeber vídeos de YouTube.

Para eso, vamos a YouTube y ponemos un vídeo completamente al azar y clickamos sobre "Compartir", si nuestro navegador está en español, o "ulushi" si está en uzbeko.

pinchar sobre 'compartir' para acceder al iframe

Entre todas las opciones que nos salen, escogemos mi favorita: "Insertar", y nos saldrá un batiburrillo de código debajo, que sorpresivamente comienza con la palabra <iframe>.

pinchar sobre 'insertar' para ver el código del iframe

Copiamos ese código, que tendrá un aspecto como este:

<iframe width="560" height="315" src="https://www.youtube.com/embed/5Wmo-MZP9bI" frameborder="0" allowfullscreen></iframe>

Podemos ver que tiene atributos; algunos tan obvios para los angloparlantes como width o height, otros que ya habíamos visto en las imágenes como src; y otros nuevos como frameborder o allowfullscreen. Podéis cambiarlos a placer que no me romperéis el vídeo.

2.16.- Otras etiquetas

Existen otras etiquetas en HTML, acabo de contarlas una a una (a veces me aburro), y con un error de más menos uno o dos, creo que son 125. Algunas ni las conocía, y otras dudo que tenga el placer o dolor de utilizarlas.

Quizás, a lo largo que voy desarrollando este curso, vea necesario comentar alguna y tratarla por separado. Mientras tanto, sabed que para el 95% de las webs que he desarrollado o en las que he colaborado, no he utilizado más elementos de los que os he mostrado en el Tema 2. Desde luego, las otras etiquetas de texto no las he utilizado a riesgo de que el Team Manager me diera una colleja, con toda la razón del mundo. ¿Por qué? Lo averiguaremos en el Tema 3: Las hojas de estilo.

Utiliza las etiquetas lo justo, o Bud te dará una tollina

2.17.- Etiquetas para audio y vídeo

De momento vamos a dejar estas etiquetas para el final. La de vídeo la usé una vez, es muy chachi, pero es más práctico usar la etiqueta <iframe> y meter contenido de YouTube.

Más adelante, cuando me tengáis más machacadas las otras etiquetas, retomaremos la de audio y vídeo.

Como curiosidad, saber que esas etiquetas se definen con el críptico nombre de <audio> y <video>. Quién lo iba a decir...