You are on page 1of 10

Curso básico de lenguaje HTML

Página todavía en construcción Se irá mejorando poco a poco


Última actualización: 22 de Septiembre de 1997

Índice
 Estructura general de un fichero  Links
HTML  Inserción de imágenes
 Formato de párrafos  Imágenes clicables
 Formato de texto  Imágenes sensibles
 Listas no ordenadas  Frames
 Listas ordenadas  Formularios
 Listas de definiciones  Layers o capas
 Tablas
 Anclas

Estructura general de un fichero HTML

HTML (HyperText Markup Language) es el lenguaje utilizado en la Internet


para definir las páginas del WORLD WIDE WEB. Los ficheros HTML son
ficheros puramente ASCII, que pueden ser escritos con cualquier editor
básico, tal como Notepad en Windows o vi en Unix. También se pueden
utilizar procesadores de texto más complicados como Microsoft Word, pero
en este caso hay que asegurarse que el fichero es guardado en disco como
"text only". En este fichero de texto se introducen unas marcas o caracteres de
control llamadas TAGs, que son interpretadas por el browser. Cuando éste lee
un fichero ASCII con extensión *.htm o *.html interpreta estas TAGs y
formatea el texto de acuerdo con ellas.

Todas las TAGs de HTML van encerradas entre los caracteres menor que ( <)
y mayor que ( >), como por ejemplo <HTML>. Además, la mayor parte de
ellas son dobles, en el sentido de que hay una TAG de comienzo y otra de
final; entre ambas está el texto afectado por dichas TAGs. La marca de final
es como la de comienzo, pero incluyendo una barrra (/). Por ejemplo, la marca
de final de <HTML> es </HTML>. De la misma forma, la TAG de final de
<P> es </P>, y así con otras TAGs.

<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>

<BODY>
...
</BODY>
</HTML>
Volver al inicio

Formato de párrafos

Así se escribe: Así se ve:


<P>Este es un ejemplo de cómo se
formatean los párrafos en lenguaje Este es un ejemplo de cómo se formatean
HTML.
En esta celda de la Tabla se los párrafos en lenguaje HTML. En esta
incluyen dos celda de la Tabla se incluyen dos párrafos
párrafos</P>
El resultado puede verse en la celda
<P>El resultado puede verse en la
celda vecina incluida en la columna
vecina incluida en la columna de la
de la derecha
derecha</P>
<P>Los párrafos se separan con un
espaciado
Los párrafos se separan con un espaciado
superior al correspondiente superior al correspondiente a una nueva
a una nueva línea. <BR> línea.
Para tener un espaciado más Para tener un espaciado más compacto
compacto puede utilizarse el Line Break, como en
puede utilizarse el Line Break,
como en este ejemplo.</P> este ejemplo.
Líneas horizontales:
<P>Líneas horizontales:</P>

<HR><HR WIDTH=80%><HR SIZE=4><HR


NOSHADE>

<P>Los párrafos pueden indentarse.

<BLOCKQUOTE>Block quote indenta un


párrafo. Se Los párrafos pueden indentarse.
Block quote indenta un párrafo. Se
deshace esta indentación con el fin deshace esta indentación con el fin
de la de la TAG Block quote,
como se ve en el ejemplo.
TAG Block quote,</BLOCKQUOTE>

como se ve en el ejemplo.</P>
<PRE>La TAG Preformatted permite La TAG Preformatted permite
respetar la forma respetar la forma
original original
en que se ha en que se ha

escrito el escrito el texto.


texto.</PRE>
<ADRESS> Escuela Superior de Ingenieros
<P>Escuela Superior de Ingenieros Industriales
Industriales Pº Manuel de Lardizábal, 13
<P>Pº Manuel de Lardizábal, 13 E-20009 San Sebastián
<P>E-20009 San Sebastián (Esto aparece al principio del documento, a la
</ADRESS> izquierda)

Volver al inicio

Formato de texto

Una idea importante de HTML es la de definir lo que se desea hacer (resaltar


una palabra o un párrafo, utilizar un espaciado constante, etc.), pero no decir
cómo se desea hacerlo, dejando que esta función la realice el browser de
acuerdo con sus posibilidades. Por ejemplo, se le puede decir al browser que
se quiere remarcar una palabra sin decirle que la ponga en bold; de ordinario
la remarcará poniéndola en bold, pero si el browser se está ejecutando en un
ordenador que no permite texto en bold, el propio browser buscará una forma
alternativa de remarcar esa palabra.

De todas formas, los autores quieren muchas veces determinar más en


concreto cómo va a aparecer su texto en la pantalla del browser. Además, cada
vez es más infrecuente ejecutar un browser que no tenga las amplias
posibilidades de formatear texto de Mac o Windows. La consecuencia es que
HTML se ha extendido y permite tanto definir de modo general la función del
texto como determinar en concreto el formato con que se debe representar. A
continuación se muestran algunos ejemplos de ambas formas de definir los
formatos.

Así se escribe: Así se ve:

<FONT SIZE="+1" COLOR="red"


