Este manual se ha desarrollado con el fin de brindar los conceptos fundamentales del lenguaje HTML para la construcción de páginas Web.

Transcripción

1 MANUAL BÁSICO DE HTML Introducción Este manual se ha desarrollado con el fin de brindar los conceptos fundamentales del lenguaje HTML para la construcción de páginas Web. Actualmente existen muchos programas para la elaboración de páginas sin necesidad de saber nada del lenguaje HTML, pero es bueno conocerlo para entender como están hechas y como es que en realidad funcionan. El lenguaje HTML esta formado por códigos o etiquetas; este último nombre es el que la mayoría de los libros o manuales utilizan. Para poder construir una página web se necesita de un editor de texto, y un navegador como Internet Explorer para poder visualizarla. Los editores de texto más recomendados para utilizar son el Bloc de Notas de Windows y el editor de DOS. Si va a utilizar el Bloc de Notas, cuando escriba la página vaya al menú Archivo y seleccione Guardar como; donde dice Tipo de archivo escoja Todos los archivos y donde dice Nombre escriba uno cualquiera seguido de.html. Ej: examen.html Para abrir el editor de DOS, entre a DOS 1 y escriba edit. Una vez que haya escrito la página vaya al menú Archivo ( ALT + A ) y seleccione Guardar como ; lo único que debe tener en cuenta es que el nombre tenga esta forma : nombre.html. 1 Abrir DOS : Inicio, Programas, MS-DOS 1

2 Página básica MANUAL BASICO DE HTML Lo que está escrito a continuación son los códigos para elaborar una página web básica sin ningún contenido : <html> <head> <title> mi primera pagina web </title> </head> <body> </body> </html> Todos los comandos o códigos HTML están encerrados entre TAGs, es decir entre los símbolos menor (<) y mayor (>). También la mayoría de los códigos tienen una etiqueta de inicio y una de cierre; esta última tiene adicionalmente el carácter slash / ; ejemplo : <body> y </body>. El código <html> debe ir al comienzo y al final porque indica que es un documento HTML; luego viene <head> que significa encabezado y dentro de éste viene el código <title> que es el título que aparecerá en la franja azul del navegador en la parte de arriba. El anterior es el código que debe tener toda página web sin importar cual vaya a ser su contenido. El cuerpo de la página viene después de código <body> y antes de cerrar la misma etiqueta; todos los códigos que se vean más adelante deben ir dentro de estas dos etiquetas. 2

3 Formatos de texto Existen algunos formatos de texto como la Negrilla, el Subrayado, la letra Itálica o Tachada ; también se pueden crear textos de diferente tamaño así : <B> el texto que se escriba entre estas etiquetas saldrá en negrilla </B> <U> el texto que se escriba entre estas etiquetas saldrá subrayado </U> <I> el texto que se escriba entre estas etiquetas saldrá en itálica </I> <S> el texto que se escriba entre estas etiquetas saldrá tachado </S> Tamaños de texto : <H1> este texto es grande </H1> <H2> este texto es menos grande </H2> <H3> este texto es más pequeño </H3> <H4> este texto es más pequeño </H4> <H5> este texto es más pequeño </H5> <H6> este texto es el más pequeño </H6> Estas etiquetas se pueden combinar con el comando ALIGN para alinear un texto de cierto tamaño a la izquierda, a la derecha o al centro, (left, right, center) así: <h1 align= right > este texto es grande y sale a la derecha </h1> Un ejemplo utilizando algunos de los formatos anteriores puede ser el siguiente : <html> <head> <title> FORMATOS </title> </head> <body> <H1><B> Nombres </B></H1> <BR> <U> Leonardo </U> <BR> <S> Andrés </S> <BR> <H4> lo anterior fue un ensayo </H4> </body> </html> Cuando quiera ver una página web, por ejemplo la anterior, abra Internet Explorer, vaya al menú Archivo y seleccione Abrir; en la ventana que aparece haga clic en Examinar y busque el nombre del archivo con el que guardó la página. 3

