Curso Completo de HTML, Diapositivas de Sistemas de Comunicación Digital

¡Descarga Curso Completo de HTML y más Diapositivas en PDF de Sistemas de Comunicación Digital solo en Docsity!

por Jorge Ferrer

por Víctor García

por Rodrigo García

por Jorge Ferrer por Víctor García por Rodrigo García

Este es un curso tremendamente completo, guiado y con ejemplos y prácticas pensadas para convertirlo en una guía didáctica para aprender a hacer páginas web. No se requieren más que conocimientos básicos de informática para llevarlo a cabo y se cubren desde los aspectos más básicos de HTML hasta los más avanzados. Todo ello resaltando en todo momento las partes más importantes de este lenguaje y la mejor forma de emplearlo. Esperamos que lo disfrutes.

Copyright Jorge Ferrer, Rodrigo Garcia y Victor García. Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra versión posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html

Para obtener la última versión de este documento, informar de fallos que hayas encontrado o colaborar a su mejora visita http://freek.jorgeferrer.com.

ENVÍO DE FICHEROS USANDO FORMULARIOS..................................... 429

vii

Lista de figuras

1.1. Aunque al principio el texto predominaba en el WWW, en la actualidad las imágenes son mayoría como podemos observar en una de las principales webs del proyecto KDE................................ 1 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una

La primera página Web

1.3. Algunos editores WYSIWYG permiten, además, modificar el código HTML directamente....... 4 1.4. Los navegadores en modo texto como Lynx también pueden mostrar páginas Web gracias al carácter descriptivo de HTML.......................................................................... 6 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta para crear una línea horizontal...................................................................... 9 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE................................. 9 2.1. Estructura de bloques de un documento HTML.............................................. 11 2.2. El título de la página es mostrado en la parte superior de la ventana del navegador.............. 12 2.3. Cuando los navegantes incluyan nuestra página a su menú de favoritos en su menú aparecerá el título que le hayamos dado a nuestra página con la etiqueta .................................. 13 2.4. En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página........................................................... 14 2.5. Distintos tipos de encabezados vistos con Microsoft Internet Explorer......................... 16 2.6. Distintos tipos de encabezados vistos con Netscape Navigator................................ 18 2.7. Ejemplo de página Web con dos tipos de encabezados y dos párrafos......................... 19 2.1. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal.................................................................... 21 2.2. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo ’size’............................... 22 2.3. Ejemplo de un párrafo con un salto de línea y la división del mismo texto en dos párrafos....... 24 2.4. Con el atributo ’align’ se pueden crear párrafos alineados a la derecha, centrados o alineados a la izquierda................................................................................... 25 2.5. Con los nuevos atributos de la etiqueta <hr> podemos controlar el ancho, grosor alineamiento y sombra de la línea horizontal........................................................................ 27 2.6. La etiqueta <blockquote> es usada para insertar bloques de texto que citan a otro autor. Los navegadores suelen introducir un sangrado en este texto..................................................... 29 2.7. En esta página se observa como al final de la página se han incluido datos de los autores y de la página. Para ello se ha usado la etiqueta <address>..................................................... 30 2.8. Con la etiqueta <center> es posible centrar cualquier elemento de nuestra página como por ejemplo el verso de Lorca de la figura 2.6................................................................ 31 2.9. Al insertar una imagen esta se entremezcla con el texto. Cuando la imagen es pequeña se crean interesantes efectos como este................................................................ 31 2.10. Al pulsar sobre un enlace hipertexto saltaremos a otra página de Internet. Los navegadores resaltan estos enlaces para que sea fácil identificarlos................................................... 33 2.11. Página que agrupa todos los enlaces de un sitio web........................................ 35 2.12. La práctica 1 propone realizar un página a partir de lo mostrado en esta figura................ 37 2.13. Estructura de los enlaces normales. Al pulsar sobre el texto activo no podemos elegir el lugar de la página al que saltamos, iremos siempre al comienzo............................................. 42 2.14. En la sección superior puede verse ver una serie de enlaces (las letras mayúsculas) a anclas. En la sección superior se muestra el lugar al que se ha saltado al pulsar sobre la letra S. Podemos deducir que antes de la palabra Salud hay un ancla......................................................... 43 2.15. Estructura de un enlace a un ancla de la misma página. Cuando pulsamos sobre el enlace el navegador nos transporta hasta el lugar de la página donde está el ancla..................................... 46 2.16. Estructura de un enlace a un ancla de otra página. Cuando pulsamos sobre el enlace vamos hasta otra página, pero no al comienzo sino al lugar concreto donde está el ancla............................ 48

