Page 1

EJERCICIOS DE EDICIÓN WEB ESCRIBIENDO DIRECTAMENTE EL CÓDIGO: ACTIVIDAD DE NIVELACIÓN 1. Crea una carpeta con el nombre “ejercicios web” en el directorio Mis Documentos. 2. Con el bloc de notas crea el documento mostrado en la transparencia. Un vez escrito guárdalo en el directorio creado con el nombre “uno.html” (al guardar el bloc de notas muestra como tipo de archivo “txt”; cámbialo por “todos los archivos” antes de proceder a guardarlo). LOS NOMBRES DE LOS ARCHIVOS NO DEBEN CONTENER TILDES, EÑES, NI ESPACIOS EN BLANCO Y SE DEBEN USAR LETRAS MINÚSCULAS). 3. Abre el Explorador de Windows (el explorador de archivos y directorios, no el navegador) y abre el directorio creado anteriormente. Pincha dos veces sobre el archivo creado. Deberá abrirse el navegador configurado como navegador por defecto (pueden existir varios navegadores en el ordenador) y mostrará la página web creada. 4. Cierra el navegador y abre el navegador directamente. Una vez abierto utiliza Abrir/Archivo para abrir la página creada. 5. Si existen más navegadores abre la página con los demás (Los resultados pueden variar bastante de un navegador a otro en el caso de páginas con muchos elementos complicados). 6. En el CD del curso en: Unidad_CD:\html\paginas\resumen.htm existe un resumen de las etiquetas más importantes y de sus correspondientes atributos. Pinchando en el enlace de la derecha puedes acceder a ejemplos concretos de cada caso. En http://www.w3schools.com/html/ también puedes encontrar información sobre las etiquetas, atributos, etc. 7. Modifica el documento “uno.html” para que muestre un color de fondo rojo (<body bgcolor = “red”>). Guarda el documento modificado y observa el resultado con el navegador. Se dice que “bgcolor” es un atributo de la etiqueta “body”. 8. Modifica el color del fondo utilizando la descripción hexadecimal del color (por ejemplo con bgcolor = #FFAA77) 9. Añade encabezados con los seis tamaños posibles ( <h1> Encabezado 1 </h1> , …., <h6>Encabezado 6</h6>). Comprueba los resultados. 10. Centra los encabezados utilizando el atributo align = “center” ( <h1 align = “center” > ….</h1>) 11. Alinea los restantes encabezados a derecha e izquierda. 12. Añade algún texto debajo de los seis encabezados: <p> texto…… </p>. Comprueba los resultados. Dentro de la etiqueta de párrafo (<p>…</p>) añade la etiqueta <font color="#00FFFF"> texto…..</font> y comprueba los resultados. 13. Crea un segundo documento con el nombre “dos.htm” (en la misma carpeta que antes) y escribe el siguiente encabezado (encabezado

