View
Anuncio
INTRODUCCION HTML debe su nombre a las iniciales del ingles "HyperText Markup Language", lo que traducido al español es "Lenguaje de Marcado de HiperTexto". El proposito general del lenguaje HTML es mostrar contenido web, ya sea tipo texto o multimedia, basandose en el uso del hipertexto. El hipertexto permite enlazar diferentes partes de una misma pagina web, o diferentes páginas web, es decir, podemos saltar de una página a otra simplemente "clickeando" sobre un enlace de hipertexto. Para poder visualizar un fichero HTML (que tiene extension .html o .htm) debemos disponer de un visualizador o navegador de páginas web, como el MS Internet Explorer o el Netscape Navigator. Debemos tener en cuenta que a la hora de crear nuestras páginas web y nuestros ficheros HTML es recomendable el uso de un editor de páginas web (MS Front Page, Netscape Composer,...), pero debemos tener en cuenta que el cuerpo de los ficheros HTML está escrito en ASCII, y por tanto podemos editarlos (y también crearlos) con cualquier editor ASCII. En cambio, el uso de un editor de paginas web es recomendable porque acelera el trabajo, y no nos hace perder tanto tiempo reescribiendo código que ya conocemos, ademas de permitir un control mas visual del resultado, ya que es una herramienta similar a un procesador de textos, solo que con otras caracteristicas. ESTRUCTURA DE UN FICHERO HTML El lenguaje HTML está basado en el uso de etiquetas (tags), que tienen una estructura de la forma: <etiqueta>Hola Don Pepito.</etiqueta> Como podemos observar, las etiquetas deben abrirse <etiqueta> y cerrarse </etiqueta> . La estructura de un documento (o página) HTML, basicamente, es la siguiente: <html> <head> <title>Mi página web</title> </head> <body> Esta es mi primera página web... </body> </html> Las etiquetas <html> y </html> definen todo el codigo HTML, y entre ellas esta todo el contenido de la pagina web. Basicamente, el contenido de un fichero HTML podemos subdividirlo en 2 partes fundamentales: la cabecera (head) y el cuerpo (body). La cabecera viene definida por las etiquetas <head> y </head>, y tiene como función principal el definir ciertos parametros que seran utilizados en toda la pagina. Los parámetros más importantes que se definen en la cabecera de una pagina web son el tíiulo y las metaetiquetas (metatags). El titulo de la pagina web se escribe en la cabecera del documento HTML, y viene definido por las etiquetas <title> y </title>. En el ejemplo que hemos puesto anteriormente, el título sería Mi pagina web, y seria visible en la barra superior de la aplicacion (navegador). Las metaetiquetas son utilizadas fundamentalmente para el registro en los buscadores y directorios de Internet. En HTML se pueden insertar comentarios en el codigo. Esa funcion la lleva a cabo la etiqueta <!­­ comentario ­­>. Todo lo que se inserte entre las etiquetas <!­­ y ­­> será ignorado por el navegador, y sólo tendra utilidad para el webmaster o cualquier otra persona que quiera revisar el codigo de la pagina. Dentro del cuerpo (body) del fichero HTML se define el contenido que se va a presentar. En nuestro ejemplo anterior mostrariamos el siguiente texto: Esta es mi primera pagina web... FORMATEANDO EL TEXTO En el punto anterior hemos visto como mostrar un mensaje de texto en una pagina web. En este punto vamos a ver como podemos dar formato (negritas, cursiva, saltos de linea, …) a ese texto, de manera que aplicamos mayor funcionalidad y diseño a nuestras páginas. Negritas y Cursivas Para definir un texto en negrita o cursiva, debemos hacer uso de las etiquetas <b> o <i>, respectivamente, de la siguiente manera: <b>texto negrita</b> : del ingles "bold", muestra el texto en negrita. <i>texto itálico</i> : del inglés "italic", muestra el texto en cursiva. Así mismo, podemos intercalar las etiquetas, de manera que es posible mostrar un texto con ambas propiedades, como vemos en el siguiente ejemplo: Código HTML: Esto <b>es una muestra <i>de formateo</i> de texto</b> Resultado en el navegador : Esto es una muestra de formateo de texto Párrafos y saltos de linea El salto de linea en HTML se puede definir de dos formas diferentes: mediante <br> o mediante <p>. La etiqueta <br> hace un salto a la linea inmediatamente siguiente, mientras que <p> hace un salto de linea, pero dejando una linea en blanco entre ambos párrafos. Normalmente <p> se utiliza para definir saltos de un parrafo a otro, ya que deja una linea entre parrafo y parrafo, mientras que <br> se suele utilizar para hacer un "retorno de carro" a la siguiente linea, pero sin dejar lineas en blanco entre medias. Otro punto importante a tener encuenta a la hora de "formatear" nuestro texto es la alineación del mismo en el documento. Para ello hacemos uso de tres etiquetas, que describimos a continuación: <left>texto a la izquierda</left> posiciona el párrafo en la parte izquierda del documento <center>texto centrado</center> posiciona el párrafo en el centro del documento <right>texto a la derecha</right> posiciona el párrafo en la parte derecha del documento Sobre la alineación de los párrafos hay que tener en cuenta dos puntos importantes: ­ La alineación se aplica sobre párrafos completos, es decir, debemos definir la alineacion del parrafo haciendolo sobre el parrafo completo. Ejemplo: <center>Esto es un párrafo de texto.</center> ­ Es "mas elegante" definir la alineacion del parrafo dentro de las etiquetas <p></p>, que a su vez definen el ambito del parrafo. En el ejemplo anterior seria: <p align="center">Esto es un párrafo de texto, centrado.</p>, lo cual produciria el mismo efecto que en el caso del ejemplo anterior, pero de una forma mas elegante (a nivel de codigo). Notese que en el ultimo ejemplo hemos mostrado la etiqueta <p> con un nuevo parámetro, de alineacion. Sus posibles valores son: align="left" : alineacion a la izquierda align="center" : alineacion centrada align="right" : alineación a la derecha Por ultimo, cabe destacar en este apartado dedicado al formateo del texto, de la etiqueta <pre>Texto preformateado</pre> la cual tiene la función de mostrar el texto que se incluye dentro de la etiqueta como texto "preformateado", o lo que es lo mismo que el texto que se incluya entre sus etiquetas será mostrado en el navegador tal cual, respetando los saltos de linea, espacios en blanco, etc. que incluyamos en el codigo fuente. El lector puede que ya se haya dado cuenta de que, si no se hace uso de las etiquetas <pre></pre>, los espacios en blancos, independientemente del número de ellos que nosotros incluyamos en el codigo fuente, siempre son tomados como uno solo. Es decir, que el siguiente codigo <p>Esto es una prueba</p> es mostrado por el navegador como si entre la palabra "Esto" y la palabra "es" sólo hubiese un espacio en blanco. Para evitar esto, podemos hacer uso tanto de la etiqueta <pre> como del codigo especial &nbsp; (non­breaking space), el cual fuerza al navegador a mostrar un espacio en blanco cada vez que se encuentre con este código. CARACTERES ESPECIALES Exiten ciertos caracteres que presetan cierta ambigüedad a la hora d eser interpretados por un navegador web. Este es el caso de los caracteres < y >, que como ya sabemos son utilizados en HTML para ndicar el principio y final de una etiqueta. Pero también podría darse el caso de que quisieramos insertar dichos caracteres como parte de nuestro texto. Para ello haremos uso de ciertos códigos que resuleven este tipo de conflictos relacionados con las etiquetas: less than = menor que < greater than = mayor que > símbolo ampersand & double quotation = dobles comillas " Tambien se nos plantea este problema de la interpretacion de caracteres especiales a la hora de escribir palabras acentuadas, dieresis, eñes, etc.: &lt; &gt; &amp; &quot; &aacute; &eacute; &iacute; &oacute; &uacute; á é í ó &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; Á É Í Ó &ntilde; &Ntilde; &#191; ú ñ Ñ ¿ &uuml; &Uuml; &#161; Ú ü Ü ¡ Nótese que todos los caracteres especiales se delimitan porlos caracteres $ y ; De cualquiera de las formas, aunque es necesario tener estas consideraciones y fundamentos, a la hora de trabajar con un editor de páginas web será la aplicación misma la que se encargará de traducir los caracteres por sus correspondientes etiquetas. CREANDO ENLACES (HIPERVINCULOS) Los enlaces (también llamados hipervinculos, o links en ingles) permiten enlazar diferentes partes de un website, ya sean diferentes paginas o distintas partes de una misma pagina. Estos enlaces nos permiten la creaccion de contenidos ordenados y jerarquizados. La etiqueta que define un enlace en HTML es de la forma: <a href="pagina.html" target="destino">Enlace</a> donde: ­ pagina.html : es la página que queremos enlazar, de manera que al pulsar sobre la palabra "Enlace" saltaremos directamente a pagina.html (en este caso pagina.html se encontraria en el mismo servidor y en el mismo directorio que la página en la que se encuentra nuestro enlace). ­ destino : nos indica el destino en donde queremos que aparezca la pagina que enlazamos una vez que "clickeemos" sobre el enlace. Por omisión, sino se especifica este parámetro (target) la página del enlace se abrirá en la misma ventana que la página de origen. Algunos parámetros válidos para esta opción son: _blank : abre el enlace en una ventana nueva. _self : es la opción por defecto, y abre el enlace en la misma ventana. _top : abre el enlace en toda la ventana (utilizado en páginas con frames). _parent : abre el enlace en el marco primario (utilizado en págs. con frames). La tecnica del framing la estudiaremos en capítulos posteriores, y en ella veremos como sacar mas partido a la opción target. También es posible enlazar con una parte determinada de una misma página web, es decir, que el enlace no tiene porque ser obligadamente a una página diferente, sino que puede ser a una parte en concreto de la página. Para ello haremos el enlace de la forma: <a href ="#abajo">Ir al final de la página</a> y en el sitio exacto en donde queremos queremos enlazar colocaremos la etiqueta <a name="abajo"></a>. La etiqueta <a href… no sólo permite enlazar diferentes páginas, sino que también permite hacer enlaces a direcciones de e­mail, de la siguiente forma: <a href="mailto:[email protected]">Mandame un e­mail</a> En este ejemplo, al pinchar sobre el enlace "Mandame un e­mail", se nos abrirá nuestro gestor de correo electrónico que tengamos configurado por defecto, permitiendonos mandar un e­mail a la dirección [email protected] A continuación vamos a ver algunos ejemplos de enlaces, comentandolos: (1) <a href="pagina2.html" target="_blank">Pag. 2</a> (2) <a href="mailto:[email protected]">Escribe a Yomismo</a> (3) <a href="http://www.servidor.net/user102/pag27.html"> Enlace</a> (4) <a href="pag5.html#capitulo1">Ir al Cap. 1</a> (1) El enlace apunta a pagina2.html , que se encuentra en el mismo servidor y directorio que la página origen. El enlace se abriría en una nueva página gracias a la opción _blank . (2) Enlace a una dirección de correo ([email protected]). Al activar el enlace se abriría el gestor de correo que tuvieramos configurado com predeterminado. (3) Este enlace (referencia absoluta) apunta a una página web con su URL (Uniform Resource Locator) completa, lo cual se utiliza normalmente para hacer referencia a una página que se encuentra en un servidor diferente del que se encuentra la página origen. En nuestro ejemplo, el enlace abriría la página con URL: http://www.servidor.net/user102/pag27.html (4) El enlace apunta hacia la etiqueta #capitulo1 de la página web pag5.html FORMULARIOS EN HTML Su utilidad se basa fundamentalmente en el envio de datos a programas. Podriamos decir que los formularios son el interface mediante el cual una persona introduce datos en un programa. Estos programas que reciben los datos de los formularios son clasificados generalmente en 2 grupos: scripts y CGIs. Los primeros, los scripts, son lenguajes embebidos en el propio HTML, e interpretados junto con el código HTML en el propio navegador (PHP, ASP, JavaScript, etc.). Los segundos, los CGIs, son programas ejecutables que residen en el servidor de nuestra página web, y que efectúan su "salida" en función de los parámetros que les pasemos en nuestro formulario. Como veis, la interactividad alcanza un punto importante con el uso de los formularios, porque estamos hablando de elementos que nos permiten recoger ciertos parámetros, y se los pasan a un programa que actuará en función de estos. Las etiquetas que definen un formulario son, a "grosso modo": <form action="elemento_destino" method="metodo"> (cuerpo del formulario, con sus distintos elementos) </form> Básicamente, podemos ver que el contenido del formulario viene delimitado por las etiquetas de apertura y cierre <form> y </form>. Y sólo cabe destacar los parámetros de la etiqueta de apertura , que son: action="elemento_destino" : donde elemento_destino es la dirección del script o CGI que va a recibir los parámetros que se introduzcan en el formulario. method="metodo" : mediante este parámetro específicamos el método mediante el cual se mandan los datos del formulario al script o CGI. Existen 2 métodos, GET y POST. GET: el conjunto de datos del formulario se agrega al URL especificado por el atributo action (con un signo de interrogación ("?") como separador) y este nuevo URL se envía al agente procesador. POST: Con el método HTTP post, el conjunto de datos del formulario se incluye en el cuerpo del formulario y se envía al agente procesador. Ahora veamos los diferentes elementos a través de los cuales podemos introducir los datos del formulario, y que están en el cuerpo del mismo: Casillas de verificación Se definen mediante la etiqueta: <input type="checkbox" name="nombre" [checked]> (…) </input> Se utilizan para ofrecer valores binarios (de encendido/apagado). Donde nombre es el nombre del parámetro y checked indica si la casilla estará activada inicialmente o no. Un ejemplo: <input type="checkbox" name="valor1" checked >1</input> En este ejemplo se mostraría una casilla de verificación, activada por el uso del parámetro checked (opcional). El valor del parámetro en el caso de estar activada la casilla es true, y en el caso de no estar activada será false. Radiobotones Se definen mediante la etiqueta: <input type="radio" name="nombre" value="valor"> (…) </input> Se utilizan para ofrecer varias opciones para un mismo parámetro, de manera excluyente, donde nombre es el nombre del parámetro y valor es el valor del mismo en el caso de que se active este botón. Un ejemplo: <input type="radio" name="x" value="1">1</input> <input type="radio" name="x" value="2">2</input> <input type="radio" name="x" value="3">3</input> Este ejemplo nos mostraría 3 botones, y dependiendo del que seleccionemos (el formulario sólo deja elegir una opción por variable, por eso son excluyentes) este será el valor que se pase al script o CGI. Menús Se definen mediante las etiquetas: <select name="nombre" [size="filas" multiple]> <option>valor1 <option>valor2 (…) </select> Se utilizan para realizar selecciones de un menú, que definiremos por tantas opciones como etiquetas <option> utilizemos. Donde nombre es el nombre del parámetro, filas es el número de filas del menú que queremos mostrar (por defecto 1) y multiple indica si el menú permitirá activar múltiples opciones o no. Los dos últimos parámetros son opcionales. Un ejemplo: <select name="x" > <option>1 <option>2 <option>3 </select> En este ejemplo presentaremos un menú desplegable, que sólo permitirá elegir una opción de las tres posibles, y pasaremos el valor del parámetro x en función de la opción que elijamos (1,2,3). Entrada de texto de 1 linea Se define mediante la etiqueta: <input type="text" name="nombre" [size="tamaño" maxlength="longitud_max"]> Donde nombre es el nombre del parámetro a pasar, tamaño es el ancho (en caracteres) que ocupará el campo del formulario y longitud_max es el número máximo de caracteres que dejará introducir como parámetro. Los dos últimos parámetros son opcionales. Ejemplo: <input type="text" name="email" size="10" maxlength="50"> Aquí se mostrará un campo de entrada de texto de 1 linea, con 10 caracteres de ancho, que dejará introducir una cadena de texto de hasta 50 caracteres y donde el parámetro recibirá el nombre email. Entrada de texto de múltiples lineas Se define mediante la etiqueta: <textarea name="nombre" rows="filas" cols="columnas"> [texto predefinido] </textarea> En donde nombre es el nombre del parámetro, y rows y cols es el número de filas y columnas (en caracteres), respectivamente, que ocupará el campo de entrada. Todos estos parámetros son obligatorios. Cabe mencionar que entre las etiquetas de apertura y cierre se puede insertar el texto predefinido que se quiera (si se quiere) que se mostrará como texto por defecto. Ejemplo: <textarea name="direccion" rows="5" cols="50"> Escribe aquí tu dirección completa… </textarea> En este ejemplo presentaremos un campo de entrada de texto de múltiples lineas, cuyo nombre de parámetro es direccion, y que se presentará en un campo de 5 filas y 50 columnas. En el caso de que el texto a introducir sobrepasara las 5 filas de texto, se mostrarán automáticamente las barras de desplazamiento en el campo de entrada. En este ejemplo aparecerá el texto "Escribe aquí tu dirección completa…" predefinido dentro del campo del formulario. Botones de envio y borrado Una vez que hallamos cumplimentado los datos de nuestro formulario y queramos mandarlos para su procesamiento, lo haremos pulsando el botón de envio del formulario. Este botón se define mediante la etiqueta: <input type="submit" value="texto">. En donde texto será el texto que se mostrará en el botón de envio. Cabe destacar que la inserción de este elemento es obligatoria en todos los formularios, ya que sin él sería imposible poder enviar los datos del mismo al script o CGI. Ejemplo: <input type="submit" value="Enviar los datos"> En este ejemplo se mostrará el botón de envio de datos, con el texto que nosotros le hemos indicado: "Enviar los datos". Cuando se pulse sobre el botón, se mandarán los datos del formulario al script o CGI. También podemos insertar un botón en nuestro formulario que borre el contenido de todos los campos (por ejemplo, por si nos hemos equivocado). Este botón se define mediante la siguiente etiqueta: <input type="reset" value="texto">. En donde texto será el texto que se mostrará en el botón de borrado de datos. Ejemplo: <input type="reset" value="Borrar datos">