FACE="Arial">
Define tipo de letra,
Define tipo de letra, tamaño y
color a tu gusto
tamaño y color a tu
</FONT>
gusto
<P>Una palabra o un fragmento de Una palabra o un fragmento de texto se
texto se
puede resaltar con el tag STRONG
puede resaltar con el tag STRONG o con el
o con el tag EM, que en la mayor tag EM, que en la mayor parte de los
parte de los browsers se browsers se corresponden
corresponden con bold e italic.
con <STRONG>bold</STRONG> e
<EM>italic</EM></P>
<P>En cualquier caso, también se
pueden utilizar los tags En cualquier caso, también se pueden
<B>bold</B> (B) e <I>italic</I> utilizar los tags bold (B) e italic (I).
(I).</P>
<P>Para escribir con una <TT>letra
de paso Para escribir con una letra de paso
constante (estilo teletipo)</TT> se constante (estilo teletipo) se
emplea la emplea la Tag TeleType.
Tag TeleType</P>
<P>Para que el texto
<BLINK>parpadee</BLINK>
Para que el texto parpadee se emplea la Tag
se emplea la TAG Blink.</P> Blink.
<P>Títulos:
<H1>1</H1><H2>2</H2><H3>3</H3>

<H4>4</H4><H5>5</H5><H6>6</H6></P>
Títulos: 123 456
<P>Alineados:</P>
Alineados:
<P ALIGN="LEFT">Izquierda</P>
Izquierda
<P ALIGN="RIGHT">Derecha</P>
Derecha
<P ALIGN="CENTER">Centrado</P> Centrado
</P>
Otros efectos:

Otros efectos: subrayado


<P><U>subrayado</U>
<P><STRIKE>tachado</STRIKE> tachado
<P><BIG>letra más grande que el
estándar</BIG> letra más grande que el estándar
<P><SMALL>letra más pequeña que el
estándar</SMALL> letra más pequeña que el estándar
<P>Texto tipo<SUB>subíndice</SUB>
<P>Texto tipo<SUP>superíndice</SUP> Texto tiposubíndice

Texto tiposuperíndice

Volver al inicio

Listas no ordenadas

Así se escribe: Así se ve:


<P>Las listas no ordenadas:
<UL> Las listas no ordenadas:
<LI>Van precedidas por "bullets"
<LI>Se entiende que no importa el
 Van precedidas por "bullets"
orden
<LI>Se utilizan con mucha  Se entiende que no importa el
frecuencia orden
</UL>  Se utilizan con mucha frecuencia

Volver al inicio

Listas ordenadas:

Así se escribe: Así se ve:

Las listas ordenadas: Las listas ordenadas:


<P>Las listas ordenadas:
<OL>
<LI>Van precedidas por números
1. Van precedidas por números
<LI>La numeración es automática 2. La numeración es automática
<LI>Son también muy utilizadas 3. Son también muy utilizadas
</OL>

Volver al inicio

Listas de definiciones:

Así se escribe: Así se ve:

<P>Las listas de definiciones:


Las listas de definiciones:
<DL> Primer término
<DT>Primer término Definición del 1er término
<DD>Definición del 1er término Segundo término
<DT>Segundo término
<DD>Definición del 2º término
Definición del 2º término
</DL>

Volver al inicio

Tablas

Las tablas son uno de los elementos más interesantes de HTML. Permiten, por
ejemplo, escribir texto en varias columnas, hacer listas de equivalencias,
tablas propiamente dichas, etc. Este documento es un ejemplo de las
posibilidades ofrecidas por las tablas.
Así se escribe: Así se ve:
<TABLE BORDER=1>
<TR><TD>celda (1,1)</TD><TD>celda celda (1,1) celda (1,2)
(1,2)</TD></TR>
<TR><TD>celda (2,1)</TD><TD>celda celda (2,1) celda (2,2)
(2,2)</TD></TR>
</TABLE>
<CENTER><TABLE BORDER=1>
<TR><TD>celda (1,1)</TD><TD>celda celda (1,1) celda (1,2)
(1,2)</TD></TR>
<TR><TD>celda (2,1)</TD><TD>celda celda (2,1) celda (2,2)
(2,2)</TD></TR>
</TABLE></CENTER>

Volver al inicio

Anclas

Las anclas son referencias que se emplean en el archivo con el fin de ser el
punto de destino de un link. En el archivo son invisibles pero al clicar sobre
una palabra señalada como link, la visualización de la página pasa a ser el
punto donde se había definido el ancla.
Así se escribe: Así se ve:
<P><A NAME "ancla">

Volver al inicio

Links

Los links son palabras diferenciadas en un archivo HTML, y tienen la función


de enviar al usuario a algún ordenador remoto, o a algún sitio de la página,
que esté señalada por un ancla. Los links forman lo que se llama hipertexto.
Así se escribe: Así se ve:
<P>Este link envía al Web de la Este link envía al Web de la Universidad
Universidad<P>
<A HREF="http://193.145.249.23">Al
Web</A> Al Web
Este link envía; al ancla
<P>Este link envía al ancla<P>
<A HREF="#ancla">Al ancla</A>
Al ancla