viii

4.14. Al mostrar la página los navegadores actúan como si los comentarios no existieran. Como vemos Explorer permite comentarios multilínea y con etiquetas dentro.................................. 93 4.15. Pantalla de presentación de la segunda página web de nuestro website. Es importante mantener un parecido entre todas las páginas que lo componen............................................... 96 4.16. En la sección ’Los Alpes - 20 años a su servicio’ podemos apreciar el uso de la etiqueta BLOCK- QUOTE y de una lista no ordenada............................................................ 97 4.17. Logo de los alpes....................................................................... 99 4.18. Letrero de ’Los Alpes’ que, junto con el logo, aparecerá en todas las páginas del sitio web..... 99 5.1. Aprovechando las capacidades del HTML para incluir colores e imágenes en un Web podemos conseguir resultados tan atractivos como el que observamos en el web de Disney................. 103 tabla 5.1. Colores usados más frecuentemente.................................................. 105 5.2. El lenguaje HTML nos permite cambiar el color de fondo de nuestras páginas. Podemos indicar el color por su nombre en inglés o con su número RGB................................................ 108 5.3. También podemos cambiar el color del texto, de los enlaces, de los enlaces visitados y de los enlaces activos a nuestro gusto, igual que hacíamos con el fondo........................................ 109 5.4. Para crear un mayor impacto visual podemos usar como fondo una imagen, esta imagen se replicará (es puesta en mosaico) por toda la página, luego los bordes deben coincidir.......................... 111 5.5. En esta ocasión la imagen de fondo es un logo sobre un fondo de color sólido (gris). Esta es una manera sencilla para que no se noten los bordes cuando el navegador la pone en mosaico.................. 111 5.6. Esta es la imagen usada como fondo en la página de la figura 5.4. Como vemos, es de pequeño tamaño, pero al coincidir sus bordes simula una imagen que ocupa toda la pantalla........................ 112 5.7. También podemos poner fotos como fondo de la página, pero hay que tener cuidado porque los bordes no encajan y además la página queda demasiado sobrecargada.................................. 113 5.8. Podemos apreciar la diferencia entre insertar una imagen dentro del encabezado o insertarla fuera, en cuyo caso queda en la línea superior.......................................................... 115 5.9. Como veíamos en el fascículo 2 (fig. 2.9) cuando la imagen es pequeña puede entremezclarse con el texto sin problema.......................................................................... 117 5.10. Cuando la imagen es grande, al insertarla en una línea de texto ésta queda muy separada de la línea anterior en lugar de envolver la imagen....................................................... 117 5.11. Con las técnicas de alineamiento del lenguaje HTML que estudiamos en este capítulo podemos crear interesantes efectos como texto envolviendo a una imagen...................................... 119 5.12. Ejemplos de align=top. En el primer caso la parte superior de la imagen coincide con la del texto y en el segundo con la parte superior de la imagen azul............................................. 120 5.13. Ejemplos de align=middle. En el primer caso el centro de la imagen coincide con la base del texto, en el segundo intenta centrarse con la imagen azul................................................ 121 5.14. Ejemplos de align=bottom. En ambos casos la parte inferior de la imagen se alinea con la base del texto, aunque la imagen azul baje por debajo.................................................. 122 5.15. Alineando una imagen a la izquierda con align=left conseguiremos que el texto envuelva a la imagen.

