Вы находитесь на странице: 1из 16

El lenguaje HTML

Documentos HTML Estructura de un documento HTML Comandos bsicos Estilo de letra Caracteres especiales Enlaces Listas Imgenes Tablas Letras y colores La cabecera El cuerpo

Documentos HTML
HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra. Los documentos HTML son ficheros de texto plano (tambin conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el "Bloc de notas" de Windows). Tambin podramos utilizar cualquier programa procesador de textos (como StarWriter o Word), salvando el documento como "solo texto". El nombre de los ficheros escritos en lenguaje HTML suelen tener la extensin html o htm. El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Language). Esto quiere decir que los diferentes elementos (prrafos, encabezamientos, tablas, listas, ...) de un documento para la WWW se sealan intercalando etiquetas que indican al navegador cmo debe mostrarlo. Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (orden o comando para el navegador), seguido de los parmetros o atributos y un signo mayor ">". Para cualquier etiqueta que indica un el inicio de un elemento hay otra de cierre que indica que esa directiva ya no debe actuar sobre el texto que sigue (en algunas ocasiones no es necesario poner, o no existe, la etiqueta de cierre correspondiente).
<directiva parmetro="xxxx"> ... </directiva>

HTML no es sensible a maysculas y minsculas. Para HTML es equivalente <HTML> y <html>, con algunas excepciones. Aunque es recomendable es escribir los nombres de las etiquetas en minsculas ya que las

nuevas generaciones del HTML estn basadas en SGML que requiere de documentos bien formados. As que, si nuestra intencin es continuar trabajando con este tipo de documentos en el futuro, nos puede venir bien seguir el modo de escribir de los documentos bien formados:

Nombres de etiquetas y atributos en minsculas. Etiquetas de cierre para elementos no vacos. Los valores de los atributos deben estar incluidos entre comillas dobles.

Hay disponibles varios editores WYSIWYG (Composer, FrontPage, ...). WYSIWYG es acrnimo de what yuo see is what you get (lo que ves es lo que consigues), que significa que a la vez que se disea el documento HTML estamos viendo su aspecto final.

Estructura de un documento HTML


Todas las pginas web tienen la siguiente estructura:
<html> <head> <title>Primera pgina</title> </head> <body> </body> </html>

En la primer linea encontramos la etiqueta <html>. Esta le indica al cliente que comienza un documento HTML. Luego viene <head>, la cabecera, donde se pone informacin sobre el documento, que no se ve en la pantalla del navegador. Aqu puede ir el ttulo <title> del documento, es lo que veremos como ttulo de la ventana en los navegadores que lo permitan y como se conocer nuestra pgina en algunos buscadores y en la lista de favoritos de los usuarios (es importante pensar bien el ttulo del documento). Tras la cabezera viene <body>, el cuerpo, que es donde se coloca la informacin que queremos mostrar en la pantalla principal del navegador.

Comandos bsicos de formateo de

texto
<p>...</p>

Indica un comienzo de prrafo. Tiene como opciones align="center" ,"left" o "right", para centrar o alinear a derecha o izquierda el texto. Cada comienzo de prrafo deja un espacio separador.
<h1>...</h1>

Se usan para dividir correctamente en secciones nuestra pgina, tal y como se hace en un documento de texto normal. El mas importante (grande) es <h1>, luego <h2> y as hasta <h7>.
<center>...</center>

Permite centrar.
<pre>...</pre>

Representa el texto encerrado en ella con un tipo de letra de paso fijo.


<blockquote>...</blockquote>

Para dejar mrgenes tanto a izquierda como a derecha (sangrar).


<br>

Cuando escribimos un documento HTML los retornos de carro no tienen ningn efecto (salvo si estn contenidos bajo la directiva <pre>). Agrupaciones de ms de un carcter en blanco se traducen en un solo carcter blanco.
<hr>

Inserta una linea horizontal o separador. De ellos pueden modificarse varios atributos:
size="num", "%"

grosor de la barra horizontal, en pixels o el porcentaje del ancho de pgina.


