Informática Secundaria y Bachillerato

¿Qué es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es un lenguaje utilizado para desarrollar páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. A diferencia de los lenguajes convencionales, HTML utiliza una serie de etiquetas ASCII, especiales, intercaladas en un documento escrito en ASCII. Dichas etiquetas serán posteriormente interpretadas por los exploradores encargados de visualizar la página o el documento web, con el fin de establecer el formato.

HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Para editar una página HTML y posteriormente visualizarla, todo lo que se necesita es un editor de texto ASCII (bloc de notas) y un explorador web. Para ver una página HTML no se necesita una conexión a la red; cualquier explorador web debe permitir hacerlo, trabajando en local. No obstante, existen otras herramientas, como FrontPage, que facilitan la generación de páginas HTML. Por convención, los archivos de formato HTML usan la extensión .htm o .html.

Las páginas deben ser colocadas en un servidor web para que otros usuarios puedan acceder a ellas.

Etiquetas básicas HTML

Las etiquetas indican a los exploradores web cómo tienen que mostrar el texto y los gráficos. Normalmente se escriben entre los signos < y >, y suele haber una etiqueta de comienzo y otra de final, para enmarcar el texto que va a ser formateado por ellas.

Un ejemplo:

<HTML>
<HEAD>
<TITLE>
Título del documento
</TITLE>
</HEAD>
<BODY>
Cuerpo del documento: Texto, imágenes, sonido
y órdenes HTML
</BODY>
</HTML>

Estas líneas se guardan en un fichero de texto ASCII con el nombre prueba.html. A continuación, en el directorio donde se ha guardado, se hace doble clic sobre el nombre del fichero y el resultado será el siguiente:

La tabla siguiente describe las etiquetas básicas de HTML:

Etiqueta	Descripción
HTML	Delimita el documento HTML
HEAD	Contiene la información inicial del documento, por ejemplo el título.
TITLE	Contiene el título de la página. Aparece como título de la ventana del explorador web.
BODY	Delimita el cuerpo del documento.

Etiquetas de formato de texto

Igual que en un documento Word, las páginas HTML pueden tener cabeceras. Las cabeceras son insertadas con la etiqueta <Hn>, donde n es un valor de 1 a 6. El tamaño del texto es mayor cuando menor es el nivel (el nivel más alto es 1). Los niveles no tienen por qué emplearse consecutivamente.

Para insertar algún tipo de separador, por ejemplo una raya horizontal, se utiliza la etiqueta <HR>(horizontal rule - raya horizontal).

Para introducir un párrafo se utiliza la etiqueta <P> o nada. Un párrafo va precedido automáticamente por una línea en blanco. Los retornos de carro o "puntos y aparte" en el texto son ignorados; por lo tanto, para introdicir uno se utiliza la etiqueta <BR>.

El siguiente ejemplo clarifica lo expuesto hasta ahora:

<HTML>
  <HEAD>
    <TITLE>
      Título del documento
    </TITLE>
  </HEAD>
  <BODY>
    <H1>Ejemplo de un documento HTML</H1>
    <HR>
    <H3>El cuerpo del documento puede
    contener:</H3>
    <H4>Texto, imágenes, sonido y órdenes
    HTML</h4>
    <P>
       HTML es un lenguaje utilizado para
       dessarrollar páginas y documentos Web.
    <P>
       A diferencia de los lenguajes
       convencionales, HTML utiliza una serie
       de etiquetas ASCII, especiales,
       intercaladas en un documento escrito en
       ASCII.
    <BR>
       Dichas etiquetas erán posteriormente
       interptretadas por los exploradores
       encargados de visualizar la página o el
       documento Web, con el fin de establecer
       el formato.
    <HR>
  </BODY>
</HTML>

Obsérvese la colocación de las etiquetas.
A HTML no le importa que las etiquetas estén al final de la línea o en cualquier otra parte. También hay etiquetas que no requieren poner la etiqueta final; por ejemplo<HR>, <P> o <BR>.

Los exploradores web ignoran en dónde terminan las líneas de texto. El texto se ajustará en todo momento al tamaño de la ventana.

El resultado del código HTML anterior, al hacer doble click sobre el fichero donde se ha guardado, es el siguiente:

Ejemplo de un documento HTML

HTML también proporciona un número de etiquetas para dar formato a las palabras y a los caracteres.
Para cambiar la fuente o el tamaño del texto la etiqueta es

<FONT> Con los atributos SIZE para el tamaño y FACE para la fuente Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal (o tamaño base) es el 3.

<FONT FACE="Verdana" Size=6>Este texto se verá con la fuente Verdana tamaño 6 </FONT>

Se puede cambiar incluso el tamaño base para toda la página, poniendo al comienzo del documento (a continuación de la etiqueta <BODY>) esta etiqueta que cambiaría el tamaño base de 3 a 5: <BASEFONT SIZE=5>Por ejemplo, la etiqueta <B> indica negrita y la <I> itálica.

La etiqueta <CODE> visualiza un texto monoespaciado.

Ejemplo de listado con la etiqueta <LI>

La información también se puede organizar en listas empleando la etiqueta <LI>, así:

<LI>Texto <LI>Imágenes <LI>Sonido <LI> Órdenes HTML

con este resultado:

La lista puede numerarse utilizando las etiquetas <OL> y </OL>. Por ejemplo:

<OL><LI>Texto <LI>Imágenes <LI>Sonido <LI> Órdenes HTML</OL>

Con la línea anterior, la lista se presentaría numerada.

Resumen de etiquetas

Etiqueta	Descripción
H_i	I va de 1 a 6 y son etiquetas para encabezamientos
HR	Inserta una linea horizontal ( no se cierra)
P	Párrafo
BR	Punto y aparte dentro de un párrafo ( no se cierra)
B	Negrita
I	Cursiva
CODE	Texto monoespaciado
FONT	Permite configurar el tipo de fuente con los artibutos : SIZE para el tamaño FACE para el tipo de letra COLOR para el color
LI	Listas sin numerar
OL	Listas numeradas

clases

¿Qué es HTML?

Etiquetas básicas HTML

Etiquetas de formato de texto