17 19 2010 Introduccion HTML

Creación de páginas Web con HTML
1.- Introducción HTML incluye etiquetas para formato de ca-

HTML es un acrónimo de HyperText Markup racteres y formato de párrafos (por ejemplo,
Language, que traducido al español, significa para centrar un párrafo). Las etiquetas tam-
algo parecido a lenguaje de definición por eti- bién se utilizan para especificar funciones
quetas para hipertexto. como imágenes, vínculos, tablas, formularios,
Un documento hipertexto es aquel que además etc.
de incluir texto, ilustraciones, elementos mul- Todo documento HTML comienza por la eti-
timedia, etc; permite el enlace con otros do- queta <HTML> a la que sigue el encabezamiento
cumentos hipertexto que desarrollan o hacen y el cuerpo del documento.
referencia al mismo tema. En el encabezamiento se definen diversos va-
HTML, por tanto, permite convertir un texto lores válidos en todo el documento.
cualquiera en hipertexto añadiendo ciertas En el cuerpo reside la información del docu-
etiquetas al mismo; estas etiquetas permiten mento.
fundamentalmente dar formato, incluir imáge- La utilidad fundamental del encabezamiento es
nes y crear enlaces en un documento, en defi- especificar el título del documento HTML.
nitiva dan un aspecto mucho más vistoso y Este título no forma parte del documento, ya
atractivo que el de un texto normal. que no aparece en él, sino como título de la
Los documentos HTML son fáciles de crear ventana que nos lo muestra.
sólo se necesita un editor de textos que per- El cuerpo de un documento HTML contiene el
mita guardar el documento con formato de texto que, con la presentación y los efectos
texto. que se decidan, se presentará ante el hiperlec-
Para visualizarlos se precisa de programas tor. Para ello habrá que utilizar las etiquetas
capaces de interpretar el lenguaje HTML un adecuadas.
ejemplo de ellos sería el Explorador de Win- La estructura básica de un documento HTML
dows. es:
Para generarlos se utiliza cualquier programa
capaz de almacenar el archivo con formato de <HTML>
texto. <HEAD>
<TITLE> Título de la ventana </TITLE>
2.- Estructura básica de un documento </HEAD>
HTML <BODY>
En HTML una etiqueta viene dada por cual- Texto del documento, gráficos, etc.
quier texto incluido entre paréntesis angulares </BODY>
(signos < y >). </HTML>
Las etiquetas también pueden utilizarse en
pares, alrededor del texto al que se desea El cuerpo del documento tiene asociado los
aplicar formato, es decir, una etiqueta de siguientes atributos:
apertura, el texto y una etiqueta de cierre • bgcolor => especifica el color de fondo
marcada con la barra de dividir (/). del documento.
• text => especifica el color del texto del
EJEMPLO documento.
Aplicación de negrita a una parte del texto y • link => especifica el color del texto aso-
de cursiva a otra parte. ciado a los vínculos no visitados.
• vlink => especifica el color del texto
<B> Negrita </B> y <I> Cursiva </I> asociado a los vínculos visitados.
• background => especifica la ubicación de
donde <B> y </B> delimitan el texto que va en la imagen que cubrirá como mosaico el
negrita y <I> y </I> delimitan el texto que va fondo del documento.
en cursiva.
© MaDiRo-2001 1
Los colores utilizados se incluyen en el espacio Los elementos a nivel de bloque más comunes
RGB, es decir, vienen dados por tres bytes que incluyen: encabezados, párrafos, listas y líneas
se corresponden con el valor del color rojo horizontales.
(Red), el del color verde (Green) y el del color Los elementos a nivel de texto más comunes
azul (Blue). Se suelen representar con canti- incluyen: I, B, FONT, IMG, BR (salto de línea),
dades hexadecimales de seis cifras o bien por etc.
algunas de estas constantes:
Elementos a nivel de bloque
MAROON (#800000) GREEN (#008000)
RED (#FF0000) LIME (#00FF00) a) Encabezados
PURPLE (#800080) OLIVE (#808000) Hay seis niveles de encabezados (H1, H2,
FUCHSIA (#FF00FF) YELOW (#FFFF00) H3, H4, H5 y H6). Siempre que se especifi-
NAVY (#000080) BLUE (#0000FF) que un encabezado es preciso indicar la eti-
TEAL (#008080) AQUA (#00FFFF) queta de inicio y de fin. Los elementos H1
BLACK (#000000) GRAY (#808080) son más importantes que los H2 y así suce-
SILVER (#C0C0C0) WHITE (#FFFFFF) sivamente, siendo H6 el nivel de encabeza-
do menos importante. Los encabezados más
Entre paréntesis aparece la constante hexa- importantes son mostrados con una tipo-
decimal asociada a cada color. grafía mayor que los menos importantes.
La especificación de los atributos asociado al Los encabezados pueden ir acompañados del
cuerpo del documento HTML es opcional. Si no atributo ALIGN que establece la alineación
se especifica ninguno de ellos el texto se pre- del texto en el encabezado. ALIGN puede
sentará con los atributos por defecto que ten- tomar tres valores: CENTER, LEFT y
ga asociado. RIGHT.
EJEMPLO EJEMPLO
Documento HTML de letras azules sobre fon-
do rojo <HTML>
<HEAD>
<HTML> <TITLE>Prueba de títulos</TITLE>
<HEAD> <BODY bgcolor=SILVER text=RED>
<TITLE> Azul sobre rojo </TITLE> <H1 ALIGN=CENTER>
</HEAD> El más importante</H1>
<BODY bgcolor=RED text =#0000FF> <H2 ALIGN=RIGHT>
Prueba de azul sobre rojo El algo menos importante</H2>
</BODY> <H3 ALIGN=LEFT>
</HTML> El menos importante</H3>
</BODY>
3.- Elementos de HTML </HTML>
La mayoría de los elementos que pueden pre-
sentarse en el cuerpo del documento lo hacen
dentro de uno de dos grupos: EJERCICIO
• Elementos a nivel de bloque que produ- Crear un documento HTML de hasta H8,
cen la separación de párrafos. ¿qué ocurre?.
• Elementos a nivel de texto.
Los elementos a nivel de bloque actúan como b) Párrafos
contenedores para elementos de texto y otros El elemento <P> es utilizado para indicar un
elementos de bloque. párrafo. No se utiliza etiqueta de final de
Los elementos a nivel de texto sólo pueden párrafo.
contener otros elementos a nivel de texto. Los párrafos se presentan con justificación
a la izquierda y con un margen irregular a la
© MaDiRo-2001 2
derecha. Con el atributo ALIGN se puede <LI type=circle> elemento 2.2.
modificar el tipo de alineación, siendo posi- </UL>
ble los siguientes valores: <LI type disc>Elemento 3
LEFT, CENTER, RIGHT, JUSTIFY </UL>
Entre un párrafo y otro se sitúa una línea </BODY>
en blanco. </HTML>
c) Listas desordenadas (viñetas en Word)

Se utilizan para representar listas de ele- EJERCICIO
mentos. Toman la forma: Averigua las viñetas que se utilizan por de-
<UL> fecto en las listas.
<LI> primer elemento de la lista
<LI> segundo elemento de la lista d) Listas ordenadas (numeradas)
... Toman la forma:
</UL> <OL>
<LI> primer elemento de la lista
El atributo TYPE puede utilizarse para es- <LI> segundo elemento de la lista
tablecer el estilo de las viñetas asociado a ...
cada elemento de la lista. </OL>
Los valores permitidos son: disc (z), square
() y circle ({). El atributo START puede utilizarse para
inicializar el primer número de la secuencia
EJEMPLO (por defecto ésta comienza con 1).
El atributo TYPE permite establecer el es-
<HTML> tilo de numeración, en base a la siguiente
<HEAD> tabla:
<TITLE> Lista 1 </TITLE>
</HEAD> Tipo Descripción
<BODY> 1 Números arábigos => 1, 2, ...
<UL> a Letras minúsculas => a, b, ...
<LI type=disc>Elemento 1 A Letras mayúsculas => A, B, ...
<LI type=disc>Elemento 2 i Números romanos en minúsculas => i,
</UL> ii, ...
</BODY> I Números romanos en mayúsculas =>
</HTML> I, II, ...
Es posible anidar listas. EJEMPLO
EJEMPLO <HTML>
<HEAD>
<HTML> <TITLE> Lista ordenada </TITLE>
<HEAD> </HEAD>
<TITLE> Listas anidadas </TITLE> <BODY>
</HEAD> <OL type=1>
<BODY> <LI>Elemento 1
<UL> <LI>Elemento 2
<LI type=disc>Elemento 1 <OL>
<LI type=disc>Elemento 2 <LI>Elemento 2.1.
<UL> <LI>Elemento 2.2.
<LI type=circle> elemento 2.1. </OL>
© MaDiRo-2001 3
<LI> Elemento 3 EJEMPLO
</OL>
</BODY> <HTML>
</HTML> <HEAD>
<TITLE> Texto preformateado </TITLE>
</HEAD>
e) Listas de definición <BODY>
Se utilizan para representar un conjunto de <PRE>
términos junto con sus definiciones. Toman Esto es
la forma: solo una
<DL> prueba
<DT>nombre del término a definir </PRE>
<DD>definición del término </BODY>
</DL> </HTML>
EJEMPLO EJERCICIO
Elimina del ejemplo anterior las etiquetas
<HTML> <PRE> y </PRE>, ¿qué ocurre?.
<HEAD>
<TITLE> Lista 1 </TITLE> g) Blockquote
</HEAD> Se utilizan normalmente para encerrar
<BODY> acotaciones, estas suelen hacer referencia
<DL> a las citas o a las palabras de otras
<DT>Hardware personas. Aparecen indentadas.
<DD>Parte física del sistema informático Su formato es:
(cables, monitor, ...)
<DT>Software <BLOCKQUOTE>
<DD>Parte lógica del sistema informático texto
(programas) </BLOCKQUOTE>
</DL>
</BODY> h) Líneas horizontales
</HTML> Pueden utilizarse para indicar un cambio de
tema. Se representan con la etiqueta <HR>
y no poseen etiqueta de cierre.
f) Texto preformateado Pueden ir acompañadas por los atributos:
El HTML ignora los saltos de líneas, los ta- • ALIGN: determina si la línea se sitúa a
buladores, las secuencias contiguas de es- la izquierda, derecha o centro del es-
pacios en blanco, tomándolas como un solo pacio delimitado por los márgenes. Sus
espacio en blanco. valores son: LEFT, RIGHT y CENTER.
Si se quieren respetar estos caracteres es El valor por defecto es CENTER.
preciso utilizar texto preformateado. • NOSHADE: la línea se presenta con un
Su formato es: color sólido en vez de sombreada.
• SIZE: establece la altura en pixeles de
<PRE> la línea.
Texto • WIDTH: establece el ancho de la línea
</PRE> en pixeles o como porcentaje entre los
márgenes izquierdo y derecho. El valor
por defecto es 100%.
© MaDiRo-2001 4
Elementos a nivel de texto SEFONT en base a la cantidad especificada
en SIZE.
a) Elementos de estilos tipográficos El atributo SIZE es un valor entero que
Requieren de etiquetas de inicio y de fin. fluctúa entre 1 y 7. El tamaño base se apli-
Son los siguientes: ca a los textos normales y preformateados,
• TT => texto monoespacio o teletipo. pero no a los encabezados, excepto en
• I => texto en cursiva. aquellos casos en que sean modificados me-
• B => texto en negrita. diante la utilización del elemento FONT con
• U => texto subrayado. un tamaño de tipografía relativo.
• STRIKE => texto tachado.
• BIG => coloca el texto en una tipogra- d) BR
fía mayor. Se utiliza para forzar un corte de línea. No
• SMALL => coloca el texto en una tipo- posee etiqueta de fin.
grafía menor.
e) Anclas
b) Elemento FONT Se usan para enlazar el documento actual
Permite cambiar el tamaño de la tipografía con otro documento o recurso de Internet.
y/o el color para el texto. Los atributos que Presentan la forma:
tiene asociado son SIZE y COLOR. <A>texto que tiene asociado el vínculo</A>
• SIZE establece el tamaño de la tipo-
grafía. Puede fijarse un valor situado Las anclas tienen asociado los atributos:
entre 1 y 7 o bien un valor relativo a un • NAME: se utiliza para asociar un
valor entero señalado. nombre con esta parte del documen-
• COLOR establece el color del texto. to. El nombre utilizado debe ir entre
comillas.
EJEMPLO • REF.: especifica la ubicación del re-
curso vinculado. Dicho recurso puede
<HTML> ser otro documento HTML, un archi-
<HEAD> vo PDF, una imagen, etc. También de-
<TITLE> Uso de FONT </TITLE> be ir entre comillas.
</HEAD>
<BODY> EJEMPLO
<FONT SIZE=1 COLOR=RED>
Prueba1 <HTML>
</FONT> <HEAD>
<FONT SIZE=+1 COLOR=GREEN> <TITLE> Prueba de ancla </TITLE>
Prueba2 </HEAD>
</FONT> <BODY>
<FONT SIZE=-2 COLOR=BLUE> <H1>Tabla de contenidos</H1>
Prueba3 <P> <A HREF=”#seccion1”>Introducción</A>
</FONT> <BR>
</BODY> <A HREF=”#seccion2”>Antecedentes</A>
</HTML> <BR>
<A HREF=”#seccion21”>El primer año</A>
<BR>
c) BASEFONT <H2>
Se utiliza para establecer el tamaño base <A NAME=”seccion1”>Introducción</A>
de la tipografía. Cuando la variación de ta- </H2>
maño con el atributo SIZE es relativa el Esta es la introducción
tamaño final del texto se obtiene incre- <H2>
mentando o decrementando el valor de BA- <A NAME=”seccion2”>Antecedentes</A>
© MaDiRo-2001 5
</H2> detenidamente cuando se vean los ma-
Esto son los antecedentes pas.
<H3>
<A NAME=”seccion21”>El primer año</A> 4.- Mapas Locales
</H3> Se puede utilizar una única imagen para enla-
Esto es el primer año zar con varias páginas, yendo a una u otra se-
</BODY> gún la zona en donde se pulse el ratón. Este
</HTML> tipo de imágenes se llaman mapas.
Podemos crear un mapa partiendo de una ima-
gen y hacer que el navegador que lea nuestra
Cuando la href se refiere a una parte del do- página lo gestione. Al ir desplazando el cursor
cumento actual, debe llevar el símbolo # de- observaremos que en ciertas zonas se convier-
lante. te en un símbolo para indicar un enlace con
Las referencias más utilizadas son: otras páginas. Si se pulsa en estas zonas acti-
• http:// => protocolo invocado para vas, el navegador consultará con el documento
transmitir páginas web muy utilizado en HTML que ha recibido, y decidirá a qué página
los enlaces. o dirección corresponde esa zona activa.
• ftp:// => permite transferir archivos Primeramente, es necesario confeccionar la
desde servidores ftp. imagen que va a servir como mapa. Se hará con
• mailto:// => le sigue la dirección electró- un programa gráfico.
nica del usuario al que se desea mandar El mapa se define mediante las etiquetas:
un email.
<MAP NAME=”nombre_del_mapa”> ...
f) Imágenes en línea </MAP>
Para añadir imágenes a los documentos
HTML se utiliza la etiqueta IMG. Esta eti- Entre ellas se colocan las etiquetas que defi-
queta carece de etiqueta de cierre. Posee nen las áreas activas:
los siguientes atributos:
• SCR => es obligatorio, representa la ubi- <AREA SHAPE=”tipo_del_area_activa”
cación de la imagen. Debe ir entre comi- HREF=URI COORDS=”lista_pixeles”>
llas dobles.
• ALT => se utiliza para proporcionar una Para definir un área activa rectangular, nece-
descripción textual de la imagen. Debe ir sitamos conocer las coordenadas en pixeles de
entre comillas dobles. su ángulo superior izquierdo (ax, ay) y las de su
• ALIGN => especifica cómo se ubica la ángulo inferior derecho (bx, by). Obtenemos
imagen en relación con la línea de texto estas coordenadas con el programa gráfico con
en que se encuentra. Puede tomar los va- el que hemos confeccionado la imagen. La eti-
lores: TOP, MIDDLE , BOTTOM (valor queta AREA tiene entonces la forma:
por defecto), LEFT, RIGHT.
• WIDTH y HEIGHT => especifican el an- <AREA SHAPE=”rect”
cho y el alto de la imagen en pixeles. HREF=URI COORDS=”ax,ay,bx,by”>
• BORDER => indica el ancho en pixeles del
borde. Si su valor es cero significa que Para definir un area activa circular, necesita-
la imagen no tiene borde. mos conocer las coordenadas de su centro
• HSPACE y VSPACE => indica el número (cx,cy) y su radio (r). La etiqueta AREA tiene
de espacios horizontales y verticales que entonces la forma:
se sitúan alrededor de la imagen.
• USEMAP e ISMAP => se utilizan para <AREA SHAPE=”circle”
asociar la imagen con un mapa de imáge- HREF=URI COORDS=”cx,cy,r”>
nes. Estos atributos se estudiarán más
© MaDiRo-2001 6
Para definir un área activa de forma poligonal, <H1>OJO DERECHO</H1>
necesitamos conocer las coordenadas de sus </BODY>
vértices (x1,y1), (x2,y2), ... (xn,yn). La etiqueta </HTML>
AREA tiene entonces la forma: Archivo => OJOIZQ.HTML
<AREA SHAPE=”poly” <HTML>

HREF=URI COORDS=”x1,y1,x2,y2,…,xn,yn”> <HEAD>
<TITLE>OJO IZQUIERDO</TITLE>
La definición se completa con la siguiente eti- </HEAD>
queta, que corresponde a las áreas de la figura <BODY>
no activas: <H1>OJO IZQUIERDO</H1>
</BODY>
<AREA SHAPE=”DEFAULT” NOHREF> </HTML>
Una vez definido el mapa, se incluye la directi- Archivo => BOCA.HTML

va que muestra el gráfico asociado al mapa:
<HTML>
<IMG SRC=”fichero_grafico_asociado” <HEAD>
USEMAP=”#nombre_del_mapa”> <TITLE>BOCA</TITLE>
</HEAD>
<BODY>
EJEMPLO <H1>BOCA</H1>
</BODY>
Crea los siguientes archivos: </HTML>
Archivo => CARA.HTML Archivo => CARA.BMP
<HTML>
<HEAD>
<TITLE>Cara interactiva</TITLE>
</HEAD>
<BODY>
<MAP NAME="cara">
<AREA SHAPE="circle" COORDS="98,105,15"
HREF="ojoizq.html">
<AREA SHAPE="circle" COORDS="149,105,15"
HREF="ojoder.html">
Tras crear los cuatro archivos guárdalos en la
<AREA SHAPE="rect"
misma carpeta. Carga en el explorador el ar-
COORDS="93,157,150,170"
chivo CARA.HTML y prueba el mapa corres-
HREF="boca.html">
pondiente.
<IMG SRC="cara.bmp" USEMAP="#cara">
</BODY>
5.- Tablas
</HTML>
Una tabla es un conjunto de filas de celdas de
datos, alineadas en columnas. Todas las celdas
Archivo => OJODER.HTML
de una columna tienen el mismo ancho. Las
celdas pueden estar rodeadas de un borde que
<HTML>
las separa unas de otras.
<HEAD>
Para formar una tabla, se colocan las etiquetas
<TITLE>OJO DERECHO</TITLE>
<TABLE> y </TABLE>, y entre ellas se colocan
</HEAD>
las etiquetas <TR> de filas, una por cada fila.
<BODY>
Después de una etiqueta <TR> hay que colocar
© MaDiRo-2001 7
una etiqueta <TD> por cada celda, y después de Con el elemento CAPTION se le puede añadir
cada etiqueta <TD> hay que colocar el dato de un título a la tabla. Este elemento admite un
la celda. único atributo ALIGN que puede ser o
ALIGN=TOP o ALIGN=BOTTOM. Esto puede
EJEMPLO utilizarse para forzar a que el título sea colo-
cado arriba de la parte más alta o debajo de la
<HTML> parte más baja de la tabla. Por defecto, se
<HEAD> suele utilizar la alineación superior.
<TITLE>EJEMPLO DE TABLA</TITLE> El elemento TR tiene asociado los atributos:
</HEAD>
<BODY> • ALIGN: establece el valor de la alineación
<TABLE> horizontal del contenido de las celdas. Pue-
<CAPTION>Tabla</CAPTION> de tomar los valores: LEFT, CENTER o
<TR><TD>Celda 1,1<TD>Celda 1,2 RIGHT.
<TR><TD>Celda 2,1<TD>Celda 2,2 • VALIGN: se utiliza para establecer el valor
</TABLE> por defecto de la alineación vertical de los
</BODY> contenidos de una celda dentro de la misma.
</HTML> Puede tomar los valores: TOP, MIDDLE o
BOTTOM.
Si una fila tiene menos celdas que otra, el na- Además de las celdas que contienen datos
vegador forma el cuadro con tantas columnas normales, podemos poner filas de celdas de
como celdas tenga la fila más grande, dejando cabecera para contener los títulos de las co-
vacías las filas que falten. Esto de todas for- lumnas. Esto se consigue colocando la etiqueta
mas no siempre se cumple cuando las celdas de <TH> en vez de la etiqueta <TD>.
una fila tienen ancho distinto a las de otra fila Los elementos <TD> y <TH> tienen asociado los
distinta de la tabla. atributos:
La etiqueta TABLE soporta los siguientes atri-
butos: • NOWRAP: Impide que el contenido de la
• ALIGN: especifica la ubicación horizontal celda se ajuste automáticamente.
de la tabla. Puede tomar uno de los siguien- • ROWSPAN: Toma un valor entero positivo
tes valores: LEFT, CENTER, RIGHT. que especifica el número de filas que se ex-
• WIDTH: establece el ancho de la tabla en tiende una celda.
un valor fijo en pixeles (ej: WIDTH=212) o • COLSPAN: Toma un valor entero positivo
como un porcentaje del espacio entre los que especifica el número de columnas que
márgenes izquierdo y derecho actuales (ej: se extiende una celda.
WIDTH=”80%”). Si no se especifica el an- • ALIGN: Especifica el valor de la alineación
cho de la tabla, éste se determina automá- horizontal del contenido de la celda. Toma
ticamente a partir de los contenidos de la los valores: LEFT, CENTER y RIGHT.
misma. • VALIGN: Especifica el valor de la alineación
• BORDER: este atributo se puede utilizar vertical del contenido de la celda. Toma los
para especificar el ancho del borde externo valores: TOP, MIDDLE y BOTTOM.
que rodea la tabla en un número dado de • WIDTH, HEIGHT: Especifican el ancho y
píxeles. Para suprimir el borde este valor se alto que tomará la celda. Estos valores se
pone a cero. utilizarán normalmente excepto en el caso
• CELLSPACING: Establece la separación en de conflicto con los requerimientos de an-
píxeles existente entre las celdas. chura de otras celdas de la misma columna
• CELLPADING: Establece la separación en- o de conflicto con los requerimientos de al-
tre el borde alrededor de cada celda y los tura de otras celdas de la misma fila.
contenidos de la misma.
© MaDiRo-2001 8
Las tablas son presentadas comúnmente en Archivo => frames.html
bajo relieve, elevadas con el borde externo a
la manera de bisel, y las celdas individuales se <HTML>
posicionan dentro de esta superficie elevada. <HEAD>
<TITLE>Mi página con frames</TITLE>
EJERCICIO </HEAD>
<FRAMESET COLS=”20%, 80%”>
Haz una tabla HTML que contenga tu HORA- <FRAME SRC=”indice.html”>
RIO. <FRAME SRC=”mipag01.html”
NAME=”principal”>
6.- Marcos (Frames) </FRAMESET>
Un marco es una ventana independiente dentro <NOFRAMES>
de la ventana general del navegador. Cada <A HREF=”mipag01.html”>
frame tiene sus bordes y sus propias barras Primera página HTML </A>
de desplazamiento. Los frames permiten divi- <P><A HREF=”mipag02.html”>
dir la ventana en varias zonas, en cada una de Segunda página HTML </A>
las cuales se presenta una página distinta. </NOFRAMES>
Una de sus características más importantes es </HTML>
que pulsando un enlace situado en un frame, se
puede cargar en otro frame una página deter- Archivo => mipag01.html
minada. Esto se utiliza frecuentemente para
tener un frame estrecho en la parte lateral (o <HTML>
superior), con un índice del contenido en forma <HEAD>
de diferentes enlaces que, al ser pulsados, <TITLE>Mi primera página Web</TITLE>
cargan en la ventana principal las distintas </HEAD>
páginas. <BODY>
De esta manera se facilita la navegación entre <CENTER><H1>
las páginas, pues aunque se vaya pasando de Mi primera página</H1></CENTER>
unas a otras, siempre estará a la vista el índice <HR>
del conjunto. <P>Ésta es mi primera página
</HTML>
EJEMPLO
Archivo => mipag02.html
Crea los siguientes archivos:
<HTML>
<HEAD>
Archivo => indice.html
<TITLE>Mi segunda página Web</TITLE>
</HEAD>
<HTML>
<BODY>
<HEAD>
<CENTER><H1>Mi segunda página
<TITLE>Índice de mis páginas</TITLE>
</H1></CENTER>
</HEAD>
<HR>
<BODY>
<P>Ésta es mi segunda página
<A HREF=”mipag01.html” TARGET=”principal”>
</HTML>
Primera página HTML </A>
<P>
Carga en el navegador el archivo FRA-
<A HREF=”mipag02.html” TARGET=”principal”>
MES.HTML.
Segunda página HTML </A>
</BODY>
</HTML>
Es muy importante tener en cuenta que cuando
se define una página con marcos, la etiqueta
© MaDiRo-2001 9
BODY es sustituida por la etiqueta FRAME- La etiqueta FRAMESET puede ir acompañada
SET. Una página de marcos se define en tér- del atributo BORDER que permite ajustar el
minos de filas o columnas. ancho del borde definido en pixels. (ej: BOR-
DER=3).
EJEMPLO El elemento <FRAME> puede ir acompañado de
los siguientes atributos:
<FRAMESET COLS="80,25%,*"> • SCROLLING añade al marco una barra de
<FRAME SRC="one.htm"> desplazamiento. Puede tomar los valores
<FRAME SRC="two.htm"> yes, no y auto.
<FRAME SRC="three.htm"> • NORESIZE evita que el usuario pueda mo-
</FRAMESET> dificar el tamaño del marco. Por defecto
todos los marcos pueden cambiar de tama-
Para situar los marcos horizontalmente se ño.
utiliza el atributo ROWS en vez del atributo • MARGINWIDTH=pixels. Define el margen
COLS. Estos atributos definen la forma de los en pixels a la izquierda y derecha del mar-
marcos cuando la altura de las filas o la anchu- co.
ra de las columnas viene dada por una lista de • MARGINHEIGHT=pixels. Define el margen
valores separados por comas. Las dimensiones en pixels por encima y por debajo del mar-
de los marcos se describen en función de valo- co.
res absolutos, porcentajes o valores relativos • FRAMESPACING=pixels. Establece el espa-
que emplean asteriscos. (*). cio situado alrededor del marco.
EJEMPLOS El atributo NAME del elemento FRAME sirve

