TALLER |
|
PIXABAY Lo nuevo y lo viejo HTML5 ha añadido nuevas etiquetas y atributos que permiten una mayor adecuación e integración con CSS y Javascript yendo hacía una evolución, que busca la simplificación consiguiendo una organización superior de nuestro código. Esta evolución no va ligada solo a los nuevos elementos creados, sino que elementos de versiones previas se pueden llegar a usar de nuevas maneras. Vamos pues con las etiquetas que nos faltan <mark> Cuando añadieron la etiqueta <mark> se creó con la intención de resaltar texto que inicialmente no estuviera marcado, pero que al interactuar el usuario con la página, según sus acciones, se resalte el texto dependiendo de su relevancia en ese momento, el efecto visual es como si usásemos un rotulador marcador sobre el texto para resaltarlo. El ejemplo más claro del uso de la etiqueta <mark> sería el resultado de una búsqueda, esta se usaría para encerrar el resultado de la siguiente forma: Imagen 1 Cuando en un texto realizamos una búsqueda de una palabra como por ejemplo Giróscopo cabe la posibilidad que en el texto no sea una palabra resaltada, ahora bien al realizar una búsqueda de dicha palabra, quedará resaltada cuando la encuentre, en algunos navegadores el color por defecto será el amarillo aunque este color es una de esas cosas que más adelante veremos como se puede modificar con CSS a nuestra voluntad. Antes lo que ahora hacemos con <mark>, se podían conseguir de forma parecida con la etiqueta <b>, el caso es que la etiqueta <mark> su objetivo es la de cambiar el significado y el propósito para distintos elementos: <em> esta etiqueta la emplearemos para resaltar el texto, reemplaza la etiqueta <i> que utilizamos en versiones anteriores. <strong> su objeto es indicar importancia del texto <mark> esta etiqueta no resalta el contenido relevante acorde con las circunstancias <b> la etiqueta debe emplearse únicamente si no hay otro elemento más adecuado para la ocasión. Nota: Las anteriores versiones de internet explorer 9 no soportan esta etiqueta <small> Con HTML5 esta etiqueta ha pasado de ser usada para presentar cualquier texto con letra pequeña, independiente de lo que pusiera en el texto a un nuevo propósito donde nos muestra la letra pequeña, impresiones legales o descargos por ejemplo. Imagen 2 <cite> Este es otro claro ejemplo de cómo la nueva especificación HTML5 se vuelve más clara, las etiquetas <cite> marcan el título de un trabajo, como una canción, una serie de televisión, un libro, etc… Imagen 3 <address> La etiqueta <address> se puede usar para dar información de contacto en un documento, esta información puede ser el nombre del autor del documento, enlaces, el correo electrónico, etc. En una página puede haber diversos artículos y claro, en versiones anteriores este elemento afectaba a todo el documento y solo podíamos indicar la información de un autor por página. Con HTML5 al poder crear diversas secciones con la etiqueta <article>, cada una podrá tener un elemento <address> distinto y su uso es aconsejable dentro de las etiquetas <footer> para dar información relacionada con el contenido del elemento <article> o inclusive información de todo el cuerpo (<body>). Imagen 4 <time> La etiqueta <time> nos sirve por ejemplo, cuando creamos un artículo en nuestra página para indicar la fecha y hora de creación de este. Al crear un artículo dijimos que lo haríamos con las etiquetas <article> y dentro de estas aconsejábamos crear una estructura, con las etiquetas <header> y <footer>. Una vez creada la estructura en la cabecera del artículo, es decir dentro de <header> podemos usar <time> este elemento nos permite crear [declarar] un texto con la fecha y la hora que sea comprensible para las personas y a su vez para los navegadores. Imagen 5 Analicemos el código de la imagen 5 donde hemos usado la etiqueta <time> junto con dos atributos. Primero emplearemos el atributo datetime el cual usaremos para escribir la fecha de una manera que el navegador pueda comprender (timestamp o marca temporal). Atributo pubdate, este lo usaremos para indicar que el atributo datetime hace referencia a la fecha de publicación del documento. Tablas de referencia. Aquí termina la primera parte del curso de html5, que es una descripción básica de las etiquetas que estructuran a nuestra página, en el siguiente capítulo comenzaremos con CSS3 donde empezaremos a estudiar cómo aplicar estilos a nuestra página y darle el “look “ que deseemos. Ahora a continuación os dejamos una tabla básica de referencia con las etiquetas de html5 y sus atributos, para que os sirva de guía rápida, en ella encontrareis las etiquetas comunes de html4 y html5 en color amarillo suave, las correspondientes a html5 en amarillo fuerte resaltando, y las etiquetas con los atributos comunes en rosa pálido. También hemos incluidos las etiquetas antiguas y que no se recomienda su uso de html4 en azul pálido. También hemos incluido estas tablas como una guía en PDF descargable por si queréis bajarla a modo de referencia.
Manuel Castelló (kasmangou)
Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |