iniciación al Lenguaje HTML
Anuncio
El lenguaje HTML Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas...) que van a ser definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es parte del documento mismo. Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no fustrarnos, no debemos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender. No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que usa. Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser: <tag> texto afectado </tag> La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante. Documento HTML <HTML> <HEAD> <TITLE> <BODY> Estructura básica de un documento HTML: Cabecera y cuerpo del documento Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. 1. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. 2. <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento. 3. <BODY>: Encierra el resto del documento, el contenido. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML> Primeros pasos <H1> <P> <BR> Tres son la tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. 1. <H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6> 2. <P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola. 3. <BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas. 4. <!-- -->: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento. Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos. <HTML> <HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> <H1>Mi primera página</H1> <!-- Aqui va un comentario que no es interpretado por el navegador --> <P>Hola mundo, esta es un página con titular, que tiene también un párrafo y unos cuantos saltos de línea.</P> Uno<br> Dos<br> Tres<br> </BODY> </HTML> Creación de enlaces <A> Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto para enlazar con ellos todos sus documentos en web. Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que veamos en pantalla y que se servirá del primero para saltar de documento. Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=""> o <A NAME="">. 1. <A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos: o Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a> o Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta página</A> 2. <A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</A> <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</H1></A> <A HREF="#abajo">Ir abajo</A><br> <A HREF="ej4.html">Ir a ejemplo 4</A><br><br> <A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</A> </BODY> </HTML>
