Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar propiedades del mismo. HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet que utiliza elementos, atributos y estructura para definir el contenido y formato de una página web. Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica como titulares, párrafos y listas.

1. Los lenguajes de marcas
Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un
documento para especificar una propiedad del mismo.
Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título>
Tipos de marcado: físico y semántico. Por ejemplo, para enfatizar caracteres se puede utilizar el estilo
físico I o el estilo semántico EM.
Estilo físico Estilo semántico
Sintaxis <I>texto en itálica</I> <EM>texto enfatizado</EM>
Resultado texto en itálica texto enfatizado
HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de
las marcas son semánticas. HTML es un lenguaje extensible , al que se le pueden añadir nuevas
características, marcas y funciones.
Los documentos HTML están formados por una serie de bloques de texto con una entidad lógica
(titulares, párrafos, listas, ...). La interpretación de estas entidades se deja al navegador, lo cual da una
gran flexibilidad a la presentación del documento, que puede ser mostrado, por ejemplo, en terminales
gráficos o de texto.
El HTML, es el lenguaje que permite diseñar los hipertextos. Hoy en día, la mayoría de los procesadores
de textos disponen de opciones para guardar los documentos en este formato, por lo que no presenta
dificultad.
Si queremos incluir efectos complicados, con imágenes en tres dimensiones, sonidos, imágenes en
movimiento, consultar bases de datos, etc. entonces debemos utilizar un verdadero lenguaje de
programación, como Java , ideal para Internet pues tiene la ventaja de que funciona
independientemente de la plataforma (mac, pc, unix, etc.) donde se ejecuta.
Características del lenguaje HTML
Elementos
Cada elemento de un documento HTML consta de una marca de comienzo, un bloque de texto y una
marca de fin. <MARCA>bloque de texto</MARCA>. Por ejemplo, <H1>Titular de nivel 1</H1>
Estos elementos se denominan contenedores , porque contienen un bloque de texto entre las dos
marcas. También existen elementos vacíos , que no afectan a bloques de texto y, por tanto, no contienen
marca de fin.
Por ejemplo, línea 1 <BR> línea 2
Atributos
Muchos elementos tienen atributos que definen propiedades del elemento: <MARCA
ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por ejemplo, <H1 ALIGN="CENTER">Titular de
nivel 1 centrado</H1>
Es recomendable encerrar los valores de los atributos entre comillas dobles. En algunos casos es
además obligatorio (por ejemplo, si contienen espacios en blanco).

2. Distinción entre mayúsculas y minúsculas
HTML no distingue entre mayúsculas y minúsculas. Cuando es importante hacerlo, cosa que puede
ocurrir con los valores de algunos atributos (por ejemplo, nombres de ficheros), es preciso encerrar el
valor entre comillas dobles. Por ejemplo, <IMG ALT="" SRC="BolaRoja.gif">
Comentarios
Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un comentario -- >. Los
caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten espacios entre los -- y el > del
final. Los comentarios pueden expandirse varias líneas, aunque no es conveniente porque algunos
visualizadores pueden no interpretarlos.
Interpretación de espacios, tabulaciones y retornos de carro
Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento HTML se ignoran,
tomándose como un único espacio en blanco. Esto permite añadir espacios para aumentar la claridad
del documento. Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma: &nbsp;
Estructuración
HTML es un lenguaje estructurado. Existen unas reglas estructurales sobre dónde pueden y no pueden
ir los elementos. Por ejemplo,
Ciertos elementos no pueden contener otros elementos. Por ejemplo, no es correcto colocar un
titular dentro de otro. Además, tampoco tiene sentido hacerlo. <H1><H2>Texto</H2></H1>
Los elementos no se pueden solapar. No es correcto escribir <EM><H1>Texto</EM></H1>
Estructura de un documento HTML
<HTML>
<HEAD> ... Encabezamiento del documento </HEAD>
<BODY> ... Cuerpo del documento </BODY>
</HTML>
Elementos más importantes del encabezamiento : TITLE y META.
<TITLE>Título de la página</TITLE>
<META NAME="description" CONTENT="Página dedicada al diseño eficiente de páginas web para
internet mediante el lenguaje HTML y otras herramientas auxiliares">
<META NAME="keywords" CONTENT="web diseño HTML hipermedia">
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://dominio/pagina2.html">
<META HTTP-EQUIV="expires" CONTENT="Fri, 05 Jan 2001 13:00:00 GMT">
El cuerpo del documento viene a continuación del encabezamiento, y contiene todo el texto y material
del documento que se va a mostrar.
<BODY BGCOLOR="color" BACKGROUND="fichero imagen"
TEXT="color" LINK="color" VLINK="color" ALINK="color">
...
</BODY>
El formato de los colores se puede especificar de dos maneras distintas:

