2. html

Tema 1. HTML
Diseño y Programación para el Internet. PBM

HTML
I. Marcas o tags
Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc., y son
utilizadas para dar un tratamiento diferente al texto que se encuentre entre las marcas.

En HTML las marcas se delimitan con los signos < (inferior a) y > (superior a). Un texto
marcado tendrá por tanto este aspecto:

...texto normal <marca> texto afectado por la marca </marca> resto del texto...

Un ejemplo podría ser resaltar un texto en negrita, para ello se emplea la marca <B> y quedaría
de la siguiente forma:

...texto normal <B> texto en negrita </B> resto del texto...

II. Atributos de las marcas
Algunas marcas pueden admitir atributos, pudiendo tener cada uno de estos atributos un valor.
Este valor va entre comillas (") si dicho valor es alfanumérico.

<marca atributo1=numérico atributo2="alfanumérico">

Ejemplo:
<pre width=50>
<a href="/home/default.html">

III. Estructura de los documentos

1. Cabecera: La cabecera se emplea para facilitar información acerca del documento y
está delimitada por <HEAD> prólogo </HEAD>.
Dentro de la cabecera podemos destacar el título que indica el nombre del documento
<TITLE> </TITLE>.

<HTML>
<HEAD>
<TITLE> Bienvenido <TITLE>
</HEAD>
….Cuerpo del documento
</HTML>

2. Cuerpo: El resto del documento residirá entre las marcas <BODY> y </BODY>. Esta
es la estructura mínima que debe poseer todo documento HTML:
<HTML><HEAD><TITLE>Bienvenido a la guía rápida</TITLE></HEAD>
<BODY>
Documento...
</BODY>
</HTLM>

A continuación describiremos algunos elementos que pueden aparecer dentro del cuerpo.

3) Encabezado: Los encabezados se emplean para dividir los documentos en secciones o
más concretamente para marcar los títulos de esas secciones. Las marcas son del
tipo <H#> título </H#>, donde # puede ser un número cualquiera entre 1 y 6.

Página 1 de 21

Tema 1. HTML

Tamaño mayor <H1> Tamaño mayor</H1>
Tamaño menor <H6>Tamaño menor</H6>

4) Definición de bloques: Para definir y separar bloques de texto se emplean una serie de
marcas que definen párrafos, texto preformateado o bloques con significado especial
como direcciones o citas.

Marcas de bloques:
 <P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo,
necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las
marcas inicial y final son <P> y </P>.

Este elemento admite el atributo ALIGN, que puede tomar uno de los siguientes
valores:
 LEFT: Justifica el texto a la izquierda. (por defecto)
 RIGHT: Justifica el texto a la derecha.
 CENTER: El texto aparece centrado.

 <PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el
browser, respetando el formato con el que fue escrito en el fichero fuente HTML.

Ejemplo:
El resultado será:
<PRE> Esto es un texto preformateado, por tanto se
Esto es un texto preformateado, por tanto se respetan los espacios y los saltos de
respetan los espacios y los saltos de
carro,
carro, como podrán observar.
como podrán observar.
</PRE>

 <ADDRESS> empleada para indicar que un texto representa una dirección o una firma.
Generalmente se activa en cursiva y suele estar tabulado.

Ejemplo:
Esto dará como resultado:

<ADDRESS> Tekin Tontu
Tekin Tontu <BR> 77A Wellington Rd
77A Wellington Rd <BR> Auburn 2144, NSW
Auburn 2144, NSW <BR> Australia
Australia <BR> e-mail tekin@cis.com
e-mail tekin@cis.com <BR>
</ADDRESS>

 <BLOCKQUOTE> Sirve para representar párrafos tabulados por la izquierda o por la
derecha.

Ejemplo:

Texto 1, texto 1, texto 1, texto 1, texto 1.
<BLOCKQUOTE>
Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2,
texto 2, texto 2, texto 2, texto 2, texto 2, texto 2
</BLOCKQUOTE>

Página 2 de 21

Tema 1. HTML

El resultado será:
Texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2, texto 2.

 <BR> Este elemento solo tiene marca inicial e indica un salto de línea.
Ejemplo:
texto 1, texto 1. <BR>

Con esto tendremos como resultado:
Texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1, texto 1.

 <DIV> Este elemento se comporta de forma muy parecida al salto de línea, <BR>, y a
su vez admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o
sea, permite definir un bloque con los atributos de <P>, pero dejando tan solo un salto
de línea entre un bloque y otro.

Ejemplo:

<DIV ALIGN=LEFT>
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
</DIV>
<DIV ALIGN=RIGHT>
Texto justificado a la derecha, texto justificado
a la derecha, texto justificado a la derecha,
</DIV>
<DIV ALIGN=CENTER>
Texto centrado, texto centrado, texto centrado,
texto centrado</DIV>

Esto dará como resultado:
Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la izquierda.

Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la derecha.