width="num"

anchura de la barra horizontal en pixels.


align="..."

alineamiento de la barra, puede valer left, right o center .


noshade

elimina el aspecto tridimensional .

Cambiando el estilo de letra


Todas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que estemos utilizando.
<b>...</b>

Pone el texto en negrita.


<i>...</i>

Representa el texto en cursiva.


<u>...</u>

Para subrayar algo.


<s>...</s>

Para tachar.
<tt>...</tt>

Permite representar el texto en un tipo de letra de paso fijo.


<sup>...</sup>

Letra superndice.
<sub>...</sub>

Letra subndice.

Caracteres especiales
Cuando editamos una pgina HTML con un editor de texto, podemos poner las tildes y los caracteres propios del espaol (, A, , , ..., , , , , ). Y nuestro navegador los representa de manera adecuada en la pantalla, ya que suponen por defecto que la pgina est escrita en caracteres de un idioma europeo occidental. Pero no todo el mundo tiene configurado su navegador igual (en Rusia ven la pginas con caracteres cirlicos y en Japn en caracteres japoneses) Para indicar a otro navegador que estamos utilizando los caracteres de un idioma europeo occidental, la primera lnea de la cabecera debe ser
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Otra posibilidad es utilizar los nombres simblicos definidos en HTML


&aacute;, &Aacute;, &eacute;, &Eacute;...

, , , , , , , , y
&ntilde; y &Ntilde;

y
&nbsp;

Espacio en blanco que no puede ser usado para saltar de lnea. Cuando escribimos un documento HTML las agrupaciones de ms de un carcter en blanco se traducen en un solo carcter blanco (salvo si estn contenidos bajo la directiva <pre>).
&iquest;

&iexcl;

&ordm;

&ordf;

&copy;

&reg;

Caracteres de control
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente cdigos:
&lt;

<
&gt;

>
&amp;

&
&quot;

"

Enlaces
El HTML es un lenguaje para hipertexto. Existen mltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en comn es que todos poseen enlaces. Un enlace es una zona de texto o grfico que al ser seleccionado nos traslada a otra posicin dentro del documento actual o a otro documento, que puede encontrarse en el mismo ordenador o en otro de cualquier parte del planeta. Son los enlaces lo que hacen de la World Wide Web o telaraa lo que es. Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imgenes, ser considerado como enlace y sufrir dos modificaciones: 1. El texto aparecer subrayado y de un color distinto al habitual, y las imgenes estarn rodeadas por un borde del mismo color que el del texto del enlace.

2. Al pulsar sobre el enlace, se abrir en el navegador el documento al que apuntaba el enlace. En el enlace debemos especificar una direccin. Lo haremos de la siguiente manera:
<a href="direccin">P&uacute;lsame</a>

La direccin estar en formato URL (Uniform Resource Locator).


servicio://mquina/ruta/fichero

Donde el servicio podr ser uno de los siguientes:


http

Es el servicio invocado para transmitir pginas web y el que usaremos normalmente en los enlaces.
https

Es una innovacin sobre el anterior, que nos permite acceder a servidores (generalmente comerciales) que nos ofrecen el uso de tcnicas de encriptacin para proteger los datos que intercambiemos con l de terceras personas.
ftp

Permite trasmitir ficheros desde servidores de ftp annimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargar de mostrarnos el contenido del mismo para que podamos escogerlo cmodamente. Utilizando la @ podremos acceder a servidores privados.
mailto

Para poder mandar un mensaje. Por ejemplo, la URL


mailto:iesgaviota@averroes.cec.junta -andalucia.es

mandara un mensaje a nuestro Instituto.


news

Para poder acceder a grupos de noticias. Se indica el servidor y el grupo. Por ejemplo
news://news.cica.es/es.comp.demos

nos conectara con el grup es.comp.demos en el servidor del CICA. La direccin de la mquina puede ser su IP o la DNS. La ruta es una serie de directorios separados por el

