Manual de HTML - Martín Maglio
Anuncio
Manual HTML Básico MANUAL HTML BÁSICO Federico Martín Maglio Para construir una página con el fin de publicarla en Internet, debemos aprender el lenguaje HTML (HyperText Markup Language). Se dirá que es muy fácil construir páginas WEB hoy en día con los programas que se encuentran a disposición de todos. Pero si bien esto es cierto, es necesario conocer lo mínimo del HTML porque siempre se nos presenta la situación de que el resultado final, logrado con programas que generan el código automáticamente, no es el esperado. En tal situación se hace necesario retocar el código manualmente con un procesador de texto puro como el Block de Notas que viene con Windows. Para poder hacerlo no hay otra salida que conocerlo. El HTML se basa en “etiquetar” lo que se quiere mostrar en la página; estas etiquetas le dicen al programa navegador de Internet cómo debe mostrar en pantalla la información que contiene. A raíz de su forma de funcionamiento, podemos decir que trabajar en HTML no significa “programar” ya que el resultado no se compila ni se ejecuta independientemente. Para trabajar con HTML se necesitan programas. Estos pueden ser simples o más complejos y depende de lo que se quiera lograr. Lo básico que se necesita para la realización de una página Web es: Necesitamos... • • Un editor de texto... para escribir el código y guardarlo como .htm o .html (puede ser el Block de Notas de Windows). Un navegador de internet... para ver cómo está quedando la página a medida que se va construyendo. Cuando es necesario realizar tareas más específicas, se usarán otros programas: Usaremos como mínimo... • • • • • Un editor de textos. Un editor de imágenes... Paint Shop Pro. Un editor de imágenes en movimiento... Gif Animator. Un editor de applets de Java para botones... 1 Cool Button Tool o el Ulead Button.Applet. Un editor de applets de Java para carteles... Applet Marquee Wizard. Profesor Federico Martín Maglio 1 Manual HTML Básico 2 CONSTRUYENDO UNA PÁGINA BÁSICA: Una página de WEB se construye en lenguaje HTML. Su principio esencial es el uso de etiquetas (tags en inglés). Por lo general, hay una etiqueta para abrir y otra para cerrar (a ésta se le agrega delante la barra /). Debemos tener en cuenta que no todas las etiquetas necesitan de otra para cerrar una orden. Las etiquetas funcionan de la siguiente manera... <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Todo documento para la WEB se abre y se cierra con las siguientes etiquetas... <HTML> (Aquí va todo el documento) </HTML> Todo documento HTML necesita un par de etiquetas HEAD o encabezado que será la información de la página que no se verá directamente en el navegador... <HTML> <HEAD> </HEAD> </HTML> Dentro del encabezado debemos poner las etiquetas para el título de nuestra página WEB. Este debe ser corto y descriptivo de nuestra página ya que será lo que se vea cuando alguien guarda su dirección como favorito... <HTML> <HEAD> <TITLE> </TITLE> </HEAD> </HTML> El contenido de la página (que es toda la información que queremos mostrar en la WEB) irá entre las etiquetas <body> y </body> que se colocan luego de cerrar el encabezado y antes de finalizar el documento. Profesor Federico Martín Maglio Manual HTML Básico <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Dentro de las etiquetas que abren y cierran se introduce la información del documento. Ahora pondremos el título a la página... <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> </BODY> </HTML> Ahora guarde este documento en un directorio o carpeta que se haya creado a tal efecto. Se le da un nombre y la extensión correspondiente para que pueda ser reconocida por los navegadores. Lo guardamos como primera.html o primera.htm (si estamos en un sistema operativo de hasta 8 caracteres para el nombre y 3 caracteres para la extensión). Lo que acabamos de crear es un esqueleto de una página HTML. Todos los documentos HTML requieren que tengas por lo menos estas etiquetas en él, y ¿dónde está el título? El título se ve en la parte de arriba del navegador. Dentro del cuerpo, entre las etiquetas <BODY> y </BODY>, está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.). Profesor Federico Martín Maglio 3 Manual HTML Básico Por tanto, la estructura queda de esta manera: <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> [Aquí van las etiquetas que visualizan la página] </BODY> </HTML> Vemos un ejemplo introduciendo un texto, guardamos el archivo y lo visualizamos con el navegador... <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> Hola, soy yo. Estoy haciendo una página WEB. </BODY> </HTML> Si mi intención es dar formatos especiales al texto, entonces debemos utilizar etiquetas específicas. Veremos algunas... • • La etiqueta <P> separa el texto en diferentes párrafos. La etiqueta <BR> baja un renglón. <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. </BODY> </HTML> Profesor Federico Martín Maglio 4 Manual HTML Básico El texto puede tener unas cabeceras o títulos, comprendidos entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Veremos cómo queda... <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. </BODY> </HTML> Al texto lo puedo alinear el texto en el centro con las etiquetas... <CENTER> </CENTER> presenta el texto centrado en la página. Lo aplicamos en un ejemplo... <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. Profesor Federico Martín Maglio 5 Manual HTML Básico 6 <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> </BODY> </HTML> También podemos utilizar líneas o separadores que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo. Puedo decirle que no ocupe toda la pantalla sino una parte indicándole qué porcentaje de ella agregándole WIDTH=XX% y hasta puedo cambiarle el ancho agregándole a la etiqueta SIZE=X como se puede observar a continuación: <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> <HR width=10% SIZE=1> <HR width=30% SIZE=4> <HR width=100% SIZE=8> </BODY> </HTML> Profesor Federico Martín Maglio Manual HTML Básico 7 DANDO FORMA AL TEXTO: Debemos tener en cuenta que iniciamos otra página, en este caso, la segunda y por ello, creamos un archivo nuevo que nombraremos segunda.htm o segunda.html. Para destacar alguna parte del texto se pueden usar: • • • <B> y </B> para poner algo en negrita (bold). <I> y </I> para poner algo en cursiva (italic). <PRE> y </PRE> para poner texto preformateado, es decir, aparecerá tal cual uno lo escribe (respetará los espacios en blanco y los enter para bajar líneas). La fuente que usará es de espacio fijo. Vemos un ejemplo: <HTML> <HEAD> <TITLE> Mi segunda página de WEB </TITLE> </HEAD> <BODY> <B>Estas palabras están en negrita</B> <P> <I>Estas palabras están en itálica</I> <P> <PRE>Este texto está preformateado y esto va luego de 10 espacios en blanco. El texto actual fue escrito después de dar un enter</PRE> </BODY> </HTML> Las listas: Si necesitamos presentar las cosas en forma de listas podemos elegir entre tres formas... 1. Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definición. Listas desordenadas (Unordered List): Sirven para presentar cosas que no necesitan ir precedidas por un número. Tipeamos lo siguiente en el documento segundo.* a continuación del trabajo anterior: Profesor Federico Martín Maglio Manual HTML Básico Lista desordenada: <UL> <LI> Monitor. <LI> Placa de sonido. <LI> Teclado. <LI> Etc. </UL> Listas ordenadas (Ordered List): Sirven para presentar cosas en un orden numerado. Tipeamos lo siguiente a continuación del trabajo anterior: Lista ordenada: <OL> <LI> Monitor. <LI> Placa de sonido. <LI> Teclado. <LI> Etc. </OL> Listas de definición: Sirven para presentar definiciones de términos o trabajos similares. A diferencia de las que hemos visto, cada renglón de la lista tiene dos partes: 1. El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term). 2. La definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). Lista de definición: <DL> <DT> Monitor: <DD> Hardware de la computadora cuya función es destruir ojos. <DT> Placa de sonido: <DD> Rompe la tranquilidad familiar. <DT> Teclado: <DD> Destructor de uñas. </DL> Profesor Federico Martín Maglio 8 Manual HTML Básico 9 Comentarios no visibles en la pantalla: A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vea en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y --> Ejemplo: <HTML> <HEAD> <TITLE> Mi segunda página de WEB </TITLE> </HEAD> <BODY> <!-- Esto es un comentario al código que no se verá en pantalla --> El texto que figura como comentario en este código no lo vemos en pantalla. <P> <B>Estas palabras están en negrita</B> <P> <I>Estas palabras están en itálica</I> </BODY> </HTML> EJERCITACIÓN: En el documento creado agregar... 1. Un título de tipo 2 que diga "CAPÍTULO 2" que esté centrado. 2. Agregar a cada ejercicio realizado una línea que lo divida del otro. 3. Un comentario a cada ejercicio que indique qué es lo que sigue en el código. NOTA: Para la clase siguiente necesitaremos un texto de unas 2 o 3 páginas ya grabado en un disquete. Profesor Federico Martín Maglio Manual HTML Básico 10 ENLACES CON OTRAS PÁGINAS: La característica que más ha influido en el espectacular éxito de la WEB (o tela de araña) ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos de un mismo sitio o de otro lugar del mundo por medio de enlaces hipertexto. La llamada a otro documento se realiza con la etiqueta <A HREF> y </A> Estructura de los enlaces: <A HREF="xxx"> yyy </A> • • xxx es el destino del enlace (va entre comillas). yyy es el texto indicativo del enlace y que en la pantalla se verá de un color especial y, generalmente, subrayado. Tipos de enlaces: 1. 2. 3. 4. Enlaces dentro de la misma página. Enlaces con otra página nuestra (en el mismo sitio). Enlaces con una página fuera de nuestro sitio. Enlaces con una dirección de correo electrónico. 1. Enlaces dentro de la misma página: En el caso de documentos (o páginas) muy extensos es muy útil poder dar un salto de una parte a otra. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es... <A HREF="#marca"> YYY </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A> Si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta: <A HREF="#final"> Pulsa para ir al final</A> Y en el final del documento he puesto esta otra etiqueta: <A NAME="final"> </A> Profesor Federico Martín Maglio Manual HTML Básico 11 Lo vemos en un ejemplo práctico iniciando nuestra tercer página y lo llamamos tercera.htm o tercera.html. <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> AQUÍ INSERTAMOS UN TEXTO LARGO DE UNAS 2 O 3 PÁGINAS. </BODY> </HTML> Antes del comienzo del texto ponemos... <A HREF="#medio"> Pulsa para ir al medio del documento</A> ...y en la parte central del documento ponemos... <A NAME="medio"> </A> 2. Enlaces con otra página nuestra: Actualmente tenemos 3 documentos. Lo que haremos ahora es enlazarlas entre sí para poder movernos por ellas a nuestro gusto. Lo primero que haremos es enlazar esta página, tercera.htm con la página creada en los ejemplos de los capítulos anteriores y que hemos llamado primera.htm y segunda.htm. Al final del documento y arriba de la etiqueta </BODY> agregamos... <A HREF="primera.htm"> Ejercicios del capítulo 1 </A> <A HREF="segunda.htm"> Ejercicios del capítulo 2 </A> En los documentos primera.htm y segunda.htm hacemos lo mismo pero teniendo cuidado de cambiarle los nombres de las páginas según corresponda y cuidando que se muestren cada uno de los enlaces en diferentes renglones y que quede estéticamente bien en la página. Ya tenemos armado nuestro primer sitio de Internet... FELICIDADES. Complicando más el asunto, crearemos un enlace desde la primera página hacia el medio del documento de la tercera página (recordemos que ya tiene una marca llamada "#medio"). Lo haremos uniendo la llamada a la página más la llamada a la marca (todo junto). Entonces, quedará así... <A HREF="tercera.htm#medio"> Ir al medio del texto de la página tercera </A> Profesor Federico Martín Maglio Manual HTML Básico 12 ¿Si son páginas de diferentes subdirectorios?: Estoy poniendo enlaces a páginas que se encuentran dentro del mismo subdirectorio. Pero si quiero organizar mi sitio con diferentes directorios (haciendo un árbol) entonces debo indicar el camino correspondiente. Si la página a la que quiero saltar está en el subdirectorio "ejem", entonces en la etiqueta tendría que haber puesto "ejem/tercera.htm". Pero si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../primera.html". Esos dos puntos hace que se dirija al directorio anterior (como CD en el D.O.S.). • • Entonces... Para subir un directorio: "ejem/tercera.htm" Para bajar un directorio: "../primera.htm" 3. Enlaces con una página fuera de nuestro sistema Si queremos enlazar con una página que esté fuera de nuestro sitio (es decir, que esté en un servidor distinto al que aloja nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc. Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Microsoft la etiqueta sería la siguiente: <A HREF="http://www.microsoft.com/"> Página de Microsoft </A> Esta orden la ponemos al final de la página primera.htm, la ejecutamos y hacemos click en el enlace de Microsoft... ¿qué ocurre? 4. Enlaces con una dirección de correo electrónico Para que el navegador reconozca que es un enlace a una dirección de correo y, al pulsar sobre ella me abra el programa que me permita enviarlo, debemos introducir la orden MAILTO: antes de la dirección. Para enviarme un correo a mí la orden sería: <A HREF="mailto:[email protected]"> Enviar correo a Martín </A> Introducimos la orden al final de la página primera.htm, ejecutamos y hacemos un clic sobre la llamada... ¿qué ocurre? Profesor Federico Martín Maglio Manual HTML Básico 13 IMÁGENES: Aquí una observación... Trabajaremos únicamente con imágenes de tipo .gif y .jpg que son las más difundidas en la WEB. La etiqueta que nos sirve para incluir imágenes en páginas WEB es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La diferencia es que, en lugar de indicar al programa navegador el nombre y la localización de un documento de texto HTML para que lo cargue, se le indica el nombre y la localización de un fichero que contiene la imagen que queremos poner. La etiqueta es IMG SRC (image source o fuente de la imagen). La llamada quedará así... <IMG SRC="imagen1.jpg"> Abrimos la página primera.htm e introducimos el código para llamar a la imagen. Si la imagen estuviese en otro directorio o en otro sitio, antes del nombre de la misma se debe indicar su ubicación. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT (este permite ver una descripción de la imagen que se carga). Es útil para cuando la imagen tarda en cargarse y el visitante, al señalarla con el ratón, puede ir teniendo una idea de su contenido. <IMG SRC="imagen1.jpg" ALT="descripción"> Cambiamos "descripción" por lo que corresponda según la imagen que tengan. Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes en bytes, porque una imagen que sea muy grande o "pesada" hará el acceso a nuestra página muy tedioso y puede ocasionar que el visitante desista de visitarla. Alineamiento de titulares o descripciones de la imagen: Si queremos que cada imagen tenga una descripción visible que explique de qué se trata, podemos introducir el texto a continuación de la llamada de la imagen. Tenemos tres opciones a saber... <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=TOP> Titular alineado arriba <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=MIDDLE> Titular alineado en medio <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=BOTTOM> Titular alineado abajo También podemos hacer que la misma imagen sea utilizada como enlace hacia otra página. Primeramente haremos el ejemplo con el archivo "imagen2.jpg". Ponemos la dirección de la página en la llamada de enlace y, al terminar tal orden, ponemos la imagen y luego su descripción. Finalmente cerramos con </A> Profesor Federico Martín Maglio Manual HTML Básico 14 <A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripción"></A> Si hacemos un clic sobre la imagen veremos que nos redirecciona hacia la página señalada. La imagen aparecerá rodeada de un rectángulo. Si queremos que el mismo desaparezca, entonces le decimos que el BORDE debe ser igual a 0. <A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripción" BORDER=0></A> EJERCITACIÓN: 1. 2. 3. 4. Creamos un documento nuevo al que llamaremos index.htm. Ponemos un título de tipo 1 centrado. Separamos con una línea de espesor 5 y que ocupe el 70 % de la página. Ponemos llamadas a los documentos primera.htm, segunda.htm y tercera.htm. 5. Ponemos una llamada al correo electrónico del Instituto. 6. Ponemos llamadas para las siguientes organizaciones: O.N.U., Ministerio de Cultura y Educación y diario Clarín. 7. Ponemos la imagen1.jpg con un enlace a imagen2.jpg. CARACTERES ESPECIALES: Existen algunas limitaciones para escribir el texto... • • Las etiquetas se forman como un comando escrito entre los símbolos "<" y ">", entonces, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto. El HTML es un lenguaje escrito en idioma inglés, y éste no tiene la letra ñ ni los acentos a las vocales ni apertura de interrogación y exclamación. En los navegadores en castellano esto no es problema, pero tenemos que tener en cuenta que la WEB es mundial y, para que todos puedan ver bien los textos, es conveniente reemplazar algunos caracteres por códigos. Para resolver estos problemas, existen códigos para poder escribir estos caracteres. Estos códigos tienen un inicio y un fin. El inicio es el símbolo & y el final es el ; Profesor Federico Martín Maglio Manual HTML Básico 15 Para que carateres del código que aparezcan en el texto: &lt; &gt; &amp; &quot; para para para para < > & " (menor que) (mayor que) (ampersand) (double quotation) Para vocales, eñes, interrogación y exclamación: &aacute; &eacute; &iacute; &oacute; &uacute; &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &ntilde; &Ntilde; &uuml; &Uuml; &#191; &#161; para la para la para la para la para la para la para la para la para la para la para la para la para la para la para para á é í ó ú Á É Í Ó Ú ñ Ñ ü Ü ¿ ¡ Si se escribe en un procesador de textos de forma manual, se puede escribir el código directamente. Por ejemplo... <HTML> <HEAD> <TITLE> Mi p&aacute;gina con caracteres especiales </TITLE> </HEAD> <BODY> <CENTER> <H1> Mi p&aacute;gina realizada en el instituto para ver c&oacute;mo se escriben los caracteres especiales como la &ntilde; </H1> </CENTER> <HR> </BODY> </HTML> Profesor Federico Martín Maglio Manual HTML Básico 16 FORMATO DE FUENTES: Tamaño de las fuentes: El tamaño de las fuentes utilizadas puede cambiarse con el comando SIZE=X, donde X es el número asignado al tamaño que puede variar entre 1 y 7. Por ejemplo... <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <FONT SIZE=1> Texto en tamaño 1 </FONT> <BR> <FONT SIZE=2> Texto en tamaño 2 </FONT> <BR> <FONT SIZE=3> Texto en tamaño 3 </FONT> <BR> <FONT SIZE=4> Texto en tamaño 4 </FONT> <BR> <FONT SIZE=5> Texto en tamaño 5 </FONT> <BR> <FONT SIZE=6> Texto en tamaño 6 </FONT> <BR> <FONT SIZE=7> Texto en tamaño 7 </FONT> <BR> </BODY> </HTML> Para tener una referencia válida, el tamaño normal es el 3 y de tipo Times New Roman que se puede cambiar a gusto. Pero cuidado, podemos poner una fuente que el visitante no tenga en su computadora y así la visualización de la página puede cambiar en su estética. Para cambiar la fuente la orden es FACE=. Por ejemplo, para que el documento se vea con la fuente ARIAL, la parte del texto afectada deberá quedar de la siguiente manera... <FONT FACE="Arial">Este texto está configurado para ver con la fuente Arial</FONT> Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y así sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. Así, por ejemplo: <FONT FACE="Flexure, Arial">Este texto se verá con la fuente Flexure, y si no está en la computadora lo hará con la fuente Arial</FONT> Profesor Federico Martín Maglio Manual HTML Básico 17 FONDOS DE PÁGINA: Se puede cambiar el fondo de las páginas de dos formas diferentes: • • Con un color uniforme. Con una imagen que haga de textura. Fondos con un color uniforme: La etiqueta para dar color al fondo es BGCOLOR y se pone a continuación de la etiqueta <BODY> <BODY BGCOLOR="#RRVVAA"> Donde: RR es un número indicativo de la cantidad de color rojo VV es un número indicativo de la cantidad de color verde AA es un número indicativo de la cantidad de color azul Estos números indican en numeración hexadecimal la cantidad del color primario. En la mezcla final se da el resultado. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos son: 0123456789ABCDEF Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. Los colores primarios son... #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Para blanco y negro serán... #FFFFFF - Blanco #000000 - Negro Para hacer un tono más oscuro del color elegido hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más claro con #AA0000, o más oscuro con #550000. Profesor Federico Martín Maglio Manual HTML Básico 18 Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en anaranjado con #FF7050. Colores del texto y de los enlaces: Podemos cambiar el color al texto y a sus enlaces en toda la página. Las etiquetas son: TEXT: Color del texto. LINK: Color de los enlaces. VLINK: Color de los enlaces visitados. ALINK: Color de los enlaces activos (el que adquieren en el momento de ser pulsados). La etiqueta, con todas sus posibilidades quedaría así (a continuación de <BODY>): <BODY BGCOLOR="# RRVVAA" TEXT="# RRVVAA" LINK="# RRVVAA" VLINK="# RRVVAA " ALINK="# RRVVAA"> Cambio del color de una parte del texto (y no en toda la página): <FONT COLOR="#0000FF"> Este texto es de color azul </FONT> Fondos con una imagen: La segunda alternativa es ponerle una imagen de fondo a la página en formato GIF o JPEG. Esta imagen se repite por toda la página en forma de tapiz. La estructura de la etiqueta es: <BODY BACKGROUND="fondo1.gif"> A esta etiqueta puede agregársele otras para el texto y los enlaces. Hay que tener en cuenta que el visitante puede tener deshabilitada carga de imágenes. Esto podría ocasionar que el texto no sea legible (depende de cómo lo hayamos armado). Para evitar el problema, si se pone un fondo que al no ser cargado pueda traer problemas con el texto, también podemos cargar un color que sí lo permita. En tal caso, el color aparecerá si la imagen no es cargada. Profesor Federico Martín Maglio Manual HTML Básico 19 Si queremos poner como fondo con una imagen cuya tonalidad general es verde y arreglamos los colores del texto para que haga un buen contraste, entonces debemos cargar un color parecido a continuación. La etiqueta quedaría así: <BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF"> EJERCITACIÓN: 1. Poner un fondo a la página index.htm con un color alternativo. 2. Poner el mismo fondo a las páginas primera.htm, segunda.htm y tercera.htm con un color alternativo. 3. Hacer que en la página tercera.htm aparezcan partes del texto en diferentes colores, fuentes y tamaños de fuente. ALINEACIÓN Y DIMENSIONADO DE IMÁGENES: Alineación de las imágenes: Se consigue con la etiqueta ALIGN más el tipo de alineación deseado... ALIGN=RIGHT ALIGN=LEFT Alinea la imagen a la derecha de la página. Alinea la imagen a la izquierda de la página. La orden para alinear la imagen a la derecha sería... <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Si queremos que la imagen esté centrada en la página, entonces la orden sería... <CENTER><IMG SRC="imagen1.jpg"></CENTER> Si queremos que el texto no se acomode al costado de la imagen, entonces se utilizan las siguientes etiquetas que fuerzan al texto a buscar otro lugar. La elegiremos de acuerdo a nuestra necesidad. Profesor Federico Martín Maglio Manual HTML Básico 20 <BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda. <BR CLEAR=RIGHT> Busca el primer margen libre a la derecha. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. Lo vemos en un ejemplo práctico creando un archivo cualquiera y veremos que el texto con la etiqueta <BR CLEAR=ALL> queda debajo de la imagen. <HTML> <HEAD> <TITLE> Mi página de WEB </TITLE> </HEAD> <BODY> <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Este texto está al lado de la imagen. <BR> Este texto también. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. </BODY> </HTML> Dimensionando la imagen: Los navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, piden al servidor que les envíe únicamente este archivo. Cuando carga la imagen, recién después cargan los demás datos porque necesita de la imagen para ir armando la página. Para que el navegador sepa qué tamaño tiene la imagen y siga cargando los otros datos de la página (textos), se le puede indicar qué tamaño tendrá y así reservará tal lugar. Para indicar el tamaño en ancho y alto, las etiquetas son... WIDTH (ancho) HEIGHT (alto) Por ejemplo, para imagen1.jpg: <IMG SRC="imagen1.jpg" WIDTH=200 HEIGHT=100> De tal manera, podemos decirle al navegador que muestre la imagen en otro tamaño del que realmente tiene. Podemos decirle... <IMG SRC="imagen1.jpg" WIDTH=100 HEIGHT=50> Profesor Federico Martín Maglio Manual HTML Básico 21 FORMATO DE LAS IMÁGENES: Tamaño de las imágenes: Al cargar una imagen, el tiempo de carga varía según cómo esté la línea y su tamaño en bytes. Debemos tener cuidado en este punto reduciendo el tamaño de la imagen con un programa como el Paint Shop Pro. Tenemos varias alternativas... 1. Reducir la resolución de la imagen. Generalmente tienen unos 300 pixeles. Se los puede bajar a 72. 2. Reducir las imágenes .gif a un máximo de 256 colores (las .jpg tienen que ser siempre de 16,7 millones de colores). 3. Reducir la imagen a un tamaño que sea suficiente para apreciarla con claridad. Cuanto más pequeña en pixeles sea, más pequeña en bytes será. GIFs transparentes: Una característica muy útil del formato .gif es la opción de hacer transparente un color determinado, es decir, que en la página del Web ese color concreto no se vea, siendo reemplazado por el fondo de la página. Esto es muy beneficioso cuando queremos realizar ejectos atractivos con imágenes irregulares o de texto. Se debe tener en cuenta que sólo puede tener transparencia el formato .gif de tipo 89 a, ya que también está el tipo 87 a con el que no nos será posible realizarlo. Con el programa Paint Shop Pro podemos elegir el formato final del archivo. GIFs animados: Este formato tiene la particularidad de que es posible superponer varias imágenes diferentes que, al ser cargadas por el navegador, se irán reproduciendo una a una consecutivamente dando la impresión de ver una animación (igual que con los dibujos animados). Para realizar tal efecto, guardamos las imágenes que conformarán la animación en un directorio (pueden ser 4). Luego las unimos con el programa Microsoft Gif Animator, guardamos el archivo (que será uno solo) y, al cargarlo en el navegador, se reproducirán consecutivamente. Profesor Federico Martín Maglio Manual HTML Básico 22 TABLAS: Estructura de una tabla: 1. Una tabla tiene un comienzo y un fin; adentro, todos los atributos necesarios para las filas y columnas. Todo el código debe ir entre <BODY> y </BODY>. <TABLE> [resto de las etiquetas] </TABLE> Para que los bordes puedan verse en el navegador, le agregamos la etiqueta BORDER a <TABLE> 2. El siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Para una tabla con dos filas quedaría así su estructura: <TABLE BORDER> <TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> </TABLE> 3. En el último nivel están las etiquetas de cada celda, que son <TD> y </TD>, que dan lugar al contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila teniendo cuidado de que en cada fila tengamos el mismo número de celdas para formar las columnas. En el siguiente ejemplo tendremos 2 columnas y en cada fila 2 celdas: <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> Profesor Federico Martín Maglio Manual HTML Básico 23 Dibujada en la hoja quedaría... Para ir apreciando los cambios realizados, creamos un archivo llamado tabla.htm con el siguiente código... <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> </BODY> </HTML> Probamos sacando la celda 3 de la fila 2 para ver qué pasa... Luego restituimos la etiqueta quitada... Ahora le agregamos un título a la tabla. Lo creamos con las etiquetas <CAPTION> y </CAPTION> que deben ubicarse después de <TABLE BORDER>. Entre las etiquetas tipeamos el título. Ahora vamos a variar el espesor de los bordes. A esto lo hacemos poniendo un signo = y un número. El listado ahora debe estar así: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> Profesor Federico Martín Maglio Manual HTML Básico 24 <BODY> <TABLE BORDER=5> <CAPTION>Título de la tabla</CAPTION> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> </BODY> </HTML> Celdas de cabecera: Seguidamente, pondremos título a cada columna. Es como poner otra fila pero el texto aparecerá en negrita y centrado. La etiqueta es <TH> y </TH> (en vez de la normal <TD> y </TD>). Entonces, el agregado será... <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> Agregamos el texto de arriba, guardamos el archivo y lo visualizamos en el navegador... Contenido de las celdas: Dentro de las celdas podemos poner todo lo que querramos. Se hace como hicimos anteriormente pero con el cuidado de introducir todas las órdenes dentro de la celda correspondiente. Para poner un texto... <TD>Este texto está dentro de una celda</A></TD> Profesor Federico Martín Maglio Manual HTML Básico 25 Para poner una imagen... <TD><IMG SRC="imagen1.jpg"></TD> Para poner un enlace... <TD><A HREF="primera.htm">Ir a la primera página</A></TD> Posicionar contenido en una celda: Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos: <TD ALIGN=CENTER> Al centro </TD> <TD ALIGN=RIGHT> A la derecha </TD> <TD ALIGN=LEFT> A la izquierda </TD> También podemos controlar el alineamiento vertical (que por defecto es en el medio). Se puede cambiar añadiendo dentro de la etiqueta de la celda los siguientes atibutos: <TD VALIGN=TOP> Arriba </TD> <TD VALIGN=BOTTOM> Abajo </TD> Variando las dimensiones de la tabla: El navegador se encarga dimensionar automáticamente el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. Pero a veces nos puede convenir forzar el dibujo a una forma determinada en cuanto a su tamaño. Para ello están las etiquetas WIDTH (horizontal) y HEIGHT (vertical) que deberán estar acompañadas por el signo = más el número del porcentaje que queramos y su símbolo. Para una tabla que ocupe sólo el 60 % de la página pondremos... <TABLE WIDTH=60% HEIGHT=200> Como podemos ver, estira las 3 columnas en forma automática hasta ocupar el porcentaje indicado y cada celda ahora es más ancha. Profesor Federico Martín Maglio Manual HTML Básico 26 Celdas que abarcan a otras varias: Con la etiqueta COLSPAN=número una celda se extiende en lo horizontal sobre otras (depende del número). Con la etiqueta ROWSPAN=número la celda se extiende en lo vertical sobre otras. Por ejemplo, si queremos que una celda que abarque a dos columnas agregamos... <TR> <TD COLSPAN=2> Celda en 2 columnas </TD> </TR> Color de fondo en las tablas: Para que una tabla tenga un color de fondo, debemos seguir los mismos parámetros que con la página (color de fondo). En esto hay varias posibilidades... 1. Que la totalidad de la tabla tenga un color de fondo. El encabezado nos quedará... <TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00"> 2. Si queremos que una celda determinada tenga un color de fondo colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color azul. Nos quedará así... <TD BGCOLOR="#0000FF">fila1-celda1</TD> Hasta ahora, el listado total de la tabla debería ser... <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> <TABLE BORDER=5 WIDTH=60% HEIGHT=200 BGCOLOR="#00FF00"> <CAPTION>Título de la tabla</CAPTION> <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> Profesor Federico Martín Maglio Manual HTML Básico 27 </TR> <TR> <TD BGCOLOR="#0000FF">fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> </BODY> </HTML> Imágenes de fondo en las tablas: Si en vez de color queremos una imagen de fondo, procedemos como ya hemos hecho con la etiqueta BACKGROUND="fondo5.gif" a continuación de TABLE o de alguna celda en particular. Separación entre las celdas de una tabla: Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Para obtener una separación de 20 pixels entre celdas ponemos... <TABLE BORDER=5 CELLSPACING=20> Separación entre el borde y el contenido dentro de las celdas: Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda ponemos... <TABLE BORDER=5 CELLPADDING=20> Profesor Federico Martín Maglio Manual HTML Básico 28 EJERCITACIÓN: 1. Realizar una tabla con 2 filas, con una celda cada una. La primera como cabecera, con el texto "Esto es un gran lío" y la segunda con una imagen cualquiera. 2. La tabla deberá tener un ancho del 80 % y un borde de tamaño 3. 3. Agregar dos filas con 3 celdas cada una. 4. Poner un color de fondo a toda la tabla. 5. A la cabecera ponerle un color diferente. SONIDOS: A nuestra página podemos agregarle música de fondo pero sólo se escuchará si la computadora del visitante está preparada para procesarlo y un navegador que soporte su recepción y reproducción. Los formatos más comunes son los .mid y .wav aunque actualmente hay otros que son de mejor calidad. Pero para el ejemplo trabajaremos con los más comunes. Hay que tener en cuenta que no todos los navegadores soportan sonido ni las mismas órdenes para su reproducción. Internet Explorer utiliza la siguiente etiqueta... <BGSOUND SRC="fichero_de_sonido" LOOP=n> El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar el fichero de sonido. Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Si se omite este atributo, y entonces el fichero se ejecutará una sola vez. Netscape utiliza otra etiqueta... <EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy> WIDTH es la anchura y HEIGHT la altura de una consola de control que aparece y que tiene diferentes teclas (play, stop, pausa, etc.). El valor recomendado para xxx es de 200 y para yyy es de 60. Dentro de la etiqueta se pueden añadir los siguientes atributos... AUTOSTART="true" (arranca automáticamente). LOOP="true" (se ejecuta ininterrumpidamente). Profesor Federico Martín Maglio Manual HTML Básico 29 La etiqueta queda de esta manera... <EMBED SRC="música.mid" WIDTH=200 HEIGHT=55> Para conseguir que la consola sea invisible hay que añadirle el atributo HIDDEN="true"... <EMBED SRC="música.mid" HIDDEN="true"> Fondo sonoro combinado para el Explorer y el Netscape Para que nuestro fondo sonoro se ejecute por visitantes que utilicen Explorer o Netscape indistintamente debemos poner ambas etiquetas de llamada. <BGSOUND SRC="música.mid"> <EMBED SRC="música.mid" HIDDEN="true"> TEXTO EN MOVIMIENTO: Podemos poner un texto que se desplace por la pantalla; esto recibe el nombre de Marquesina (marquee en inglés). La etiqueta es... <MARQUEE> Este texto se desplaza </MARQUEE> Si agregamos atributos, cambiaremos su aspecto... WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla... <MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE> BEHAVIOR (comportamiento en inglés) definirá la forma de ejectuar el desplazamiento del texto... BEHAVIOR=SCROLL (el texto aparecerá por el lado derecho y desaparecerá por el izquierdo). BEHAVIOR=SLIDE (el texto aparecerá por el lado derecho y se detendrá al llegar al izquierdo). BEHAVIOR=ALTERNATE... lo ponemos en una página y vemos qué pasa... Profesor Federico Martín Maglio Manual HTML Básico 30 Agragamos a la página index.htm la siguiente línea y la visualizamos... <MARQUEE BEHAVIOR=ALTERNATE>Veremos qué pasa </MARQUEE> BGCOLOR="#FF0000" (color de fondo de la marquesina). DIRECTION=LEFT o RIGHT (modifica la dirección de desplazamiento). SCROLLAMOUNT=XX (define la cantidad de desplazamiento en en pixeles de cada movimiento de avance). LOOP=XX (veces que el texto aparecerá, si no está, aparecerá indefinidamente). HSPACE=XX, VSPACE=XX (separa la marquesina del texto de la página en lo horizontal y vertical tantos pixeles como se le indique). PUBLICACIÓN Y PROMOCIÓN DE UNA PÁGINA: ¿Cómo coloco mi página en la red? ¿Cómo doy a conocer a los demás la existencia de mi página? Publicación de una página: El propósito que tenemos al confeccionar una página del Web es el de publicarla y ponerla a disposición de todo el mundo. No podemos colocarla directamente en la red porque no tenemos un servidor, es decir, un ordenador conectado permanentemente con Internet, además sería muy caro. La solución es instalarla en un servidor conectado a la WWW (World Wide Web: la telaraña mundial), la red de servidores interconectados entre sí que nos permite acceder a cualquier página en cualquier parte del mundo, y navegar a través de ellas. Formas para colocar una página en la red: ¿Quiénes tienen servidores?, ¿en qué lugar puedo ponerla?. Instituciones oficiales y académicas a sus miembros, para la difusión de información relacionada con esos organismos. Proveedores comerciales de acceso a Internet, o ISPs (Internet Service Providers) que ceden frecuentemente a sus usuarios un espacio determinado en sus servidores, para que puedan colocar sus páginas personales, bien sea gratuitamente o por una tarifa determinada. Empresas comerciales que, sin ser proveedores de acceso a Internet, se dedican a alquilar espacio para la colocación de páginas, de carácter personal o comercial. Profesor Federico Martín Maglio Manual HTML Básico 31 Ciertos servidores que conceden de una manera gratuita espacio para la colocación de páginas personales. Los más populares son Xoom y Geocities, que conceden un gran espacio. Cómo enviar las páginas al servidor: Una vez de haber confeccionado en nuestro disco duro la página Web, y estando ya lista para ser colocada en el servidor, surge la cuestión de cómo proceder para enviarla. Para ello, primero hay que registrarse eligiendo un lugar y una clave secreta. Luego, nos conectamos con un programa FTP para subir las páginas al lugar seleccionado. Promoción de una página: 1. Incluir la dirección (o URL) de la página en la firma de nuestros correos electrónicos. 2. Enviar un correo a las listas avisando de la existencia de la página. 3. Incluir la dirección en los buscadores. Para ello tienen formas de avisar de la existencia de una página nueva. Consejos para facilitar la labor a los motores de búsqueda: Para que nuestra página sea catalogada como corresponde por los motores de búsqueda debemos... 1. Poner un título bien descriptivo en la etiqueta <TITLE> y lo más corto posible. 2. Poner un resumen del contenido de la página en el comienzo de la misma porque algunos buscadores leen las primeras 25 de la misma. 3. Utilizar etiquetas <META> que van entre <HEAD> y </HEAD> Las etiquetas <META> sirven para suministrar información detallada del contenido de una página. Hay diferentes tipos... pero veremos las siguientes... <META NAME ="description" CONTENT="Primera página creada en el Instituto"> En este caso, lo que está incluido en el atributo CONTENT (contenido) es lo que presentará el motor de búsqueda, además del título de la página. <META NAME="keywords" CONTENT="educación alumno manual HTML"> En este otro caso, se incluyen en el atributo CONTENT las palabras claves para la búsqueda de nuestra página. Se pueden poner tantas como se crea necesario, incluso sus plurales. Profesor Federico Martín Maglio
