Scribd Logo
Upload

Welcome to Scribd!

  • Manual HTML

    Uploaded by

    the_escor
    9 views15 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views15 pages

    Manual HTML

    Uploaded by

    the_escor

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    MANUAL DEL LENGUAJE DE MARCADO HTML

    Redactado por Elkin Beltrn

    ndice
    Introduccin Que es un Lenguaje de Marcado ? Estructura Bsica de un archivo HTML Etiquetas(TAGs) Bsicas del lenguaje HTML Desventajas del lenguaje HTML Conclusin

    Introduccin El lenguaje HTML se cre una vez tom impulso aquella idea incipiente de principio de los aos 90 llamada World Wide Web(Telaraa Mundial Internet). El lenguaje HTML naci con la misma intencin de utilizar Internet como medio de transporte de informacin, tanto comercial, como privada o educativa. Una vez Internet se afianz en su desarrollo de transporte de informacin, el medio demandaba por un estndar que permitiera el transporte fluido de informacin a travs de la Web. Con esto se desarroll el protocolo HTTP(Hiper-Text Transfer Protocol Protocolo de Transferencia de Hipertexto) que defina unos parmetros 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 pginas web. Esta sintaxis se tratar a lo largo de este manual. Cabe destacar que la intencin de este manual no es cubrir todas las posibilidades del lenguaje ni tomar en consideracin cada una de las etiquetas de marcado, se generalizar una explicacin con las ms frecuentemente usadas y ms importantes, las dems se pueden consultar en Internet.

    Que es un Lenguaje de Marcado ? Un lenguaje de marcado es aquella forma de escritura que me permite disear o estipular criterios de diseo de un documento(Pgina Web). Cualquiera de nosotros hemos utilizado un lenguaje de marcado cuando sealamos en un libro alguna frase, subrayndola o resaltndola, distinguindola de las dems, ah estamos estipulando una forma de marcado de cmo se vera estructuralmente esa pgina. En resumen, un lenguaje de marcado me permitir estructurar una pgina web, en cuanto a forma y diseo(colores, imgenes, etc..). Estructura Bsica de un archivo HTML Empecemos a introducirnos en el fascinante mundo del marcado, puede que a algunos no les parezca increble como a m, pero ms adelante me darn la razn. 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 raz en l se encuentra contenido todas las dems partes del documento. <HEAD> <HEAD> : Este tag permite estipular parmetros de la cabecera del documento. <TITLE> </TITLE> : Permite definir el ttulo de una pgina. <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 pgina.

    Cada vez que se abra una etiqueta se debe cerrar con su mismo nombre anteponindole el caracter /. Es importante destacar que la sintaxis de un archivo HTML puede darse en mayscula o minscula, o combinacin(<head> <HEAD> <HeAd>). Por comodidad se recomienda colocar en maysculas 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 cdigo directamente nosotros, pues lo que hace el editor HTML es colocar ese cdigo por nosotros(esto es til para proyectos grandes). Trabajando en un editor de texto, se digita el cdigo de la pgina y luego se procede a guardar con la extensin .html o .htm. A continuacin ejemplificaremos nuestra primera pgina Web: <HTML> <HEAD> <TITLE>Mi primera pgina</TITLE>

    </HEAD> <BODY> Esta es mi primera pgina creada con cdigo HTML. </BODY> </HTML> Esta es la estructura bsica 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 ejecucin de la pgina en un browser. Primero que todo se debe ver una pgina 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 cdigo ejecutable sino resultados de diseo. Entonces el proceso se inicia cuando digitamos en un browser la URL del archivo, ya sea local o remoto, Este browser Mgico 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 colocndolas en el documento, en lugares especficos o en lugares establecidos por el usuario. Una vez termina este proceso se nos muestra la dichosa y mgica pgina Web en nuestro navegador. Es muy importante conocer de fondo todo lo que sucede cuando abrimos un archivo tipo .htm o .html. Etiquetas(TAGs) Bsicas del lenguaje HTML Desde aqu en adelante ya se debe manejar un pensamiento de diseador de pginas Web, y que es lo que quiere un diseador, herramientas para disear. 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? Cmo hago para insertar una imagen? Cmo hago para crear tablas? Cmo creo los tan utilizados hipervnculos? Etc. Pues bien su sed de herramientas de diseo ser saciada abundantemente en este capitulo. Son tantas y tan importantes estas herramientas que no podra saber por donde empezar, pero dmosle un orden a estas etiquetas. S porque por increble que parezca todas las respuestas que de ahora en adelante se den a preguntas como las enlistadas arriba son etiquetas de diseo. 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 aprendrselas todas, es bueno conocer algunas, pero tampoco matarse

    la cabeza aprendindoselas todas, al menos saber que existen y saber para que sirven y si en algn 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 habamos comentado esta etiqueta permite almacenar el cuerpo del documento como tal. Esta etiqueta no es muy diciente pero sus caractersticas s. Esto es debido a que una etiqueta puede tener una o mas propiedades establecidas en su sintaxis. Estas caractersticas se definen dentro del tag inicial. Las caractersticas mas utilizadas del tag <BODY> son: bgcolor="color" : Esta propiedad permite establecer el color de fondo de la pgina. Todas las propiedades de color establecen su parmetro con un nmero hexadecimal que inicia con el carcter # y seguido de tres pares de nmeros consecutivos, estos nmeros 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 pgina. background=ruta_imagen : Establece la imagen de fondo para la pgina, su parmetro se establece dando la ruta relativa de la ubicacin 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 caractersticas ms utilizadas son: face="nombre_fuente" : Establece el nombre de la fuente a utilizar, como Arial, courier, Times New Roma, etc. size="tamao" : Establece el tamao de la fuente a desplegar. color="color" : Establece el color de la fuente.

    Ejemplo de uso: <font face="Arial" pgina</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 tamao estipulado, que se dispone as H1 tamao ms grande, H6 tamao ms pequeo, etc. Sus propiedades son: align="alineacion" : Permite establecer la alineacin del texto a desplegar esta alineacin 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 tabulacin a un texto especificado. Ejemplo de uso: <blockquote> Texto Tabulado </blockquote>

    <br> Establece la introduccin 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 porcin de texto o separarla. Sus propiedades son: align="alineacion" : Permite establecer la alineacin del texto a desplegar esta alineacin 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 vieta. Ejemplo de uso: <li>Texto en vieta</li>

    <ol>
    Permite introducir una lista ordenada numricamente en el documento. Este tag hace uso del tag <li> visto anteriormente. Ejemplo de uso: <ol> <li>Primera Opcin </li> <li>Segunda Opcin </li>

    </ol> Salida: 1. Primera Opcin 2. Segunda Opcin

    <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 Opcin </li> <li>Segunda Opcin </li> </ul> Salida: Primera Opcin Segunda Opcin

    <a>
    Permite establecer una marcador o un hipervnculo dentro del documento, que apunta a otro documento o a un archivo. Sus propiedades son: href="url" : Establece la direccin URL a la cual va a referenciar este link. target="tipo" : Establece tipo de ventana objetivo del hipervnculo. 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">Pgina de Google</a> Salida: Pgina de Google

    Por defecto todos los links se abren en la misma ventana. Creacin de marcadores: <a name="uno"></a> Este marcador uno se puede alcanzar en una pgina mediante el nombre de la pgina, la extensin y seguido el carcter # 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" : Tamao 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 alineacin de la imagen a desplegar, esta alineacin 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"

    Creacin de Tablas
    Para la creacin 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 nmero de filas y columnas se establecen dependiendo de la definicin 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 pxeles o en porcentaje(0 a 100). height="alto" : Establece el alto de la tabla. border="tam" : Establece el tamao 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 alineacin de la tabla a desplegar esta alineacin 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: 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 alineacin de la fila a desplegar esta alineacin puede ser: center(centrado), left(izquierda), right(derecha) o justify(justificado). background=ruta_imagen : Establece la imagen de fondo para una fila.

    <td>

    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 creacin 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

    Creacin de Formularios:
    Este es un tem muy importante en el desarrollo de aplicaciones web, esto debido a que es una etiqueta que permite capturar informacin del usuario, mediante cajas de texto, botones, opciones, cajas de chequeo, etc. A continuacin se describirn las etiquetas implicadas en este proceso:

    <form>
    Este tag permite insertar un formulario dentro de una pgina web, una pgina puede contener cuantos formularios se quiera introducir. Sus propiedades son: name="nombre" : Nombre dado al formulario para distinguirlo dentro del documento.

    method="tipo" : Mtodo asociado a la forma de envi de variables del formulario. Los tipos ms comunes son el GET y POST. Sus diferencias radican en la forma como envan las variables de formulario al destino. action="url" : Es el destino objetivo de este formulario, puede ser una pgina aparte o se puede enlazar a la misma pgina. Este destino es quien procese las variables obtenidas en el formulario. target="tipo" : Establece tipo de ventana objetivo del hipervnculo. 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 opcin, cajas de chequeo e imgenes, 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 continuacin 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" : Tamao(en caracteres) de la longitud de la caja de texto. value="texto" : Texto inicial del control.
    type="submit" : Permite insertar un control botn con la accin de enviar el formulario cuando lo pulsen. name="nombre" : Nombre dado al botn. value="texto" : Titulo del botn. type="reset" : Permite insertar un control botn con la accin de borrar todos los campos del formulario cuando lo pulsen. name="nombre" : Nombre dado al botn. value="texto" : Titulo del botn. type="button" : Permite insertar un control botn sin ninguna accin especfica. name="nombre" : Nombre dado al botn. value="texto" : Titulo del botn. 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 enva el formulario. type="radio" : Permite insertar un control de cuadro de opcin. name="nombre" : Nombre dado al control. value="valor" : Valor que toma el control una vez se enva el formulario. type="file" : Permite insertar un control de examinar archivos. Este tipo de control esta compuesto por una caja de texto y un botn(examinar) que permite buscar un archivo dentro del sistema de archivos. name="nombre" : Nombre dado al control. size="tam" : Tamao(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 pgina. name="nombre" : Nombre dado al botn. value="texto" : Texto a colocar en el control. type="image" : Permite insertar un control imagen con la accin de enviar el formulario cuando lo pulsen. name="nombre" : Nombre dado al botn. value="texto" : Titulo del botn. 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" : Tamao 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 alineacin de la imagen a desplegar, esta alineacin 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 enva a otro archivo llamado procesa.php a travs del mtodo 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 ms importante para los ingenieros de sistemas, pues ofrece un mtodo para el tratamiento de informacin va web. Slo imagnense 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 transaccin bancaria, o la solicitud de inscripcin 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 aparicin, el lenguaje HTML, es su carcter esttico. Una vez se ha creado la pgina 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 pginas estticas de HTML. Entre otros lenguajes se encuentran javascript en sus diferentes versiones y el lenguaje Vbscript.

    Conclusin En conclusin, se debe empezar a trabajar con el lenguaje, a cacharriar, esto slo se aprende cacharriando e inventando porque todos esos tags se ven muy bonitos all, pero que pasa si los unimos todos en una pgina que muestre alguna informacin, que pasa si mezclamos formularios con tablas para hablar de un diseo de un formulario, que pasa si miramos como recibir y enviar variables desde una pgina a otra a travs de formularios(o Dios mo estamos pasando informacin 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 imaginacin. Otra conclusin que deja este manual es que el lenguaje HTML es muy bueno y es casi el padre de los dems lenguajes web, pero como tal ya esta mandado a recoger, ahora hay que hablar de PHP, Javascript, Java Servlets, Perl y muchas otras tecnologas mas avanzadas que constituyen una poderosa herramienta para el desarrollo de proyectos web.

    You might also like