GUÍA I

HTML

PROFESOR: LUIS SÁNCHEZ

1
Conceptos básicos

Internet

Internet es una red de computadoras que se encuentran interconectadas a nivel mundial para
compartir información. Se trata de una red de equipos de cálculo que se relacionan entre sí a través
de la utilización de un lenguaje universal.
El concepto Internet tiene sus raíces en el idioma inglés y se encuentra conformado por el vocablo
inter (que significa entre) y net (proveniente de network que quiere decir red electrónica).
Para que la información fluya a través de la red existe una serie de normas preestablecidas en la
comunicación; así es del caso del protocolo TCP/IP (Transmission Control Protocol/Internet
Protocol)
World Wide Web
Generalmente conocida como la Web, es un sistema de documentos de hipertexto vinculados
accesibles por Internet. Usando un programa conocido como navegador Web, se pueden ver
páginas que pueden contener textos, imágenes, medios continuos como video o música y casi
cualquier elementos multimedia de hoy en día.
Uno de los grandes aciertos del sistema fue la conexión entre las páginas a través de hipervínculos.
Esto permite hacer un recorrido no lineal entre los documentos, conocido como navegación.

Historia de HTML

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, propuso diseñar
un sistema de unificación del acceso a todos los datos que poseía el Centro Europeo para la
Investigación Nuclear (CERN), tomando como idea precursora a un proyecto jamás materializado
llamado Memex. Ideado por Vannevar Bush en 1945, consistía en un dispositivo que almacenaría
documentos de todo tipo que serían consultado y editados a través de una especie de teclado con
palancas.
De esta manera, se comenzó a desarrollar una plataforma de tipo hipertexto y un protocolo de
comunicación que permitiera la transferencia de la información, denominado HTTP (Hyper Text
Transfer Protocol), que permitiría a los científicos del CERN, poder consultar cualquier
información, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio
centro, como en los ordenadores de las diferentes instituciones que colaboran con el CERN.
2
 Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la
informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con
los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas
de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.
Finalizado el desarrollo de su sistema de "hipertexto", este alcanzo tanto éxito que se
comenzó a definir un lenguaje para la creación de documentos estructurados que se le dio el nombre
de HTML.
Tim Berners-Lee junto al ingeniero de sistemas Robert Cailliau, presentaron la propuesta
ganadora llamada WorldWideWeb (W3).en una convocatoria organizada para desarrollar un
sistema de "hipertexto" para Internet.
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre
"HTML Tags" (Etiquetas HTML)
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por
parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances
significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios)
ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en
estándar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el
22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es
el primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de estandarización
llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de
1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los
últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que
fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación
original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre
sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir
pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas
diseñadas, tablas complejas y mejoras en los formularios.

3
 La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se
denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que
no incluye novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y
el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las
empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en
HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext
Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer
borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman
el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C
decidió retomar la actividad estandarizadora de HTML.
Actualmente se espera la estandarización de HTML5, el cual se ha pronosticado su
lanzamiento oficial en el 2014; sin embargo ya en el mercado existen versiones no oficiales en
periodos de pruebas, pero que ya muchas empresas han adoptado.

FUNCIONAMIENTO DE UN AMBIENTE WEB

Servidor
Cliente Nube de
internet

TCP/IP

Equipo desde donde el usuario hace la Equipo donde se encuentra la

solicitud de una dirección URI/URL al información solicitada por el usuario,
navegador, la cual se convierte en un donde una administrador (APACHE,
numero de IP que corresponde a la TOMCAST..), verifican dicha solicitud y
dirección del servidor la envía al cliente navegador-

Lenguajes del lado cliente:

Los lenguajes utilizados del lado navegador (browser) para mostrar la información son:

4
 HTML el cual describe la estructura del documento
CSS encargado de maquetar o dar los diferentes formatos a la estructura del documento
JavaScript: lenguaje de programación del lado del cliente que permite que el documento
consultado se haga más interactivo.
La programación del lado del cliente se conoce como Frontend, encargada de la presentación
o vista del documento al usuario.

Lenguajes del lado del Servidor

Los lenguajes del lado servidor son aquellos reconocidos, cargados e interpretados por el
propio servidor y que se envían al cliente en un formato comprensible para él, de manera que
puedan ser entendidos directamente por el navegador, puesto que se encontrarían traducidos en
lenguaje del lado cliente.
En el servidor se encuentran todos los programas encargados de la lógica del negocio como,
java, php, asp, perl
La programación del lado del servidor se conoce como Backend

HTML HyperText Markup Language

Se puede definir “HTML” como un lenguaje que permite darle formato a un texto, el cual es
interpretado por un browser, y es lo que se utiliza para crear todas las páginas web de Internet".
Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.
El HTML no es un lenguaje de programación propiamente dicho, aunque tiene algunas
características de estos, como lo son sintaxis bien definida. Tal como lo dice su nombre este
lenguaje consiste en marcar partes de un texto para que adquiera cierto formato.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo conocido como W3C. Como se trata de un estándar reconocido por todas las empresas
relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar
en cualquier navegador de cualquier sistema operativo.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y
que permite publicar información de forma global". Desde su creación, el lenguaje HTML ha
pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un

5
lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y
banca electrónica.

Características de HTML
.
 Tiene una sintaxis bien definida
 No utiliza estructuras de programación
 Utiliza marcas o tags que controlan el formato del texto
 Es un lenguaje interpretado por los Browser, para mostrar la información al usuario
 Un documento HTML, puede crearse con cualquier editor de texto (Edit, Block de notas,
Homesite, UltraEdit…)

HIPERTEXTO

Es un documento en el que ciertas palabras o frases presentan un formato diferente

(típicamente color distinto y subrayado) que la distingue del resto del texto y que pueden ser
seleccionadas para abrir o desplegar nuevos documentos, estos textos marcados como hipertextos
se les conoce como Link o Ligas.

HTTP (Hypertext Transfer Protocol / Protocolo para la Transferencia de Hipertexto)

Es el protocolo usado en cada transacción de la Web (WWW). HTTP define la sintaxis y la

semántica que utilizan los elementos software de la arquitectura web (clientes, servidores, proxies)
para comunicarse. HTTP es un protocolo sin estado, es decir, que no guarda ninguna información
sobre conexiones anteriores. HTTP es un protocolo orientado a transacciones y opera a través de
un esquema petición-respuesta, entre un “cliente” y un “servidor”
La información que sigue a "http" se denomina el URI (Uniform Resource Identifier), más
conocido como URL, lo que no es más que la dirección que estamos visitando. Generalmente estas
direcciones comienzan con www, que quiere decir "World Wide Web", pero existen muchas otras
extensiones posibles.
Nota a pesar de que se tiende a decir que la URI y la URL no es lo mismo, ya que la URL
permite localizar una dirección, mientras que URI localiza la dirección y puede incluir
subdirecciones.
6
BROWSER O NAVEGADOR

Es una aplicación que opera a través de Internet, interpretando la información almacenada en

sitios web, para que estos puedan ser leídos
El navegador interpreta el código HTML, en el que está escrita la página web y lo presenta
en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la
red mediante enlaces o hipervínculos
A continuación se muestran algunos Navegadores, de acuerdo al sistema operativo

