Html para ti

50 %
50 %
Information about Html para ti
Technology

Published on February 20, 2014

Author: izyalyth

Source: slideshare.net

Description

aprende HTML
comandos y demás

HTML Aprende Mas. UPT Ing. en Software 1 HTML Para ti Libro para: Izyalyth Álvarez Cisneros

HTML Aprende Mas. UPT Ing. en Software Contenido Introduccion a HTML ........................................................................................................................... 3 La estructura básica de una página web es la siguiente ..................................................................... 3 Meta tags básicos. ............................................................................................................................... 4 Etiqueta body. ..................................................................................................................................... 6 Formateo de texto. ............................................................................................................................. 7 Párrafos y saltos de línea. ................................................................................................................... 9 2 Comentarios. ..................................................................................................................................... 11 Separadores. Etiqueta hr................................................................................................................... 11 Caracteres especiales. ....................................................................................................................... 13 Tablas. ............................................................................................................................................... 16 Listas. ................................................................................................................................................. 18 Imágenes. .......................................................................................................................................... 20 Mapas de imágenes. ......................................................................................................................... 21 Enlaces............................................................................................................................................... 23 Formularios I: introducción. .............................................................................................................. 26 Formularios II: campos de texto........................................................................................................ 27 Formularios III: listas de opciones. .................................................................................................... 29 Formularios IV: botones submit y reset. ........................................................................................... 32 Formularios V: otros campos. ........................................................................................................... 33 Formularios VI: ejemplo de formulario. ............................................................................................ 35 Frames. .............................................................................................................................................. 36 Iframes. ............................................................................................................................................. 38 Marquee ............................................................................................................................................ 38 Fieldset y legend................................................................................................................................ 40 Más etiquetas. ................................................................................................................................... 41 CSS. .................................................................................................................................................... 43 Javascript. .......................................................................................................................................... 44 Álvarez Cisneros Izyalyth Ernestina

HTML Aprende Mas. UPT Ing. en Software Introduccion a HTML HTML (HyperText Markup Language) es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web. HTML no es un lenguaje de programación, sino una lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra forma para mostrar distintos contenidos por pantalla. Por ejemplo, si creamos un documento de texto que se llame ejemplo.html y que contenga el siguiente texto 3 <html> <head></head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto it&aacute;lica.</i><br> </body> </html> generará el siguiente resultado: Hola mundo! Esto es negrita. Y esto itálica. Ver ejemplo en una página aparte. Por tanto, aprender HTML consiste en conocer y saber utilizar dichas etiquetas. Para realizar este curso no necesitas ningún software especifíco, sino que tan sólo necesitas un editor de texto, como puede ser el bloc de notas de Windows, aunque se recomienda usar algún otro editor más especializado que te ayude en la escritura del código, como puede ser el Macromedia Dreamweaver. Este curso consiste en una descripción de las distintas etiquetas y los distintos atributos que tiene HTML, una explicación de cómo se emplean y consejos para mejorar el resultado final de las páginas. Para seguirlo créate un fichero de texto con extensión .html o .html (de esta manera con un simple doble clic, se abrirá tu navegador, lo que te permitirá visualizar todas las pruebas que hagas de manera rápida) y edítalo con cualquier editor de texto. Ves probando los distintos ejemplos que te damos en tu propio ordenador y practica tu mismo con las etiquetas que estudiamos en cada capítulo. La estructura básica de una página web es la siguiente: <html> <head></head> <body> </body> </html> Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas. La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda). La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

