prácticasroble.pntic.mec.es/~jcortijo/base/presenciales/unidad_2/... · 2019-10-15 · • hacer...

Prácticas de html (páginas web)

José A. Cortijo Leno

IES Augustóbriga. Navalmoral de la Mata (Cáceres)


Prácticas de HTML - Página 2 (de 32)



PRÁCTICAS DE HTML

¿Qué es Internet? Puedes imaginártela como la mayor red de ordenadores conectados entre sí, de forma que puedes conectarte a ella cuando quieras. Eso es Internet: una red global que permite a millones de usuarios de ordenadores compartir e intercambiar información. Para utilizar Internet no hay que saber mucho de ordenadores ni entender exactamente cómo funciona la red, pero es necesario tener unas nociones básicas. Internet es una red internacional en la que no todos los ordenadores conectados son iguales o utilizan los mismos programas o sistemas operativos. Por un lado están los servidores, que ofrecen información y servicios a los demás usuarios. Éstos son ordenadores muy potentes y son los principales apoyos de Internet. Por otro lado están los ordenadores que utilizamos para acceder a esos servidores en busca de la información. Son los clientes. Los servicios que nos ofrece Internet son muy variados. Entre ellos destacan:

La World Wide Web (www).- Es el servicio de Internet más conocido. Está formado por las llamadas páginas web, que incorporan texto, imágenes e incluso elementos con propiedades multimedia como vídeo y sonido. Correo electrónico.- Podemos mandar mensajes a cualquier persona que esté conectada a Internet. Los mensajes pueden ser de texto, imágenes o sonido. El correo permite comunicarse de un modo eficiente, rápido y económico. Comunicaciones en vivo.- Varios usuarios de Internet pueden comunicarse entre sí en tiempo real. Esta comunicación puede ser con el teclado e incluso con la voz. Transferencia de archivos.- En Internet hay gran cantidad archivos que son de libre acceso. Foros.- Existen multitud de “sitios” en donde puedes opinar y participar sobre temas muy variados.

¿Qué hace falta para conectarse? Para conectarnos a Internet necesitamos, básicamente, un ordenador con unos requerimientos mínimos y unos programas adecuados, un módem, una línea telefónica a la que poder conectar el ordenador y un proveedor de acceso a Internet.

El ordenador.- En principio el ordenador puede ser de cualquier tipo (PC o Mac), siempre que existan programas adecuados para conectarnos a Internet.



El módem.- Es un aparato que nos permite conectar el ordenador a Internet a través de la red de telefonía básica. Para ello transforman la señal audio del teléfono en señal digital que entiende el ordenador, y viceversa. La velocidad de transmisión de datos de un módem se mide en bits por segundo (bps). También podemos conectarnos a Internet a través de redes digitales, como las RDSI y las ADSL, mucho más rápidas y eficaces, para lo que se necesitan tarjetas de comunicación especiales. El proveedor.- Nuestro ordenador no puede conectarse a Internet directamente; tiene que hacerlo a través de un servidor, un ordenador con acceso directo a Internet. Las empresas que proporcionan este servicio de conexión son los proveedores de servicios de Internet (ISP). Éste es quien proporciona la cuenta: número de teléfono al que llamará el módem, nombre de usuario y la contraseña de acceso. La conexión con el proveedor puede realizarse a través de la red telefónica de ámbito nacional. Así el coste de la conexión es el de una llamada de teléfono local, independientemente del lugar en que se encuentre el proveedor. Los programas.- Además del equipo y la empresa proveedora, necesitamos disponer en nuestro ordenador de una serie de programas: Protocolo TCP/IP (el lenguaje que “hablan” todos los ordenadores de Internet), Navegador (el programa que permite la navegación por Internet), programa de correo electrónico (imprescindible para el envío y la recepción del correo), etc.

Una vez establecida la conexión a Internet de forma remota (con un módem) o de forma directa (con un router) sólo queda ejecutar el programa navegador y, ¡a navegar!

¿Qué es la World Wide Web? Para muchas personas la World Wide Web (telaraña mundial) es sinónimo de Internet. Es la parte más llamativa, variada y fácil de utilizar de Internet. En ella podemos encontrar una enorme cantidad de información. La World Wide Web, también conocida simplemente como web o como www, es un universo de “páginas” relacionadas y enlazadas entre sí. Para acceder a cada página web hay que indicar al ordenador la dirección en que se encuentra. A esta dirección se denomina URL (Localizador Universal de Recursos). Por ejemplo, http://www.cocacola.es. “http://” indica el protocolo o lenguaje de acceso al servidor y “www.cocacola.es” es el nombre del dominio o nombre del servidor.

¿Qué son las páginas web? Una página web es una combinación de texto, imágenes, elementos multimedia en general y enlaces. A esta mezcla de recursos se le suele llamar hipertexto. Los enlaces o vínculos son una referencia a otro documento o recurso (sonido, archivo, texto aparte, etc.) que puede estar situado en la misma página, en el mismo servidor, o en cualquier otra parte del mundo. Cuando el puntero de ratón pasa por encima de un enlace, éste se transforma en una mano con el dedo índice extendido y al hacer clic con el ratón sobre un enlace aparecerá en pantalla un nuevo documento hipertexto, que a su vez tendrá más enlaces a otros servidores de información. A este paso de página a página por la red se le denomina “navegar”.



Las páginas de la web abarcan un amplio abanico de temas, ya que cualquier persona u organización puede poner una página propia. Podemos utilizar la web para nuestro entretenimiento, las actividades comerciales, etc.

¿Cómo acceder a una dirección conocida? Cuando arrancamos el navegador debemos indicarle una URL, o dirección de la siguiente manera:

1. Hacer clic con el ratón dentro de la barra de direcciones. Con esto aparecerá el cursor de escritura en el interior.

2. Escribir la dirección completa dentro de la barra y pulsar la tecla Intro.

