www.deciencias.net
Web docente departamental
 
> diseño web > elaboración web docente > introducción html
 
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).

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:

  • 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
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
   <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>
Primer elemento a definir
definición del primer elemento
Segundo elemento a definir
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
   <LI>Cuarto
   <LI>Quinto
</OL>

  1. Primero
    • Primero a
    • Primero b
  2. Segundo
    • Segundo a
    • Segundo b
    • Segundo c
  3. Tercero
  4. Cuarto
  5. Quinto

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>

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>
 
 
© All rights reserved
Webmaster: Miguel Vaquero 		| Web docente | Integración TIC | Diseño Web | Edición Web | Tutoriales diseño-web |    Envía tus comentarios
  El uso de esta Web significa que está de acuerdo con las condiciones de uso | 2010