HTML Aprende Mas. UPT Ing. en Software <html> <head> <title>Esto es el t&iacute;tulo de la p&aacute;gina.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto it&aacute;lica.</i><br> </body> </html> 4 generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página): Ver ejemplo en una página aparte. Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas: <br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar). <b></b> => Indica comienzo y fin de negrita. <i></b> => Itálica. También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior. Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>. Meta tags básicos. No podemos hablar de la estructura básica de un página web sin hablaros de los meta tags. Los meta tags se insertan en la cabecera de la página, entre las etiquetas <head></head>. La función de estos tags varía. Pueden ser informativos, para los buscadores y usuarios, indicándoles el tipo de contenido de la web, sus palabras claves, etc. o pueden predefinir una actuación a la página. Los meta tags no se pueden ver a no ser que sea a través del código fuente. Es decir, un meta tag no hace variar la apariencia de una página web, pero son imprescindibles e importantísimos para los buscadores webs. El esquema de un meta tag es el siguiente: <meta name=" " content=" "/>. El “name” muestra el nombre de la etiqueta y el “content” el contenido de esa etiqueta. Los meta tags pueden cerrarse de dos formas: > o /> . La segunda es más correcta aunque los navegadores no muestran diferencia con una u otra. Puede que todo esto te suene a chino, no te preocupes. Ahora vamos a pasar a explicarte los meta tags más importantes que debes conocer. Meta tag “Keywords” Este meta indica al buscador las palabras claves de nuestra página. Por ejemplo, nuestra página al ser un tutorial de html, sus palabras clave serán “tutorial” y “html”. Los keywords deben ir separados por comas y sin espacios entre ellos. <meta name="Keywords" content="tutorial,html" />

HTML Aprende Mas. UPT Ing. en Software Meta tag “Description” Este meta es también destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos. Esto lo haremos a través de frases cortas y separadas entre ellas por puntos. En nuestra página este meta quedaría de la siguiente manera: <meta name="Description" content="Tutorial html. Meta tags" /> Meta tag “language” 5 Este meta tag le indica al buscador el idioma en el que está escrita la página. En el caso de español en content se pone “es”, en inglés “en”, en francés “fr”… Nuestra página es española así que su meta será el siguiente: <meta http-equiv="Content-Language" content="es"/> Meta tag “Distribution” Este meta es importante. Marac la distribución que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en “content” indicaremos “global”. Escribir este meta en global es lo más recomendable. Así pues nuestra página incluirá… <meta name="distribution" content="global"/> Meta tag “Robots” Puede que no queramos que nuestra página sea indexada por los robots de los buscadores Web. En ese caso debemos indicárselo con el meta “Robots”. En content variará la respuesta dependiendo del valor que escribamos. Los valores “all” e “index” indicarán que queremos que se indexe toda la página. Los valores “none” y “noindex” indicarán que no queremos que se indexe nada. El valor “follow” indica que queremos que el robot siga los vínculos externos de nuestra web y “nofollow” indicará lo contrario. Como resumen, y siguiendo el ejemplo del apartado "introducción al html" aunque cambiando el "title", nuestros meta tags serían los siguientes: <html> <head> <title>Meta tags b&aacute;sicos.</title> <meta http-equiv="Content-Language" content="es"/> <meta name="Keywords" content="tutorial,html"/> <meta name="Description" content="Tutorial html. Meta tags"/> <meta name="Distribution" content="global"/> <meta name="Robots" content="all"/> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto it&aacute;lica.</i><br> </body> </html> Todo esto generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):

HTML Aprende Mas. UPT Ing. en Software Etiqueta body. Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra página web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el "cuerpo" del documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos. 6 Esta personalización la conseguiremos a través de una serie de parámetros que a continuación te presentaremos. Bien, pues vamos a empezar. Color de fondo: bgcolor El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body> Imagen de fondo: background Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background". La etiqueta quedaría de la siguiente manera: <body background="URL"> </body> Dónde leemos "URL" deberemos escribir la dirección de la imagen que queramos que sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la página, la imagen se repetirá tanto a lo ancho como a lo largo hasta rellenar todo el espacio. Color de texto: text Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro "text". Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body> Márgenes: leftmargin, topmargin, rightmargin y bottommargin Ya sabemos de qué color será nuestro fondo y nuestro texto, pero también podemos predefinir los márgenes de nuestra página web para que queda mucho mejor. Porque no queremos que nuestro texto se quede muy pegada a los márgenes, ¿verdad? Para especificar los márgenes utilizaremos el parámetro margin, con su correspondiente indicación delante. Así encontraremos "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo. Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente: <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>