........................................................................................... 124 5.16. Usando align=right conseguimos igualmente que el texto envuelva a la imagen pero ahora ésta se situará a la derecha de la página.............................................................. 125 5.17. Usando el atributo clear de la etiqueta br podemos terminar el texto envolvente y seguir escribiendo debajo de la imagen........................................................................ 126 5.18. Usando los atributos hspace y vspace podemos controlar la separación entre la imágen y el texto que la envuelve................................................................................ 128 5.19. Combinando las etiquetas img y a adecuadamente podemos crear imágenes enlace. Los navegadores indican esto mostrando un borde azul alrededor de estas imágenes............................... 130 5.20. Las imágenes enlace tienen un borde azul por defecto, pero podemos quitarlo o variar su grosor usando el atributo BORDER de la etiqueta IMG....................................................... 131 5.21. Las imágenes enlace se usan a menudo para crear iconos de navegación como los que aquí vemos. En estos casos es conveniente quitar el borde usando BORDER=0.................................. 132 5.22. Las imágenes normales también pueden tener un borde de grosor variable, aunque en este caso el color no es azul, sino negro....................................................................... 132

x

5.23. Usando los atributos WIDTH y HEIGHT podemos variar el tamaño de las imágenes. Si sólo usamos uno la otra dimensión se ajusta para mantener las proporciones.................................. 134 5.24. Si incluimos junto con la imagen la información de sus dimensiones el navegador podrá reservar espacio para ellas con sólo leer el código..................................................... 136 5.25. Con el atributo ALT podemos especificar un texto alternativo a las imágenes. En esta figura vemos como lo muestran Explorer y Netscape....................................................... 138 5.26. Algunos navegadores como Explorer muestran el texto de ALT como un bocadillo que aparece cuando ponemos el cursor encima de la imagen....................................................... 139 5.2. Extensiones y breve descripción de los principales formatos de imágenes usados en el WWW... 141 5.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen y en el segundo la imagen completa reducida, el efecto es similar en ambos casos......................................... 142 5.28. Imagen completa que será mostrada cuando el visitante seleccione los enlaces que acompañan a los thumbnails de la figura 5.27................................................................. 143 5.29. En la página principal de POST-IT vemos un excelente ejemplo de la utilidad de las imágenes mapa. 145 5.30. En esta figura podemos ver los valores que puede tomar el atributo COORDS en función de si la zona es rectangular, circular o poligonal........................................................... 148 5.31. Imagen mapa que puede sustituir el menu en forma de lista de la página de la agencia de viajes Los Alpes..................................................................................... 150 5.32. Mientras que el tamaño de la imagen JPEG es mucho menor la pérdida de calidad apenas es apreciable.

........................................................................................... 151 5.33. En ocasiones, especialmente si usamos una imagen como fondo, se consigue un efecto mucho mejor haciendo que nuestras imágenes sean transparentes............................................ 153 5.34. Aspecto final de la página de Los Alpes después de aplicar los conocimientos sobre imágenes que hemos adquirido en este capítulo............................................................. 155 7.1. En el web de GNOME Hispano encontramos multitud de elementos, gráficos y texto, con una disposición muy cuidada. ¿Cómo lo hacen? Con tablas......................................... 157 7.2. Ya hemos creado nuestra primera tabla, aunque es sencilla ya podemos observar varias cosas curiosas en ella, por ejemplo que por defecto no se dibujan los bordes.................................... 161 7.3. En esta segunda tabla ya podemos ver como son mostrados los encabezados de tabla.......... 163 7.4. Tabla con bordes. En esta tabla podemos observar lo que ocurre cuando una fila tiene más celdas que otra o cuando insertamos una celda sin nada dentro............................................ 165 7.5. Tabla con celdas vacías. Poniendo
o las celdas que antes no existían ahora si son dibujadas, pero sin nada dentro........................................................................ 169 7.6. Con la etiqueta CAPTION podemos poner un título a la tabla. Este título puede situarse encima (ALIGN="top") o debajo (ALIGN="bottom") de la tabla....................................... 172 7.7. Con el atributo ALIGN podemos controlar el alineamiento de la tabla. Si elegimos ALIGN="left" el texto bordeará a la tabla al igual que ocurría con las imágenes................................... 174 7.8. Usando alineamiento a la derecha (ALIGN="right") conseguimos un efecto muy similar al alineamiento a la izquierda.............................................................................. 175 7.9. Con ALIGN="right" la tabla se sitúa en el centro de la ventana del navegador y el texto ya no la envuelve.................................................................................. 176 7.10. Distintas posibilidades de los alineamientos vertical y horizontal de las celdas de una tabla.... 177 7.11. El punto azul de esta figura nos permite observar el alineamiento por defecto de los encabezados de tabla (TH) y de las celdas normales (TD)...................................................... 178 7.12. Usando los atributos ALIGN y VALIGN en la etiqueta TR cambiamos el alineamiento por defecto de las celdas de esa fila, pero aún podemos modificar ese alineamiento usando los mismos atributos en cada celda...................................................................................... 180 7.13. Este será el objetivo del ejercicio 7.2. Una pista: debemos usar los atributos WIDTH, HEIGHT, ALIGN y VALIGN......................................................................... 182 7.14. Usando el atributo NOWRAP evitamos que el texto sea partido en varias líneas, sin embargo no es recomendable usarlo en líneas muy largas como esta........................................... 185

