Manual de HTML

Manual de HTML
MANUAL DE HTML
1) El LENGUAJE HTML.
HTML es un lenguaje que se utiliza para la creacin de pginas en la WWW. Por pgina entenderemos el documento que aparece en el visualizador. HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En ltima instancia es el visualizador el que ejecuta todas las rdenes contenidas en el cdigo HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. As, podremos especificar que una pgina tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no est capacitado para esas funciones, no podremos verlas. En esta gua se expondrn los comandos fundamentales de HTML.
2) Cabecera del documento

La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el ttulo de la pgina por medio de la directiva <TITLE></TITLE>. El ttulo debe guardar relacin con el contenido del documento y definirlo de forma general, su tamao no est limitado aunque se recomienda que no sea excesivamente extenso. Dentro de esta etiqueta no se podr usar ninguna de las restantes etiquetas HTML y no aparecera en ninguna parte de la pgina sino en la barra del visor de pginas Web. Ejemplo: <TITLE>nombre de la pgina </TITLE> Se pueden incluir otras instrucciones adicionales: METADATOS:<META>Informacin de la informacin; indica documentos con refresco automtico. Se indicar un documento que debe sustituir al actual en un determinado nmero de segundos. Esta directiva lleva generalmente los parmetros name y content. Ejemplos: <META name = "Autor" content ="nombre del autor" > Indica al navegador el nombre del autor de la pagina. <META name = "Manual de HTML "content = " contenido del manual ">Indica al visor el nombre de la pgina y sus contenidos principales. Profesor: Samuel Molina Javier Pgina 1
Manual de HTML <META name = "keywords"content = "Manual de Html, MANUAL DE HTML,manual de html">Indica al visor las palabras clave para los buscadores de Internet.
3) Cuerpo del documento <BODY></BODY>

Indica el inicio y final de nuestra pgina Web. Ser entre el inicio y el final de esta directiva en el se incluirn todas las instrucciones HTML y el texto que forma el documento, a continuacin los parmetros que se pueden utilizar: background= "nombre de fichero grfico" o "URL" Indica el nombre de un fichero grfico que servir como "fondo" de nuestra pgina. Si la imagen no rellena todo el fondo del documento, esta sera reproducida tantas veces como sea necesario. bgcolor = "cdigo o nombre del color" Indica un color para el fondo de nuestro documento. Solo se utilizar si no se ha definido una imagen de fondo, caso contrario ser igonorada.. text = "cdigo o nombre del color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto ser negro. link = "cdigo de color" Indica el color de los textos que dan acceso a un Hiperenlace y no han sido utilizados. Por defecto es azul. vlink = "cdigo de color" Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos visitado . Por defecto es azul ms oscuro. Ejemplos : #000000 #FF000 #00FF0 #0000FF #FFFFFF Negro Rojo Verde Azul Blanc
El primer par de cifras indican la proporcin de color Rojo, el segundo par de cifras la proporcin de color Verde y las dos ltimas la proporcin de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores.
Profesor: Samuel Molina Javier
Pgina 2
Manual de HTML
4) Caracteres del Documento