HTML Aprende Mas. UPT Ing. en Software Color de links: link, alink y vlink En body también podemos ( y de hecho debemos hacerlo) definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink"). Así pues, si queremos que nuestra página tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estén activos y se queden en azul cuando estén inactivos deberemos escribir lo siguiente: <body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body> 7 Formateo de texto. El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar. Anteriormente ya hemos visto en un pequeño texto introductorio como se ponía la negrita y la itálica. Pero eso era solamente introductorio. A continuación lo vamos a explicar de una forma más detallada. Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar, entre medias. En el ejemplo de la negrita se abriría <b> y se cerraría </b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto está escrito en negrita y en cursiva</i></b>.Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior. Por último, recordad que podéis escribir las etiqutes en minúsculas o en mayúsculas. Vamos con los diferentes formateos html que podemos encontrar: Negrita Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo: Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> Este palabra la vamos a poner en negrita y esta otra también Cursiva Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>). También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de

HTML Aprende Mas. UPT Ing. en Software una u otra. Aquí os dejo un ejemplo: Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em> Este palabra la vamos a poner en cursiva y esta otra también Subrayado 8 Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante: <u>Así subrayaríamos una frase importante</u> Así subrayaríamos una frase importante Texto con espaciado simple o TT TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>. <tt>Esta frase la vamos a escribir de forma espaciada </tt> Esta frase la vamos a escribir de forma espaciada Palabras más grandes o más pequeñas Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>. Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá. Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos. Un ejemplo sería el siguiente: Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>. Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún. Superíndices y subíndices Mediante el Html también podemos escribir fórmulas matemáticas. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice. Así nos queda un ejemplo como el siguiente:

HTML Aprende Mas. UPT Ing. en Software Texto Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H <sub>2</sub> O o números elevados a potencias 7<sup>3</sup>. Gracias a estas etiquetas podemos escribir cualquier formula matemática como 3 esta: H 2 O o números elevados a potencias 7 . 9 tachado Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra: Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da! Si la palabra no me gusta la puedo tachar así, así o así. ¡Lo mismo me da! Párrafos y saltos de línea. En este tema vamos a tratar y a explicaros los párrafos y los saltos de línea en html. Porque debemos saber que el html los saltos de línea, es decir, los espacios que hagamos en el código no son interpretados te tal forma. En html para dejar un salto de línea debemos utilizar una serie de etiquetas, de código, que el navegador interpretará cómo tal. Esas etiquetas son <br/> </p> o </pre>. A continuación te explicaremos cada una de ellas. Saltos de línea Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un claro ejemplo: Puedes escribir un texto como este y el navegador no lo interpretará así Y se verá así: Puedes escribir un texto como este y el navegador no lo interpretará así

HTML Aprende Mas. UPT Ing. en Software Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no hace falta abrirla y cerrarla, sólo con escribirla el navegador ya la interpreta. Así pues el texto anterior deberíamos escribirlo de la siguiente forma: Puedes escribir un texto como este <br/> y el navegador no lo interpretará así 10 Párrafos Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>. Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima y uno por abajo. El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha), “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto). Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente: <p align="center">Este texto se alineará al centro</p> <p align="right">Este texto se alineará a la derecha</p> <p align="left">Este texto se alineará a la izquierda</p> que se verá así: Este texto se alineará al centro Este texto se alineará a la derecha Este texto se alineará a la izquierda La etiqueta <pre> La etiqueta <pre> la puedes utilizar para que el navegador interprete el texto escrito tal y como está. Como ejemplo es mostraremos este texto: Escribo esta línea así Dejo dos líneas de separación y escribo tres más.

