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> <!
2 --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> <!--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>.
3 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. 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.
4 ">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.
5 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.
6 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;"> </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.
7 ">#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; 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.
8 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).
9 "> <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;">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.
10 <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.
