Añadir a la recogida (s) Añadir a salvo
  1. Ninguna Categoria

Introducción

Anuncio 
Introducción
El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos
documentos pueden ser mostrados por los navegadores de paginas Web en Internet, como Netscape,
Opera o Microsoft Explorer. Aunque existe un estándar controlado por un organismo cuya dirección
es www.w3c.org, sin embargo Microsoft y Netscape se empeñan en incluir instrucciones que solo
funcionan con sus respectivos navegadores. De cualquier manera existen diferentes revisiones o
niveles de estandarización, el 1.0, el 2.0, el 3.0 y el 4.01, lo que produce que algunos navegadores
no "comprendan" en su totalidad el contenido de un documento.
Básicamente, el HTML consta de una serie de órdenes o instrucciones, que indican al navegador
que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc...) que contenga
el documento.
Las instrucciones de HTML pueden ser cerradas o abiertas. Las instrucciones cerradas son aquellas
que tienen un TAG o MARCA que indica el principio de la instrucción y otro que indica el final.
Entre la marca inicial y la final se pueden encontrar otras marcas. Las instrucciones abiertas constan
de una sola marca. Para diferenciar las instrucciones del resto del texto del documento se encierran
entre los símbolos < y >. Cada instrucción tiene sus parámetros definidos.
Ejemplos :
instrucción
<CENTER>Mi página Web </CENTER>
cerrada
Instrucción
<HR>
abierta
instrucción
<BODY bgcolor="#FFFFFF"> </BODY>
con
parámetros
Los ficheros que contienen documentos HTML suelen tener la extensión .html o .htm.
Estructura básica de un documento
HTML
Un documento escrito en HTML contendría básicamente las siguientes instrucciones :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
Indica el inicio del documento.
Inicio de la cabecera.
Inicio del título del documento.
Final del título del documento.
Final de la cabecera del documento.
<BODY>
</BODY>
</HTML>
Inicio del cuerpo del documento.
Final del cuerpo del documento.
Final del documento.
Además el organismo encargado de revisar que el documento este con el estándar respectivo
necesita una línea que le diga el tipo de documento, la versión y el lenguaje del documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES">
En una computadora para poder visualizar una pagina que se encuentre en Internet lo que el
navegador hace es revisar la dirección URL que generalmente tiene una estructura así:
http://uazuay.udc.ec/facultad/sistemas.html
Donde ....
http://
uazuay.udc.ec
/facultad/
sistemas.html
es el indicador de pagina Web
es el Dominio (nombre) del ordenador
es el Directorio dentro del ordenador
es el Fichero que contiene la página Web
Cabecera del documento
La instrucción <HEAD></HEAD> delimita la cabecera del documento.
Titulo:
Dentro de la cabecera es importante definir el título de la página por medio de la instrucción
<TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro navegador de páginas
Web.
Ejemplo :
<TITLE>Manual de HTML</TITLE>
Meta datos:
La instrucción <META> indica al navegador de Internet las palabras clave y contenido de nuestra
página Web. Muchos de los buscadores de páginas Web de Internet (Google, Yahoo, Lycos, etc...)
utilizan el contenido de esta instrucción para incluir la página en sus bases de datos. La instrucción
<META> lleva generalmente dos parámetros, name y content.
Ejemplos :
<META name = "Autor" content ="Xavier Castillo Ordóñez "> Indica al navegador el nombre del
autor de la pagina.
<META name="description" content="Manual de html aprenda un sencillo lenguaje">
Indica al navegador el nombre un breve resumen del contenido de la pagina.
<META name = "keywords" content ="MANUAL DE HTML, manual de html, Manual de
Html">
Indica al navegador las palabras clave para los buscadores de Internet.
La instrucción <META> también indica documentos con "refresco automático". Si se indica una
URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos
especificados. Si no se incluye ninguna URL se volverá a cargar en el navegador el documento en
uso transcurridos los segundos indicados. Esto es útil para páginas que cambian de contenido con
mucha frecuencia o para redireccionar a la persona que visita nuestra pagina Web a una nueva
dirección donde se encuentra una versión actualizada de nuestra pagina Web.
Ejemplo :
<META
http-equiv=
"refresh"content
=
"10;URL=http://www.formula1.com">
Transcurridos 10 segundos se accederá a la pagina Web de la Formula 1.
Cuerpo del documento
La instrucción <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el
inicio y el final de esta instrucción donde pongamos los contenidos de nuestra página, textos,
gráficos, enlaces, etc....
Parámetros:
background= "nombre de archivo grafico"
Indica el nombre de un archivo gráfico que servirá como "fondo" de nuestra página. Si la
imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como
sea necesario como en mosaico en windows.
bgcolor = "nombre del color en ingles o un número en hexadecimal precedido por el signo #"
Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro
background.
text = "nombre del color en ingles o un número en hexadecimal precedido por el signo #"
Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro.
link = "nombre del color en ingles o un número en hexadecimal precedido por el signo #"
Indica el color de los textos que dan acceso a un Vínculo. Por defecto es azul en Microsoft.
vlink = "nombre del color en ingles o un número en hexadecimal precedido por el signo #".
Indica el color de los textos que dan acceso a un Vinculo que ya hemos visitado con nuestro
navegador. Por defecto es púrpura en Microsoft.
Color
El numero del color es un numero compuesto por tres pares de cifras hexadecimales que indican la
proporción de los colores "primarios", rojo, verde y azul. El primer par de cifras indica la
proporción del color rojo, el segundo del verde y el tercero del azul.
Ejemplos :
#000000
#FF0000
#00FF00
#0000FF
#FFFFFF
#CCCCCC
Color Negro
Color Rojo
Color Verde
Color Azul
Color Blanco
Color Gris
black
red
green
blue
white
gray
Caracteres Especiales
Muchos de los símbolos que se utilizan pueden que no sean aceptados por el navegador que este
utilizando por lo tanto se ha creado una simbología que aceptara la mayoría de navegadores. Estos
son:
CARACTER SIMBOLOGIA CARACTER SIMBOLOGIA
¤
¤
ú
ú
¶
¶
ñ
ñ
§
§
Ñ
Ñ
ESPACIO
 