4 La página anterior debe verse así en el navegador : Nombres Leonardo Andrés Lo anterior fue un ensayo El código <BR> se utiliza para pasar a una nueva línea; es como si oprimiera la tecla enter cuando está escribiendo un documento en Word. Este código no lleva etiqueta de cierre. Como también puede ver en el ejemplo anterior, se combinaron códigos, es decir, se escribió un texto en tamaño grande y a la vez en negrilla. Otro código que no lleva etiqueta de cierre es <HR>,el cual se utiliza para colocar una línea o separador horizontal de lado a lado de la hoja. Atributos de BODY En las páginas html se pueden definir también otros formatos; por ejemplo el color de fondo, el color del texto, el color de un enlace, etc. Para esto se utilizan otros códigos que deben ir dentro de la etiqueta <body> al comienzo únicamente: bgcolor=black para el color de fondo de la página; en este caso negro. background= paisaje.jpg para colocar una imagen de fondo a la página. text=blue para definir el color del texto. link=yellow para definir el color que tendrán los enlaces. vlink=red para definir el color de un enlace cuando de ha visitado. alink=green para definir el color de los enlaces activos. Los nombres de los colores que utilice se deben escribir en inglés. Otra forma de especifi car un color es combinar 6 números en hexadecimal para definir la cantidad de rojo, verde y amarillo que tendrá el color de fondo #RRVVAA; por ejemplo para un color solamente rojo se escribiría bgcolor= #FF0000. Si se escribe FF se obtiene el máximo de color, y el 00 significa la ausencia de color. Ejemplos de uso : <body bgcolor=black text=white link=yellow vlink=green> ó <body background= paisaje.jpg bgcolor=# text=#600000> 4

5 El elemento bgcolor y background se pueden colocar al mismo tiempo siempre y cuando la imagen no cubra toda la pantalla ya que no tendría sentido el color de fondo. La etiqueta de cierre de body se deja igual </body>. Cuando este viendo una página html en el navegador (Internet Explorer) y quiera modificar algo en el código, puede hacerlo entrando al menú Ver y seleccionando la opción Código fuente. Una vez que haya modificado el código de la página, seleccione Guardar en el menú Archivo del editor, regrese al navegador y haga clic en Actualizar u oprima la tecla F5. Enlaces Cuando usted ha visto páginas web en internet, se ha dado cuenta que al pasar el mouse encima de una palabra o una imagen éste cambia a la forma de una mano, indicando que al hacer clic se abrirá otra página. Esto es un enlace. Se pueden hacer enlaces a otras páginas o sitios en internet o hacer enlaces para moverse dentro de la misma página. El código para hacer un enlace a otra página es el siguiente : <a href= pagina2.html > PAGINA DOS </a> El nombre que está entre comillas pagina2.html es la página a la cual voy a ir cuando haga clic en la palabra de enlace, que en este caso es PAGINA DOS. Entre las comillas también puede ir la dirección de una página en internet, por ejemplo : <a href= > BUSCADOR </a> Un ejemplo de uso de este código podría ser el siguiente: <html> <head> <title> ENLACES </title> </head> <body bgcolor=white text=blue link=red vlink=green> Buscadores más utilizados en internet : <br> <a href= > GOOGLE </a> <br> <a href= > ALTAVISTA </a> </body> </html> Esta página en el navegador se debe ver así : 5

6 Buscadores más utilizados en internet : GOOGLE ALTAVISTA Los enlaces dentro de la misma página se utilizan por ejemplo si usted quiere hacer un listado de personajes célebres por algo, en orden alfabético por apellidos; se puede colocar en la parte de arriba de la página el vocabulario, y que cuando se haga clic en alguna letra, la página se desplace o se mueva más abajo donde empiezan los personajes por dicha letra. Para lo anterior, se debe modificar el código de un enlace así : <a href= #LetraA > A </a> Para la palabra o letra que hará el enlace y para la parte de la misma página a la cual se moverá : <a name= LetraA > A </a> Con el ejemplo anterior, en la página solo se verá en la parte de arriba la letra A, y cuando haga clic sobre ésta, la página se moverá más abajo donde comience lo correspondiente a la letra A. Observe que el código de arriba tiene el símbolo # seguido de una palabra, y el de abajo solo una palabra; ambas palabras deber ser iguales para asegurar que cuando haga clic arriba se mueva abajo al sitio correcto. Ejemplo : <html> <head> <title> Enlaces en la misma página </title> </head> <body> Personajes célebres : <br> <a href= #LetraA > A </a> <a href= #LetraB > B </a>... <a name= LetraA > A </a> <I> Arciniegas Manuel </I> Nacido en Medellín Antioquia en el año de </body> </html> 6