¿Cómo navegar por la red? Una vez dentro de la primera página web, puedes acceder a otras partes del documento o a otras páginas pulsando (haciendo clic) sobre los distintos enlaces de la misma. Si colocas el cursor del ratón sobre una imagen y muestras su menú contextual, aparecerá una ventana con la opción de guardar la imagen en tu ordenador como un archivo. Conseguir información en Internet es sencillo cuando conoces la dirección a la que quieres acceder. Pero Internet dispone de una gran cantidad de información cuya dirección desconoces. Para solucionar este problema puedes utilizar los buscadores. Sí, esos ordenadores que están en Internet y que se encargan de acumular y clasificar toda la información que aparece en la red. La mayoría de los navegadores tienen unos botones comunes como: atrás (se vuelve a la última página visitada), adelante (pasas a la página siguiente de una serie de páginas ya visitadas), detener (detiene el proceso de carga), actualizar (se vuelve a cargar la página, apropiado para páginas que actualizan su contenido con rapidez), inicio (se regresa a la pagina inicial, la que se ve cuando se abre el navegador) e imprimir (permite imprimir el contenido de la página). Cuando escribes una dirección en la barra de direcciones del navegador, ésta se incorpora a la lista desplegable de direcciones. De esta forma puedes acceder a cualquiera de los servidores que hayas visitado con sólo hacer doble clic sobre su dirección, tras desplegar la lista. Incluso si empiezas a escribir los caracteres correspondientes a alguna dirección de la lista, el navegador suele completar la dirección. Al navegar por Internet es muy posible que encuentres páginas realizadas en formato PDF. Se trata de un tipo de documentos que, aunque hayan sido elaborados desde programas diferentes, pueden ser leídos por medio de programa Adobe Acrobat. Las ventajas de este tipo de documentos son:

1. Conservan las fuentes, colores, imágenes, etc. del programa con el que fueron creados. 2. No necesitan los programas con los que fueron creados, Acrobat Reader puede visualizarlos.

¿Qué es HTML? El HTML (HiperText Markup Language) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.



Este lenguaje se puede portar, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas. Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto (tipo, color y tamaño de las fuentes), el estilo (negrita, cursiva, etc.) así como la inclusión de tabas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente, etc. El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos etiquetas, una de inicio y otra de final, para conseguir el efecto deseado.

SI ESCRIBIMOS… EL NAVEGADOR MOSTRARÁ… Texto en <B>negrita</B> y en <U>subrayado</U> Texto en negrita y en subrayado

¿Cómo empiezo a escribir HTML? Para comenzar sólo necesitas un editor de texto para escribir las páginas y un navegador para visualizarlas. El editor no debe dar formato al texto. Usa el Bloc de notas de Windows, por ejemplo. Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje ignora los espacios en blanco seguidos, donde sólo cuenta uno de ellos. Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html. Cuando hagas doble clic en él se abrirá el navegador y te mostrará la página. Para ver el contenido de los ficheros anteriores puedes hacerlo de dos formas: mostrando su menú contextual y seleccionando Abrir con/ Bloc de notas o dentro del Explorer, y situando el cursor sobre el texto (no sobre las imágenes), haciendo clic con el botón derecho y eligiendo “Ver código fuente”. Has de tener cuidado con el nombre de los ficheros. Los servidores donde se alojan las páginas sí distinguen entre mayúsculas y minúsculas. No es lo mismo Inicio.htm que inicio.htm.

¿Qué necesito para crear una página Web? Lo primero que debes tener claro es qué contenidos va a tener tu página. Una vez decidido esto, además necesitarás: un navegador.

• Un editor de html o bien escribir todo el código a mano. • Hacer las fotos que vas a poner o escanearlas. • Un programa gráfico para retocar las imágenes. • Espacio en un servidor que albergue la página. • Un programa para subir la página al servidor (cliente FTP) • Dar de alta la página en algún buscador. Si no, sólo accederán los que sepan la dirección exacta.

Y por último, tiempo para el mantenimiento de la página: comprobar los enlaces, actualizar las fotos, el contenido, etc.

TEMA: Estructura básica de un documento HTML

Todos los documentos html tienen la estructura que se muestra a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML> <HEAD>

<TITLE>Título de la página</TITLE> </HEAD>

<BODY>

Aquí iría el contenido de la página </BODY>

</HTML>

Vamos a analizar más detenidamente las distintas secciones que componen la página

Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="description" content="Información de la página, contenidos…"> <meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos"> En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>). El título de la página debe describir su contenido por ejemplo:

<TITLE>IES AUGUSTÓBRIGA </TITLE>

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas:

<script language="JavaScript">  </SCRIPT>



El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc. El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR, parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde y azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>

TEXT, parámetro usado para definir el color del texto. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro. LINK, VLINK, ALINK, parámetros usados para especificar el color de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omisión son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND, parámetro usado para especificar la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).

Sintaxis: <BODY BACKGROUND="ruta/archivo.gif"> Es conveniente especificar la ruta de modo relativo, esto quiere decir que si se cambia el directorio donde están nuestras páginas la ruta especificada debe seguir siendo válida. Por ejemplo si la página se encuentra en el directorio Aprendiendo HTML y el fondo en gifs se debe poner:

<BODY BACKGROUND="gifs/fondo.gif">

Si la página estuviese en ejemplos se pondría: <BODY BACKGROUND="../gifs/fondo.gif">

¿Cómo se establecen los colores? Los colores se forman a partir de tres básicos, que son el rojo, verde y azul. La intensidad de cada componente se expresa como un número hexadecimal de 00 a FF (de 0 a 255 en base 10) Así, por ejemplo, el color rojo se representa #FF0000, porque tiene toda la intensidad de rojo y nada de verde y azul. Observa la combinación de colores básicos: Código Color Código Color Para hacer un color más oscuro, reduce la intensidad del

componente. Ejemplo, #CC0000 (Rojo oscuro). Para crear colores claros debes añadir más intensidad en los otros dos componentes. Ejemplo #FF5555 (Rojo claro).

#FF0000 #00FF00 #0000FF

Rojo Verde Azul

#FFFFFF #000000 #FFFF00

Blanco Negro Amarillo



Ejercicio 1

Elabora una página que muestre en la barra de título del navegador “Mi primera página”. La parte principal de la ventana debe mostrar el nombre de todos los integrantes del grupo.

Ejercicio 2

Modifica la página anterior para que el nombre de los integrantes del grupo aparezca en líneas distintas. Para conseguir un salto de línea puedes utilizar la etiqueta <br>. Existe otra que hace algo parecido, es la etiqueta <p>. Esta última indica comienzo de un párrafo, y la separación entre las líneas es mayor. Pruébalas.

Ejercicio 3

Modifica la página anterior de modo que el texto aparezca sobre un fondo de color claro. Recuerda que trabajamos con el concepto de colores primarios “luz”. Es decir, cuanta más intensidad añadas de cada color, más claro es el resultado.

Ejercicio 4

En el documento anterior, añade el atributo necesario a la etiqueta <body> para conseguir cambiar el color del texto de la página. Realiza todas las pruebas que consideres necesarias. Como podrás observar, las letras oscuras sobre fondos claros se leen con facilidad.

Ejercicio 5

Visita alguna página en Internet que posea un gráfico de fondo. Captúralo y añádelo a tu página. ACLARACIÓN: Para capturar la imagen o fondo de una página debes hacer lo siguiente:

