HTML son las siglas de Hyper Text Markup Language y es uno de los lenguajes necesarios para crear sitios web. HTML utiliza principalmente etiquetas para crear documentos web. En esta guía reuniremos y organizaremos las etiquetas necesarias para crear un sitio web.
Como hay muchas clases de etiquetas y sería difícil entrar en detalle en cada una, en esta guía conviene hacerse una idea general de qué etiquetas existen en HTML y cómo se estructuran.
Qué es HTML
Estructura de HTML
Al usar etiquetas HTML, conviene saber que son relativamente fáciles de utilizar porque no distinguen entre mayúsculas y minúsculas, a diferencia de lo que suele ocurrir en los lenguajes de programación.
Además, como los errores que se cometen al usarlo no provocan fallos graves, se puede considerar un lenguaje bastante sencillo.
Todas las etiquetas empiezan con el signo < y terminan con el signo >. Aunque se escriban varios espacios seguidos, solo se aplica uno. La estructura básica de una etiqueta es <nombre_de_etiqueta atributo="valor_del_atributo"> ~ </nombre_de_etiqueta>.
Siguiendo esta estructura, en esta guía escribiremos la explicación de cada etiqueta dentro del ejemplo de código HTML.
Etiquetas para documentos
Etiquetas para documentos
▣ Definir los márgenes del documento (topmargin, leftmargin) - <body topmargin="0" leftmargin="0"> Crear una página sin márgenes</body>
▣ Configurar el color de fondo (bgcolor) - <body bgcolor="color"> Establece el color indicado como color de fondo. </body>
▣ Configurar la imagen de fondo (background) - <body background="nombre_del_archivo.jpg"> El archivo de imagen y el documento web deben estar en la misma ruta. De lo contrario, hay que indicar también la ruta. </body>
▣ Saltos de línea (br, p) -
<body>
Por lo general, en un documento de texto <br>
se pasa a la línea siguiente al pulsar la tecla Intro, pero<br>
en un documento HTML se utiliza la etiqueta br<br>
para insertar un salto de línea. En cambio, con la etiqueta <p>
se puede pasar a la línea siguiente dejando una línea adicional en blanco respecto a un salto de línea normal.
</body>
Etiquetas para texto
Etiquetas para texto
▣ Mostrar texto en negrita (b) - <b> Si se coloca la etiqueta b delante del texto, este se puede mostrar en negrita. </b>
▣ Ajustar el tamaño de la fuente (font size) - <font size="1~7"> Se puede ajustar el tamaño del texto especificando un valor de 1 a 7. </font>
<font size="12pt"> También se puede especificar el tamaño del texto en puntos. Esta unidad permite elegir entre una gama más amplia de tamaños y ajustarlos con más precisión.></font>
▣ Cambiar el tipo de letra (font - face) - <font size="2" face="Gulim"> Se pueden indicar distintos tipos de letra, como Gungsuh, Batang, Gulim y Dotum. </font>
▣ Cambiar el color del texto (color) - <font size="3" color="blue"> Se puede añadir el atributo color a la etiqueta font para cambiar el texto al color deseado. El nombre del color debe escribirse en inglés. </font>
▣ Añadir espacios (  ; ) - Si se quiere añadir un espacio entre caracteres,   ; permite hacerlo como si se pulsara la barra espaciadora. En cambio, en HTML las pulsaciones de la barra espaciadora solo se aplican 1 vez. (La p y el signo «;» deben escribirse juntos. En esta guía se han separado a propósito porque, si la entidad se escribe tal cual, no se ve).
Etiquetas para imágenes
Etiquetas para imágenes
▣ Insertar una imagen (src) - <img src="nombre_del_archivo_de_imagen.jpg"> Si el documento web y la imagen están en la misma ruta, basta con escribir el nombre del archivo. Si están en rutas distintas, hay que indicar también la ruta.
▣ Mostrar el borde de una imagen (border) - <img src="nombre_del_archivo_de_imagen.jpg" border="5"> En la etiqueta de inserción de la imagen, se puede añadir border para indicar el grosor del borde.
▣ Alinear una imagen (align) - <img src="nombre_del_archivo_de_imagen.jpg" align="left"> Se puede alinear la imagen indicando en el atributo align uno de estos valores: left (izquierda), right (derecha), middle (centro), baseline (línea de base), top (parte superior), bottom (parte inferior), texttop (parte superior del texto), absmiddle (centro del texto) o absbottom (parte inferior del texto).
▣ Ajustar los márgenes de una imagen (hspace, vspace) - <img src="nombre_del_archivo_de_imagen.jpg" hspace="10" vspace="10"> Los márgenes se pueden ajustar indicando los valores de hspace (horizontal) y vpace (vertical) después del nombre del archivo de imagen.
▣ Mostrar texto al pasar el puntero del ratón (alt) - <img src="nombre_del_archivo_de_imagen.jpg" alt="texto"> Si se quiere que aparezca un texto al pasar el puntero del ratón sobre la imagen, se escribe el texto deseado en el atributo alt.
Etiquetas para hipervínculos
Etiquetas para hipervínculos
▣ Añadir un hipervínculo (a href) - <a href="dirección_del_enlace"> Si se introduce la dirección deseada en el atributo href de la etiqueta a, como en el ejemplo, se puede crear un hipervínculo que lleve a esa dirección al hacer clic. </a>
▣ Añadir un hipervínculo a una imagen - <a href="dirección_del_enlace"><img src="Japakseogo.jpg"> Si se coloca la etiqueta de imagen después de la etiqueta del hipervínculo, se puede crear un botón que lleve a esa dirección al hacer clic en la imagen. </a>
▣ Mostrar una descripción al pasar el puntero del ratón sobre la imagen (title) - <a href="dirección_del_enlace" title="texto_descriptivo"><img src="Japakseogo.jpg"> Se puede añadir una descripción del botón mediante el atributo title de la etiqueta del hipervínculo. </a>
▣ Abrir en una ventana nueva (target-_blank) - <a href="dirección_del_enlace" target="_blank"><img src="Japakseogo.jpg"> Al asignar _blank al atributo target, se puede crear un botón que abra la página en una ventana nueva. </a>
▣ Configurar los colores de los hipervínculos (link, vlink, alink) - <body link="blue" vlink="red" alink="green"> En la etiqueta body se pueden definir los colores de los enlaces con link (color del hipervínculo), vlink (color del enlace ya visitado) y alink (color del enlace que se está abriendo). </body>
▣ Ir a un punto específico de la misma página (#, name) - Esta etiqueta resulta útil para crear un sitio web de una sola página con desplazamiento.
<a href="#a"> Ir al punto A</a>
<a name="a"> A </a>
Etiquetas para tablas
Ejemplo de etiquetas de una tabla HTML
▣ <table> - Es la etiqueta básica con la que se inicia una tabla.
▣ <thead> - Agrupa la sección de encabezado de la tabla y su uso es opcional.
▣ <tbody> - Agrupa el cuerpo de la tabla y se suele usar cuando se emplea <thead> o <tfoot>.
▣ <tfoot> - Agrupa la sección de pie de la tabla y su uso es opcional.
▣ <tr> - Define una fila de la tabla.
▣ <th> - Define una celda de encabezado de la tabla. Su contenido se muestra en negrita de forma predeterminada.
▣ <td> - Define una celda de datos de la tabla.
▣ <caption> - Proporciona un título o una descripción para la tabla y debe colocarse inmediatamente después de la etiqueta <table>.
Al aplicar el código de ejemplo, aparece una tabla similar a la que se muestra a continuación.
Tabla de ejemplo de GK Library
| Nombre | Edad |
| Cao Cao | 66 |
| Liu Bei | 63 |
Con esto concluimos el repaso de las etiquetas HTML que se usan para crear sitios web. Con un buen dominio de las etiquetas para documentos, texto, imágenes, hipervínculos y tablas, se puede crear un sitio web básico sin mayores dificultades.
Por supuesto, HTML es uno de los fundamentos más elementales de las tecnologías de la información, pero quienes se inician en la programación o en el trabajo relacionado con la web pueden adquirir una base sólida si empiezan por aprender HTML.
