INTRODUCCIÓNLa información en la Red necesita viajar de una manera rápida y precisa, para lo cual se creó el protocolo de comunicación HTTP o Hyper Text Transport Protocol, el cual fue desarrollado en un laboratorio de física de partículas del CERN en Suiza con el fin de transferir rápidamente a todos los usuarios lo últimos resultados de sus investigaciones.Fue entonces este el comienzo de las redes compuestas por diferentes servidores que proveen información de todo tipo a los usuarios. Inicialmente el WWW (Worl Wide Web) era poco interactivo, limitándose a desplegar la información en modo texto . Luego el permanente avance de tecnológico surgieron los visualizadores gráficos (browsers) y con ellos el HTML (Hypertext Markup Languaje) lenguaje utilizado para la presentación de la información en la red. La finalidad de los browsers, como Netscape o Internet Explorer es interpretar el código HTML que llega a nuestros computadores por medio del HTTP. Ahora para proporcionar mayor versatilidad a las páginas, se utiliza el Common Gateway Interface (CGI), que le permite a un programa correr en el servidor de acuerdo a los requerimientos del protocolo HTTP de las páginas. subir HTML (Hypertext Markup Languaje)El HTML es mas una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad.Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hypertexto , o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando. Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo. subir ESTRUCTURA BÁSICAPara comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información. Toda página Web debe contener la siguiente estructura :
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas. Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML. subir EDITAR - GUARDAR Y VISUALIZARPara editar o crear un documento HTML se puede hacer uso de cualquier procesador de palabras. Para ello se debe modificar o digitar la estructura completa del documento y guardarlo como texto simple con extensión HTML.Ahora para visualizar nuestros cambios o ver como va quedando nuestra página, antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier visualizador, y este lo desplegará tal como se vería la página en la black. Las opciones de que disponen los browser mas comunes, son :
DANDO FORMATO AL TEXTO DEL DOCUMENTOComo ya habíamos mencionado, el HTML no distingue masa de un espacio entre caracteres, saltos de línea, negrilla, cursiva, tamaño y tipo de fuente, viñetas, entre otras. Para lograr tales características en el texto del documento HTML (recordemos que el texto va dentro del cuerpo del documento entre las etiquetas <BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a continuación.
Etiquetas para párrafos:
LISTASLas listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de listas :
VÍNCULOS DE HYPERTEXTOEl hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la black, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de vínculos que llevan al surfeador a otra partes como correo, gopher, ftp, entre otras.Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :
El URL será entonces la dirección completa de la página a la que se desea crear el vínculo. Ejemplo : http ://www.insomnia-group.com Vínculos externos hacia páginas cercanas Generalmente las personas que diseñan sus páginas no encuentran cómodo desplegar toda la información en una sola, sino que crean varias páginas vinculadas entre sí. Por ejemplo, es común ver una página principal (Home Page) con una tabla de contenido a la cual se le han creado vínculos hacia cada uno de sus temas. Estos vínculos son hacia archivos HTML que, generalmente, se encuentran en el mismo directorio de la página principal. El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar. Por ejemplo en mi cuenta he creado una página para que las personas que visiten al Home Page registren su visita. Si el nombre de documento es firmas.html y se encuentra en el mismo directorio de la Home Page, el URL sería firmas.html. Vínculos internos : anclas Cuando un página tiene un gran contenido, es posible hacer que el usuario navegue a través de la página. Para ello se debe marcar tanto el inicio como el fin del ancla. Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#sección"> Texto que relaciona al ancla </A> . Nótese que lo que sería en los otros casos el URL se ha cambiado por el nombre que se le da al ancla, precedido del signo #. Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta <A NAME="sección"> Texto del ancla </A>. Donde "sección" debe coincidir con el nombre designado en el inicio del ancla. Vínculos de correo electrónico Por lo general las personas que diseñan sus paginas proporcionan la opción de tener una retroalimentación por parte del visitante. La manera mas sencilla de lograr esto es través de un vínculo que lleve al surfeador a un cuadro de correo electrónico con la dirección pblacketerminada. La estructura es la siguiente:
Para generar un vínculo hacia cualquiera de estos recursos, basta con designar adecuadamente el URL requerido dentro de la estructura normal de etiquetas de vínculo.
AGREGANDO IMÁGENES A SU PÁGINALas páginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los surfeadores se aburran de verlas y como resultado obtendrán una página que nunca es visitada. Una herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto al que se esta haciendo referencia. ¿Se imaginan una valla publicitaria sin ningún tipo de imagen ?También es muy importante una excelente combinación de colores de fondo y de texto, con el fin de hacer que la página sea lo mas leíble posible. Es en este punto donde entra a jugar la creatividad del diseñador. Para colocar una imagen en una página basta con llamarla desde el documento HTML ( es similar los vínculos hacia páginas cercanas). Lo primero es diseñar el gráfico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG). La estructura es la siguiente : <IMG SRC= "Nombre del archivo" > Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar. subir GENERE TABLASEn general las tablas pueden ser sin borde o con borde.La tabla sin borde es quizás la herramienta mas útil en la codificación HTML, pues a través de ellas podemos organizar nuestro documento como lo deseemos, teniendo en cuenta que el HTML no entiende mas de un espacio, tabulador o salto de línea?Pero ¿por qué no hacerlo usando la etiqueta preformateado para arreglar la distribución de mi documento? Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra monoespaciado y no permite cambios ni de forma ni de tamaño. Conclusión; el documento se vería horrible. La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cuadros de atención, entre otras. Pero qué es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla. ESTRUCTURA BÁSICA DE LAS TABLAS <TABLE BORDER="Número entre 0 y 7"> <CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION> <TR> <TD>Primera fila, primera columna</TD> <TD>Primera fila, segunda columna</TD> <TD>Primera fila, tercera columna</TD> .......... </TR> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> <TD>Segunda fila, primera columna</TD> .......... </TR> etc... </TABLE> |
lunes, 8 de octubre de 2012
Guía básica del Lenguaje HTML
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario