Curso de HTML Básico

Curso de HTML básico
Indice de Contenido
¿Porqué el HTML?
Historia del HTML

HTML 4
Las raíces del HTML
Las etiquetas
Estructura de las páginas WEB
Etiquetas importantes
Escribir y guardar páginas WEB
Etiquetas de contenido
La etiqueta <P>
Los encabezados
Otras etiquetas
Caracteres especiales
Los espacios
Las tablas
Definición de tablas
La etiqueta <TABLE>
Las etiquetas <TR> y <TD>
Los marcos (frames)
Definición de marcos
La etiqueta <FRAMESET>
La etiqueta <FRAME>
Marcos múltiples
Enlaces entre marcos
La etiqueta <NOFRAMES>
Formularios
Definición de formularios
Elementos de un formulario
Guiones (scripts)
Definición de guiones
Inclusión de giuones
Applets
Uso de applets
Recursos en HTML
Software
Cursos En Línea
1.- ¿Por qué el HTML?

2.- Estructura de las páginas WEB
3.- Etiquetas de contenido
4.- Las tablas
5.- Los Marcos (Frames)
6.- Formularios
¿Por qué el HTML?

¿Porqué el HTML?
Para publicar información de manera que pueda ser distribuida globalmente, se necesita un lenguaje comprensible
en forma universal, un tipo de "lengua madre" que todas las computadoras puedan potencialmente comprender.
El lenguaje de publicación usado por la World Wide Web es el HTML (HyperText Markup Language), en español,
lenguaje de marcado hipertextual.
El HTML brinda a los autores la capacidad de:
• Publicar documentación en línea con encabezados, texto, tablas, listados, imágenes, etc.
• Enviar información en línea vía enlaces hipertextuales, a través del uso del ratón.
• Incluir hojas de cálculo, videos, sonidos y otras aplicaciones directo en los documentos.
Historia del HTML
El HTML fue desarrollado inicialmente por Tim Berners-Lee mientras trabajaba en el CERN y popularizado gracias a
la aparición del navegador Mosaic (Desarrollado en NCSA). Durante la década del 90, el HTML creció y se desarrolló
al tiempo que lo hacía la World Wide Web. De un tiempo a esta parte el HTML se ha extendido hacia diversas áreas
de desarrollo, lo cual no podría realizarse sin la activa colaboración de un enorme número de desarrolladores Web
en todo el mundo.
El desarrollo de la version 2.0 del HTML fue patrocinado por el IETF (Internet Engineering Task Force) durante 1994
y la versión 3.0, desarrollada durante 1995 proponía una versión mucho más rica del HTML, a pesar que aún no
había acuerdo en cuanto a la estandarización de alguna de las versiones, lo cual recién se llevó adelante en 1997,
con la aparición de la versión 3.2 del HTML desarrollada por el Web Consortium.
La idea de los desarrolladores del HTML es que los documentos escritos en este lenguaje deberían funcionar bien en
cualquiera de los navegadores (Netscape Navigator, Microsoft Internet Explorer, etc.) y en todas las plataformas
(Windows, UNIX, Mac, etc.) logrando de esta forma una interoperabilidad que reduce los costos al tener que
desarrollar una sola versión de los documentos. Si esto no se consigue, existe el gran riesgo de que la Web se
convierta en un mundo donde existan diferentes propietarios de formatos incompatibles entre si, reduciendo el
potencial comercial de la Web para todos sus participantes.
El HTML ha sido desarrollado con la visión de que todo tipo de dispositivos puedan ser capaces de visualizar
información de la Web: Computadoras personales con monitores gráficos y variedad de resolución de colores y
tamaño, teléfonos celulares, agendas electrónicas personales, dispositivos de reconocimiento de voz, computadoras
con alto o bajo ancho de banda, etc.
HTML 4
El HTML 4 extiende el HTML con mecanismos para el uso de hojas de estilo, scripting, marcos, objetos, soporte para
el uso de distintas direcciones de texto (de derecha a izquierda), tablas y formularios mejorados, ofreciendo
accesibilidad a personas con capacidades disminuidas.
El HTML 4.01 es una revisión del HTML 4.0 que corrige errores y realiza algunos cambios de la versión anterior.
Internacionalización
Esta versión de HTML ha sido diseñada con la ayuda de expertos en el campo de la internacionalización, para que
los documentos escritos en cualquier lenguaje puedan ser transportados fácilmente alrededor del mundo.
Un paso importante dentro del desarrollo del HTML ha sido la adopción del estándar de la norma ISO/IEC:10646
como juego de caracteres para el HTML. Es el estándar que mejor trata los asuntos relacionados con la
representación internacional de caracteres, dirección del texto, puntuación y otros asuntos sobre lenguaje.
El HTML ofrece actualmente un gran soporte para diversos lenguajes humanos dentro de sus documentos. Esto
facilita el indexado de documentos para motores de búsqueda, tipografía de alta calidad, mejoras en la conversión
de texto a sonido, etc.
Accesibilidad
Como la comunidad de la Web crece, también lo hace la diversidad de sus miembros en cuanto a sus habilidades y
destrezas. Es por eso que resulta crucial que las tecnologías de base sean apropiadas para sus necesidades básicas.
El HTML ha sido desarrollado para lograr que las páginas Web sean más accesibles para aquellos con capacidades
físicas disminuidas.
La versión 4 del HTML incluye:
• Mejor distinción entre estructura y presentación de los documentos.