xi

7.9. Usando el atributo TYPE en una etiqueta LI podemos cambiar la viñeta de un único elemento de lista sin afectar a los demás...................................................................... 244 7.1. Los cinco tipos distintos que puede tomar el atributo TYPE para listas ordenadas.............. 245 7.10. Con el atributo TYPE podemos elegir entre 5 tipos distintos de numeración en las listas de HTML. En esta figura vemos los 4 nuevos............................................................... 246 7.11. Si usamos el atributo START podemos variar el número (o letra en estos casos) por los que se empiezan a numerar los elementos de la lista........................................................... 247 7.12. Con el atributo VALUE podemos indicar el valor de la numeración de cada uno de los elementos de las listas numeradas........................................................................ 248 7.13. Con la nueva etiqueta DIV podemos cambiar el alineamiento de todo tipo de elementos HTML (imágenes, listas, párrafos, etc.) de una sola vez............................................... 250 7.14. Los buscadores permiten a los navegantes encontrar la información que buscan. Usando la etiqueta META podemos proporcionarles datos para que incluyan nuestras páginas en sus bases de datos.... 253 8.1. Los frames nos permiten dividir la ventana del navegador en varias secciones diferentes. En este caso la ventana a sido dividida en 4 frames........................................................ 257 8.2. En el Web www.chess.com podemos ver un excelente ejemplo del uso de frames para mantener visibles las barras de navegación.................................................................... 259 8.3. Usando el atributo TARGET podremos lograr que pulsando el enlace de un frame el resultado se muestre en otro............................................................................ 261 8.4. Este debe ser el resultado final tras llevar a cabo todos los pasos en el ejemplo de uso del atributo TARGET para crear varias ventanas.......................................................... 264 8.5. Variando la dirección de base con la etiqueta BASE variará el significado de las direcciones relativas. 267 8.6. En este Web pulsando sobre los enlaces del frame izquierdo nos movemos por los diferentes temas del frame derecho............................................................................. 268 8.7. Los Webs con frames constarán de varios documentos HTML. En este ejemplo al haber tres frames serán necesarios 4 documentos HTML........................................................ 270 8.8. La estructura de las páginas con frames es diferente a las que no tienen. La principal diferencia es la sustitución de BODY por FRAMESET........................................................ 270 8.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20% y del 80% del ancho total de la ventana......................................................... 272 8.10. Las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles. La tercera al haber usado el asterisco ocupará el resto, que en este ejemplo son 372 pixeles................................ 273 8.11. En esta ocasión vemos un ejemplo del uso de FRAMESET combinando los distintos modos de indicar el tamaño y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho............ 275 8.12. Es posible usar los atributos COLS y ROWS simultáneamente para dividir la ventana en varias filas y columnas.................................................................................. 277 8.13. Ejemplo completo de una página con frames formado por un frame izquierdo pequeño que puede servir de índice y otro derecho con el contenido principal....................................... 281 8.14. Usando los diferentes atributos de la etiqueta FRAME podemos tener un mayor control sobre las diferentes características de los frames........................................................ 283 8.15. El navegador NCSA Mosaic no soporta frames, con lo que los usuarios de dicho navegador no verán nada si no usamos la etiqueta NOFRAME..................................................... 285 8.16. En este caso sí hemos usado NOFRAMES ofreciendo al navegante un enlace para ver una versión sin frames de las páginas....................................................................... 286 8.17. Para conseguir estructuras de frames más complejas puede anidarse la etiqueta FRAMESET. En esta figura se indica cómo hacerlo................................................................ 287 8.18. Nuestra primera página con frames. La ventana está dividida en 3 apartados (los frames) el izquierdo es el índice, el superior el título y el central el que tiene el contenido.............................. 290 8.19. En general los navegadores dibujan líneas con aspecto 3-D para separar los frames............ 292