Texto centrado, texto centrado, texto centrado, texto centrado

 <HR> Solo tiene marca inicial y se emplea para representar una línea horizontal. Se
puede cambiar la apariencia de dicha línea mediante los siguientes atributos:
 NOSHADE: Elimina el efecto de sombra de la línea.
 WIDTH: Permite definir la longitud de la línea.
 SIZE: Permite definir el grosor de la línea.

Ejemplos:
<HR NOSHADE>

<HR WIDTH=250 SIZE=3>

<HR WIDTH=250 SIZE=6>

Página 3 de 21

Tema 1. HTML

<HR NOSHADE WIDTH=400 SIZE=4>

5) Comentarios: Todo texto que empiece por <!...comentario...> será ignorado por el
browser, y por lo tanto no será visible. Esto sirve al autor del documento para comentar
su fichero fuente.


IV. Fondos y colores de texto

a) Fondos
Un cierto número de atributos de la marca BODY permiten controlar el color del fondo
de la ventana del browser, el color de los caracteres del texto, y finalmente el color de
los enlaces:

< BODY atributo1 atributo2 atributo3 ... atributoN >

 El atributo BGCOLOR: Este atributo permite escoger un color para el fondo de la
página <BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son valores
hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de
los colores rojo, verde y azul.
 El atributo BACKGROUND: Este atributo especifica una imagen residente en el
servidor la cual se utilizará como fondo de página.

<BODY BACKGROUND="fichero_gráfico.gif">

 El atributo TEXT: Permite controlar el color del texto estándar, es decir, todo texto que
no especifique un enlace.

<BODY TEXT="#rrggbb">

 Los atributos LINK, VLINK y ALINK: Controlan el color de los enlaces:
LINK color del enlace que aún no ha sido visitado.

<BODY LINK="#rrggbb">

ALINK: color muy fugaz que aparece cuando se hace clic sobre el enlace
<BODY ALINK="#rrggbb">

VLINK es el color de un enlace que ya ha sido visitado
<BODY LINK="#rrggbb">

<BODY LINK="blue" ALINK="red" VLINK="navy">

b) Letras

1. Título <Hn>: Es la marca que asigna el tamaño de los caracteres, donde n varía de 1 a
6. Los más grandes tienen valor 1 y los más pequeños valor 6. El texto entre estas
marcas se trata en negrita.

Página 4 de 21

Tema 1. HTML

Cabecera 1 <h1>

Cabecera 2 <h2>

Cabecera 3 <h3>
Cabecera 4 <h4>

<h5>
Cabecera 5
Cabecera 6 <h6>

2. Tamaño de la letra y color <FONT>: La marca FONT permite actuar sobre bloques
distintos de caracteres situados en la misma línea.

a) El atributo TYPE: Especifica el tipo de letra:
a. Times New Roman
b. Windsor
c. Algerian
d. MS Sans Serif
e. Roman
f. Arial
g.  (WingDings)
b) El atributo SIZE: Regula la altura de los caracteres (1 a 7).

Tamaños: 1 2 3 4 5 6765432 1

c) El atributo COLOR: Especifica el color de los caracteres.

CO LO RE S . D E . L ET RA S
Ejemplo:
<font size=3 color=#008000> texto... <font>

3. Estilo Físico o estilo de los caracteres

Negrita <b>
Cursiva <i>
Subrayado <u>
Resaltado <em>
Destacado <strong>
Código <code>
Citas <cite>
Máquina de escribir <kbd>
Ejemplos <samp>
Teletipo <tt>
Variables <var>
Negrita y cursiva <b><i>

Página 5 de 21

Tema 1. HTML

4. Estilos Lógicos , estilo de párrafo
<CITE> Cita
<CODE> Código fuente
<DFN> Definido
<EM> Enfatiza
<KDB> Palabra clave
<SAMP> Ejemplo
<STRONG> Resalta
<VAR> Variable

5. Combinación de tamaño y estilo: Todo browser trabaja bajo el efecto de sólo un par
cerrado de marcas.

Ejemplo:
<i>
<font size=5>
<b>Hola,</b> cómo
Hola, cómo estás?
<font size=6> estás? </font>
</font>
</i>

V. Listas

Las listas se utilizan para dividir el documento así como para efectuar numeraciones de objetos,
pero la diferencia con los procesadores de texto es que no permite la numeración automática
para niveles jerárquicos diferentes:
1. Ficheros de sonido
1. Ficheros HTML 1.1 Ficheros WAV
2. Ficheros de texto 2. Ficheros de imágenes
3. Ficheros de imágenes 2.1 Ficheros GIF
2.2 Ficheros BMP
Es posible automáticamente...
No es posible automáticamente...

HTML define varios tipos de listas:

 Listas sin orden, sin numeración: <UL> , <LI>
 Listas ordenadas, con numeración: <OL> , <LI>
 Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
 Listas de menú , similares a las listas sin orden: <MENU> , <LI>
 Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>