1. Muestra el menú contextual de la imagen o fondo 2. Selecciona Guardar imagen como... o Guardar fondo como... según proceda. 3. Indica la carpeta y nombre con el que quieres guardar el gráfico.



TEMA: Formatos del texto Ejercicio 1

Sobre cabeceras o títulos. Escribe una página que contenga cuatro párrafos. Todos ellos han de tener un título o cabecera de diferentes tamaños. Debes utilizar las etiquetas <h1> (el de mayor tamaño), <h2>, <h3>, <h4>, <h5> o <h6> (el de menor tamaño).

Ejercicio 2

Sobre justificaciones de párrafos. Modifica el documento anterior para que cada párrafo posea una justificación distinta. Debes utilizar la etiqueta <P align=”left o center o right o justify”)>.

Ejercicio 3

Sobre estilos de fuentes. Sobre el documento anterior, introduce en algún párrafo, palabras con los siguientes estilos: negrita (<B>), cursiva (<I>) y subrayado (<U>). Haz que alguna palabra o frase esté en negrita, cursiva y subrayado a la vez. Además, introduce las siguientes expresiones: “H2O” y “aX3 + bX2 +cX + d”. Las etitquetas que permiten el superíndice y subíndice son <SUP> y <SUB> respectivamente.

Ejercicio 4

Sobre el tamaño del texto. Modifica el tamaño base de la letra. Existen 7 tamaños de letras, desde el más pequeño (1) hasta el más grande (7). Aunque el tamaño por defecto es tres, éste se puede modificar. Por ejemplo, <BASEFONT SIZE=4>.

Ejercicio 5

Sobre el tamaño y el color del texto. Modifica el tamaño de la letra de algunas palabras, así como el color en el que están escritas. La modificación del tamaño debes hacerla utilizando los dos métodos que conoces: <font size=nro. color=”#rrvvaa”> o <font size= +nro.>.

Ejercicio 6

Sobre separadores de párrafo. Introduce una línea horizontal como separador de párrafo en el documento anterior. Prueba los atributos align, width, size y color de la etiqueta <hr>. Recuerda que no tiene pareja de cierre.

Ejercicio 7

Vamos a terminar introduciendo al final del documento, la palabra “Arcoiris”. Ésta no podrá tener letras consecutivas del mismo tamaño ni del mismo color.



TEMA: Listas Ejercicio 1

Sobre listas desordenadas. Prueba el siguiente código, o alguno similar, para conseguir el efecto que se muestra a continuación:

H T M L Mostrado por el navegador <ul> <li>FC Barcelona <li>Real Madrid <li>Español <li>Valencia </ul>

• FC Barcelona • Real Madrid • Español • Valencia

Ejercicio 2

Añade al documento anterior una lista como la que se muestra en el ejemplo. Observa que sólo codifico parte del código para que pienses la solución. La viñeta tipo disc aparece por defecto.

H T M L Mostrado por el navegador <ul> <li>Primer término de la lista ? <li type=circle>Segundo elemento de la lista <li type=square>Tercer elemento de la lista </ul>

• Primer término de la lista o Subelemento 1º o Subelemento 2º

o Segundo elemento de la lista � Tercer elemento de la lista

Ejercicio 3

Sobre listas ordenadas. Añade al documento anterior una lista ordenada que muestren los cuatro equipos de fútbol descritos en el ejercicio número 1. En la primera lista el nombre debe ir precedido de números (1, 2, 3, ...), en la segunda lista de letras (a, b, c, ...) y la tercera de números romanos (I, II, III, IV, ...). Recuerda que puedes utilizar la sintaxis:

<ol start =nro type=

I

i

a

A

0

>

Ejercicio 4

Sobre listas de definición. Añade al documento anterior una lista de definición de tres términos.

H T M L Mostrado por el navegador <dl> <dt><b>Sepia</b> <dd>Molusco cefalópodo. <dt><b>Caracol</b> <dd>Molusco gasterópodo. </dl>

Sepia Molusco cefalópodo.

Caracol Molusco gasterópodo.



TEMA: Enlaces Ejercicio 1

