Agregar a favoritos      Ayuda      Português      Ingles     

Diseño de páginas web mediante lenguaje HTML

Enviado por johan



Partes: 1, 2

  1. Introducción
  2. ¿Qué es un HTML?
  3. Características Básicas
  4. Textos
  5. Listas
  6. Tablas
  7. Enlaces
  8. Formularios
  9. Otras Etiquetas Importantes
  10. Accesibilidad
  11. Validación
  12. Conclusiones
  13. Bibliografía

Introducción

El HTML no es más que una aplicación SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

A medida que nos afianzamos en el manejo de internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas paginas, luego nos damos cuenta que existen buscadores los cual lo hace mas interesante y por ultimo nos damos cuenta que en Internet no solamente se puede se puede ver la información sino que también se puede publicar. ¿y qué otra manera más fácil y más sencilla? Si Internet tiene acceso a todos los rincones del mundo.

Para que varias personas se comuniquen es necesario que éstas hablen un mismo idioma. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. A través de esta monografía explicaremos que es HTML, sus orígenes y el proceso de creación de una página web.

PRIMERA PARTE

Introducción al HTML

CAPITULO I

¿Qué es un HTML?

  • Definición de un HTML.

El HTML no es más que el lenguaje en el que se escriben las páginas web, o mas concretamente es el lenguaje con el cual se crean la mayoría de las páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, y nuestros servidores muestran el contenido de las páginas web luego de haber leído su contenido HTML.

Eguíluz dice: El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas el mundo del Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. (p. 5).

Desde su creación el HTML es definido por muchas entidades y también por el mismo W3C, como un lenguaje universal utilizado exclusivamente para crear documentos electrónicos de cualquier tipo.

  • Orígenes del HTML.

El origen del HTML (HiperText Markup Language) se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.

La primera descripción para HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.

La primera propuesta oficial para convertir HTML en un estándar se realizo en 1993 por parte del organismo IETF (Internet Engineering Task Foce). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial. El organismo IETF organiza un grupo se trabajo de HTML en1995 y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML. A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Cosortium). El 14 de Enero de 1997 se publicó la versión HTML 3.2 y es la primera recomendación de HTML publicada por W3C. Esta versión incorpora los últimos avances de la páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

El HTML 4.0 fue publicado el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran la posibilidad de incluir pequeños programas o scrips en las páginas web, las hojas de estilo CSS, mejora la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios. El HTML 4.01 (la última especificación oficial de HTML) se publicó el 24 de Diciembre de 1999. Se trata de una revisión y actualización de la versión HTML 4.0, pero lo que incluye novedades significativas. Desde la publicación de HTML 4.01, se detuvo la actividad de estandarización de HTML y el W3C se centro en el desarrollo del estándar XHTML. Por este motivo, las empresas Apple, Mozila y Opera mostraron en el año 2004 su preocupación por la falta de interés del W3C en HTML y decidieron organizarse e una nueva asociación llamada WHATWG (Web Hipertext Application Technology Working Group). En la actualidad la actividad del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publico en 22 de Enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y la publicación de los borradores de HTML 5.0, en Marzo del 2007 el W3C decidió retomar la actividad estandarizadora de HTML.

Paralelamente a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, que es una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y fue publicada el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto del 2002). XHTML1.0 e una adaptación de HTML 4.01 al lenguaje XML, así que mantiene todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto a las anteriores versiones de XHTML.

CAPITULO II

Características Básicas

2.1. Estructura fundamental de un fichero HTML.

Monografias.com

2.2. Etiquetas.

El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas.

Aunque existen alguna excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera:

Monografias.com

Eguíluz dice: HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML. (p. 10).

Una de las ventajas de estas etiquetas es que son muy sencillos de leer y escribir tanto por las personas y por los sistemas electrónicos, pero la principal desventaja es que estas etiquetas pueden aumentar mucho el tamaño del documento, es por eso que se usan etiquetas con nombres muy cortos.