• La habilidad de marcar una descripción de texto de un objeto incluido (con el elemento OBJECT).
• Un nuevo mecanismo para los mapas de imágenes (elemento MAP) que permite a los autores integrar
enlaces de imagen y texto.
• El requerimiento que un texto alternativo acompañe las imágenes y los mapas de imagen incluidos con el
elemento AREA.
• Descripciones largas para tablas, imágenes, marcos, etc.
Aquellos autores que diseñen páginas teniendo en cuenta su accesibilidad, no sólo recibirán loas de la comunidad de
personas con capacidades disminuidas sino que tendrán otro beneficio: los documentos de HTML bien diseñados, y
que separan estructura y presentación, se adaptarán más fácilmente a las nuevas tecnologías.
Las raíces del html
El HTML (HyperText Markup Language) tiene sus raíces en el SGML (Standard Generalized Markup Language) el
cual es un sistema para la definición de lenguajes de marcado. El HTML es un ejemplo de un lenguaje de marcado.
A continuación, un documento típico en HTML:
<HTML>
<HEAD>
<TITLE>Mi primer documento HTML</TITLE>
</HEAD>
<BODY>
<P>HOLA!!!</p>
</BODY>
</HTML>
Historia de la World Wide Web
La Web fue creada en 1989. Las palabras utilizadas por Tim Berners-Lee para definir el origen de la WWW resultan
más que elocuentes: "había necesidad de una herramienta que permita compartir el conocimiento". Entonces él y su
compañero Robert Cailliau crearon un prototipo para el CERN y lo presentaron a la comunidad de Internet para
testarlo.
La Web no es Internet. Es, en realidad, una forma de utilizar la infraestructura de Internet. En otras palabras, la
Web es una aplicación de Internet.
Quizás el desarrollo tecnológico más importante en la historia de la Web, más allá de su creación, fue el de los
navegadores con entorno gráfico (los hay en modo texto, como el Lynx). Comenzando con el Mosaic, de NCSA y su
evolución hacia el Netscape Navigator y el Microsoft Internet Explorer, estos programas permiten a los usuarios
"navegar" entre los diferentes recursos de la Web en un entorno extremadamente amigable. Esto convierte a la
Web en una experiencia entretenida y apoya definitivamente la verdadera revolución que es la Web.
Entonces ¿qué es exactamente la Web?. Es una compleja, internacional, multi-plataforma, multi-lenguaje,
multicultural mezcla de servidores, clientes, usuarios, bases de datos, todos hablando, trabajando, buscando,
accediendo, descargando archivos, y quien sabe que más.
Como tal, nadie es dueño de la web, nadie la controla. De hecho, por su naturaleza y diseño, esto es imposible, ya
que la Web es intangible, no se la puede agarrar, pero se puede pensar en la web no como una cosa, sino más bien
como un proceso, una acción, un medio de comunicación.
Podemos pensar también que la Web es el gran contenedor de la información, que se distribuye globalmente a
través de diversas plataformas utilizando diferentes protocolos de comunicaciones, uno de los cuales es en HTTP
(HyperText Transfer Protocol). Este protocolo es el utilizado para transmitir un documento HTML entre el servidor y
el cliente. El navegador recibe el documento y lo interpreta.
Las etiquetas
En principio, una página Web se escribe utilizando etiquetas de HTML, que son instrucciones que se insertan en el
documento entre los símbolos "<" (menor que) y ">" (mayor que). Para comenzar a dar formato al texto, se inserta
el nombre de la etiqueta de la siguiente forma:
Para finalizar, se inserta el mismo nombre de etiqueta, antecedido de una barra inclinada:
Por ejemplo, para insertar un párrafo, el código necesario es el siguiente:
<p>Este es el párrafo</p>
Los nombres de las etiquetas pueden estar escritos indistintamente con mayúsculas o minúsculas. Así, las dos
posibles formas de escribir un párrafo son:
<p>Este es el párrafo</p>
<P>Este es el párrafo</P>
También es posible escribir etiquetas dentro de otras etiquetas. Por ejemplo, para centrar un párrafo en la página,
se utiliza el siguiente código:
<p><center>Este es el párrafo centrado</center></p>
Hay que tener en cuenta el sistema de anidado de etiquetas. Para el ejemplo anterior, aquí van dos formas erróneas
de escribir el código:
<p><center>Este es el párrafo centrado</p></center>
<center><p>Este es el párrafo centrado</center></p>
Finalmente, las etiquetas pueden ser modificadas agregándoles atributos:
<p align=center>Este texto está centrado</p>
Algunas cosas a tener en cuenta sobre los atributos:
• No es necesario escribirlos entre comillas, a no ser que el primer carácter del atributo sea un espacio en
blanco.
• No hay que dejar espacios en blanco antes o después del signo igual.
• Los atributos se escriben en la apertura de la etiqueta y no se incluyen en el cierre de la misma.
Es importante saber que los navegadores no tratan los espacios en blanco de la forma en que estamos
acostumbrados. De hecho, el siguiente ejemplo:
<p>Esto es un párrafo</p>
Se verá:
Esto es un párrafo
Como vemos, el navegador no muestra los espacios en blanco más allá del primero. Para insertar espacios dentro
del texto en una página Web, se utiliza un código de carácter especial: (non breaking space).
Ejemplo:
Se verá:
Esto es un párrafo
Lo mismo sucede con los saltos de línea:
<p>Este párrafo
está escrito en
tres líneas diferentes</p>
Se verá:
Este párrafo está escrito en tres líneas diferentes
Para insertar un salto de línea, se utiliza la etiqueta <br>.
De esta manera, para el ejemplo anterior:
<p>Este párrafo<br>
está escrito en<br>
tres líneas diferentes</p>
Se verá:
Este párrafo
está escrito en
tres líneas diferentes
Próxima lección "Estructura de las páginas Web"
Etiquetas importantes
Las etiquetas más importantes de una página Web no son las que dan formato al contenido de la página misma,
sino las que comunican cosas sobre la configuración del documento al navegador:
Código Utilidad
<!DOCTYPE> (no tiene cierre) Define la especificación de HTML que se está
utilizando:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
Esta etiqueta se escribe en la primera línea del