para asignar un nombre para el marco actual.
Este nombre se utilizará como destino de los
• <FRAMESET ROWS="2*,*">
siguientes enlaces del documento.
Hace que el marco superior sea dos veces
El atributo SRC especifica el contenido inicial
más alto que el inferior.
del marco.
• <FRAMESET COLS="50,*,50">
El atributo TARGET especifica el marco donde
Establece el alto de los marcos izquierdo y
se visualizará un archivo.
derecho, dejando el resto del espacio al
Finalmente, decir que con NOFRAMES se em-
marco central.
plea como alternativa para aquellos navegado-
• <FRAMESET ROWS="20%,60%,20%">
res que no permiten la visualización de marcos.
Muestra un frame mayor entre dos más pe-
queños.
EJERCICIO PROPUESTO
Es posible anidar unos frames con otros. Crea una página WEB con la siguiente estruc-
tura:
EJEMPLO
Marco 1 Marco 2
<FRAMESET ROWS="*,50%">
<FRAMESET COLS="80,25%,*">
<FRAME SRC="one.htm">
Marco 3
<FRAME SRC="two.htm">
<FRAME SRC="three.htm">
</FRAMESET>
Marco 4
<FRAME SRC="four.htm">
</FRAMESET>
Utiliza colores distinto para cada uno de los