Por ejemplo, podemos mostrar la palabra "¡Hola!" en cursiva de la siguiente forma:

Monografias.com

2.3. Atributos.

HTML define 91 etiquetas que los diseñadores puede utilizar para marcar los diferentes componentes de una página web.

A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas web complejas.

Monografias.com

Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos.

Monografias.com

Monografias.com

El primer enlace del ejemplo anterior no está completamente definido, ya que no apunta a ninguna dirección.

Monografias.com

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo.

Pero algunos de estos atributos son comunes a muchos o casi todas las etiquetas, estos se dividen en cuatro grupos según su funcionalidad:

  • a) Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML.

Atributo

Descripción

id = "texto"

Establece un identificador único a cada elemento dentro de una página HTML

class = "texto"

Establece la clase CSS que se aplica a los estilos del elemento

Style = "texto"

Establece de forma directa los estilos CSS de un elemento

title = "texto"

Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript.

  • b) Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas o aquellas que quieren indicar de forma explítica el idioma de sus contenidos:

Atributo

Descripción

lang = "código de idioma"

Indica el idioma del elemento mediante un código predefinido

xml:lang = "idioma"

Indica el idioma del elemento mediante un código predefinido

dir

Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)

En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo siempre que se incluye el atributo lang.

Como la palabra internacionalización es muy larga, se suele sustituir por la abreviatura i18n (el número 18 se refiere al número de letras que existen entre la letra i y la letra n de la palabra internacionalización).

  • c) Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript.

Atributo Descripción

Atributo Descripción

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Permiten controlar los eventos

producidos sobre cada elemento

de la página

Cada vez que un usuario mueve le ratón o pulsa cualquier botón del ratón, se produce un evento en el navegador. Utilizando JavaScript y los atributos anteriores, es posible responder de forma adecuada a cada evento.

  • d) Atributos para los elementos que pueden obtener el foco:

Eguíluz dice: Cuando el usuario selecciona un elemento de la interfaz de una aplicación, se dice que "el elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su ratón sobre un cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en inglés. Si el usuario selecciona después otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del programa. (p. 16).

Los elementos de las páginas web también pueden obtener el foco de la aplicación y HTML define algunos atributos específicos para controlar cómo se seleccionan estos elementos.

Atributo

Descripción

accesskey = "letra"

Establece una tecla de acceso rápido a un elemento HTML

tabindex = "numero"

Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767

Onfocus, onblur

Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco

Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el navegador selecciona de forma alternativa todos los elementos de la página que se pueden seleccionar (principalmente los enlaces y los elementos de formulario). El atributo tabindex permite alterar el orden en el que se seleccionan los elementos, por lo que es muy útil cuando se quiere controlar de forma precisa cómo se seleccionan los campos de un formulario complejo.

Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rápida a cualquier elemento. Aunque la tecla de acceso rápido se establece mediante HTML, la combinación de teclas necesarias para activar ese acceso rápido depende del navegador. En el navegador Internet Explorer se pulsa la tecla Alt + la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida.

En el resto de la documentación, se emplearán las palabras "básicos", "i18n", "eventos" y "foco" respectivamente para referirse a cada uno de los grupos de atributos comunes definidos anteriormente.

  • Sintaxis de las etiquetas.

El leguaje HTML original era muy permisivo en su sintaxis, por lo que era posible escribir sus etiquetas y atributos de muchas maneras diferentes.

La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final páginas con un código HTML desordenado, difícil de mantener y muy poco profesional. Pero XHTML, ha logrado introducir ciertas normas para el mejor orden y mayor comprensión en el código.

A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:

Monografias.com

La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.

Monografias.com

Ejemplo correcto en XHTML:

Monografias.com

SEGUNDA PARTE

Contenidos de Documento HTML

CAPITULO III

Textos

La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.

Y para esto los párrafos son muy importantes, por este motivo una de las etiquetas mas usadas en HTML es

, que permite definir los párrafos que conforman un texto de una página.

Monografias.com

Monografias.com

3.1 Secciones.

