Aprendiendo a cocinar un poquito de HTML

Publicado por el dic 14, 2011

Compartir

Hoy, en Weblog Magazine, nos dedicaremos a aprender a cocinar. Pero no aprenderemos a elaborar platos exquisitos sino un poquito de HTML.

HTML es el acrónimo de “HyperText Markup Language” y es el lenguaje en el que está escrita una página web. Cuando escribes un nuevo post en tu blog, si utilizas un editor enriquecido, al final todo ello se traduce a lenguaje HTML. Sin embargo, plataformas como Blogger o WordPress te ofrecen la posibilidad de editar los posts directamente en HTML. Eso es una ventaja para realizar pequeños cambios a posteriori, como por ejemplo si quieres añadir un salto de línea.

Los editores enriquecidos (aquellos que te permiten escribir sin preocuparte del código interno, añadiendo enlaces, imágenes, etc) convierten a etiquetas e instrucciones propias que, muchas veces, son innecesarias. Y, en algunos casos, la presentación del post no se ajusta a lo que habías pensado. Aunque tu propósito no sea dedicarte técnicamente a tu blog, es conveniente que conozcas algo de HTML básico para realizar pequeños trucos y que puedas resolver posibles problemas de maquetación por tí mismo. Hoy, te explicamos tres tips que pueden resultarte de mucha utilidad.

HTML es un lenguaje de etiquetas

HTML es un lenguaje basado en etiquetas (palabras rodeadas de corchetes angulares) y sirve para describir la estructura y el contenido de una página web. De alguna forma, también describe su aspecto visual, pero esto más bien se lleva a cabo con las hojas de estilo (CSS). Se trata, pues, de separar las descripciones del contenido y la presentación y es una de las normas fundamentales de los estándares web.

Una de las principales reglas de un lenguaje de estas características es que toda etiqueta debe tener su etiqueta de cierre, identificada por la barra inclinada detrás del corchete angular de apertura. Por ejemplo: etiqueta 1.

La evolución de HTML es HTML5, que auna dos variantes de la sintáxis HTML: la clásica (la que explicamos en este post) y el XHTML. Realmente, XHTML es un lenguaje para describir datos. Por ejemplo, la sindicación RSS, que tanta importancia tiene para la distribución de contenidos, está basada en XHTML.

A continuación, te explicamos tres etiquetas con las que podrás añadir saltos de línea, incluir enlaces o insertar imágenes.

Salto de línea

Los saltos de línea se implementan con la etiqueta etiqueta 1. Esta es una de las que no lleva etiqueta de fin y por eso se incluye la barra inclinada al final, antes del corchete angular de cierre.

Siempre que quieras insertar un salto de línea, incluye esta etiqueta en cualquier parte del texto.

Ejemplo:

Supongamos que queremos insertar un salto de línea en el sitio indicado en la siguiente imagen.

HTML 1

Pondremos la etiqueta de salto de línea tal y como se muestra en la imagen siguiente.

HTML 2

Enlaces

Los enlaces se componen de dos partes: el texto sobre el que se hace click con el ratón y el link de destino. El texto puede ser cualquiera aunque conviene que esté relacionado con la página web a la que enlaza y el link será la dirección de ésta precedida de “http://”.

Para enlazar un texto a una página web, se utiliza la etiqueta siguiente:

etiqueta 3

Si quieres que al poner el puntero del ratón encima del texto, aparezca una descripción del mismo, añade el atributo “title” de la siguiente forma:

HTML 4

Ejemplo:

En la imagen que vemos a continuación, se señala el enlace a la web de Instagram.

Para ello, configuramos una etiqueta “a” tal y como se indica en la imagen siguiente.

HTML 3

HTML 4

Imágenes

Para incluir una imagen en un post, debes utilizar la etiqueta “img” de la siguiente forma:

etiqueta 1

Donde “link” es la dirección web adonde se encuentra alojada la imagen (precedida de “http://”) y “descripción” es una texto que describe a la imagen. El atributo “alt” es muy importante de cara a la accesibilidad y es obligado ponerlo según las normas de validación de la W3C, el organismo dedicado a establecer los estándares web.

Si quieres alinear el texto a la derecha de la imagen, añade el atributo “align” con el valor “left”:

etiqueta 6

Ejemplo:

En la imagen siguiente se ve una imagen alineada a la izquierda de un texto.

HTML 5

El código HTML que hay que utilizar lo podemos ver en la imagen siguiente.

HTML 6

Compartir

ABC.es

Weblog Magazine © DIARIO ABC, S.L. 2011

Noticias y tutoriales sobre blogging y medios socialesMás sobre «Weblog Magazine»

Etiquetas
Calendario de entradas
abril 2017
L M X J V S D
« mar    
 12
3456789
10111213141516
17181920212223
24252627282930
Tweets recientes