1. Lista de definición DL, DT, DD: El elemento DL abre una lista descriptiva. Define el
inicio de la lista y englobará otras dos marcas (DT y DD) cuya función es caracterizar,
designar cada uno de los elementos, la parte definición y el propio elemento.
El atributo COMPACT asocia a la marca DL (<DL COMPACT>) permitirá al browser
mostrar en la misma línea el elemento y la primera línea del bloque.

Ejemplo:

Página 6 de 21

Tema 1. HTML

Código correspondiente:
ASCII
juego de caracteres que asigna valores <dl compact>
numéricos estándar a las letras, cifras y <dt>ASCII<dd> juego de caracteres que asigna
signos de puntuación. valores numéricos estándar a las letras, cifras y
signos de puntuación.
FUENTE Conjunto de estilos que posee una
categoría de caracteres (negrita, <dt>FUENTE<dd> Conjunto de estilos que posee
cursiva...) una categoría de caracteres (negrita, cursiva...)
</dl>

2. Listas regulares LI,UL,OL :
a) <LI> Esta marca precede a cada objeto de la lista.
La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es
común a las denominadas listas regulares. La sintaxis general de estas listas
será:

<marca de comienzo>
<li> Primer elemento de la lista
<li> Segundo elemento de la lista
<li> ...
<marca de cierre>

b) <UL> Permite generar listas no ordenadas, cada uno de los elementos de la listas irá
precedido por un símbolo que puede variar según el nivel de anidamiento de la lista.

Ejemplo de lista no ordenada <H3>Ejemplo de lista no ordenada</H3>
<UL>
 Fichero HTML <LI>Fichero HTML</LI>
<LI>Fichero de imagen</LI>
 Fichero de imagen
<LI>Fichero de sonido</LI>
 Fichero de sonido <LI>Fichero de vídeo</LI>
 Fichero de vídeo <LI>Fichero de ejemplo</LI>
 Fichero de ejemplo </UL>

Los puntos gruesos se pueden cambiar usando el atributo TYPE con tres
valores (el valor por defecto es DISC).

Con el valor CIRCLE se verá:
o Primera línea <UL TYPE=CIRCLE>
o segunda línea <LI>Primera línea
<LI>Segunda línea
</UL>

También puede usarse el valor SQUARE. Así:
 Primera línea <UL TYPE=SQUARE>
 segunda línea <LI>Primera línea
<LI>Segunda línea
</UL>

c) <OL> Esta marca se utiliza para listas ordenadas en las que cada marca LI
incrementa el número que se visualizará delante del elemento de la lista.

Ejemplo de lista ordenada:
Código correspondiente:
1. Fichero de imagen
2. Fichero de sonido
<ol>
3. Fichero de video
<li>Fichero de imagen</li>

Página 7 de 21

Tema 1. HTML

<li>Fichero de sonido</li>
<li>Fichero de video</li>
<ol>

Las listas ordenadas no sólo se pueden ordenar con números. También se
pueden utilizar letras y numeración romana tanto en mayúsculas como
minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los
siguientes valores:

TYPE=1 (por defecto) para números,
TYPE=A Para letras mayúsculas,
TYPE=a Para letras minúsculas,
TYPE=I Para numeración romana en mayúsculas,
TYPE=i Para numeración romana en minúsculas.

Esto es una lista ordenada con letras mayúsculas: <OL TYPE=A>
<LI>Primera línea
A. Primera línea <LI>Segunda línea
B. Segunda línea <LI>Tercera línea
C. Tercera línea <LI>Cuarta línea
D. Cuarta línea </OL>

Esto es una lista ordenada con letras minúsculas:
<OL TYPE=a>
<LI>Primera línea
a. Primera línea
<LI>Segunda línea
b. Segunda línea
<LI>Tercera línea
c. Tercera línea
<LI>Cuarta línea
d. Cuarta línea
</OL>

Esto es una lista ordenada con numeración romana
en mayúsculas: <OL TYPE=I>
<LI>Primera línea
I. Primera línea <LI>Segunda línea
II. Segunda línea <LI>Tercera línea
III. Tercera línea <LI>Cuarta línea
IV. Cuarta línea </OL>

Esto es una lista ordenada con numeración romana
en minúsculas: <OL TYPE=i>
<LI>Primera línea
i. Primera línea <LI>Segunda línea
ii. Segunda línea <LI>Tercera línea
iii. Tercera línea <LI>Cuarta línea
iv. Cuarta línea </OL>

En algunos casos puede interesarnos que la lista no comience por el número 1
(por ejemplo si es una lista que continúa en otra página). Se puede conseguir
con el atributo START combinado con TYPE.
Esto es una lista ordenada con letras mayúsculas y
que comienza por la E: <OL TYPE=A START=5>
<LI>Primera línea
E. Primera línea <LI>Segunda línea
F. Segunda línea <LI>Tercera línea
G. Tercera línea <LI>Cuarta línea
H. Cuarta línea </OL>

