Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1.INTRODUCCION
1.1. Antes de empezar
Para escribir las líneas e instrucciones de un programa HTML vas a necesitas un edito...
reconocidas todas las instrucciones que se citan, otros navegadores mas antiguos pueden
no reconocer alguna de ellas.
El l...
portada.htm, cabeza.htm, menu.htm, form.htm y tablero.htm. También deberias incluir
en este directorio, junto a los archiv...
un documento HTML que contendrá todo lo que se aprenda en este tutorial">
<META name="keywords" content="color texto lista...
En HTML existe la posibilidad de incluir comentarios que no serán mostrados por el
visor y son útiles para realizar anotac...
{ { -- | | -- } } -- ˜ ~ --
&   nbsp ¡ ¡ iexcl ¢ ¢ cent £ £ pound
¤ ¤ curren ¥ ¥ yen ¦ ¦ brvbar § § sect
¨ ¨ uml (c) © cop...
respetando tabulaciones, espacios, retornos de carro, etc. ...Para indicar un salto de línea
se utiliza <BR> y para un cam...
<H1>Texto de prueba</H1>
Texto de prueba
<H2> Texto de prueba</H2>
Texto de prueba
<H3> Texto de prueba</H3>
Texto de prue...
prueba</SUB>
Centrado <CENTER></CENTER>
<CENTER> Texto
de
prueba</CENTER>
Texto de prueba
Por otro lado la instrucción <FO...
Las listas numeradas representan los elementos de las lista numerando cada uno de ellos
según el lugar que ocupan. Para es...
Las listas de definición muestran los elementos tipo diccionario, o sea, término y
definición. Se utiliza para ellas la in...
border ="número". Indica el ancho del borde de la tabla en puntos.
cellspacing ="número". Indica el espacio en puntos que ...
<TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%">
<TH align ="center">Primero
<TH align ="center" colspan...
</HTML>
6. IMÁGENES
6.1. Insertar imágenes
Hasta ahora hemos escrito texto en nuestra Web. Vamos a ver ahora como insertar...
SI PONEMOS SE VERA ASÍ
Te gusta<IMG src ="imagen.jpg" alt="Lastima,
no puedes verla"
height="120" width="120" align="middl...
Un Mapa es una imagen que permite realizar diferentes hiperenlaces en función de la
"zona" de la imagen que se pulse. Las ...
Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas.
Cada una de estas ventanas se podr...
zona de la página que no quepa en la subventana no la veremos), y (auto) la muestra
solo en caso de que sea necesario para...
<NOFRAMES>
<!-- Indico las órdenes para aquellos visores que no soporten Frames -->
<BODY>
SU VISOR NO MUESTRA FRAMES.
</B...
Un hiperenlace puede hacerse a cualquier tipo de fichero. Hemos visto cómo hacer
enlaces a páginas Web o secciones dentro ...
<!-- A continuación se pone fondo azul y texto en negro-->
<BODY bgcolor"#0000FF" text"#000000">
<OL>
<LI> <A href="tabler...
*value = "texto". Valor inicial del campo. Normalmente será " ", o sea, vacío.
type ="password" name ="campo". Indica que ...
Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se
incluyan comentarios. La instrucción ...
&lugar=pagina+personal &donde=Por+un+buscador &comentario%94=
Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0...
<INPUT type = "reset" value = "Borrar" >
</FORM>
</BODY>
</HTML>
10. OTRAS INSTRUCCIONES
Netscape y Microsoft han añadido ...
<PARAM name = "message" value = "**Bienvenido a mi pagina WEB - Manual de
HTML**">
</APPLET>
10.2. Marquee
La instrucción ...
Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta
característica de Ms Explorer utiliza ...
Para que veas un ejemplo, a continuación pongo el código de un Script cuya función
consiste en hacer que al pasar el ratón...
Upcoming SlideShare
Loading in …5
×

Html