WINDOWS LINUX MAC

FIREFOX EPIPHANY CAMINO

EXPLORER GALEON OPERA

OPERA KANKEROR SHIIRA

SAFARI OPERA SAFARI

CHROME SEEMONKEY FIREFOX

NESTCAPE FIREFOX

ACOOBROWSER LINK

MAXTHON MIDORI

MARCAS, TAGS O ETIQUETAS

Los tags son las palabras claves utilizadas por el lenguaje HTML, para controlar el estilo de
la información colocada en una página web.
Los tags van encerrados entre los simbolos de “<” y “>”. Existen diferentes tipos de marcas,
bien sea para controlar el texto, las imágenes, hiperenlaces, sonido, multimedia, tablas ..
Las marcas funcionan muchas veces en pareja, una para indicar el inicio del formato y otra
para indicar el final. Su sintaxis es la siguiente:
<nombre de la etiqueta> texto a formatear</nombre de la etiqueta>
También existen etiquetas que únicamente requieren de la marca de inicio
<nombre de la etiqueta>, no requiere de marca de cierre o final

7
 El texto contenido dentro de las etiquetas puede estar en mayúscula o minúscula
Existen casos donde las etiquetas requieren de ciertos parámetros para mejorar el estilo del
texto al cual se le dará formato; estos parámetros se conocen como ATRIBUTOS., Los atributos
en HTML, siempre se colocan dentro de la etiqueta de inicio. No todas las etiquetas tienen
atributos

ESTRUCTURA DE UNA PÁGINA HTML

El documento en sí se encuentra dividido en dos zonas principales:

 El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
En el encabezamiento, se pueden colocar una serie de etiquetas que va a servir de información
para los navegadores. Entre esas marcas tenemos la etiqueta <TITLE> y </TITLE>, la cual
nos permite colocar el título del documento o página, este título debe ser breve y descriptivo,
pues será lo que vean los demás cuando añadan nuestras páginas a su agenda de dirección.
 El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
En el cuerpo está todo lo que queremos que aparezca en la pantalla principal

La estructura de nuestro documento HTML será:

<HTML> Etiqueta que indica el inicio de un documento HTML

<HEAD>
<TITLE> TITULO BREVE DE LA PÁGINA</TITLE>
</HEAD>
<BODY>
En este sitio se coloca toda la información con sus respectivas etiquetas que darán formato
al documento
</BODY>
</HTML> Etiqueta, que indica el fin de un documento HTML
Después de creado el documento HTML en cualquier editor de texto, este se guarda con la
extensión HTML o HTM, se recomienda usar un solo tipo de extensión para evitar equivocaciones,
cuando se realice el llamado a otro documentos.

8
COMENTARIOS

A veces es necesario escribir información en el documento HTML sobre el código que

escribimos, el cual puede servir para recordar posteriormente sobre lo que se hizo y no se quiere
que se vea en pantalla.
Esto lo logramos con la siguiente simbología
<!-- comentario -->

FORMATO TÍTULO

Permiten resaltar el texto de los títulos colocados en la página.

Etiqueta <Hx> texto a formatear </Hx>
Donde x= 1-6, siendo 1 el mayor tamaño del título
ATRIBUTO:
ALING=" define la alineación del título (CENTER, RIGHT, LEFT, JUSTIFY)”.
Ejemplo:
<H3 ALING=”CENTER”> CURSO HTML</H3>

FORMATO AL TEXTO

Negrita
<B> texto</B> o <STRONG> texto<STRONG>
Ambas etiquetas realizan el mismo trabajo, pero su diferencian consiste en que <B> indica
negrita y <STRONG> es resaltado; dependerá del navegador su interpretación, aunque en la gran
mayoría lo coloca para ambos casos en negrita.

Itálica o Cursiva
<I> texto</I> o <EM> texto<EM>

Subrayado
9
<U> texto</U>

Preformateado
Obliga al navegador a visualizar el texto tal y como ha sido escrito, respetando tabulaciones,
espacios, retornos de carro, ..
<PRE> texto a formatear</PRE>
<XMP> texto para formatear </XMP>

Subíndices
<SUB> texto a formatear </SUB>
Ejemplo: H2O
H<SUB>2<SUB>O

Superíndices
<SUP> texto a formatear </SUP>
Ejemplo: X2+3X3
X<SUP>2<SUP>+X<SUP>3<SUP>

Teletipo (Teletype)
Muestra el texto como que si fuera escrito con una máquina de escribir y de un tamaño menor
<TT> texto a formatear</TT>

Tachado
<S> Texto a tachar</S>
<STRIKE> Texto tachar </STRIKE>
Parpadeo
Esta etiqueta no es interpretada por Explorer, es propia de Netscape
<BLINK> texto que va a parpadear</BLINK>

Centrado
<CENTER> texto a ser centrado</CENTER>

10
Citas
Para destacar una cita textual dentro del texto general
<BLOCKQUOTE> TEXTO O CITA</BLOCKQUOTE>
<CITE> </CITE> Etiqueta que permite destacar el nombre del autor

Saltos de Líneas
Hay dos etiquetas para producir saltos de líneas, una se realiza con la marca <BR> y la otra
con <P>, ambas permiten saltar una línea; difieren en que con <BR> se salta a la siguiente línea
pero no se deja línea por medio, mientras que con <P> se salta a la siguiente línea y se deja una
línea por medio.
<BR> no lleva etiqueta de cierre y <P> cuando se quiere producir saltos no lleva etiqueta de
cierre.
<BR> realmente es un salto de párrafo continuo, mientras que <P> es un salto de párrafo.

FORMATO DE PÁRRAFOS
<P> párrafo a formatear</P>
<DIV >párrafo a formatear</DIV>
Atributos: ALIGN=”left, rigth o center”
Ejemplo:
<P ALIGN=”RIGTH”> Venezuela está ubicada en América del Sur</P>

FORMATO DE FUENTE
<FONT> texto a formatear</FONT>
Atributos:
FACE=”tipo de fuente” si el navegador no tiene entre sus fuentes la que se ha definido, entonces
el buscara la fuente que más se aproxime a la establecida
SIZE=” tamaño” el tamaño varia de ±1 a ±7, siendo 7 el mayor tamaño
COLOR=”#RRGGBB” Este se puede configurar en base al código Hexadecimal RR indica la
cantidad de rojo, GG la de verde y BB la cantidad de azul; en combinación cada uno va de 00-FF,

11
siendo la combinación #FFFFFF equivalente al blanco (White) y #000000 negro (Black); también
se pueden usar los nombres de los colores en ingles, por ejemplo COLOR=”RED”

LÍNEAS HORIZONTALES
Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento
y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la
siguiente:
<HR >
La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos:
ALING=" define la alineación de la línea (center, right, left)”.
SIZE="2": define el grosor, en píxel, de la línea.
WIDTH="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en
tanto por cien respecto al espacio a disposición: WIDTH=65%.
COLOR="#RRGGBB o nombre del color”: define el color de la línea.
NOSHADE: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente,
produce dicho efecto.

CARACTERES ESPECIALES
Consiste en una serie de caracteres definidos en HTML, para que sean reconocidos e
interpretados en diferentes países.
Caracteres especiales básicos
Estos caracteres se usan en HTML para evitar la confundirse con un principio o final de
etiqueta, unas comillas o un & con su correspondiente caracter.