ª
ª
"
"
º
º - °
&
&
¿
¿
<
<
®
®
>
>
¬
¬
Ç
Ç
½
½
ü
ü
¼
¼
é
é
¡
¡
â
â
«
«
ä
ä
»
»
à
à
¦
¦
å
å
Á
Á
ç
ç
Â
Â
ê
ê
À
À
ë
ë
©
©
è
è
¢
¢
ï
ï
¥
¥
î
î
ã
ã
ì
ì
Ã
Ã
Ä
Ä
ð
ð
Å
Å
Ð
Ð
É
É
Ê
Ê
æ
æ
Ë
Ë
Æ
Æ
È
È
ô
ô
Í
Í
ö
ö
Î
Î
ò
ò
Ï
&Iuml
û
û
Ì
Ì
ù
ù
Ó
Ó
ÿ
ÿ
ß
ß
Ö
Ö
Ô
Ô
Ü
Ü
Ò
Ò
ø
ø
õ
õ
£
£
Õ
Õ
Ø
Ø
µ
µ
×
×
þ
þ
ó
ó
Þ
Þ
á
á
Ú
Ú
í
í
Û
Û
¯
¯
Ù
Ù
ý
ý
·
·
Ý
Ý
÷
÷
¹
¹
±
±
²
²
¾
¾
³
³
¸
¸
Ejemplos:
Entonces
la
pingüino
pingüino
palabra
pingüino
se
tendría
que
escribir:
Ordóñez
Ordóñez
Ordóñez
se
escribiria
así:
Espaciados
Si en HTML se escribe más de un espacio el navegador solo mostrara un espacio, también las
tabulaciones serán mostradas como un espacio pequeño entre caracter y caracter, esto es:
Si se escribe algo así:
Este
es
un
El
navegador
Este es un texto de prueba
texto
de
lo
prueba
presentara
así:
Para poder escribir con los espacios que se desea se debe utilizar la instrucción <PRE> que nos
permite tener un texto sin formato.
Ejemplo:
Si se escrive así:
<PRE>
Este
texto
no tiene
formato
<PRE>
Se vera así:
Este
texto
no tiene
formato
Para indicar un salto de línea se utiliza la instrucción <BR> y para un salto de párrafo se utiliza la
instrucción cerrada <P></P>, que dejara una línea en blanco, la instrucción <P> se usa
específicamente para declarar párrafos.
Ejemplo:
-Si
se
escribe
Este texto tiene saltos <BR> de línea y <P> de párrafo.</P>
-Se vera así:
Este texto tiene saltos
de línea y
de párrafo.
así:
La instrucción <P> también tiene el atributo de alineación:
Align=center, left, right
La instrucción <HR> presenta una línea a lo largo de la ventana, también se le puede dar atributos
como ancho, alineación, dimensión.
Ejemplo:
<HR width=40% size=20 align=left>
Formatos del Texto
Títulos:
En un documento de HTML se pueden indicar seis tipos de Títulos (tamaños de letra) por medio de
las instrucciones <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el
fin de la instrucción será el afectado por los Títulos. El Titulo <H1> será la que muestre el texto en
mayor tamaño.
EJEMPLO
SE VERA ASI
<H1> PRUEBA1 </H1>
PRUEBA 1
<H2> PRUEBA 2 </H2>
PRUEBA 2
<H3> PRUEBA 3 </H3>
PRUEBA 3
<H4> PRUEBA 4 </H4>
PRUEBA 4
<H5> PRUEBA 5 </H5>
PRUEBA 5
<H6> PRUEBA 6 </H6>
PRUEBA 6
Atributos del Texto
Al igual que en Ms. Word, HTML tiene atributos de negrita, subrayado, Cursiva, etc.
Atributo
Instrucción
Ejemplo
Resultado
Negrita
<B></B>
<B>Texto</B>
Texto
Cursiva
<I></I>
<I>Texto</I>
Texto
Subrayado
<U></U>
<U>Texto</U>
Texto
Tachado
<S></S>
<S>Texto</S>
Texto
Superíndice <SUP></SUP>
M<SUP>2</SUP>
M2
Subíndice
<SUB></SUB>
X<SUB>Y</SUB>
XY
Centrado
<CENTER></CENTER> <CENTER>Texto</CENTER>
Texto
Fuentes
Por otro lado la instrucción <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de
letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.
size
Da al texto un tamaño en puntos determinado.
=
valor
color
Escribe el texto en el color que se especifica.
=
"color"
face
=
"nombre
de
font"
Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el computador que
"lee" la pagina se usara el font predeterminado del navegador.
Ejemplo
<FONT size = 5 color = "#FF0000 face =
"Arial"> Texto de prueba </FONT>
Se vera asi
Texto de
prueba
Comentarios:
Para incluir comentarios en la página Web se utiliza la instrucción <!-- -->.
Ejemplo :
<!-- Esto es un comentario sobre mi pagina Web -->
Numeración y Viñetas
En la numeración se utiliza la instrucción <OL></OL>. Cada uno de los elementos de la lista está
precedido de la instrucción <LI>. En la instrucción <OL> se puede incluir el tipo de numeración:
type
=
tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada
numéricamente.
Los tipos posibles son :
1
=
Numéricamente.
(1,2,3,4,...
a
=
Letras
minúsculas.
(a,b,c,d,...
A
=
Letras
mayúsculas.
(A,B,C,D,...
i
=
Números
romanos
en
minúsculas.
(i.ii,iii,iv,v,...
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Ejemplo
etc.)
etc.)
etc.)
etc.)
Resultado
<OL>
<LI>Venezuela
<LI>Colombia
<LI>Ecuador
<LI>Perú
</OL>
<OL type =A>
<LI>Venezuela
<LI>Colombia
<LI>Ecuador
<LI>Perú
</OL>
1.
2.
3.
4.
Venezuela
Colombia
Ecuador
Perú
A.
B.
C.
D.
Venezuela
Colombia
Ecuador
Perú
Las viñetas se representan con la instrucción <UL></UL> para delimitar la lista, y <LI> para
indicar cada uno de los elementos. En la instrucción <UL> se puede incluir el tipo de viñeta:
disk
=
circle
=
Indica
square = Indica un cuadrado
Indica
un
Ejemplo
<UL type = disk >
<LI>Venezuela
un
punto
Resultado
sin
punto
relleno
<LI>Colombia
<LI>Ecuador
<LI>Perú
</UL>
<UL type = square>
<LI>Venezuela
<LI>Colombia
<LI>Ecuador
<LI>Perú
</UL>
<UL type = circle>
<LI>Venezuela
<LI>Colombia
<LI>Ecuador
<LI>Perú
</UL>