3. Mediante el nombre del color. Por ejemplo, aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow (y otros 124 colores extendidos).
Mediante la intensidad , en hexadecimal, de los componentes RGB (rojo, verde, azul) del color:
#RRGGBB (siendo 00 la intensidad nula y FF el máximo brillo).
Titulares o Encabezados
Se pueden utilizar distintos niveles de titulares para las distintas secciones de un documento. Para ello
se usa el elemento Hn, siendo n un número del 1 al 6 que indica el nivel del titular. <Hn>titular n</Hn>.
El titular de nivel 3 coincide en tamaño con el texto normal.
Los 6 niveles de titulares tienen el siguiente aspecto:
titular 1
titular 2
titular 3
titular 4
titular 5
titular 6
Realzado de caracteres
Existen distintos estilos para realzar caracteres. La mayoría de ellos son semánticos.
Énfasis
Sintaxis <EM>texto enfatizado</EM>
Resultado texto enfatizado
Mucho énfasis
Sintaxis <STRONG>texto muy enfatizado</STRONG>
Resultado texto muy enfatizado
Código de ordenador
Sintaxis <CODE>texto de ordenador</CODE>
Resultado texto de ordenador
Entrada de teclado
Sintaxis <KBD>texto introducido por teclado</KBD>
Resultado texto introducido por teclado
Preformateado
Sintaxis <PRE>texto preformateado</PRE>
Resultado texto preformateado
Estilos físicos:
Negrita
Sintaxis <B>texto en negrita</B>
Resultado texto en negrita
Itálica

4. Sintaxis <I>texto en itálica</I>
Resultado texto en itálica
Subrayado
Sintaxis <U>texto subrayado</U>
Resultado texto subrayado
Fuente de máquina de escribir
Sintaxis <TT>texto en fuente de máquina de escribir</TT>
Resultado texto en fuente de máquina de escribir
Caracteres especiales
Se escriben con el carácter ampersand (&) seguido del nombre asociado al carácter y un punto y coma
(;).
Ejemplos:
á = &aacute; é = &eacute; í = &iacute; ó = &ocaute; ú = &uacute; ñ = &ntilde; < = &lt;
Á = &Aacute; É = &Eacute; Í = &Iacute; Ó = &Oacute; Ú = &Uacute; Ñ = &Ntilde; > = &gt;
Centrado de texto
Para centrar texto se utiliza el elemento CENTER:
Sintaxis <CENTER>texto centrado</CENTER>
Resultado texto centrado
Párrafos
La marca P indica un comienzo de párrafo. <P>Texto del párrafo alineado a la izquierda</P>
<P ALIGN="RIGHT">Texto del párrafo alineado a la derecha</P>
Espaciado vertical y horizontal
Espaciado vertical: salto de línea: <BR> ; salto de párrafo (intro) <P>
Espaciado horizontal:
<P>Primer párrafo, sin indentación</P>
<BLOCKQUOTE>Segundo párrafo, con
indentación</BLOCKQUOTE>
<P>Tercer párrafo, sin indentación</P>
Primer párrafo, sin indentación
Segundo párrafo, con indentación
Tercer párrafo, sin indentación
Lista de definiciones o glosario
Sirve para definir listas de tipo glosario, en las cuales aparecen una serie de elementos con sus
correspondientes definiciones.
Sintaxis Resultado
<DL>
<DT>Primer elemento a definir
<DD>definición del primer elemento
Primer elemento a definir
definición del primer elemento
Segundo elemento a definir

5. <DT>Segundo elemento a definir
<DD>definición del segundo elemento
<DT>Tercer elemento a definir
<DD>definición del tercer elemento
<DT>Cuarto elemento a definir
<DD>definición del cuarto elemento
<DT>Quinto elemento a definir
<DD>definición del quinto elemento
</DL>
definición del segundo elemento
Tercer elemento a definir
definición del tercer elemento
Cuarto elemento a definir
definición del cuarto elemento
Quinto elemento a definir
definición del quinto elemento
Lista regular numerada
Permite enumerar una serie de elementos. Cada elemento de la lista comienza con la marca LI ( list item
) y termina con /LI, aunque ésta no es necesaria. La lista regular puede ser numerada o sin numerar.
Sintaxis Resultado
<OL>
<LI>Primero
<LI>Segundo
<LI>Tercero
<LI>Cuarto
<LI>Quinto
</OL>
1. Primero
2. Segundo
3. Tercero
4. Cuarto
5. Quinto
Lista regular sin numerar
Sintaxis Resultado
<UL>
<LI>Primero
<LI>Segundo
<LI>Tercero
<LI>Cuarto
<LI>Quinto
</UL>
Primero
Segundo
Tercero
Cuarto
Quinto
Las listas se pueden anidar unas dentro de otra, aunque sean de tipos distintos, como se muestra en el
siguiente ejemplo
Sintaxis Resultado
<OL>
<LI>Primero
<UL>
<LI>Primero a
<LI>Primero b
</UL>
<LI>Segundo
<UL>
<LI>Segundo a
<LI>Segundo b
<LI>Segundo c
</UL>
<LI>Tercero
1. Primero
o Primero a
o Primero b
2. Segundo
o Segundo a
o Segundo b
o Segundo c
3. Tercero
4. Cuarto
5. Quinto