&lt; < &gt; >

&amp; & &quot; "
&Aacute; Á &Agrave; À
&Eacute; É &Egrave; È
&Iacute; Í &Igrave; Ì
&Oacute; Ó &Ograve; Ò
&Uacute; Ú &Ugrave; Ù
&aacute; á &agrave; à
&eacute; é &egrave; è
&iacute; í &igrave; ì
&oacute; ó &ograve; ò
12
 &uacute; ú &ugrave; ù
&Auml; Ä &Acirc; Â
&Euml; Ë &Ecirc; Ê
&Iuml; Ï &Icirc; Î
&Ouml; Ö &Ocirc; Ô
&Uuml; Ü &Ucirc; Û
&auml; ä &acirc; â
&euml; ë &ecirc; ê
&iuml; ï &icirc; î
&ouml; ö &ocirc; ô
&uuml; ü &ucirc; û
&Atilde; Ã &aring; å
&Ntilde; Ñ &Aring; Å
&Otilde; Õ &Ccedil; Ç
&atilde; ã &ccedil; ç
&ntilde; ñ &Yacute; Ý
&otilde; õ &yacute; ý
&Oslash; Ø &yuml; ÿ
&oslash; ø &THORN; Þ
&ETH; Ð &thorn; þ
&eth; ð &AElig; Æ
&szlig; ß &aelig; æ
&frac14; ¼ &nbsp;
&frac12; ½ &iexcl; ¡
&frac34; ¾ &pound; ￡
&copy; © &yen; ¥
&reg; ® &sect; §
&ordf; a &curren; ¤
&sup2; 2
&brvbar; ¦
&sup3; 3
&laquo; ≪
&sup1; 1
&not; ￢
&macr; ‾ &shy;
&micro; µ &ordm; o
&para; ¶ &acute; ´
&middot; . &uml; ¨
&deg; ° &plusmn; ±
&cedil; ， &raquo; ≫
&iquest; ¿
&times; × &cent; ￠
&divide; ÷ &euro; €
&#147; “ &#153; ™
&#148; ” &#137; ‰
&#140; Œ &#131; ƒ
&#135; ‡ &#134; †

LISTAS

13
 Las listas representan uno de los instrumentos más difundidos para organizar la información
dentro de los sitios web. Su características principales es la de mostrar en forma clara el tema
tratado.
HTML dispone de tres tipos de listas. Las cuales son:

Listas Desordenadas (Unordered List)

Las listas desordenadas nos permiten mostrar elementos que no requieren de un orden o
numeración.
<UL> inicio de una lista desordenada
<LI> </LI> list ítem, elemento que integra la lista
<LI> </LI>
</UL> fin de una lista desordenada

Atributo de la etiqueta <UL>:

TYPE= “DISC” muestra un circulo sólido o relleno como viñeta
“SQUARE” muestra un cuadro como viñeta
“CIRCLE” muestra un circulo vacío como viñeta

Listas Ordenadas (Ordered List)

Sirven para presentar información en un orden determinado, su estructura es igual a la
anterior, la diferencia radica en que el resultado aparece automáticamente un número correlativo,
o sea se lleva un orden.
<OL> inicio de una lista ordenada
<LI> </LI> list ítem, elemento que integra la lista
<LI> </LI>
</OL> fin de una lista ordenada

Atributo de la etiqueta <OL>:

TYPE= “A o a” ordena la lista por letras mayúsculas o minúsculas
“I o i” ordena la lista por números romanos en mayúscula o minúscula
“1” ordena en forma numérica
14
STAR=”valor” indica cual será el valor inicial de la lista, se debe colocar el número
de posición desde donde se desea comenzar a numerar

Listas de Definiciones
Este tipo de listas son apropiadas para crear glosarios o definiciones de términos
<DL> Definition List, inicio de una lista de definiciones
<DT> </DT> Definition Term, elemento que se desea definir
<DD> </DD> Definition Definition, definición del elemento
</DL> fin de una lista de definiciones

TEXTOS EN MOVIMIENTO
Marquesinas (MARQUEE): las marquesinas son textos o imágenes que se desplazan en
forma horizontal en una ventana. Solo es válida para Internet Explorer, en Netscape se verá como
un texto fijo
La etiqueta básica es:
<MARQUEE> texto o imagen</MARQUEE>
Cuando no se le agrega ningún atributo, el comportamiento por defecto de la marquesina es
que ocupa una línea de altura, se desplaza de derecha a izquierda y
Ocupa todo el ancho de la pantalla.
ATRIBUTOS:
ALIGN= “TOP, BOTTOM, MIDDLE” alineación del texto con respecto a la marquesina
WIDHT=”PIXELES, PORCENTAJE” ajusta el ancho en pixeles o porcentaje
HEIGHT=”PIXELES, PORCENTAJE” ajusta el alto en pixeles o porcentaje
BEHAVIOR=”SCROLL, SLIDE, ALTERNATE” define de qué manera se va a efectuar el
desplazamiento,
SCROLL desplaza de un lado a otro y vuelve a comenzar
SLIDE, se desplaza de un lado a otro hasta detenerse
ALTERNATE: desplaza el texto de izquierda a derecha y viceversa
BGCOLOR=”#RRGGBB” define el color de fondo de la marquesina
DIRECTION=”LEFT, RIGHT” indica hacia donde se dirige el texto

15
SCROLLAMOUNT=”valor” define la cantidad de desplazamiento del texto en cada
movimiento de avance, expresado en pixeles, a mayor numero más rápido avanza
SCROLLDELAY=”valor” define el tiempo entre cada movimiento de avance, expresado en
milisegundos. Cuanto mayor es el número más lento avanza
LOOP=”infinite, valor” define el número de veces que aparecerá el texto. Por defecto es
infinito
HSPACE=”valor” definen el espacio horizontal, de la marquesina con respecto al texto que esta
fuera de la marquesina
VSPACE=”valor” definen el espacio vertical, de la marquesina con respecto al texto que esta
fuera de la marquesina

IMÁGENES
Para trabajar con imágenes, se utiliza la marca <IMG> la cual no necesita cierre y su sintaxis
correcta es:
<IMG SRC="imagen.gif">
Donde SRC corresponde es el recorrido del que el navegador saca la imagen.
Los formatos gráficos más utilizados son dos: GIF (Graphics Interchange Format) JPEG (Joint
Photographics Experts Group) y PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. cuáles son.
ALT=”comentario” Muestra el comentario de la imagen al pasar el ratón por encima de
la misma.
TITLE=”TEXTO” Muestra el título de la imagen en caso de que la imagen no se
encuentre
WIDTH y HEIGHT Estos atributos nos permiten cambiar el ancho y alto de la imagen en
pixeles
BORDER=”valor “ Con el atributo BORDER podemos aplicar un borde a la imagen. Los
valores son numéricos y van expresados en píxel. Cuando el valor BORDER es 0, la imagen no
lleva border. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la
imagen es también un enlace automáticamente se le asignará un BORDER=1.
HSPACE y VSPACE Con estos dos atributos podemos establecer la distancia en píxel de
la imagen a los objetos que se encuentran alrededor de la misma.
16
 HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos
más cercanos (texto, imágenes, apliques, etc.).
VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más
cercanos (texto, imágenes, apliques, etc.).
ALIGN=”top, middle, bottom, left, rigth”
El atributo ALIGN define la posición de la imagen respecto al texto colocado
inmediatamente antes o después de la misma:
top”: alinea la primera línea de texto con la parte superior de la imagen.
middle”: alinea la primera línea del texto con el centro de la imagen.
bottom”: alinea la primera línea de texto con la parte inferior de la imagen.
left”: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la
misma.
right”: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de
la misma.

TABLAS
Las tablas son utilizadas para representar de forma más ordenada la información
La etiqueta general, que engloba al resto de etiquetas es <TABLE> y </TABLE>
<TABLE>
resto de etiquetas
</TABLE>
Para crear filas se utiliza <TR> y </TR>
Para definir cada celda que compone a la fila <TD> y <TD> o <TH> y </TH>
La diferencia entre <TD> y <TH> es que <TH> centra el texto en la celda, y lo coloca en negrita
mientras que <TD> únicamente deja el texto del lado izquierdo de la celda.
Entonces la estructura de una tabla sería:
<TABLE>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
17
</TABLE>
La estructura de la tabla dependerá del estilo de tabla que se desee crear.
Las tablas también pueden anidarse, o sea una tabla dentro de otra

ETIQUETAS DE ORGANIZACIÓN DE TABLAS

Por defecto, al crear una tabla, el navegador se encarga de crearla a medida que va leyendo
las etiquetas, por lo que la tabla se crea en el orden que se han especificado sus elementos, de arriba
a abajo. Sin embargo, podemos utilizar una serie de etiquetas contenedoras que establecerán la
zona de la tabla donde debe aparecer su contenido:

Etiqueta Descripción

<thead> Etiqueta contenedora de la cabecera de la tabla. Parte superior de la tabla.

<tbody> Etiqueta contenedora del cuerpo de la tabla. Parte central de la tabla.

<tfoot> Etiqueta contenedora del pie de la tabla. Parte inferior de la tabla.

<caption> Establece un título de la tabla, independientemente de su posición.

ATRIBUTOS PARA FILA Y CELDAS

Atributos que nos permiten modificar una celda en concreto o toda una línea:
ALIGN=”left, center, right” Justifica el texto de la celda del mismo modo que si fuese el de un
párrafo.
VALIGN =”top, middle, bottom” Justifica el texto en forma vertical dentro de la celda
BGCOLOR=”#RRGGBB” Da color a la celda o línea elegida.
BORDERCOLOR=”#RRGGBB” Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas
de una línea son:
BACKGROUND =”nombre.gif,jpg” Nos permite colocar un fondo para la celda a partir de un
enlace a una imagen.
HEIGHT=”valor ó numero% Define la altura de la celda en pixels o porcentaje.
WIDTH=”valor ó numero% Define la anchura de la celda en pixels o porcentaje.
18
COLSPAN =” numero de celdas a ocupar” Expande una celda horizontalmente.
ROWSPAN =”numero de filas a ocupar” Expande una celda verticalmente.

ATRIBUTOS PARA LA TABLA

ALIGN=”left, rigth, center” Alinea horizontalmente la tabla con respecto a su entorno.
BACKGROUND =”nombre.gif,jpg” Nos permite colocar una imagen de fondo en la tabla, a
partir de un enlace a una imagen.
BGCOLOR=”#RRGGBB” Da color al fondo de la tabla.
BORDER =”numero” Define el numero de pixels del borde principal.
BORDERCOLOR=”#RRGGBB” Define el color del borde.
CELLPADDING =”valor” Define, en pixels, el espacio entre los bordes de la celda y el
contenido de la misma.
CELLSPACING=”valor” Define el espacio entre los bordes (en pixels).
HEIGHT=”valor ó numero% Define la altura de la celda en pixels o porcentaje.
WIDTH=”valor ó numero% Define la anchura de la celda en pixels o porcentaje.
Los atributos colocados en la celda o fila tienen mayor prioridad que el de la tabla.

BORDES EXTERNOS DE LAS TABLAS

El atributo en concreto para definir el tipo de borde externo se llama FRAME y se utiliza
en la misma etiqueta <TABLE>. Quedando los bordes de las celdas inalterados. Sus valores son
los siguientes:
FRAME = “VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER”
VOID: Ningún borde externo
ABOVE: Solo aparece el borde superior
BELOW: Solo el borde inferior de la tabla
HSIDES: Se mostrara solo el borde de arriba y abajo.
VSIDES: Solo los bordes de los lados izquierdo y derecho
LHS: Se mostrara tan solo el borde izquierdo
RHS: Se mostrara solamente el borde derecho
BOX: Los 4 bordes
BORDER: También se mostraran los 4 bordes
19
BORDES INTERNOS DE LAS TABLAS
El atributo que debemos utilizar para especificar que bordes internos deben mostrarse es
RULES, que también se utiliza en la etiqueta <TABLE>
Como bordes internos nos referimos a los bordes de las celdas de la tabla, puesto que cuando
se define un borde en una tabla no solo tiene borde la parte externa de la tabla, sino también cada
una de sus casillas.
Los valores que puede llevar el atributo RULES para definir los bordes internos son los
siguientes:
RULES = “NONE, GROUPS, ROWS, COLS, ALL
NONE: No se coloca ningún borde interno
GROUPS: Solo se mostraran bordes en los grupos de columnas o filas.
ROWS: Solo aparecerán bordes entre filas.
COLS: Los bordes internos solo aparecerán para separar columnas
ALL: Se mostraran todos los bordes internos

AGRUPAR FILAS O COLUMNAS DE TABLAS

Existen dos etiquetas que nos permiten agrupar filas o columnas de una tabla, a las que se
les puede definir un estilo de una sola vez, y no fila a fila o celda a celda.
Estas etiquetas son las siguientes:
<TBODY> </TBODY>: Para agrupar conjuntos de filas.
<COLGROUP> </COLGROUP>: Para agrupar conjuntos de columnas.
Agrupar Filas <TBODY>
Estructura:

<TABLE cellspacing="4" cellpadding="4" border="2">

<tr>
<td>celda 1</td> Filas sin formato
<td>celda 2</td>
</tr>
<TBODY align="center" bgcolor="#ff88AA" valign="middle">
<tr>
<td>celda 3</td>
<td>celda 4</td>
<td>celda 6</td> Formato definido a dos
filas de una vez con la
20
etiqueta <TBODY>
 </tr>
<tr>
<td> celda 7</td>
<td> celda 8</td>
<td> celda 9</td>
</tr>
</TBODY>
</TABLE>

Agrupar columnas <COLGROUP>

