![¿Que es HTML? Una buena pregunta eh?, bueno pues HTLM son las iniciales de Hiper Text Markup Languaje. Pues eso, en definitiva es un lenguaje de programación, mas o menos standard que se usa para que podamos crear documentos que se puedan ver con cualquier navegador. Los programas HTLM, están hechos con texto plano, sólo contienen números y letras, pero ojo, no todos los caracteres son válidos, algunos carácteres son especiales y debemos insertar su código, por ejemplo las minúsculas acentuadas . Para decirle al navegador que nos muestre una a acentuada debemos teclear á y el resultado sería á, la e acentuada é, y así el resto de vocales. Más adelante incluire una tabla con los códigos especiales, pero de momento esto nos sirve. Lo que si hay que tener en cuenta es que los códigos de marcado del lenguaje HTML, no son puntillosos y no distinguen entre mayúsculas y minúsculas. Con lo que si hay que tener cuidado es con las llamadas externas, y sobre todo con nombres de ficheros. Con los maravillosos sistemas operativos que tienen ahora nuestros ordenadores, podemos poner nombres larguisimos a nuestros ficheros, y además pueden contener espacios. Por cuestiones de portabilidad, yo seguiría con los nombres cortitos, y si tengo que separar palabras, nunca useis un blanco, es mejor un guión, y apañado. Además, donde si hay que tener cuidado por que si distingue mayúsculas y minúsculas es en los nombres de los ficheros, para el no es lo mismo PEPE que Pepe que pepe, serían tres ficheros distintos, así que cuidado con esto, luego no digaís que no os he avisado. ESTRUCTURA DE UNA PAGINA Bueno, esto ya se empieza a poner interesante. Vamos a empezar a escribir nuestro primer código HTML. Lo primero que hay que saber es que todo documento HTML debe empezar y acabar por las etiquetas <HTML> y </HTML> respectivamente. Como veís empezamos a utilizar este lenguaje. Todas las etiquetas van entre <>. Además la gran mayoría de las etiquetas van emparejadas y para distinguir entre la etiqueta de inicio y de fin, se le pone / a la etiqueta de fin. Fácil no?. Todos los documentos HTML tienen dos partes, el encabezado y el cuerpo, de perogrullo no?. Pues hasta para esto hay que poner etiqueta, y cuales son? . Para el encabezado la etiqueta es <HEAD> y </HEAD> En esta sección se pone la información de la página y poco más. Aquí es donde pónemos el título de nuestra página, para que todo el mundo nos conozca. El título irá entre las etiquetas <TITLE> y </TITLE> lo que pongamos aqui, aparecera en la parte izquierda de la línea superior de la ventana. Ya esta, manos a la obra vamos a empezar a diseñar nuestra primera página. Cogemos cualquier procesador, y acordaros de que se debe salvar como texto normal. <HEAD> <TITLE>Mi pagina Web</TITLE> </HEAD> Y ahora vamos con la parte importante, el cuerpo del documento, donde vamos a insertar nuestro texto, imagenes, hiperenlaces, scrips ......... el cuerpo también tiene su etiqueta, que como no podia ser de otra manera son <BODY> y </BODY> y entre medias que?. Nuestra página WEB como todos los documentos, necesita un encabezamiento, algo que llame la atención y que defina el resto de la página. Podemos definir hasta 6 tamaños de encabezados, y esto se hace con las etiquetas <H1> a <H6> teniendo en cuenta que el número 1 define el tamaño de letra más grande y el 6 define el más pequeño. Seguimos diseñando la página: <BODY> <H1>BIENVENIDO A MI PAGINA PERSONAL</H1> </BODY> Bienvenido a mi página personal (H1) Bienvenido a mi página personal (H2) Bienvenido a mi página personal (H3) Bienvenido a mi página personal (H4) Bienvenido a mi página personal (H5) Bienvenido a mi página personal (H6) <br />PARRAFOS Y ahora que, ya tenemos el encabezado de nuestra página, pero se puede mejorar el aspecto, alineando el parrafo. Lo normal es que todos queramos poner el encabezado en el centro de la página. Esto se logra con la etiqueta <CENTER> </CENTER>. Esta etiqueta también es válida para gráficos, pero lo veremos mas adelante. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> </BODY> BIENVENIDO A MI PAGINA PERSONAL (H2) Los párrafos van entre las etiquetas <P> y </P>, y los podemos alinear a la izquierda, a la derecha y como ya hemos visto, centrarlos, pero vamos a seguir con nuestra página, introduciendo el comando ALIGN. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> <P ALIGN=\"
LEFT\"
> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinea a la izquierda. </P> <P ALIGN=\"
RIGTH\"
> Pero esta línea quiero que salga a la derecha</P> <P ALIGN=\"
CENTER\"
> Toma ya y ahora en el centro</P> </BODY> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinie a la izquierda Pero esta línea quiero que salga a la derecha Toma ya y ahora en el centro. Habeís visto las posibilidades de alineamiento del parrafo, pues hay más. Si lo que queremos es sangrar un párrafo, debemos escribir entre las etiquetas <BLOCKQUOTE> Y </BLOCKQUOTE>. FORMATOS Pues visto lo anterior, seguimos dando forma a nuestra página, ahora vamos a ver como darle formato a nuestro texto. Lo primero que vamos a ver es como modificar el tamaño de la letra, esto se hace con el comando <FONT> </FONT>, en unión con el modificador SIZE. Hay varias maneras de modificar el tamaño de la fuente. En primer lugar podemos hacer referencia al tamaño absoluto de la fuente. Los tamaños absolutos varían entre el 1 y el 7, siendo 7 el mas grande, y 1 el mas pequeño. La segunda manera de realizar la modificación, es hacer referencia al tamaño relativo de la fuente, es decir restando o incrementando el tamaño actual de la fuente en la cantidad especificada. Este modificador puede varíar entre -4 y +4. Pero como mejor se ve esto es continuando con nuestra página. <P><FONT SIZE=\"
3\"
>Esta línea está escrita con tamaño 3</FONT></P> Esta línea esta escrita con tamaño 3 <P><FONT SIZE=\"
5\"
>Esta línea está escrita con tamaño 5</FONT></P> Esta línea esta escrita con tamaño 5 <P><FONT SIZE=\"
-3\"
>Esta línea está escrita con tamaño -3</FONT></P> Esta línea esta escrita con tamaño relativo -3 Cómo vemos en el último ejemplo, el resultado es el mismo que si aplicamos <FONT SIZE=\"
2\"
>, resultado que restarle 3 unidades al último tamaño definido de fuente, en nuestro ejemplo 5. Visto todo lo anterior, sólo queda por decir que es posible determinar cual es el tamaño base de la fuente con la que vamos a escribir nuestro documento HTML, para ello usamos la etiqueta <BASEFONT SIZE=tamaño>, escrito justo a continuación de la etiqueta <BODY>. ESTILOS Para resaltar partes del texto que estamos escribiendo, podemos utilizar negritas, cursivas, etc. Las etiquetas mas comúnes que podemos usar aparecen en la siguiente tabla Estilo Etiqueta Negrita <B> </B> Negrita Cursiva <I> </I> Cursiva Subrayado <U> </U> Subrayado Cita <CITE> </CITE> Cita Código <CODE> </CODE> Código Enfasis <EM></EM> Enfasis Fuerte <STRONG> </STRONG> Fuerte Teletipo <TT> </TT> Teletipo Tachado <STRIKE< </STRIKE> Tachado Subíndice <SUB> </SUB> Subíndice Superíndice <SUP> </SUP> Superíndice Grande <BIG> </BIG> Grande Pequeño <SMALL> </SMALL> Pequeño <P><B>Esto se va a escribir en negrita</B></P> LINEAS HORIZONTALES A veces vamos a necesitar separar las distintas secciones de nuestro documento HTML, una forma sencilla de hacerlo, es insertar líneas horizontales. Esto se consigue con la etiqueta <HR>. Esta etiqueta no lleva su pareja de cierre, es individual, por defecto traza una línea de todo el ancho de la pantalla, no obstante se puede modificar el aspecto de las líneas añadiendo los siguientes parámetros: SIZE = Indica el grosor en pixel de la línea WIDTH = Especifica la anchura que la línea ocupa en la pantalla, se le puede especificar en pixels o en porcentaje. ALIGN= Alineación de la línea NOSHADE = Si queremos la línea con sombra o sin sombra. Pero todo esto se ve mejor con un ejemplo: <HR SIZE=\"
5\"
WIDTH=\"
50%\"
ALIGN=\"
LEFT\"
NOSHADE=\"
NOSHADE\"
> El resultado es una línea de grosor 5 pixel un 50% de la pantalla alineada a la izquierda sin sombra, es decir: ENLACES La verdadera potencia de internet nos la da la posibilidad de enlazar todas las páginas como si de una tela de araña se tratase, una página sin enlaces no tiene demasiado sentido, asi que vamos a ver de forma muy breve como insertar enlaces dentro de nuestro documento. Los enlaces nos pueden llevar a otro documento o bien a otra sección dentro del documento editado. Este documento de tutorial, esta repleto de enlaces a la misma página, como habeís podido ver, desde el índice que está al principio de este documento, se accede a las secciones directamente, igualmente de cada una de las secciones, se accede al índice. Además, este documento tiene enlaces externos, como vereis en la parte inferior de la pantalla, hay un enlace a la página principal de mi site y hay otro enlace a Por cierto si os gusta leer y escuchar música, pinchar en este enlace, podreis adquirir los mejores libros y la mejor música de internet, y además así colaborareis a que pueda seguir manteniendo este tutorial. Bueno, y ahora manos a la obra que es lo que nos interesa, vamos a generarnos un enlace a uno de los buscadores mas conocidos YAHOO <A HREF=\"
http://YAHOO.COM\"
>Buscar en YAHOO</A> Buscar en YAHOO Ahora lo vamos a complicar un poco más y vamos a poner un gráfico como el del ejemplo anterior. <P ALIGN=\"
CENTER\"
><A HREF=\"
http://armazon.com\"
><IMG SRC=\"
armazon.gif\"
></A></P> Bien no, es mucho más fácil de lo que parece.Como veis Hemos realizado dos enlaces a otras páginas pero con el mismo formato podemos acceder a otros muchos servicios de internet, podemos realizar enlace tipo ftp, correo electronico, etc. Vamos a ver como añadir un enlace de correo: <A HREF=\"
mailto:f_casa@yahoo.com\"
>Mandame un correo</A> Mándame un correo Para agregar enlaces a marcadores dentro de la página actual, o dentro de otra página, lo primero que hay que definir es el marcador, esto se hace de la siguiente manera: <A NAME=\"
Nombre del marcador\"
>Texto del marcador </A> Texto del marcador El enlace al marcador anterior se definiría: <A HREF=\"
#Nombre del marcador\"
>Enlace al marcador anterior</A> Cómo véis se incluye el símbolo \"
#\"
antes del nombre del marcador Enlace al marcador anterior Tambien se pueden hacer llamadas a marcadores definidos en otras páginas: <A HREF=\"
index.html#Nombre del marcador\"
>Enlace al marcador de la página index.html</A> DAR COLOR A LA PAGINA Hasta ahora hemos visto todo lo necesario para realizar nuestra primera página WEB, pero ahora, vamos a darle un poco de vidilla, ya que una pagina con letra negra sobre fondo blanco, queda un poco sosa, asi que vamos a modificar los colores tanto del fondo como de las letras, e incluso vamos a poder insertar un gráfico como fondo de nuestra página. Para modificar los colores de fondo del documento debemos añadir a la etiqueta de cuerpo de documento <BODY> el parámetro BGCOLOR=\"
#RRGGBB\"
donde #RRGGBB indica la combinacion de tonos de rojo, verde y azul necesarios para conseguir el color que deseamos. No obstante HTML reconoce 16 colores simples black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y fuchsia con nombre y apellidos, así que para poner un fondo azul, bastará con poner <BODY BGCOLOR=\"
BLUE\"
> sin más. Si lo queremos complicar más, necesitamos saber el número en hexadecimal que define el color que queremos y lo ponemos en la etiqueta bgcolor, el color rojo sin ir mas lejos sería #FF0000. Para definir el color del texto, utilizaremos el parámetro TEXT=\"
#RRGGBB\"
. Para definir el color de los enlaces no vilistados, LINK=\"
#RRGGBB\"
, para los enlaces visitados VLINK=\"
#RRGGBB\"
, para los enlaces en los que se haga click ALINK=\"
#RRGGBB\"
. Para insertar una imagen de fondo, usamos el parámetro BACKGROUND=\"
imagenfondo.gif\"
. Los formatos de ficheros más utilizados son el gif y jpg. Cabe reseñar que el fichero debe estar en el mismo directorio que el documento HTML que lo llama, en caso contrario se debe especifivar el PATH a dicho fichero gráfico. Y OJO, ya dije anteriormente que aunque en el código HTML da igual escribir las etiquetas en mayúsculas o minúsculas, cuando se hace una llamada a un fichero, enlace, etc... Si existen diferencias, con lo cual para evitar problemas, escribimos todo en minúsculas. INSERTAR IMAGENES Y como todo documento que se precie debe tener imagenes, vamos a insertarlas de una manera facilísima, esto se hace con el comando <IMG SRC=\"
Nombre de la imagen\"
>. Si además queremos especificar el tamaño <IMG SRC=\"
Nombre de la imagen\"
HEIGHT=\"
n\"
WITDH=\"
n\"
> siendo n el tamaño en pixels de la imagen. Si a esto le añadimos todo lo que hemos visto anteriormente, podemos alinear la imagen, incluirla en un enlace a otras páginas, etc etc. <P ALIGN=\"
CENTER\"
><A HREF=\"
http://armazon.com\"
><IMG SRC=\"
armazon.gif\"
></A></P> Ahora entendemos mucho mejor el ejemplo anterior LISTAS Este es uno de los elementos mas útiles para nuestros documentos HTML, ya que nos permite esquematizar de una forma clara la información contenida en nuestro documento. Una lista es una sucesion de elementos que pertenecen a una estructura común y que es posible numerarlo, sin darle muchas más vueltas, el índice de esta página esta realizado con una lista. Hay diferentes tipos de listas, sin orden con orden, numeradas, alfabeticas, etc.... Es bastante común que vayan precedidos de bolos o números para diferenciar una línea de otra. Para crear una lista ordenada, se usan las etiquetas <OL> y </OL>, y a cada elemento se le incluye entre las etiquetas <L1> y </L1> pe. <OL> <LI>INTRODUCCION</LI> <LI>QUE ES HTML?</LI> </OL> El resultado es como sigue: INTRODUCCION QUE ES HTML? Las listas sin orden, preceden a las líneas por un bolo, y es igual que el ejemplo anterior, sustituyendo <OL> por <UL> Los elementos de las listas pueden ser a su vez listas <OL> <LI>Estructura de un documento HTML</LI> <UL> <LI> Encabezado </LI> <LI> Cuerpo </LI> </UL> </OL> Estructura de un documento HTML Encabezado Cuerpo Para las listas ordenadas, también podemos usar los parámetros TYPE y START, para definir el tipo de numeración que deseamos y en que número empezar, los tipos són AaIi, para las numeraciones Alfabéticas, Alfabéticas minúsculas, Romanas y Romano minúsculas respectivamente. pe. <OL TYPE=A START=3>, El primer elemento numerado de la lista será la C CARACTERES ESPECIALES Código Cáracter especial < < > > & & " \"
¿ ¿ ¡ ¡ á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ü ü Ü Ü &nbs; Espacio en blanco<br />Tutorial HTML BASICO [MEGAPOST]<br />Anuncios Google<br />Experto en excelwww.bsgrupo.com - Programa tablas dinamicas, macros y gráficos.Inicio Lima 26 Setiembre<br />Construir un Sitio Webwww.Wix.com/Constructor-Sitios-Web - Diseña tu Sitio Web Gratis Editor de Web Rápido Fácil y Gratis<br />Impresoras Zebrawww.lineadatascan.com - Código de Barras y RFID Transferencia Térmica o Directa<br />The Exxel Groupwww.exxelgroup.com - Record investment in South America<br />QUÉ ES HTML<br />HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape). <br />CÓMO ESPECIFICAR EFECTOS DEL TEXTO<br />La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí> (más adelante ya veremos la directiva concreta que se utiliza). A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: <efecto parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes: </efecto>. Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce. <br />ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML<br />Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento. La única utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado: <title>Manual práctico de HTML</title> en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento. El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo: Estas palabras forman una frase. producimos exactamente lo mismo que con: Estas palabras forman una frase. A la hora de la verdad lo que se ve es: Estas palabras forman una frase. En resumen, la estructura básica de un documento HTML queda de la forma siguiente: <html> <head> <title>Título</title> </head> <body> Texto del documento, menciones a gráficos, enlaces, etc. </body> </html> <br />ESTILOS Y EFECTOS BÁSICOS<br />Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado. <br />TÍTULOS<br />Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica. <h1>Mucha importancia</h1> Mucha importancia <h2>Menos importancia</h2> Menos importancia <h3>Mucha menos importancia</h3> Mucha menos importancia <br />ATRIBUTOS DEL TEXTO<br />Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo: Este será un texto normal (párrafo 1, línea 1).<br> El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p> Este ya es el segundo párrafo (párrafo 2, línea 1).<p> Este será un texto normal (párrafo 1, línea 1). El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). Este ya es el segundo párrafo (párrafo 2, línea 1). Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal. El texto preformateado (etiqueta <pre> se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla: <pre> Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- </pre> Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>: <blockquote>Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.<br> (Gabriel García Márquez, Cien años de soledad)</blockquote> Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. (Gabriel García Márquez, Cien años de soledad) Las direcciones de correo electrónico se suelen marcar con esta directiva: <address>Dirección: webmaster@etsit.upm.es</address> Dirección: webmaster@etsit.upm.es Se pueden dar también los atributos más tradicionales: negrita y cursiva: <b>Esto en negrita</b> y <i>esto en cursiva</i> Esto en negrita y esto en cursiva Se puede utilizar un tipo de letra similar al de una máquina de escribir: <tt>Máquina de escribir</tt> Máquina de escribir Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>: <center>Verde que te quiero verde</center> Verde que te quiero verde <br />LISTAS<br />Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo. Esto es una lista no numerada: <ul> <li>Tomates <li>Zanahorias <li>Puerros </ul> * Tomates * Zanahorias * Puerros Esto una lista numerada: <ol> <li>Miguel Induráin <li>Tony Rominger <li>Eugeni Berzin </ol> 1. Miguel Induráin 2. Tony Rominger <br />3. Eugeni Berzin Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>. Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera: <dl> <dt>Perro (<i>n. masc.</i> <dd>Animal de cuatro patas que ladra. <dt>Gato (<i>n. masc.</i> <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <dt>Pescadilla (<i>n. fem.</i> <dd>Animal que vive en el mar y está recubierto de escamas. </dl> Perro (n. masc.) Animal de cuatro patas que ladra. Gato (n. masc.) Animal de cuatro patas que maúlla y se lleva muy mal con el perro. Pescadilla (n. fem.) Animal que vive en el mar y está recubierto de escamas. VARIOS La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones: <hr> Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser: <!-- Modificado por Álvaro el viernes 2 de junio --> ENLACES Y GRÁFICOS INTRODUCCIÓN Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento. Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica. QUÉ ES UN URL Para especificar de manera uniforme el objeto al que apunta nuestro enlace, se utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta (en realidad, como se verá dentro de un momento, la barra / puede considerarse parte de la ruta). El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del enlace. La razón de esta aparente complicación es que el WWW pretende unificar el acceso a servicios de información que previamente eran incompatibles entre sí, como ftp, gopher o telnet. El esquema más utilizado es http, correspondiente al propio WWW (es decir, que cualquier referencia a un documento HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet, gopher o wais. La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000). La ruta es el nombre del fichero que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra. Los diferentes nombres que constituyan la ruta completa al archivo se deben separar con la barra / (inclinada hacia la derecha), tal y como se hace en el sistema operativo UNIX (y al revés que en MS-DOS). La razón de este convenio es precisamente que la mayor parte de los servidores de WWW que hay en Internet son ordenadores basados en UNIX, debido a la gran superioridad tecnológica de este sistema sobre MS-DOS. Esto se nota también en que por lo general los nombres de los ficheros no tienen muchas limitaciones: pueden ser casi tan largos como queramos, contener varios puntos, etc. Por ejemplo, el nombre de cierto fichero situado en un servidor podría ser /info/documentos/ciencia/fisica/relatividad.html. Debemos tener en cuenta que en UNIX las mayúsculas y las minúsculas son distintas en los nombres de los ficheros: no es igual FICHERO que fichero. Conviene que nos detengamos momentáneamente en la estructuración habitual de los ficheros en un servidor de WWW. Para empezar, siempre hay una página de bienvenida (home page) que podría compararse con la portada de un periódico o revista: si no sabemos exactamente qué es lo que buscamos, o no sabemos dónde encontrarlo, la portada es lo primero que vemos. Para acceder a la home page de cualquier servidor de WWW, basta con escribir una barra en el lugar de la ruta (es decir, reclamamos al servidor el directorio raíz). Por ejemplo, para acceder a la página de bienvenida de la ETSIT, hay que dirigirse a http://www.etsit.upm.es/, y para ir a la de la NASA habría que contactar con http://www.nasa.gov/. El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese directorio raíz en distintos subdirectorios y archivos. Un convenio muy habitual relativo al nombre de los ficheros es hacer que los archivos que contengan documentos HTML terminen en .html. <br />ENLACES<br />Con lo que ya hemos dicho, podemos abordar sin problemas el asunto que originalmente nos ocupaba: cómo se introducen enlaces en un documento HTML. Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href=\"
URL\"
para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href=\"
URL\"
>, y después cerrar con </a>. Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML: <a href=\"
http://www.nasa.gov/\"
>Pulse aquí para visitar a la NASA</a> Lo cual producirá el resultado: Pulse aquí para visitar la NASA Por lo general no nos preocupa irnos tan lejos, sino sencillamente enlazar con otro documento que se encuentra en el mismo servidor, puede que incluso que en el mismo subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace, sino que basta con dar la mínima información imprescindible. El programa que se use para leer el documento final suele ser lo bastante listo como para deducir el resto. Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre: <a href=\"
el_otro_fichero\"
>pulse aquí</a>. O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a href=\"
/la/ruta/que/sea/fichero.html\"
>pulse aquí</a>. También pueden utilizarse rutas relativas: <a href=\"
ruta/relativa/cosa.html\"
>cosa</a>. <br />GRÁFICOS<br />Para incluir un gráfico en un documento HTML se utiliza la directiva <img>. En dicha directiva debe incluirse un parámetro src=\"
URL\"
, con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia. Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. El formato fundamental es el GIF, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto (Mosaic y Netscape pueden hacerlo). Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente. Hay un parámetro optativo de la directiva <img> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt=\"
texto\"
. Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos. Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos: <img src=\"
monigote.gif\"
alt=\"
MONIGOTE\"
><p> Lo que se traduce en: <br />MONIGOTE<br />Como se ve, hemos especificado el texto alternativo \"
MONIGOTE\"
, con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo. Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo: <img src=\"
http://naic.nasa.gov/images/nasa-logo.gif\"
><p> Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <a>. En este caso no debemos olvidar utilizar la opción alt=\"
texto\"
para que todos los usuarios puedan seguir el enlace: <a href=\"
http://www.nasa.gov/\"
><img src=\"
http://naic.nasa.gov/images/nasa-logo.gif\"
alt=\"
NASA\"
></a><p> NASA <br />CARACTERES ESPECIALES<br />Durante todo este manual hemos hecho una pequeña trampa a la hora de explicar las directivas y poner ejemplos, para facilitar la comprensión de las ideas fundamentales sobre HTML. Dicha trampa ha consistido en ocultar ciertas exigencias de HTML respecto al uso de caracteres especiales, denominación que, para nuestra desgracia como hispanohablantes, incluye a las vocales acentuadas y a la letra eñe. Existen también ciertas limitaciones relativas al uso de ciertos símbolos que significan algo en HTML, como el de menor que (< o el signo inglés de and (llamado ampersand: &. Trataremos primero el caso más sencillo. Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso <. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación: * < (Menor que): < * > (Mayor que): > * & (símbolo de and, o ampersand): & * \"
(comillas dobles): " Es decir, que para escribir <\"
> en nuestro texto HTML original debemos poner <">. El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en nuestro idioma son: * á: á * é: é * í: í * ó: ó * ú: ú * Á: Á * É: É * Í: Í * Ó: Ó * Ú: Ú * ü: ü * Ü: Ü * ñ: ñ * Ñ: Ñ * ¿: ¿ * ¡: ¡ Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin acentuar (puesto que se trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene, respectivamente. La equivalencia de los signos de abrir interrogación y exclamación es algo más oscura: a falta de una denominación más evidente, tenemos que usar el valor numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede hacer con cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo &#numero;. La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es absolutamente recomendable respetar la norma especificada en HTML. En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos sin preocuparse por estos problemas, y luego traducir a HTML correcto. Al final de este manual encontrará un enlace a un programita en C que hace precisamente eso. Volviendo al reconocimiento de culpa que antes de hizo por haber ocultado estos detallitos, debemos decir que muchos de los ejemplos que antes se pusieron no eran totalmente correctos. Por ejemplo, cuando se escribió: <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. En realidad debería haberse puesto: <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. Y en lugar de: <a href=\"
http://www.nasa.gov/\"
>Pulse aquí para visitar a la NASA</a> Debería haberse escrito: <a href=\"
http://www.nasa.gov/\"
>Pulse aquí para visitar a la NASA</a> Espero que mi Tutorial de HTML Os halla servido. y ahora para que os ayude un poco os voy a agregar una paleta de colores HTML para editar colores etc...<br />](https://image.slidesharecdn.com/htmlbasicccccccoooooooooooooo-110916024445-phpapp01/85/Html-basicccccccoooooooooooooo-1-320.jpg)
Html basicccccccoooooooooooooo
- 1. ¿Que es HTML? Una buena pregunta eh?, bueno pues HTLM son las iniciales de Hiper Text Markup Languaje. Pues eso, en definitiva es un lenguaje de programación, mas o menos standard que se usa para que podamos crear documentos que se puedan ver con cualquier navegador. Los programas HTLM, están hechos con texto plano, sólo contienen números y letras, pero ojo, no todos los caracteres son válidos, algunos carácteres son especiales y debemos insertar su código, por ejemplo las minúsculas acentuadas . Para decirle al navegador que nos muestre una a acentuada debemos teclear á y el resultado sería á, la e acentuada é, y así el resto de vocales. Más adelante incluire una tabla con los códigos especiales, pero de momento esto nos sirve. Lo que si hay que tener en cuenta es que los códigos de marcado del lenguaje HTML, no son puntillosos y no distinguen entre mayúsculas y minúsculas. Con lo que si hay que tener cuidado es con las llamadas externas, y sobre todo con nombres de ficheros. Con los maravillosos sistemas operativos que tienen ahora nuestros ordenadores, podemos poner nombres larguisimos a nuestros ficheros, y además pueden contener espacios. Por cuestiones de portabilidad, yo seguiría con los nombres cortitos, y si tengo que separar palabras, nunca useis un blanco, es mejor un guión, y apañado. Además, donde si hay que tener cuidado por que si distingue mayúsculas y minúsculas es en los nombres de los ficheros, para el no es lo mismo PEPE que Pepe que pepe, serían tres ficheros distintos, así que cuidado con esto, luego no digaís que no os he avisado. ESTRUCTURA DE UNA PAGINA Bueno, esto ya se empieza a poner interesante. Vamos a empezar a escribir nuestro primer código HTML. Lo primero que hay que saber es que todo documento HTML debe empezar y acabar por las etiquetas <HTML> y </HTML> respectivamente. Como veís empezamos a utilizar este lenguaje. Todas las etiquetas van entre <>. Además la gran mayoría de las etiquetas van emparejadas y para distinguir entre la etiqueta de inicio y de fin, se le pone / a la etiqueta de fin. Fácil no?. Todos los documentos HTML tienen dos partes, el encabezado y el cuerpo, de perogrullo no?. Pues hasta para esto hay que poner etiqueta, y cuales son? . Para el encabezado la etiqueta es <HEAD> y </HEAD> En esta sección se pone la información de la página y poco más. Aquí es donde pónemos el título de nuestra página, para que todo el mundo nos conozca. El título irá entre las etiquetas <TITLE> y </TITLE> lo que pongamos aqui, aparecera en la parte izquierda de la línea superior de la ventana. Ya esta, manos a la obra vamos a empezar a diseñar nuestra primera página. Cogemos cualquier procesador, y acordaros de que se debe salvar como texto normal. <HEAD> <TITLE>Mi pagina Web</TITLE> </HEAD> Y ahora vamos con la parte importante, el cuerpo del documento, donde vamos a insertar nuestro texto, imagenes, hiperenlaces, scrips ......... el cuerpo también tiene su etiqueta, que como no podia ser de otra manera son <BODY> y </BODY> y entre medias que?. Nuestra página WEB como todos los documentos, necesita un encabezamiento, algo que llame la atención y que defina el resto de la página. Podemos definir hasta 6 tamaños de encabezados, y esto se hace con las etiquetas <H1> a <H6> teniendo en cuenta que el número 1 define el tamaño de letra más grande y el 6 define el más pequeño. Seguimos diseñando la página: <BODY> <H1>BIENVENIDO A MI PAGINA PERSONAL</H1> </BODY> Bienvenido a mi página personal (H1) Bienvenido a mi página personal (H2) Bienvenido a mi página personal (H3) Bienvenido a mi página personal (H4) Bienvenido a mi página personal (H5) Bienvenido a mi página personal (H6) <br />PARRAFOS Y ahora que, ya tenemos el encabezado de nuestra página, pero se puede mejorar el aspecto, alineando el parrafo. Lo normal es que todos queramos poner el encabezado en el centro de la página. Esto se logra con la etiqueta <CENTER> </CENTER>. Esta etiqueta también es válida para gráficos, pero lo veremos mas adelante. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> </BODY> BIENVENIDO A MI PAGINA PERSONAL (H2) Los párrafos van entre las etiquetas <P> y </P>, y los podemos alinear a la izquierda, a la derecha y como ya hemos visto, centrarlos, pero vamos a seguir con nuestra página, introduciendo el comando ALIGN. <BODY> <CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER> <P ALIGN=\" LEFT\" > Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinea a la izquierda. </P> <P ALIGN=\" RIGTH\" > Pero esta línea quiero que salga a la derecha</P> <P ALIGN=\" CENTER\" > Toma ya y ahora en el centro</P> </BODY> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinie a la izquierda Pero esta línea quiero que salga a la derecha Toma ya y ahora en el centro. Habeís visto las posibilidades de alineamiento del parrafo, pues hay más. Si lo que queremos es sangrar un párrafo, debemos escribir entre las etiquetas <BLOCKQUOTE> Y </BLOCKQUOTE>. FORMATOS Pues visto lo anterior, seguimos dando forma a nuestra página, ahora vamos a ver como darle formato a nuestro texto. Lo primero que vamos a ver es como modificar el tamaño de la letra, esto se hace con el comando <FONT> </FONT>, en unión con el modificador SIZE. Hay varias maneras de modificar el tamaño de la fuente. En primer lugar podemos hacer referencia al tamaño absoluto de la fuente. Los tamaños absolutos varían entre el 1 y el 7, siendo 7 el mas grande, y 1 el mas pequeño. La segunda manera de realizar la modificación, es hacer referencia al tamaño relativo de la fuente, es decir restando o incrementando el tamaño actual de la fuente en la cantidad especificada. Este modificador puede varíar entre -4 y +4. Pero como mejor se ve esto es continuando con nuestra página. <P><FONT SIZE=\" 3\" >Esta línea está escrita con tamaño 3</FONT></P> Esta línea esta escrita con tamaño 3 <P><FONT SIZE=\" 5\" >Esta línea está escrita con tamaño 5</FONT></P> Esta línea esta escrita con tamaño 5 <P><FONT SIZE=\" -3\" >Esta línea está escrita con tamaño -3</FONT></P> Esta línea esta escrita con tamaño relativo -3 Cómo vemos en el último ejemplo, el resultado es el mismo que si aplicamos <FONT SIZE=\" 2\" >, resultado que restarle 3 unidades al último tamaño definido de fuente, en nuestro ejemplo 5. Visto todo lo anterior, sólo queda por decir que es posible determinar cual es el tamaño base de la fuente con la que vamos a escribir nuestro documento HTML, para ello usamos la etiqueta <BASEFONT SIZE=tamaño>, escrito justo a continuación de la etiqueta <BODY>. ESTILOS Para resaltar partes del texto que estamos escribiendo, podemos utilizar negritas, cursivas, etc. Las etiquetas mas comúnes que podemos usar aparecen en la siguiente tabla Estilo Etiqueta Negrita <B> </B> Negrita Cursiva <I> </I> Cursiva Subrayado <U> </U> Subrayado Cita <CITE> </CITE> Cita Código <CODE> </CODE> Código Enfasis <EM></EM> Enfasis Fuerte <STRONG> </STRONG> Fuerte Teletipo <TT> </TT> Teletipo Tachado <STRIKE< </STRIKE> Tachado Subíndice <SUB> </SUB> Subíndice Superíndice <SUP> </SUP> Superíndice Grande <BIG> </BIG> Grande Pequeño <SMALL> </SMALL> Pequeño <P><B>Esto se va a escribir en negrita</B></P> LINEAS HORIZONTALES A veces vamos a necesitar separar las distintas secciones de nuestro documento HTML, una forma sencilla de hacerlo, es insertar líneas horizontales. Esto se consigue con la etiqueta <HR>. Esta etiqueta no lleva su pareja de cierre, es individual, por defecto traza una línea de todo el ancho de la pantalla, no obstante se puede modificar el aspecto de las líneas añadiendo los siguientes parámetros: SIZE = Indica el grosor en pixel de la línea WIDTH = Especifica la anchura que la línea ocupa en la pantalla, se le puede especificar en pixels o en porcentaje. ALIGN= Alineación de la línea NOSHADE = Si queremos la línea con sombra o sin sombra. Pero todo esto se ve mejor con un ejemplo: <HR SIZE=\" 5\" WIDTH=\" 50%\" ALIGN=\" LEFT\" NOSHADE=\" NOSHADE\" > El resultado es una línea de grosor 5 pixel un 50% de la pantalla alineada a la izquierda sin sombra, es decir: ENLACES La verdadera potencia de internet nos la da la posibilidad de enlazar todas las páginas como si de una tela de araña se tratase, una página sin enlaces no tiene demasiado sentido, asi que vamos a ver de forma muy breve como insertar enlaces dentro de nuestro documento. Los enlaces nos pueden llevar a otro documento o bien a otra sección dentro del documento editado. Este documento de tutorial, esta repleto de enlaces a la misma página, como habeís podido ver, desde el índice que está al principio de este documento, se accede a las secciones directamente, igualmente de cada una de las secciones, se accede al índice. Además, este documento tiene enlaces externos, como vereis en la parte inferior de la pantalla, hay un enlace a la página principal de mi site y hay otro enlace a Por cierto si os gusta leer y escuchar música, pinchar en este enlace, podreis adquirir los mejores libros y la mejor música de internet, y además así colaborareis a que pueda seguir manteniendo este tutorial. Bueno, y ahora manos a la obra que es lo que nos interesa, vamos a generarnos un enlace a uno de los buscadores mas conocidos YAHOO <A HREF=\" http://YAHOO.COM\" >Buscar en YAHOO</A> Buscar en YAHOO Ahora lo vamos a complicar un poco más y vamos a poner un gráfico como el del ejemplo anterior. <P ALIGN=\" CENTER\" ><A HREF=\" http://armazon.com\" ><IMG SRC=\" armazon.gif\" ></A></P> Bien no, es mucho más fácil de lo que parece.Como veis Hemos realizado dos enlaces a otras páginas pero con el mismo formato podemos acceder a otros muchos servicios de internet, podemos realizar enlace tipo ftp, correo electronico, etc. Vamos a ver como añadir un enlace de correo: <A HREF=\" mailto:f_casa@yahoo.com\" >Mandame un correo</A> Mándame un correo Para agregar enlaces a marcadores dentro de la página actual, o dentro de otra página, lo primero que hay que definir es el marcador, esto se hace de la siguiente manera: <A NAME=\" Nombre del marcador\" >Texto del marcador </A> Texto del marcador El enlace al marcador anterior se definiría: <A HREF=\" #Nombre del marcador\" >Enlace al marcador anterior</A> Cómo véis se incluye el símbolo \" #\" antes del nombre del marcador Enlace al marcador anterior Tambien se pueden hacer llamadas a marcadores definidos en otras páginas: <A HREF=\" index.html#Nombre del marcador\" >Enlace al marcador de la página index.html</A> DAR COLOR A LA PAGINA Hasta ahora hemos visto todo lo necesario para realizar nuestra primera página WEB, pero ahora, vamos a darle un poco de vidilla, ya que una pagina con letra negra sobre fondo blanco, queda un poco sosa, asi que vamos a modificar los colores tanto del fondo como de las letras, e incluso vamos a poder insertar un gráfico como fondo de nuestra página. Para modificar los colores de fondo del documento debemos añadir a la etiqueta de cuerpo de documento <BODY> el parámetro BGCOLOR=\" #RRGGBB\" donde #RRGGBB indica la combinacion de tonos de rojo, verde y azul necesarios para conseguir el color que deseamos. No obstante HTML reconoce 16 colores simples black, gray, maroon, purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua, blue y fuchsia con nombre y apellidos, así que para poner un fondo azul, bastará con poner <BODY BGCOLOR=\" BLUE\" > sin más. Si lo queremos complicar más, necesitamos saber el número en hexadecimal que define el color que queremos y lo ponemos en la etiqueta bgcolor, el color rojo sin ir mas lejos sería #FF0000. Para definir el color del texto, utilizaremos el parámetro TEXT=\" #RRGGBB\" . Para definir el color de los enlaces no vilistados, LINK=\" #RRGGBB\" , para los enlaces visitados VLINK=\" #RRGGBB\" , para los enlaces en los que se haga click ALINK=\" #RRGGBB\" . Para insertar una imagen de fondo, usamos el parámetro BACKGROUND=\" imagenfondo.gif\" . Los formatos de ficheros más utilizados son el gif y jpg. Cabe reseñar que el fichero debe estar en el mismo directorio que el documento HTML que lo llama, en caso contrario se debe especifivar el PATH a dicho fichero gráfico. Y OJO, ya dije anteriormente que aunque en el código HTML da igual escribir las etiquetas en mayúsculas o minúsculas, cuando se hace una llamada a un fichero, enlace, etc... Si existen diferencias, con lo cual para evitar problemas, escribimos todo en minúsculas. INSERTAR IMAGENES Y como todo documento que se precie debe tener imagenes, vamos a insertarlas de una manera facilísima, esto se hace con el comando <IMG SRC=\" Nombre de la imagen\" >. Si además queremos especificar el tamaño <IMG SRC=\" Nombre de la imagen\" HEIGHT=\" n\" WITDH=\" n\" > siendo n el tamaño en pixels de la imagen. Si a esto le añadimos todo lo que hemos visto anteriormente, podemos alinear la imagen, incluirla en un enlace a otras páginas, etc etc. <P ALIGN=\" CENTER\" ><A HREF=\" http://armazon.com\" ><IMG SRC=\" armazon.gif\" ></A></P> Ahora entendemos mucho mejor el ejemplo anterior LISTAS Este es uno de los elementos mas útiles para nuestros documentos HTML, ya que nos permite esquematizar de una forma clara la información contenida en nuestro documento. Una lista es una sucesion de elementos que pertenecen a una estructura común y que es posible numerarlo, sin darle muchas más vueltas, el índice de esta página esta realizado con una lista. Hay diferentes tipos de listas, sin orden con orden, numeradas, alfabeticas, etc.... Es bastante común que vayan precedidos de bolos o números para diferenciar una línea de otra. Para crear una lista ordenada, se usan las etiquetas <OL> y </OL>, y a cada elemento se le incluye entre las etiquetas <L1> y </L1> pe. <OL> <LI>INTRODUCCION</LI> <LI>QUE ES HTML?</LI> </OL> El resultado es como sigue: INTRODUCCION QUE ES HTML? Las listas sin orden, preceden a las líneas por un bolo, y es igual que el ejemplo anterior, sustituyendo <OL> por <UL> Los elementos de las listas pueden ser a su vez listas <OL> <LI>Estructura de un documento HTML</LI> <UL> <LI> Encabezado </LI> <LI> Cuerpo </LI> </UL> </OL> Estructura de un documento HTML Encabezado Cuerpo Para las listas ordenadas, también podemos usar los parámetros TYPE y START, para definir el tipo de numeración que deseamos y en que número empezar, los tipos són AaIi, para las numeraciones Alfabéticas, Alfabéticas minúsculas, Romanas y Romano minúsculas respectivamente. pe. <OL TYPE=A START=3>, El primer elemento numerado de la lista será la C CARACTERES ESPECIALES Código Cáracter especial < < > > & & " \" ¿ ¿ ¡ ¡ á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ü ü Ü Ü &nbs; Espacio en blanco<br />Tutorial HTML BASICO [MEGAPOST]<br />Anuncios Google<br />Experto en excelwww.bsgrupo.com - Programa tablas dinamicas, macros y gráficos.Inicio Lima 26 Setiembre<br />Construir un Sitio Webwww.Wix.com/Constructor-Sitios-Web - Diseña tu Sitio Web Gratis Editor de Web Rápido Fácil y Gratis<br />Impresoras Zebrawww.lineadatascan.com - Código de Barras y RFID Transferencia Térmica o Directa<br />The Exxel Groupwww.exxelgroup.com - Record investment in South America<br />QUÉ ES HTML<br />HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape). <br />CÓMO ESPECIFICAR EFECTOS DEL TEXTO<br />La mayoría de los efectos se especifican de la misma forma: rodeando el texto que se quiere marcar entre dos etiquetas o directivas (tags, en inglés), que definen el efecto o unidad lógica que se desea. Las etiquetas están formadas por determinados códigos metidos entre los signos < y >, y con la barra / cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Ciertas directivas sólo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto. Esto es lo que ocurre, por ejemplo, cuando queremos poner un gráfico, caso en el que se usa algo parecido a <poner_gráfico_aquí> (más adelante ya veremos la directiva concreta que se utiliza). A veces es necesario ofrecer datos adicionales en una directiva. Por ejemplo, cuando se define un hiperenlace hay que especificar su destino. Para ello se incluyen parámetros en la directiva inicial (la de apertura), de la siguiente forma: <efecto parametro1 parametro2 ...>. La directiva de cierre, caso de ser necesaria, queda como antes: </efecto>. Más adelante en el presente documento se muestra el efecto de las directivas más usadas en la creación de un documento HTML. Para cada una de ellas, primero se muestra el texto fuente, y bajo éste, el efecto que produce. <br />ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML<br />Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento. La única utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado: <title>Manual práctico de HTML</title> en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento. El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo: Estas palabras forman una frase. producimos exactamente lo mismo que con: Estas palabras forman una frase. A la hora de la verdad lo que se ve es: Estas palabras forman una frase. En resumen, la estructura básica de un documento HTML queda de la forma siguiente: <html> <head> <title>Título</title> </head> <body> Texto del documento, menciones a gráficos, enlaces, etc. </body> </html> <br />ESTILOS Y EFECTOS BÁSICOS<br />Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado. <br />TÍTULOS<br />Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica. <h1>Mucha importancia</h1> Mucha importancia <h2>Menos importancia</h2> Menos importancia <h3>Mucha menos importancia</h3> Mucha menos importancia <br />ATRIBUTOS DEL TEXTO<br />Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo: Este será un texto normal (párrafo 1, línea 1).<br> El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p> Este ya es el segundo párrafo (párrafo 2, línea 1).<p> Este será un texto normal (párrafo 1, línea 1). El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). Este ya es el segundo párrafo (párrafo 2, línea 1). Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal. El texto preformateado (etiqueta <pre> se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla: <pre> Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- </pre> Texto preformateado --------------------- | 1 | 2 | 3 | 4 | | 5 | 6 | 7 | 8 | | 9 | 10 | 11 | 12 | --------------------- Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>: <blockquote>Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.<br> (Gabriel García Márquez, Cien años de soledad)</blockquote> Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. (Gabriel García Márquez, Cien años de soledad) Las direcciones de correo electrónico se suelen marcar con esta directiva: <address>Dirección: webmaster@etsit.upm.es</address> Dirección: webmaster@etsit.upm.es Se pueden dar también los atributos más tradicionales: negrita y cursiva: <b>Esto en negrita</b> y <i>esto en cursiva</i> Esto en negrita y esto en cursiva Se puede utilizar un tipo de letra similar al de una máquina de escribir: <tt>Máquina de escribir</tt> Máquina de escribir Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>: <center>Verde que te quiero verde</center> Verde que te quiero verde <br />LISTAS<br />Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo. Esto es una lista no numerada: <ul> <li>Tomates <li>Zanahorias <li>Puerros </ul> * Tomates * Zanahorias * Puerros Esto una lista numerada: <ol> <li>Miguel Induráin <li>Tony Rominger <li>Eugeni Berzin </ol> 1. Miguel Induráin 2. Tony Rominger <br />3. Eugeni Berzin Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>. Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera: <dl> <dt>Perro (<i>n. masc.</i> <dd>Animal de cuatro patas que ladra. <dt>Gato (<i>n. masc.</i> <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <dt>Pescadilla (<i>n. fem.</i> <dd>Animal que vive en el mar y está recubierto de escamas. </dl> Perro (n. masc.) Animal de cuatro patas que ladra. Gato (n. masc.) Animal de cuatro patas que maúlla y se lleva muy mal con el perro. Pescadilla (n. fem.) Animal que vive en el mar y está recubierto de escamas. VARIOS La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones: <hr> Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser: <!-- Modificado por Álvaro el viernes 2 de junio --> ENLACES Y GRÁFICOS INTRODUCCIÓN Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento. Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica. QUÉ ES UN URL Para especificar de manera uniforme el objeto al que apunta nuestro enlace, se utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta (en realidad, como se verá dentro de un momento, la barra / puede considerarse parte de la ruta). El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del enlace. La razón de esta aparente complicación es que el WWW pretende unificar el acceso a servicios de información que previamente eran incompatibles entre sí, como ftp, gopher o telnet. El esquema más utilizado es http, correspondiente al propio WWW (es decir, que cualquier referencia a un documento HTML debería comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet, gopher o wais. La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000). La ruta es el nombre del fichero que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra. Los diferentes nombres que constituyan la ruta completa al archivo se deben separar con la barra / (inclinada hacia la derecha), tal y como se hace en el sistema operativo UNIX (y al revés que en MS-DOS). La razón de este convenio es precisamente que la mayor parte de los servidores de WWW que hay en Internet son ordenadores basados en UNIX, debido a la gran superioridad tecnológica de este sistema sobre MS-DOS. Esto se nota también en que por lo general los nombres de los ficheros no tienen muchas limitaciones: pueden ser casi tan largos como queramos, contener varios puntos, etc. Por ejemplo, el nombre de cierto fichero situado en un servidor podría ser /info/documentos/ciencia/fisica/relatividad.html. Debemos tener en cuenta que en UNIX las mayúsculas y las minúsculas son distintas en los nombres de los ficheros: no es igual FICHERO que fichero. Conviene que nos detengamos momentáneamente en la estructuración habitual de los ficheros en un servidor de WWW. Para empezar, siempre hay una página de bienvenida (home page) que podría compararse con la portada de un periódico o revista: si no sabemos exactamente qué es lo que buscamos, o no sabemos dónde encontrarlo, la portada es lo primero que vemos. Para acceder a la home page de cualquier servidor de WWW, basta con escribir una barra en el lugar de la ruta (es decir, reclamamos al servidor el directorio raíz). Por ejemplo, para acceder a la página de bienvenida de la ETSIT, hay que dirigirse a http://www.etsit.upm.es/, y para ir a la de la NASA habría que contactar con http://www.nasa.gov/. El resto de la información que se puede encontrar en un servidor de WWW se distribuye a partir de ese directorio raíz en distintos subdirectorios y archivos. Un convenio muy habitual relativo al nombre de los ficheros es hacer que los archivos que contengan documentos HTML terminen en .html. <br />ENLACES<br />Con lo que ya hemos dicho, podemos abordar sin problemas el asunto que originalmente nos ocupaba: cómo se introducen enlaces en un documento HTML. Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href=\" URL\" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href=\" URL\" >, y después cerrar con </a>. Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML: <a href=\" http://www.nasa.gov/\" >Pulse aquí para visitar a la NASA</a> Lo cual producirá el resultado: Pulse aquí para visitar la NASA Por lo general no nos preocupa irnos tan lejos, sino sencillamente enlazar con otro documento que se encuentra en el mismo servidor, puede que incluso que en el mismo subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace, sino que basta con dar la mínima información imprescindible. El programa que se use para leer el documento final suele ser lo bastante listo como para deducir el resto. Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre: <a href=\" el_otro_fichero\" >pulse aquí</a>. O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a href=\" /la/ruta/que/sea/fichero.html\" >pulse aquí</a>. También pueden utilizarse rutas relativas: <a href=\" ruta/relativa/cosa.html\" >cosa</a>. <br />GRÁFICOS<br />Para incluir un gráfico en un documento HTML se utiliza la directiva <img>. En dicha directiva debe incluirse un parámetro src=\" URL\" , con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia. Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. El formato fundamental es el GIF, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto (Mosaic y Netscape pueden hacerlo). Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente. Hay un parámetro optativo de la directiva <img> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt=\" texto\" . Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos. Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos: <img src=\" monigote.gif\" alt=\" MONIGOTE\" ><p> Lo que se traduce en: <br />MONIGOTE<br />Como se ve, hemos especificado el texto alternativo \" MONIGOTE\" , con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo. Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo: <img src=\" http://naic.nasa.gov/images/nasa-logo.gif\" ><p> Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <a>. En este caso no debemos olvidar utilizar la opción alt=\" texto\" para que todos los usuarios puedan seguir el enlace: <a href=\" http://www.nasa.gov/\" ><img src=\" http://naic.nasa.gov/images/nasa-logo.gif\" alt=\" NASA\" ></a><p> NASA <br />CARACTERES ESPECIALES<br />Durante todo este manual hemos hecho una pequeña trampa a la hora de explicar las directivas y poner ejemplos, para facilitar la comprensión de las ideas fundamentales sobre HTML. Dicha trampa ha consistido en ocultar ciertas exigencias de HTML respecto al uso de caracteres especiales, denominación que, para nuestra desgracia como hispanohablantes, incluye a las vocales acentuadas y a la letra eñe. Existen también ciertas limitaciones relativas al uso de ciertos símbolos que significan algo en HTML, como el de menor que (< o el signo inglés de and (llamado ampersand: &. Trataremos primero el caso más sencillo. Existe una razón evidente que impide que podamos escribir ciertos símbolos directamente en un texto HTML, como por ejemplo el <: dichos símbolos tienen un significado en HTML, y es necesario diferenciar claramente cuándo poseen ese significado y cuándo queremos que aparezcan literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo escribiendo algo que no de lugar a confusión, en este caso <. Los símbolos afectados por esta limitación, y la forma de escribirlos, se detallan a continuación: * < (Menor que): < * > (Mayor que): > * & (símbolo de and, o ampersand): & * \" (comillas dobles): " Es decir, que para escribir <\" > en nuestro texto HTML original debemos poner <">. El otro caso especial se da cuando en un texto HTML se quiere escribir una eñe, por ejemplo. Existen dos formas de hacerlo. La primera, que es a la que obliga el estándar de HTML, consiste en utilizar entidades, es decir, palabrejas como las que antes se presentaron para escribir ciertos símbolos. Las entidades comienzan siempre con el símbolo &, y terminan con un punto y coma (. Entre medias va un identificador del carácter que queremos que se escriba. Las entidades necesarias en nuestro idioma son: * á: á * é: é * í: í * ó: ó * ú: ú * Á: Á * É: É * Í: Í * Ó: Ó * Ú: Ú * ü: ü * Ü: Ü * ñ: ñ * Ñ: Ñ * ¿: ¿ * ¡: ¡ Como puede verse, las vocales acentuadas se identifican añadiendo el sufijo acute a la vocal sin acentuar (puesto que se trata de un acento agudo). Para la u con diéresis y la eñe se usan uml tras una u y tilde detrás una ene, respectivamente. La equivalencia de los signos de abrir interrogación y exclamación es algo más oscura: a falta de una denominación más evidente, tenemos que usar el valor numérico de dichos caracteres en el código estándar latin1 (ISO-8859-1). Esto se puede hacer con cualquier otro carácter del código latin1, que es el código de caracteres básico en HTML, escribiendo &#numero;. La segunda manera, que sin duda es más cómoda, consiste en no preocuparse por esta limitación y escribir literalmente los caracteres afectados. A pesar de que este método suele funcionar en las conexiones WWW directas (porque el protocolo HTTP, que transporta el HTML por los vericuetos de Internet, requiere un canal de 8 bits), no tiene por qué funcionar bien cuando los documentos HTML se envían por correo electrónico, por ejemplo. Por tanto, y a pesar de los inconvenientes, es absolutamente recomendable respetar la norma especificada en HTML. En cualquier caso, no resulta muy complicado escribir un programa que traduzca todas las apariciones de los caracteres especiales por sus correspondientes entidades HTML, o viceversa. Con un programa así, uno puede escribir los documentos sin preocuparse por estos problemas, y luego traducir a HTML correcto. Al final de este manual encontrará un enlace a un programita en C que hace precisamente eso. Volviendo al reconocimiento de culpa que antes de hizo por haber ocultado estos detallitos, debemos decir que muchos de los ejemplos que antes se pusieron no eran totalmente correctos. Por ejemplo, cuando se escribió: <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. En realidad debería haberse puesto: <dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. Y en lugar de: <a href=\" http://www.nasa.gov/\" >Pulse aquí para visitar a la NASA</a> Debería haberse escrito: <a href=\" http://www.nasa.gov/\" >Pulse aquí para visitar a la NASA</a> Espero que mi Tutorial de HTML Os halla servido. y ahora para que os ayude un poco os voy a agregar una paleta de colores HTML para editar colores etc...<br />