marcos.
© MaDiRo-2001 10
7.- Formularios en HTML
Uno de los mayores atractivos de la Web es la http://localhost/procesa.php?nombre=Juan&edad
interacción entre el autor de una página y las =25&sexo=hombre
personas que acceden a la misma.
Los formularios permiten que las personas que • METHOD=POST. Los datos del formulario
acceden a una página web envíen la información se pasan al programa, no como paráme-
directamente a una dirección e-mail o bien a un tros, sino como si fuesen tecleados una
servidor web, donde hay instalado un programa vez empezado el programa.
que procesa esa información.
Para conseguir esto, los formularios tienen que Con el atributo ENCTYPE=”TEXT/PLAIN” se con-
ejecutar programas o scripts por medio del CGI sigue que recibamos la respuesta como un fichero
(Common Gateway Interface). El CGI permite a de texto, perfectamente legible y sin codificar.
los formularios ser procesados por programas Este atributo es opcional.
escritos en cualquier lenguaje, aunque los más
usados en Internet son PHP, ASP, etc.
Todos los elementos de un formulario deben es- a) Tomar datos con cajas de texto.
tar encerrados entre <FORM> y </FORM>. La di- La introducción de un dato en una caja de texto
rectiva FORM tiene dos parámetros que deben se efectúa mediante la línea:
aparecer obligatoriamente: action y method.
El parámetro ACTION indica la acción que se <INPUT TYPE=”text” NAME=”nombre-dato”
debe efectuar. El valor de ACTION siempre es el VALUE=”valor-por-defecto”>
URL de un recurso de Internet. Se pueden poner
dos tipos de URL en ACTION: un mailto para que
los datos se envíen por correo electrónico a una EJEMPLO
dirección o el URL de un programa situado en el
servidor que debe procesar los datos. <HTML>
<HEAD>
EJEMPLOS <TITLE> Formulario con cuadro de texto
</TITLE>
ACTION = mailto:madiro@iesfuengirola1.net </HEAD>
ACTION=”procesa.php” <BODY>
<H1> Datos personales </H1>
El parámetro METHOD puede tomar dos valores: <FORM ACTION=”mailto:dirección-correo”
METHOD=”POST”
• METHOD=GET. Cuando se ordena proce- ENCTYPE=”TEXT/PLAIN” >
sar los datos del formulario, estos se pa- Apellidos: <INPUT TYPE=”text”
san como parámetros al programa que se NAME=”Apellido”>
específico en ACTION. El mecanismo que </FORM>
sigue el navegador para hacer esto es </BODY>
añadir a la cadena URL el signo de cierre </HTML>
de interrogación y luego la cadena forma-
da por todos los datos del formulario se- La longitud de la caja de texto que presenta el
parados por &. Cada dato se compone de formulario en este caso es de 20 caracteres. Esta
nombre-dato=valor. longitud se puede variar con el parámetro SI-
ZE=”número”. Por otra parte, sea cual sea la lon-
gitud de la caja de texto que se presenta en el
EJEMPLO formulario, si no se indica nada, el usuario puede
introducir el número de caracteres que quiera. Se
Si un formulario pide los datos nombre, edad y puede limitar este número, incluyendo en la eti-
sexo y el programa que lo gestiona es procesa.php queta el parámetro MAXLENGTH=”número”.
se enviará una cadena similar a esta.
© MaDiRo 2001 11
También se puede hacer que el texto introducido EJEMPLO
no sea reconocible, es decir, que todos los carac-
teres se representen por asteriscos. Basta con <HTML>
cambiar en la etiqueta INPUT el parámetro TY- <HEAD>
PE=”text” por TYPE=”password”. <TITLE> Formulario con lista desplegable
Cuando el texto que se va a introducir puede al- </TITLE>
canzar una gran longitud, por ejemplo, un comen- </HEAD>
tario, es conveniente utilizar un formulario de <BODY>
texto de múltiples líneas. Esto se consigue con las <H1> Colores </H1>
etiquetas: <FORM ACTION=”mailto:dirección-correo”
METHOD=”POST”
<TEXTAREA NAME=”nombre” ROWS=”número” ENCTYPE=”TEXT/PLAIN” >
COLS=”número”> ¿Cuál es tu color preferido? <BR>
</TEXTAREA> <SELECT NAME=”ColorPreferido”>
<OPTION>Rojo
donde ROWS representa el número de filas y <OPTION>Verde
COLS el número de columnas. <OPTION>Azul
<OPTION>Amarillo
</SELECT>
EJEMPLO </FORM>
</BODY>
<HTML> </HTML>
<HEAD>
<TITLE> Formulario con cuadro de texto En el ejemplo anterior, sólo es visible en el for-
</TITLE> mulario una opción. Si queremos que sean visibles
</HEAD> múltiples opciones a la vez, añadimos en la etique-
<BODY> ta los atributos MULTIPLE SIZE=”número”, don-
<H1> Datos personales </H1> de especificamos el número de opciones visibles.
<FORM ACTION=”mailto:dirección-correo”
METHOD=”POST”
ENCTYPE=”TEXT/PLAIN” > c) Casillas de verificación y botones de opción.
Introduce comentarios: Si queremos que el usuario confirme una opción
<TEXTAREA NAME=”Comentarios” determinada, podemos hacer uso de un formulario
ROWS=”6” COLS=”40”> de confirmación, o checkbox, que consigue con la
</FORM> etiqueta:
</BODY>
</HTML> <INPUT TYPE=”checkbox” NAME=”nombre”>
EJEMPLO
b) Listas desplegables.
Cuando el usuario en lugar de introducir texto, <HTML>
escoge los valores entre varias opciones de una <HEAD>
lista, se deben utilizar listas desplegables. <TITLE> Formulario con casilla de verificación
Las etiquetas que se emplean con esta finalidad </TITLE>
son: </HEAD>
<BODY>
<SELECT NAME=”nombre”> </SELECT>. <H1> Colores </H1>
<FORM ACTION=”mailto:dirección-correo”
Las distintas opciones que se pueden escoger se METHOD=”POST”
consiguen con la etiqueta <OPTION>. ENCTYPE=”TEXT/PLAIN” >
© MaDiRo 2001 12
<INPUT TYPE=”checkbox”
NAME=”MayorEdad”>
Sí, soy mayor de edad.
</FORM>
</BODY>
</HTML>
Si queremos que el formulario aparezca inicial-