Venezuela
Colombia
Ecuador
Perú




Venezuela
Colombia
Ecuador
Perú
o
o
o
o
Venezuela
Colombia
Ecuador
Perú
Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue
una estructura tipo "índice de materias".
Ejemplo
Resultado
<UL type= disk>
<LI>Buscadores
<UL>
<LI>Yahoo
<LI>Ole
<LI>Lycos
</UL>
<LI>Links
<UL>
<LI>Microsoft
<LI>IBM
</UL>
</UL>


Buscadores
o Yahoo
o Ole
o Lycos
Links
o Microsoft
o IBM
Imágenes
Para incluir una imagen en nuestra página Web utilizaremos la instrucción <IMG>. Hay dos
formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y
JPG. Cualquier otro tipo de archivo gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado
por el visor, a no ser que disponga de un plugin que permita su visualización.
La instrucción <IMG> tiene varios parámetros :
src
=
Indica el nombre del archivo gráfico a mostrar.
"imagen"
alt
=
"Texto"
Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz
de visualizar la imagen.
align
=
TOP
/
MIDDLE
/
BOTTOM
Indica como se alineará el texto que siga a la imagen. TOP alinea el texto con la parte superior de la
imagen, MIDDLE con la parte central, y BOTTOM con la parte inferior.
border
=
tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible
cuando la imagen forme parte de un Vinculo.
height
=
tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen
original y para separar el espacio en la ventana.
width
=
tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen
original y para separar el espacio en la ventana.
hspace
=
margen
Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga
y la anteceda.
vspace
=
margen
Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
Ejemplo
<IMG src="signo.gif" alt= "SIGNO" >
Si el visor no pudiese visualizar el gráfico.....
Se vería como
La imagen a mostrar puede encontrase en la misma carpeta que la pagina Web. Si este no fuera el
caso, se se debería poner toda la ruta de donde se encuentre la imagen.
Ejemplo
<IMG src= "http://www.microsoft.com/iexplorer.gif">
Veamos varios ejemplos con los tamaños de la imagen y comprobando la alineación de los textos.
Ejemplo
Se vería como
<IMG src="signo.gif"
width=100 >
<IMG src="signo.gif"
height=20 >
<IMG src="signo.gif"
align=TOP>Atencion !!!
Atencion !!!
<IMG src="signo.gif"
align=MIDDLE>Atencion !!!
Atencion !!!
<IMG src="signo.gif"
align=BOTTOM>Atencion !!!
Tenga en cuenta<IMG src="singo.gif"
hspace=20>esta indicacion.
Tenga en cuenta<IMG src="signo.gif"
vspace=40>esta indicacion.
Atencion !!!
Este
Este
es un signo
es un signo.
Sonido de Fondo
Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta característica
de Ms Explorer utiliza la instrucción <BGSOUND> y tiene los siguientes parámetros :
src
=
Indica el nombre del archivo que contiene el sonido (.waw, .mid).
"archivo"
loop
=
num
/
infinite
Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se
reproducirá de forma continua hasta que abandonemos la página.
Un ejemplo de esta instrucción sería :
<BGSOUND src= "pinkpanter.mid" loop= infinite>
Para utilizar esta función en Netscape y otros navegadores se utiliza la instrucción <EMBED>. Esta
instrucción se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto
puede ser un archivo de sonido, un video, un grafico BMP, etc... Tiene los siguientes parámetros :
src
=
Indica el nombre del archivo que contiene el sonido (.waw, .mid) o el video (.avi).
autostart
=
Incluirlo si deseamos que la reproduccion se inicie inmediatamente.
"archivo"
true
loop
=
true
Incluirlo si deseamos que la reproduccion no se detenga. (al terminar, vuelve a comenzar
automaticamente).
volume
=
Volumen al que se reproducen los archivos de sonido.
numero
width
=
numero
height
=
numero
Anchura y Altura de la representacion del objeto. (Si es un sonido no es necesario este parametro).
controls
=
smallconsole
Visualiza una serie de controles que nos permiten iniciar la reproducción del archivo, así como
realizar una pausa o detenerlo.
Un ejemplo de esta instrucción sería :
<EMBED src= "help.mp3" loop= true autostart= true volume=50 width=50 height=15
controls=smallconsole>
También con esta instrucción se pueden visualizar los archivos de Macromedia Flash indicándole el
lugar en donde se encuentra el plugin de flash player (programa para ejecutar archivos de flash), y
el tipo que seria ShockwaveFlash.
Ejemplo:
<EMBED src="Movie1.swf" quality=high type="application/x-shockwave-flash"
width="400" height="250" loop="false"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Pr
od_Version=ShockwaveFlash">
</EMBED>
Vínculos
Para incluir un Vínculo se utiliza la instrucción <A></A>. El texto o imagen que se encuentre
dentro de los límites de esta instrucción será sensible, esto quiere decir que si pulsamos con el raton
sobre el, se realzará la función de Vínculo indicada por la instrucción <A></A>. Esta instrucción
tiene el parámetro href que indica el lugar a donde nos llevará el Vínculo si lo pulsamos.
Ejemplo
Se vería como
<A href = "http://www.microsoft.com/"> Pulse para ir a la
página de Microsoft</A>
Pulse para ir a la página
de Microsoft
Lo mismo podríamos hacer con un gráfico.
Ejemplo
Se veria como
FERRARI:
<A href="http://www.ferrari.com/">
<IMGsrc="logo.gif"> </A>
Pagina Ferrari :
Pulsando sobre la imagen se accedería a la pagina situada en http://www.barcelonaec.com/.
Un Vínculo también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en
nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parámetro name.
<A name = "seccion1"></A>
Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará
seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente
forma :
<A href = "#seccion1">Machistas</A>
O tambien:
<A href = "http://www.geocities.com/xavi_loco/chistes.html#seccion1">Chistes
Machistas</A>
Así mismo podemos hacer que el Vínculo de como resultado el envío de un correo electrónico a una
dirección de correo determinada.
<A href = "mailto: [email protected]">Envíame tus sugerencias</A>
También podemos realizar un Vínculo a un archivo cualquiera. En este caso el navegador intentará
"ejecutar" el archivo, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro
ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar archivos a
su ordenador.
<A href = "manual.zip">Pulse aquí para llevarse una copia del manual.</A>
Pulse aquí para llevarse una copia del manual.
Tablas
Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes,
etc...) en diferentes filas y columnas separadas entre si. Es una herramienta muy útil para "ordenar"
contenidos de distintas partes de nuestra página. La tabla se define mediante la instrucción
<TABLE></TABLE>. Los parámetros opcionales de esta instrucción son :
border
Indica el ancho del borde de la tabla en puntos.
=
num.
cellspacing
=
Indica el espacio en puntos que separa las celdas que están dentro de la tabla.
num
cellpadding
=
Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta.
num
width
=
num
ó
%
Indica la anchura de la tabla en puntos o en porcentaje en función del ancho de la ventana del visor.
Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos de las celdas.
height
=
num
ó
%
Indica la altura de la tabla en puntos o en porcentaje en función del alto de la ventana del visor. Si
no se indica este parámetro, la altura se adecuará a la altura de los contenidos de las celdas.
bgcolor
Especifica el color de fondo de toda la Tabla.
=
color
Para definir las celdas que componen la tabla se utilizan las instrucciones <TD> y <TH>. <TD>
indica una celda normal, y <TH> indica una celda de "cabecera", es decir, el contenido será
resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de
ambas instrucciones son :
align
=
LEFT
/
CENTER
/
RIGHT
/
JUSTIFY
Indica como se debe alinear el contenido de la celda, a la izquierda (LEFT), a la derecha (RIGHT),
centrado (CENTER) o justificado (JUSTIFY).
valign
=
TOP
/
MIDDLE
/
BOTTOM
Indica la alineación vertical del contenido de la celda, en la parte superior (TOP), en la inferior
(BOTTOM), o en el centro (MIDDLE).
rowspan
=
Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
num
colspan
=
Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
num
width
=
num
ó
%
Indica la anchura de la columna en puntos o en porcentaje en función del ancho de la ventana del
visor. Si no se indica este parámetro, el ancho se adecuará al tamaño de los contenidos. Este
parámetro solo funciona en los navegadores modernos.
bgcolor
=
Especifica el color de fondo del elemento de la Tabla.
color
Para indicar que comienza una fila de celdas se utiliza la instrucción <TR>. A continuación
mostraremos un ejemplo de una tabla que contiene solo texto. Como se indicó anteriormente el
contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un Vinculo,
una Lista, etc...
<TABLE border
<TH align
<TH align
<TR>
<TD align
<TD align
<TD align
<TR>
<TD align
<TD align
<TD align
</TABLE>
= 4 cellspacing = 4 cellpadding = 4 width =80%>
= center>Buscadores
= center colspan = 2>Otros Links
= LEFT>Google
= LEFT>Formula 1
= LEFT>Netscape
= LEFT>Lycos
= LEFT>Dell
= LEFT>My SQL
Se vería como:
Buscadores
Otros Links
Google
Formula 1
Netscape
Lycos
Dell
My SQL
Las instrucciones <TR> <TD> y <TH> son cerradas según el estándar de HTML, es decir que un
elemento de tabla <TD> devería cerrarse con un </TD> , sin embargo los visores asumen que un
elemento de la tabla, queda automáticamente "cerrado" cuando se "abre" el siguiente.
Formularios
Los formularios nos permiten dentro de una página Web solicitar información al visitante y
procesarla. En un formulario podremos solicitar diferentes datos cada uno de los cuales quedará
asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de
estos será enviado a la dirección donde tengamos el programa que pueda procesar las variables. A
este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este
tipo de programas sería tema de otro manual diferente, por lo que aquí veremos como se pueden
enviar las variables a nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las instrucciones <FORM></FORM>. En el interior
de la declaración se indican los elementos de entrada. La instrucción <FORM> tiene los parámetros
action y method.
action
=
"programa"
Indica el programa que va a "tratar" a las variables que se envíen con el formulario. En nuestro caso
enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto:
direccion_de_correo".
method
=
POST
/
GET
Indica el método según el que se transferirán las variables. POST produce la modificación del
documento de destino (como en el caso de enviar por correo las variables). GET no produce
cambios en el documento destino (como en el caso de una consulta a una base de datos, p.ej. una
página de búsqueda en Internet).
Sentencias de Entrada
Para la introducción de las variables se utiliza la instrucción <INPUT>. Esta instrucción tiene el
parámetro type que indica el tipo de variable a introducir y name que indica el nombre que se le
dará al campo. Cada tipo de variable tiene sus propios parámetros.
type=
text
name
Indica que el campo a introducir será un texto. Sus parámetros son :