documento, antes de <HTML>
<HTML>..</HTML> Especifica que este documento debe ser leído como un

archivo de HTML.
La apertura se escribe luego de <!DOCTYPE>
Y el cierre en la última línea del documento.
<HEAD>..</HEAD> Especifica un área de la página donde el navegador

encontrará información sobre el documento.
Requiere la etiqueta <TITLE> como mínimo.
<TITLE>..</TITLE> Es el título de la página, y su contenido aparece en la

barra superior de la ventana del navegador.
Se escribe entre las etiquetas <HEAD> y </HEAD>.
<BODY>..</BODY> Especifica la información que será mostrada en la

ventana del navegador.
Se escribe luego de la etiqueta </HEAD>.
Posee una serie de atributos que modifican

globalmente a la página:
BGCOLOR: asigna un color de fondo.
TEXT: asigna un color al texto.
BACKGROUND: Especifica una imagen de fondo.
Ej.:
<BODY BGCOLOR=”#008080”>
<BODY TEXT=”red” BACKGROUND=”fondo.jpg”>
 Incluye un comentario que no será mostrado en la

ventana del navegador. Ej:

Se puede escribir entre <HTML> y </HTML>.
<META> (no tiene cierre) Se utiliza para ingresar información sobre el

documento.
Ejemplos:
<META HTTP-EQUIV="REFRESH" CONTENT="10;

url=segunda.html">
Redirecciona automáticamente a otra página web
<META NAME="Description"
CONTENT="descripción de mi página">
Indica a los buscadores una descripción de la página.
<META NAME="Keywords"
CONTENT="palabras,clave,separadas,por,coma">
Le da a los buscadores datos para la indexación del

documento.
<META HTTP-EQUIV="PRAGMA" CONTENT="no-
cache">
Indica al navegador que no incluya esta página en el

caché.
<META HTTP-EQUIV="expires" CONTENT="9 de

Abril de 2001 10:23:23 GMT">
Indica al navegador la fecha de expiración de la

página.
Escribir y guardar páginas Web

Para poder escribir una página Web (documento HTML), no es necesario el uso de aplicaciones tales como el
Microsoft Front Page, Macromedia Dreamweaver, HoTMeTal, etc.. Si bien estos programas facilitan la tarea, no
resultan indispensables.
De hecho, a lo largo del curso, escribiremos nuestras páginas Web utilizando el Bloc de Notas que se incluye en
Microsoft Windows (se puede utilizar cualquier procesador de texto).
Hay que tener en cuenta que el Bloc de Notas guarda los archivos con extensión "TXT" (Ej.: prueba.txt). Pero las
páginas Web deben tener la extensión "HTML" o "HTM", con lo cual, al guardar por primera vez nuestros archivos,
deberemos tipiar el nombre completo con su extensión (Ej.: "primera.html") e indicarle al Bloc de Notas que guarde
el documento como "todos los archivos" en la ventana desplegable de "tipo de archivo".
Los comentarios
Al escribir una página Web puede resultar importante la inclusión de comentarios que son puedan ser vistos por los
lectores (navegantes del sitio).
Para esto, se utiliza la etiqueta de comentario, que permite introducir código que el navegador no mostrará en la
ventana.
Se lo utiliza también para hacer "invisible" parte del código de una página.
Sintaxis de la etiqueta:

En el siguiente ejemplo utilizamos los comentarios para indicar cuestiones referentes al formato de la página.
<HTML>

<HEAD>

<TITLE>Este es el título</TITLE>

</HEAD>


<BODY>
<P>Hola!!</P>
</BODY>

Ahora utilizamos un comentario para ocultar el contenido de la página. En este ejemplo, la palabra "Hola!!" no se
verá en la ventana del navegador:

Los colores
Hemos visto diferentes etiquetas que permiten la utilización de atributos para la asignación de colores (Ej.: <FONT
color="red">; <BODY BGCOLOR="#008080">).
Existen dos formas básicas de indicar los colores. La primera es tipiando el nombre del color. Hay muy pocos
colores que pueden ser utilizados con igual resultado en los dos navegadores más populares (Netscape Navigator y
Microsoft Internet Explorer).
La segunda forma de indicar un color es por su número de código. Aunque este sistema es algo más complejo, es
mucho más recomendable que el anterior, puesto que resulta muy difícil recordar el nombre de todos los colores
posibles, mientras que el número de código esta relacionado con las cantidades de cada color básico que conforman
el color final.
Para formar un color se utiliza una cantidad de cada uno de los tres colores básicos (rojo, verde y azul), de manera
que si queremos lograr un rojo pleno, utilizamos el número más alto de rojo y el más bajo de verde de azul. Pero
¿cuáles son esos números?.
El código de un color se obtiene de un número formado a su vez por otros tres números. Veámoslo en un ejemplo
concreto:
FF0000
Este es el código para el color rojo puro. Los dos primeros números corresponden a la cantidad de rojo que contiene
este color, los siguientes dos números indican la cantidad de verde y los últimos tres números, la cantidad de azul.
La parte más difícil es entender el sistema de numeración, que es hexadecimal en vez del decimal al que estamos
acostumbrados a usar. En la numeración hexadecimal se cuenta del 0 a la F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F).
De esta manera, el número más bajo que podemos conseguir es el "00" y el más alto, el "FF".
Veamos algunos ejemplos:
Nombre
Traducción Número de código
Black negro 000000
Silver plateado C0C0C0
Gray gris 808080
White blanco FFFFFF
Maroon marron 800000
Red rojo FF0000
Purple púrpura 800080
Fuchsia fucsia FF00Ff
Green verde 008000
Lime lima 00FF00
Olive oliva 808000
Yellow amarillo FFFF00
Navy azul marino 000080
Blue azul 0000FF
Teal verde azulado 008080
Aqua celeste claro 00FFFF
Nota: al ingresar el código de color, se debe anteponer el numeral ("#"), en todos los casos.
Próxima lección "Etiquetas de contenido"
Estas etiquetas indican al navegador la forma en que se debe mostrar el contenido de la página.
La etiqueta <p>
Especifíca un párrafo. Al ingresarla el navegador incluirá una línea en blanco que lo separa del contenido anterior y
posterior.
El siguiente código:
<p>Esto es otro párrafo</p>
Se verá:
Esto es un párrafo
Esto es otro párrafo
A partir de la versión 3.2 del HTML, se incluyó la posibilidad de alinear los párrafos con el atributo "ALIGN". Es
posible hacerlo a la izquierda, al centro o a la derecha:
<P ALIGN="left">Este párrafo está alineado a la izquierda</P>