Se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Los caracteres acentuados y algunos caracteres especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal, se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el carcter deseado A continuacin veamos una tabla con las principales entidades: Caracter Cdigo Entidad Caracter Cdigo Entidad ! # % ' ) + / ; = ? [ ] _ { } ! # % ' ) + - / ; = ? [ ] _ --------------" $ & ( * , . : < > @ \ ^ ` | ~ " $ & ( * , . : < > @ \ ^ ` ---------------
{ -} - nbsp ¢ cent ¤ curren ¦ brvbar ¨ uml ª ordf ¬ not ® reg ° deg
| -~ -¡ iexcl £ pound ¥ yen § sect © copy « laquo shy ¯ macr ± plusmn Pgina 3
Manual de HTML ² sup2 ´ acute ¶ para ¸ cedil º ordm ¼ frac14 ¾ frac34 À Agrave Â Acirc Ä Auml Æ AElig È Egrave Ê Ecirc Ì Igrave Î Icirc Ð ETH Ò Ograve Ô Ocirc Ö Ouml Ø Oslash Ú Uacute Ü Uuml Þ THORN à agrave â acirc ä auml æ aelig è egrave ê ecirc ì igrave î icirc ð eth ò ograve ³ sup3 µ micro · middot ¹ sup1 » raquo ½ frac12 ¿ iquest Á Aacute Ã Atilde Å Aring Ç Ccedil É Eacute Ë Euml Í Iacute Ï Iuml Ñ Ntilde Ó Oacute Õ Otilde × times Ù Ugrave Û Ucirc Ý Yacute ß szlig á aacute ã atilde å aring ç ccedil é eacute ë euml í iacute ï iuml ñ ntilde ó oacute Pgina 4
Manual de HTML ô ocirc ö ouml ø oslash ú uacute ü uuml þ thorn õ otilde ÷ divide ù ugrave û ucirc ý yacute ÿ yuml
Por lo tanto la palabra computacin se escribira de la siguiente forma:: Computacin Computación Computaciõn
5) COLORES HTML
Los que estn en negrita se pueden escribir en lugar de los cdigos.
Nombre del color Cdigo del color Apariencia White Red Green Blue Magenta Cyan Yellow Black Aqua Baker's Chocolate Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown Dark Green Dark Green Copper Dark Olive Green Dark Orchid
#FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD Pgina 5
Manual de HTML #871F78 Dark Purple #6B238E Dark Slate Blue #2F4F4F Dark Slate Grey #97694F Dark Tan Dark Turquoise #7093DB #855E42 Dark Wood #545454 Dim Grey #856363 Dusty Rose Feldspar #D19275 #8E2323 Firebrick #238E23 Forest Green #CD7F32 Gold Goldenrod #DBDB70 #C0C0C0 Gray #527F76 Green Copper #93DB70 Green Yellow Hunter Green #215E21 #4E2F2F Indian Red #9F9F5F Khaki #C0D9D9 Light Blue #A8A8A8 Light Grey #8F8FBD Light Steel Blue #E9C2A6 Light Wood #32CD32 Lime #E47833 Mandarian Orange #8E236B Maroon Medium Aquamarine #32CD99 #3232CD Medium Blue Medium Forest Green #6B8E23 Medium Goldenrod #EAEAAE #9370DB Medium Orchid #426F42 Medium Sea Green #7F00FF Medium Slate Blue Medium Spring Green #7FFF00 #70DBDB Medium Turquoise #DB7093 Medium Violet Red #A68064 Medium Wood Midnight Blue #2F2F4F #23238E Navy #4D4DFF Neon Blue #FF6EC7 Neon Pink New Midnight Blue #00009C #EBC79E New Tan #CFB53B Old Gold #FF7F00 Orange #FF2400 Orange Red #DB70DB Orchid #8FBC8F Pale Green Profesor: Samuel Molina Javier Pgina 6
Manual de HTML
Pink Plum Quartz Rich Blue Salmon Scarlet Sea Green Semi-Sweet Chocolate Sienna Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan Thistle Turquoise Very Dark Brown Very Light Grey Violet Violet Red Wheat Yellow Green
#BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #99CC32
6) Espacios y Saltos de Lnea

En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por el visor (espacios, tabuladores, saltos de lnea) . Si escribimos en el cdigo de esta manera: Solo se acepta un espacio
Quedar as: Solo se acepta un espacio Para texto preformateado se usa la directiva <PRE></PRE>, obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc...
Pgina 7
Manual de HTML
Ejemplo <PRE> Este texto ha sido
Visualizacin
Este texto
ha sido
preformateado . </PRE>
preformateado .
Para indicar un salto de linea se utiliza la directiva <BR> y para un cambio de prrafo (dejar una lnea en blanco en medio) se utiliza la directiva <P>. Ejemplo Visualizacin Este texto tiene saltos de linea y de prrafo.
Este texto tiene<BR>saltos de linea y <P> de prrafo.
Para cambio de prrafo se usa la directiva <P> puede usarse tambin como directiva "cerrada" <P></P> indicando de esta manera los atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align que indica al visor la forma de "justificar" el prrafo. Los valores posibles de este parmetro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY. Ejemplo <P Align=right>Pgina Web del Manual de HTML/2004.</P> <P Align=center>Pgina Web del Manual de HTML/2004.</P> Visualizacin Pgina Web del Manual de HTML/2004. Pgina Web del Manual de HTML/2004.
La directiva <HR> muestra una lnea horizontal de tamao determinable. Tiene los siguientes parmetros opcionales: align = posicin Alinea a la izquierda (left), a la derecha (right) o la centra (center). Profesor: Samuel Molina Javier Pgina 8
Manual de HTML size = nmero Indica el grosor de la lnea en pixels. width = num / % Indica el ancho de la lnea en tanto por ciento en funcin del ancho de la ventana del visor. Tambin se puede especificar un nmero que indicara el ancho de la lnea en pixels. Para una regla horinzontal usamos la directiva <HR>, sin ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la pgina.
7) Atributos de Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaos de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva ser el afectado por las cabeceras. La cabecera <H1> ser la que muestre el texto en mayor tamao. Ejemplo Visualizacin
<H1>Manual HTML</H1> Manual HTML <H2>Manual HTML</H2> Manual HTML <H3>Manual HTML</H3> Manual HTML <H4>Manual HTML</H4> Manual HTML <H5>Manual HTML</H5> Manual HTML <H6>Manual HTML</H6> Manual HTML
Pgina 9
Manual de HTML Los textos marcados como "cabeceras" provocan automticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo Ejemplo Visualizacin
<H3>Pgina Web</H3>Esta es una pgina de prueba. Pgina Web Esta es una pgina de prueba
8) Atributos del Texto