7 Otro tipo de enlaces Si quiere colocar un enlace para descargar o abrir un programa se escribe : <a href= programa.exe > BAJAR PROGRAMA AQUÍ </a> cuando haga clic sobre la palabra BAJAR PROGRAMA AQUÍ, aparecerá una ventana para descargar el archivo o para abrirlo. Si lo que quiere es abrir una imagen : <a href= imagen.jpg > PAISAJE </a> Para colocar un en la página y que al hacer clic encima se pueda enviar un correo, se escribe : <a href=mailto:leomix@hotmail.com> Escríbame aquí </a> Imágenes Para insertar una imagen en una página web se debe escribir el siguiente código: <img src= foto.gif > img = image = imagen src = source = fuente u origen aquí foto.gif es el nombre de la imagen con su respectiva extensión; se pueden colocar imágenes gif y jpg que son las más comunes. A veces cuando una página contiene imágenes y se está cargando, las imágenes no aparecen al instante debido a su tamaño o resolución; para ello, se pueden cargar imágenes con una resolución baja para que cargen mientras aparecen las verdaderas. Se utiliza el comando lowsrc así: <img src= uno.jpg lowsrc= unobajo.jpg > Es bueno aclarar en este punto que todos los archivos que conformen la página o si son varias páginas, todos deben estar guardados en un mismo sitio en el computador; por ejemplo todas las páginas y sus archivos guardados en Mis documentos. Lo anterior con el fin de que al cargarse la página queden activos también los archivos que la conforman. 7

8 Si quiere construir un enlace a otra página o sitio en internet mediante una imagen en lugar de una palabra de enlace, escriba el siguiente código ( teniendo en cuenta que los nombres de la imagen y de la página son los que usted necesite ) : <a href= pagina2.html > <img src= siguiente.gif > </a> El tamaño de una imagen se puede controlar de la siguiente manera : <img src= foto.gif width= 200 height= 150 > El ancho (width) y el alto (height) son números o porcentajes. Si se quiere que aparezca un mensaje o una descripción al pasar el mouse encima de la imagen se utiliza el comando alt así : <img src= foto.gif alt= breve mensaje > Las imágenes se pueden alinear con el texto de diferentes formas : a la derecha, a la izquierda, arriba, abajo, etc. (right, left, top, bottom, middle, justify); para esto se escribe el siguiente código para la imagen y luego va el texto : <img src= carros.jpg align=right> el texto puede ir aquí. Si quiere colocarle o quitarle el borde a una imagen modifique la propiedad border de la siguiente forma (border=0 quiere decir sin borde) : <img src= carros.jpg border=1> En la etiqueta img se puede también definir el espacio que debe tener entre la imagen y e texto que se encuentre cerca. Ejemplo, insertar una imagen y dejar 5 pixels horizontal y verticalmente: <img src= foto.jpg hspace=5 vspace=5> 8

9 Listas En html se pueden crear listas ordenadas y listas desordenadas; para las primeras se utiliza el código OL y para las otras el código UL. El siguiente es un ejemplo de una lista ordenada : <OL> <LI> primer elemento </LI> <LI> segundo elemento </LI> <LI> tercer elemento </LI> </OL> Si no se indica ningún tipo de ordenamiento, la lista anterior se verá en el navegador así : 1. primer elemento 2. segundo elemento 3. tercer elemento Si se quiere que en lugar de números aparezca otro tipo, se puede utilizar letras minúsculas, mayúsculas y números romanos así : <OL TYPE= a > <OL TYPE= A > <OL TYPE= I > la lista saldrá a. b. c.,... hacia abajo. la lista saldrá A. B. C.,... hacia abajo. la lista saldrá I. II. III. IV,... hacia abajo. Las listas desordenadas tienen una viñeta por defecto, pero al igual que las listas ordenadas se les puede cambiar por disc, circle o square : Código html <UL> <LI> casa </LI> <LI> perro </LI> <LI> juguete <LI> </UL> <UL TYPE= SQUARE > <LI> casa </LI> <LI> perro </LI> <LI> juguete <LI> </UL> Así se ve casa perro juguete casa perro juguete 9

