¿Qué es el Lenguaje HTML?
HTML es un lenguaje de marcación especialmente ideado
para permitir la creación de contenidos basados en el hipertexto, es decir,
enlaces que permiten desplazarnos a través de diversos documentos en cualquier
momento.
HTML sirve para crear
páginas web, darles estructura y contenido. Un ejemplo sencillo de código HTML
podría ser:
|
<html>
<body>
<p>Esto es un párrafo. Bienvenidos a
esta página web.</p>
</body>
</html>
|
ESTRUCTURA BÁSICA
Los TAGS son comandos que se
especifican en el cuerpo del programa, con el fin de darle las características
deseadas a la información.
Toda página Web debe contener la
siguiente estructura :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera página Web</BODY>
</HTML>
La etiqueta <HTML> le indica
al visualizador que va a comenzar a leer un documento HTML y se debe colocar
siempre al comienzo y al fin del texto.
La etiqueta <HEAD> indica un
encabezado, dentro del cual se coloca información como el título, el cual debe
estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el
cuerpo del documento, el cual es lo que realmente vemos en el Web. Para
comenzar a escribir un documento, es importante tener en cuenta que el lenguaje
HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier
formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras).
Recordemos que para esto es que se creó el HTML, toda presentación final debe
ser proporcionada mediante las etiquetas.
Cada
etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando
finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser
cualquier etiqueta. De esta manera indicamos cuando comienza y termina el
encabezado, el título, el cuerpo y el documento HTML.
Texto:
<p>
Esto es un texto </p>Escribimos <p> antes del texto y </p> para
finalizar el párrafo.
Enlace(link):
<a
href=”http://www.nombredominio.com” target=”_blank”> Nombre del
enlace</a>
Se
debe cambiar ‘www.nombredominio.com’ por el dominio elegido y ‘Nombre del
enlace’ por el nombre que desees.
Imagen sin enlace:
<img
src=”http://www.dominio.com/imagen.gif” alt=”descripción imagen”>
Cambiamos
‘www.dominio.com/imagen.gif’ por la dirección URL de la imagen elegida y
‘descripción de la imagen’ por los comentarios deseados.
Imagen con enlace:
<a
href=”http://www.dominio.com” target=”_blank”> <img
src=”http://www.dominio.com/imagen.gif” alt=”descripción de la
imagen”></a>
Hacemos
los cambios mencionados anteriormente.
Correo electrónico:
<a
href=”mailto:tuemail@tuemail.com”> Contactarme </a>
Sustituimos
‘tuemail@tuemail.com’ por la verdadera dirección de correo electrónico y
‘Contactarme’ por el texto que queramos.
Alinear a la izquierda:
<div
align=”left”> Texto alineado a la izquierda. </div>
Escribimos
<div align=”left”> antes del texto que alinearemos a la izquierda y
finalizamos el texto con </div>.
Centrar:
<div
align=”center”>Texto centrado </div>
Actuamos
de forma análoga al apartado anterior.
Alinear a la derecha:
<div
align=”right”>Texto alineado a la izquierda </div>
Actuamos
de forma análoga al apartado anterior.
Salto de línea
<br>
o <br />
Si queremos insertar una línea en
blanco escribiremos <br> o <br />
Tipo de letra: <font face=”verdana”>Texto
escrito en verdana </font>
Utilizamos
<font face=”verdana”> antes del texto elegido y acabamos con
</font>.
Negrita:
<strong>Texto
</strong>
Actuamos
de forma similar al caso anterior y los casos que vienen a continuación.
Cursiva:
<em>Texto
</em>
Texto subrayado
<u>Texto
subrayado </u>
No
es recomendable utilizar esta etiqueta puesto que los navegantes de la web
pueden confundir el subrayado con un enlace a otra pagina.
Tamaño de letra:
<font
size=”3″>Texto </font>
Subíndice:
<sub>Número2
</sub>
Superíndice:
<sup>Número2
</sup>
Color de letra:
<font
color=”blue”>Texto de color azul </font>
Escribimos
<font color=”blue”> si hemos elegido el color azul y acabamos con
</font>.
También
podemos utilizar el siguiente formato:
<font
face=”Arial” size=”3″ color=”navy”> Texto escrito en arial, tamaño 3 y color
azul marino. </font>
Color de la tabla:
<td
bgcolor=”white”> </td>
Ancho de la tabla:
<td
width=”750″> </td>
Ajuste superior en la tabla:
<tr
valign=”top”> </tr>
Eliminar
la separación entre las columnas y filas de la tabla, espesor y separación
texto y borde de la celda:
<table
width=”750″ CELLSPACING=”0″ CELLPADDING=”0″ BORDER=”0″> </table>
Color del fondo de pantalla:
<body
bgcolor=”white”></body>
Bibliografía