6. <LI>Cuarto
<LI>Quinto
</OL>
Una lista sólo puede contener elementos LI, que a su vez pueden contener otros elementos HTML. Es
importante no poner espacios entre <LI> y el texto, porque este espacio sí es significativo y modifica la
indentación del item añadiendo un espaciado extra. En general, nunca se debe poner espacio entre una
marca de comienzo y el texto que le sigue.
Líneas horizontales
Una línea horizontal se dibuja mediante el elemento vacío HR: <HR SIZE="altura en puntos"
WIDTH="anchura en puntos">
Ejemplos: <HR> <HR SIZE="20"> <HR WIDTH="300"> <HR SIZE="20" WIDTH="300">
Imágenes
Las imágenes se colocan con el elemento IMG: <IMG SRC="fichero imagen" WIDTH="anchura"
HEIGHT="altura"
ALIGN="alineación">
Enlaces de hipertexto
Permiten conectar un documento con otros documentos u objetos. Los enlaces se colocan mediante el
elemento ancla, A: <A HREF="url del documento">texto del enlace</A>
La parte activa del ancla puede ser también una imagen: <A HREF="url del documento"><IMG
SRC="fichero imagen" BORDER="0"></A>
URL ( Uniform Resource Locator )
El URL de un documento es el nombre que identifica unívocamente al documento en la red. El URL se
compone de varias partes (no todas las partes tienen por qué estar presentes):
Protocolo mediante el cual se accede al documento.
Nombre de dominio.
Nombre de la carpeta de la máquina donde se encuentra el documento. Este nombre indica la
ruta desde la carpeta raíz de la web hasta la carpeta donde se encuentra el documento.
Nombre del fichero.
Ejemplo: http://www.deciencias.net/alumnado/2002-2003.htm
Ejemplos
Enlace con url absoluto. <A HREF="http://www.softonic.com">Portal del software SOFTONIC</A>
Enlace con url relativo. <A HREF="index.html">Crear web docente</A>
Enlace a un punto del interior de una página.
<A HREF="http://www.deciencias.net/applets/quimica/index.htm#org"> Química del carbono </A>

7. Enlace asociado a una imagen
<a href="../../index.htm" (o a href:"http://www.deciencias.net")>
<img src="../../images/deciencias.net" alt="Portal www.deciencias.net" width="75" height="50"
border="0" ></a>
Enlace a un punto del interior de una página
Se puede establecer un enlace a un punto del interior de un documento. Para ello se escribe el URL del
documento seguido del símbolo # y una etiqueta, que es una combinación de caracteres:
<A HREF="url del documento#etiqueta">texto o imagen del enlace</A>
En un lugar del documento debe existir un anclaje de la forma: <A NAME="etiqueta">texto</A>
Este es el punto al que se saltará cuando se active el enlace. El texto es opcional y puede no aparecer si
lo único que interesa es marcar el punto de destino del salto.
Por ejemplo, el siguiente enlace lleva al comienzo de la sección denominada "Aplicación de
comportamientos" de la página "comporta.htm": Aplicación de un comportamiento
<a href="comporta.htm#aplica">Aplicación de un comportamiento</a>
En el comienzo de la sección a la que se quiere saltar se deberá colocar lo siguiente: <A
NAME="aplica"></A>
El URL puede omitirse si el enlace se refiere al propio documento. Por ejemplo a la Lista regular
numerada de este mismo documento: Lista numerada
<a href="#numerada">Lista numerada</a>
Enlaces a otros documentos
Un enlace no sólo puede llevar a otro documento HTML; también puede llevar a una imagen, un sonido,
un video, etc. En general, puede llevar a cualquier tipo de documento. Por ejemplo:
( http://www.deciencias.net/disenoweb/disenyo/analizarweb.doc )
Dirección
El elemento ADDRESS se suele utilizar para proporcionar información sobre el autor de la página y
permitir contactar con él para hacerle comentarios acerca de ella.
Sintaxis <ADDRESS>dirección</ADDRESS>
Resultado dirección
En la dirección se suele incluir la dirección de correo del mismo, a veces con un enlace que permite
enviarle un mensaje con sólo hacer click sobre él.
La forma es la siguiente: <A HREF="MAILTO:dirección de correo">texto del enlace</A>
Por ejemplo: puedes comentarme cualquier cosa que se te ocurra a propósito de esta página.
<a href="mailto:mvaquero@wanadooadsl.net" target="_blank">comentarme</a>