El objetivo es definir de una sola vez estilos específicos para un determinado conjunto de columnas
de una tabla. Sin embargo la estructura es diferente.
Estructura:
<TABLE cellspacing="4" cellpadding="4" border="2">
<COLGROUP span=2 width="90">
</COLGROUP>
<tr> <td>celda 1</td><td> celda 2</td><td> celda 3</td></tr>
<tr><td> celda 4</td><td> celda 5</td><td> celda 6</td></tr>
<tr><td> celda 7</td><td> celda 8</td><td> celda 9</td></tr>
</TABLE>
Como se puede observar, COLGROUP se utiliza después de abrir la tabla y antes de empezar a
meter los contenidos de filas y celdas.
El atributo span indica el numero de columnas que se desean agrupar, empezando por la
primera.
Los otros atributos que podemos colocar en COLGROUP son los siguientes: align, id,
class, style, valign, width y manejadores de eventos Javascript. Y todos los definidos para celdas,
Internet Explorer acepta otros atributos como bgcolor.
Para darle formato a una celda en específico dentro de un grupo se utiliza la etiqueta abierta
<COL>, el atributo a utilizar el style=”atributo:valor”

21
FORMATO A LA PÁGINA O CUERPO DEL DOCUMENTO
Las paginas HTML pueden construirse con variedad de atributos que le pueden dar un
aspecto a la página muy personalizado. Estos atributos se definen en la etiqueta <BODY>
ATRIBUTOS
PARA EL FONDO
BGCOLOR=”#RRGGBB” especificamos un color de fondo para la página.
BACKGROUND=”IMAGEN.GIF,JPG” Permite Colocar una imagen como fondo de la página.
Si el tamaño de la imagen es pequeña, se coloca haciendo un mosaico, es decir, se repite muchas
veces hasta ocupar todo el espacio del fondo de la página.

COLOR DEL TEXTO

TEXT: este atributo sirve para asignar el color del texto de la página. Por defecto es el negro.
Además del color del texto, tenemos tres atributos para asignar el color de los enlaces de la página.
Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la página para que los
usuarios puedan identificarlos fácilmente. Para ello suelen aparecer subrayados y con un color más
vivo que el texto. Los tres atributos son los siguientes:
LINK=”#RRGGBB” Define el color de los enlaces que no han sido visitados, por defecto
es azul claro
VLINK=”#RRGGBB” Define el color de los enlaces que se han sido visitado. Es el color
que tendrán los enlaces que ya hemos visitado. Por defecto su color es morado.
ALINK=”#RRGGBB” Define el color de los enlaces activos. Un enlace esta activo en el
preciso instante que se pulsa. A veces es difícil darse cuenta cuando un enlace esta activo porque
en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador
abandonara la página rápidamente y no podremos ver el enlace activo más que por unos instantes
mínimos.

MÁRGENES
Los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos
atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos
utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente.
IEXPLORER NETSCAPE DESCRIPCIÓN
22
 LEFTMARGIN: MARGINWIDTH: Indica el margen a los lados de la página.
Indica el margen arriba y debajo de la
TOPMARGIN: MARGINHEIGHT
página.

HIPERTEXTO O HIPERENLACES
Cuando se crean páginas generalmente, esta está conformada por una serie de documentos,
repartidos por todo el mundo y la forma de conectarse de un sitio a otro es a través de los
hipertextos.
En general los enlaces tienen la siguiente estructura:
<A HREF=”XXX”> YYY</A>
Donde:
<A> : Es el tags que indica el ancla a donde va a llegar el navegador para buscar la página requerida
HREF: Atributo para comunicarse con la página
XXX: Archivo o página destino que se desea visualizar
YYY: el texto que aparece subrayado, que hará el Link hacia la pagina solicitada al darle clic
</A>: Etiqueta de cierre del ancla
De acuerdo a la acción que se requiera realizar, se pueden definir diferentes tipos de enlaces:
1 Enlaces internos o en la misma página
2 Enlaces locales o a otra página dentro del mismo servidor
3 Enlaces remotos o a otra página fuera de nuestro sistema
4 Enlaces a dirección de correo
5 Enlaces con archivos

Enlaces internos:
Este tipo de enlace consiste en dirigir el salto a otro párrafo dentro del mismo documento.
Su estructura es la siguiente:
<A HREF=”#xxx”> YYY</A> sitio del documento desde donde se quiere hacer el hipertexto

<A name=”xxx”></A> sitio exacto a donde queremos saltar dentro del mismo documento

Enlaces locales
23
 En este caso dirigimos el salto a otra página dentro del mismo servidor.

<A HREF=”PAGINA1.HTML”> YYY</A> Documento al cual vamos a llegar al dar clic en el

hipertexto

En el caso que se desee llegar a un sitio en específico del documento

<A HREF=”PAGINA1.HTML#xxx”> YYY</A>

<A name=”xxx”></A> Sitio exacto a donde queremos saltar dentro del documento

Enlaces remotos
Para dirigirnos a una página fuera de nuestro sistema, se utiliza la siguiente estructura
<A REF="mailto:lasa345@hotmail.com">YYYY</A>

Enlaces a correo
<A REF="mailto:eugim@desarrolloweb.com">YYY</A>
Además de la dirección de correo del destinatario, tambien podemos colocar en el enlace el asunto
del mensaje. Esto se consigue colocando después de la dirección de correo un interrogante (?),
luego la palabra subject, un signo igual (=) y la información
<A REF="mailto:lasa345@hotmail.com?subject=contacto desde iutv">YYY</A>

Enlaces a archivos
<A HREF="fichero.pdf">YYYp</A>

ATRIBUTOS
TITLE=”comentario” Comentario que se activará cuando pasemos el ratón por
encima del enlace
TARGET =”_blank, _top, _self, nombre de frame”
TARGET es un atributo implementado por exigencias relacionadas con la gestión de los
marcos. En una página dividida en marcos, este atributo indica en cuáles de ellos debe quedar
visualizado el documento.

24
_BLANK: permite que se abra una copia del navegador y el enlace activado se carga en ella, a
pantalla completa. Es decir se tienen dos copias del navegador
_TOP: hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin
que se cargue una nueva copia del navegador
_SELF: hace que el enlace se cargue en la misma ventana o frame
NOMBRE del FRAME: permite que se cargue la página en el frame indicado

25
FRAME O DIVISIÓN DE UN PÁGINA EN MARCOS

Los frames permiten crear la estructura inicial de una página, dividiéndola en diferentes
cuadros.
Cuando trabajamos con frames no se requiere del uso de la etiqueta <BODY>.
Estructura de una página con marcos
<FRAMESET> inicio de una página con marcos
<FRAME> indica la cada uno de los marcos que contendrá
<FRAME> la página
</FRAMESET> fin de una página con marcos
Se pueden anidar un frames dentro de otro frames

Atributos para la etiqueta <FRAMESET>

COLS="valor%, valor, *" Indica el numero de columnas a definir para dividir la ventana, sus
valores son:
valor% muestra el ancho de la columna en porcentaje de la pantalla
valor muestra el ancho de la columna en pixeles
* es el carácter comodín para indicar el resto que ocupara la columna
Ejemplo:
COLS=”25%,*” en este caso la pantalla se divide en dos columnas, la primera ocupa el 25% de la
ventana y la segunda el resto
COLS=”25%,*, 60” en este caso la pantalla se divide en tres columnas, la primera ocupa el 25%
de la ventana, la tercera ocupa 60pixeles de la ventana y la segunda columna el resto

ROWS="valor%,valor,*" indica la cantidad filas, a definir para dividir la ventana espacio total,
los valores representan el mismo caso que para las columnas.
Ejemplo:
ROWS="100,*,15%". En este caso la ventana será dividida en tres filas, la primera fila ocupa 100
pixeles de la ventana, la tercera fila representa el 15% de la ventana y la segunda representa el resto
de la ventana

26
BORDER="número de pixels" Permite especificar de manera global para todo el frameset el
numero de pixels que ha de tener el borde de los frames.

BORDERCOLOR="#RRGGBB" Con este atributo podemos modificar el color del borde de los
frames, también de manera global a todo el frameset.

FRAMEBORDER="yes|no|0" Sirve para mostrar o no el borde del frame. Sus posibles valores
son "yes" para que se vean los bordes y "no" o "0" para que no se vean. En la práctica elimina el
borde, pero permanece una línea de separación de los frames.

FRAMESPACING="número de pixels" Para determinar la anchura de la línea de separación de

los frames.

Atributos Para La Etiqueta <FRAME>

SRC=”pagina.html” Para indicar la pagina web que se mostrara en el marco

NAME=”nombre del frame” Para especificar el nombre del frame, que podemos utilizar luego
para referirnos a él con el target de los links.

MARGINWIDTH="número de pixels" Define el numero de pixels que tiene el margen del frame
donde se indica. Este margen se aplica a la página que pretendemos ver en ese marco, de modo que
si colocamos 0, los contenidos del página en ese marco estarán pegados por completo al borde del
margen y si indicamos un valor de el contenido de la página estarían separados del borde según el
valor indicado en pixels.

MARGINHEIGHT="número de pixels" Lo mismo que el anterior atributo, pero para el margen

vertical.

SCROLLING="yes|no|auto" Sirve para indicar si queremos que haya barras de desplazamiento

en los distintos marcos. Si indicamos "yes" siempre saldrán las barras, si indicamos "no" no saldrán
nunca y si colocamos "auto" valor por defecto, saldrán solo si son necesarias.

27
NORESIZE
Este atributo no tiene valores. En caso de que esté presente indica que el frame no se puede
redimensionar.

FRAMEBORDER="yes|no|0" Este atributo permite controlar la aparición de los bordes de los

frames. Con este atributo igualado a "0" o "no" los bordes se eliminan.

BORDERCOLOR="#RRGGBB" Permite especificar el color del borde del marco.

Existen casos donde el navegador no soporta el uso de frame, en estos casos se utiliza la marca
<NOFRAME> y </NOFRAME>
<NOFRAMES>
La etiqueta <NOFRAMES> muestra un texto para los navegadores que no soportan frames.
 <NOFRAMES> se coloca dentro de la etiqueta FRAMESET
 si el navegador soporta frames, el texto del <NOFRAMES> no se mostrará
 si usamos la etiqueta <NOFRAMES> el texto de la misma debe ir entre las etiquetas
<BODY> </BODY>
Ejemplo:

<FRAMESET rows="25%,75%">
<NOFRAMES>
<BODY>
Su navegador no soporta frames
</BODY>
</NOFRAMES>
<FRAME src="frame1.htm">
<FRAME src="frame2.htm">
</FRAMESET>

28
Frame Flotantes <IFRAME>
La etiqueta iframe
La etiqueta <IFRAME> se usa para crear un frame en línea que contiene otro
documento. El iframe puedo mostrar una ventana que contenga otra página Web dentro de
la página que estamos diseñando
Sintaxis
<IFRAME >
Atributos
SRC=”URL” Archivo que se va a mostrar en el IFRAME
ALIGN=” left, right, top, middle, bottom” Alineación del iframe con respecto al texto.
FRAMEBORDER=”0,1” Especifica si se mostrará o no el borde alrededor del iframe.
HEIGHT=”valor en pixels, valor en %” Define la altura del iframe.
MARGINHEIGHT=”valor en pixels” Define el margen superior e inferior del iframe.
MARGINWIDTH=”pixels” Define el margen izquierdo y el derecho del iframe.
NAME=”nombre”Define un nombre para el iframe.
SCROLLING=”yes no auto” Determina la acción de la barra de desplazamiento.
WIDTH=”valor en pixels, valor en %” Define el ancho del iframe.
ID=”nombre o valor” Para indicar el identificador del iframe, y poder referirnos a él desde
javascript

FORMULARIOS
Un formulario HTML es una sección de un documento que contiene contenido
normal, código, elementos especiales llamados controles (casillas de verificación
(checkboxes), radiobotones (radio buttons), menúes, ...), y rótulos (labels) en esos controles.
Los usuarios normalmente "completan" un formulario modificando sus controles
(introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario
a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)
Un formulario (form) es básicamente un contenedor para controles. Cada control en un
formulario está pensado para recolectar información ingresada por los usuarios, en formas
que pueden ir desde líneas de texto a subida de archivos, pasando por opciones, fechas,
29
 contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los
datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la
información recolectada.
<form>
[Conjunto de controles]
</form>
Atributos principales de la etiqueta form :
action, indica la ubicación del agente procesador.
method determina el método utilizado para empaquetar el formulario antes de ser
enviado al agente procesador.
target, indica dónde serán mostrados los resultados del proceso.
<form action="../form-result.php" target="_blank">

</form>

Tipos de controles
HTML define los siguientes tipos de controles:

CONTROLES DE TEXTO
Los controles de texto proveen los medios necesarios para recolectar información
textual, como nombres, direcciones, frases, mensajes, contraseñas,..
Sintaxis
< input type=”text”
name=”nombreCuadro”
size=”tamañoCuadro”
maxlength=”maximaCantidadDeCaracteres”
/>

< input type=”password”

name=”nombreCuadro”
size=”tamañoCuadro”
maxlength=”maximaCantidadDeCaracteres”
/>

30
 CAMPO DE TEXTO MULTILÍNEA

Este tipo de control es muy similar al anterior, pero tiene la particularidad de permitir el
ingreso de múltiples líneas de texto. Un campo de texto multilínea es habitualmente
representado como una caja, lo suficientemente alta como para contener más de una línea
de texto a la vez. Esta representación, usualmente provee un mecanismo de desplazamiento
para permitir a los usuarios ver todo el texto ingresado, especialmente cuando es lo
suficientemente largo como para exceder los límites de la caja.
Un campo de texto multilínea se inserta con el elemento textarea. Como anteriormente,
el atributo name provee un nombre para el control que ayudará al agente procesador a
identificar la información enviada por el usuario.
sintaxis
<textarea name="mensaje"
cols=”numero de caracteres”
rows=”numero filas”>
</textarea>

CONTROLES DE OPCIÓN
Estos controles permiten a los usuarios seleccionar una o más opciones de una lista de
valores predefinidos. Los controles de opción pueden ser presentados con diferentes estilos
y mecanismos de interacción con el usuario, dependiendo principalmente del elemento
utilizado. Una lista de opciones puede declararse de tres formas: con casillas de
verificación, con botones de opción y con listas.

CASILLAS DE VERIFICACIÓN
Una casilla de verificación es un tipo particular de opción que puede ser seleccionada o
deseleccionada mediante la interacción del usuario. Esto permite a los autores recolectar
información como preferencias, aceptación de términos y condiciones, categorías, o
cualquier otra cosa que pueda ser respondida mediante "sí" y "no". Una cosa que este