=
campo
maxlenght = numero
Numero máximo de caracteres a introducir en el campo.
size = numero
Tamaño en caracteres que se mostrará en pantalla.
value = "texto"
Valor inicial del campo. Normalmente sera " ", o sea, vacio.
type
=
password
name
=
campo
Indica que el campo será una palabra clave. Mostrará asteriscos (*) en lugar de las letras escritas.
Sus parámetros opcionales son los mismos que para text.
type
=
checkbox
/
radio
name
=
campo
El campo se elegirá marcando una casilla. Se permite marcar varias casillas. Los valores de las
casillas serán indicados por :


value = "valor"
checked
La casilla aparecerá marcada por defecto.
type
=
radio
name
=
campo
El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas. Los valores
de las casillas serán indicados por :

value = "valor"
type = image src = "fichero de imagen"
Este funcionará exactamente que el botón de aceptar.
type
=
hidden
name
=
campo
El usuario no puede modificar su valor, ya que el campo no es visible se manda siempre con el
valor indicado por el parámetro :

value = "valor"
type
=
submit
Representa un botón. Al pulsar este botón la información de todos los campos se envía al programa
indicado en <FORM>. Tiene el parámetro value = "texto" que indica el texto que aparecerá en el
botón.
type
=
reset
Representa un botón. Al pulsar este botón se borra el contenido de todos los campos. El parámetro
value = "texto" indica el texto que aparecerá en el botón.
Selecciones
Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias.
Se utiliza para ello la instrucción <SELECT> </SELECT> . Sus parámetros son :
name
Nombre del campo
=
campo
size
=
num
Número de opciones visibles. Si se indica 1 se presenta como un menú desplegable, se indica mas
de uno se presenta como una lista con barra de desplazamiento.
multiple
Permite seleccionar mas de un valor para el campo.
Las diferentes opciones de la lista se indican con la instrucción <OPTION>. Esta instrucción puede
incluir el párametro selected para indicar cual es la opcion por defecto. En caso de que no se
especifique, se tomara por defecto la primera opción de la lista.
Areas de texto
Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan en
el comentarios. La instrucción usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :
name
Nombre del campo.
=
campo
cols
Numero de columnas de texto visibles.
=
num.
rows
Numero de filas de texto visibles.
=
num.
Ejemplo:
Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de
datos.
<FORM action = "mailto:[email protected]" method = post >
Tu Nombre:<INPUT type = text name = nombre size = 30 >
Tu Clave: <INPUT type = password name = clave size = 8 >
<P>
Archivos a Enviar:
<INPUT type = checkbox name = archivo value = "Manual" > Manual de Html
<INPUT type = checkbox name = archivo value = "Gif_Cons" > Gif Construction SET
<INPUT type = checkbox name = archivo value = "Help" > Archivo de Ayuda
<P>
Tu Edad :
<INPUT type = radio name = edad value = "-20" > Menos de 20 años
<INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 años
<INPUT type = radio name = edad value = "+40" > Mas de 40 años
<P>
<INPUT type = hidden name = lugar value = "Manual De HTML UDA" >
Como encontraste mi página :
<SELECT name = donde >
<OPTION>De casualidad
<OPTION>Por el buscador Google
<OPTION>Por el buscador Lycos
<OPTION>Me la comentaron
</SELECT>
<P>
Tus Comentarios:
<BR>
<TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA>
<P>
<INPUT type = submit value = "Enviar" >
<INPUT type = reset value = "Borrar" >
</FORM>
Ahora veamos el efecto producido en la página Web:
Tu Nombre:
Tu Clave:
Archivos
a
Manual de Html
Enviar:
GifConstruction SET
Tu
Archivo de Ayuda
Edad
Menos
:
de
Entre
20
20
y
años
40
años
Mas de 40 años
Como
encontraste
mi
página
:
P o r e l b u sca d o r G o o g l e
Tus
E n vi a r
Comentarios:
B o rra r
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando conectado a Internet), se generará
un mensaje de correo a mi dirección de correo [email protected]. Si pulsas el botón Borrar se
borraran los datos que hayas introducido en el Formulario.
Si en vez de enviar estas variables por correo electrónico, fuesen enviadas a un programa (CGI),
este programa podría tratarlas y dar como respuesta una nueva página Web.
Se puede utilizar un Formulario como "lanzador" de links, es decir, por medio de una lista
desplegable permitir al usuario escoger un Link y acceder a el. Para ello se utiliza el párametro
"OnClick". Ejemplo :
<FORM>
<SELECT name = "list" >
<OPTION value="http://www.geocities.com/xavi_loco">Mi Página Web
<OPTION value="http://www.microsoft.com">Microsoft
<OPTION value="http://www.ibm.com">Ibm
<OPTION SELECTED value="http://www.dell.com">Dell
<OPTION value="http://www.hp.com">Hewlett Packard
<OPTION value="http://www.w3c.org">w3c
</SELECT>
<INPUT TYPE=BUTTON value="Ir a..."
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value">
</FORM>
Este seria el efecto producido :
De ll
Pseudo clases y Pseudo elementos
visited
:visited
Nos indica el estilo con el que aparece un enlace visitado.
active
:active
Nos indica el estilo con el que aparece el enlace en el momento de activarlo, es decir de
pulsar sobre él.
hover
:hover
Nos indica el estilo en el que aparece el enlace al pasar por encima el ratón.
focus
:focus:
Selecciona el elemento que tiene el foco.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Esta con pseudoclases </TITLE>
<STYLE TYPE="text/css">
<!A:link {COLOR: green}
A:visited {COLOR: blue}
A:active {COLOR: gray}
A:hover {COLOR: yellow}
A:focus (COLOR:white)
-->
</STYLE>
</HEAD>
<BODY>
<P>Un <a href="http://www.pagina.com/home.html">enlace</a>
de prueba.</P>
</BODY>
</HTML>
first-line
:first-line
Selecciona y aplica estilo a la primera línea de un bloque de texto. La cantidad de texto
que compone la primera línea depende del tamaño y familia de la fuente, tamaño de la ventana,
tamaño del bloque, existencia de objetos flotantes, etc... Sólo se pueden aplicar algunas
características de estilo.
Ejemplo:
En el siguiente ejemplo la primera línea de un párrafo debe mostrarse en mayúsculas.
P:first-line {text-transform:uppercase}
First-letter
:first-letter
Selecciona la primera letra del texto de un bloque de texto para aplicarle determinados
efectos tipográficos. Sólo se pueden aplicar algunas características de estilo.
Ejemplo:
En el siguiente ejemplo los párrafos del documento van en negro y con un tamaño de
fuente de 12 puntos, en cambio la primera letra del párrafo debe ser verde y de doble tamaño.
P {color: black; font-size: 12pt}
P:first-letter {color:green; font-size:200%}
before
:befote
Genera contenido (texto que no figura en el documento fuente) delante de un elemento
Ejemplo:
A:before {content: "________"}
En este ejemplo se indica que antes de cada línea, se debe colocar "________". Si en vez
de un texto se desea indicar algún símbolo se pueden utilizar estas dos opciones:
open-quote: Insertan una comilla de apertura
close-quote: Insertan una comilla de cierre
after
:alter
Genera contenido (texto que no figura en el documento fuente) después de un elemento
Ejemplo:
A:after {content: "________"}
En este ejemplo se indica que después de cada línea, se debe colocar "________". Si en
vez de un texto se desea indicar algún símbolo se pueden utilizar estas dos opciones:
open-quote: Insertan una comilla de apertura
close-quote: Insertan una comilla de cierre
FORMATO DE TEXTO
font-family
font-family:
Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son
genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en
su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre
de una fuente tiene espacios se utilizan comillas para que se entienda bien.
VALORES:
Serif, sans-serif, cursive, fantasy , monospace y todas las fuentes habituales
Ejemplo:
font-family:arial,helvetica
font-size: fantasy
font-style
font-style:
Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar
al italic.
VALORES:
Normal, Italia, oblique
Ejemplo:
font-style:normal
font-style: italic
font-weight
font-weight:
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner
negrillas con total libertad.
Normal y 400 son el mismo valor, así como bold y 700.
VALORES:
Normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Ejemplo:
font-weight:bold
font-weight: 200
font-size
font-size:
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
VALORES:
xx-small, x-small, small, medium, large, x-large, xx-large
Ejemplo:
font-size:12pt
font-size: x-large
font
font :
Permite expresar en una misma declaración un valor para una o más propiedades de la
fuente de caracteres.
VALORES:
Se usa los respectivos para cada formato
Ejemplo:
Este es el orden que se utiliza
Etiqueta : font-family,font-style,font-weight,font-size
Font: arial, Helvetica, Italia, bold, 12pt
word-spacing
word-spacing:
Especifican respectivamente el espaciado de palabras, el normal para la fuente en uso o
fijando una longitud que habrá que sumar al normal (el AU no podrá modificarlo para ajustar el
texto a ambos márgenes).
VALORES:
Inch=in, Centímetros=cm, Milímetros=mm, puntos=pt, picas=pc, EME=em, Equis=ex,
Píxel=px, porcentajes
Ejemplo:
H1{word-spacing:0.5em}
letter-spacing
letter-spacing:
Especifican respectivamente el espaciado entre letras, el normal para la fuente en uso o
fijando una longitud que habrá que sumar al normal (el AU no podrá modificarlo para ajustar el
texto a ambos márgenes).
VALORES:
Inch=in, Centímetros=cm, Milímetros=mm, puntos=pt, picas=pc, EME=em, Equis=ex,
Píxel=px, porcentajes
Ejemplo:
H2{letter-spacing:1cm}
white-spacing
white-spacing:
Especifican respectivamente el espaciado blanco , el normal para la fuente en uso o
fijando una longitud que habrá que sumar al normal (el AU no podrá modificarlo para ajustar el
texto a ambos márgenes).
VALORES:
Inch=in, Centímetros=cm, Milímetros=mm, puntos=pt, picas=pc, EME=em, Equis=ex,
Píxel=px, porcentajes
Ejemplo:
H6{white-spacing:8pc}
text-transform
text-transform:
Especifica, por medio de palabras reservadas, si las letras del texto deben transformarse
en mayúsculas, minúsculas, sólo la primera letra de cada palabra en mayúsculas, o si ha de
dejarse como está.
VALORES:
Uppercase, lowercase, capitalize, none
Ejemplo:
H1 {text-transform:uppercase}
text-decoration
text-decoration:
Fija una o más características "decorativas" del texto, como subrayado, líneas superiores,
caracteres tachados o parpadeantes (no obligatorio para el AU).
Si se aplica a un elemento de bloque la heredan sólo los descendientes que sean de texto (o enlínea); si se aplica a uno de éstos la heredan todos los descendientes.
VALORES:
None, underline, overline, line-through, blink
Ejemplo:
DEL {text-decoration:line-through} INS {text-decoration:overline} A[href] {textdecoration:underline}
vertical-align
vertical-align:
Fija la posición vertical, dentro de una caja de línea, de las cajas generadas por un
elemento de línea.
VALORES:
Baseline, sub, super, top, text-top, middle, bottom, text-bottom, valor.
Los valores se refieren a un elemento padre, de texto (en línea) o de bloque (si genera
cajas en línea anónimas).
baseline: alinea la línea base (en su defecto, la parte inferior) de la caja con la de la caja
padre;
middle: alinea el centro vertical de la caja con la línea base de la caja padre más la mitad
de la altura-x (x-height) del elemento padre.
{text-top | text-bottom}: alinea la parte superior (o inferior) de la caja de línea con la parte
superior (o inferior) de la fuente del elemento padre.
{sub | super}: sube (o baja) la línea base con respecto a la del padre (no cambia el
tamaño de letra);
valor: longitud o porcentaje, positivos o negativos, que indican cuánto subir (o bajar, si son
negativos) la línea base con respecto a la del padre.
{top | bottom}: alinea la parte superior (o inferior) de la caja de línea con la parte superior
(o inferior) de la caja de línea.
Ejemplo:
SPAN.subindice{vertical-alingn:sub; font-size:amaller}
text-align
text-align:
Fija la alineación del bloque, al margen izquierdo, al derecho, centrado o a ambos (no
obligatoriopara el AU), o especificando una serie de caracteres, mediante un literal, que servirá,
sólo en las celdas de una tabla, para alineación horizontal del texto por la posición de dichos
caracteres.
VALORES:
Left, right, center, justify, caracteres.
Ejemplo:
DIV.centrado{text-align:center}
text-indent
text-indent:
Fija la sangría o indentación de la primera línea de texto elemento, como longitud (en
unidades absolutas o relativas) o porcentaje (relativo a la anchura del bloque).
VALORES:
Inch=in, Centímetros=cm, Milímetros=mm, puntos=pt, picas=pc, EME=em, Equis=ex,
Píxel=px, porcentajes
Ejemplo:
P{text-indent:2em}
line-height
line-height:
Especifica la altura de la caja de línea generada por elementos:
VALORES:
Anchura, normal.
- de bloque, cuyo contenido está compuesto de elementos de texto: altura mínima de cada
caja de línea generada;
- de texto (en-línea) no reemplazados: altura exacta de cada caja generada por el
elemento. (En elementos en línea reemplazados, la altura de la caja viene dada por la
propiedad height.)
-La altura de la línea puede expresarse con valores (positivos) de tipo:
-longitud: fija la altura de la caja línea.
-porcentaje: multiplicado por el tamaño de fuente del elemento da el valor computado de la
propiedad. Se hereda el valor computado.
número: multiplicado por el tamaño de fuente del elemento da el valor computado de la
propiedad. Se hereda el número, no el valor computado.
Con normal, el AU usa una altura apropiada al tamaño de la fuente de caracteres del
elemento.
Ejemplo:
P{line=height: 1.5em;font-size:12pt}
P{line=height: 150%font-size:12pt}
P{line=height: 1.5,font-size:12pt}
Color
color:
Especifica el color del primer plano del contenido del elemento (texto...).
VALORES:
Puede utilizarse el nombre del color o el color en hexadesimal con el signo # al principio.
Ejemplo:
BODY{color_black} EM {color:rgb(255,0,0)}
background-color
background-color:
Especifica el color del fondo del elemento, que puede ser un color o la palabra
VALORES:
Puede utilizarse el nombre del color o el color en hexadesimal con el signo # al principio y
transparent.
reservada transparent (el fondo del elemento padre se ve).
En general, las propiedades de fondo no se heredan, pero al ser su valor inicial
transparent, el fondo del elemento padre se ve en los hijos.
Si se fija un color para HTML o BODY, se usa el color del primero si es distinto de
transparent; si no, el del segundo.
Ejemplo:
H1 {background-color: #FF0000; color:white}
background-image
background-image:
Designa una imagen para rellenar el fondo del elemento por medio de un url, o la palabra
reservada none para indicar que no se usará ninguna imagen.
Puede fijarse también un color que se colocará debajo de la imagen, y que asomará si la imagen
no está disponible o, si lo está, detrás de sus zonas transparentes
VALORES:
color, URL, none.
Ejemplo:
BODY {background-image:white url(“imagen.gif”)}H1 {background-image:none}
background-repeat
background-repeat:
Establece si la imagen de fondo (establecida con background-image) se repetirá
horizontal y verticalmente para rellenar todo el fondo del elemento (repeat), sólo horizontalmente
(repeat-x), sólo verticalmente (repeat-y), o no se repetirá (no-repeat).
VALORES:
Repta, repeat-x, repeat-y, no-repeat.
Ejemplo:
BODY {background: green url(“imagen.gif”); background-repeat_repeat-y}
background-attachment
background-attachment:
Establece si la imagen debe desplazarse (scroll) o permanecer fija con repecto a la
ventana (fixed) cuando el usuario hace scroll (en cualquier caso, sólo asoma en el área de
contenido y relleno del elemento).
VALORES:
Scroll, fixed.
Ejemplo:
BODY {backgound: green url(“imagen.gif”); background-repeat_repeat-y; backgroundattachment: fixed}
Descargar
Anuncio
Anuncio