Para indicar atributos del texto (negrilla, subrayado, cursiva, etc.) indicaremos el siguiente cuadro: Atributo Negrita Cursiva Teletype Directiva <B></B> <I></I> <TT></TT> Ejemplo <B>Texto de prueba</B> <I>Texto de prueba</I> <TT>Texto de prueba</TT> <U>Texto de prueba</U> <S>Texto de prueba</S> <SUP>Texto de prueba</SUP> <SUB>Texto de prueba</SUB> <CENTER>Texto de prueba</CENTER> Resultado Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba
Texto de prueba Texto de prueba
Subrayado <U></U> Tachado <S></S>
Superindice <SUP></SUP> Subindice Centrado <SUB></SUB> <CENTER></CENTER>
Texto de prueba
Por otro lado la directiva <FONT></FONT> nos permite variar el tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size, bgcolor y face. size = valor Da al texto un tamao en puntos determinado. bgcolor = "cdigo de color" Escribe el texto en el color cuyo cdigo se especifica. face = "nombre de font" Profesor: Samuel Molina Javier Pgina 10
Manual de HTML Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la pgina se usar el font predeterminado del navegador. Se vera como Manual HTML
Ejemplo <FONT size = +2 color = "#00FF00face = "Arial"> Manual HTML </FONT>
9) Listas
Existen tres tipos de listas, a continuacin se especificarn dos: Numeradas: representarn los elementos de la lista numerando cada uno de ellos segn el lugar que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista ir precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parmetros: start = num El punto de comienzo siempre ser el 1 si no se indica en START con otro valor de comienzo y el tipo de numeracin puede seleccionarse con el atributo TYPE . Sus posibles valores son: A : Letras maysculas. a : Letras minsculas. I : Nmeros romanos en maysculas. i : Nmeros romanos en minsculas. 0 : Nmeros (es por defecto por tanto no hay que indicarlo). type = tipo Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son: 1 = Numricamente. (1,2,3,4,... etc.) a = Letras minsculas. (a,b,c,d,... etc.) A = Letras maysculas. (A,B,C,D,... etc.) i = Numeros romanos en minsculas. (i.ii,iii,iv,v,... etc.) I = Nmeros romanos en maysculas. (I,II,III,IV,V,... etc.)
Pgina 11
Manual de HTML
Ejemplo <OL> <LI>Coello <LI>Dvila <LI>Izquierdo <LI>Zamora </OL> <OL type = A > <LI>Coello <LI>Dvila <LI>Izquierdo <LI>Zamora </OL>
Resultado 1. 2. 3. 4. Coello Dvila Izquierdo Zamora
A. B. C. D.
Coello Dvila Izquierdo Zamora
Sin Numerar: representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parmetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un crculo o un cuadrado. Ejemplo <UL type = disk > <LI>Coello <LI>Dvila <LI>Izquierdo <LI>Zamora </UL> <UL type = square> <LI>Coello <LI>Dvila <LI>Izquierdo <LI>Zamora </UL>