smbolo /, que es el utilizado en UNIX (el sistema operativo ms extendido en los servidores de Internet). Cuando queremos acceder a un fichero situado en la misma mquina que la pgina web que estamos creando, no es necesario ni recomendable, escribir toda la ruta hasta el fichero, bastar relativizar todos los enlaces al directorio actual. Esto quiere decir que no tendremos que escribir:
<a href="http://averroes.cec.juntaandalucia.es /ies_gaviota/pagina2.html">

Si el fichero al que queremos acceder est en el mismo directorio, bastar con escribir:
<a href="pagina2.html">

Y si esr en otro directorio, lo nombrar de forma relativa al directorio actual de esta forma:
<a href="otro_directorio/pagina2.html">

o bien de esta otra:


<a href="../../otro_directorio/pagina2.html">

donde los dos puntos (..) se utilizan para acceder al directorio padre.

Anclas
Como dijimos, es posible acceder a una posicin del documento HTML. Para hacerlo, primero debemos especificar el lugar del documento al que queremos acceder:
<a name="ancla">

Para poder acceder a ese lugar incluimos el enlace de esta manera:


<a href="#ancla">Vamos a ancla</a>

Tambin podemos acceder a anclas situadas en documentos remotos. Para ello aadiremos el nombre

del ancla al URL as:


<a href="enlaces.html#ancla">Vamos a ancla en los enlaces</a>

Listas
Existen varios tipos de listas en HTML, todas ellas se pueden meter unas dentro de otras formando rboles, y siguen el siguiente formato:
<tipo_lista> <li>Primer elemento <li>Segundo elemento </tipo_lista> <tipo_lista> <ul>

puede ser :

Nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista ir normalmente precedido por un crculo. La etiqueta <ul> admite estos parmetros:
compact

Indica al navegador que debe representar la lista de la manera ms compacta posible.


type="disc", "circle", "square"

Indica al navegador el dibujo que preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin como parmetro de <li>.
<ol>

Nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista ir precedido por su nmero o letra en el orden. La etiqueta <ol> admite estos parmetros:
compact

Indica al navegador que debe representar la lista de la manera ms compacta posible.


type="1", "a", "A", "i" o "I"

Indica al navegador el tipo de numeracin que

preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin como parmetro de <li>.
start="num"

Indica al navegador el nmero por el que se empezar a contar los elementos de la lista. La etiqueta <li> admite el atributo value="num", que acta como start pero a partir de ese elemento.
<dl>

Este tipo de lista que no utiliza la etiqueta <li>. Tiene como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definicin. Emplearemos la etiqueta <dt> para el objeto definido y <dd> para la definicin. La etiqueta <dl> slo admite como parmetro el ya conocido compact, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores.

Incluyendo imgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta <img> de esta manera:
<img src="fichero_grafico" alt="descripcion">

El parmetro src especifica el nombre del fichero que contiene el grfico. Los formatos estndar en la red son el GIF y el JPG. La ltimas versiones de Netscape y Explorer aceptan tambin el formato PNG. El parmetro alt especifica el texto que se mostrar en lugar del grfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) o en el supuesto de que el usuario los haya desactivado. Es por todo eso que conviene ponerlo siempre. Adems algunos navegadores lo muestran cuando pasamos el ratn por encima de la imagen. Existen dos atributos que, aunque opcionales, tambin conviene indicar siempre: width="num" y height="num", la anchura y la

altura del grfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamao de la imagen mientras la va leyendo de la red y as poder mostrar el resto de la pgina correctamente mientras tanto. Estos atributos tambin nos pueden valer para ampliar o reducir el tamao original de las imgenes, poniendo el valor en pixel o el % del ancho y alto con que queremos ver la imagen en el navegador. Para poder maquetar conjuntamente texto y grficos, el HTML proporciona, por medio del parmetro align, las siguientes maneras de alinear una imagen respecto del texto que la acompaa:
align="top"

Coloca el punto ms alto de la imagen coincidiendo con ms alto de la lnea de texto actual.
align="middle"

Alinea el punto medio (en altura) de la imagen con la base del texto.
align="bottom"

