1.

El lenguaje HTML (I)

1.1 Etiquetas

Como funciona HTML

HTML es el lenguaje que emplean los navegadores para visualizar las páginas web. Para
excribir en HTML escribiremos el propio texto que aparecerá en la página acompañado de
una serie de instrucciones sobre cómo queremos que aparezca el texto.

En las páginas, no todos los textos son iguales, ya que hay títulos, subtítulos, párrafos,
enlaces... el texto puede además tomar distintos formatos. Hay también imágenes, fondos
de distintos colores, etc. Todo esto debe indicarse junto con el texto de la página en HTML.

Para ello el texto que aparece en la página va enmarcado por unas etiquetas que van a
determinar sus características, tal como veremos a continuación.

Lenguaje de etiquetas

Todo texto o instrucción que pongamos en la página lo haremos a través de un mecanismo

llamado "etiquetas".
Las etiquetas dan las instrucciones necesarias para convertir cada texto en un título, un
párrafo... o para colocar enlaces, imágenes, etc.

Para insertar un texto dentro de una página web lo haremos de la siguiente forma:

<etiqueta>Texto a insertar</etiqueta>

Escribiremos primero los signos < >. Dentro de ellos (donde hemos escrito "etiqueta")
escribiremos una palabra clave que indica el tipo de texto o la acciòn que pretendemos
conseguir. A las etiquetas también se les llama "tags".

Normalmente escribiremos después el texto a mostrar en la página, y cuando este acaba

insertamos otra etiqueta de cierre. Por lo tanto el texto queda encerrado entre dos etiquetas,
la de apertura y la de cierre. La etiqueta de cierre es igual que la de apertura, pero con una
barra inclinada al comienzo ( </tag> ).

Las etiquetas o "tags" son la base del lenguaje HTML; y su estructura básica es la que
hemos indicado, es decir: hay una etiqueta de apertura y otra de cierre, y el texto o
elemento afectado queda entre estas dos etiquetas.

<tag>Texto a mostrar</tag>

Veamos con más detalle la estructura de la etiqueta:

 Las etiquetas van encerradas entre los signos < > (signos menor y mayor).
 Dentro de la etiqueta (signos < >) escribiremos una palabra (o a veces una letra)
clave que indica una orden que debe aplicarse al elemento al que afecta.
 Escribimos depués el texto o elemento que queremos mostrar, el cual queda
incluido entre las etiquetas de apertura y cierre
 Para finalizar escribimos la etiqueta de cierre, la cual es la misma que la de apertura,
pero con una barra inclinada delante de la palabra clave.

Si hemos insistido sobre este punto es porque las etiquetas o "tags" son la base del HTML.

Sin embargo, no todas las etiquetas funcionan así, como veremos más adelante, hay algunas
etiquetas que no necesitan tener otra etiqueta de cierre. Esto ocurre cuando la etiqueta no se
usa para incluir textos, sino para realizar otra serie de acciones (incluir saltos de línea,
imágenes, etc.).

Atributos.

Aunque HTML dispone de un variado número de etiquetas, (91 exactamente en su versión

4.01) éstas no son suficientes para definir todos los aspectos que podemos darle a un texto.
Para ello la etiqueta de apertura puede ir acompañada de otras palabras clave llamadas
atributos. Estos atributos a su vez pueden tomar diferentes valores. las etiquetas de
apertura pueden, por lo tanto, tener cero, uno, o varios atributos.

Por ejemplo, queremos definir un párrafo, pero lo queremos centrado. Para ello definiremos
una etiqueta que indique que el texto es un párrafo, y un atributo que indique que queremos
dar alineacion al texto, con un valor "centrado" como tipo de alineación. En este ejemplo la
etiqueta quedará así:

<p align="center">Texto del párrafo</p>

En este código p es la palabra clave de la etiqueta, y nos indica que ésta es un párrafo;
align es el atributo que indica alineación y center es el valor del atributo que indica
"centrado".