170. Con el atributo BORDERCOLOR podemos elegir el color que queramos para los bordes de los frames. 293

xiii

171. Usando FRAMEBORDER="0" ocultamos los bordes de los frames con lo que se consigue una gran mejora en la apariencia...................................................................... 295 8.22. Aún usando el atributo FRAMEBORDER si hacemos la ventana del navegador pequeña aparecerán barras de desplazamiento en cada uno de los frames............................................ 297 8.23. Con el atributo BORDER podemos cambiar el grosor de los bordes. En este caso el borde horizontal tiene un grosor de 20 pixeles................................................................ 298 8.24. Representación de los cuatro valores especiales del atributo TARGET: _self, _parent, _topy _blank. 300
172. Página Web de Los Alpes creada en la práctica 4 de este curso. Ahora la modificaremos para crear una versión con frames.......................................................................... 302
173. El frame superior será de 163 pixeles, mientras que el inferior ocupará el resto del espacio de la ventana del navegador............................................................................... 304
174. El contenido de banner.htm, el logo y encabezado de Los Alpes así como los botones de navegación, serán mostrados en el frame superior.......................................................... 306
175. Todos los botones tienen como destino el frame principal. Por tanto es conveniente usar la etiqueta BASE con el atributo TARGET=principal..................................................... 308
176. Página sin cabecera, lista para ser insertada en un frame.................................... 309
177. Estructura de frames mostrando la página main.htm en el frame central...................... 311
178. Los frames flotantes nos permiten insertar un documento HTML completo en una página Web.. 313
179. Los navegadores que no soporten frames flotantes mostrarán el código alternativo incluido entre las instrucciones y ...................................................... 314
180. Usando FRAMBORDER=0 podemos eliminar el borde del frame. Sin embargo si el contenido no cabe en frame la barra de desplazamiento sí se mostrará............................................. 316
181. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas característi- cas de los frames flotantes................................................................... 317 10.2. Netscape Navigator permite configurar en este cuadro de diálogo las aplicaciones externas asociadas a cada navegador........................................................................... 320 10.3. RealAudio es un formato de sonido especificamente creado para la red el software necesario para su reproducción puede ser obtenido a través de su Web............................................ 322 tabla 10.1................................................................................. 324 10.4. La organización MPEG es la creadora de este estándar que permite la codificación de audio y vídeo de gran calidad en archivos de pequeño tamaño................................................ 324 tabla 10.2................................................................................. 325 10.5. Al pulsar sobre un enlace a un archvo que no puede mostrar él mismo, Internet Explorer muestra este cuadro de diálogo preguntando al usuario que quiere hacer...................................... 326 10.6. Cuadro de diálogo para archivos externos mostrado por Netscape Navigator. Si elejimos open la aplicación externa asociada será ejecutada.................................................... 327 10.7. Usando el atributo LOWSRC se pueden crear animaciones sencillas pero impactantes como es el caso del web de Spectacle....................................................................... 330 10.8. La marquesina animada muestra un texto que va moviéndose de derecha a izquierda en la ventana del navegador. En esta figura vemos 7 momentos consecutivos..................................... 333 10.9. La etiqueta MARQUEE está acompañada de numerosos atributos que nos permiten controlar la apariencia de la marquesina................................................................. 336 10.10. Internet Explorer 4.0 incluye una serie de nuevas tecnologías entre las que destacan los nuevos controles multimedia....................................................................... 338 10.11. Macromedia distribuye a través de su Web el plug-in necesario para visualizar en un Web animaciones creadas por su herramienta Director.......................................................... 340 10.12. Si el navegador tiene algún problema con el plug-in muestra un icono y un espacio en blanco que puede estropear la apariencia de nuestra página................................................ 342 10.13. Usando los atributos WIDTH y HEIGHT de la etiqueta EMBED podemos lograr que los controles de sonido aparezcan. Internet Explorer usa los controles de Windows............................ 344 10.14. El plug-in usado por Netscape navigator ha creado sus propios controles que tienen la capacidad añadida de poder controlar el volumen........................................................ 345