<P ALIGN="center">Este párrafo está alineado al centro</P>
<P ALIGN="right">Este párrafo está alineado a la derecha</P>
Esto se verá asi:

Los encabezados
Existen seis niveles de encabezados que se pueden incluir en una página Web:
<H1>Encabezado de nivel uno</H1>

<H2>Encabezado de nivel dos</H2>
<H3>Encabezado de nivel tres</H3>
<H4>Encabezado de nivel cuatro</H4>
<H5>Encabezado de nivel cinco</H5>
<H6>Encabezado de nivel seis</H6>
Ejemplos:
Otras etiquetas
Existen otras etiquetas que permiten trabajar con el diseño del texto de una página Web.
A continuación, algunos ejemplos:
Código Utilidad
<ADRESS>..</ADRESS> Contiene información sobre una
dirección postal.
Se escribe usualmente al final de la

página.
<BLOCKQUOTE>..</BLOCKQUOTE> Se utiliza para ingresar una cita.
Al interpretarlo, el navegador deja una

sangría.
<CENTER>..</CENTER> Todo lo que esté contenido por esta

etiqueta, aparecerá centrado en la
ventana del navegador.
<DIV>..</DIV> Se lo utiliza para contener a otras

etiquetas HTML, para mostrarlas de un
modo separado al resto del
documento, añadiendo un corte de
línea antes y otro después de su
inclusión.
<MARQUEE>..</MARQUEE> Permite la inserción de un párrafo que

se deslizará por la ventana.
<B>..</B> El texto será mostrado en negrita.
<STRONG>..</STRONG> El texto será mostrado en negrita.
<I>..</I> El texto será mostrado en itálica.
<EM>..</EM> El texto será mostrado en itálica.
<U>..</U> El texto será subrayado.
<S>..</S> El texto será tachado.
<PRE>..</PRE> No asigna ningún formato especial al

texto.
<BR> (no tiene cierre) Provoca un salto de línea.
<FONT>..</FONT> Se utiliza para dar formato especial a

la tipografía. Para que surta efecto,
debe ser usado con alguno de sus
atributos:
color: cambia el color de la letra
size: cambia el tamaño de la letra
face: cambia el tipo de letra
Ejemplos:
<FONT face=”verdana”>
<FONT size=”2” color=”blue”>
Caracteres especiales
Dentro de un documento HTML, todo lo que este dentro de las etiquetas HTML será considerado como texto
(excepto etiquetas dentro de etiquetas).
Una página web es codificada utilizando un juego de caracteres que se describe dentro de la especificación MIME
"text/html". Específicamente, esto se refiere al juego de caracteres conocido como "US-ASCII" (o ISO-8859-1) que
codifica al juego de caracteres conocido como Latin Alphabet No 1.
Como ciertos caracteres están sujetos a interpretación, dependiendo del lenguaje que utilizan por defecto las
diferentes computadoras, para asegurarse que en cualquier lugar del mundo el texto de una página web sea visto
de la misma manera, se utilizan caracteres especiales, como se describe a continuación:
Símbolo Código Descripción

á á Letra “a” (minúscula
acentuada)
é é Letra “e” (minúscula
acentuada)
í í Letra “i” (minúscula
acentuada)
ó ó Letra “o” (minúscula
acentuada)
ú ú Letra “u” (minúscula
acentuada)
Á Á Letra “A” (mayúscula
acentuada)
É É Letra “E” (mayúscula
acentuada)
Í Í Letra “I” (mayúscula
acentuada)
Ó Ó Letra “O” (mayúscula
acentuada)
Ú Ú Letra “U” (mayúscula
acentuada)
< < Signo “menor que”
> > Signo “mayor que”
& & Ampersand (“y”)
“” " Comillas
Los espacios
Estas etiquetas se utilizan para generar espacios dentro del contenido de un documento HTML:
<BR> (no tiene cierre) Genera un corte de línea.
El espacio que se genera depende del tipo de

navegador que esté utilizando el lector.
<HR> (no tiene cierre) Establece una línea horizontal.
Posee una serie de atributos:
SIZE=”valor”: Indica el alto de la línea

horizontal.
WIDTH=”valor o porcentaje”: Indica el

ancho de la línea horizontal.
ALIGN=”left|center|right”: Establece la
alineación de la línea horizontal.
NOSHADE: Quita la sombra que por

