HTML
- 1. Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador y el Block de Notas de Windows u otro procesador de texto simple. Los ejemplos de codigo HTML estaran resaltados en color azul, y cuando queremos representar el efecto de un codigo en pantalla usaremos un celeste de fondo. HTML se hizo famoso gracias al World Wide Web (WWW), poniendo a disposicion de millones de personas, en todas partes del mundo, informacion y documentos de todo tipo, que contienen imagenes, sonidos y enlaces a otros documentos, asi como tambien muchisima informacion. Indice: • Introduccion • Estructura de un documento html • Algunos tag muy usados • Forma de textos • Fondos de pagina • Listas • Enlaces o Links • Imagenes • Tablas • Frames o Marcos HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm(paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene definida por un conjunto de marcas o "tags" La especificacion de estos tags la decide un organismo internacional, aunque ultimamente algunos fabricantes implementan nuevas capacidades a sus navegadores que no son compatibles con el resto. El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos: <..>. Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe inclinarse, y para cerrar el tag escribimos </i> Existen muchos tags, pero solo vamos a ver los basicos. Para crear las paginas html solo hace falta un procesador de textos. Ultimamente es posible hacer documentos htm desde programas como Word o Excel, sin embargo, en estas paginas solo usaremos el Block de Notas de Windows, asi tendremos un control total sobre el codigo generado.
- 2. Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene informacion sobre el documento, como el titulo, y el cuerpo es donde va el contenido. Podemos verlo sencillamente asi: <html> <head> <TITLE>Nuestra primera pagina</TITLE> </head> <body> <H1>Nuestra primera pagina</H1> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Veamos linea por linea: <html>: indica el comienzo del documento html <head>: indica el comienzo de la cabecera <TITLE>Nuestra primera pagina</TITLE>: Comienzo del titulo, el titulo, y final de titulo </head>: Final de la cabecera <body>: comienzo del cuerpo del documento <H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe estar en negrita y con tamaño de letra grande y deja el cursor al comienzo de la linea siguiente. <P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo </body>: fin de cuerpo del documento </html>: fin de documento html Hagamos unos cambios en el codigo anterior: <html> <head> <TITLE>Nuestra primera pagina</TITLE> </head> <body> <center> <H1>Nuestra primera pagina</H1> <hr width=200> </center> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Agregamos dos tags nuevos: • <center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos al navegador que todos los elementos entre <center> y </center> deben estar centrados en la pantalla. • <hr>: sirve para dibujar una linea y coloca el cursor al comienzo de la linea siguiente. Vemos que este tag tiene un modificador o parametro, width=200, que indica que la linea debe tener una longitud de 200 pixels.
- 3. Casi todos los tags tienen varios parametros que alteran la forma en que el navegador dibuja la pagina. En esta pagina vamos a ver los tag mas usados para dar forma al texto: • <b>: Sirve para poner en negrita. Hay que cerrar con </b>. • <i>: Para inclinar el texto. Se cierra con </i>. • <br>: Coloca el cursor al comienzo de la linea. Hay que diferenciarlo del tag <p>. • <p>: Tag de parrafo: Hace un retorno de carro y ademas añade una linea en blanco. Admite parametros: o align="": alinea el texto dentro del parrafo. Por defecto se alinea a la izquierda, y los valores admitidos (dentro de las comillas) son : center, right, left y justify. • <font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado. Netscape y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix. Si queremos usar otros tipos de letra usaremos este tag, que admite varios parametros: o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero hay que tener en cuenta que no todo el mundo tiene instalados los mismos tipos de letra que nosotros. Algunos tipos muy usados son: Arial, Courier, Verdana. o color="": color: Los navegadores reconocen algunos colores predefinidos, como:black, red, white, etc... Para mas exactitud hay que usar la notacion exagesimal. Por ejemplo <font color="black"> es lo mismo que <font color="#000000"> . o size="": Tamaño: Generalmente suele ser 2. Podemos fijar un tamaño en terminos absolutos, p.ej. <font size="3">, o respecto al tamaño, p.ej. <font size="+1">. Nota: Hay algunas diferencias entre navegadores y plataformas, y no es posible controlar que el texto aparezca siempre igual en todos. • <blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote> En este texto tenemos ejemplos de todos los tags: <html> <head> <TITLE>Formateo de texto</TITLE> </head> <body> <center> <font face="arial" size="+2">Formateo de texto</font> <hr width=200> </center> <P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> <P><font face="Arial" size="2">En el segundo parrafo toda la letra es Arial y tamaño 2. Esta alineado a la izquierda(por defecto) y coloca el cursor al cominezo de la linea siguiente.<br> Para terminar el parrafo usamos un <font color="#FF0000">color diferente</font></font>.</P> <blockquote><font face="Arial" size="3">Tercer parrafo. Para finalizar, tenemos un parrafo indentado, con letra Arial y tamaño 3 (un poco mas grande).</font>.</blockquote> </body> </html>
- 4. Como vimos hasta ahora, el navegador dibuja la pagina con un fondo gris no muy agradable. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo. • Fondo de color: Usamos el parametro bgcolor, p.ej <body bgcolor="#FFFFFF"> Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad. • Imagen de fondo: Usamos el parametro background="fondo.gif", p.ej <body background="fondo.gif"> Usar imagenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que dejar de lado los colores chillones. Si la imagen es mas chica que la pantalla, se repetira hasta llenarla completamente. Un buen truco es usar una imagen de altura 5 pixels (o menos), con el consiguiente ahorro de espacio. Por ejemplo: vamos a usar de fondo la imagen: Para ver el resultado en la pagina copiamos el siguiente codigo: <html> <head> <TITLE>Fondos</TITLE> </head> <body background="fondo.gif"> <center> <font face="arial" size="+2">Fondos</font> <hr width=200> </center> <P align="center">Este es el primer parrafo. Esta centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el navegador pueda encontrarla. Si la imagen esta en otro directorio debemos escribir la ruta correcta. Con todo lo que vimos de HTML hasta ahora ya podriamos saber hacer una lista numerada, p.ej. <P><blockquote>1.Elemento numero 1</blockquote> <blockquote>2.Elemento numero 2</blockquote> Este codigo quedaria en pantalla: 1.Elemento numero 1 2.Elemento numero 2 Sin embargo, nos podemos ahorrar todo este codigo, ya que existen unos tags especificos para listas. Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definicion. Listas desordenadas: <UL> <LI> primer elemento <LI> segundo elemento </UL>
- 5. Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: • primer elemento • segundo elemento Listas ordenadas: <OL> <LI> primer elemento <LI> segundo elemento </OL> Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: 1. primer elemento 2. segundo elemento Listas de definicion: <DL> <DT> primer titulo <DD> primera definicion <DT> segundo titulo <DD> segunda definicion </DL> Toda la lista va entre los tag <DL>(definition list) y </DL>, y los elementos se señalan con los tag <DT>y <DD>. El resultado es: primer titulo primera definicion segundo titulo segunda definicion Por ultimo, podemos insertar listas dentro de otras listas: <OL> <LI> primer elemento lista 1 <UL> <LI> primer elemento lista 2 <LI> segundo elemento lista 2 </UL> <LI> segundo elemento lista 1 </OL> El resultado es: 1. primer elemento lista 1 o primer elemento lista 2 o segundo elemento lista 2 2. segundo elemento lista 1 Los enlaces o "links" son textos o imagenes que al ser pulsados, hacen que el navegador pase a otra pagina. Generalmente estan subrayados y de un color diferente al texto normal.
- 6. El tag de los enlaces es <a>, con la sintaxis: <A HREF="destino"> titulo </A> El titulo es el texto que aparece subrayado, y el destino es la direccion del documento al que apunta el enlace. Este destino puede ser una direccion completa, p.ej. href="http://www.elcamino.com/index.htm", o un documento en el mismo directorio href="hola.htm" Como ejemplo vamos a analizar el "link" de la parte inferior derecha que nos lleva a la siguiente pagina. El codigo es: <P align="right"><A HREF="cap7.htm">Cap 7: Imagenes</A> El resultado en pantalla esta a la vista... Enlaces internos Podemos usar este tag para hacer enlaces dentro de una misma pagina. Primero marcamos el sitio destino de la pagina con el codigo: <a name="nombre"></a> Y para saltar a ese punto debemos escribir : <A HREF="destino#nombre"> titulo </A> Gracias a las imagenes, la web se ha hecho tan popular, tanto que hoy no se entiende una pagina web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "palas.gif", que vamos a usar en los siguientes ejemplos El tag basico que nos permite incluir imagenes es <IMG SRC="palas.gif"> , que produce en pantalla: Este tag admite muchos parametros utiles: • width, height: con estos parametros le indicamos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la pagina aparece en pantalla antes de que lleguen los graficos (que generalmente vienen despues del texto). En nuestro caso, <IMG SRC="palas.gif" width=60 height=53>, produce en pantalla: Tambien podemos poner dimensiones 'falsas', y el navegador alterara las dimensiones de la imagen. Por ejemplo, <IMG SRC="palas.gif" width=200 height=53>, produce en pantalla: • border: Este parametro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="palas.gif" width=60 height=53 border=2>, produce en pantalla: • alt: Con este parametro podemos incluir un texto para los navegadores que no soportan los graficos. Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2>, produce en pantalla:
- 7. • align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle. Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla: texto de ejemplo • hspace, vspace: Separa la imagen horizontal y verticalmente (en pixels y por ambos lados). Por ejemplo, <IMG SRC="palas.gif" alt="Pagina en construccion" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: texto de ejemplo Sobre imagenes se puede decir mucho mas, pero solo vamos a añadir algunos comentarios: • Una pagina web en su totalidad (texto y graficos) no deberia sumar mas de 80 Kb (1 minuto de carga aprox. para un modem de 14400 bps). • Un diseñador de paginas web necesitara un programa de retoque fotografico, como Paint Shop Pro • Las imagenes pueden servir como links, p.ej el codigo <a href="palas.htm"><IMG SRC="palas.gif"></a> pueden servir como links en pantalla. El icono del mouse va a cambiar al pasar por la imagen, y aparecera un borde de color azul rodeandola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo. Las tablas son los elementos mas importantes del HTML. Saber como construirlas es bueno para poder manejar el lenguaje. Vamos a ver el ejemplo con una tabla de 2x2 celdas que vamos a ir modificando sobre la marcha. El codigo para construirla es: <TABLE border=1> <TR> <TD>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> El resultado en la pantalla sera el siguiente: fila1/celda1 fila1/celda2 fila2/celda2 Tenemos tres tags principales, <TABLE>(inicio y final de tabla),<TR>(inicio y final de fila),<TD>(inicio y final de celda). Cada uno de los tags admite varios parametros, veamos los basicos: <TABLE> • border: Borde de la tabla, generalmente debemos ponerlo a cero. • width: Ancho de la tabla. Esta pagina esta toda dentro de una tabla con un ancho de 600 pixels centrada en la pagina.
- 8. • cellpadding: Separacion entre el contenido de las celdas y el borde de la celda. Por defecto es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 fila2/celda2 cellspacing: Es la separacion entre las celdas. Es decir que, es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 fila2/celda2 bgcolor: Color de fondo. (lo vemos en celeste con la ultima tabla). fila1/celda1 fila1/celda2 fila2/celda2 <TD> • width, height: Altura y ancho de la celda. Vamos a dimensionar la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2
- 9. align, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir modificando la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 align=right valign=top height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 • bgcolor: Color de la celda. Ponemos en celeste la celda superior izquierda. fila1/celda1 fila1/celda2 fila2/celda2 • rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de las otras columnas, es decir, que la celda ocupa varias filas. <TABLE border=1> <TR> <TD rowspan=2>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las otras filas, es decir, que la celda ocupa varias columnas.
- 10. <TABLE border=1> <TR> <TD colspan=2>fila1/celda1</TD> </TR> <TR> <TD><img src="palas.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila2/celda2 Comprender colspan y rowspan es, seguramente lo mas dificil del lenguaje HTML, pero hacer tablas complejas nos permitira distribuir con exactitud los elementos de la pagina. Los frames o marcos se usan para dividir la pantalla en varias zonas independientes, cada una con su propia barra de desplazamiento. Un uso muy comun es en esos sitios que tienen un menu fijo en la parte izquierda de la pagina, y los textos aparecen en la parte derecha. Vamos a crear una pagina de ese tipo, con un menu que ocupe el 15% de la pantalla. Primero tenemos que crear la pagina con la definicion de los frames: Escribimos entonces el siguiente codigo: <HTML> <HEAD> <TITLE>Pagina con frames</TITLE> </HEAD> <FRAMESET COLS="15%, 85%"> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="portada.htm" NAME="contenido"> <NOFRAMES> <BODY> Esta pagina esta pensada para ser vista con frames. <P>Pulsa en el enlace para <A HREF="portada.htm"> entrar</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML> Tenemos varios tag nuevos, que admiten varios parametros: <FRAMESET> Es el tag que define las caracteristicas del conjunto de los frames: • Cols, Rows: Podemos definir los frames como columnas o filas, y para indicar su tamaño tenemos varias opciones: o En pixels: Por ejemplo, <FRAMESET COLS="100, 500, *"> Le estamos diciendo al navegador que hay tres frames columna: el primero tiene un ancho de 100 pixels, el segundo, 500, y el tercero debe rellenar el resto de la pagina o En porcentaje: <FRAMESET COLS="15%, 85%"> Dos frames, uno que ocupa el 15% de la pantalla y otro, el 85%. • Hay otros atributos, como Frameborder, border, framespacing.
- 11. <FRAME> Define las caracteristicas de un frame en concreto: • SRC: Fichero .htm que debe cargar en el frame. • name: Nombre del frame. Muy importante porque se necesita para los enlaces (links). • Scrolling: Nos permite decidir si queremos que aparezca la barra deslizadora. • Noresize: (Sin valor numerico). Si lo añadimos, el frame no podra redimensionarse con el mouse. <NOFRAMES> Lo que va dentro de este tag aparecera en los navegadores que no soporten frames. Ahora que hemos creado la pagina con las definiciones de los frames, nos faltan crear dos paginas mas: el menu y la portada. menu.htm <HTML> <HEAD> <TITLE> Menu </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="portada.htm" TARGET="contenido"> Portada </A> <P><A HREF="pagina1.htm" TARGET="contenido"> Pagina1 </A> </BODY> </HTML> Es simplemente una pagina con dos opciones de menu (dos links), y lo unico que ha cambiado es que el tag <a> del link, tiene el atributo <target="contenido">. La pagina enlazada se abrira en "contenido" que es el frame derecho que hemos definido antes. portada.htm Vamos a guardar dos paginas muy sencillas: portada.htm y pagina1.htm: <HTML> <HEAD> <TITLE> Portada </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>Esto es la portada</h1> </BODY> </HTML> <HTML> <HEAD> <TITLE> pagina 1 </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>Esto es la pagina numero 1</h1> </BODY> </HTML> Los frames tienen varias ventajas e inconvenientes, pero se ha abusado tanto de ellos que ultimamente estan en desuso. En general no se deberia: • Nunca usar mas de dos frames en una pagina. • Encerrar dentro de un frame un enlace externo. Para que un enlace rompa los frames debemos escribir <target="_top">, o para que se abra en una nueva ventana, <target="_new">. _________________________________________________________________________