Resultado Coello Dvila Izquierdo Zamora
Coello Dvila Izquierdo Zamora
Pgina 12
Manual de HTML
10) Imgenes
La etiqueta encargada de mostrar imgenes en HTML es IMG. Se pueden utilizar dos formatos GIF y JPG. Cualquier otro formato no ser mostrado por el visor, a no ser que disponga de un programa externo que permita su visualizacin. La directiva <IMG> tiene varios parmetros : src = "imagen" Indica el nombre del fichero grfico a mostrar. alt = "Texto" Indicar un texto alternativo a mostrar si no fue posible mostrar la imagen. Se recomienda cuando existan en el documento imgenes usadas como botones. align = TOP / MIDDLE / BOTTOM Indica como se alinear el texto que siga a la imagen con respecto a esta. tiene las siguientes funciones: TOP alinea el texto con la parte superior de la imagen MIDDLE alinea el texto con la parte central BOTTOM alinea el texto con la parte inferior border = tamao Indica el tamao del borde de la imagen, A toda imagen se le asigna un borde que ser visible cuando la imagen forme parte de un Hiperenlace,el borde de esta ser del color apropiado para indicarlo, caso contrario ser invisible. height = tamao Determina el alto de la imagen a mostrar en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. width = tamao Indica el ancho al que se mostrar la imagen en puntos o en porcentaje. Se usa para variar el tamao de la imagen original. hspace = margen Indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante en puntos. vspace = margen Indica el nmero de puntos verticales que separaran la imagen del texto que le siga y la anteceda.
Pgina 13
Manual de HTML La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. A continuacin ejemplos del cambio de tamao de una imagen: Ejemplo <IMG src="DUCKY.GIF" width=100 > Visualizacin
<IMG src="DUCKY.GIF" height=20 >
11)
IMAGENES Y MAPAS SENSITIVOS
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en funcin de la "zona" de la imagen que se pulse. Las directivas para crear mapas son <MAP></MAP> y <AREA> <MAP> identifica al mapa y tiene el parmetro name para indicar el nombre del mapa. <AREA> define las reas sensibles de la imagen.Tiene los siguientes tipos: rect rea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Ejemplo: <area shape="rect" coords="66,63,105,89" href="rectangulo.htm"> poly Polgono. Se deben especificar las coordenadas de todos los vrtices del polgono, pueden ser tantas como se desee. El visor se encarga de "cerrar" la figura. Ejemplo: <area shape="poly" coords="42,20,64,33,85,16,108,41,108,65,74,92,37,78,24,43" href="poligono.htm"> circle Circulo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el valor del radio (en puntos). Ejemplo: <area shape="circle" coords="49,48,25" href="circulo.htm">
Pgina 14
Manual de HTML Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiramos la siguiente directiva : <IMG src = "grafico.gif" usemap = "#casa"> El rea tambin tiene los siguientes parmetros obligatorios: shape = "tipo" Indica el tipo de rea a definir. coords = "coordenadas" Indica las coordenadas de la figura indicada con shape. href = "URL" Indica la direccin a la que se accede si se pulsa en la zona delimitada por el rea indicada.
12) Links
La caracterstica principal de una pgina Web es que podemos incluir Links; es la utilidad bsica del hipertexto, permite indicar zonas de texto o imgenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual. Para incluirlos se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los lmites de esta directiva ser sensible, esto quiere decir que si pulsamos con el raton sobre el, se realizar la funcin de hiperenlace indicada por la instruccin <A></A>. El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imgenes, si tienen definido un borde este aparecer resaltado en color azul. HREF: Son los enlaces con documentos externos al actual. En este caso se indicar una URL que definir el documento al que se accede si se sigue el enlace. La forma de indicarlo ser: Ejemplo <A href = "http://www.yahoo.com/"> ir a la pgina de yahoo </A> Visualizacin ir a la pgina de yahoo
En un grfico quedara de la siguiente forma: Ejemplo Profesor: Samuel Molina Javier Visualizacin Pgina 15
Manual de HTML Para buscar en Internet : <A href = "http://www.yahoo.com/" > Para buscar en Internet : <IMG src = "yahoo.gif"></A>
Elemento Ancla: Sirve para llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pagina las diferentes secciones en las que se divide. Lo haremos con el parmetro name. Ejemplo: <A name = "seccion1"></A>
Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccion se llamar seccion1. Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma: <A href = "#seccion1">Primera Parte</A> Tablas Permite la representacin de datos por filas y columnas separadas entre s. Es una herramienta muy til para "ordenar" contenidos de distintas partes de nuestra pgina. En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imgenes, enlaces, texto, listas, cabeceras, formularios, etc. La tabla se define mediante la directiva <TABLE></TABLE>. Los parmetros opcionales de esta directiva son: border = num. Indica el ancho del borde de la tabla en puntos, por defecto ser 0. cellspacing = num Indica el espacio que debe existir entre las distintas celdas de la tabla. Por defecto ser 2. cellpadding = num Indica el espacio en puntos que separa el borde de cada celda y el contenido de esta, por defecto es 1. width = num % Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana del visor. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las celdas. Profesor: Samuel Molina Javier Pgina 16
Manual de HTML height = num % Definir el alto de la tabla, a igual que WIDTH, se puede indicar en valor absoluto o en porcentaje. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas. bgcolor = cdigo o nombre del color Especifica el color de fondo de toda la Tabla. Para definir las celdas que componen la tabla se utilizan las directivas <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 tamao ligeramente superior al normal. Los parmetros opcionales de ambas directivas son : align = LEFT / CENTER / RIGHT / JUSTIFY Indica la alineacin del elemento dentro de la celda, a la izquierda (LEFT), a la derecha (RIGHT), centrado (CENTER) o justificado (JUSTIFY).
valign = TOP / MIDDLE / BOTTOM Indica la alineacin vertical del contenido de la celda, en la parte superior (TOP), en la inferior (BOTTOM), o en el centro (MIDDLE). rowspan = num Indicar el nmero de filas que ocupar est celda en la misma fila. Por defecto ocupa una sola fila.
colspan = num Indicar el nmero de columnas que ocupar la celda actual. Por defecto ocupa una sola columna.
width = num % Indica la anchura de la columna en puntos o en porcentaje en funcin del ancho de la ventana del visor. Sirve para que la magen no se distorcione. bgcolor = codigo de color Especifica el color de fondo del elemento de la Tabla. Para indicar que acaba una fila de celdas se utiliza la directiva <TR>. A continuacin un ejemplo de una tabla que contiene solo texto:
Pgina 17
Manual de HTML
Ejemplo <TABLE border = 4 cellspacing = 4 cellpadding = 4 width =80%> <TH align = center>Buscadores <TH align = center colspan = 2>Otros Links <TR> <TD align = LEFT>alltheweb <TD align = LEFT>hotmail <TD align = LEFT>yahoo <TR> <TD align = LEFT>Google <TD align = LEFT>latinmail <TD align = LEFT>uazuay </TABLE>
Visualizacin
Buscadores alltheweb Google hotmail latinmail
Otros Links yahoo uazuay
13) Formularios
Los formularios nos permiten dentro de una pgina Web solicitar informacin al visitante y procesarla. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se desee una interaccin por parte del usuario. La instruccin para la creacin de formularios es FORM, tiene los parmetros action y method. action = "programa" Indica el programa que va a "tratar" a las variables que se enven con el formulario. En nuestro caso enviaremos las variables por correo electrnico, con lo que el "programa" ser "mailto: direccion_de_correo". method = POST / GET Indica el mtodo segn el que se transferirn las variables. POST produce la modificacin del documento de destino (como en el caso de enviar por correo las variables). GET no produce cambios en el documento destino
Pgina 18
Manual de HTML
14) Campos de Entrada