defecto tienen las líneas horizontales.
COLOR=”código o nombre”: Establece el

color de la línea.
Genera un espacio en blanco.
No es exactamente una etiqueta, puesto que

no conserva las características de sintaxis
(no posee < y >).
De hecho, pertenece al grupo de caracteres
especiales.
Las tablas
Definición de tablas
Una tabla brinda la posibilidad de organizar el contenido (todo o una parte) de una página web.
El HTML permite la inclusión de tablas dentro de una página web.
La etiqueta <TABLE>
Los posibles atributos de esta etiqueta son:
BORDER=”valor” Establece el ancho del borde de la tabla. Si

el valor es “0”, se ocultarán los bordes.
El valor por defecto depende de los

diferentes navegadores, por lo cual es
recomendable poner siempre este atributo.
CELLPADDING=”valor” Establece la cantidad de espacio en blanco

que quedará entre el contenido de una celda
y el borde de esta.
CELLSPACING=”valor” Indica la cantidad de espacio en blanco que
quedará entre cada una de las celdas.
WIDTH=”valor o porcentaje” Expresa el ancho total de la tabla. En el

caso de utilizar un porcentaje, este será
respecto del elemento contenedor (de la
página o de la celda en la que está).
HEIGHT=”valor o porcentaje” Expresa el alto total de la tabla. En el caso

de utilizar un porcentaje, este será respecto
del elemento contenedor (de la página o de
la celda en la que está).
ALIGN=”left|right” Establece la alineación de la tabla.
BGCOLOR=”código o nombre” Indica un color de fondo para la tabla.
BORDERCOLOR=”código o nombre” Indica un color de fondo para el borde de la

tabla.
BORDERCOLORLIGHT=”código o nombre” Establece el color para los bordes superior e

izquierdo de la tabla y derecho e inferior de
cada celda.
Nota: Este atributo sólo es aceptado por el Microsoft

Internet Explorer.
BORDERCOLORDARK=”código o nombre” Establece el color para los bordes inferior y

derecho de la tabla y superior e izquierdo
de cada celda.

Internet Explorer.
BACKGROUND=”nombre de archivo” Inserta una imagen de fondo para la tabla.
Nota: los distintos navegadores difieren en

la forma en que presentan esta imagen.
La etiqueta <TABLE> es en realidad la que contiene una serie de etiquetas que dan formato a las tablas.
Es decir que resulta necesario incluir otras etiquetas para poder "armar" una tabla. Estas son:
<TR>..</TR> Indica una fila dentro de la tabla.
Se escribe dentro de las etiquetas

<TABLE> y </TABLE>.
Debe contener las etiquetas <TD> y </TD>
<TD>..</TD> Especifica cada celda dentro de la fila.
Se escribe dentro de las etiquetas <TR> y

</TR>.
Contiene la información que será visible

dentro de la tabla.
<TH>..</TH> Indica una celda de encabezado de tabla.

Son bastante similares a <TD> con la
diferencia que su contenido por defecto está
en negrita y centrado.
Veamos ahora el detalle de cada una.
La etiqueta <TR>
Como ya se dijo, la etiqueta <TR> genera una fila dentro de la tabla y a su vez posee una serie de atributos:
ALIGN=”left|center|right” Establece el tipo de alineación

horizontal dentro de las celdas de la
fila.
VALIGN=”top|middle|bottom” Establece el tipo de alineación

vertical dentro de las celdas de la fila.
BGCOLOR=”código o nombre” Indica un color de fondo para la

tabla.
BORDERCOLOR=” código o nombre” Indica un color de fondo para el

borde de la tabla.
BORDERCOLORLIGHT=” código o nombre” Establece el color para los bordes

superior e izquierdo de la tabla y
derecho e inferior de cada celda.
Nota: Este atributo sólo es aceptado por el

Microsoft Internet Explorer.
BORDERCOLORDARK=” código o nombre” Establece el color para los bordes

inferior y derecho de la tabla y
superior e izquierdo de cada celda.
Nota: Este atributo sólo es aceptado por el

Microsoft Internet Explorer.
La etiqueta <TD>
Esta etiqueta, que como se dijo antes genera una celda dentro de la fila, a su vez posee una serie de atributos:
ALIGN=”left|center|right” Establece el tipo de alineación horizontal

dentro de la celda.
VALIGN=”top|middle|bottom” Establece el tipo de alineación vertical

dentro de la celda.
WIDTH=”valor o porcentaje” Especifica el ancho de la celda.
Nota: al modificar el ancho de una celda, se

estará modificando el ancho de toda la
columna
HEIGHT=”valor o porcentaje” Especifica el alto de la celda.
Nota: al modificar el alto de una celda, se

estará modificando el alto de toda la fila.
COLSPAN=”valor” Indica la cantidad de columnas que

abarcará la celda.
ROWSPAN=”valor” Indica la cantidad de filas que abarcará la

celda.
BGCOLOR=”código o nombre” Indica un color de fondo para la celda.
BORDERCOLOR=”código o nombre” Indica un color para el borde de la celda.
BORDERCOLORLIGHT=”código o nombre” Establece el color para los bordes superior e

izquierdo de la tabla y derecho e inferior de
la celda.

Internet Explorer.
BORDERCOLORDARK=”código o nombre” Establece el color para los bordes inferior y
derecho de la tabla y superior e izquierdo
de la celda.

Internet Explorer.
Ejemplo:
<TABLE border="9" width="75%" height="80%" bordercolor="#008080"

