manual del lenguaje de marcado html
Anuncio
MANUAL DEL LENGUAJE DE MARCADO HTML Redactado por Elkin Beltrán ® Índice Introducción Que es un Lenguaje de Marcado ? Estructura Básica de un archivo HTML Etiquetas(TAGs) Básicas del lenguaje HTML Desventajas del lenguaje HTML Conclusión Introducción El lenguaje HTML se creó una vez tomó impulso aquella idea incipiente de principio de los años 90 llamada “World Wide Web”(Telaraña Mundial – Internet). El lenguaje HTML nació con la misma intención de utilizar Internet como medio de transporte de información, tanto comercial, como privada o educativa. Una vez Internet se afianzó en su desarrollo de transporte de información, el medio demandaba por un estándar que permitiera el transporte fluido de información a través de la Web. Con esto se desarrolló el protocolo HTTP(Hiper-Text Transfer Protocol – Protocolo de Transferencia de Hipertexto) que definía unos parámetros para realizar la transferencia de hipertexto entre nodos distantes. Con esta idea se desarrollo el lenguaje de marcado HTML(Hiper-Text Markup Language – Lenguaje de Marcado de Hipertexto), el cual define una sintaxis para desarrollar páginas web. Esta sintaxis se tratará a lo largo de este manual. Cabe destacar que la intención de este manual no es cubrir todas las posibilidades del lenguaje ni tomar en consideración cada una de las etiquetas de marcado, se generalizará una explicación con las más frecuentemente usadas y más importantes, las demás se pueden consultar en Internet. Que es un Lenguaje de Marcado ? Un lenguaje de marcado es aquella forma de escritura que me permite diseñar o estipular criterios de diseño de un documento(Página Web). Cualquiera de nosotros hemos utilizado un lenguaje de marcado cuando señalamos en un libro alguna frase, subrayándola o resaltándola, distinguiéndola de las demás, ahí estamos estipulando una forma de marcado de cómo se vería estructuralmente esa página. En resumen, un lenguaje de marcado me permitirá estructurar una página web, en cuanto a forma y diseño(colores, imágenes, etc..). Estructura Básica de un archivo HTML Empecemos a introducirnos en el fascinante mundo del marcado, puede que a algunos no les parezca increíble como a mí, pero más adelante me darán la razón. El lenguaje HTML define una serie de etiquetas(TAGs) que permiten marcar una parte del documento. Para definir el cuerpo de un archivo HTML se utilizan las siguientes etiquetas: • • • • <HTML> </HTML> : Es el tag padre o raíz en él se encuentra contenido todas las demás partes del documento. <HEAD> <HEAD> : Este tag permite estipular parámetros de la cabecera del documento. <TITLE> </TITLE> : Permite definir el título de una página. <BODY> <BODY> : Esta etiqueta, como su nombre lo dice(BODY = CUERPO), es el cuerpo del documento, en él se define todo el contenido de la página. Cada vez que se abra una etiqueta se debe cerrar con su mismo nombre anteponiéndole el caracter “/”. Es importante destacar que la sintaxis de un archivo HTML puede darse en mayúscula o minúscula, o combinación(<head> <HEAD> <HeAd>). Por comodidad se recomienda colocar en mayúsculas todos los tags. Estos archivos HTML se pueden trabajar en un editor de texto o en un editor HTML como DreamWeaver, pero se recomienda trabajar inicialmente en un editor de texto escribiendo código directamente nosotros, pues lo que hace el editor HTML es colocar ese código por nosotros(esto es útil para proyectos grandes). Trabajando en un editor de texto, se digita el código de la página y luego se procede a guardar con la extensión .html o .htm. A continuación ejemplificaremos nuestra primera página Web: <HTML> <HEAD> <TITLE>Mi primera página</TITLE> </HEAD> <BODY> Esta es mi primera página creada con código HTML. </BODY> </HTML> Esta es la estructura básica de un archivo HTML, en él se definen las partes HTML, HEAD y BODY. Una vez se tenga este primer archivo que llamaremos uno.htm, se procede a ejecutarlo desde un navegador. Es muy importante distinguir los procesos que tienen lugar en esta “ejecución de la página en un browser”. Primero que todo se debe ver una página HTML como un archivo de texto que posee una sintaxis, cuando se habla de sintaxis es por que se tiene un traductor, cuando se habla de traductor en sistemas nos estamos refiriendo a un compilador, que en este caso no genera código ejecutable sino resultados de diseño. Entonces el proceso se inicia cuando digitamos en un browser la URL del archivo, ya sea local o remoto, Este “browser Mágico” toma el archivo indicado en la URL, lo lee e interpreta cada una de sus partes, identificando errores de sintaxis en la escritura del archivo fuente. Luego el browser traduce las etiquetas encontradas en el archivo colocándolas en el documento, en lugares específicos o en lugares establecidos por el usuario. Una vez termina este proceso se nos muestra la dichosa y mágica página Web en nuestro navegador. Es muy importante conocer de fondo todo lo que sucede cuando abrimos un archivo tipo .htm o .html. Etiquetas(TAGs) Básicas del lenguaje HTML Desde aquí en adelante ya se debe manejar un pensamiento de diseñador de páginas Web, y que es lo que quiere un diseñador, herramientas para diseñar. Aunque suene redundante ya en este punto nos debemos estar haciendo la pregunta, bueno y como hago para colocar en un documento un titulo en negrita, centrado y en el tipo de letra Arial? ¿Cómo hago para insertar una imagen? ¿Cómo hago para crear tablas? ¿Cómo creo los tan utilizados hipervínculos? Etc. Pues bien su sed de herramientas de diseño será saciada abundantemente en este capitulo. Son tantas y tan importantes estas herramientas que no podría saber por donde empezar, pero démosle un orden a estas etiquetas. Sí porque por increíble que parezca todas las respuestas que de ahora en adelante se den a preguntas como las enlistadas arriba son etiquetas de diseño. Por ejemplo con un etiqueta <img> puedo insertar una imagen en un documento, con una etiqueta <FONT> puedo definir la fuente de una frase, etc. Cada etiqueta trae consigo una sintaxis de escritura y esa es la parte un poco engorrosa de aprender, pero ojo no es necesario aprendérselas todas, es bueno conocer algunas, pero tampoco matarse la cabeza aprendiéndoselas todas, al menos saber que existen y saber para que sirven y si en algún momento las necesitamos pues la buscamos en la enciclopedia mundial(Internet) o en un manual mejor que este, esa es la aptitud de los buenos ingenieros. Bueno comencemos a describir y utilizar algunas de estas etiquetas: <BODY> Como ya habíamos comentado esta etiqueta permite almacenar el cuerpo del documento como tal. Esta etiqueta no es muy diciente pero sus características sí. Esto es debido a que una etiqueta puede tener una o mas propiedades establecidas en su sintaxis. Estas características se definen dentro del tag inicial. Las características mas utilizadas del tag <BODY> son: • • • bgcolor="color" : Esta propiedad permite establecer el color de fondo de la página. Todas las propiedades de color establecen su parámetro con un número hexadecimal que inicia con el carácter “#” y seguido de tres pares de números consecutivos, estos números son los valores de color para el rojo, verde y azul en su orden. Ejemplo #99FC25, esto establece una mezcla de color con una cantidad de 99(en hexadecimal) de rojo, FC de verde y 25 de azul. Este ejemplo sirve para todas las propiedades que utilicen color. text="color" : Establece el color a utilizar para el texto en la página. background=”ruta_imagen” : Establece la imagen de fondo para la página, su parámetro se establece dando la ruta relativa de la ubicación del archivo de imagen. Un ejemplo para el uso de estas propiedades en la etiqueta BODY: <BODY bgcolor="#FFFFFF" text="#000000" background=”titulo.gif”></BODY> <FONT> Esta etiqueta permite definir la fuente a utilizar para escribir un texto. Las características más utilizadas son: • • • face="nombre_fuente" : Establece el nombre de la fuente a utilizar, como Arial, courier, Times New Roma, etc. size="tamaño" : Establece el tamaño de la fuente a desplegar. color="color" : Establece el color de la fuente. Ejemplo de uso: <font face="Arial" página</font> size="4" color="#0099CC">Texto a escribir en la <H1> <H2> <H3> <H4> <H5> <H6> Estas etiquetas se utilizan para enmarcar un texto en un tamaño estipulado, que se dispone así H1 tamaño más grande, H6 tamaño más pequeño, etc. Sus propiedades son: • align="alineacion" : Permite establecer la alineación del texto a desplegar esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). Ejemplo de uso: <H1 align=”center”>Titulo Principal</H1> <b> Permite colocar en negrita un texto. Ejemplo de uso: <b>Texto en negrita</b> <i> Permite colocar un texto en cursiva. Ejemplo de uso: <i>Texto en cursiva</i> <blockquote> Permite establecer una tabulación a un texto especificado. Ejemplo de uso: <blockquote> Texto Tabulado </blockquote> <br> Establece la introducción de un Enter en el esquema de un texto. Este tag es único, no tiene tag de cierre(ojo). Ejemplo de uso <br> <div> Se utiliza para separar un bloque dentro del documento, puede ser para referenciar una porción de texto o separarla. Sus propiedades son: • align="alineacion" : Permite establecer la alineación del texto a desplegar esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). Ejemplo de uso: ..... <div align="right">Texto destacado a la derecha</div> <p> Tiene el mismo uso de <div>. <li> Permite establecer un texto con viñeta. Ejemplo de uso: <li>Texto en viñeta</li> <ol> Permite introducir una lista ordenada numéricamente en el documento. Este tag hace uso del tag <li> visto anteriormente. Ejemplo de uso: <ol> <li>Primera Opción </li> <li>Segunda Opción </li> </ol> Salida: 1. Primera Opción 2. Segunda Opción <ul> Permite introducir una lista sin orden en el documento. Este tag hace uso del tag <li> visto anteriormente. Ejemplo de uso: <ul> <li>Primera Opción </li> <li>Segunda Opción </li> </ul> Salida: • • Primera Opción Segunda Opción <a> Permite establecer una marcador o un hipervínculo dentro del documento, que apunta a otro documento o a un archivo. Sus propiedades son: • • • href="url" : Establece la dirección URL a la cual va a referenciar este link. target="tipo" : Establece tipo de ventana objetivo del hipervínculo. Este destino estipulado por tipo puede ser: _blank(Ventana nueva), _self(Misma ventana) y _top(Marco superior). name=”nombre” : Permite darle un nombre a un marcador. Cuando la etiqueta <a> solo contiene un nombre, se esta definiendo una ancla que puede ser alcanzada mediante la sintaxis: nombre_pagina.htm#nombre_ancla. Ejemplo de uso: <a href="www.google.com" target="_blank">Página de Google</a> Salida: Página de Google Por defecto todos los links se abren en la misma ventana. Creación de marcadores: <a name="uno"></a> Este marcador uno se puede alcanzar en una página mediante el nombre de la página, la extensión y seguido el carácter “#” con el nombre del ancla. Ejemplo: miPagina.html#uno <hr> Permite insertar una barra horizontal dentro del documento. Este tag es único, no tiene tag final. <img> Permite insertar una imagen dentro del documento. Este tag es único no tiene tag de cierre(ojo). Sus propiedades son: • • • • • • • src=”ruta_imagen” : Establece la ruta en donde se encuentra el archivo imagen. width="ancho" : Establece el ancho de la imagen. height="alto" : Establece el alto de la imagen. name="nombre" : Nombre de la imagen dentro del documento. border="tam" : Tamaño del borde de la imagen. Si no se quiere borde se coloca 0. alt="mensaje" : Mensaje mostrado cuando se pase el mouse sobre la imagen(MouseOver). align="alineacion" : Permite establecer la alineación de la imagen a desplegar, esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). Ejemplo de uso: <img src="paisaje.jpg" width="84" height="48" name="mapa" alt="Esta es una imagen insertada con HTML." align="center"> border="0" Creación de Tablas Para la creación de tablas se utiliza el tag <table>, con sus propiedades, para definir la tabla como tal y los tags <tr> y <td>, con sus propiedades, para las filas y las columnas respectivamente. Expliquemos los tags: <table> Permite crear una tabla dentro del documento. El número de filas y columnas se establecen dependiendo de la definición de tags <tr> o <td> dentro de este tag <table>. Sus propiedades son: • • • • • • • • • width="ancho" : Establece el ancho de la tabla. Esta medida se puede dar en píxeles o en porcentaje(0 a 100). height="alto" : Establece el alto de la tabla. border="tam" : Establece el tamaño del borde de la tabla. bordercolor="color" : Establece el color del borde de la tabla. cellspacing="tam" : Establece el espaciado entre las celdas que hacen parte de la tabla. bgcolor="color" : Establece el color de fondo de la tabla. align="alineacion" : Permite establecer la alineación de la tabla a desplegar esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). background=”ruta_imagen” : Establece la imagen de fondo para una tabla. name=”nombre” : Nombre dado a la tabla. <tr> Esta etiqueta permite establecer una fila dentro de una tabla. Sus propiedades son: • • • • <td> bordercolor="color" : Establece el color del borde de la fila. bgcolor="color" : Establece el color de fondo de la fila. align="alineacion" : Permite establecer la alineación de la fila a desplegar esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). background=”ruta_imagen” : Establece la imagen de fondo para una fila. Esta etiqueta permite establecer una columna dentro de una tabla. Sus propiedades son: • • width="ancho" : Establece el ancho de la columna. height="alto" : Establece el alto de la columna. Ejemplo de creación de tablas: <table width="80%" border="1" cellspacing="1" cellpadding="1" bordercolor="#000099" bgcolor="#0099FF" name="miTabla" align="center"> <tr> <td>Columna 1, Fila 1</td> <td>Columna 2, Fila 1</td> </tr> <tr> <td>Columna 1, Fila 2</td> <td>Columna 2, fila 2</td> </tr> </table> Salida: Columna 1, Fila 1 Columna 1, Fila 2 Columna 2, Fila 1 Columna 2, fila 2 Creación de Formularios: Este es un ítem muy importante en el desarrollo de aplicaciones web, esto debido a que es una etiqueta que permite capturar información del usuario, mediante cajas de texto, botones, opciones, cajas de chequeo, etc. A continuación se describirán las etiquetas implicadas en este proceso: <form> Este tag permite insertar un formulario dentro de una página web, una página puede contener cuantos formularios se quiera introducir. Sus propiedades son: • name="nombre" : Nombre dado al formulario para distinguirlo dentro del documento. • • • method="tipo" : Método asociado a la forma de envió de variables del formulario. Los tipos más comunes son el GET y POST. Sus diferencias radican en la forma como envían las variables de formulario al destino. action="url" : Es el destino objetivo de este formulario, puede ser una página aparte o se puede enlazar a la misma página. Este destino es quien procese las variables obtenidas en el formulario. target="tipo" : Establece tipo de ventana objetivo del hipervínculo. Este destino estipulado por tipo puede ser: _blank(Ventana nueva), _self(Misma ventana) y _top(Marco superior). <input> Esta etiqueta permite introducir en un formulario los diferentes controles como son cuadros de texto, botones, botones de opción, cajas de chequeo e imágenes, etc. Todos estos tipos se consiguen insertando esta etiqueta dentro del tag <form> y colocando su propiedad type al control que se desea utilizar. A continuación se describen estas propiedades type por separado: • type="text" : Permite insertar cajas de texto en un formulario. name="nombre" : Nombre dado al campo de texto(variable de formulario). size="tam" : Tamaño(en caracteres) de la longitud de la caja de texto. value="texto" : Texto inicial del control. • type="submit" : Permite insertar un control botón con la acción de enviar el formulario cuando lo pulsen. name="nombre" : Nombre dado al botón. value="texto" : Titulo del botón. • type="reset" : Permite insertar un control botón con la acción de borrar todos los campos del formulario cuando lo pulsen. name="nombre" : Nombre dado al botón. value="texto" : Titulo del botón. • type="button" : Permite insertar un control botón sin ninguna acción específica. name="nombre" : Nombre dado al botón. value="texto" : Titulo del botón. • type="checkbox" : Permite insertar un control de caja de chequeo. name="nombre" : Nombre dado al control. value="valor" : Valor que toma el control una vez se envía el formulario. • type="radio" : Permite insertar un control de cuadro de opción. name="nombre" : Nombre dado al control. value="valor" : Valor que toma el control una vez se envía el formulario. • type="file" : Permite insertar un control de examinar archivos. Este tipo de control esta compuesto por una caja de texto y un botón(examinar) que permite buscar un archivo dentro del sistema de archivos. name="nombre" : Nombre dado al control. size="tam" : Tamaño(en caracteres) de la longitud de la caja de texto. • type="hidden" : Permite insertar un control de tipo texto oculto a la vista del usuario cuando ejecute la página. name="nombre" : Nombre dado al botón. value="texto" : Texto a colocar en el control. • type="image" : Permite insertar un control imagen con la acción de enviar el formulario cuando lo pulsen. name="nombre" : Nombre dado al botón. value="texto" : Titulo del botón. src=”ruta_imagen” : Establece la ruta en donde se encuentra el archivo imagen. width="ancho" : Establece el ancho de la imagen. height="alto" : Establece el alto de la imagen. border="tam" : Tamaño del borde de la imagen. Si no se quiere borde se coloca 0. alt="mensaje" : Mensaje mostrado cuando se pase el mouse sobre la imagen(MouseOver). align="alineacion" : Permite establecer la alineación de la imagen a desplegar, esta alineación puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). <select> Esta etiqueta permite insertar un cuadro de lista o un combo en el documento. Para insertar las opciones dentro de un cuadro de lista se debe utilizar la etiqueta <OPTION> dentro del tag <SELECT>. Sus propiedades son: • name=”nombre” : Nombre dado al control para identificarlo dentro del documento. <option> Permite insertar las opciones listadas en un control de cuadro de lista, lo que se quiera mostrar en la lista va como texto dentro del tag inicial(<option>) y el tag final(</option>). Sus propiedades son: • value="texto" : Texto a tomar como valor en este control. Ejemplo de uso de formularios: Este formulario toma del usuario su nombre, apellido, sexo, hobbies y lo envía a otro archivo llamado procesa.php a través del método POST. Listado HTML: <form name="formulario" method="post" action="procesar.php"> Nombre : <input type="text" name="nom" size="40"> <br> Apellidos : <input type="text" name="ape" size="40"> <br> Sexo : <select name="tiposexo"> <option value="1" selected>Masculino</option> <option value="2">Femenino</option> <option value="3">Raro</option> </select> <br> Deportes que practica:<br> <input type="checkbox" name="checkbox" value="1"> F&uacute;tbol <br> <input type="checkbox" name="checkbox2" value="2"> Basquet<br> <input type="checkbox" name="checkbox3" value="3"> Nataci&oacute;n<br> <br> <input type="submit" name="Enviar" value="Enviar"> </form> Figura 1. Vista del Formulario Resultado(Archivo form.htm) Esta parte es la más importante para los ingenieros de sistemas, pues ofrece un método para el tratamiento de información vía web. Sólo imagínense esos datos que mandamos a otro archivo, los recibimos y podemos hacer con ellos lo que queramos, insertarlos en una base de datos, almacenarlos en un archivo plano, tomar decisiones dependiendo de los datos introducidos. Y si estos datos no son el nombre o el apellido, sino el numero de una transacción bancaria, o la solicitud de inscripción a una revista, en fin las aplicaciones son innumerables, así que a trabajar. Desventajas del lenguaje HTML La principal desventaja que tiene, y que siempre ha tenido desde su aparición, el lenguaje HTML, es su carácter estático. Una vez se ha creado la página esta queda ya fija, inmovible, sin poder registrar las variaciones que se adquieren en este mundo cambiante. Es por esto que se han creado lenguajes de Script del lado cliente para darle un dinamismo intuitivo a las páginas estáticas de HTML. Entre otros lenguajes se encuentran javascript en sus diferentes versiones y el lenguaje Vbscript. Conclusión En conclusión, se debe empezar a trabajar con el lenguaje, a “cacharriar”, esto sólo se aprende “cacharriando” e inventando porque todos esos tags se ven muy bonitos allá, pero que pasa si los unimos todos en una página que muestre alguna información, que pasa si mezclamos formularios con tablas para hablar de un diseño de un formulario, que pasa si miramos como recibir y enviar variables desde una página a otra a través de formularios(o Dios mío estamos pasando información de un lado a otro!!!!, eso es bueno, muy bueno aprenderlo) etc. En fin el camino de aquí para adelante se los dejo a su imaginación. Otra conclusión que deja este manual es que el lenguaje HTML es muy bueno y es casi el padre de los demás lenguajes web, pero como tal ya esta mandado a recoger, ahora hay que hablar de PHP, Javascript, Java Servlets, Perl y muchas otras tecnologías mas avanzadas que constituyen una poderosa herramienta para el desarrollo de proyectos web.