Es habitual que las páginas se dividan en diferentes secciones jerárquicas.

Monografias.com

Monografias.com

3.2. Marcado de textos.

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

Entre las etiquetas más usadas en el marcado de textos tenemos:

Monografias.com

Ejemplo:

Monografias.com

Monografias.com

Monografias.com

Ejemplo:

Monografias.com

Monografias.com

Monografias.com

Monografias.com

3.3. Espacios en blanco y nuevas líneas.

El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).

Con el siguiente ejemplo entenderemos con más caridad:

Monografias.com

Monografias.com

Como podemos observar en la imagen los dos párrafos son idénticos, a pesar de que el segundo contiene vario espacios en blanco. Esto de debe a que HTML ignora los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son espacios en banco que separan las palabras.

No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.

3.3.1. Nuevas líneas.

Monografias.com

Monografias.com

3.3.2. Espacios en blanco.

La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto   (es importante incluir el símbolo (&) al principio y el símbolo (;) al final).

Y tomando en cuenta el ejemplo anterior, le adicionamos los espacios en blanco:

Monografias.com

Monografias.com

Pero ha excepción de estas dos últimas etiquetas que vimos, también podemos utilizar la etiqueta

Monografias.comla cual nos muestra el texto tal y como se ha escrito.

Ejemplo:

Monografias.com

Monografias.com

3.4. Color en el texto.

Para que lo que escribamos en HTML sea de un color específico que deseemos tenemos que especificar el color deseado, ya sea especificando el color en ingles o poner de manera hexadecimal.

Y la etiqueta para poner color a las letras es:

Monografias.com

A continuación tenemos algunos de lo colores más usuales:

Monografias.com

Pero para ponerle fondo a la página que realizamos se debe escribir:

Monografias.com

Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo.

Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:

Monografias.com

CAPITULO IV

Listas

4.1. Listas desordenadas.

Las listas no ordenadas son las más sencillas y también las que más se utilizan.

Monografias.com

Monografias.com

4.2. Listas ordenadas.

Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.

Monografias.com

Monografias.com

4.3. Listas de definición.

Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones.

Monografias.com

Monografias.com

CAPITULO V

Tablas

5.1. Tablas básicas.

Monografias.com

Monografias.com

Monografias.com

Siendo esta una tabla muy sencilla, en los siguientes ejemplos veremos tablas de mayor complejidad.

Ejemplos tales como fusión de columnas:

Monografias.com

Monografias.com

Monografias.com

En el ejemplo anterior, para fusionar filas se utilizo la etiqueta:

Monografias.com

Utilizando los atributos rowspan y colspan, es posible diseñar tablas complejas como las que se muestran en los siguientes ejemplos.

Monografias.com

Monografias.com

Monografias.com

Monografias.com

5.2. Tablas complejas.

Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas.

Un ejemplo clásico de tablas avanzadas es el de las tablas utilizadas en contabilidad, como por ejemplo la tabla que muestra el balance de una empresa:

Monografias.com

Monografias.com

La siguiente imagen muestra una tabla avanzada con cabecera, pie y una sección de datos:

Monografias.com

Monografias.com

Monografias.com

Monografias.com

Monografias.com

Y el código HTML necesario para el ejemplo es:

Monografias.com

Monografias.com

Monografias.com

El código HTML necesario para el ejemplo anterior es:

Monografias.com

CAPITULO VI

Enlaces

Los enlaces se utilizan para ara establecer relacione entre dos recursos. Aunque la mayoría de enlaces relacionan página web, también es posible enlazar otros recursos como imágenes, documentos y archivos.

Pero como ya e menciono la mayoría de enlaces se hacen en relación a otras páginas web.

6.1. Definición de URL.

Eguíluz dice: Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios. (p.48).

La URL de un recurso tiene dos objetivos principales:

  • Identificar de forma única a ese recurso.

  • Permitir localizar de forma eficiente a ese recurso.

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

Si se accede a la página principal de Youtube, la dirección que muestra el navegador es:

http://www.youtube.com

El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL.

http://www.librosweb.es/xhtml/capitulo4.html

Las partes que componen la URL anterior son:

  • Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso.

  • Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder.

  • Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.

La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior son:

Monografias.com

Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL.

6.2. Enlaces internos.

Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rápidamente al principio o final de la página o bien a diferentes párrafos o secciones.

Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. Veamos más claramente como funcionan estos enlaces con un ejemplo sencillo:

Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen. Lo pondremos aquí mismo y lo escribiremos del siguiente modo:

Monografias.com

Como podemos ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma página que todavía no hemos definido. Ojo al símbolo #; es él quien especifica al navegador que el enlace apunta a una sección en particular.

En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será ésta:

Monografias.com

A decir verdad, estos enlaces, aunque útiles, no son los más extendidos de cuantos hay. La tendencia general es la de crear páginas (archivos) independientes con tamaños más reducidos enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el exceso de tiempo de carga de un archivo y la introducción de exceso de información que pueda desviar la atención del usuario.

Una aplicación corriente de estos enlaces consiste en poner un pequeño índice al principio de nuestro documento donde introducimos enlaces origen a las diferentes secciones. Paralelamente, al final de cada sección introducimos un enlace que apunta al índice de manera que podamos guiar al navegante en la búsqueda de la información útil para él.

6.3. Enlaces locales.

Enlaces HTML con otras páginas del mismo sitio web.

Como hemos dicho, un sitio web esta constituido de páginas interconexas. En el capitulo anterior hemos visto como enlazar distintas secciones dentro de una misma página. Nos queda pues estudiar la manera de relacionar los distintos documentos HTML que componen nuestro sitio web.

Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:

Monografias.com

Por regla general, para una mejor organización, los sitios suelen estar ordenados por directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes, sonidos...Es por ello que en muchos casos no nos valdrá con especificar el nombre del archivo, sino que tendremos que especificar además el directorio en el que nuestro archivo.html esta alojado.

Para aquellos que no saben como mostrar un camino de un archivo, aquí van una serie de indicaciones que os ayudaran a comprender la forma de expresarlos. No resulta difícil en absoluto y con un poco de práctica lo lograremos prácticamente sin pensar.

  • Hay que situarse mentalmente en el directorio en el que se encuentra la página con el enlace.

  • Si la página destino esta en un directorio incluido dentro del directorio en el que nos encontramos, hemos de marcar el camino enumerando cada uno de los directorios por los que pasamos hasta llegar al archivo y separándolos por el símbolo barra "/". Al final obviamente, escribimos el archivo.

  • Si la página destino se encuentra en un directorio que incluye el de la página con el enlace, hemos de escribir dos puntos y una barra "../" tantas veces como niveles subamos en la arborescencia hasta dar con el directorio donde esta emplazado el archivo destino.

  • Si la página se encuentra en otro directorio no incluido ni incluyente del archivo origen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un directorio que englobe el directorio que contiene a la página destino. A continuación haremos como en la regla 2. Escribiremos todos los directorios por los que pasamos hasta llegar al archivo.

6.4. Enlaces externos, de correo y hacia archivos.

Vemos tres tipos de enlaces. Los dirigidos a otras páginas de otros webs, a direcciones de correo y a ficheros externos.

Para acabar con los enlaces vamos a ver los últimos 3 tipos de enlaces que habíamos señalado.

Enlaces remotos

Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio.

Monografias.com

  • a) Enlaces a direcciones de correo.

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección de mail determinada. Estos enlaces son muy habituales en las páginas web y resultan la manera más rápida de ofrecer al visitante una vía para el contacto con el propietario de la página.

Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.

Monografias.com

Nota: El visitante de la página necesitará tener configurada una cuenta de correo electrónico en su sistema para enviar los mensajes. Lógicamente, si no tiene servicio de correo en el ordenador no se podrán enviar los mensajes y este sistema de contacto con el visitante no funcionará.

  • b) Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo señalamos aquí porque son un tipo de enlaces muy habitual y que presenta alguna complicación para el usuario novato.