Se utiliza la instruccin <INPUT>. El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se est definiendo y el atributo NAME especifica el nombre de la variable que se define. Cada tipo de variable tiene sus propios parmetros: type= text name = campo Indica que el campo a introducir ser un texto. Sus parmetros son : maxlenght = nmero Nmero mximo de caracteres a introducir en el campo(desplaza largo) size = nmero Tamao en caracteres que se mostrar en pantalla. value = "texto" Valor inicial del campo. Normalmente estar vaco. <input type="text" maxlenght="20" size="" src="" value=""> type = password name = campo Indica que el campo ser una palabra de paso. Mostrar asteriscos (*) en lugar de las letras escritas. Sus parmetros opcionales son los mismos que para text. <input type="password> type = checkbox name = campo El campo se elegir marcando una casilla. Se permite marcar varias casillas. Los valores de las casillas sern indicados por : value = "valor" checked La casilla aparecer marcada por defecto. <input type="checkbox" name="var" value="1"> <input type="checkbox" checked="checked" name="var2" value="1"> type = radio name = campo El campo se elegir marcando una casilla, a diferencia de la anterior solo permite marcar una de las casillas. Los valores de las casillas seran indicados por : value = "valor" <input type="radio" name="var" value="1"> <input type="radio" name="var" value="2"> type = image name = campo Profesor: Samuel Molina Javier Pgina 19
Manual de HTML El campo contendr el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parmetro : src = "fichero de imagen". <input type="image" src="boton.jpg"> type = hidden name = campo Pasa parmetros de una pantalla a otra. El usuario no puede modificar su valor, ya que el campo est oculto se manda siempre con el valor indicado por el parmetro : value = "valor" <input type="hidden" value="1" name="var"> type = submit Representa un botn. Ejecuta el programa php del formulario.Al pulsar este botn la informacin de todos los campos se enva al programa indicado en <FORM>. Tiene el parmetro value = "texto" que indica el texto que aparecer en el botn. <input type="submit" name="aceptar" value="aceptar"> type = reset Representa un botn. Al pulsar este botn se borra el contenido de todos los campos. El parmetro value = "texto" indica el texto que aparecer en el botn. <input type="reset" name="borrar" value="borrar"> Campos de Seleccin: Eleccin entre mltiples opciones Se usa para mens simples o mltiples. Define mens de tipo pop-up y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX . Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parmetros son : name = campo Nombre del campo size = num Nmero de opciones visibles. Si se indica 1 se presenta como un men desplegable, se se indica mas de uno se presenta como una lista con barra de desplazamiento. mltiple Permite selecionar ms de un valor para el campo. Las diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede incluir el parmetro selected para indicar cual es la opcin por defecto. En caso de que no se especifique, se tomar por defecto la primera opcin de la lista.
Pgina 20
Manual de HTML
15) reas de texto.