observa la sintaxis del atributo: una palabra clave (align, seguida por el signo igual ( = ) y
su valor entre comillas ( "center" ).

El valor se escribe siempre entre comillas y dependiendo del atributo puede ser otra palabra
clave, un número o un porcentaje. Veamos este ejemplo :

<hr align="center" size="2" width="60%">

En este caso la etiqueta hr indica que hay un salto de línea y con una línea de separación.
los atributos indican las características de la línea de separación: align="center" -
alineación centrada- size="2" anchura = 2, width="60%" largo = 60%. Esta etiqueta no
necesita etiqueta de cierre, ya que no se escribe ningún texto dentro. En la página esta línea
quedará así:

Observa cómo los valores de los atributos son respectivamente una palabra clave, un
número y un porcentaje.

Los atributos van siempre en las etiquetas de apertura. Las etiquetas de cierre nunca llevan
atributos.

La forma genérica de una etiqueta con atributos sería la siguiente:

<etiqueta atributo="valor" atributo="valor">texto o elemento afectado</etiqueta>

Algunas etiquetas deben llevar siempre un atributo específico, tal es el caso de los enlaces o
las imágenes, cuyo atributo tiene como valor la ruta a la que apunta el enlace o donde está
la imagen.
Donde escribir en HTML

El HTML es un lenguaje y por lo tanto debemos escribirlo. La escritura que hagamos

nosotros en lenguaje HTML es lo que se llama código, o código fuente. Deberemos, por
tanto tener un programa donde poder escribir el código fuente. Este programa puede ser un
simple editor de texto plano. Nos vale el bloc de notas de Windows para empezar.

Un editor de texto plano es un programa en donde podemos escribir texto sin más adornos.
el texto aquí está desprovisto de cualidades como tipo de letra, color, tamaño, etc. lo único
importante es el texto en si. después debemos poder guardar el archivo con distintos tipos
de formato o extensiones (como texto, como archivo HTML, como archivo CSS, etc.).

Aunque ya lo hemos visto en la introducción, insistimos en la importancia del editor de

textos, al fin y al cabo el editor de textos es nuestra principal herramienta de trabajo para
crear una página.

Nosotros recomendamos el editor HTML-Kit. Ya que es es uno de los más completos de

los editores de texto gratuitos que podemos encontrar para la creación de páginas web.
Nosotros en este manual utilizaremos para nuestras pruebas el editor HTML-Kit, versión
292

En la sección de complementos encontrarás como descargar HTML-Kit 292 (pulsa en este

enlace o en la imagen del logo HTML-kit para ir a esta seccion) .

Si pensamos en editores de texto, no podemos usar programas como Microsoft-Word o

Word-Pro que son para crear documentos de texto ya formateado, y que utilizamos para
otras cosas. Tenemos también programas como Frontpage o Dreamweaver, éstos son
programas pensados para crear páginas web. En ellos tienes la opción de usar el método
"diseño", donde lo que escribes es lo que se verá en la página. El programa en este caso se
encarga de generar las etiquetas necesarias. Aunque muchas veces no queda exactamente
como queremos, y casi siempre necesita algunos retoques en el código.

Si Quieres usarlos para seguir este curso, debes ponerlos en modo "codigo" para poder
escribir tú mismo las etiquetas. Pretender usar un programa de estos sin saber el
funcionamiento básico de HTML, sería como, por ejemplo, usar una calculadora sin saber
aritmética. Una vez que hayas adquirido un poco de experiencia puedes usarlos en modo
"diseño", pero aún así siempre conviene revisar el código de la página.

Navegadores
Por último, tal como ya se dijo en la introducción, es conveniente tener instalados varios
navegadores en tu ordenador, ya que no siempre el mismo código se ve igual en diferentes
navegadores. En la sección Complementos/ Programas / Navegadores te expica cuales son
los principales navegadores y dónde descargarlos.

Para tener una covertura de más de un 99% de los usuarios debemos comprobar la
visualización de nuestras páginas en los siguientes navegadores :

 Internet Explorer : de Microsoft. Viene incluido con el Sistema Operativo

Windows, de ahí que sea uno de los más usado.
 Mozilla Firefox : : De la fundación Mozilla. uno de los más usados, y el preferido
por los que se dedican al diseño web, por la cantidad de complementos que puede
tener.
 Safari : De Apple, viene incluido en los ordenadores Mac. aunque no es muy usado
hay que tenerlo en cuenta pues una gran cantidad de internautas lo usa.
 Chrome : de Google. Es el mas nuevo de los principales navegadores que aquí
mostramos. Desde que salió está teniendo mucha aceptación, y hoy día es uno de los
más usados habitualmente.
 Opera : Navegador creado por la empresa Opera Sofware, No es de los más usados,
pero tiene bastante aceptación entre los internautas. Ultimamente se incuye en
muchos telefónos móviles su versíón Opera Movil

Conviene sobre todo tener instalado el navegador Mozilla-Firefox, el cual es el preferido

por la mayoría de diseñadores de páginas, ya que tiene muchos complementos pensados
para ayudar al diseñador.

Aunque aquí tratamos fundamentalmente la creación de páginas web destinadas a ser vistas
por ordenador, hay que tener en cuenta que cada vez son más los usuarios que utilizan
tabletas y teléfonos móviles para ver las páginas. debemos tener por lo tanto en cuenta
también cómo se verá nuestra página en este tipo de dispositivos.