Guía básica sobre HTML

El lenguaje de programación HTML, siglas en ingles de HyperText Markup Language,  es la referencia al lenguaje marcado para la creación de paginas webs, con texto, imágenes, videos, etc..  Desde su nacimiento a  principios de los 90, ido evolucionando hasta el actual HTML5.

Elementos básicos del HTML

EL HTML, se escribe con etiquetas rodeadas de corchetes angulares, <,>,/. Se compone de elementos y atributos, como elementos básicos.

Elementos

Los elementos forman la estructura básica del HTML,  con dos propiedades bascas: atributo y contenidos. Cada una de estas propiedades, tienen ciertas restricciones para validar un documento HTML.

De forma general, los elementos  tienen un etiqueta de inicio y otra de cierre, por ejemplo <head> y </head>.  Los atributos del elemento se ubican en la etiqueta de inicio, mientras que el contenido se sitúa entre las dos etiquetas, por ejemplo <lo que sea “valor”> contenido </loquesea>. Algunos elementos como <br>, no tienen contenido ni lleva etiqueta.

El marcado estructural  se usa para dar  formato al texto,  como los encabezados, los más usados son H1, H2,H3,  por ejemplo <h1>Tu blog</h1>.

El marcado presentacional se encarga de la apariencia del texto, como por ejemplo poner un texto en negrita, <b>negrita</b>

Por último el marcado hipertextual se usa para enlazar documentos con otros documentos, es decir con este marcado se crean los hipervinculos o enlaces. Para crear un enlace se usa la etiqueta junto href, que establece la dirección url.

Un ejemplo de enlace seria:

También puedes hacer un enlace con una imagen, por ejemplo:

Atributos

La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo = y escritos en la etiqueta de inicio de un elemento.

En artículo anterior ya hable en profundidad de  Elementos basícos del HTML

Caracteres especiales en HTML

Estos son algunos caracteres especiales en España y su código correspondiente

CarácterHTML
Á&Aacute;
É&Eacute;
í&Iacute;
Ó&Óacute;
Ú&Úacute;
Ü&Uacute;
á&aacute;
é&eacute;
ó&ócaute;
ú&Áacaute;
ü&uuml;
Ñ&Ñtilde;
Ñ&ñtilde;

Otros caracteres especiales muy usados son los siguientes:

CarácterHTML
&&amp;
<&lt;
>&gt;
&nbsp;
&quot;
&apos;
©&copy;
®&reg;
&euro;
pi&pi;

MÁs códigos en  http://www.ascii.cl/es/codigos-html.htm

Ejemplo de uso de HTML

Te voy a mostrar varios ejemplos de uso de HTML.

Marquesina

Aunque hoy día las marquesinas ya no se suelen usar mucho, hace años era habitual encontrar marquesinas en muchos sitios, es decir texto en movimiento en una dirección concreta.

Con esto código tan simple, tenemos una marquesina que va a la derecha, pero podemos cambiar la dirección, simplemente sustituimos right por:

  • left: izquierda
  • up: arriba
  • down: abajo

Hacer pagina de inicio

Un clásico de los sitios webs de  los primeros años 2000, era el hipervinculo para hacer un sitio como tu pagina de inicio en tu navegador, con este código

Menú desplegable

Los menú son elementos casi imprescindibles en un sitio web, en este caso con este sencillo código, puedes crear un menú desplegable

Para agregar mas opciones hay que seguir añadiendo:
<option VALUE=”enlace”>texto del enlace</option>

Crear un pop up

Otro clásico que sigue muy vivo gracias a los formularios de suscripción y la publicidad, son los pop up. Con este sencillo código puedes crear un pop up.

Banners en movimiento

Durante años fue habitual el uso de marquesinas con banners en movimiento, para mostrar sitios amigos. Esto lo puedes hacer con este sencillo código:

Reproductor de música

Otro elemento habitual en las webs de los años 2000, eran los reproductores de música, que hoy en día  se siguen usando aunque en menor medida. Con este código puedes mostrar un reproductor en tu web

Formulario o libro de visitas

Los formularios son un elemento casi imprescindible de cualquier sitio web. Los primeros formularios eran puro HTML y consistían en abrir un ventana de tu programa de correo predeterminado de tu pc. Estos formularios se hacen con este código

Recomendar a un amigo

Otro clásico de los webs de los años 2000, era el formulario para recomendar la web a amigo, que hoy día prácticamente ya no usa. Se hace con este código

Agregar a favoritos

Un  elemento muy usado en las web de los años 2000, ere el vinculo para agregar a favoritos, con este código

Evitar selección de texto

Aunque no es algo que sirva para evitar al 100% que te copien el contenido de tu web, con HTML es posible evitar se seleccione texto con el mouse, con este código tan simple:

en realidad puedes usar varios comandos, tales como:

  • ondragstart=”return false”:  Sirve para evitar que arrastren objetos (generalmente imágenes) dentro o fuera del navegador.
  • onselectstart=”return false”: Sirve para evitar que seleccionen el contenido de nuestra pagina.
  • oncontextmenu=”return false” : sirve para evitar el menú contextual (clic derecho) en la pagina.
  • onkeydown=”return false”:Sirve para evitar que se escriba en la pagina, o sea, en los campos de texto no se puede escribir.

 

En este artículo he hablado de forma muy básica sobre HTML, lenguaje fundamental que cualquier diseñador web debe  entender o tener nociones.

Soy Angel García,diseñador web especializado en WordPress y community manager. Creador de WebmasterCreativo, mi blog, de desiño web en WordPress y redes sociales. Además soy licenciado en Historia.

Deja un comentario