10 Existen otro tipo de listas llamadas de definición; se utilizan para colocar términos y a un lado las definiciones. Ejemplo: Código html <DL> <DT>Termino 1 <DD> definición <DT> Término 2 <DD> definición </DL> Así se ve Término 1 definición Término 2 definición Tablas Para construir tablas en html se debe tener en cuenta tres aspectos básicos : la tabla puede tener borde o puede estar sin borde; el código TR significa Table Row, es decir define las filas de la tabla; y el código TD o Table Data define los datos. Una tabla sencilla con bordes de ancho 2 y de 2 filas por 3 columnas se construye así : <table border=2> <tr> <td> Título 1 </td> <td> Título 2 </td> <td> Título 3 </td> </tr> <tr> <td> dato 1 </td> <td> dato 2 </td> <td> dato 3 </td> </tr> </table> 10

11 La tabla anterior se verá en el navegador así : Título 1 Título 2 Título 3 dato 1 dato 2 dato 3 Para colocar en negrilla los títulos de la tabla, es decir la primera fila de datos, se debe escribir TH en lugar de TD. También se puede hacer que una celda de la tabla ocupe varias columnas o varias filas; para ello se le agrega al código de una celda lo siguiente : <td colspan=n> o <td rowspan=n> ejemplo: y <td colspan=3> <td rowspan=2> esto hace que la celda ocupe 3 columnas hace que la celda ocupe 2 filas Hay que tener en cuenta que si una celda va a ocupar por ejemplo 3 columnas, y la tabla es de tres columnas, no se puede definir otra celda en la misma fila; ejemplo : <table border=1> <tr> <th> Nombre </th> <th> Edad </th> </tr> <tr> <td colspan=2> pendiente </td> </tr> <tr> <td> Leonardo </td> <td> 25 </td> </tr> </table> 11

12 La tabla anterior aparecerá en el navegador así : Nombre Edad pendiente Leonardo 25 Formularios Los formularios son hojas en las cuales se piden datos ya sea para una subscripción a algo o para una encuesta. Tienen diferentes tipos de entradas de datos : cuadros de texto, casillas de selección, botones de radio, listas desplegables y botones. Los formularios deben comenzar con el código FORM y terminar con el mismo código. El siguiente es un ejemplo de un formulario con todos los elementos al mismo tiempo : <form action= mailto:leomix@hotmail.com method= post > Nombre : <input type= text name= nombre size= 50 > <br> <input type= text name= size= 30 > <br> Cómo se enteró de este sitio? <br> <select name= vias size= 1 > <option> por un amigo </option> <option selected> navegando </option> <option> con un enlace desde otra página </option> </select> <br> Pasatiempos favoritos : <br> <input type= checkbox name= pasat value= on checked> Música <br> <input type= checkbox name= pasat value= on > Libros <br> <input type= checkbox name= pasat value= on > Internet <br> Quiere recibir noticias de los últimos lanzamientos? <br> <input type= radio name= noticia value= Si checked>si <br> <input type= radio name= noticia value= No >No <br> <textarea name= Comentarios rows=10 cols=60> escriba aquí sus comentarios </textarea> 12

13 <input type= submit value= Enviar > <input type= reset value= Borrar > </form> La parte de arriba del formulario donde dice action= method= post se utiliza para que al oprimir el botón Enviar, el contenido del formulario se vaya a la dirección de especificada en mailto. La palabra name en los códigos del formulario se utiliza para identificar un control en dicho formulario; por ejemplo donde dice Pasatiempos favoritos, se utilizan cuadros de selección o checkbox, y name=pasat quiere decir que esos tres controles tienen que ver con pasatiempos y no con otra información en el mismo formulario. Las palabras checked ó selected se utilizan para dejar como preseleccionada una opción. Los demás controles utilizados en este formulario se pueden entender mejor si copia los códigos y los visualiza en una página web. Mapas de Imagen Se elaboran creando regiones geométricas dentro de una imagen para que sirvan como enlaces a otras páginas o archivos. Ejemplo : La siguiente es una sola imagen que tiene dibujadas tres figuras al lado derecho: un rectángulo, un círculo y un triángulo. A continuación se escribe el código para crear un mapa de imagen con esta figura, de manera que al hacer clic sobre el rectángulo en color rojo se abra la página 1, al hacer clic sobre el círculo se abra la página 2 y al hacer clic sobre el triángulo se abra la página 3. 13