Página 8 de 21

Tema 1. HTML

El número que se pone en el atributo START indica en que número o letra
comenzará la lista. La E es la quinta letra.

3. Listas anidadas
Código:

<ul>
<li>Ficheros HTML
 Ficheros HTML <ol>
1. Ficheros de prueba <li>Ficheros de prueba
 prueba1.html <ul>
 prueba2.html <li>prueba1.html</li>
 prueba2.html <li>prueba2.html</li>
2. Ficheros de ejemplos <li>prueba2.html</li>
3. Ficheros del servidor </ul>
 Ficheros de imágenes <li>Ficheros de ejemplos
 Ficheros de sonido <li>Ficheros del servidor
 Ficheros de vídeo </ol>
<li>Ficheros de imágenes
<li>Ficheros de sonido
<li>Ficheros de vídeo
</ul>

4. Listas de Directorio
Las listas de directorio son similares a las listas sin orden. En el Netscape no se ve
diferencia entre una y otra. La única diferencia es la sintaxis del código donde en
vez de utilizar la marca <UL> se utiliza la marca <DIR>.

La marca <DIR> admite los mismos atributos que la marca <UL>.

Ejemplo de lista de directorio <H3>Ejemplo de lista directorio</H3>
<DIR>
<LI>Español</LI>
 Español <LI>Inglés</LI>
 Inglés <LI>Francés</LI>
 Francés <LI>Alemán</LI>
 Alemán </DIR>

5. Listas de Menús
Las listas de menú son similares a las listas sin orden. En el Netscape no se ve
diferencia entre una y otra. La única diferencia es la sintaxis del código donde en
vez de utilizar la marca <UL> se utiliza la marca <MENU>.

La marca <MENU> admite los mismos atributos que la marca <UL>.

Ejemplo de lista de menu <H3>Ejemplo de lista directorio</H3>
<MENU>
<LI>Opción 1</LI>
 Opción 1 <LI>Opción 2</LI>
 Opción 2 <LI>Opción 3</LI>
 Opción 3 </MENU>

Página 9 de 21

Tema 1. HTML

VI. Hiperenlaces

El elemento <A> se utiliza para definir los enlaces hipertexto de los documentos HTML. Este
elemento nunca se utiliza solo, por tanto siempre vendrá acompañado por, al menos, uno de sus
dos atributos principales:

 El atributo HREF que define un ancla de partida. Mediante el atributo HREF desde el
fichero de partida se indicará el documento y la posición dentro de dicho documento a
la que se quiere acceder:
<A HREF="documento#etiqueta"> Zona activable </A>

 El atributo NAME que define un ancla de llegada en el documento destino asignándole
un nombre o etiqueta:

<A NAME="etiqueta"> Zona no activable </A>

 Además permite El atributo TARGET para ordenar la apertura de una nueva ventana
del browser con la página indicada por HREF.

Ejemplo:

<A HREF="indice.htm" TARGET="ventana2">
Nueva ventana
</A>

Un ancla, por lo tanto, sirve para especificar la partida y la llegada de un enlace hipertexto
( <A> ).

1. El atributo HREF, ancla de partida hacia un enlace externo: Crea un enlace hacia un
servidor situado en algún punto de Internet, o hacia un documento propuesto por dicho
servidor. La marca especifica el atributo HREF cuyo valor precisa el URL del
documento a recuperar:

zona_activable

<A HREF="url_de_destino"> zona_activable</A>

2. El atributo HREF, ancla de partida a un enlace interno: Crea un enlace a un punto
determinado del fichero en ejecución. Para ello hay que colocar un ancla activa (ancla
de partida) y un ancla inactiva (ancla de llegada).

El ancla de partida se define de la siguiente forma:
zona_activable_con_atributos_visuales

<A HREF=#etiqueta>zona_activable_con_atributos_visuales</A>

3. El atributo NAME, ancla de llegada: Define el ancla de llegada, lugar que se podrá
acceder haciendo un clic sobre un ancla de partida.

zona_no_activable_sin_atributos_visuales

<A NAME="label">zona_no_activable_sin_atributos_visuales</A>

Página 10 de 21

Tema 1. HTML

VII. Tablas

La estructura de una tabla se define mediante:

 una marca de inicio de la tabla (TABLE),
 una marca de comienzo de una nueva línea (TR) y
 una marca de comienzo de una celda (TD).

Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente. Esta
estructura es bastante simple y muy fácilmente modificable.

Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas
(CAPTION).

Una celda puede contener algunos de los siguientes elementos:

 texto
 listas
 otras tablas
 imágenes
 enlaces de hipertexto
 elementos de formulario