Enlace a otro lugar del mismo documento. Elabora una página con un pequeño índice (párrafo 1, párrafo 2 y párrafo 3). Luego introduce líneas hasta conseguir elaborar tres párrafos. Deseo que tras seleccionar alguna de las opciones del índice, la ventana del navegador se sitúe en el párrafo que corresponda. Recuerda que primero has de asignar un nombre a las distintas partes del documento en donde quieres saltar (<a name=”nombre_del_lugar”></a>). Luego, deberás crear los enlaces de la forma que has estudiado en la teoría (<a href=”#nombre_del_lugar”>Texto del enlace</a>).

Ejercicio 2

Modifica el documento anterior para que al final del párrafo exista la posibilidad de volver al índice. Es decir, tras pulsar, por ejemplo, la palabra Volver, la ventana del navegador deberá situarse al principio del documento donde se encontrará el índice.

Ejercicio 3

Enlace a otra página local. Elabora una página llamada index.htm que contenga dos enlaces llamados página 1 y página 2. Deberán enlazar con la páginas pag1.htm y pag2.htm que estarán en la misma carpeta que index.htm. Estas dos páginas podrán tener la información que quieras.

Ejercicio 4

Modifica las páginas pag1.htm y pag2.htm del ejercicio anterior para que desde éstas sea posible volver a la página índice (index.htm) mediante un enlace.

Ejercicio 5

Modifica el ejercicio anterior añadiendo dos nuevos enlaces a dos nuevas páginas (pag3.htm y pag4.htm). Estas dos nuevas páginas deberán encontrarse dentro de una carpeta llamada html visible desde el punto en el que se encuentra index.htm.

Ejercicio 6

Modifica las páginas pag3.htm y pag4.htm para que desde aquí también sea posible volver a la página index.htm mediante dos nuevos enlaces.

Ejercicio 7

Enlaces a direcciónes de Internet. Elabora una página que sea capaz de enlazar con las siguientes direcciones de de Internet:

1. Buscador Google.es (http://www.google.es) 2. Portal de Terra (http://www.terra.es) 3. Cadena de radio COPE (http://www.cope.es)



Ejercicio 8

Enlaces usando imágenes. Modifica el documento anterior de tal forma que el texto que representa el enlace, vaya precedido del logotipo (imagen) correspondiente. Ahora, esta imagen también ha de servir para enlazar con el sitio que se haya seleccionado. Para que te acostumbres a ser ordenado, guarda los gráficos que representan los logotipos en una carpeta llamada figuras, y que también sea visible desde el documento HTML. Recuerda la etiqueta, <img src=”figuras/logo1.gif”>. Es sólo un ejemplo.

Ejercicio 9

En muchas ocasiones la página ha de mostrar fotografías de algún evento social (por ejemplo, el Carnaval de un pueblo). Para que el visitante no se desespere cargando la página debido a la gran cantidad de bits que se deben de utilizar para guardar las fotografías y no abandone la visita a nuestra página, suele utilizarse un truco. En primer lugar se muestra una galería de fotos pequeñas y de escasa calidad. Luego, al pinchar sobre cualquiera de ellas se enlaza con la fotografía original de mayor resolución y más calidad. De esta forma, el visitante sólo visualiza las fotografías de calidad que realmente le interesan. Por tanto, para practicar con esto haremos lo siguiente:

1. Busca o elabora alguna imagen grande, por ejemplo de 300 X 500 puntos. 2. Elabora otra más pequeña (con PAINT por ejemplo) que tenga aproximadamente 100 X

150 puntos, lógicamente de menor calidad. 3. Elabora una página que muestre la imagen pequeña. Al “pinchar” sobre ella enlazaremos

con la fotografía grande y de mayor calidad. Recuerda que para hacer esto deberás utilizar la siguiente sintaxis:

<a href=”imagen_de_calidad”> <img src=”imagen_pequeña”> </a> Ejercicio 10

Enlace con una dirección de correo. Elabora una página que contenga un texto que enlace a una dirección de correo electrónico, por ejemplo el tuyo. Visualízala con el navegador, pincha sobre el enlace, observa cómo se abre el programa de correo electrónico que tiene el ordenador configurado por defecto, observa cómo en el campo Para aparece la dirección que declaraste en el enlace, escribe algo y envíalo. Comprueba que te ha llegado el mensaje.

Ejercicio 11

Modifica el ejercicio anterior para que el texto del enlace de correo vaya precedido de algún gráfico. Ahora tanto el gráfico como el texto enlazarán con el programa de correo. A modo de ejemplo, observa la figura:

Pincha aquí para cualquier sugerencia



TEMA: Imágenes

La etiqueta para incluir una imagen es: <IMG SRC=”URL”>. No existe etiqueta de cierre.

Formatos de imágenes Existen muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En Internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra página la abandone por ello. En los casos en que es necesario poner una imagen con una resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser más paciente. Esto ya ha sido tratado en las prácticas de los enlaces.

Formatos GIF El formato GIF usa 256 colores y se emplea con imágenes pequeñas como iconos. Tiene dos características que lo hacen muy atractivo para el diseño de páginas web. Una de ellas es que uno de sus colores puede ser transparente (en el subformato Gif89a), no mostrándose en la pantalla. Si se elige el color que bordea el motivo principal da la sensación de que la imagen tiene la forma de ese motivo (en realidad todas las imágenes son rectangulares). Otra característica, es que se pueden ensamblar varias imágenes, que se muestran como si fuera una sola, de modo que da la sensación de movimiento. Estas imágenes se llaman Gifs animados y también pueden tener un color transparente.

Formato JPG El formato JPG usa 16.7 millones de colores, por lo que se emplea con imágenes de alta resolución. Con este formato se obtiene un alto grado de compresión más alto que con el Gif y además se puede regular. Cuanto mayor sea la compresión, más perdida de calidad, respecto de la imagen original, se obtiene. Todas las fotos de buena calidad utilizan este formato.

Imágenes entrelazadas GIF y progresivas JPG Cuando se carga una imagen normal en el navegador, éste va mostrándola de arriba abajo. Se puede conseguir que se visualice por capas. En la primera vemos la imagen de un modo borroso y luego se va haciendo cada vez más nítida. Esto tiene la ventaja de que se da uno cuenta enseguida, del tema de la imagen y si no es lo que buscas, puedes interrumpir la descarga. Se puede conseguir en los dos formatos y es una característica muy conveniente en las imágenes web.



Ejercicio 1

Elabora un documento HTML que muestre una imagen. Prueba el atributo ALT y observa cómo el navegador visualiza el texto que has especificado en dicho atributo al situar en ella el cursor.

Ejercicio 2

Modifica el documento anterior añadiendo tres nuevas imágenes. Prueba en ellas el atributo ALIGN con los valores: TOP, MIDDLE y BOTTOM.

Ejercicio 3

Añade al documento anterior un párrafo de varias líneas. Inserta dentro de este párrafo dos imágenes que cumplan las siguientes condiciones:

1. La primera imagen ha de estar justificada sobre el margen izquierdo. 2. La segunda imagen ha de estar justificada sobre el margen derecho. 3. El texto ha de rodear o envolver estas dos imágenes.

Ejercicio 4

Si el navegador muestra la información tal y como se ha descrito, trata de probar sobre el párrafo anterior las etiquetas <br clear left>, <br clear right> y <br clear all>.

Ejercicio 5

Abre una imagen utilizando el programa PAINT. Observa sus dimensiones en “pixels” (puntos). Luego añádela al documento HTML indicando que se muestre utilizando una altura y anchura el doble de la real. Observa cómo se ha reducido la calidad de la misma. Luego, represéntala reduciendo la altura y anchura a la mitad. Debes usar los atributos width (establece el ancho) y height (establece el alto).

Ejercicio 6

En alguna imagen del documento HTML prueba el atributo BORDER.

Ejercicio 7

Finalmente, inserta en el documento un párrafo con una imagen justificada con el margen izquierdo. Modifica el aspecto del texto que rodea la imagen utilizando los atributos HSPACE y VSPACE.



TEMA: MULTIMEDIA

Existen dos formatos de sonidos muy utilizados y perfectamente legibles por los navegadores: el formado midi (archivos con la extensión mid) y el formato de onda (archivos con la extensión wav). Los archivos midi están basados en partituras en las que se indica el tono y duración de cada una de las notas. Su principal ventaja es el escaso espacio que ocupan en comparación con la información que incluyen. Resultan adecuados para incorporar pasajes musicales. Presentan el inconveniente de que la calidad de los timbres de los instrumentos se asemejan poco al sonido real. Con los archivos wav se invierten los términos. Son muy extensos porque se basan en la digitalización directa de una fuente de sonido. Además, no dependen demasiado de la calidad de la tarjeta de sonido en que se reproducen y no resultan adecuados para fragmentos musicales largos, sino para efectos especiales y voz. También otro tipo de extensión utilizado para almacenar sonido son los que tienen la extensión au. De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vídeo. Ejercicio 1

El primer sonido. Si deseamos que el sonido “derroche.mid” apareciese en el navegador al pinchar sobre la imagen “imagen.gif”, deberían utilizarse las siguientes etiquetas:

<a href=”derroche.mid”> <img src=”imagen.gif”> </a> Lógicamente, si deseamos que se active el sonido al pulsar sobre el texto “Canción”, esto es lo que hay que escribir:

<a href=”derroche.mid”> Canción </a>

Inicialmente, el navegador de Microsoft (Explorer) para poner un sonido de fondo sólo podía utilizar una etiqueta muy básica:

<bgsound src=”fichero_de_sonido” loop=”nro. o infinite”> El atributo loop establece el número de veces que ha de oírse el sonido. Si pones infinite el sonido se repite indefinidamente. Actualmente este navegador acepta la etiqueta que se diseñó para el navegador que le hacía la competencia, Netscape. Es más compleja, muestra una pequeña consola y admite una serie de atributos:

<embed src=”fichero_de_sonido”> ATRIBUTOS:

autostart=”false” y “true”. Este último hace sonar la melodía inmediatamente después de cargar la página sin necesidad de pulsar el botón de “Play”. hidden=”true”. Oculta la consola y sólo tiene este valor. loop=”false” o “true” (por defecto). Para oír el fichero una vez o infinitas veces. width=nro. y height=nro. Establecen ancho y alto de la consola.



Ejercicio 2

Elabora una página que contenga un sonido de fondo.

1. Utiliza la etiqueta <bgsound src=”fichero_de_sonido” loop=”nro. o infinite”>. 2. Luego, sustitúyela por la etiqueta <embed src=”fichero_de_sonido”>. 3. Prueba, en esta última etiqueta, todos los atributos descritos anteriormente.

Esta práctica estaría incompleta si no incorporásemos a nuestra página algún vídeo. El problema de los ficheros de vídeo es su gran tamaño, ya que unos pocos segundos pueden representar varios Megabytes de tamaño. Probablemente en el futuro se irá generalizando su uso, ya que aumentará la velocidad de las redes. El formato que se emplea es el avi, que puede reproducir a la vez sonido y vídeo. Aunque para mejorar la calidad de las imágenes, se usan otros formatos de compresión. Estos formatos tienen visores propios que deben ser cargados para poder visualizarlos. Son los llamados plug-in. Ejercicio 3

Para empezar, utiliza la misma etiqueta que la del sonido y observa qué es lo que ocurre. En el ejemplo que te muestro a continuación, se hace referencia a un archivo de vídeo (tarjeta_de_red.jpg) que para ponerse en marcha es preciso pulsar “play”:

<embed src=”tarjeta_red.mpg” autostart=false loop=false>

Ejercicio 4

Si en alguna ocasión quieres que el visitante pueda visualizar un vídeo al pulsar sobre un gráfico o texto que lo represente, sólo tienes que aplicar los conocimientos que ya posees sobre enlaces. Observa la siguiente etiqueta, trata de deducir qué hace y pruébala:

<a href=”tarjeta_red.mpg”> Vídeo para ver cómo se instala una tarjeta de red </a>



TEMA: TABLAS

Presta atención a estos ejercicios. Y recuerda, las tablas es algo que puedes utilizar para asegurarte que las cosas van a aparecer en su sitio. Ejercicio 1

Una tabla básica. Elabora en un documento HTML una tabla básica de 2X2 que contenga en cada celda un número. Ya sabes, tendrás que utilizar las etiquetas table, tr y td.

1 2 3 4

Ejercicio 2

Prueba las etiquetas <th> y </th> y añade al documento la siguiente tabla:

Enero Febrero 546 712

Marzo Abril 490 794

Ejercicio 3

Prueba sobre la tabla anterior los atributos: border, cellspacing (espacio entre las celdas, por defecto 2), cellpadding (espacio entre el contenido de las celdas y el borde de las mismas, por defecto 1), align, y por último width.

Ejercicio 4

Añadiendo color. Sobre la tabla anterior prueba los atributos bgcolor, background y bordercolor.

Ejercicio 5

Modifica la tabla del ejercicio 2 de la siguiente forma.

1. Las filas que contienen texto tendrán un color rojo de fondo (<tr bgcolor...) 2. Cada celda tendrá un color diferente. Por ejemplo: rojo, verde, azul y amarillo (claros).

Ejercicio 6

Elabora una tabla de 1X4. Introduce en cada celda un párrafo. Al final, la tabla ha de tener el siguiente aspecto:

1. La primera celda deberá tener el texto justificado a la izquierda. 2. La segunda deberá tener el texto justificado a la derecha. 3. La tercera deberá tener el texto centrado. 4. La cuarta deberá tener el texto justificado tanto por el margen izquierdo como por el

derecho. Utiliza los conocimientos que posees para hacer esto último.



Ejercicio 7

En la tabla anterior, añade una nueva columna o celda. Introduce en ella un gráfico pequeño y prueba el atributo valign de la etiqueta td.

Ejercicio 8

Sobre rowspan y colspan. Trata de codificar en HTML la siguiente tabla:

A B C

D E

F G

H I J K

La etiqueta <table> posee un par de atributos complementarios al atributo border. Son frame y rules. Éstos permiten establecer el aspecto del marco y el de los separadores de la celda

F R A M E R U L E S Modificador Visualiza... Modificador Visualiza... hsides Líneas horizontales none ningún separador void Sin marco rows Sólo líneas horizontales above Sólo línea superior col Sólo líneas verticales below Sólo línea inferior all Todas. Por defecto lhs Sólo línea izquierda rhs Sólo línea derecha vsides Sólo líneas verticales box Todo. Por defecto

Ejercicio 9

Prueba en alguna de las tablas que has codificado, los atributos descritos anteriormente y cada uno de sus modificadores.



TEMA: MAPAS SENSIBLES

Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas. Procedimiento

Primero conseguimos una imagen y la declaramos como mapa, por ejemplo “directorio”.

<img src=”archivo_imagen” usemap=”#directorio”>

Abrimos el mapa recién creado.

<map name=”directorio”> Definimos las zonas del mapa y los enlaces que le asignamos a cada una.

<area shape=”forma_zona” coords=”coordenadas” href=”URL” alt=”comentario”> Cerramos el mapa.

</map> Valores de SHAPE y COORDS

Los valores que pueden tomar la forma y las coordenadas son: RECT.- Rectángulo o cuadrado.

COORDS=”x, y, u, v” donde “x, y” son las coordenadas del vértice superior izquierdo del rectángulo y “u, v” es el vértice inferior derecho. El vértice superior izquierdo es “0,0”.

CIRCLE.- Círculo.

COORDS=”x, y, z” donde “x, y” es el centro de la circunferencia y z el radio.

POLY.- Línea poligonal cerrada. COORDS=”X, x, Y, y, Z, z..., X, x” donde los pare “X,x”, “Y,y”, etc. representan los vértices del polígono. El primero coincidirá con el último.

Para hallar las coordenadas necesitarás un editor de imágenes. También puedes hacerlo a ojo si la imagen no es muy compleja. Ejercicio

Elabora un documento HTML con un mapa sensible. Declara en él, al menos, una zona rectangular, otra circular y otra poligonal. Cada una de estas zonas debe poseer un comentario (atributo alt) y un enlace con otra página.



TEMA: FORMULARIOS Los formularios son herramientas que permiten captar información de los visitantes de nuestra página web. A continuación te describo los elementos básicos para la realización de un formulario.

Abrir y cerrar un formulario <form action=”mailto:dirección_de_correo” method=”post” enctype=”text/plain”> ... </form> Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos, etc. y también todas las etiquetas HTML que permitan dar forma al formulario (tablas, colores, etc.) El atributo action nos indica la dirección de correo a la que se van a enviar los datos del formulario. Los atributos method y enctype indican cómo se transferirán los datos (post, correo) y la codificación del texto (text/plain, texto)

Entrada de texto de una línea

H T M L NAVEGADOR <input type="text" size="25" name="Nombre">

Cuando nos llega al buzón de correo el texto de este campo aparecerá asociado a la palabra que pongas en name (en este caso a Nombre). Puede incluirse otro atributo opcional value=”Pon aquí

tu nombre”, en este caso aparecería .

Entrada de texto de varias líneas

H T M L NAVEGADOR <textarea name="Comentarios" rows="5" col="25"> Introduce algún comentario </textarea>



Lista de opciones o menú desplegable

H T M L NAVEGADOR <select name="estudios"> <option selected>ESO <option>Bachillerato <option>Ciclo Formativo </select>

Menús con barras de desplazamiento Es una variante de las listas de opciones, listas desplegables o menús de opciones.

H T M L NAVEGADOR <select name="pais" size=3> <option>España <option>Mexico <option>Honduras <option>Panamá <option>Argentina <option>Perú </select>

Casillas de verificación o “checkboxes” Nos permite elegir entre varias posibilidades, una o más casillas.

H T M L NAVEGADOR <input type="checkbox" name="horario" value="día"> horario diurno<br> <input type="checkbox" name="horario" value="tarde"> horario vespertino<br> <input type="checkbox" name="horario" value="noche"> horario nocturno<br>

Botones de radio o de opción Similar a las casillas de verificación, con la diferencia de que sólo nos permite seleccionar una de las opciones mostradas, se utiliza para mostrar opciones excluyentes entre sí. Observa el atributo checked, sirve para establecer qué botón ha de aparecer marcado por defecto.

H T M L NAVEGADOR <input type="radio" name="sexo" value="hombre" checked> Hombre<br> <input type="radio" name="sexo" value="mujer"> Mujer<br>



Botones de envío y borrado

H T M L NAVEGADOR <input type="submit" name="Enviar datos" value=" Enviar "> <input type="reset" name="B1" value="Borrar"> Cuando presiones Enviar se transferirá el contenido de los campos a la dirección de correo indicada, por lo que necesitarás estar conectado a Internet para comprobarlo. Si presionas Borrar se borrará el contenido de los campos.

Algo más... Existe un campo un tanto particular, hidden. Como su nombre indica se encuentra oculto para el usuario que rellena el formulario, pero le servirá al que lo recibe para identificar contenidos que le puedan ser significativos. Imagina, por ejemplo, que incluyes una misma página o formulario en diversos servidores; un control hidden te será útil para identificar de donde proviene la información. Su sintaxis es similar a TEXT, Por ejemplo: <input type=”hidden” name=”origen” value=”Servidor ciclo formativo ASI”> Podría servirte para saber que el formulario se ha recibido desde el servidor del ciclo.

Ejercicio

Elabora un documento HTML que contenga un formulario similar al que se muestra en la figura:

(La solución está en la siguiente página)



<form action="mailto:[email protected]" method="post" enctype="text/plain"> <table bgcolor="#cccccc" border="0" cellpadding="6" cellspacing="0" width="400" align=”center”> <tr> <td align="right" valign="top"><b>Nombre</b></td> <td><input type="text" size="25" name="Nombre"> </td> </tr> <tr> <td align="right" valign="top"><b>E-mail</b></td> <td><input type="text" size="25" name="e-mail"> </td> </tr> <tr> <td align="right" valign="top"><b>Comentarios</b></td> <td><textarea name="Comentarios" rows="5" col="25">Introduce algún comentario </textarea></td> </tr> <tr> <td align="right" valign="top"><b>Nivel de estudios</b></td> <td> <select name="estudios"> <option selected>ESO <option>Bachillerato <option>Ciclo Formativo </select> </td> </tr> <tr> <td align="right" valign="top"><b>País</b></td> <td> <select name="pais" size=3> <option>España <option>Mexico <option>Honduras <option>Panamá <option>Argentina <option>Perú </select> </td> </tr> <tr> <td align="right" valign="top"><b>Selección de horarios</b></td> <td> <input type="checkbox" name="horario" value="día"> horario diurno<br> <input type="checkbox" name="horario" value="tarde"> horario vespertino<br> <input type="checkbox" name="horario" value="noche"> horario nocturno<br> </td> </tr> <tr> <td align="right" valign="top"><b>Sexo</b></td> <td> <input type="radio" name="sexo" value="hombre" checked> Hombre<br> <input type="radio" name="sexo" value="mujer"> Mujer<br> </td> </tr> <tr> <td align="right" valign="top"><b>Pulsa una vez</b> <b>></b> </td> <td align="center"> <input type="submit" name="Enviar datos" value=" Enviar "> <input type="reset" name="B1" value="Borrar"> </td> </tr> </table> </form>



TEMA: MARCOS (FRAMES) Los frames (marcos o cuadros) permiten dividir la ventana del navegador en varias más pequeñas, de modo que en cada una de ellas se carga una página html distinta. Las versiones más antiguas de los navegadores no tienen desarrollada esta característica, por lo que no podrán verlos.

Sintaxis Los marcos se declaran con la etiqueta <frameset>, que debe ser colocada en lugar de la etiqueta <body>. Un ejemplo sencillo es el siguiente:

H T M L NAVEGADOR <frameset rows=25%,*> <frame src="pag1.htm"> <frame src="pag2.htm"> </frameset> <noframes> <body> Lo siento, su navegador no soporta marcos.<br> Pulsa <a href="pag1.htm">aquí</a> para acceder a los contenidos de estas páginas </body> </noframes>

pag1

pag2

El atributo rows (filas) es el que define el número y el tamaño de los frames, en este caso dos filas, del 25% del tamaño de la ventana la primera y el resto la segunda. También se puede dividir en columnas mediante cols. El tamaño de los marcos se puede especificar de más formas:

cols=*,5* expresa dos columnas, la segunda 5 veces mayor que la primera. cols=150,*,150 establece tres columnas, la primera y la tercera de 150 puntos, la segunda ocupa el resto. rows=20%,80% crean dos filas que ocupan el 20% y el 80% del espacio respectivamente.

Las etiquetas noframes y body solamente se usan por cortesía, de hecho se pueden suprimir. Las etiquetas frame src=página.htm cargan las páginas indicadas en el marco correspondiente. También es posible anidar marcos, llamando a una página que tenga de nuevo marcos o bien declarándolo explícitamente. Un ejemplo de esto último es el código que aparece abajo:

H T M L NAVEGADOR <frameset cols=20%,*> <frame src="pag1.htm"> <frameset rows=20%,*> <frame src="pag2.htm"> <frame src="pag3.htm"> </frameset> </frameset>

p a g 1

pag2

pag3



Ejercicio 1

Elabora una página en la que puedas probar el primer código que aparece sobre marcos. Luego, trata de variar el tamaño de los mismos utilizando todas las combinaciones que te parezcan oportunas.

Ejercicio 2

Elabora otra página en la que puedas probar la técnica de los marcos anidados. Observa y prueba el segundo código que te he mostrado a modo de ejemplo.

El atributo TARGET Lo más interesante de los marcos es la posibilidad que tienen de interactuar entre sí, es decir pulsar un enlace en el marco 1 y cargar el contenido en el marco 2. Para conseguir esto hay que darle un nombre a los marcos y luego indicar en el enlace donde se va a cargar mediante el atributo target. Veamos un ejemplo:

<frameset cols=150,*> <frame src="marco1.htm" name=margen> <frame src="marco2.htm" name=principal> </frameset>

Los enlaces de la página marco1.htm, que es la que se carga en el margen izquierdo, se escriben de la forma:

<a href=paginaX.htm target=principal>…</a> Hay ciertos valores reservados para target:

TARGET=_top, hace que la página se cargue en la ventana completa del navegador. TARGET=_self, la página se carga en el marco actual. TARGET=_parent, la página se carga en el marco “padre”, del que desciende el actual. TARGET=_blank, la página se carga en una nueva ventana. TARGET=nombre, la página se carga en el marco llamado nombre. Si no existe se carga en una ventana nueva.

Ejercicio 3

Elabora un documento HTML que muestre dos marcos en forma de columnas (como el del ejemplo anterior). Inicialmente, el marco de la derecha ha de mostrar el mensaje; por ejemplo: “Mis páginas favoritas”. El marco de la izquierda debe contener enlaces con las dos o tres páginas que más visitas; por ejemplo: www.google.es y www.terra.es. Estos enlaces mostrarán la página en el marco de la derecha. Cuando te funcione puedes añadir más enlaces y probar lo que consideres sobre target.



Atributos de FRAME En los marcos se pueden modificar algunas de sus características por medio de los atributos siguientes:

SCROLLING=yes, no o auto. Indica si el marco llevará siempre, nunca o cuando lo necesite, barra de desplazamiento. BORDERCOLOR=”color”. Indica el color del borde. MARGINWIDTH=nro. Indica el margen horizontal en puntos (“pixels”) MARGINHEIGHT=nro. Indica el margen vertical en puntos. NORESIZE. Indica que el marco no se puede redimensionar. Si no se pone este atributo, colocando el cursor en le borde del marco, permitirá su deslizamiento.

Ejercicio 4

Prueba sobre el documento anterior todos los atributos descritos anteriormente.

Atributos de FRAMESET FRAMEBORDER=yes (ó 1), no (ó 0). Indica si los marcos tendrán bordes o no. Si además queremos que no se vean los huecos que originan los bordes invisibles hay que añadir el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0 para Netscape.

Ejercicio 5

Nuevamente, modifica el ejercicio anterior y prueba qué efecto tiene el uso de la siguiente etiqueta:

<frameset cols=”150,*” frameborder=”0” framespacing=”0” border=”0”> Luego, observa cómo al desplazarte por el marco principal (marco derecho) el índice (marco izquierdo) permanece estático.

Ejercicio 6

Imagínate que una agencia de viajes te encarga que elabores una sencilla página web, con marcos, sobre sus ofertas de viaje. La página ha de tener sus ofertas en el marco de la izquierda. Al hacer clic sobre ellas deberá de aparecer en el marco de la derecha las características de la misma (fecha, duración, régimen de alojamiento, algún gráfico, etc.) Usa tu imaginación, los conocimientos de HTML que posees y codifícala.



TEMA: CÓDIGOS ASCII

Como muchos sistemas tienen distintos juegos de caracteres ASCII, se emplean códigos para representarlos por igual en cualquiera de ellos. De esta manera se asegura que cualquiera que vea nuestra página lo hará de igual modo que nosotros. Estos símbolos especiales permiten también escribir en distintos lenguajes, ya que incluyen los acentos, diéresis, etc. Para incluirlos en la página se usan las etiquetas mostradas en la tabla. Como puedes ver, todos empiezan por & y acaban en ; y se deben escribir respetando mayúsculas y minúsculas.

Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta

á á Á Á à à À À

é é É É è è È È

í í Í Í ì ì Ì Ì

ó ó Ó Ó ò ò Ò Ò

ú ú Ú Ú ù ù Ù Ù

ä ä Ä Ä â â Â Â

ë ë Ë Ë ê ê Ê Ê

ï ï Ï Ï î î Î Î

ö ö Ö Ö ô ô Ô Ô

ü ü Ü Ü û û Û Û

ñ ñ Ñ Ñ ý ý ÿ ÿ

ç ç Ç Ç æ æ Æ Æ

ø ø Ø Ø © © ® ®

& & " " < < > >

(espacio)

Ejercicio 1

Recupera cualquier documento elaborado con anterioridad y prueba alguno de los códigos que aparecen en la tabla.



Otra forma de representar estos caracteres especiales es por medio del código estándar ISO-8859-1. En este caso para incluirlos debemos escribir &#nn; donde nn representa el número dado en la tabla de abajo.

Juego de caracteres ISO-8859-1

S/Nro. S/Nro. S/Nro. S/Nro. S/Nro. S/Nro. S/Nro. S/Nro.

32 ! 33 " 34 # 35 $ 36 % 37 & 38 ' 39

( 40 ) 41 * 42 + 43 , 44 - 45 . 46 / 47

0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55

8 56 9 57 : 58 ; 59 < 60 = 61 > 62 ? 63

@ 64 A 65 B 66 C 67 D 68 E 69 F 70 G 71

H 72 I 73 J 74 K 75 L 76 M 77 N 78 O 79

P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87

X 88 Y 89 Z 90 [ 91 \ 92 ] 93 ^ 94 _ 95

` 96 a 97 b 98 c 99 d 100 e 101 f 102 g 103

h 104 i 105 j 106 k 107 l 108 m 109 n 110 o 111

p 112 q 113 r 114 s 115 t 116 u 117 v 118 w 119

x 120 y 121 z 122 { 123 | 124 } 125 ~ 126 127

€ 128 129 ‚ 130 ƒ 131 „ 132 … 133 † 134 ‡ 135

ˆ 136 ‰ 137 Š 138 ‹ 139 Œ 140 141 Ž 142 143

144 ‘ 145 ’ 146 “ 147 ” 148 • 149 – 150 — 151

˜ 152 ™ 153 š 154 › 155 œ 156 157 ž 158 Ÿ 159

160 ¡ 161 ¢ 162 £ 163 ¤ 164 ¥ 165 ¦ 166 § 167

¨ 168 © 169 ª 170 « 171 ¬ 172 173 ® 174 ¯ 175

° 176 ± 177 ² 178 ³ 179 ´ 180 µ 181 ¶ 182 · 183

¸ 184 ¹ 185 º 186 » 187 ¼ 188 ½ 189 ¾ 190 ¿ 191

À 192 Á 193 Â 194 Ã 195 Ä 196 Å 197 Æ 198 Ç 199

È 200 É 201 Ê 202 Ë 203 Ì 204 Í 205 Î 206 Ï 207

Ð 208 Ñ 209 Ò 210 Ó 211 Ô 212 Õ 213 Ö 214 × 215

Ø 216 Ù 217 Ú 218 Û 219 Ü 220 Ý 221 Þ 222 ß 223

à 224 á 225 â 226 ã 227 ä 228 å 229 æ 230 ç 231

è 232 é 233 ê 234 ë 235 ì 236 í 237 î 238 ï 239

ð 240 ñ 241 ò 242 ó 243 ô 244 õ 245 ö 246 ÷ 247

ø 248 ù 249 ú 250 û 251 ü 252 ý 253 þ 254 ÿ 255

Ejercicio 2

Sobre el documento anterior vuelve a probar códigos que aparecen en esta última tabla. Ya sabes &#nn; (donde nn es el número de código asociado a cada símbolo).



TEMA: Publicar en la WEB

Últimos consejos Existen ciertas normas que se deben seguir a la hora de realizar una página Web. No son obligatorias, pero sí convenientes:

Carga rápida.- Las páginas no deben superar, incluidos los elementos gráficos, más de 30 ó 40 Kbytes. Puede admitirse que la página principal o alguna otra sean un poco más grandes. El texto que haya en la página no debe ocupar más de tres o cuatro pantallas, en caso de que así sea, es mejor dividirla.

Diseñar para equipos menos potentes.- Hay que tener en cuenta que la mayoría de los

ordenadores trabajan con 800x600 “píxeles” de resolución de pantalla, por lo que si se incluyen imágenes, tablas o elementos más anchos, no se visualizarán completamente.

Incluir un enlace de correo electrónico.- Esto es muy conveniente, de esta forma te pueden

enviar mensajes, comentarios, opiniones, etc.

Enlaces.- Al menos debes incluir enlaces a páginas de contenido similar al de la tuya (cuando proceda). De esta manera aseguras que los visitantes encuentren más fácilmente lo que buscan y por cortesía también pondrán enlaces hacia tu página.

¿Cómo pongo la página en el servidor? Supongamos que ya has creado tu página. Probablemente no será una sola, serán varias y puede que también existan directorios dentro de ella. Sin embargo, esto no tiene mucha importancia para “subirla” al servidor. En primer lugar, es necesario tener instalado en el ordenador un cliente de FTP. Es el programa que te permitirá comunicarte con el servidor para poder gestionar tu “sitio web”. Existen muchos programas de este tipo. Voy a explicarte el funcionamiento del cliente NICO-FTP 3.0.

Ejecutar el programa. Para ello accede a la carpeta en la que hayas copiado los tres archivos del programa. Luego haz doble clic sobre el archivo para que empiece su ejecución.



Crear el nuevo sitio. Haz clic sobre el botón . Se abrirá el cuadro de diálogo que muestra la figura. Desde él podrás conectarte a cualquier sitio ya definido o podrás definir uno nuevo. Éste es nuestro caso.

Haz clic sobre el botón . Se abrirá un nuevo cuadro de diálogo en el que deberás introducir los datos que se necesitan en cualquier programa de este tipo: nombre del sitio, usuario y contraseña.

Como puedes apreciar, y también suponer, la contraseña aparece con asteriscos por razones de seguridad.

Una vez introducidos los datos pulsa . La próxima vez podrás conectarte con el “sitio” desde el cuadro anterior (Administrador de sitios). Ya sabes, seleccionando el sitio y pulsando nuevamente el botón Conectar.

Gestionar el sitio. Cuando te conectes con tu servidor te aparecerá algo similar a esto:



En los clientes FTP aparecen dos cuadros. El de la izquierda representa tu ordenador y el de la derecha el ordenador remoto. En este caso, el cuadro de la derecha representa el “sitio” ftp.telefonica.net.

Los botones y son los que debes utilizar para enviar archivos al cuadro de la derecha o izquierda respectivamente. Lógicamente, primero debes seleccionar aquello que corresponda. Si observas la barra de herramienta es muy intuitivo todo: crear carpetas, moverte por ellas, borrarlas, transferir información, etc.

Desconectarte del servidor. Sólo tienes que pulsar el botón para desconectarte del servidor, una vez que hayas transferido o realizado aquello que pretendías en él.

Visualizar la página. Ha llegado el momento de comprobar que todo ha ido según lo esperado. En este caso para comprobar el resultado de lo publicado has de teclear en tu navegador favorito la dirección:

Debes tener siempre presente que la página principal, de tu “sitio web” se ha de llamar siempre index.htm o index.html. Si no haces esto el visitante debe conocer el nombre de la página y teclear después de la dirección /nombre de la página. RECUERDA: No olvides que los servidores WEB distinguen entre mayúsculas y minúsculas. Es decir, algo que funcionaba en tu ordenador es posible que no funcione cuando se publique por culpa de esto último.

prácticasroble.pntic.mec.es/~jcortijo/base/presenciales/unidad_2/... · 2019-10-15 · • hacer...

Documents