14 <map name="encabezado"> <area shape="rect" coords="143,12,184,28" href="pag1.html"> <area shape="circle" coords="207,24,12" href="pag2.html"> <area shape="polygon" coords="235,31,256,31,245,14" href="pag3.html"> </map> <img src="barra.bmp" usemap="#encabezado"> Las coordenadas del rectángulo vienen dadas por la esquina superior izquierda y la esquina inferior derecha; las del círculo son las coordenadas del centro y el radio y las del triángulo u otra figura son las coordenadas x e y de cada vértice. Existen programas para la creación de mapas de imagen, pero si lo quiere hacer manualmente, la forma más sencilla es hacer o abrir una imagen en Paint en Windows y anotar las coordenadas de las regiones o figuras, las cuales aparecen en la parte de abajo a la derecha de la ventana al pasar el mouse sobre la imagen. Marcos o Frames Consiste en dividir la ventana principal del navegador en dos o más ventanas; cada una de éstas es una página html normal. La página principal que contendrá a las otras páginas tiene el siguiente código : Esta página tiene dos marcos : <html> <head> <title> PAGINA CON FRAMES </title> </head> <frameset cols= 30%,70% > <frame src= paga.html > <frame src= pagb.html > </frameset> </html> Como se puede observar aquí, el código de la página anterior no tiene la etiqueta body ; ésta fue reemplazada por frameset. La palabra cols quiere decir que habrá una división vertical (columnas) en la página, y los porcentajes definen el tamaño de cada ventana. Hasta este momento se tiene una página principal dividida en dos, cada una con una página normal; pero la idea es que haya algún tipo de comunicación entre éstas. Para ello, se creará en la página A ( paga.html ) un pequeño menú con dos 14

15 opciones; cada una será un enlace a otra página; éstas últimas aparecerán al lado derecho de la ventana principal cuando se haga clic respectivamente al lado izquierdo. El código debe modificarse de la siguiente manera para la página anterior, teniendo en cuenta que debe dársele un nombre al frame que mostrará los enlaces : <html> <head> <title> PAGINA CON FRAMES </title> </head> <frameset cols= 30%,70% > <frame src= paga.html > <frame src= pagb.html name= frame2 > </frameset> </html> frames.html Como la página A tendrá el menú con las dos opciones ( enlaces ), éstos deberán tener algo adicional en el código : <html> <head> <title> PAGINA A </title> </head> <body> <b> MENU </b> <br> <a href= pag1.html target= frame2 > PAGINA 1 </a> <br> <a href= pag2.html target= frame2 > PAGINA 2 </a> </body> </html> paga.html Cada enlace de ésta página debe especificar que debe aparecer en el espacio llamado frame2, que fue definido anteriormente. 15

16 Texto en Movimiento Con la siguiente etiqueta y sus propiedades se puede insertar un texto en movimiento : <MARQUEE WIDTH="nn" HEIGHT="nn" ALIGN="aaaa" BEHAVIOR="bbbb" BGCOLOR="#rrvvaa" DIRECTION="cccc" SCROLLAMOUNT="nn" SCROLLDELAY="ms" LOOP="nn" HSPACE="nn" VSPACE="nn"> </MARQUEE> Esto es lo que significa cada atributo: WIDTH="nn" HEIGHT="nn" ALIGN="aa" Ajusta el ancho de la marquesina en pixels o en porcentaje. Determina el alto de la marquesina. Donde "aa", puede ser "TOP", "MIDDLE", o "BOTTOM" y modifica el ajuste del texto que rodea a la marquesina. BEHAVIOR="bb" Donde "bb" es el tipo de comportamiento del texto dentro de la marquesina. Su valor puede ser, "SCROLL" que es el valor por defecto, el texto aparece por un lado, se desliza por la marquesina y desaparece por el otro. "SLIDE" aparece por un lado y cuando llega al otro se queda ahí. "ALTERNATE", el texto se desplaza de un lado al otro, dentro de los limites de la marquesina. BGCOLOR="#rrvvaa" Es el código en hexadecimal de los colores del fondo de la marquesina. DIRECTION="cc" Donde "cc" representa la dirección en que se mueve el texto en la marquesina y su valor puede ser "LEFT" que es el valor por defecto y "RIGHT" que moverá el texto hacia la derecha. SCROLLAMOUNT="nn" Donde "nn" está en pixels y define la cantidad de desplazamiento del texto en cada avance, cuanto mayor sea el número mas rápido se desplazará. SCROLLDELAY="ms" Define, en milisegundos, el tiempo entre cada movimiento, cuanto mayor es el numero mas lento avanza. LOOP="nn" HSPACE="nn" VSPACE="nn" Especifica el número de veces que se repetirá, por defecto es indefinido. Define en pixels el espacio horizontal al que debe estar el texto que rodea la marquesina. Define en pixels el espacio vertical al que debe estar el texto que rodea la marquesina. 16