1. La marca <TABLE>: Una tabla se define entre las marcas <TABLE> y </TABLE>.
Esta primera marca regula la presentación general de la tabla mediante tres atributos:

a) BORDER define el grosor del marco exterior
b) CELLPADDING define el espacio alrededor del texto de una celda
c) CELLSPACING define el espacio entre celdas
d) WIDTH define la anchura de la tabla relativa a la anchura de la ventana del browser.
e) HEIGTH: Define el alto de la tabla, bien en porcentaje o unidades.

Ejemplo:
<TABLE CELLPADDING=10 CELLSPACING=6 BORDER=6>
<TR><TD>A</TD>
A B <TD>B</TD>
</TR>
<TR><TD>C</TD>
C D <TD>D</TD>
</TR>
</TABLE>

2. La marca <TR>: Las marcas que definen una nueva fila son <TR> y </TR> que
admiten los siguientes atributos de alineación del texto en el interior de todas las celdas
de la fila:
 VALIGN (alineación vertical) que puede tomar los valores:
o TOP coloca el texto en la parte superior de la celda.
o BOTTOM coloca el texto en la parte inferior de la celda.
o MIDDLE en el centro de la celda.
 ALIGN (alineación horizontal) que puede tomar los valores:
o RIGHT coloca el texto a la derecha de la celda.
o LEFT coloca el texto a la izquierda de la celda.
o CENTER centra el texto en la celda.

Página 11 de 21

Tema 1. HTML

Ejemplo:
Vocales ...
La mas usada a <TR ALIGN="center">
<TD>a</TD>
La segunda e <TR VALIGN="top">
<TD>e</TD>
<TR ALIGN="right" VALIGN="bottom">
La tercera i <TD>i</TD>

3. La marca <TD>: Es el elemento de inicio de una columna. Puede completarse con los
atributos VALIGN y ALIGN que será entonces prioritarios sobre los mismos valores
definidos en la marca <TR>.

Dos atributos suplementarios, COLSPAN y ROWSPAN permiten generar celdas cuya
superficie es un múltiplo de la celda elemental. La matriz de la tabla que define el
número de celdas elementales se calcula por el número de líneas de la tabla (número de
instrucciones TR), multiplicado por el número de celdas (número de celdas TD) de la
línea que define más celdas (mayor número de TD).

El número de celdas por línea de la tabla se calcula sobre la línea que define el mayor
número de celdas.
El último atributo de TD es NOWRAP que impide dividir el texto de la celda en varias
líneas.

Ejemplo:
...
<TR ALIGN="left">
Comida Bebida Postre <TD ALIGN=left>A</TD>
A B C <TD ALIGN=center>B</TD>
<TD ALIGN=right>C</TD>
...
4. La marca <TH>: Esta marca funciona de forma similar a TD admitiendo los mismos
atributos pero se considera como una marca de título de una celda. Automáticamente
centra el texto y lo pone en negrita.

Ejemplo:
<TABLE BORDER>
<TR>
<TH>Artículo</TH><TH>Referencia</TH><TH>Precio</TH>
Artículo Referencia Precio <TR>
Libreta 17 120 <TD>Libreta</TD>
<TD>17</TD>
<TD>120</TD>
</TABLE>

5. La marca <CAPTION>: Esta marca permite poner un título encima (atributo
ALIGN=TOP) o debajo (atributo ALIGN=BOTTOM) de la tabla.

Página 12 de 21

Tema 1. HTML

Ejemplo:
<TABLE BORDER>
<TR>
<TH>Artículo</TH><TH>Referencia</TH><TH>Precio</TH>
Artículo Referencia Precio <TR>
<TD>Libreta</TD>
Libreta 17 120
<TD>17</TD&lgt;
Provisiones <TD>120</TD>
<CAPTION ALIGN=bottom>
<B>Provisiones</B></CAPTION>
</TABLE>

VIII. Imágenes

1. La marca <IMG>
<IMG> es la marca que permite incluir una imagen. Esta marca irá siempre completada
por el atributo SRC que permite dar la dirección del fichero gráfico que contiene la
imagen:

<IMG SCR=/directorio/subdirectorio/nombre_del_fichero:gráfico>

El valor del atributo SCR permite especificar un URL y es por tanto correcto encontrar
imágenes definidas como sigue:

<IMG SCR="http://www.mipagina.mx/imagenes/flores/rosa.gif">

2. Alineación de imágenes: La marca <IMG> admite el atributo ALIGN que permite
situar la imagen en relación a la línea de texto actual y puede tomar los siguientes
valores:

a) TOP para alinear la parte superior de la imagen.
b) MIDDLE para alinear el centro de la imagen.
c) BOTTOM para alinear la base de la imagen.

Ejemplo:
Lo mas
nuevo!!!
<IMG SCR="new.gif" align=top> Lo mas nuevo!!!

Lo más
<IMG SCR="new.gif" align=middle> Lo mas nuevo!!!
nuevo!!!

