Transcription of ACTIVIDADES PÁGINAS WEB - danieldona.com
1 ACTIVIDADESP GINASWEBPR CTICA 1: PlantillaNuestro primer ejercicio consiste en dise ar una plantilla de documento HTML para iniciar r pidamente todas nuestras p ginas y ahorrarnos escribir los elementos m nimos de una p gina. 1)Para comenzar a escribir un c digo, podemos utilizar un editor de texto cualquiera, por ejemplo )Como cualquier p gina HTML, constar de la cabecera y el cuerpo del documento, ambas partes situadas entre la etiqueta de apertura <html> y su an loga de cierre </html>.3)La cabecera del documento ser a:<html> <head> <title>plantilla</title> </head>4)El cuerpo del documento quedar a como el siguiente:<body> <!--etiquetas que forman el cuerpo-->Esta pagina es la primera que hacemos.</body>5)Por ltimo, terminaremos con la etiqueta de finalizaci n de un documento html,</html>.6)Guardaremos el documento con el nombre Plantilla y la extensi n .html . 7)Por lo tanto el documento completo ser :<html> <head> <title>plantilla</title> </head> <body> <!
2 --etiquetas que forman el cuerpo--> Esta pagina es la primera que hacemos. </body> </html>PR CTICA 2: Acentos, caracteres especiales y comentarios cabecera del documento junto con la etiqueta de apertura ser a: <html> <head> <title>Mi primera p gina en html</title> </head> cuerpo del documento quedar a como el siguiente: <body>las etiquetas que hemos aprendido hasta ahora son las que forman laestructura b sica de un documento html: <html>, <head>,<title> y <body>. tambi n hemos aprendido a comentarnuestras p ginas con las etiquetas <!-- y -->.</body> ltimo, incluiremos la etiqueta de finalizaci n de un documento HTML: </html> el ejercicio con el nombre .PR CTICA 3: Tama os y formatosEn este ejercicio, crearemos un documento HTML para iniciarnos con el tama o de la fuente. Para profundizar un poco m s sobre lo que hemos visto en este tema, hemos utilizado tambi n un encabezado y un efecto de letra un poco peculiar.
3 Procure que el ejercicio quede lo m s parecido a la imagen cabecera del documento junto con la etiqueta de apertura ser a:<html> <head> <title>Ejercicio sobre tama os y formatos</title> </head> cuerpo del documento quedar a como el siguiente:<body> <p style="font-size: 40px;">Esto est a un tama o de 40px</p> <p style="font-size: small;">Esto est a un tama o small</p> <p style="font-size: medium;">Esto est a un tama o medium</p> <p style="font-size: large;">Esto est a un tama o large</p> <p style="font-size: xx-large;">Esto est a un tama o xx-large</p> <p style="font-size: xx-small;">Esto est a un tama o xx-small</p> <p style="font-size: 2%;">Esto est a un tama o 2%</p> <p style="font-size: 20%;">Esto est a un tama o 20%</p> <p style="font-size: 80%;">Esto est a un tama o 80%</p> <p style="font-size: 200%;">Esto est a un tama o 200%</p> <p style="font-size: 300%;">Esto est a un tama o 300%</p> <h2>Pruebas de formatos</h2>Esto es normal<sub>y esto es sub ndice: sub </sub> <br>Esto es normal <sup>y esto es super ndice: sup </sup> <br> <br> </body> </html> como CTICA 4: L neasCrearemos una p gina para practicar con l neas horizontales.
4 Esta herramienta, junto con todas sus variedades, es muy til para dar un aspecto m s profesional a nuestras p ginas. Procure que el ejercicio quede lo m s parecido a la imagen que mostramos cabecera del documento junto con la etiqueta de apertura ser a:<html> <head> <title>Ejemplos de l neas horizontales</title> </head> cuerpo del documento quedar a como el siguiente:<body> <p>L nea est ndar:</p> <hr> <p>L nea de grosor 5px, que ocupa el 50% de la ventana:</p> <hr size="5" width="50%"> <p>L nea de grosor 25px y 50 px de ancho:</p> <hr size="25" width="50"> <p>L nea de grosor 10px, que ocupa el 75% de la ventana,color azuly alineada a la izquierda:</p> <hr style="width: 75%; height: 10px; background-color: rgb(0, 0, 255); margin-left: 0pt;"> <p>L nea de grosor 50px, que ocupa el 60% de la ventana, color rojo ,con borde 10px verde y alineada a la derecha:</p> <hr style="border-width: 10px; width: 60%; height: 50px; color: rgb(0, 255, 0); background-color: rgb(255, 0, 0); margin-right: 0pt.
5 "> </body> </html> como practica CTICA 5: ColoresOtro aspecto muy llamativo a la hora de dise ar una p gina, es el uso de colores. Realiza un documento html lo m s parecido posible a la imagen )La cabecera del documento junto con la etiqueta de apertura ser a: <html> <head> <title>colores</title> </head>2)El cuerpo del documento quedar a como el siguiente: <body style="color: rgb(0, 0, 0); background-color: rgb(122, 122, 122);"> <p style="color: black; font-weight: bold; font-size: xx-large;">#000000 negro</p> <p style="color: white; font-weight: bold; font-size: xx-large;">#FFFFFF blanco</p> <p style="color: red; font-weight: bold; font-size: xx-large;">#FF0000 rojo</p> <p style="color: lime; font-weight: bold; font-size: xx-large;">#00FF00 verde</p> <p style="color: blue; font-weight: bold; font-size: xx-large;">#0000FF azul</p> <p style="color: yellow; font-weight: bold; font-size: xx-large;">#FFFF00 amarillo</p> <p style="color: fuchsia; font-weight: bold.
6 Font-size: xx-large;">#FF00FF morado,mezcla de rojo y azul</p> </body> </html>3)Guardar como CTICA 6: Una tabla compleja1)La cabecera del documento junto con la etiqueta de apertura ser a:<html> <head> <title>una tabla compleja</title> </head>2)La tabla que vamos a generar contiene siete celdas con una distribuci n poco homog nea el color del texto no es del mismo color. el tama o de la fuente es diferente, as como la alineaci n. con el objeto de trabajar con la mayor a de los par metros que hemos visto a lo largo del tema, cambiaremos, adem s, el color de fondo de un par de celdas. El cuerpo del documento es el siguiente:<body> <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;"border="3" cellpadding="2" cellspacing="2"> <caption> <span style="font-weight: bold;">TITULO DE LA TABLA</span> <br> </caption> <tbody> <tr align="center"> <th colspan="3" rowspan="1"style="vertical-align: top; background-color: rgb(153, 255, 153);"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 1</span> </font> <br> </th> </tr> <tr> <td colspan="1" rowspan="2"style="vertical-align: middle; text-align: left; background-color: rgb(102, 255, 255);"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 2</span> </font> </td> <td style="vertical-align: top; text-align: center; color: red;"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 3</span> </font> </td> <td style="vertical-align: top; text-align: center;"> <fontsize="+2"> <span style="font-weight: bold.
7 ">CELDA 4</span> </font> </td> </tr> <tr> <td style="vertical-align: top; text-align: center; color: red;"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 5</span> </font> </td> <td colspan="1" rowspan="2"style="vertical-align: bottom; text-align: right; background-color: rgb(255, 153, 255);"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 6</span> </font> </td> </tr> <tr> <td style="vertical-align: top; text-align: center;"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 7</span> </font> </td> <td style="vertical-align: top; text-align: center; color: red;"> <fontsize="+2"> <span style="font-weight: bold;">CELDA 8</span> </font> </td> </tr> </tbody> </table> </body> </html>3)Guardar como CTICA 7 (imagen de fondo)Una forma de poner una imagen de fondo en la etiqueta body.<html> <head> <title>Fondo de prueba</title> </head> <bodystyle="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(file:///C:/Users/Public/Pictures/Sample%20 ); background-repeat: no-repeat; background-position: center 0%;"alink="#000099" link="#000099" vlink="#990099"> <tablestyle="text-align: left; width: 50%; background-color: rgb(255, 255, 153); margin-left: auto; margin-right: auto; height: 50%;" border="4" cellpadding="2" cellspacing="2"> <caption> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </caption> <tbody> <tr> <th colspan="2" rowspan="1"style="vertical-align: middle; background-color: white; text-align: center;">ENCABEZADO<br> </th> </tr> <tr> <td style="vertical-align: middle; text-align: center;">CELDA1<br> </td> <td style="vertical-align: middle; text-align: center.
8 ">CELDA2<br> </td> </tr> </tbody> </table> <br> <br> </body> </html>PR CTICA 8 (Listas)En este caso debes de averiguar cual ser el c digo html-css para crear una lista una p gina que muestre el siguiente texto:Diarios de :1. ESPA El Mundob. El Pa sc. La Vanguardia2. New York Washington PostPR CTICA 9 ( Como incorporar un icono a la barra de direcciones) Para hacer aparecer una imagen en la barra de direcciones y en la pesta a del navegador web ,hay que a adir una linea de c digo entre las etiquetas <head> y </head<head>..<link rel="shortcut icon" href=" " >.. </head>ACTIVIDAD 10 ( ANCLAS)Para las siguientes ACTIVIDADES utilizaremos el programa KOMPOZER o NVU que est en Aplicaciones / Programaci n /..Se trata de crear una p gina html donde tengamos un ndice al comienzo de sta. Cuando hagamos clic sobre un tem de ese ndice se debe de producir un salto a la zona de la p gina donde se habla de ese tem.
9 En definitiva vamos a crear enlaces internos , osea , enlaces dentro del mismo documento html. Para ello hay que colocar en cada zona del documento a la que se quiere saltar un ANCLA , ( un ANCLA consiste simplemente en darle nombre a un punto concreto del documento para que se pueda hacer referencia a l en un enlace ). Los enlaces se crear n sobre cada tem del ejemplo: Tenemos esta p gina que habla de Internet , al comienzo de la p gina se ve el ndice , cuando pulsemos sobre Ocio se ver en el navegador la parte del documento que habla de Ocio .Esto es lo que se ve alprincipio en el navegador,pero el documento es m slargo y sigue hacia vez pulsemos sobre Ocio se ver en pantalla la parte del documento que habla de Ocio . Si queremos volver al ndice podemos hacer clic en la flecha de P gina anterior del propio navegador web o podr amos crear un enlace interno desde Ocio hacia el 11( ENLACES EN IM GENES)En esta actividad vamos a crear una tabla de 9 filas x 3 columnas.
10 En las filas pares insertaremos en cada celda una imagen peque a de un tipo de flor y en las filas impares pondremos el nombre de cada flor. Una vez hecho esto crearemos un enlace en cada imagen para que al pulsar , por ejemplo , en la ROSA se nos abra una p gina que hable de 12 ( VIDEOS)En esta actividad vamos a crear una tabla de 2 filas por tres columnas y en cada celda insertaremos un v deo con el tama o adecuado. Podremos visualizar todos los v deos al mismo enlazar directamente desde Youtube , , o cualquier otro copiando el c digo html que nos aparece a la derecha del video,donde aparece Insertar .ACTIVIDAD 13 ( Mapa de im genes)Se trata de crear una mapa de im genes sobre los personajes de los Simpsons. Al hacer clic sobre cualquier personaje ( Homer , Bart , Lisa ,..) se debe de abrir una p gina web que nos ampl e informaci n acerca de ese hacemos clic en Lisa se abrir una p gina que habla de manera f cil de crear un mapa de im genes es utilizando el procesador de texto un documento de texto nuevo.