xiv

12.17. Los navegadores en modo texto como Lynx también son capaces de mostrar formularios, que aunque no sean gráficos tienen la misma funcionalidad................................................ 403 12.18. En esta figura podemos apreciar cajas de texto y de clave, botones de elección y cajas de selección tal y como son mostradas por Lynx........................................................... 403 12.19. El atributo TITLE es una extensión de Microsoft que permite dar una descripción a los controles que será mostrada en un bocadillo............................................................... 405 12.20. Los atributos DISABLED y READONLY permiten deshabilitar un control de manera que sólo sirva para mostrar datos.......................................................................... 407 12.21. Las áreas de texto () permiten al usuario introducir texto de varias líneas como si de un sencillo editor de texto se tratara.......................................... 409 12.22. Lynx muestra las áreas de texto como un conjunto de líneas (tantas como hemos indicado con el atributo COLS) sobre las que el usuario podrá escribir.......................................... 410 12.24. Los cuadros de selección permiten mostrar varias opciones para que el usuario pueda elegir. En esta ocasión vemos su forma de persiana desplegable............................................... 413 12.25. Usando el atributo SIZE con un valor mayor que uno conseguimos que el cuadro de selección se muestre como una lista..................................................................... 414 12.26. Usando el atributo MULTIPLE el usuario podrá seleccionar varias de las opciones que se ofrecen en la lista.................................................................................... 416 12.27. El navegador Lynx también es capaz de mostrar cuadros de selección, por lo que podremos usarlo con libertad................................................................................ 417 12.28. Este es el aspecto inicial de la plantilla del sitio Web de Los Alpes........................ 419 12.29. El primer paso será modificar la plantilla, cambiando el título y la fecha y escribiendo un texto introductorio............................................................................... 419 12.30. Usando los conocimientos adquiridos en este capítulo utilizamos las etiquetas INPUT y SELECT para crear los controles del formulario........................................................ 421 12.31. Usando una tabla de nueve filas y tres columnas controlamos la disposición de todos los elementos de la tabla para conseguir un diseño profesional............................................... 423 12.32. Este es el aspecto final del formulario una vez introducido en la estructura con frames del sitio Web creado en la práctica 5...................................................................... 425 12.33. Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. En ese caso el navegador pedirá al usuario confirmación de la acción................. 428 12.33. Como método alternativo a los CGIs pueden mandarse los datos del formulario por correo electrónico. En ese caso el navegador pedirá al usuario confirmación de la acción................. 430

xvi

Introducción al lenguaje HTML

Jorge Ferrer

Victor García

Versión 1.

Copyright Jorge Ferrer y Victor García. Se otorga permiso para copiar, distribuir y/o modificar este doc- umento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.1 o cualquier otra ver- sión posterior publicada por la Free Software Foundation. Puede consultar una copia de la licencia en: http://www.gnu.org/copyleft/fdl.html

En esta primera entrega de este Curso completo de HTML haremos un primer estudio del lenguaje HTML y analizaremos las herramientas que son necesarias o al menos recomendables para realizar una página web. Además aprenderemos qué es y qué no es el lenguaje HTML; cual es la estructura de una página web; como dar un título a nuestra página y como crear encabezados y texto en ella.

Introducción

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.

Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo ) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orígenes el WWW constaba únicamente de texto en la actualidad es un sistema principalmente gráfico y se puede hacer que las zonas activas sean, no sólo texto, sino imágenes, videos, botones,... en definitiva cualquier elemento de una página. Aún así, el término original no ha sido reemplazado todavía y por tanto será el empleado a lo largo de esta obra.

Introducción al lenguaje HTML

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación de páginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentes tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Qué se necesita para crear una página web

Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto.

Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lo

necesario para crear una página Web

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente

Introducción al lenguaje HTML

cambiar el nombre del archivo desde fuera del programa a index.html o index.htm. Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situación.

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo hará. Por esta razón es una norma general usar siempre minúsculas para los nombres de los archivos html.

Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:

• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas , por ejemplo HotDog™ (Win), HomeSite™(Win),HTML Editor™ (Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux, GNOME).
• Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ™,Quark XPress™ y PageMaker™.
• Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver™, HotMetal™ o Microsoft Frontpage™.