<IMG SCR="new.gif" align=bottom> Lo mas nuevo!!!
Lo más
nuevo!!!

3. El atributo ALT: Hay ciertos browser como por ejemplo el Lynx que están orientados a
terminales no gráficos en los que no se verá la imagen incluida en un documento
HTML. Para que en este tipo de browser el documento tenga la misma información se
añade el atributo ALT que contiene un texto alternativo a la imagen.

<IMG SCR="foto1.gif" ALT="Foto de mi fiesta">

Página 13 de 21

Tema 1. HTML

4. Las imágenes externas: Este tipo de imágenes no aparecen en la pantalla cuando se
carga la página sino que se crea un enlace hipertexto cuyo extremo podrá ser: una
imagen GIF, JPEG, BMP, XBM u otra.

Ejemplo:
Da click aquí para ver las imágenes mas nuevas

Da <A HREF="images/new.gif"> click aqui </A> para ver las imágenes mas nuevas

5. Las imágenes como anclas: Se puede reemplazar el texto de un ancla por una marca
que define una imagen. En este caso la imagen tiene un borde de color para indicar que
se trata de un enlace hipertexto sobre el que se puede hacer un clic.

Ejemplo:

<A HREF="images/new.gif"> <IMG SCR=""images/info.gif> </A>

IX. Frames

Los frames (en inglés frame = cuadro, bastidor, marco o panel) es un elemento implementado
por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por
tanto con contenidos distintos, aunque puedan estar relacionados.

Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla.
Sin embargo, no hay que confundir paneles con tablas ya que existe una gran diferencia; en el
caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en
el caso de los frames cada zona de la pantalla es un documento HTML propio.

El elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de
dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con
FRAMESET.

La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no
resulte opaca a ellos se utilizará el elemento <NOFRAMES> que permite ofrecer un texto
alternativo en entorno normal.

Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el
atributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace de
hipertexto.

1. FRAMESET: Este elemento sustituye al elemento <BODY> y permite dividir
una zona en subzonas, verticalmente, u horizontalmente. Esta marca posee dos
atributos:
 ROWS: Se utiliza para dividir la zona en subzonas horizontales. La
sintaxis es:

ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

Página 14 de 21

Tema 1. HTML

ROWS es una lista de valores enteros separados por comas. El número
de elementos de la lista corresponde al número de subzonas
horizontales a crear.

Cada uno de los valores de la lista puede darse según uno de los tres
formatos siguientes, donde n es un entero:

n: indica la altura de la subzona en píxels.

n%: indica la altura de la subzona expresada en porcentajes del tamaño
de la zona madre.

n*: n es opcional. El carater * indica al browser que debe dar a la zona
todo el espacio aún disponible.

 COLS: Se utiliza para dividir la zona en subzonas verticales. La
sintaxis es igual que en el atributo ROWS.

ROWS="altura_zona_1, altura_zona_2,...,altura_zona_n"

Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos
subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.

<FRAMESET ROWS="25%,25%,50%">...<FRAMESET>
<FRAMESET ROWS="*,*,2*">...<FRAMESET>

2. FRAME: Es la marca utilizada para caracterizar las subzonas definidas
mediante la marca <FRAMESET>. Esta caracterización se realiza mediante los
siguientes atributos:
 SCR: Indica el URL del documento que debe mostrarse en esa zona. Si
el atributo no se indica, entonces la zona estará vacía.

SCR="url"

 NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse
en el destino de cualquier enlace de hipertexto. La sintaxis del atributo
es:

NAME="nombre_de_la_zona"

 MARGINWIDTH: Se utiliza para precisar el número de píxels entre los
bordes izquierdo y derecho de la zona y el documento HTML a
visualizar, en definitiva marca el margen izquierdo. La sintaxis es:

MARGINWIDTH="n"

 MARGINHEIGHT: Se utiliza para precisar el número de pixels entre
los bodes superior e inferior de la zona y el documento HTML a
visualizar. La sintaxis es:

MARGINHEIGHT="n"

Página 15 de 21

Tema 1. HTML

 SCROLLING: Indica si la zona debe poseer una barra de
desplazamiento (SCROLLING="yes"), si no debe contar con ella
(SCROLLING="no") o si esta elección se deja en manos del browser
(SCROLLING="auto"). La sintaxis es:

SCROLLING="yes/no/auto"

 NORESIZE: Indica al browser que no debe permitir que el usuario
modifique el tamaño de la zona. Cuando este atributo no se precisa es
posible deformar una zona desplazando su frontera mediante el ratón.

3. NOFRAMES: Esta marca indica a todo browser incapaz de gestionar los
frames el texto que debe presentar al usuario en lugar de los paneles. Dicho
texto irá entre las marcas <NOFRAMES> y </NOFRAMES>.