31
control tiene de particular es que, aún cuando puede ser declarado como parte de un grupo
temático, cada casilla es independiente de todas las demás en el formulario.
Sintaxis
<input type="checkbox"
name="nombre"
value=”valor”
checked />

Ejemplo:
<form action="../../form-result.php" target="_blank">
<p> Selecciona tus intereses:<br>
<input type="checkbox" name="peliculas" value=”peliculas”> Películas<br>
<input type="checkbox" name="deportes" value=”deportes”> Deportes<br>
<input type="checkbox" name="videojuegos" value=”videojuegos”> Videojuegos
</p> <p>
<input type="submit" value="Enviar información"></p>
</form>

BOTONES DE OPCIÓN
Mientras que las casillas de verificación son independientes y pueden ser declaradas por
sí mismas, los botones de opción necesitan ser agrupados a fin de tener sentido. Los grupos
de botones de opción tienen una particularidad que juega un rol importante en su conducta:
sólo una opción puede ser seleccionada por vez en todo el grupo. Esto significa, entre otras
cosas, que cuando seleccionas una opción, la opción que estaba anteriormente seleccionada
se deselecciona.
Un botón de opción también se declara con el elemento input, pero con el valor "radio"
en su atributo type. Aquí las cosas se vuelven un poco diferentes a cómo eran con las casillas
de verificación, debido a que el valor del atributo name necesita ser compartido por todas
las opciones en un mismo grupo. En otras palabras, este es el mecanismo que se requiere
utilizar para crear un grupo de botones de opción.
<input type="radio"
name="nombre"
value="valor"
checked />

32
 Los botones comparten el mismo nombre (name) y tienen, cada uno, un valor diferente
(value).
Cuando no se encuentra el atributo value, este lleva como información true o false
Ejemplo
. <form action="../../form-result.php" target="_blank">
<p> Ingresos:<br>
<input type="radio" name="ingresos" value="menosde1000"> Menos de
1,000.00<br>
<input type="radio" name="ingresos" value="de1000a5000"> De 1,000.00 a
5,000.00<br>
<input type="radio" name="ingresos" value="masde5000"> Más de 5,000.00 </p>
<p><input type="submit" value="Enviar información"></p>
</form>

LISTAS
Una lista de opciones es un control que puede asemejarse, en cuanto a su mecánica, a
cada uno de los controles analizados previamente, dependiendo de la presencia del atributo
booleano multiple. Este atributo cambia radicalmente la conducta de una lista, haciendo
posible la selección de una sola opción a la vez o de muchas.
La estructura de una lista está compuesta, principalmente, por dos elementos: select, que
actúa como contenedor para las opciones; y option, que representa una de las muchas
opciones que el control puede presentar.
Cuando el atributo multiple se encuentra ausente, un control de lista se comporta como
un grupo de botones de opción, donde sólo una opción puede ser seleccionada por vez.
Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra ausente, los
navegadores habitualmente muestran a este control como una lista desplegable. En
cualquier otro caso, el control toma la forma de una caja desplazable.
Sintaxis
<select name="nombre">
<option>texto1</option>
<option>texto2</option>
</select>

<form action="../../form-result.php" target="_blank">

33
 <p> Género:
<select name="genero">
<option>Masculino</option>
<option>Femenino</option>
</select> </p>
<p><input type="submit" value="Enviar información"></p>
</form>
Ahora, cuando el atributo multiple está presente, la lista se comporta como un conjunto
de casillas de verificación, donde no solamente una sino muchas opciones pueden ser
seleccionadas al mismo tiempo. Esta configuración requiere que un par de corchetes sea
anexado al valor que el autor elija para el atributo name. Si este requerimiento no se
complementa, los agentes procesadores sólo recibirán la primera opción seleccionada.
Cuando el atributo multiple está presente, la mayoría de los navegadores cambian la
representación del control a una caja deslizable, independientemente del valor que el
atributo size contenga.
Para seleccionar más de una opción en una lista de opciones múltiple, los usuarios
pueden hacer click sobre sus opciones mientras mantienen presionada la tecla CTRL. Un
rango también puede ser seleccionado utilizando la tecla SHIFT.
Ejemplo
<form action="../../form-result.php" target="_blank">
<p> Selecciona categorías:<br>
<select multiple name="categorias[]">
<option value="arte">Arte y entretenimiento</option>
<option value="tv">Televisión y películas</option>
<option value="ninos">Niños y adolescentes</option>
<option value="hazlotu">Hazlo tu mismo</option> </select> </p>
<p><input type="submit" value="Enviar información"></p> </form>

BOTONES
Un botón es un tipo especial de control que ha sido diseñado para interactuar con el
usuario de una manera singular: una acción es ejecutada cada vez que el usuario lo presiona.
Existe una amplia gama de botones, cada uno con sus peculiaridades en relación a sus
capacidades y su conducta, pero aquí sólo analizaremos los dos más ampliamente utilizados
en formularios básicos.

34
 BOTONES DE ENVÍO
Un botón de envío tiene la acción predefinida de enviar el formulario al que pertenece
cuando es activado. A menos que otro mecanismo de envío sea provisto, la presencia de
este botón es necesaria si existe la intención de permitir a los usuarios enviar el formulario.
Los botones de envío son insertados con el elemento input, teniendo el valor "submit"
en su atributo type. El atributo value es importante en este control, ya que su valor es
mostrado a modo de etiqueta dentro del botón.

<form action="../../form-result.php" target="_blank">

<p> Edita tu descripción: <input type="text" name="desc">

<input type="submit" value="Guardar cambios"> </p>
</form>

BOTONES DE REINICIO
Como los botones de envío, los de reinicio también tienen una acción predefinida. Pero
en este caso, la acción predefinida consiste en el reinicio de la información de los campos
del formulario a sus valores iniciales. En otras palabras, el estado de los campos en un
formulario que ha sido reiniciado es el mismo que tenía cuando la página ha sido cargada.
Esta acción elimina todos los cambios que haya realizado el usuario a los valores de los
controles.

Ejemplo:

<form action="../../form-result.php" target="_blank">

<p>Enviar mensaje:
<input type="text" name="mensaje" value="Estoy listo!"></p>
<p> <input type="radio" name="cuando" value="hoy" checked> Hoy<br>
<input type="radio" name="cuando" value="manana"> Mañana </p>
<p><input type="checkbox" name="copia" checked> Enviarme una copia</p> <p>
<input type="reset" value="Reiniciar el formulario">
<input type="submit" value="Enviar mensaje"> </p>
</form>

35
 ETIQUETADO DE CONTROLES
Casi cualquier control en un formulario puede ser etiquetado. El etiquetado de controles
en una operación provechosa que mejora la accesibilidad en muchos frentes. Esta
asociación entre un trozo de texto y un control resolverá el problema señalado en ejemplos
anteriores de este tutorial, particularmente con botones de opción y casillas de verificación.
Una etiqueta puede asignarse con el elemento label. El más fácil de los dos métodos que
existen para asignar una etiqueta a un control, consiste en declarar a ambos, el texto y el
control, como contenido del elemento label. El siguiente ejemplo tiene un par de controles
asociados a etiquetas mediante este método. Allí puedes ver cómo un control recibe el
enfoque cuando su etiqueta es activada.
<form action="../../form-result.php" target="_blank">
<p><label>Nombre: <input type="text" name="nombre"></label></p>
<p> Género: <label><input type="radio" name="genero" value="masculino">
Masculino</label>
<label><input type="radio" name="genero" value="femenino">
Femenino</label> </p>
<p><label><input type="checkbox" name="novedades"> Me gustaría recibir
novedades</label></p>
<p><input type="submit" value="Enviar datos"></p>
</form>