HTML Aprende Mas. UPT Ing. en Software Sin poner ninguna etiqueta, el navegador respondería así: “Escribo esta línea así Dejo dos líneas de separación y escribo tres más.” En cambio utilizando la etiqueta <pre> y cerrándola con su correspondiente etiqueta, el texto se vería como queremos. 11 Comentarios. Los comentarios html son textos que van dentro del código fuente pero que no son mostrados por los navegadores. Estos comentarios son muy útiles para los editores de la página, ya que ayudan a una mayor comprensión del código. La forma correcta de escribir un comentario html es la siguiente: <!--Esto es un comentario--> Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo el html, aunque la estructura es prácticamente la misma. Hay una apertura y un cierre, y todo lo que va dentro de estos dos elementos es el comentario. El código de apertura es el siguiente: <!-- y el cierre del comentario se escribe así: -->. Mira el código del siguiente ejemplo: A continuación vamos a escribir un comentario, pero aquí no lo podremos ver porque...<br> <!--este es el primer comentario que hemos escrito--> ...los comentarios no son visibles para el usuario... <br> <!--otro comentario para editores--> ...sólo para los editores de la página Y comprueba a continuación como no vamos a poder ver los comentarios escritos. Sólo podremos hacerlo a través del código fuente de la página. A continuación vamos a escribir un comentario, pero aquí no lo podremos ver porque... ...los comentarios no son visibles para el usuario... ...sólo para los editores de la página Separadores. Etiqueta hr. Separadores en html: La etiqueta <hr>

HTML Aprende Mas. UPT Ing. en Software Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos. La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size. Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal 12 <hr size="20" /> <hr size="2" /> Y el resultado sería el siguiente: Otro parámetro que podemos definir es la anchura de la franja mediante el parámetro width . El parámetro será “width=x %”, siendo “x” el tanto por cien que queremos que ocupe nuestra fnarja. En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si queremos que ocupe más o menos tendremos que escribirlo con el parámetro width. A continuación vamos a escribir una franja de 75% de ancho: <hr width=75%"/> Que quedaría de la siguiente manera: Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja en tres dimensiones. Si quieres que la franja sea simple, sin sombrita deberás escribir el parámetro “noshade”. También podemos predefinir el color que le queremos dar a la franja con el parametro "color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo sólo debemos ponerle la etiqueta: <hr color="#FF0000"/>. Por último, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del párrafo mediante el parámetro que ya vimos con anterioridad: “align”. “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda. Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de grosor 3, de un ancho del 50% y alineada al centro. <hr size=3 width= 50% align=center/> La siguiente va a ser una franja de grosor 2, de ancho 80%, sin sombra y alineada a la derecha.

HTML Aprende Mas. UPT Ing. en Software <hr size=2 width=80% noshade=“noshade” align= right /> Encabezados. Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>. 13 Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño. A continuación vamos a mostraros el código de los seis diferentes encabezados: <h1> Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6> Podéis ver el resultado en el siguiente enlace: Ver encabezados html. Si ya habéis visto el ejemplo os daréis cuenta que cada encabezado está separado del anterior y del siguiente por un salto de línea y que nosotros en el código no hemos escrito nada. Podéis deducir pues, que los encabezados generan por sí solos uno salto de línea. Por último recordaros que la etiqueta <h> podemos escribirla tanto en mayúsculas como en minúsculas. Es decir, lo mismo daría escribir <h1> que <H1>. Caracteres especiales. Las páginas Web están abiertas a todo el mundo y a todos los lenguajes. Pero no todos los lenguajes son iguales. En español, por ejemplo, tenemos algunas letras que son propias de nuestra lengua y que otras no poseen. Por ello, una “ñ” en un navegador de un ordenador de fuera de España puede que no se vea. Para evitar ese problema podemos usar los caracteres especiales de html. No todos los ordenadores leen las mismas letras, pero sí todos leen el mismo código. Un “ñ” escrita como tal no se verá en muchos ordenadores del mundo pero, si por el contrario, escribimos &ntilde; (carácter html para la “ñ”), seguro que se muestra correctamente. En el siguiente artículo veremos los caracteres especiales html. Caracteres especiales básicos Estos caracteres son esenciales. No por que no sean interpretados correctamente por el navegador, sino porque estos símbolos mal escritos pueden causar que nuestra web no funcione correctamente.