1,011 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html

  1. 1. 1.INTRODUCCION 1.1. Antes de empezar Para escribir las líneas e instrucciones de un programa HTML vas a necesitas un editor de textos, en principio te sirve cualquiera, hasta el propio bloc de notas de Windows, luego basta con que lo guardes con la extensión html o htm; a partir de ese momento ya será reconocido como página web por el explorador y por supuesto por los navegadores de Internet. Pero hacerlo así, puede suponer que tengas que realizar un enorme esfuerzo tanto en el aprendizaje de HTML, como en el tiempo dedicado a construir tus páginas web, y hoy por hoy, tal dedicación ya no es necesaria. Existen una serie de editores especializados en este lenguaje que realizan la mayor parte de las acciones mediante menús y botones sin tener que escribirlas en código HTML, de eso ya se encarga el propio editor. El mismo Windows 98 viene con uno de estos editores de los que te hablo, se trata de FrontPage Express, según parece es una versión reducida de FrontPage que es uno de los mejores editores que existen para este tipo de programación. Prácticamente solo tienes que escribir el texto y poco más, pues el resto ( establecer enlaces a paginas o archivos, insertar colores de fondo o imágenes, insertar tablas, listas, propiedades de fuente y texto, etc..) se establece mediante menús existentes en la barra de herramientas, con lo cual te ahorras tener que aprender como utilizar todo eso en código HTML. Este tipo de editores se llaman "WYSIWYG", que mas o menos quiere significar que lo que se ve es lo que se obtiene, por lo que mientras trabajas estas viendo la apariencia real del formato y diseño de la página y no el código; para cuando tengas que insertar fragmentos en código HTML para implementar acciones no previstas por el editor, tendrás una opción para ver la página en código fuente (HTML) y allí podrás escribirlas. Para que lo entiendas, si estas utilizando Internet Explorer, abre en la barra de herramientas el menú "ver" y dentro haz clic sobre "código fuente", luego sigue leyendo en este punto. ¿Que te ha parecido?, pues todo lo que hayas visto entre las expresiones <HTML>...</HTML> es la programación de esta página, parece complicado, pero en realidad con este tipo de editores tu estarás escribiendo el texto tal y como lo ves ahora, como en cualquier editor normal, todo lo demás se insertará mediante menús. Al margen de que con este manual vas a conocer bien la programación en HTML, considero imprescindible, por las razones que ya te he expuesto, que te consigas uno de estos editores. Entre los grandes del tema destacan el FrontPage y Macro media Dreamweaver, pero también hay un buen número del tipo shareware que podrás encontrar en la mayoría de webs que ofrezcan recursos gratuitos. 1.2. Empezando HTML son las siglas de "Hyper Text Markup Language", es un lenguaje de programación que permite construir documentos para que puedan ser visualizados por los navegadores de Internet. Hasta la fecha se han producido diversos niveles de estandarización o revisiones del citado lenguaje; la última es la 3.0 y será la utilizada en este manual. Solo a partir de Netscape 2.x y Explorer 3.x serán prácticamente 1
  2. 2. reconocidas todas las instrucciones que se citan, otros navegadores mas antiguos pueden no reconocer alguna de ellas. El lenguaje HTML consta de una serie de instrucciones que indican al navegador, la forma de representar los elementos del documento. Todas las instrucciones se designan mediante una palabra clave que es la que reconoce el navegador. A su vez cada una de estas instrucciones posee una serie de parámetros que la definen. Hay dos tipos principales de instrucciones: Abiertas y Cerradas. En las primeras, la palabra clave se pone únicamente al principio de la instrucción. En las segundas la palabra clave se pone al principio y al final. En ambos casos las palabras clave van encerradas entre los símbolos < y > y además en la del final se incluye el signo / antes de la palabra. <HTML>..................</HTML> Esta es una instrucción cerrada, y la primera y fundamental para programar en este lenguaje. Todo, absolutamente todo lo que contiene el documento HTML, para que sea reconocido como tal por el navegador debe incluirse dentro de esta instrucción 1.3. Aprender rápido Como ya te indique anteriormente, con este manual vas a tener suficiente para poder construir tu propia web, no obstante y para poder aplicar lo que vas a ir aprendiendo construiremos paso a paso una web muy sencilla a medida que vayamos conociendo cada una de las instrucciones y sus parámetros. Esta web de ejemplo estará incluida en unos cuadros de color amarillo. ¿Quieres ir mas rápido?, no tienes paciencia para seguir el tutorial paso a paso. Hazte con uno de los editores que te he indicado más arriba y sigue solamente los cuadros de ejemplo, limítate a usar el manual como recordatorio y para incluir las instrucciones que no tenga el editor en su menú. Seguramente los únicos apartados de este manual a los que deberás prestar mas atención serán a los FRAMES y FORMULARIOS, para el resto no tendrás prácticamente necesidad de conocer programación HTML. Para editar la Web de ejemplo que vamos a construir, abre una carpeta en el directorio principal de tu disco duro, con el nombre que quieras, dentro iras guardando todas las páginas y archivos relacionados. Para empezar abrirás seis documentos en los que escribirás el código que viene a continuación, si es un editor especializado no escribas nada, míralo en código HTML y verás que ya tiene escrito algo parecido: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Una vez incluido este código guardalos con los siguientes nombres: index.htm, 2
  3. 3. portada.htm, cabeza.htm, menu.htm, form.htm y tablero.htm. También deberias incluir en este directorio, junto a los archivos anteriores, un archivo de imagen que utilizaremos en su correspondiente capítulo. Ten en cuenta que solo hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG, si no tienes puedes convertirlas con algún editor o visor de imágenes. NOTA: No utilices acentos en los nombres de archivos y carpetas, causarán errores en el navegador. 2. ESTRUCTURA DEL DOCUMENTO 2.1. Cabecera La instrucción <HEAD></HEAD> delimita la cabecera del documento. Dentro de ella pueden incluirse otras instrucciones importantes: La instrucción cerrada <TITLE> donde se incluirá el titulo de la página web: <TITLE>Pagina de ejemplo</TITLE> Y la instrucción <META> que es abierta, sirve para indicar el contenido y las palabras clave de la web y es muy importante dado que la mayoria de los buscadores existentes en internet utilizan el contenido de esta instrucción para incluir la página en sus bases de datos. Esta instrucción cuenta entre otros con los parámetros name y content. Los parámetros pueden indicarse o no, sino se establecen el navegador entenderá que debe usar los designados por defecto. Si en una instrucción se incluyen parámetros estos deben colocarse junto a la palabra clave de inicio y antes del simbolo >. Los valores específicos de cada parámetro van encerrados entre comillas y detrás del signo =. <META name="Pagina de prueba" content="Página creada para aprender a construir un documento HTML que contendrá todo lo que se aprenda en este tutorial"> El ejemplo anterior indica el nombre que le hemos dado a la página y contiene un breve resumen definiendo su contenido <META name="keywords" content="color texto listas tablas enlaces imagenes"> Este ejemplo indicará a los buscadores las palabras clave de la web (keywords), es decir sus contenidos, las cuales deben ir en el parámetro content separadas entre ellas por un espacio. Antes de continuar, añadiremos lo aprendido a nuestra pagina index.htm: <HTML> <HEAD> <TITLE>Pagina de ejemplo</TITLE> <META name="Pagina de prueba" content="Página creada para aprender a construir 3
  4. 4. un documento HTML que contendrá todo lo que se aprenda en este tutorial"> <META name="keywords" content="color texto listas tablas enlaces imagenes"> </HEAD> <BODY> </BODY> </HTML> NOTA: Siempre debes guardar la primera página de tu web con el nombre "index.htm", pues los navegadores tienen establecido que la primera página a abrir de una web es la que tiene este nombre. 2.2. Cuerpo Dentro de la instrucción cerrada <BODY> es donde va a ir todo el contenido que queramos que tenga nuestra página web. En primer lugar veamos los parámetros que tiene esta instrucción y para que sirven: background="nombre del fichero". Si queremos que el fondo del documento sea alguna imagen este es el parámetro que debe utilizarse, en el espacio entre comillas debe ir el nombre del fichero. Si no esta en el mismo directorio debe ir con la dirección. Ten en cuenta que si la imagen es pequeña y no rellena todo el fondo del documento, se reproducirá tantas veces como sea necesario para rellenarlo. Es como en los fondos del escritorio en windows. bgcolor="código del color". Si no utilizaste el parámetro anterior para insertar algún archivo de fondo, con este podrás ponerle un color. Aúnque pongas un color no se verá si has utilizado el parámetro background con algún archivo. text="código de color". Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link="código de color". Indica el color de los textos que dan acceso a un hiperenlace. Por defecto es azul vlink="código de color". Indica el color de los textos que dan acceso a un hiperenlace que ya hemos visitado con el navegador. Por defecto es púrpura. alink="código de color". Indica el color de los textos que dan acceso a un hiperenlace que está activo. Por defecto es rojo. Los códigos de color son números hexadecimales compuestos por tres pares de cifras que indican la proporción de los colores primarios: rojo, verde y azul. El código se antecede del simbolo#. Asi los colores variarán desde" #000000" que es el negro hasta el "#FFFFFF" que es el blanco. Entre ellos, por citar alguno, tienes el rojo "#FF0000" o el azul "#0000FF". El primer par de cifras indican la proporción de color rojo, el segundo par de cifras la proporción de color verde y las dos últimas la proporción de color azul. Cada par de cifras hexadecimales nos permite un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos los diferentes colores. De cualquier manera en tu editor de HTML podrás obtener el código de color correspondiente escogiendo directamente el color desde una paleta. 4
  5. 5. En HTML existe la posibilidad de incluir comentarios que no serán mostrados por el visor y son útiles para realizar anotaciones que nos indiquen lo que estamos haciendo en una determinada parte del documento. Esto puede resultar importante a medida que la página contenga más cosas y tenga un código muy extenso. Para incluir comentarios en la página Web se utiliza la instrucción <!-- -->: <!-- Esto es un comentario--> Vamos a poner titulo, color de fondo amarillo (me gusta el amarillo), texto negro y un comentario a nuestra página portada.htm: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor"#FFFF00" text"#000000"> </BODY> </HTML> .TEXTO 3.1. Juego de caracteres Este apartado puedes saltartelo si quieres, basta que sepas que todos los visores de páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO 8859-1, que permiten escribir textos en la mayoria de los paises occidentales. Si tienes que insertar en tu web algún caracter fuera de lo normal, lee este apartado. Se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Estos caracteres pueden ser representados por un código númerico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el simbolo & y terminan con el simbolo ;. A continuación están las principales entidades: Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad ! ! -- " " -- # # -- $ $ -- % % -- & & -- ' ' -- ( ( -- ) ) -- * * -- + + -- ´ , -- - - -- . . -- / / -- : : -- ; ; -- < < -- = = -- > > -- ? ? -- @ @ -- [ [ -- \ -- ] ] -- ^ ^ -- _ _ -- ` ` -- 5
  6. 6. { { -- | | -- } } -- ˜ ~ -- &   nbsp ¡ ¡ iexcl ¢ ¢ cent £ £ pound ¤ ¤ curren ¥ ¥ yen ¦ ¦ brvbar § § sect ¨ ¨ uml (c) © copy ª ª ordf « « laquo ¬ ¬ not ­ shy (r) ® reg ¯ ¯ macr ° ° deg ± ± plusm ² ² sup2 ³ ³ sup3 ´ ´ acute µ µ micro ¶ ¶ para · · middot ¸ ¸ cedil ¹ ¹ sup1 º º ordm » » raquo 1/4 ¼ frac14 1/2 ½ frac12 3/4 ¾ frac34 ¿ ¿ iquest À À Agrave Á Á Aacute   Acirc à à Atilde Ä Ä Auml Å Å Aring Æ Æ AEling Ç Ç Ccedil È È Egrave É É Eacute Ê Ê Ecirc Ë Ë Euml Ì Ì Igrave Í Í Iacute Î Î Icirc Ï Ï Iuml Ð Ð Eth Ñ Ñ Ntilde Ò Ò Ograve Ó Ó Oacute Ô Ô Ocirc Õ Õ Otilde Ö Ö Ouml × × times Ø Ø Oslash Ù Ù Ugrave Ú Ú Uacute Û Û Ucirc Ü Ü Uuml Ý Ý Yacute Þ Þ Thorn ß ß szlig à à agrave á á aacute â â acirc ã ã atilde ä ä auml å å aring æ æ aeling ç ç ccedil è è egrave é é eacute ê ê ecirc ë ë euml ì ì igrave í í iacute î î icirc ï ï iuml ð ð eth ñ ñ ntilde ò ò ograve ó ó oacute ô ô ocirc õ õ otilde ö ö ouml ÷ ÷ divide ø ø oslash ù ù ugrave ú ú uacute û û ucirc ü ü uuml ý ý yacute þ þ thorn ÿ ÿ yuml Por lo tanto la palabra página la podríamos escribir como: página p&aacute;gina página 3.2. Espaciados y saltos de línea En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor.Asimismo tampoco se representan tabulaciones, retornos de carro, etc... Para ello existen unas instrucciones específicas que indican estos códigos. La instrucción <PRE></PRE> obliga a visualizar el texto tal y como ha sido escrito, 6
  7. 7. respetando tabulaciones, espacios, retornos de carro, etc. ...Para indicar un salto de línea se utiliza <BR> y para un cambio de párrafo ( una línea en blanco en medio ) se utiliza <P>. La instrucción <P> puede usarse también como cerrada <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al visor la forma de justificar el párrafo. Los valores posibles de este parámetro son left, right y center. SI PONEMOS SE VERA ASI Esto es una frase Esto es una frase <PRE>Esto es una frase</PRE> Esto es una frase Esto<BR> es una<P> frase Esto es una frase <P align="right">párrafo justificado a laderecha </P> párrafo justificado a la derecha <P align="center">párrafo de texto centrado </P> párrafo de texto centrado La Instrución <HR> muestra una línea horizontal de tamaño determinable. Utilizada sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. Tiene los siguientes parámetros opcionales: align = "posición". Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center). noshade. No muestra sombra, evitando el efecto en tres dimensiones. size = "número". Indica el grosor de la línea de pixels. width = "número en tanto por ciento (%)". Indica el ancho de la línea en tanto por ciento en función del ancho de ventana del visor. También se puede especificar un número sin poner el simbolo de porcentaje, entonces indicaría el ancho de la línea en pixels. <HR align = "center" size="20" width="50%"> 3.3. Cabeceras En un documento de HTML se pueden indicar seis tipos de cabeceras. El texto que escribamos entre el inicio y el fin de cada instrucción será el afectado por ella. Los textos marcados como cabeceras provocan automáticamente un retorno de carro sin necesidad de incluir la instrucción <BR>: SI PONEMOS SE VERA ASI 7
  8. 8. <H1>Texto de prueba</H1> Texto de prueba <H2> Texto de prueba</H2> Texto de prueba <H3> Texto de prueba</H3> Texto de prueba <H4> Texto de prueba</H4> Texto de prueba <H5> Texto de prueba</H5> Texto de prueba <H6> Texto de prueba</H6> Texto de prueba <H3>Texto de Prueba</H3>Esta es mi página. Texto de Prueba Esta es mi página. NOTA: El uso de estas instrucciones puede ser útil para poner el título, pero puedes prescindir de ellas, dado que ya podremos aumentar el tamaño de letra de cualquier frase con los atributos de texto que veremos a continuación. 3.4. Atributos de texto Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias instrucciones. Algunas de ellas pueden ser no reconocidas por determinados visores de Internet: Atributo Directiva Ejemplo Resultado Negrita <B></B> <B>Texto de prueba</B> Texto de prueba Cursiva <I></I> <I> Texto de prueba</I> Texto de prueba Teletype <TT></TT> <TT> Texto deT prueba</TT> Texto de prueba Subrayado <U></U> <U> Texto de prueba</U> Texto de prueba Tachado <S></S> <S> Texto de prueba</S> Texto de prueba Parpadeo <BLINK></BLINK> <BLINK> Texto de prueba</BLINK> Texto de prueba Superíndice <SUP></SUP> <SUP> Texto de prueba</SUP> Texto de prueba Subíndice <SUB></SUB> <SUB> Texto de Texto de prueba 8
  9. 9. prueba</SUB> Centrado <CENTER></CENTER> <CENTER> Texto de prueba</CENTER> Texto de prueba 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 = "valor". Da al texto un tamaño en puntos determinado. color ="código de color". Escribe el texto en el color cuyo código se especifica. face ="nombre de font". Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que ve la página, se usará el tipo de fuente predeterminado del navegador. <FONT size="2" color ="#FF0000" face="Arial">Texto de prueba</FONT> Existen otras instrucciones que realizan las mismas operaciones que las antes vistas en los atributos del texto, asi <STRONG></STRONG> es igual que <B></B>, <EM></EM> es igual que <I></I> y <STRIKE></STRIKE> es igual que <S></S>. Añadiremos algo de lo aprendido en nuestra página portada.htm: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor"#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta página web para ver que es lo que sucede, de paso probamos los parámetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> </BODY> </HTML> ¡Hey! empieza a parecer un programa 4. LISTAS Existen tres tipos de listas: numeradas, sin numerar y de definición. 4.1. Listas numeradas 9
  10. 10. Las listas numeradas representan los elementos de las lista numerando cada uno de ellos según el lugar que ocupan. Para este tipo de lista se utiliza la instrucción <OL></OL>. Cada uno de los elementos debe ir precedido de la instrucción <LI>. La instrucción <OL> puede llevar los siguientes parámetros: start ="número". Indica qué número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. 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: l = Numéricamente (1,2,3,4, ... , etc.) a = Letras minúsculas (a,b,c,d, ..., etc.) A = Letras mayúsculas (A,B,C,D, ..., etc.) i = Números romanos en minúsculas (i,ii,iii,iv,v,..., etc.) I = Números romanos en mayúsculas (I,II,III,IV,V, ..., etc.) SI PONEMOS SE VERÁ ASI <OL> <LI> Primero <LI> Segundo <LI> Tercero </OL> 1. Primero 2. Segundo 3. Tercero <OL type ="A"> <LI> Primero <LI> Segundo <LI> Tercero </OL> A. Primero B. Segundo C. Tercero 4.2. Listas sin numerar Las listas sin numerar representan los elementos de la lista con una marca que antecede a cada uno de ellos. Se utiliza la instrucción <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La instrucción <UL> puede contener el parámetro type que indica la forma de la marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk (disco), circle (circulo)o square (cuadrado). SI PONEMOS SE VERÁ ASI <UL type ="circle"> <LI> Primero <LI> Segundo <LI> Tercero </UL> • Primero • Segundo • Tercero 4.3. Listas de definición 10
  11. 11. Las listas de definición muestran los elementos tipo diccionario, o sea, término y definición. Se utiliza para ellas la instrucción <DL></DL>. El elemento marcado como término se antecede de la instrucción <DT>, el marcado como definición se antecede de la instrucción <DD>. SI PONEMOS SE VERÁ ASI <DL> <DT> PRIMERO <DD>El número uno <DT>SEGUNDO <DD>El número dos <DT>TERCERO <DD>El número tres </DL> PRIMERO El número uno SEGUNDO El número dos TERCERO El número tres 4.4. Apuntes finales sobre las listas. Existen otros dos tipos de listas menos comunes. Las listas de menú y las de directorio que se comportan igual que las listas sin numerar. La lista de menú utiliza la instrucción <MENU></MENU> y los elementos se anteceden de <LI>. El resultado es una lista sin numerar más compacta, con menos espacio interlineal. La lista de directorio utiliza la instrucción <DIR></DIR> y los elementos se anteceden de <LI>. Para seguir con nuestra intención de construir una Web, vamos a poner una de las listas que hemos aprendido en el documento menu.htm: <HTML> <HEAD> <TITLE>Indice</TITLE> </HEAD> <BODY bgcolor"#000000"> <OL> <LI> Tablero <LI> Formulario <LI> Volver </OL> </BODY> </HTML> 5. TABLAS Las tablas nos permiten representar cualquier elemento de nuestra página (texto, listas, imágenes, etc.) en diferentes filas y columnas separadas entre sí. Es una herramienta muy útil para ordenar los contenidos. Se define mediante la instrucción <TABLE></TABLE>. Los parámetros opcionales de esta directiva son: 11
  12. 12. border ="número". Indica el ancho del borde de la tabla en puntos. cellspacing ="número". Indica el espacio en puntos que separa las celdas que están dentro de la tabla. cellpadding ="número". Indica el espacio en puntos que separa el borde de cada celda y el contenido de ésta. width ="número o %". 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 ="número o %". Indica el alto 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 = "código de color". Especifica el color de fondo de toda la tabla. 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, el contenido será resaltado en negrita y en un tamaño ligeramente superior al normal. Los parámetros opcionales de ambas instrucciones son: align ="valor". Indica como se debe alinear el contenido de la celda. Sus valores son: a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify). valign ="valor". Indica la alineación vertical del contenido de la celda. Sus valores son: en la parte superior (top), en la inferior (bottom), o en el centro (middle). rowspan = "número". Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. colspan =" número". Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. width ="número o %". 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 sólo funciona en los navegadores modernos. bgcolor = "código de color". Especifica el color de fondo de la celda. Para indicar que acaba 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 hiperenlace, una lista, etc. EJEMPLO 12
  13. 13. <TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%"> <TH align ="center">Primero <TH align ="center" colspan ="2">Segundo <TR> <TD align ="left">uno <TD align ="left">dos <TD align ="left">tres <TR> <TD align ="left">cuatro <TD align ="left">cinco <TD align ="left">seis </TABLE> SE VERÁ ASI Primero Segundo uno dos tres cuatro cinco seis Las instrucciones <TD> y <TH> son cerradas según el estándar de HTML, es decir, que un elemento de la tabla <TD> deberí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. Continuando con nuestra web abriremos el archivo tablero.htm e insertaremos la tabla anterior: <HTML> <HEAD> <TITLE>Tablero</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor"#FFFF00" text"#000000"> <TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%"> <TH align ="center">Primero <TH align ="center" colspan ="2">Segundo <TR> <TD align ="left">uno <TD align ="left">dos <TD align ="left">tres <TR> <TD align ="left">cuatro <TD align ="left">cinco <TD align ="left">seis </TABLE> </BODY> 13
  14. 14. </HTML> 6. IMÁGENES 6.1. Insertar imágenes Hasta ahora hemos escrito texto en nuestra Web. Vamos a ver ahora como insertar imágenes. Para incluir una imagen en nuestra página Web utilizaremos la instrucción <IMG>. Recuerda que actualmente los navegadoes solo reconocen dos formatos: GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PC , CDR ,etc.) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización. La instrucción <IMG> tiene varios parámetros: src = "imagen". Indica el nombre del fichero gráfico a mostrar. alt = "texto". Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. lowscr = "imagen". Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la página. Este parámetro no es reconocido por la totalidad de los navegadores, así que en la mayoría de los casos será ignorado mostrándose sólo la primera imagen. Netscape muestra la imagen indicada por lowscr en primer lugar, y posteriormente la indicada por src. Si las imágenes son iguales pero tienen distinta resolución se conseguirá un efecto tipo "Fade". Si las imágenes son de distinto tamaño la imagen indicada en src se redimensionará al tamaño indicado por la imagen referenciada en lowscr. align ="valor". Indica cómo se alineará el texto que siga a la imagen. Los valores son: (top) alinea el texto con la parte superior de la imagen, (middle) con la parte central y (bottom) con la parte inferior. border ="número". Indica el tamaño del borde de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forma parte de un hiperenlace. height = "número o %". Indica el alto de la imagen en puntos o porcentaje. Se usa para variar el tamaño de la imagen original. width ="número o %". Indica el ancho de la imagen en puntos o porcentaje. Se usa para variar el tamaño de la imagen original. hspace ="número". Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda. vspace ="número". Indica el número de puntos verticales que separarán la imagen del texto que la siga y la anteceda. ismap/usemap. Indica que la imagen es un MAPA. Veremos estos parámetros en el siguiente apartado. 14
  15. 15. SI PONEMOS SE VERA ASÍ Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen Te gusta Mi imagen Si el visor no pudiese visualizar el gráfico....... Te gusta Lastima, no puedes verla Mi imagen La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página Web. Si no fuese así, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. Ejemplo: <IMG src="http://www.unsitio.com/imagen.gif"> Para probar lo aprendido insertaremos la imagen en la página portada.htm. Allí donde en el ejemplo se consigne imagen.jpg deberás escribir el nombre de archivo de tu imagen con su extensión gif o jpg: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor"#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta página web para ver que es lo que sucede, de paso probamos los parámetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> <p align="center">Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen</p> </BODY> </HTML> 6.2. Mapas 15
  16. 16. Un Mapa es una imagen que permite realizar diferentes hiperenlaces en función de la "zona" de la imagen que se pulse. Las instrucciones para crear mapas son <MAP></MAP> y <AREA>.La instrucción <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa. La instrucción <AREA> define las áreas sensibles de la imagen. Tiene los siguientes parámetros obligatorios: shape = "tipo". Indica el tipo de área a definir. Los tipos de área pueden ser los siguientes : (rect) Area rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. (poly) Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El visor se encarga de "cerrar" la figura. (circle) Circulo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos). coords = "coordenadas". Indica las coordenadas de la figura indicada con shape. href = "url". Indica la dirección a la que se accede si se pulsa en la zona delimitada por el área indicada. Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa. Es importante definir una última área que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un área definida. Aunque el tema de los mapas sobrepasa las pretensiones de este curso, vamos a ver un ejemplo ficticio:. <MAP name = "casa"> <AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm"> <AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm"> <AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm"> <AREA shape = "circle" coords = "80,76,21" href= "arbol.htm"> <AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm"> <AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm"> </MAP> Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente instrucción : <IMG src = "grafico.gif" usemap = "#casa"> El proceso mas laborioso es el de determinar las coordenadas. Existen programas que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el ratón. 7. FRAMES 16
  17. 17. Las frames es una técnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página Web diferente. Esto es muy útil para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames se utilizan las instrucciones <FRAMESET> </FRAMESET> y <FRAME>. La instrucción <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias directivas <FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <FRAMESET> son rows y cols en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). estos parámetros se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha. EJEMPLOS RESULTADOS <FRAMESET rows= "25%,50%,25%"> Crea subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%. <FRAMESET cols="120,*,100"> Crea tres subventanas verticales, la primera y la tercera tendrán un ancho fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*). <FRAMESET cols="15%,*"> <FRAMESET rows="20%,*"> En este caso "anidamos" dos directivas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda directiva vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20 % de la subventana, y la inferior el resto. La instrucción <FRAME> indica las propiedades de cada subventana. Es necesario indicar una instrucción <FRAME> para cada subventana creada. Sus parámetros son : name = "nombre". Indica el nombre por el que nos referiremos a esa subventana. src = "URL" . La ventana mostrará en principio el contenido del documento HTML que se indique. marginwidth =" numero". Indica el margen izquierdo y derecho de la subventana en puntos. marginheight = "numero". Indica el margen superior e inferior de la subventana en puntos. scrolling = "valor". Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. El valor (yes) muestra siempre la barra de desplazamiento, (no) no la muestra nunca (la 17
  18. 18. zona de la página que no quepa en la subventana no la veremos), y (auto) la muestra solo en caso de que sea necesario para poder ver la página. noresize. Si se indica este parámetro, el usuario no podrá redimensionar las subventanas con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo. border = "numero". Indica el borde que separara esta frame de la siguiente. Si se indica cero (0) no se mostrara borde entre las frames, consiguiendo un efecto muy elegante. Los visores que no soportan la característica de subventanas, no mostrarán nada de lo indicado con estas instrucciones. Por eso existe una instrucción llamada <NOFRAMES> </NOFRAMES>. Todo lo indicado en ella será lo que muestren los visores sin capacidad para visualizar frames. Los visores que soporten frames obviaran esta instrucción y su contenido. Si tu visor puede visualizar frames habrás visto que en mi web la pantalla esta dividida en dos zonas, a la izquierda esta el menú, siempre visible y a la derecha se van viendo los diferentes contenidos. Las frames deben ir antes de la definición del cuerpo de documento. Insertaremos unas frames con sus correspondientes comentarios en nuestra página index.htm. Recuerda que esta será la primera página de la Web: <HTML> <HEAD> <TITLE>Index</TITLE> </HEAD> <FRAMESET rows = "15%,*"> <!-- Creo dos ventanas horizontales, la de arriba ocupa un 15% , la de abajo el resto. --> <FRAME name="cabeza" src"cabeza.htm"> <!-- Llamo a la ventana superior "cabeza" y muestro el documento "cabeza.htm" --> <FRAMESET cols = "20%,*"> <!-- Creo dos subventanas verticales en la ventana inferior, la de la izquierda ocupa el 20%, la otra el resto --> <FRAME name = "menu" src = "menu.htm" > <!-- Llamo a la subventana inferior izquierda "menu" y muestro el documento "menu.htm" --> <FRAME name = "portada" src = "portada.htm" > <!--Llamo a la subventana inferior derecha "portada" y muestro el documento "portada.htm"--> </FRAMESET> <!-- Cierro la definición de las subventanas inferiores --> 18
  19. 19. <NOFRAMES> <!-- Indico las órdenes para aquellos visores que no soporten Frames --> <BODY> SU VISOR NO MUESTRA FRAMES. </BODY> </NOFRAMES> </FRAMESET> <!-- Cierro la definición de las ventanas horizontales --> </HTML> 8. HIPERENLACES Una de las grandes características de una página Web es que se pueden insertar hiperenlaces. Un hiperenlace es un elemento que permite el acceso a otro recurso, página Web o archivo. Para incluirlos se utiliza la instrucción <A></A>. El texto o imagen que se encuentre dentro de los límites de la instrucción será sensible, esto quiere decir que si pulsamos con el ratón sobre él, se realzará la función de hiperenlace indicada por la instrucción <A></A>. Si el hiperenlace está indicado por un texto, éste aparecerá subrayado y en distinto color, si se trata de una imagen, ésta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el hiperenlace si lo pulsamos. SI PONEMOS SE VERÁ ASÍ <A href="portada.htm" target="_blank"> Pulsa aquí Pulsa aquí <A href= "portada.htm"target="_blank"> <IMG src="imagen.jpg" width="120" height="90"></A> Si situamos el ratón encima de la frase o imagen y pulsamos, el navegador accederá a la página Web indicada por el parámetro href, es decir, accederá a la página portada.htm. Compruebalo si quieres. Te falta por conocer el parámetro target que aprenderás al final de este capítulo. Un hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo haremos con el parámetro name. <A name="sección1"></A> Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará sección1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma: <A href="#sección1">Primera Parte</A> 19
  20. 20. Un hiperenlace puede hacerse a cualquier tipo de fichero. Hemos visto cómo hacer enlaces a páginas Web o secciones dentro de una página Web, pero podríamos hacer un enlace a un grupo de noticias, a una dirección de correo o a un fichero cualquiera: <A href="news://news.actualidad.es/">Noticias de actualidad</A> <A href="mailto:nombre@ext">Envíame tus sugerencias</A> <A href="archivo.zip"> Pulsa aquí para descargar este archivo </A> El segundo y tercer ejemplo resultan muy interesantes, pues en un caso puedes hacer que te escriban a tu dirección de correo electrónico y con el otro puedes permitir a tus visitantes que descarguen ficheros a su ordenador pues el navegador intentará ejecutar el fichero, y si no puede hacerlo, como sería el caso de un fichero comprimido, preguntará al visitante si desea grabarlo en su ordenador. Si estamos usando frames, debemos tener en cuenta en que ventana queremos que se muestre la nueva página enlazada. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger otra ventana debe añadirse un nuevo parámetro a la instrucción <A href= > </A>. Este parámetro se llama target y puede tener los siguientes valores: target = "nombre_ventana" Muestra el hiperenlace en la ventana cuyo nombre se indica. target = "_blank" Abre una nueva copia del visor y muestra el hiperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa). target = "_self" Se muestra el hiperenlace en la subventana activa. target = "_parent" El hiperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ninguno se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target = "_top" Suprime todas las subventanas de la pantalla y muestra el hiperenlace a pantalla completa. Ya has visto un ejemplo más arriba, cuando hemos hecho abrir una ventana para ver la página portada.htm. Vamos a abrir nuestra página menu.htm e insertaremos enlaces en cada uno de los elementos de la lista; Uno en el primer elemento de la lista para que nos abra la página tablero htm, otro en el segundo elemento que abrirá la página form.htm y el tercero para que nos permita volver a la portada. Recordemos que nuestra web se iniciará con frames y por lo tanto vamos a hacer que cuando se abran las páginas lo hagan en la subventana inferior derecha, a la que pusimos el nombre de "portada": <HTML> <HEAD> <TITLE>Indice</TITLE> </HEAD> 20
  21. 21. <!-- A continuación se pone fondo azul y texto en negro--> <BODY bgcolor"#0000FF" text"#000000"> <OL> <LI> <A href="tablero.htm" target="portada"></A>Tablero <LI><A href="form.htm" target="portada"></A>Formulario <LI><A href="portada.htm" target="portada"></A>Volver </OL> </BODY> </HTML> 9. 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 (campos) cada uno de los cuales quedará asociado a una variable. Una vez se hayan introducido los valores en los campos, el contenido de éstos será enviado a la dirección (URL) donde tengamos el programa que pueda procesar las variables. Para poder realizar este último paso de procesar las variables necesitaremos un programa externo en algún lenguaje de programación como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo de programas excede a este manual, 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 (variables) de entrada. La instrucción <FORM> tiene los siguientes parámetros: 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 ="valor". Indica el método según el que se transferirán las variables. Su valores son: (post) que produce la modificación del documento de destino (como en el caso de enviar por correo las variables), y (get)que 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). 9.1. Campos 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 ="campo". Indica que el campo a introducir será un texto. Sus parámetros son: * maxlenght ="numero". Número máximo de caracteres a introducir en el campo. *size = "numero". Tamaño en caracteres que se mostrará en pantalla. 21
  22. 22. *value = "texto". Valor inicial del campo. Normalmente será " ", o sea, vacío. type ="password" name ="campo". Indica que el campo será una contraseña. Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los mismos que para text. type ="checkbox" 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" name ="campo". El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro: * src = "fichero de imagen". 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. 9.2. Campos de Selección Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la instrucción <SELECT> </SELECT> . Sus parámetros son : name ="campo". Nombre del campo size ="número". Número de opciones visibles. Si se indica 1 se presenta como un menú desplegable, si se indica más de uno se presenta como una lista con barra de desplazamiento. multiple. Permite seleccionar más 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 parámetro selected para indicar cual es la opción por defecto. En caso de que no se especifique, se tomará por defecto la primera opción de la lista. 9.3. Áreas de Texto 22
  23. 23. Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan comentarios. La instrucción usada es <TEXTAREA> </TEXTAREA>, y sus parámetros: name ="campo". Nombre del campo. cols ="número". Numero de columnas de texto visibles. rows = "número". Numero de filas de texto visibles. wrap ="valor". Justifica el texto automáticamente en el interior de la caja. El valor (phisical) envía las líneas de texto separadas en líneas físicas. El valor (virtual) envía todo el texto seguido. Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de datos. <FORM action = "mailto: tucorreo@ext.es" method =" post" > Tu Nombre:<INPUT type = "text" name = "nombre" size = "30" > Tu Contraseña: <INPUT type ="password" name ="clave" size ="8" > <P> Archivos a Enviar: <INPUT type = "checkbox" name = "archivo" value = "imagen" > Imagen jpg <INPUT type = "checkbox" name = "archivo" value ="fichero" > Archivo zip <P> Tu Edad : <INPUT type = "radio" name = "edad" value = "-20" > Menos de 20 años <INPUT type = "radio" name = "edad" value = "+20" > Mas de 20 años <P> <INPUT type ="hidden" name ="lugar" value = "pagina personal" > Como encontraste mi página : <SELECT name = "donde" > <OPTION>De casualidad <OPTION>Por un buscador <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> Si se rellenase este formulario y se pulsa sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a la dirección de correo especificada. Si se pulsa el botón Borrar se borraran los datos que haya en el formulario. El texto que se recibiría por correo electrónico sería parecido a este nombre=Pedro+Perez&clave=12345678&archivo=Imagen&archivo=fichero&edad=+20 23
  24. 24. &lugar=pagina+personal &donde=Por+un+buscador &comentario%94= Espero+que+me+mandes+los%0D%0Aficheros+antes+del+martes%0D%0A%0D%0ASaludos. %0D%0A :Podemos observar que en el correo se separan las variables con el símbolo &, los espacios se sustituyen por el signo + y se representan los códigos de retorno de carro y avance de línea del campo de texto con los caracteres %0D y %0A respectivamente. 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. NOTA: El envio por correo electrónico solo funciona correctamente con Netscape. En Microsoft Explorer esta opción da como resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el visor utilizado se ha de utilizar un programa externo que realice este proceso. De todos modos vamos a insertar el código anterior a nuestra página form.htm, para ver el efecto sin insertar el botón enviar: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo plateado y texto en negro--> <BODY bgcolor"#C0C0C0" text"#000000"> <FORM action = "mailto: tucorreo@ext.es" method =" post" > Tu Nombre:<INPUT type = "text" name = "nombre" size = "30" > Tu Contraseña: <INPUT type ="password" name ="clave" size ="8" > <P> Archivos a Enviar: <INPUT type = "checkbox" name = "archivo" value = "imagen" > Imagen jpg <INPUT type = "checkbox" name = "archivo" value ="fichero" > Archivo zip <P> Tu Edad : <INPUT type = "radio" name = "edad" value = "-20" > Menos de 20 años <INPUT type = "radio" name = "edad" value = "+20" > Mas de 20 años <P> <INPUT type ="hidden" name ="lugar" value = "pagina personal" > Como encontraste mi página : <SELECT name = "donde" > <OPTION>De casualidad <OPTION>Por un buscador <OPTION>Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name ="comentario" rows ="5" cols ="40" wrap ="virtual" ></TEXTAREA> <P> 24
  25. 25. <INPUT type = "reset" value = "Borrar" > </FORM> </BODY> </HTML> 10. OTRAS INSTRUCCIONES Netscape y Microsoft han añadido al estándar de HTML diversas instrucciones que hacen más atractiva la visualización de las páginas Web. Veremos aquí algunas de ellas y la forma de usarlas. Estas instrucciones pueden no funcionar en algún visor de HTML, pero el uso de ellas por parte de los dos "grandes" del software para Internet hace prever que serán inmediatamente incluidas en las nuevas versiones del resto de los visores. 10.1. Applet La instrucción <APPLET></APPLET> indica la ejecución de un programa (applet) externo escrito en lenguaje JAVA. Java es un lenguaje creado por Sun Microsystems que permite realizar operaciones multimedia sin incorporar nuevas instrucciones HTML. Los applets son muy variados, y cada uno de ellos realiza una tarea distinta. Hay applets para hacer que el texto se mueva dentro de la hoja, se contraiga y expanda, etc.... Esta instrucción tiene los siguientes parámetros : codebase ="url". Dirección donde se encuentra el applet Java. Si se encuentra en el mismo lugar que la pagina Web este parámetro no es necesario. code ="programa". Indica el nombre del programa (applet) a ejecutar. width = "número". Indica el ancho en puntos en el que el programa realizará su función. height ="número". Indica el alto en puntos en el que el programa realizará su función. Dentro de la instrucción <APPLET> se incluye la instrucción <PARAM> que envía al programa Java los parámetros necesarios para su funcionamiento. Esta instrucción suele tener como mínimo los parámetros: name ="campo". Nombre de la variable a enviar. value = "valor". Valor de la variable a enviar. Veamos un ejemplo en el que se ejecuta un programa Java que permite que un texto se desplace de un lado a otro de una zona de la pantalla: <APPLET codebase="http://www.ucm.es/java" code="Laufschrift.class" width="350" height="25" > <PARAM name ="bg.color" value = "0,255,0"> 25
  26. 26. <PARAM name = "message" value = "**Bienvenido a mi pagina WEB - Manual de HTML**"> </APPLET> 10.2. Marquee La instrucción <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Explorer. Sus parámetros son los siguientes : align ="valor". Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "codigo de color". Indica el color del fondo de la marquesina. direction ="valor". Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right). height ="número o %". Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del visor. width = "número o %". Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del visor. loop = "num / infinite". Indica el numero de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente. scrolldelay = "número". Indica los milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará. <MARQUEE bgcolor ="#FFFFFF" width= "15%" scrolldelay ="0" > Bienvenido a mi web</MARQUEE> Aún nos queda una página de nuestro ejemplo en la que no hemos puesto nada. Es el momento, abrimos cabeza.htm e insertamos el código anterior: <HTML> <HEAD> <TITLE>Cabeza</TITLE> </HEAD> <!-- A continuación se pone fondo rojo y texto en negro--> <BODY bgcolor"#FF0000" text"#000000"> <MARQUEE bgcolor ="#FF0000" width= "15%" scrolldelay ="0" > Bienvenido a mi web</MARQUEE> </BODY> </HTML> 10.3. Sonido de Fondo 26
  27. 27. 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 = "fichero". Indica el nombre del fichero que contiene el sonido (.waw, .mid). 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. Ejemplo:<BGSOUND src= "police.mid" loop=" infinite"> Para utilizar esta función en Netscape se utiliza la directiva <EMBED>. Esta directiva se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un vídeo, un gráfico BMP, etc... Tiene los siguientes parámetros: src ="fichero". Indica el nombre del fichero que contiene el sonido (.waw, .mid) o el vídeo (.avi). autostart ="true". Incluirlo si deseamos que la reproducción se inicie inmediatamente. loop ="true". Incluirlo si deseamos que la reproducción no se detenga. (se repite continuamente). volume ="número". Volumen al que se reproducen los ficheros de sonido. width = "numero". Anchura de la representación del objeto. (Si es un sonido no es necesario este parámetro). height = "numero". Altura de la representación del objeto. (Si es un sonido no es necesario este parámetro). controls = "smallconsole". Visualiza una serie de controles para manejar la reproducción del fichero. Ejemplo :<EMBED src= "police.mid" loop="true" autostart=" true" volume="50"> 10.4. Scripts Un Script es un programa escrito en un lenguaje distinto al HTML que se puede incluir en una página web. Para incluir estos programas se utiliza la instrucción <SCRIPT></SCRIPT>. Esta instrucción tiene el parámetro language para indicar el lenguaje de programación utilizado para el Script. Para que el código del programa no sea visto por los navegadores que no reconocen la instrucción <SCRIPT> debe cerrarse con la instrucción de comentario de HTML <!-- -->. Explicarte algo más sobre los lenguajes de programación para Scripts es algo que se sale de este tutorial dedicado al HTML. Desde luego, el siguiente paso para mejorar una web, pasa ineludiblemente por el uso de Scripts, y deberías aprender lenguajes de programación como JAVASCRIPT para construirlos. No obstante, existen multitud de Scripts construidos para los que no necesitas esos conocimientos, basta con que copies los códigos en tus páginas. 27
  28. 28. Para que veas un ejemplo, a continuación pongo el código de un Script cuya función consiste en hacer que al pasar el ratón por encima de una imagen se muestre otra diferente: <script language="javascript"> <!-- imagen1=new Image() imagen1.src="imagen01.jpg" imagen2=new Image() imagen2.src="imagen02.jpg" //--> </script> <img src="imagen01.jpg" name="ejemplo" onMouseover="document.images['ejemplo'].src=imagen2.src" onMouseout="document.images['ejemplo'].src=imagen1.src"> Pasa el ratón por la imagen para ver el efecto: 11.VER TU WEB Bien, enhorabuena, ya has construido tu web, a partir de ahora puedes modificarla y añadirle todo lo que quieras, el límite lo marcas tú. Si has seguido el curso y creado los diversos archivos que te he indicado, cuando abras con el explorador la página index.htm debes ver una web similar a esta, para verla mejor hazlo a pantalla completa: Pulsa aqui Gracias por haberme seguido hasta aquí, espero haberte servido de ayuda TUTORIAL SACADO DE INTERNET (DESCONOZCO LA DIRECCIÓN DE ESTE TUTORIAL 28

×