bordercolordark="#008000" bordercolorlight="#000080" bgcolor="#FF9999">
<TR>
<TD>A1</TD>
<TD>A2</TD>
<TD>A3</TD>
</TR>
<TR>
<TD>B1</TD>
<TD>B2</TD>
<TD>B3</TD>
</TR>
<TR>
<TD>C1</TD>
<TD>C2</TD>
<TD>C3</TD>
</TR>
</TABLE>
Se verá asi:
<< Anterior - Siguiente >>
Los Marcos (Frames)

Definición de marcos
El uso de marcos permite al navegador sub-dividir la ventana en que se muestran las páginas Web en secciones
separadas, las cuales pueden ser actualizadas, o mostrar cada una diferentes documentos HTML al mismo tiempo.
Esto resulta muy útil cuando cierta parte de la información será requerida en todo el sitio, de manera que, por
ejemplo, podemos generar un índice de contenidos que permanecerá a la vista de los lectores del sitio mientras
navegan por el mismo.
Los marcos (en inglés, frames) utilizan tres tipos de etiquetas: <FRAMESET> , <FRAME> y <NOFRAMES>.
Los documentos que incluyen marcos no difieren demasiado de aquellos escritos en HTML normal.
La diferencia es que la sección <BODY> es reemplazada por <FRAMESET>, donde se describe la estructura del
documento.
La sintaxis básica para una página de marcos es la siguiente:
<HTML>
<HEAD>
<TITLE>Marcos</TITLE>
</HEAD>
<FRAMESET COLS="35%,*">
<FRAME NAME="izq" SRC="menu.html" scrolling="yes">
<FRAME NAME="der" SRC="inicial.html" scrolling="yes">
</FRAMESET>
<NOFRAMES>
<BODY>
<P>Esta página contiene marcos, pero su navegador no los soporta</P>
</BODY>
</NOFRAMES>
</HTML>
Veamos los tres tipos de etiquetas que utilizan los marcos:
La etiqueta <FRAMESET>
Esta etiqueta da formato al conjunto de marcos.
Ejemplo:
<FRAMESET COLS="25%,75%">
..
</FRAMESET>
Es la que contiene a las etiquetas <FRAME> y tiene algunos atributos:
Atributo Utilidad
ROWS="valores_separados_por_coma" Indica que este grupo de marcos estará dividido en
forma horizontal. Además, especifica el espacio que
ocupa cada una de las filas. Ej.: <FRAMESET
ROWS="25%,75%">
COLS="valores_separados_por_coma" Indica que este grupo de marcos estará dividido en
forma vertical. Además, especifica el espacio que
ocupa cada una de las filas. Ej.: <FRAMESET
COLS="25%,75%">
BORDER="valor" Especifica el ancho en pixels del borde que separa un
marco de otro.
BORDERCOLOR="código o nombre" Indica un color para el borde que separa un marco de

otro.
FRAMEBORDER="yes|no" Especifica si se debe mostrar o no el borde que separa

un marco de otro.
La etiqueta <FRAME>
Se escribe dentro de la etiqueta <FRAMESET> y es la que da formato a cada marco de la página. Además indica
el documento que se mostrará dentro de ese marco. Esta etiqueta no tiene cierre, es decir, no existe la etiqueta
“</FRAME>”.
Ejemplo:
<FRAME SRC="menu.html">
Los atributos que acepta esta etiqueta son:
Atributo Utilidad
SRC="ubicación y nombre de archivo" Indica el documento HTML que será mostrado dentro
de este marco. Ej.: <FRAME SRC="menu.html">
NAME="nombre_de_frame" Se utiliza para nombrar a un marco, de manera que
pueda ser utilizado como objetivo de enlaces en otros
documentos, utilizando la sintaxis <A
HREF="archivo" TARGET="nombre_de_frame">
MARGINWIDTH="valor" Establece los márgenes izquierdo y derecho dentro de
este marco.
MARGINHEIGHT="valor" Establece los márgenes superior e inferior dentro de
este marco.
SCROLLING="yes|no|auto" Controla la aparición de las barras de desplazamiento
de cada marco. La opción "yes", fuerza la aparición de
estas barras, aunque no sea necesario. La opción
“auto” inserta las barras sólo si el contenido de la
página lo requiere. Si se utiliza la opción “no”, las
barras no se mostrarán, aunque el contenido de la
página no pueda ser visto en su totalidad. Nota: se
debe tener cuidad con el uso de la opción "no", pues no
se puede saber la resolución en que será vista la
página por cada lector.
NORESIZE Por defecto, los marcos pueden ser cambiados de

tamaño por los lectores. Al agregar este atributo (que
no requiere un valor) se anula esa posibilidad.
FRAMEBORDER="yes|no" Controla la aparición del borde del marco.
BORDERCOLOR="código o nombre" Especifica un color para el borde del marco. Nota: este
atributo sólo es válido para el Netscape Navigator
Múltiples marcos
Para generar una página con múltiples marcos, existen básicamente dos posibilidades.
La primera es:
<FRAMESET COLS="35%,*" border="5">

<FRAME NAME="izq" SRC="menu.html" noresize scrolling="auto">
<FRAMESET rows="25%,*">
<FRAME NAME="supder" SRC="superior.html" noresize scrolling="no">
<FRAME NAME="infder" SRC="inicial.html" noresize scrolling="auto">
</FRAMESET>
</FRAMESET>
Nótese que en el lugar en que debería ir el segundo <FRAME> se ha colocado un nuevo <FRAMESET> compuesto a
su vez por dos <FRAME>. De esta manera, estamos armando un conjunto de marcos múltiples en una sola página
Web.
La segunda posibilidad implica la creación de un documento Web extra, y es la siguiente:
<FRAMESET COLS="35%,*" border="5">