HTML Aprende Mas. UPT Ing. en Software &amp; & &quot; " &lt; < &gt; > &Iuml; Ï &Icirc; Î &Ouml; Ö &Ocirc; Ô &Uuml; Ü &Ucirc; Û &times; × &cent; ¢ &divide; ÷ &euro; € &#147; “ &#153; ™ &#148; ” &#137; ‰ &Atilde; à &aring; å &Ntilde; Ñ &Aring; Å &Otilde; Õ &Ccedil; Ç &atilde; ã &ccedil; ç &ntilde; ñ &Yacute; Ý &otilde; õ &yacute; ý &cedil; ¸ &raquo; » &Aacute; Á &Agrave; À &Eacute; É &Egrave; È &Iacute; Í &Igrave; Ì &#140; Œ &#131; ƒ &#135; ‡ &#134; † &auml; ä &acirc; â &euml; ë &ecirc; ê &iuml; ï &icirc; î &ouml; ö &ocirc; ô &uuml; ü &ucirc; û &Oacute; Ó &Ograve; Ò Caracteres especiales 14

HTML Aprende Mas. UPT Ing. en Software &Uacute; &Ugrave; Ù &aacute; á &agrave; à &eacute; é &egrave; è &Oslash; Ø &yuml; ÿ &oslash; 15 Ú ø &THORN; Þ &ETH; Ð &thorn; þ &eth; ð &AElig; Æ &szlig; ß &aelig; æ &frac14; ¼ &nbsp; &frac12; ½ &iexcl; ¡ &frac34; ¾ &pound; £ &copy; © &yen; ¥ &reg; ® &sect; § &ordf; ª &curren; ¤ &sup2; ² &brvbar; ¦ &sup3; ³ &laquo; « &sup1; ¹ &not; ¬ &macr; ¯ &shy; &micro; µ &ordm; º &para; ¶ &acute; ´ &middot; · &uml; ¨ &deg; ° &plusmn; ± &Euml; Ë &Ecirc; Ê &iacute; í &igrave; ì &oacute; ó &ograve; ò &uacute; ú &ugrave; ù &Auml; Ä &Acirc; Â &iquest; ¿

HTML Aprende Mas. UPT Ing. en Software Tablas. 16 Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las características de cada uno de estos parámetros. Pero vamos a empezar explicándote la etiqueta <table>. Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos predefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchos parámetros. Nosotros vamos a explicarte los principales. La tabla: <table> Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá un color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo. Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el parámetro "border". Como en todas los parámetros que ya hemos visto escribiremos: border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto, también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando el color que queramos para nuestro borde. El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner en píxeles (width= "300") o con porcentaje (width= "100%"). Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro de una celda). Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al 100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un cellspacing de 10. El código quedaría de la siguiente forma. <table width="100%" border="1" bordercolor="#0000FF" cellspacing="10" cellpadding="10"></table> Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las mismas. Las filas: <tr> Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente. Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top"), en el centro ("middle") o debajo ("bottom"). Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda ("left"), a la derecha ("right") o justificado ("justify").

HTML Aprende Mas. UPT Ing. en Software Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el color del borde ("bordercolor"). Las celdas <td> Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>. Al igual que en las filas, en las celdas podemos definir el la alineación del contenido que está dentro con los atributos "valign" y "align". 17 Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan". Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td rowspan= "2"></td>. Las celdas <th> Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos. A continuación vamos a ponerte un pequeño ejemplo de una tabla que combina todas las cosas que hemos ido viendo en el artículo. Estúdiate primero el código, visualiza cómo quedaría la tabla y luego mírala en el enlace siguiente: Ejemplo de tabla. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> </table> nowrap nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo hubiera, y respeta el ancho de la frase, ya que no puede partirla.