AGRUPACIÓN DE CONTROLES
A veces, cuando un formulario es grande, la segmentación podría jugar un rol en el
mejoramiento de la organización y la facilidad de uso. Este es el motivo por el que HTML
provee el elemento fieldset, el cual actúa como un contenedor de controles. Con este
elemento, los autores pueden hacer divisiones al formulario y organizar los controles
temáticamente.
Un grupo fieldset puede además tener un título para identificar la composición o el
propósito del conjunto de controles que contiene. Este título puede ser provisto por el
elemento legend, el cual debe ser declarado como primer hijo del grupo (fieldset).
Ejemplo:.
<form action="../../form-result.php" target="_blank">
<fieldset> <legend>Información personal</legend> <p>

36
 </label>Nombre: <input type="text" name="nombre"></label></p>
<p><label>Dirección: <input type="text" name="direccion"></label></p>
</fieldset>
<fieldset> <legend>Preferencias</legend> <p>
<label><input type="checkbox" name="arte"> Arte</label><br>
<label><input type="checkbox" name="television">
Televisión</label><br> <label><input type="checkbox"
name="videojuegos"> Videojuegos</label><br> <label><input
type="checkbox" name="deportes"> Deportes</label><br> </p>
</fieldset> <input type="submit" value="Enviar">
</form>

37
Código de colores en HTML
Código del
Nombre del color Apariencia
color
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
Aqua #70DB93
Baker's Chocolate #5C3317
Blue Violet #9F5F9F
Brass #B5A642
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
Copper #B87333
Coral #FF7F00
Corn Flower Blue #42426F
Dark Brown #5C4033
Dark Green #2F4F2F
Dark Green Copper #4A766E
Dark Olive Green #4F4F2F
Dark Orchid #9932CD
Dark Purple #871F78
Dark Slate Blue #6B238E
Dark Slate Grey #2F4F4F
Dark Tan #97694F
Dark Turquoise #7093DB
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
Gold #CD7F32
Goldenrod #DBDB70
Gray #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
Hunter Green #215E21
Indian Red #4E2F2F
Khaki #9F9F5F
Light Blue #C0D9D9
Light Grey #A8A8A8
Light Steel Blue #8F8FBD

38
Light Wood #E9C2A6
Lime #32CD32
Mandarian Orange #E47833
Maroon #8E236B
Medium Aquamarine #32CD99
Medium Blue #3232CD
Medium Forest Green #6B8E23
Medium Goldenrod #EAEAAE
Medium Orchid #9370DB
Medium Sea Green #426F42
Medium Slate Blue #7F00FF
Medium Spring Green #7FFF00
Medium Turquoise #70DBDB
Medium Violet Red #DB7093
Medium Wood #A68064
Midnight Blue #2F2F4F
Navy #23238E
Neon Blue #4D4DFF
Neon Pink #FF6EC7
New Midnight Blue #00009C
New Tan #EBC79E
Old Gold #CFB53B
Orange #FF7F00
Orange Red #FF2400
Orchid #DB70DB
Pale Green #8FBC8F
Pink #BC8F8F
Plum #EAADEA
Quartz #D9D9F3
Rich Blue #5959AB
Salmon #6F4242
Scarlet #8C1717
Sea Green #238E68
Semi-Sweet Chocolate #6B4226
Sienna #8E6B23
Silver #E6E8FA
Sky Blue #3299CC
Slate Blue #007FFF
Spicy Pink #FF1CAE
Spring Green #00FF7F
Steel Blue #236B8E
Summer Sky #38B0DE
Tan #DB9370
Thistle #D8BFD8
Turquoise #ADEAEA
Very Dark Brown #5C4033
Very Light Grey #CDCDCD
Violet #4F2F4F
Violet Red #CC3299
Wheat #D8D8BF
Yellow Green #99CC32

39
CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR CÓDIGO COLOR
#000000 #330000 #660000 #990000 #CC0000 #FF0000
#000033 #330033 #660033 #990033 #CC0033 #FF0033
#000066 #330066 #660066 #990066 #CC0066 #FF0066
#000099 #330099 #660099 #990099 #CC0099 #FF0099
#0000CC #3300CC #6600CC #9900CC #CC00CC #FF00CC
#0000FF #3300FF #6600FF #9900FF #CC00FF #FF00FF
#003300 #333300 #663300 #993300 #CC3300 #FF3300
#003333 #333333 #663333 #993333 #CC3333 #FF3333
#003366 #333366 #663366 #993366 #CC3366 #FF3366
#003399 #333399 #663399 #993399 #CC3399 #FF3399
#0033CC #3333CC #6633CC #9933CC #CC33CC #FF33CC
#0033FF #3333FF #6633FF #9933FF #CC33FF #FF33FF
#006600 #336600 #666600 #996600 #CC6600 #FF6600
#006633 #336633 #666633 #996633 #CC6633 #FF6633
#006666 #336666 #666666 #996666 #CC6666 #FF6666
#006699 #336699 #666699 #996699 #CC6699 #FF6699
#0066CC #3366CC #6666CC #9966CC #CC66CC #FF66CC
#0066FF #3366FF #6666FF #9966FF #CC66FF #FF66FF
#009900 #339900 #669900 #999900 #CC9900 #FF9900
#009933 #339933 #669933 #999933 #CC9933 #FF9933
#009966 #339966 #669966 #999966 #CC9966 #FF9966
#009999 #339999 #669999 #999999 #CC9999 #FF9999
#0099CC #3399CC #6699CC #9999CC #CC99CC #FF99CC
#0099FF #3399FF #6699FF #9999FF #CC99FF #FF99FF
#00CC00 #33CC00 #66CC00 #99CC00 #CCCC00 #FFCC00
#00CC33 #33CC33 #66CC33 #99CC33 #CCCC33 #FFCC33
#00CC66 #33CC66 #66CC66 #99CC66 #CCCC66 #FFCC66
#00CC99 #33CC99 #66CC99 #99CC99 #CCCC99 #FFCC99
#00CCCC #33CCCC #66CCCC #99CCCC #CCCCCC #FFCCCC
#00CCFF #33CCFF #66CCFF #99CCFF #CCCCFF #FFCCFF
#00FF00 #33FF00 #66FF00 #99FF00 #CCFF00 #FFFF00
#00FF33 #33FF33 #66FF33 #99FF33 #CCFF33 #FFFF33
#00FF66 #33FF66 #66FF66 #99FF66 #CCFF66 #FFFF66
#00FF99 #33FF99 #66FF99 #99FF99 #CCFF99 #FFFF99
#00FFCC #33FFCC #66FFCC #99FFCC #CCFFCC #FFFFCC
#00FFFF #33FFFF #66FFFF #99FFFF #CCFFFF #FFFFFF

40