4. El atributo TARGET: Afecta a las marcas que caracterizan los enlaces de
hipertexto, en particular a las marcas <A> y <FORM>. TARGET permite
precisar el nombre de la zona que debe recibir el documento correspondiente al
enlace. Por ejemplo:

<A HREF="/dossier.html" TARGET="zonadossier"> Ver el dossier </A>

El atributo TARGET existe para indicar al browser que, en respuesta a un clic,
debe mostrar el documento dossier.html en el panel cuyo nombre es
"zonadossier". De igual modo, el formulario definido por:

<FORM ACTION="cgi_bin/test" TARGET="zonascript" METHOD="POST">
...
</FORM>

Mostrará sus resultados en el panel cuyo nombre es "zonascript".

El atributo TARGET puede tener tres valores diferentes:

 Un valor que corresponde al nombre de un panel existente. El
documento asociado al enlace de hipertexto se muestra entonces en el
panel en cuestión.
 Un valor que no corresponde a ninguno de los paneles existentes. El
browser crea entonces una nueva ventana y muestra el documento. Esta
nueva ventana se considera como un panel con el atributo TARGET del
origen de su creación.

 TARGET puede tomar uno de los siguientes cuatro valores:
o _blank, indica al browser que debe crear una nueva ventana
con el fin de mostrar el documento.
o _self, indica que el documento se cargará en la misma zona
donde se encuentra el enlace de hipertexto.
o _top, indica al browser que suprima todos los paneles
existentes y visualice el documento de modo normal.

Página 16 de 21

Tema 1. HTML

o _parent, indica al browser que visualice el documento
ocupando toda la superficie de la zona en la que se ha
visualizado el documento que contiene el enlace.

Ejemplos:

Un frame básico. Sintaxis general

En general, todas las páginas que contengan un frame deberán ser más o menos así:
<HTML>
<HEAD>
<TITLE> Mi titulo ></TITLE>
</HEAD>

<FRAMESET COLS=*,*>
<NOFRAMES>
<BODY>
No soporta frames. Pulse
<A HREF="indice.htm">aqui</A>
para volver.
</BODY>
</NOFRAMES>

<FRAME SRC="doc_a.htm" >
<FRAME SRC="doc_b.htm" >

</FRAMESET>

</HTML>

Un frame de 3 áreas verticales (COLS)

Se vería así:
Y se escribiría; así:
A B C <FRAMESET COLS=30%,20%,50%>
<FRAME SRC="doc_a.htm">
<FRAME SRC="doc_b.htm">
<FRAME SRC="doc_c.htm">
</FRAMESET

Un frame de 3 áreas horizontales (ROWS)

Se vería así:
Y se escribiría así:
A <FRAMESET ROWS=25%,25%,50%>
<FRAME SRC="doc_a.htm">
B <FRAME SRC="doc_b.htm">
C <FRAME SRC="doc_c.htm">
</FRAMESET>

Un frame combinado de un área vertical y dos horizontales. El frame A, no podrá ser
redimensionado (NORESIZE).

Se vería así:

Página 17 de 21

Tema 1. HTML

<FRAMESET COLS=20%,*>
<FRAME SRC="doc_a.htm" NORESIZE>
B <FRAMESET ROWS=40%,*>
A <FRAME SRC="doc_b.htm">
C <FRAME SRC="doc_c.htm">
</FRAMESET>
</FRAMESET>

Un frame con dos áreas verticales. Una normal, la otra con márgenes forzados para el
texto (MARGINWIDTH MARGINHEIGHT)

Se vería así:
<FRAMESET COLS=50%,50%>
AA <FRAME SRC="doc_a.htm">
AAAA <FRAME SRC="doc_a.htm"
AA MARGINWIDTH=50
MARGINHEIGHT=50>
</FRAMESET>

X. Formularios

Un formulario es una plantilla para representar un conjunto de datos y generar en la pantalla
cuadros de diálogo con el lector. Se podrán tener zonas en las que se introducirá un texto,
casillas de verificación, listas de selección, etc.

Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas junto
con servidores, ya que las acciones asociadas son programas (generalmente scripts de CGI).
Estos programas deben funcionar en un servidor al que se le proporcionan los datos de un
formulario para ser procesados.

1. Declaración del formulario <FORM>: La marca <FORM> y </FORM> definen un
formulario y entre ellas se situaran todas las marcas que generan los diversos elementos
que componen un formulario. Esta marca debe ir acompañada obligatoriamente por dos
atributos:
a. El atributo METHOD: está dirigido al programador que codifica el script. Al
que puede darse el valor POST o el valor GET que define el modo de
transferencia de los datos hacia el script.

 METHOD=GET: La información que se manda por este método es anexada
al final de la acción que fue solicitada. El programa CGI recibirá la
información en un ambiente de variables denominado QUERY_STRING

 METHOD=POST: Este método transmite la información antes del URI