HTML Aprende Mas. UPT Ing. en Software Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará como escribir este atributo en la etiqueta de la celda: <table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000"> <tr> <td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xeles de la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;nea el contenido de la misma, por lo que se estira para albergar toda la frase.</td> </tr> </table> 18 Y a continuación podemos ver el efecto del atributo: Aunque este texto sea más ancho que los 400 píxeles de la tabla, ésta no puede dividir mediante saltos de línea el contenido de la misma, por lo que se estira para albergar toda la frase. Etiqueta “caption” Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top" para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo nosotros lo hemos puesto abajo. <table width="50%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> <caption align="bottom">Encabezado de la tabla.</caption> <tr> <td align="center">Tablita de ejmplo para la etiqueta "caption"</td> </tr> </table> IZYALYTH ALVAREZ Listas. Listas no ordenadas: <ul> Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre. Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir

HTML Aprende Mas. UPT Ing. en Software nosotros mismo el símbolo del punto, podemos gracias al atributo “type”. Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeño ejemplo en código: 19 <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul> Cuyo resultado visual será el que veremos a continuación: o   Esto es un tipo de punto. Este es otro. Y este es otro diferente. Listas ordenadas: <ol> Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos. En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número. Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente: <ol> <li value="20">Este será el número 20. </li> <li>Este será el 21. </li> <li> Este será el 22. Y así sucesivamente. </li> </ol> Y el resultado será el siguiente: 20. Este será el número 20. 21. Este será el 21. 22. Este será el 22. Y así sucesivamente. Listas de definiciones: <dl>, <dt> y <dd>. Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:

HTML Aprende Mas. UPT Ing. en Software La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición. La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición. La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición. Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación. 20 Aquí podemos ver un ejemplo de código de dos listado de definición: <dl> <dt>Aquí va el término que definiremos</dt> <dd>Y aquí dentro irá la definición propiamente dicha.</dd> </dl> <dl> <dt>Aquí va la segunda definición</dt> <dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd> </dl> Cuyo resultado será el siguiente: Aquí va el término que definiremos Y aquí dentro irá la definición propiamente dicha. Aquí va la segunda definición Y aquí dentro irá la segunda definición, separada automáticamente de la anterior. Imágenes. Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma. El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación. El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src="x">, siendo "x" la dirección o la url dónde se encuentra situada la foto. La foto podemos alinearla en la página como queramos mediante "align", utilizando los atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top" para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro. También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima.

HTML Aprende Mas. UPT Ing. en Software Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera visual. Hay algunos que no lo representan. Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen. Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál quieres que sea el grosor del borde. Así las cosas, deberemos escribir este código... 21 <img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300"> ...para poder ver esta preciosa fotografía Mapas de imágenes. Html nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.

HTML Aprende Mas. UPT Ing. en Software Las fotos en las que queramos introducir un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores. A continuación vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea. El tag map 22 Cómo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee un cierre: </map>. Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= “ejemplo1”> Atributo area El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al navegador para que la interprete. La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha área. También podemos escribirle un texto alternativo, un “alt”, al área. Existen tres tipos de áreas. Vamos a explicártelas a continuación. Atributo shape Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas características diferentes. Vamos a profundizar un poco más en ellas.  shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir la zona que incluirá ese mapa deberemos definir la esquina superior izquierda del área y la esquina inferior derecha.  shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos indicarle el centro de la circunferencia y el radio del mismo.  shape=“poly” : Este tipo de área es la más versátil de todas, la que más posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polígono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo. Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo. Atributo coords El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por comas. Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”

HTML Aprende Mas. UPT Ing. en Software Atributo href Aquí deberemos indicar el destino del área. usemap Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap. 23 Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos utilizar. Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que te redigirá al inicio del tutorial de php. El código nos ha quedado de la siguiente manera: <img src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imágenes" width="300" height="214" border="0" usemap="#billar"> <map name="billar"> <area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle" coords="148,154,44" href="http://www.hazunaweb.com"> <area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46, 162,52,160,61" href="http://css.hazunaweb.com/"> <area alt="Si clías aquí irás a la página de inicio del tutorial de php" shape="rect" coords="11,77,288,105" href="http://php.hazunaweb.com/"> </map> Y el resultado lo verás si clícas en las zonas adecuadas: Enlaces.