Representa un campo de texto de mltiples lneas. Normalmente se utiliza para que se incluyan en el comentarios. La directiva usada es <TEXTAREA> </TEXTAREA>, y sus parmetros : name = campo Nombre del campo. cols = num. Nmero de columnas de texto visibles. rows = num. Nmero de filas de texto visibles. wrap = VIRTUAL / PHYSICAL Justifica el texto automticamente en el interior de la caja. La opcin PHYSICAL enva las lneas de texto separadas en lneas fsicas. La opcin VIRTUAL enva todo el texto seguido. A continuacin un ejemplo de formulario utilizando todas las formas de introduccin de datos. <FORM action = "mailto: nombre@ext.es" 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 ="Mapthis" > Programa Mapthis <INPUT type = checkbox name = archivo value ="Help" > Archivo de Ayuda <P> Tu Edad : <INPUT type = radio name = edad value = "-20" > Menos de 20 aos <INPUT type = radio name = edad value = "20-40" > Entre 20 y 40 aos <INPUT type = radio name = edad value = "+40" > Mas de 40 aos <P> <INPUT type = hidden name = lugar value = "pagina personal" > Como encontraste mi pgina : <SELECT name = donde > <OPTION>De casualidad <OPTION>Por el buscador Ole <OPTION>Por el buscador Yahoo <OPTION>Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name = comentario rows = 5 cols = 40 wrap = virtual ></TEXTAREA> <P> Profesor: Samuel Molina Javier Pgina 21
Manual de HTML <INPUT type = submit value = "Enviar" > <INPUT type = reset value = "Borrar" > </FORM>
En la pgina Web se vera as: Tu Nombre: Archivos a Enviar: Manual de Html Tu Edad : Menos de 20 aos Entre 20 y 40 aos Mas de 40 aos Como encontraste mi pgina :
De casualidad
Tu Clave:
Programa Mapthis
Archivo de Ayuda
Tus Comentarios:
Enviar
Borrar
16) Frames
Las frames son una tcnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podr manipular por separado. Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso no se define la etiqueta BODY .
Pgina 22
Manual de HTML Para definir frames se utilizan las directivas <FRAMESET> </FRAMESET> y <FRAME>. <FRAMESET> indica cmo se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisin. Los parmetros de <FRAMESET> son rows y cols en funcin de si la divisin de la pantalla se realiza por filas (rows) o columnas (cols). ROWS: Se definir separado por comas el tamao de cada una de las frames. De esta forma se dividir la pantalla de forma horizontal, segn cada una de las filas definidas. <FRAMESET ROWS="100, 50%, *"> <FRAME SRC="frame1.htm" NAME="frame1"> <FRAME SRC="frame2.htm" NAME="frame2"> <FRAME SRC="frame3.htm" NAME="frame3"> </FRAMESET> COLS: Toma los mismos posibles valores que ROWS , pero en este caso para las columnas, se definirn las frames de forma vertical. <FRAMESET COLS="100, 50%, *"> <FRAME SRC="frame1.htm" NAME="frame1"> <FRAME SRC="frame2.htm" NAME="frame2"> <FRAME SRC="frame3.htm" NAME="frame3"> </FRAMESET>
17)
Atributos de los Frames:
URL: Especifica el documento HTML o fichero que se mostrar en la frame definida. Si no se especifica documento alguno se mostrar la frame vaca. NAME: Indica el nombre de la frame, este nombre se usar en los hiperenlaces para indicar la frame de destino del documento. Si no se indica el nombre solo se podr mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces. MARGINWIDTH: Indica el ancho del margen, este atributo es opcional ya que el navegador ajusta todos los mrgenes al mismo tamao. MARGINHEIGHT:Igual que el anterior pero para el alto de los mrgenes. Lo normal es no especificar ninguno de estos dos atributos. SCROLLING: Indica si la frame tendr o no una barra de scroll, la cual permite desplazarse por el documento, pulsando con el ratn en ella.Tiene los valores YES para que se vea barra, NO para que no se vea y AUTO para que aparezca automticamente.
Pgina 23
Manual de HTML NORESIZE: Indica que la frame no debe ser variada de tamao por el usuario, se puede variar el tamao de una frame situando el cursor del ratn encima y arrastrando en la direccin deseada. Por defecto todas las frames pueden variar su tamao. TARGET: Indica la frame de destino de la operacin, se puede especificar que frame ser la de destino, no siendo necesario que sea la frame del documento actual. Como nombre de la frame su usar el nombre que se especific en el atributo NAME de la etiqueta FRAME . Estas instrucciones se utilizarn normalmente en los documentos que se incluyen dentro de las frames. Las etiquetas que permiten el uso de TARGET son las siguientes: A:En los hiperenlaces indicar la frames donde se mostrar el documento, una vez que se siga el hiperenlace. <A HREF=" url " TARGET=" frame "> BASE:Indicar la frame en la que se mostrar por defecto todos los hiperenlaces del documento actual. Se debe especificar en la cabecera del documento ( HEAD ). <BASE TARGET=" frame "> AREA: En la definicin de imgenes sensibles en el cliente , se indica la frame donde se ver el documento que se activa en la zona correspondiente de la imagen. <AREA SHAPE=RECT COORDS=" x,y,... " HREF=" url " TARGET=" frame "> FORM: Indicar la frame de destino del resultado del formulario . <FORM ACTION=" url " TARGET=" frame "> Adems existen otros valores adicionales de los frames: TARGET="_blank": Indica que se muestre en una nueva ventana vaca. TARGET="_self": Se mostrar en la misma ventana o frame que lo referencia. TARGET="_parent": Se muestra en la frame o estructura de frames que llam al documento actual. TARGET="_top": Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana. Profesor: Samuel Molina Javier Pgina 24
Manual de HTML
18) INSERCIN DE ELEMENTOS MULTIMEDIA