Volver al inicio
Inserción de imágenes

Un recurso que da mucha vida a una página hecha con HTML es la inserción
de elementos gráficos. La forma de insertar una imagen es la siguiente:
Así se escribe: Así se ve:

<IMG SRC="todo.gif">

Volver al inicio

Imágenes clicables

Se pueden unir los dos apartados anteriores, es decir, se puede crear una
imagen que a la vez sea un link. Al clicar sobre la imagen, ésta te enviará a un
documento o un ancla destino.
Así se escribe: Así se ve:

<P><A HREF="#ancla">
<IMG SRC="todo.gif">
</A>

Volver al inicio

Imágenes sensibles

Imágenes sensibles son un tipo de imágenes las cuales detectan la zona en la


que se ha clicado y según el punto realizan un link a una zona del documento
u a otra (o entre archivos). Hay que definir los puntos de la imagen y la zona a
la que hay que ir si se clica. Se pueden definir zonas rectangulares, circulares
y poligonales. El ejemplo crea dos zonas rectangulares definiendo los puntos
según las coordenadas del punto superior izquierdo y el del punto inferior
derecho.
Así se escribe: Así se ve:
<P><IMG USEMAP="#mapadirec"
SRC="mapa.gif">
<MAP NAME="mapadirec">
<AREA COORDS=0,0,47,46
HREF="http://193.145.249.23">
<AREA COORDS=47,0,96,46
HREF="#ancla">
</MAP>

Volver al inicio

Frames

Así se escribe: Así se ve:

<FRAMESET
ROWS="50%,50%,*">
<FRAME
SCR="ejemplo.htm">
<FRAME
SCR="ejemplo.htm">
</FRAMESET>

<FRAMESET
COLS="40%,60%">
<FRAME
SCR="ejemplo.htm">
<FRAME
SCR="ejemplo.htm">
</FRAMESET>
Volver al inicio

Formularios

Así se escribe: Así se ve:


<FORM>
Nombre: <INPUT NAME="nombre"> Nombre:
</FORM>
<FORM>
Nombre: <INPUT NAME="nombre"><P>
Nombre:
<INPUT TYPE="radio" NAME="boton"
CHECKED> boton radio 1
boton radio 1<P>
<INPUT TYPE="radio" NAME="boton"
CHECKED> boton radio 2
boton radio 2<P>
<INPUT TYPE="checkbox"
NAME="check"> checkbox
checkbox
</FORM>

Volver al inicio

Layers

Antes que nada, hay que decir que las layers sólo son compatibles
con Netscape Communicator por el momento. Así que si no es este tu
navegador, no verás esta parte como debería ser en la realidad. Las capas
permiten jugar con contenidos situados en capas distintas, escondiéndolos o
haciéndolos visibles, situandolos en la parte deseada de las ventanas... pero
con el handicap de la compatibilidad. Para browsers que no soportan layers,
está la tag pareada<NOLAYER>
Hay dos tipos de layers: las definidas por <LAYER> son posicionadas de una
forma absoluta. Las definidas por <ILAYER> son posicionadas con relación a
otra layer.

Así se escribe: Así se ve:


<LAYER NAME="uno"
VISIBILITY="HIDE"> Esta es la capa
uno </LAYER>
<LAYER NAME="dos" Esta otra es la capa dos
VISIBILITY="SHOW"> Esta otra es la
capa dos </LAYER>

A continuación se listan los atributos que soporta la tag pareada <LAYER>:


 Todo tipo de eventos de JavaScript. (Ver capítulo de eventos del tutorial
de JavaScript de la ESIISS)
 NAME: especifica el nombre de la capa para poder referirse a ella
desde JavaScript, por ejemplo.
 LEFT, TOP: indica la posición (izquierda y arriba) en la que empieza la
layer (si es una tag LAYER) o la posición relativa para las definidas
con ILAYER.
 PAGEX, PAGEY: especifica la posición relativa de la layer a la
ventana del documento
 SRC="nombrearchivo.ext" carga en la layer el arhivo especificado
(nombrearchivo.ext)
 Z-INDEX, ABOVE, BELOW: especifican en orden de
amontonamiento de las layers entre sí. Estos tres atributos son
mutuamente exclusivos, empléese sólo uno de ellos.
 WIDTH, HEIGHT: especifican la anchura y la altura de la layer.
Limitan el área en la que se muestra el contenido de la layer.
 CLIP=x1,y1,x2,y2 delimita el area visible (definida por el rectángulo
de las coordenadas indicadas) de la layer.
 VISIBILITY: SHOW hace la layer visible, HIDE la oculta.
 BGCOLOR: especifica el color de fondo de la layer. Por defecto, una
layer es transparente para que puedan verse las que están por debajo. Si
se pone color de fondo, no podrán verse las layers inferiores.
 BACKGROUND="archivo.ext" es lo mismo que BGCOLOR pero
poniendo como fondo la imagen del archivo.ext

Volver al inicio

Una plantilla de ayuda

Así se escribe: Así se ve:


<P>Texto aquí Texto aquí
<P>Texto aquí Texto aquí

Volver al inicio