Por defecto Alinea el punto ms bajo de la imagen con la base del texto.
align="left"

Coloca la imagen a la izquierda del texto.


align="right"

Coloca la imagen a la derecha del texto. Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del alfabeto excepto algunas (p, q, y, j ...). El atributo hspace="num" indica el espacio en blanco, en pixel, que se insertar a derecha e izquierda de la imagen y vspace="num" el espacio por encima y debajo de la imagen.

Imgenes y enlaces
Suele ser comn incluir enlaces dentro de un grfico. En ese caso, por defecto, los navegadores le pondrn un borde al grfico para indicar que efectivamente es un enlace. Prctico, pero la mayora de las veces bastante poco esttico. Por medio del parmetro border podremos alterar el grosor de ese borde o incluso eliminarlo ponindolo a cero.

<a href="ruta/fichero"><img src="imagen" border="0"></a>

JPG o GIF
Una buena regla general es usar JPG cuando la imagen sea una foto y cuando sea un logotipo, letras, o un dibujo utilizar GIF. Lo principal es que la imagen ocupe lo mnimo posible (una imagen de ms de 50k es muy grande para Internet) y que tenga una calidad aceptable. Un GIF de 256 colores generalmente es un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar reducida a menos de la mitad. Si hubiese que poner una imagen grande no la pondremos directamente en la pgina, pondremos un versin reducida de unos 150 x 100 pixels con un enlace a la grande, e indicaremos cunto ocupa la grande.

Tablas
Las tablas son posiblemente la manera ms clara de organizar la informacin. Tambin es el modo ms adecuado de maquetar texto y grficos de una manera algo ms controlada que con los parmetros align.

La tabla est contenida entre las etiquetas <table> y </table>. Cada fila de la tabla est delimitada por <tr> y </tr> Cada celda est determinada por las etiquetas <td> y </td>. Las etiquetas <th> y </th> sirven para indicar que el texto contenido es la cabecera de la columna. Las cabeceras de la tabla no son obligatorias. La etiquetas <caption> y </caption> delimitan el ttulo de la tabla.

No es necesario definir de antemano cuantas filas o columnas tendr la tabla, basta con colocar tantas celdas como queramos. La distribucin de las celdas la ajustaremos con las etiquetas que delimitan las filas. Una tabla con 2 filas y 3 columnas se declarar as:

<table> <tr> <td>1,a</td> <td>1,b</td> <td>1,c</td > </tr> <tr> <td>2,a</td> <td>2,b</td> <td>2,c</td > </tr> </table>

Los atributos de <table> son:


border="num"

Especifica el grosor del borde que se dibujar alrededor de las celdas. Por defecto es cero, lo que significa que no dibujar borde alguno.
cellspacing="num"

Define el nmero de pixels que separarn las celdas.


cellpadding="num"

Especifica el nmero de pixels que habr entre el borde de una celda y su contenido.
width="num", "%"

Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para ella (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador).
align="..."

Alinea la tabla a izquierda ("left"), derecha ("right") o centro ("center").


bgcolor="#xxxxxx"

Colorea todo el rea de la tabla con el color indicado. Ver colores en Letras y colores.

Definir las filas


Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:
align="..."

Alinea el contenido de las celdas de la fila horizontalmente a izquierda("left"), derecha ("right") o centro ("center")
valign="..."

Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo ("bottom") o centro ("middle").

Definir las celdas


Por ltimo, nos queda definir cada celda gracias a la etiquetas <td> y <th>. Estas etiquetas son equivalentes, pero la ltima se utiliza para encabezados, de modo que su interior se escribir por defecto en negrita y centrado. Estos son los atributos de ambas:
align="..."

Alinea el contenido de las celdas de la fila horizontalmente a izquierda("left"), derecha ("right") o centro ("center")
valign="..."

Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo ("bottom") o centro ("middle").
width="num", "%"

Especifica la anchura de la celda . Tambin se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este ltimo caso, ser un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
nowrap