<FRAME NAME="izq" SRC="menu.html" noresize scrolling="auto">
<FRAME NAME="der" SRC="multiple.html" noresize scrolling="auto">
</FRAMESET>
Donde el segundo <FRAME> inserta un documento (multiple.html) que contiene el siguiente código:
<FRAMESET ROWS="25%,*" border="5">

<FRAME NAME="sup" SRC="superior.html" noresize scrolling="no">
<FRAME NAME="inf" SRC="inicial.html" noresize scrolling="auto">
</FRAMESET>
En este caso, el primer <FRAMESET> está insertando una página Web en el marco de la izquierda y otra en el de
la derecha. Pero la página de la derecha no es un documento HTML normal, sino que es otro conjunto de marcos,
que vuelve a dividir el navegador (en este caso, el marco de la derecha) e inserta otras dos páginas Web, una en el
marco superior y otra en el inferior.
Enlaces entre marcos
Como se muestra anteriormente, cada marco posee un atributo que lo nombra
(<NAME="nombre_del_marco">). Este atributo permite que al insertar un enlace dentro de un marco, el creador
de la página pueda decidir en qué marco se activará dicho enlace.
Por ejemplo, si se tiene una página construida con dos marcos, es posible insertar un enlace dentro de uno de ellos
y que la página Web que se muestra, aparezca dentro del otro marco.
Esto se consigue utilizando el atributo "TARGET" dentro del enlace, de la siguiente forma:
<A HREF="nueva.html" TARGET="nombre_del_marco">
Así, cuando el lector haga click sobre el enlace, la página "nueva.html" se verá en el otro marco.
La etiqueta <NOFRAMES>
Esta etiqueta se escribe a continuación de </FRAMESET>, es decir, justo después de cerrar el conjunto de
marcos.
Ha sido desarrollada para aquellos navegadores que no soportan marcos, de manera que se pueda insertar
información para los lectores que navegan con estos programas.
Dentro de las etiquetas <NOFRAMES> y </NOFRAMES> se suele insertar las etiquetas <BODY> y
</BODY> dentro de las cuales se escribirá un mensaje para aquellos que no pueden ver los marcos.
Ejemplo:
<NOFRAMES>
<BODY>
<P>Esta página contiene marcos, pero su navegador no los soporta</P>
</BODY>
</NOFRAMES>
De todas formas, hoy en día es mínima la cantidad de gente que recorre la Web con este tipo de navegadores.
ormularios
Definición de formularios
Uno de los principales aportes de la versión 2.0 del HTML fue la inclusión de elementos que permitían a los lectores
ingresar información dentro de una página Web. Son las etiquetas de formulario y permiten la inclusión de objetos
como cajas de texto, listados desplegables, casillas de verificación, etc..
Pero es importante aclarar que mientras estos elementos se utilizan para mostrar al lector un formulario, el
verdadero valor de estos radica en lo que sucede cuando la información ingresada es enviada (usualmente al activar
el botón de envío de formulario). Aquí es donde aparece el uso de CGI (Common Gateway Interface), que es la
interface que comunica al cliente (el navegador) con el servidor.
La etiqueta para la inclusión de un formulario es <FORM> y posee los siguientes atributos:
ACTION=”url” Especifica el lugar donde deben ser enviados los datos

del formulario para buscar una respuesta. Este atributo
puede contener simplemente una dirección de correo
electrónico, o apuntar a una aplicación que utilice CGI
para manejar los datos enviados.
METHOD=”post | get” Especifica el método de acceso a la url indicada en el
atributo “ACTION” y su valor puede ser “get” o
“post”.
El método “get” suele utilizarse cuando el envío de los

datos no requiere procesamiento externo de los
mismos. Pero cuando el formulario es utilizado para
actualizar una base de datos, se usa el método
“post”.
NAME=”texto” Asigna un nombre al formulario, que puede ser utilizado
posteriormente por diversos tipos de guiones (scripts)
ENCTYPE=”tipo de MIME” Especifica el tipo de codificación que se utiliza para
escribir el formulario. Usualmente el valor es:
application/x-www-form-urlencoded
Ejemplo:
Elementos de un formulario
Un formulario no está completo sino hasta que se utiliza alguno de los elementos internos, que no son más que
ciertas etiquetas que insertan dentro del documento HTML los diferentes campos del formulario.
La etiqueta <INPUT ...> inserta un campo cuyo contenido puede ser modificado o activado por el usuario. Sus
atributos son:
ALIGN=”top | middle | bottom” Define la alineación del <INPUT>

CHECKED Indica cuando un checkbox o radio button se
encuentran seleccionados
MAXLENGHT=”valor” Especifica el número máximo de caracteres que pueden
ser ingresados por el usuario en un campo de texto. El
valor puede ser mayor al indicado en el atributo SIZE,
en cuyo caso el texto hará scroll dentro del campo. El
valor por defecto de este atributo es ilimitado.
SIZE=”valor” Indica el espacio que ocupará el elemento en la página.
El número que se ingrese como valor será una cantidad
de caracteres.
NAME=”texto” Atribuye un nombre al campo de formulario, que se
utilizará posteriormente, durante el procesamiento de
los datos del mismo.
VALUE=”...” Asigna al campo de formulario un valor inicial.
Existe además otro atributo para la etiqueta <INPUT>, que es "TYPE", y que especifica el tipo de datos que el
campo INPUT aceptará. Sus posibles valores son:
TYPE=”button” Inserta un botón dentro del documento HTML y se lo