mente como marcado, basta con añadir la palabra
CHECKED dentro de la etiqueta de la directiva
INPUT.
Cuando queremos que el usuario elija una única
opción entre varias presentándolas todas a la vez,
podemos hacer uso de los botones de radio, que
se consiguen con varias etiquetas (una por opción)
del tipo siguiente:
<INPUT TYPE=”radio” NAME=”nombre”

VALUE=”nombre-opcion”>
El valor de NAME tiene que coincidir en todas la

etiquetas.
d) Botones de envío y de borrado.

Para enviar los datos del formulario se utiliza la
etiqueta:
<INPUT TYPE=”submit”
VALUE=”texto-del-botón”>
Otro botón interesante es el borrado de los da-

tos introducidos, que se consigue con la etiqueta:
<INPUT TYPE=”reset”
VALUE=”texto-del-botón”>
© MaDiRo 2001 13

17 19 2010 Introduccion HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

17 19 2010 Introduccion HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Creación de páginas Web con HTML

1.- Introducción HTML incluye etiquetas para formato de ca-

c) Listas desordenadas (viñetas en Word)

Es posible anidar listas. EJEMPLO

<AREA SHAPE=”poly” <HTML>

Una vez definido el mapa, se incluye la directi- Archivo => BOCA.HTML

Archivo => CARA.HTML Archivo => CARA.BMP

EJEMPLOS El atributo NAME del elemento FRAME sirve

Utiliza colores distinto para cada uno de los

Si queremos que el formulario aparezca inicial-

<INPUT TYPE=”radio” NAME=”nombre”

El valor de NAME tiene que coincidir en todas la

d) Botones de envío y de borrado.

Otro botón interesante es el borrado de los da-

Você também pode gostar