"Multimedia La forma bsica de incluir un archivo de un formato no reconocido por el navegador es incluirlo en una liga o hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacin externa que trate este tipo de archivos. El navegador tendr definida una lista aplicaciones que trabajarn con los formatos ms comunes de vdeo, audio o imgenes. Esta opcin es poco operativa ya que no podran incluirse en el documento actual. El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso de elementos multimedia, pero no es estndar y se puede asegurar que no ser posible verlos en maquinas distintas a los PC con windows, ni en navegadores distintos a este. Extensiones Multimedia de Internet Explorer El Internet Explorer de Microsoft permite mostrar vdeo en formato AVI y reproducir sonido, de una forma sencilla, para eso aade una nueva etiqueta y un atributo a la etiqueta de mostrar imgenes. <BGSOUND ...> Reproduccin de audio <BGSOUND SRC="archivo de sonido" LOOP= n INFINITE> Incluiremos una nica vez esta etiqueta en el arcivo que deseemos presente msica de fondo. En el atributo SRC se indicar el archivo de audio que se debe reproducir. El archivo podr ser de formato .wav, .au o MIDI (.mid). El atributo LOOP indica cuantas veces se ejecutar la pieza musical, podr indicarse un nmero o INFINITE que indicar de forma indefinida. <IMG DYNSRC...> Reproduccin de vdeo <IMG DYNSRC="archivo de sonido" LOOP= n INFINITE CONTROLS START= FILEOPEN MOUSEOVER> En este caso es un nuevo atributo para la etiqueta IMG, caso de existir este, en vez de mostrar una imgen mostrar un vdeo en formato AVI (Vdeo for Windows), se puede utilizar todas los atributos normales de IMG, pudiendo usar las distintas alineaciones y colocaciones respecto al texto, adems se podr variar el tamao del vdeo con los atributos HEIGHT y WIDTH. Se aaden otros atributos que solo se pueden aplicar al vdeo, el atributo IMG SRC indica el url del archivo que se mostrar. El atributo LOOP indica el nmero de Profesor: Samuel Molina Javier Pgina 25
Manual de HTML veces que se mostrar el vdeo. El atributo CONTROLS indicar si se mostrarn los botones de control, que permitirn volver a reproducir, regresar, .... El atributo START indica si la secuencia de vdeo empezar al abrir el archivo (FILEOPEN) o cuando pase el cursor del ratn encima (MOUSEOVER). De no poder mostrar el vdeo por tratarse de otro navegador (por ejemplo Netscape), se podr indicar una imgen que se muestre de manera alternativa, incluyendo el atributo SRC. Plug-in's Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modo especfico, dado por ejemplo la capacidad de mostrar vdeo, audio, archivos de un determinado formato (archivos PDF, presentaciones de ASAP, archivo VRML, etc ...). No existe actualmente un conjunto estndar de plug-in"s para cada tipo de documentos, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribucin. Se puede asegurar que todas las aplicaciones sern compatibles y si por ejemplo se referencia un archivo de sonido en formato .wav en su pgina, este podr ser odo por todos aquellos que tengan un plug-in para este tipo de formatos. Para que un documento multimedia que es incluido en una pgina sea visible por el usuario debe cumplir dos condiciones: -La primera es que posea el navegador de Netscape en su versin 2.0 o superior y la segunda es: -Contar con el plug-in correspondiente que trata el documento deseado. Por tanto se recomienda un uso moderado de los plug-in"s utilizando archivos que sean de formatos comunes y un uso complementario en una pgina, ya que muchos usuarios no podrn verlo, o escucharlo. Es aconsejable incluir un enlace en el que se referencie el archivo, de esta forma un usuario podr seguir el enlace y ver el documento en un visualizador externo si lo posee. Existe una instruccin que permite incluir cualquier tipo de archivo dentro de los documentos HTML. <EMBED> Insertar archivos Esta instruccin permite la inclusin de cualquier tipo de documento en la posicin del documento HTML donde se especifique. Su funcionalidad es similar a la IMG para incluir imgenes. En este caso para que pueda mostrarse el archivo deber tener el plug-in adecuado que lo interprete. El formato es el siguiente:
Pgina 26
Manual de HTML <EMBED SRC="URL del archivo" WIDTH=n n% HEIGHT=n n%> En el atributo SRC se indicar el archivo que se desea mostrar, y los atributos WIDTH y HEIGHT se indicar el tamao que tendr en objeto insertado, siendo estos opcionales. El archvio que podr ser vdeo, audio, imgen de algn tipo distinto a los que se presentan por default, archivo de presentaciones, etc... solo podr ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de documentos, en caso contrario mostrar un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta. En el caso que se pueda mostrar el plug-in se incluir en la zona del documento que se indic pudiendo as de este modo insertar dentro de un documento HTML pelculas de vdeo o incluir sonidos de fondo. Se recomienda un uso limitado de esta posibilidad, ya que existirn muchas personas que no posean el Netscape 2.0, o una versin superior y no posean el plug-in correspondiente, y por lo tanto no podrn ver los atractivos de su pgina.
19) Ejemplos
Ejemplo 1:
Pgina 27
Manual de HTML
Ejemplo2
Pgina 28
Manual de HTML
Pgina 29
Manual de HTML Ejemplo 3
Pgina 30
Manual de HTML
Pgina 31
Pgina 32
Ejemplo 6
Pgina 33
Pgina 34
Pgina 35
Pgina 36
Ejemplo 11
Pgina 37