suele utilizar junto con JavaScript o Visual Basic Script.
TYPE=”checkbox” Se utiliza para selecciones simples o múltiples de tipo
booleanas (donde un campo puede estar seleccionado o
no seleccionado). Es representado en la página por una
o más casillas de verificación que el usuario puede
activar (una o más). Cada grupo de checkbox
deberá tener un “NAME” (nombre) único.
TYPE=”radio” Se utiliza para selecciones simples (donde solo una
opción puede seleccionarse).
Es representado en la página web por dos o más
círculos de selección que el usuario puede activar (sólo
uno a la vez). Al activar cada “radio” automáticamente
se desactivará el seleccionado anteriormente.
TYPE=”image” Inserta una imagen, la cual podrá ser clickeada por el
usuario para enviar el formulario.
TYPE=”text” Se utiliza para crear campos de ingreso de texto de una
sola línea. Se recomienda utilizarlo junto con los
atributos “SIZE” y “MAXLENGHT”.
TYPE=”password” Similar a “text” excepto que en este caso, el texto que
el usuario ingresa no se muestra como tal, sino como
una serie de asteriscos.
TYPE=”submit” Genera un botón que al ser activado envía el
formulario. Si no se utiliza al mismo tiempo el atributo
“VALUE” (que en este caso especifica el texto que se
leerá dentro del botón), el navegador incluirá un texto
por defecto dentro del botón.
TYPE=”reset” Genera un botón que al ser activado regresa todos los
campos del formulario a su valor inicial. Se comporta
del mismo modo que “submit” respecto del atributo
“VALUE”.
Otras etiquetas que pueden ser utilizadas dentro de un formulario son:
<SELECT> Inserta un campo de selección. Es un menú desplegable

dentro del cual el usuario puede seleccionar una de las
opciones.
Si se utiliza dentro de esta etiqueta el atributo
“MULTIPLE”, el usuario podrá seleccionar más de una
opción.
Requiere el atributo “NAME”
<OPTION> Define cada una de las opciones dentro del campo
<SELECT>.
Requiere los atributos “NAME” y “VALUE”
<TEXTAREA> Define un campo de entrada de texto de una o más
líneas.
Posee los siguientes atributos:
ROWS=”valor” Indica la cantidad de filas que
ocupará.
COLS=”valor” Indica la cantidad de columnas que
ocupará.
<LABEL …> Se utiliza para conectar el texto que se relaciona con un
campo de formulario, de manera que al hacer click
sobre el texto, se activa el campo.
Ejemplo:
<LABEL FOR="rojo">Red:<INPUT
TYPE="radio" NAME="Color" VALUE="Rojo"
ID="Rojo"></LABEL>

Curso de HTML Básico

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de HTML Básico

Cargado por

Copyright:

Formatos disponibles

Curso de HTML básico

Historia del HTML

Estructura de las páginas WEB

Los marcos (frames)

1.- ¿Por qué el HTML?

¿Por qué el HTML?

Historia del HTML

• Mejor distinción entre estructura y presentación de los documentos.

Las raíces del html

<TITLE>Mi primer documento HTML</TITLE>

Historia de la World Wide Web

Por ejemplo, para insertar un párrafo, el código necesario es el siguiente:

<p><center>Este es el párrafo centrado</center></p>

<p><center>Este es el párrafo centrado</p></center>

<center><p>Este es el párrafo centrado</center></p>

Finalmente, las etiquetas pueden ser modificadas agregándoles atributos:

<p align=center>Este texto está centrado</p>

Algunas cosas a tener en cuenta sobre los atributos:

Lo mismo sucede con los saltos de línea:

Este párrafo está escrito en tres líneas diferentes

Para insertar un salto de línea, se utiliza la etiqueta <br>.

De esta manera, para el ejemplo anterior:

Próxima lección "Estructura de las páginas Web"

Esta etiqueta se escribe en la primera línea del

<HTML>..</HTML> Especifica que este documento debe ser leído como un

La apertura se escribe luego de <!DOCTYPE>

Y el cierre en la última línea del documento.

<HEAD>..</HEAD> Especifica un área de la página donde el navegador

Requiere la etiqueta <TITLE> como mínimo.

<TITLE>..</TITLE> Es el título de la página, y su contenido aparece en la

Se escribe entre las etiquetas <HEAD> y </HEAD>.

<BODY>..</BODY> Especifica la información que será mostrada en la

Se escribe luego de la etiqueta </HEAD>.

Posee una serie de atributos que modifican

BGCOLOR: asigna un color de fondo.

TEXT: asigna un color al texto.

BACKGROUND: Especifica una imagen de fondo.

<BODY TEXT=”red” BACKGROUND=”fondo.jpg”>

Incluye un comentario que no será mostrado en la

Se puede escribir entre <HTML> y </HTML>.

<META> (no tiene cierre) Se utiliza para ingresar información sobre el

<META HTTP-EQUIV="REFRESH" CONTENT="10;

Redirecciona automáticamente a otra página web

Indica a los buscadores una descripción de la página.

Le da a los buscadores datos para la indexación del

Indica al navegador que no incluya esta página en el

<META HTTP-EQUIV="expires" CONTENT="9 de

Indica al navegador la fecha de expiración de la

Escribir y guardar páginas Web

Próxima lección "Etiquetas de contenido"

Esto es otro párrafo

<P ALIGN="left">Este párrafo está alineado a la izquierda</P>

Esto se verá asi:

<H1>Encabezado de nivel uno</H1>

Se escribe usualmente al final de la

<BLOCKQUOTE>..</BLOCKQUOTE> Se utiliza para ingresar una cita.

Al interpretarlo, el navegador deja una

<CENTER>..</CENTER> Todo lo que esté contenido por esta

<DIV>..</DIV> Se lo utiliza para contener a otras

<MARQUEE>..</MARQUEE> Permite la inserción de un párrafo que

Genera un espacio en blanco.