HTML Aprende Mas. UPT Ing. en Software Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello: La etiqueta <a> 24 Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así: <a href=“enlace”>Pincha aquí para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta. Vamos a explicarlas a continuación: Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente: <a href="http://html.hazunaweb.com/112.php">Artículo de enlaces html</a> Si pincháramos en el enlace iríamos directamente al artículo de mapas de imágenes del tutorial. Fijaros en lo que hablábamos: podemos apreciar todas las partes de la url. En las direcciones relativas vemos que no está la url completa. En este tipo de direcciones, las partes que faltan de la dirección el navegador las genera de la propia página en la que está el enlace. Por ejemplo, si dentro de la página http://html.hazunaweb.com/112.php encontráramos la siguiente url... <a href="111.php">Artículo de enlaces html</a> …el navegador entiende que dentro de la página y de la carpeta en la que se encuntra, debe dirigirse al fichero “111.php”. Protocolos Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a presentar los dos más importantes:  http: Este es el protocolo básico de los servidores webs.  https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la información que se envía y se recibe con esa url esta siendo encriptada para que nadie más pueda interceptar y usar esa información. Las páginas con este protocolo son las conocidas como “páginas seguras”. Esta encriptación de los datos produce una pequeña ralentización de la página debido a que los datos se envían cifrados.

HTML Aprende Mas. UPT Ing. en Software Mailto La url mailto es aquella que te lleva directamente a una dirección de correo y, más concretamente, a redactar un mensaje. Una dirección mailto sería la siguiente: <a href=“mailto:correodeejemplo@correodeejemplo.com>correodeejemplo@correodeejemplo.com</a> Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el enlace, hemos puesto la misma dirección que la que va a abrir la url. ¿Por qué? 25 El programa de correo que abre el navegador es aquel que el usuario tenga como predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la dirección de correo electrónico. Windows por defecto tiene predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la dirección y pegarla en su programa de correo. La etiqueta target: La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:  _self: Es el valor por defecto del parámetro target. El enlace se abrirá en el mismo marco en el que está alojado.  _blank: Para hacer que ese enlace se abra en una ventana a parte.  _top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.  _parent : Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos en otro artículo. Anclas Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos acceder. Debemos escribir lo siguiente: <a name=“ancla”> Y después debemos escribir un enlace con el código siguiente: <a href= “#ancla”>Enlace para acceder al ancla</a> Yo he situado un ancla justo al principio de este artículo. Si pinchas en el siguiente enlace acudirás a ella y verás el efecto. Ir al principio del artículo gracias al ancla Y para terminar te mostraremos como podemos hacer que un enlace nos diriga directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen en una ventana diferente gracias al target:blank. El código es el siguiente:

HTML Aprende Mas. UPT Ing. en Software <a href="http://html.hazunaweb.com/html/imagenes/prueba.jpg" target="_blank">Ir a ver el ejemplo de prueba </a> Y el resultado le verás pinchando en aquí: Ir a ver el ejemplo de prueba Y terminamos con otro tipo de enlace. Esta vez el enlace está en la imagen. Si pinchas en ella, irás al artículo dónde vimos por primera vez esa fotografía. Primero te mostramos el código: 26 <a href="http://html.hazunaweb.com/112.php" target="_blank"><img src="http://html.hazunaweb.com/html/imagenes/prueba-enlace.jpg" alt="Pincha para ir al enlace" width="300" height="214" border="0"></a> Y aquí tienes la imagen con el enlace. Se abrirá en una ventana nueva gracias al target blank. Formularios I: introducción. Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones. Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento. Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario. La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación. action El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios. Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc. Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: <form action="dirección completa del archivo que la gestionará" ...>