solicitado. Los resultados se reciben en forma codificada en un archivo
STDIN. Es necesario saber cuanta información se debe leer de este archivo
utilizando un entorno de variables llamado CONTENT_LENGTH.

b. El atributo ACTION: que define el URL de un programa (script) encargado de
tratar los datos adquiridos desde el formulario.

<FORM METHOD=tipo_de_metodo ACTION=URL_del_script>

Página 18 de 21

Tema 1. HTML

<FORM METHOD="pot" ACTION=" cgi_bin/inscripcion">
Todas las marcas que se definirán tienen los siguientes atributos comunes:
c. El atributo NAME: define el nombre que permitirá al script identificar el origen
de los datos. Este nombre debe ser único.

NAME=nombre_de_la_variable_asociada

d. El atributo VALUE: Definido para un campo de:

 TEXTO: permite definir el contenido del campo.
 Botón SUBMIT: indica el texto a escribir en el botón.
 Botón RADIO, Botón CHECKBOX: valor asociado al botón cuando está
pulsado.
 NAME identifica el bloque de botones

2. Campos de entrada <INPUT>: La marca <INPUT> servirá para definir campos para
entrar un texto y botones que permiten escoger opciones.

Ejemplo:

Definir una zona de entrada de texto simple.

< input name="identidad" >

a) El atributo TYPE asociado a la marca INPUT permite la selección del elemento de
entrada. Puede tomar los siguientes valores:
 TEXT: es la opción seleccionada por defecto. Define una zona de
entrada de texto simple. El texto definido en VALUE aparecerá en
dicha zona, para poder ser completado o modificado por el usuario.

<form>
Champiñones
<input type="text" value="Champiñones">
</form>

 SUBMIT: desencadena el envío del formulario hacia el script; el texto
definido en value se escribirá en el botón:

<form>
Salida
<input type="submit" value="Salida">
</form>

 RESET: permite borrar los datos ya entrados:
<form>
Borrar
<input type="reset" value="Borrar">
</form>

 PASSWORD: permite entrar una palabra clave de forma confidencial:

Página 19 de 21

Tema 1. HTML

<form>
<input type="password" name "pwd">
</form>

 CHEKBOX: crea un bloque de botones que permiten una selección
múltiple de opciones:
<form>
Macintosh <input type="checkbox" name="micro" value="mac">Macintosh
<input type="checkbox" name="micro" value="pc">PC
PC
</form>

 RADIO: crea un bloque de botones que permiten una selección
exclusiva entre varias opciones:

<form>
<input type="radio" name="media" value="cd" checked>CD-ROM
CD-ROM <input type="radio" name="media" value="dk">Disquete
</form>
Disquete

 HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin
que aparezca nada en la pantalla

<input type="hidden" name=nombre_de_variable value=valor_de_la_variable>

3. Campos de selección <SELECT>: La marca <SELECT> permite generar listas de
selección simple o de selección variable. Se programa con una lista en la que los ítems
se especifican mediante la marca <OPTION>.

La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está
ausente, la lista se interpreta como un menú desplegable (pop-list). En caso contrario la
lista se visualiza en una ventana con barra de desplazamiento. El valor dado entonces al
atributo SIZE da entonces el número de líneas visibles en la ventana. La opción de
selección múltiple se deriva de la presencia del atributo MULTIPLE.

Ejemplos:
Menú despegable:
<form>
<select NAME="sede">
<option>Entrada indirecta
Entrada directa
<option>Entrada lateral
<option SELECTED>Entrada directa
</select>
</form>

Ventana con barra de desplazamiento: ( con opción de selección múltiple )
<form>
<select MULTIPLE NAME="lenguaje" SIZE="3">
Ada
<option SELECTED>Ada
C++
Cliper
<option>C++
<option>Cliper
<option>Pascal
<option>Fortran

Página 20 de 21

Tema 1. HTML

<option>Cobol
</select>
</form>

4. Area de texto <TEXTAREA>: La marca <TEXTAREA> permite crear una ventana con
barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El
valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de
esta ventana.

Ejemplo:

<form>
<textarea name="comment" rows=5 cols=40>
Introduzca aquí sus comentarios
</textarea>
</form>
Estas líneas de código muestran la siguiente ventana:

XI. Símbolos

1. Símbolos mas usados
& &
< <
> >
" "

2. Otros símbolos
á á © © &#182 ¶
é é « « · ·
í í ¬ ¬ ¸ ¸
ó ó  ¹ ¹
ú ú ® ® º º
¡ ¡ ¯ ¯ » »
¢ ¢ ° ° ¼ ¼
£ £ ± ± ½ ½
¥ ¥ ² ² ¾ ¾
¦ ¦ ³ ³ ¿ ¿
§ § ´ ´ × ×
¨ ¨ µ µ ÷ ÷

Página 21 de 21

2. html

Más contenido relacionado

La actualidad más candente (19)

Similar a 2. html (20)

Último (20)

2. html