Fundamentos-HTML
Anuncio
Fundamentos de HTML HTML es un lenguaje de marcado. Existen una serie de características que han hecho triunfar a HTML como lenguaje de expresión en la web. Se trata de un lenguaje sencillo, al contrario que muchos otros lenguajes de programación, es un lenguaje con capacidades visuales muy atractivas, que permite la relación fácil entre documentos, y está adaptado especialmente bien a la web. HTML es un lenguaje de marcado, lo que significa que está constituido por una serie de etiquetas o marcas que describen el documento. Por ejemplo, <title>Documento de Pruebas</title> Aquí podemos observar como las etiquetas <title> y </title> rodean el texto “Documento de Pruebas” y lo dotan de un significado determinado. En este caso, que “Documento de Pruebas” es el título del documento con el que estamos trabajando. Existen muchas otras etiquetas para usos muy variados, que describen de una forma u otra el documento en cuestión o una parte del mismo. Este código fuente en lenguaje HTML es legible e interpretable por los navegadores o browsers, como Mozilla, Opera, Internet Explorer o Safari. Lo que hacen estos navegadores es analizar y procesar las etiquetas de un documento HTML y desplegar los elementos que estas describen en pantalla. Por poner un ejemplo, vamos a acceder a la página: http://crom.eubd.ucm.es/~masterbt02/php/html/hola.html El código fuente de esta página es el siguiente: <html> <head> <title>Documento de pruebas</title> </head> <body> <h1>Texto en grande</h1> <p>Este es un primer párrafo que aparecería separado por un espacio</p> <p>de el segundo párrafo, que es este</p> <p>Esto debería estar en <b>negrita</b></p> <img src="http://www.google.es/intl/en_com/images/logo_plain.png" alt="Logo de Google"> <p><a href="http://www.google.com">Ir al sitio web de Google</a></p> </body> </html> Vemos cómo por ejemplo el texto que en el código fuente está entre las etiquetas <title> y </title> al ser analizado por el navegador se convierte en el título de la página, que aparece escrito en la parte superior de la ventana del propio navegador. Es importante tener en cuenta que una etiqueta está compuesta de dos elementos, Apertura <title> Cierre </title> Es la barra inclinada la que proporciona el mecanismo de cierre. Casi todas las etiquetas guardan este sistema, y si no lo observamos se pueden producir errores. Podemos hacer la prueba eliminando la etiqueta de cierre </title> en el documento que estamos utilizando. De esta forma, componer un documento HTML consiste sólo en conocer las etiquetas oportunas y la forma de expresarlas. Para empezar debemos saber que un documento html está compuesto de tres partes distinguibles. El documento en si mismo, que está demarcado por las etiquetas <html> y </html> al principio, para señalar el comienzo del archivo al navegador, y al final, para indicar el lugar donde debe parar de analizar. Además dentro de un documento existen dos partes, la cabeza, y el cuerpo del documento. La cabeza del documento está delimitada por las etiquetas <head> y </head>, y contiene información un poco especial acerca de la página, información que hace referencia al conjunto de los contenidos de la página pero que no es contenido en sí mismo, como el título. En segundo lugar, todos los documentos html deben tener una parte denominada cuerpo, donde se inscriben los contenidos reales de la página. Esta parte está delimitada por las etiquetas <body> y </body> Esto nos determina una estructura básica que es necesario cumplir en todas las ocasiones, de manera que todos los documentos que creemos deben guardarla para que todos los navegadores puedan interpretarlos con facilidad. La estructura básica del documento sería la siguiente: <html> <head> (Aquí dentro van elementos que describen el contenido de la página) </head> <body> (Aquí dentro van los contenidos de la página, lo que saldrá por pantalla) </body> </html> Una vez observado esto, la creación de un documento html simplemente consiste en utilizar las etiquetas adecuadas. HTML es un lenguaje bastante visual, por lo que la utilidad de casi todas las etiquetas se aprecia con facilidad. Algunas etiquetas básicas: HTML tiene tres capacidades básicas muy importantes. 1.- Alterar el texto 2.- Insertar imágenes 3.- Enlazar con otras páginas Por lo que respecta a la alteración de texto, esta se lleva a cabo de forma muy sencilla. 1.- Alterar el texto Tamaños de letra. Se puede elegir entre 6 tamaños de letra básicos. Estos están numerados del 1 al 6, siendo el número 1 el más grande y el 6 el más pequeño. Por ejemplo, utilizaremos el tipo 1 de letra para señalar un punto muy importante. Para modificar el texto adaptándolo al tamaño deseado (pongamos “Texto en grande”), deberemos rodear dicho texto de las etiquetas oportunas, en este caso <h1>Texto en grande</h1> Las etiquetas aplicables son por tanto: <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Párrafos. Para indicar cuándo queremos iniciar un nuevo párrafo utilizaremos la etiqueta <p> al inicio y </p> al final del párrafo. Esto divide el texto del resto del documento distinguiéndolo como un párrafo, lo que tiene aplicaciones que enseñaremos más adelante, pero que por ahora significa simplemente que introduce un pequeño espacio de interlineado entre el párrafo que tratamos y el siguiente. Esto clarifica bastante la visión de un documento, por lo que es recomendable utilizarlo, aunque no imprescindible. Esta etiqueta también funcionará a pesar de que no se cierre, ya que el navegador interpreta que un párrafo termina donde comienza el siguiente. <p>Este es un primer párrafo que aparecerá separado por un espacio</p> <p>de el segundo párrafo, que es este Negrita. Para destacar palabras dentro del texto se puede utilizar la negrita, tal y como se hace en cualquier procesador de texto. Esto se hace incluyendo dentro de las etiquetas <b></b> el texto a resaltar. Esto debería estar en <b>negrita</b> 2.- Introducir Imágenes Esta es una característica muy interesante de HTML. Mediante la introducción de una simple etiqueta, podremos insertar una imagen si proporcionamos bien su localización. Además podemos proporcionar algunos atributos que la modifiquen, como el tamaño. Es importante tener en cuenta que la localización de la imagen se explicita utilizando el atributo “src” (abreviatura de source, o fuente). Cualquier atributo en HTML tiene como objetivo modificar el elemento en el que está inscrito, o proporcionar información indispensable para su correcta interpretación, como en este caso. <img src="imagen.jpg" width="200" height="150"> Es interesante describir las imágenes que introducimos en nuestro documento, con dos objetivos: · Es bastante elegante (una buena práctica recomendable) · Ayuda a los navegadores para invidentes De esta forma, cuando alguien pose el puntero del ratón sobre la imagen, se desplegará la descripción que introdujimos, y en el caso de un navegador para invidentes se proporcionará una oportunidad de comprender lo que contiene. Esto se hará introduciendo otro atributo en la etiqueta img, <img src="logo_google.png" width="200" height="150" alt="Logo de Google"> 3.- Introducir enlaces a otras páginas Esta es otra de las características HTML, fundamental para el desarrollo de la web tal y como la conocemos hoy día. Simplemente, lo que hacemos introduciendo un enlace en el documento proporcionar una URL al navegador, y la instrucción de que se acceda a ella en caso necesario. Se utiliza la etiqueta pertinente para distinguir un enlace del texto común (que no debe interaccionar con el usuario). Para esto se utiliza la etiqueta anchor (ancla) <a> </a>: <a href=”http://www.google.com”>Ir al sitio web de Google</a> Observamos cómo la etiqueta está compuesta por la base de la etiqueta anchor, <a></a>, y el atributo href=”” que indica la dirección a la que queremos acceder. Podemos introducir texto entre medias de las etiquetas de apertura y cierre, con lo que definimos el área sobre el que hay que pinchar para acceder a la página deseada. Tutoriales y Manuales para aprender más Curso de HTML 4.0 (Daniel Rodríguez Herrera) de www.programacion.net http://www.programacion.net/html/tutorial/curso/ Muy completo. Tutorial de HTML (Juan R. Pozo) http://html.conclase.net/tutorial/html/ Explica HTML desde el principio, tratando también aspectos básicos de la Web en general. También trata CSS. Referencia de los elementos HTML 4.01 / XHTML 1.0 (W3C Schools) http://www.w3schools.com/tags/default.asp Exhaustivo, poco didáctico, pero útil como referencia para usuarios avanzados.