El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la única particularidad de que en vez de estar dirigidos hacia una página web está dirigido hacia un archivo de otro tipo.

Monografias.com

Si pinchamos un enlace de este tipo nuestro navegador descargará el fichero, haciendo la pregunta típica de "Qué queremos hacer con el archivo. Abrirlo o guardarlo en disco".

Consejo: No colocar en Internet archivos ejecutables directamente sino archivos comprimidos. Por dos razones:

El archivo ocupará menos, con lo que será más rápida su transferencia.

Al preguntar al usuario lo que desea hacer con el fichero le ofrece la opción de abrirlo y guardarlo en disco. Nosotros generalmente desearemos que el usuario lo guarde en disco y no lo ejecute hasta que lo tenga en su disco duro. Si se decido a abrirlo en vez de guardarlo simplemente lo pondrá en marcha y cuando lo pare no se quedará guardado en su sistema. Si los archivos están comprimidos obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en marcha, con lo que nos aseguramos que el usuario lo guarde en su ordenador antes de ejecutarlo.

Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML (Realidad virtual para Internet) lo seguimos haciendo de la misma manera. El navegador, si reconoce el tipo de archivo, es el responsable de abrirlo utilizando el conector adecuado para ello. Así, si por ejemplo enlazamos con un PDF pondrá el programa Acrobat Reader en funcionamiento para mostrar los contenidos. Si enlazamos con un mundo VRML pondrá en marcha el plug-in que el usuario tenga instalado para ver los mundos virtuales (Cosmo Player por ejemplo).

Este sería un ejemplo de enlace a un documento PDF.

Monografias.com

CAPITULO VII

Formularios

7.1 Definición de los formularios.

Hemos visto anteriormente que podíamos, mediante los enlaces, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátiles si lo que deseamos es que el navegante nos envíe una información bien precisa. Es por ello que el HTML propone otra solución mucho más amplia: Los formularios.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.

Usando HTML podemos únicamente enviar el formulario a un correo electrónico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco más compleja ya que tendremos que emplear otros lenguajes más sofisticados. En este caso, la solución más sencilla es utilizar los programas prediseñados que nos proponen un gran número de servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si nuestras páginas están alojadas en un servidor que no nos propone este tipo de ventajas, siempre podemos recurrir a servidores de terceros que ofrecen este u otro tipo de servicios gratuitos para webs.

Los años transcurridos desde la publicación de los estándares de HTML y XHTML ha provocado que no estén disponibles todos los elementos utilizados por los formularios más avanzados y modernos. No obstante, HTML/XHTML incluye los suficientes elementos de formulario para crear desde los formularios sencillos que utilizan los buscadores hasta los formularios complejos de las aplicaciones más avanzadas.

7.2. Formularios básicos.

Monografias.com

Y este código muestra lo siguiente en un navegador cualquiera, un claro ejemplo de un formulario simple.

Monografias.com

Monografias.com

Monografias.com

La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".

7.3. Elementos de los formularios.

Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario".

Monografias.com

A continuación se muestran ejemplos para utilizar los controles que se pueden crear con la etiqueta Monografias.com

7.3.1. Cuadro te texto.

Se trata del elemento más utilizado en los formularios. En el caso más sencillo se muestra un cuadro vacio en el cual el usuario puede escribir cualquier texto.

Monografias.com

Y el código necesario para este cuadro es:

En este código solo mostraremos solo lo que nos interesa que es la parte del formulario.

Monografias.com

Para los cuadros de texto, su valor es text. El atributo name es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.

El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value="". Si por el contrario se crea un formulario para modificar datos, lo lógico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el valor que se desea mostrar:

Monografias.com

Partes: 1, 2

Página siguiente 

Comentarios


Trabajos relacionados

Ver mas trabajos de Programacion

 

Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.


Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

Iniciar sesión

Ingrese el e-mail y contraseña con el que está registrado en Monografias.com

   
 

Regístrese gratis

¿Olvidó su contraseña?

Ayuda