HTML Aprende Mas. UPT Ing. en Software </form>. Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc. method Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post. El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio. 27 “get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &. Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www............?nombre1=valor1&nombre2=valor2 El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición. enctype Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario. La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain"). Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico: <form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form> Formularios II: campos de texto. Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas. Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características. Las cajas de texto básicas: <input type= “text”> La caja de texto básica se escribiría de la siguiente forma: <input type="text" name="nombredelacaja"> y su apariencia sería la siguiente:

HTML Aprende Mas. UPT Ing. en Software Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas. Podemos completar el estilo de esta caja gracias a los siguientes atributos: 28 size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda. maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength. value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo. name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue. Mira el siguiente código: <input type="text" size="15" maxlength="30" value="Nombre" name="nombre"> Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él. El resultado sería el siguiente: Nombre Campos de texto largo: <textarea> Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc. Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto. Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo. Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente: <textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea> Y se vería de la siguiente forma:

HTML Aprende Mas. 29 UPT Ing. en Software Textos con passwords En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece. El siguiente código es de un campo con datos codificados: <input type="password" name="contraseña"> Y este sería el resultado obtenido: Formularios III: listas de opciones. Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre. Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente: <select name="transporte"> <option>Coche</option> <option>Avión</option> <option>Tren</option> </select> Y el resultado quedaría de la siguiente manera. Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos

HTML Aprende Mas. UPT Ing. en Software hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren. En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente: <select name="transporte" size="2"> <option>Coche</option> <option>Avión</option> <option>Tren</option> </select> 30 Para obtener el siguiente resultado: Coche Avión También podemos definir si queremos que se pueda el

Add a comment

Related presentations

Related pages

Para Ti

PARA TI VIDEOS. Mujeres periodistas en el cine ; Kristen Stewart, la imagen de Chanel; Bandana: la vuelta ; La Bella y la Bestia: primer tráiler
Read more

dict.cc Wörterbuch :: para ti :: Deutsch-Spanisch-Übersetzung

Spanisch-Deutsch-Übersetzung für para ti im Online-Wörterbuch dict.cc (Deutschwörterbuch).
Read more

Para Ti - Imagens, Mensagens e Frases para Facebook

Mensagens e Imagens para Facebook de Para Ti. Você está conferindo as frases, recados e fotos mais bacanas de Para Ti para Facebook, E-Mail ou Google+.
Read more

La luna parece un queso: Para tí - aicita.blogspot.com

Ai La luna llena parece un queso「満月ってチーズみたいだね」No puede ser!「はぁ?!」 ボリビアでこういう会話をしたことが ...
Read more

Solo Para Ti - Camila - VAGALUME

Camila - Solo Para Ti (música para ouvir e letra da música com legenda)! Tu has llegado a encender / Cada parte de mi alma / Cada espacio de mi ser / Ya ...
Read more

Solo para ti lyrics + English translation (Version #2)

Translation of 'Solo para ti' by Camila (Mario Domm; Pablo Hurtado) from Spanish to English (Version #2)
Read more

Camila - Solo Para Ti lyrics | LyricsMode.com

Solo Para Ti lyrics by Camila: Eres todo lo que pedia / Lo que mi alma vacia / Queria sentir... / Eres lo que tanto Esperaba / Lo que en
Read more

Horóscopo - Para Ti

Amor: gratificaciones compartidas. Sexo: sensualidad a flor de piel. Dinero: no tenés de qué preocuparte. Trabajo: nuevas posibilidades para emprender ...
Read more

Per Te lyrics - Spanish translation

Translation of 'Per Te' by Il Volo (Piero Barone, Ignazio Boschetto, Gianluca Ginoble) from Italian to Spanish
Read more

Texas Instruments - TI.com

TI is a global semiconductor design & manufacturing company. Innovate with 80,000+ analog ICs & embedded processors, software & largest sales/support staff.
Read more