tipo 1 y centrado): “Ejemplos de Listas”. A continuación escribe el siguiente texto: “Una lista: 1. Primer elemento 2. Segundo elemento” Para conseguir el código correspondiente a la lista se debe utilizar: <p>Una lista:</p> <ol> <li>Primer elemento </li> <li>Segundo elemento </li> </ol> 14. Una vez comprobado el funcionamiento del archivo anterior, modifícalo para que muestre: “Una lista: 1. Primer elemento 1. Subnivel 2. Subnivel 2. Segundo elemento” El código correspondiente a esta parte es: <p>Una lista:</p> <ol> <li>Primer elemento</li> <ol> <li>subnivel 2</li> <li>subnivel 2</li> </ol> <li>Segundo elemento </li> </ol> 15. Añade al documento anterior una lista no numerada (la etiqueta a usar es: <ul>…</ul>, y los item se inican con <li>. Para separar una línea (o crear espacio en blanco entre dos partes del documento) se puede usar <p> </p> que sirve para definir un párrafo o <br> que produce un salto de línea pero no rompe el párrafo. Para insertar una línea horizontal se usa la etiqueta <hr> (con el atributo width="50%" conseguimos que la longitud de la línea horizontal sea el 50% del ancho total de la pantalla. 16. Añade al documento anterior una lista con cinco niveles primarios (numerados). Cada uno de los niveles primarios debe contener dos elementos de nivel secundario (viñetas; no numeradas) y alguno de los elementos de nivel secundario debe contener una lista numerada. 17. Creación de vínculos (enlaces, hipervínculos, links, etc…) Para convertir un texto en un enlace utiliza la etiqueta <a href=”http://www.…”>…</a>. Ejemplo: <a href="http://www.google.com">Enlace al buscador Google</a> . El código anterior convierte el texto “Enlace al buscador Google” en un vínculo que apunta a la página del buscador. Crea una nueva página con el nombre enlaces.htm y diseña una lista con cinco elementos que sean enlaces a direcciones externas. Comprueba su funcionamiento. 18. Añade a uno de los enlaces anteriores el atributo siguiente: target="_blank", es decir escribe, por ejemplo, <a href=www.google.com


target="_blank">Enlace al buscador Google</a> y comprueba la diferencia. 19. Crea un nuevo archivo con el nombre tablas.html. Haz que muestre como encabezado la palabra TABLA: Utiliza el siguiente código para definir una tabla de 2 filas y 2 columnas (Observa los atributos utilizados en la etiqueta table) <table width="50%" border="4" align="center" cellpadding="3" cellspacing="2"> <tr> <td>Celda 1</td> <td>Celda2</td> </tr> <tr> <td>Celda3</td> <td>Celda4</td> </tr> </table> Crea en la parte inferior de la página una nueva tabla de 3 filas y 2 columnas. Añade el atributo bordercolor="#FF0000" a la etiqueta table y comprueba el resultado después de haber colocado un texto breve en cada celda. 20. Crea un nuevo archivo con el nombre imagenes.htm (¡sin tilde!). Haz un dibujo de dimensiones reducidas (100 x 100 pixel) y guárdalo en el directorio de trabajo con el nombre dibujo.jpg. Con el código siguiente inserta la imagen en el documento web: “<p align="center"><img src="dibujo.jpg" alt="marcador imag 1" name="im_1" width="100" height="100" border="3" ></p>”. Observa que la imagen se ha colocado dentro de un párrafo con alineación centrada (<p>…</p>) y que la imagen se inserta con la etiqueta <im….> cuyos atributos comentaremos. Colocando la etiqueta de la imagen (<im …>) dentro de una etiqueta “<a href=”…”>……</a>” se crea un vínculo a partir de la imagen. Compruébalo de forma práctica. 21. Como ejercicio complementario diseña cuatro imágenes de tamaños 100 por 100 pixel (alternativamente puedes obtener cuatro imágenes de la red y reducir su tamaño con algún programa de dibujo o de tratamiento de imágenes). Las imágenes deben quedar almacenadas en el directorio de trabajo (esto no es lo normal; normalmente las imágenes se sitúan en un directorio específico, dedicado a albergar las imágenes de la página). En un documento nuevo crea una tabla de dos filas y dos columnas con borde cero y coloca las imágenes en las correspondientes celdas. 22. Crea dos páginas web muy simples (principal.htm y secundaria.htm) que contengan, cada una de ellas, un enlace que permita abrir la otra página. 23. El siguiente código especifica algunas propiedades generales importantes de la

página (observa que se trata del código incluído en la cabecera del documento): <head> <title>P&aacute;gina inicial</title> <style type="text/css"> <!-body,td,th { font-family: Arial, Helvetica, sans-serif; color: #99CC00; } body { background-color: #FFCCCC; } a:link { color: #0033FF; } a:visited { color: #990099; } a:hover { color: #0099CC; } a:active { color: #FFFF66; } --> </style> </head> <body> </body> </html> Analíza el código. Comentaremos los detalles durante la sesión. Siguiendo el código anterior como referencia, crea una página (general.htm) con texto y cuatro enlaces. Los códigos hexadecimales del color asignado se deben obtener a partir de algún programa de dibujo. Comprueba los resultados. 24. Crea una página que contenga una tabla de borde 3 y de dimensiones 3x2. Inserta en la celda de la primera fila y segunda columna otra tabla de dimensiones 2x2. Antes de comprobar los resultados introduce un breve texto en cada celda. 25. Debes presentar la página web del segundo periodo la cual está hecha con Frame e insertarle un nuevo link “ejercicio edición web” que son los 24 puntos anteriores

actividad de nivelacion  

estudiantes de noveno grado

Read more
Read more
Similar to
Popular now
Just for you