Manual de HTML

Transféré par

Informations du document

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Manual de HTML

Transféré par

Droits d'auteur :

Manual de HTML

2) Cabecera del documento

3) Cuerpo del documento <BODY></BODY>

Profesor: Samuel Molina Javier

4) Caracteres del Documento

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

6) Espacios y Saltos de Lnea

Profesor: Samuel Molina Javier

Ejemplo <PRE> Este texto ha sido

Este texto tiene<BR>saltos de linea y <P> de prrafo.

Profesor: Samuel Molina Javier

8) Atributos del Texto

Subrayado <U></U> Tachado <S></S>

Superindice <SUP></SUP> Subindice Centrado <SUB></SUB> <CENTER></CENTER>

Ejemplo <FONT size = +2 color = "#00FF00face = "Arial"> Manual HTML </FONT>

Profesor: Samuel Molina Javier

Resultado 1. 2. 3. 4. Coello Dvila Izquierdo Zamora

Coello Dvila Izquierdo Zamora

Resultado Coello Dvila Izquierdo Zamora

Coello Dvila Izquierdo Zamora

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

<IMG src="DUCKY.GIF" height=20 >

IMAGENES Y MAPAS SENSITIVOS

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Buscadores alltheweb Google hotmail latinmail

Otros Links yahoo uazuay

Profesor: Samuel Molina Javier

14) Campos de Entrada

Profesor: Samuel Molina Javier

15) reas de texto.

Profesor: Samuel Molina Javier

Atributos de los Frames:

Profesor: Samuel Molina Javier

18) INSERCIN DE ELEMENTOS MULTIMEDIA

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 3

Profesor: Samuel Molina Javier

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 4

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 5

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 7

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 8

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 9

Profesor: Samuel Molina Javier

Manual de HTML Ejemplo 10

Profesor: Samuel Molina Javier

Vous aimerez peut-être aussi