Impide que, en el interior de la celda, se rompa la lnea en un espacio.


colspan="num"

Especifica el nmero de celdas de la fila situadas a la derecha de la actual que se unen a sta (incluyendo la celda en que se declara este parmetro). Es por defecto uno. Si se pone igual a cero, se unirn todas las celdas que queden a la derecha.
rowspan="num"

Especifica el nmero de celdas de la columna situadas debajo de la actual que se unen a sta.
bgcolor="#xxxxxx"

Colorea todo el rea de la celda con el color indicado. Ver colores en Letras y colores.

Ttulo de la tabla
Por medio de la etiqueta <caption> se indica el ttulo de una tabla. Esta etiqueta admite slo un parmetro: align, que es por defecto top. Si lo definimos como bottom el ttulo se colocar al final de la tabla en lugar del comienzo.

Tipos de letra, tamao y colores


Gracias a la etiqueta <font> vamos a poder cambiar el tamao, el tipo y el color de las letras en nuestras pginas.

Cambio de color
Para hacerlo se utiliza el parmetro color. La manera de especificarle el color es comn a todas las etiquetas HTML: bien indicando el nombre, si es un color normal (Black, Silver, Gray, White, Maroon, Red,
Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua), <font color="red">Estoy en rojo</font>

o bien especificando la intensidad de rojo, verde y azul (cdigo RGB) del mismo.
<font color="#xxxxxx">color</font>

Donde cada x es un dgito hexadecimal, del 0 a la F. Las dos primeras x corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Por ejemplo: para el blanco pondremos todos los valores al mximo, #FFFFFF; y para el rojo, #FF0000.
<font color="#FF0000">Estoy en rojo</font>

Tamao de la letra
El parmetro utilizado para indicar el tamao es size. Puede tomar valores desde 1 a 7, siendo el tamao por defecto 3.
<font size="2">Tamao 2</font>

Tambin se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamao del tipo de letra. As, por ejemplo, si indicamos que queremos un tamao de"-2" estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces ms pequeo.

<font size="+3">Tamao 6</font>

Tipo de letra
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parmetro face. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que est viendo nuestras pginas, podemos indicar ms de uno separado por comas. Si el navegador no encuentra ninguno seguir utilizando el que tiene por defecto:
<font face="Helvetica,Arial,Times">No s como voy a salir exactamente</font>

La cabecera
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu son los meta. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el nombre de su autor. Por ejemplo,
<meta name="autor" content="Jos Fernando">

Estas son las propiedades ms comunes:


author

Autor de la pgina.
generator

Herramienta utilizada para hacer la pgina.


classification

Palabras que permite clasificar la pgina dentro de un buscador jerrquico.


keywords

Palabras clave por las que se encontrar la pgina en los buscadores.


description

Descripcin del contenido de la pgina. Tambin suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no alteran el contenido de la misma, aunque si la forma de presentarla y su comportamiento. Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo.

El cuerpo

La etiqueta <body> admite los siguientes parmetros :


bgcolor="#xxxxxx"

Permite definir el color de fondo de la pgina.


background="imagen.gif"

Permite poner un grfico de fondo para la pgina. No se debe poner una imagen muy "pesada" de fondo, no mas de 15k. Ni olvidar verificar que no dificulte la lectura del texto.
bgproperties="fixed"

El grfico definido como fondo de la pgina permanecer inmvil aunque utilicemos las barras de desplazamiento.
text="#xxxxxx"

Cambia el color del texto.


link="#xxxxxx"

Cambia el color de un enlace no visitado (por defecto azul).


vlink="#xxxxxx"

Cambia el color de un enlace ya visitado (por defecto prpura).


alink="#xxxxxx"

Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
leftmargin="num", topmargin="num"

Especifican el nmero de pixels que dejar de margen entre el borde de la ventana y el contenido de la pgina. Se suelen utilizar para dejarlos a cero.
marginwidth="num", marginheight="num"

Ms o menos equivalentes a los anteriores, pero stos funcionan en Netscape. No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.

Вам также может понравиться