17 Sonido de fondo Mediante un código sencillo que se escribe dentro de la etiqueta body es posible colocarle un sonido de fondo a la página con las siguientes características : <body bgsound= agua.wav loop=infinite> El ejemplo anterior emite el sonido agua.wav desde el momento en que comienza a cargarse la página, y se continuará emitiendo hasta que se cambie de página, ya que el comando loop esta en infinito. Para que suene un cierto número de veces, basta con colocar loop=n donde n es el número de veces. Las páginas Web también pueden llevar enlaces hacia archivos de sonido, de la misma forma cono se crean los enlaces hacia una imagen; pero este tipo de archivos pueden tratarse de una manera especial. El siguiente ejemplo inserta una pequeña consola de control en la página para un archivo de sonido: <embed src= audio.aiff width=140 height=60 autostart=false volume=100 controls=console> Otros Comandos ó Etiquetas Etiqueta pre : se utiliza cuando se quiere construir un párrafo o texto con los espacios que se quieran definir; es decir, lo que se escriba entre estas etiquetas aparecerá de la misma forma en el navegador. Etiqueta blockquote : el texto que se escriba entre estas etiquetas aparecerá en forma de cita en un bloque separado de la pantalla. Para establecer un tipo de letra en especial para una parte o todo el documento, se utiliza el siguiente comando : <font face= Arial > se escribe texto aquí </font> Los tipos de letra que se escriben aquí son los nombres que se ven por ejemplo en Word. La etiqueta font también se puede utilizar para establecer el tamaño y color de la letra : 17

18 <font size=4 color=blue face= Comic Sans MS > el texto que se escriba aquí saldrá con tamaño 4, color azul y tipo de letra Comic Sans. </font> Cuando se crean páginas Web, a veces los navegadores no muestran las tildes o muestran las palabras que llevan tilde con un carácter extraño; si lo anterior le ocurre, los comandos necesarios para colocar las tildes son : Letra á é í ó ú Comando &aacute &eacute &iacute &oacute &uacute Videos De la misma manera como se crean enlaces hacia un archivo en particular, se pueden crear enlaces hacia un video, pero adicionalmente a eso, se pueden utilizar otros comandos para ejecutar un video sobre la página Web. Ejemplos: <img dynsrc= video.avi > inserta un video el cual se empieza a ejecutar cuando se carga la página. Adicionalmente a esto, al comando img se le pueden agregar los siguientes comandos : Loop=n Alt= descripción Width=n Height=n Hspace=n Vspace=n Start= Para repetir el video n número de veces. Para mostrar una descripción cuando no se carga el video. Para definir el ancho en pixels del video. Para definir el alto en pixels del video. Deja n espacios horizontalmente entre el video y el texto que haya. Deja n espacios verticalmente entre el texto. Si se escribe MOUSEOVER el video comienza a reproducirse cuando se pasa el mouse por encima. 18

19 Para ver videos o reproducir sonidos en Netscape, se utiliza el comando Embed. Ejemplo: <embed src= baile.mpg > El anterior comando también acepta el ancho y el alto para el video, el loop y con el comando AUTOSTART=TRUE o FALSE se inicia el video al cargarse la página o cuando se haga clic encima respectivamente. 19