Ejercicio html primer año
- 1. Ejercicios HTML Paso a Paso Primer Año de Bachillerato Guía de apoyo para realizar los ejercicios 2015 CIC Colegio Inmaculada Concepción 21/07/2015
- 2. Ejercicios HTML Paso a Paso primer año de Bachillerato - Ejercicios paso a paso : - como crear una pagina en HTML - Insertar texto con diferentes propiedades - Insertar un hiperenlace - Insertar una imagen - Trabajar con tablas
- 3. 1) Ejercicio paso a paso: Crear una página básica Objetivo: Practicar las operaciones que hay que realizar para crear una página básica. Crear una carpeta con el nombre HTML + Tu nombre para que puedas guardar todas las carpetas que se te pedirán en el desarrollo del Curso. 1primer paso Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio. 2 segundo paso Escribe el código que aparece a continuación: <html> <head> <title>Inicio</title> </head> <bodybgcolor="Colegio Inmaculada Concepción"> </body> </html>
- 4. Con este código estarás creando un documento con el título "Inicio", y con el color de fondo verde(colegio nacional nicoles esguerra edificamos futuro). 3 tercer paso Haz clic sobre el menú Archivo. 4 cuarto paso Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como. 5 quinto paso En el recuadro Tipo: elige Todos los archivos. 6 sexto paso Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios HTML/Tu Nombre de tu disco duro.
- 5. 7 séptimo paso Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una página como la que aparece. Fíjate en el color de fondo de la página y en la barra de título. 2)Ejercicio paso a paso. Insertar texto con diferentes propiedades Objetivo: Practicar las operaciones que hay que realizar para insertar texto especificando sus propiedades
- 6. Ejercicio1. 1 primer paso Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 segundo paso Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios HTML/horario escolar 3 tercer paso Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella: <basefontcolor="red"size="1 "> Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento. Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto. 4 cuarto paso Detrás de la etiqueta <basefont>inserta una línea en blanco, y escribe el siguiente texto: Inicio 5 quinto paso Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño. Dejaremos la página un poco más discreta y cambiaremos el
- 7. color del texto a verde oscuro (#003333) y subiremos el tamaño de las letras. 6 sexto paso Rectifica la etiqueta <basefont para que quede así: <basefontcolor="#003333"size="4"> Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento. 7 séptimo paso Guarda el archivo y visualízalo en tu navegador, observa los cambios. 8 octavo paso Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:
- 8. <h1>Inicio</h1> Con este código estarás convirtiendo el texto en un encabezado de primer nivel. 9 noveno paso Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande.
- 9. 10 decimo paso Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>. Con esta etiqueta estarás insertando una regla horizontal. 11 onceavo paso Guarda el archivo y visualízalo en tu navegador, observa la regla 12 doceavo paso Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código en ella: <blockquote>
- 10. <blockquote> <palign="left"> <em> Bienvenido a nuestro sitio Web <br> Desde esta página web intentaremos resolver tus dudas acerca de el nuevo horario escolar de este año. </em> </p> </blockquote></blockquote> Ejercicio2. 1 primer paso Abre el documento gomez&fernandez.htm, 2 segundo paso Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios HTML/tunombre -Vamos a modificar la página para que tenga el siguiente aspecto: Hora Lunes Martes Miercoles Jueves Viernes 6:00 a 6:15 Direccion De Grupo Direccion De Grupo Direccion De Grupo Direccion De Grupo Direccion De Grupo 6:15 a 7:30 C. Naturales Sociales Musica Matematicas Matematicas 7:30 a 8:45 Español Matematicas Sociales C. Naturales Ingles 8:45 9:15 Descanso Descanso Descanso Descanso Descanso 9:15 10:30 Quimica E. fisica Español Sociales C. Naturales
- 11. 10:30 a 11:45 Informatica Religion Ingles Quimica Español 1 primer paso Empezamos por darle a la palabra horario un estilo de encabezado 1: <h1>hora</h1> Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el explorador con la página horario.htm y después de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página podrás volver a la sesión del explorador con la página horario.htm y después de hacer clic en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página).
- 12. 2 segundo paso Detrás añadimos una regla con la etiqueta <hr>. 3 tercer paso Añadimos una línea en blanco con <br>
- 13. 4 cuarto paso La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3: <blockquote> <h3>¿los dias dela semana escolar DENTALES?</h3> </blockquote> 5quinto paso Sólo nos queda definir la lista intercalando las siguientes etiquetas: <ul> <li>lunes </li> <ul> <li>materias </li> </ul> <li>martes </li> <li>materias </li> </ul> 6 sexto paso Guarda el archivo y visualízalo en tu navegador.
- 14. Ejercicio paso a paso. Insertar un hiperenlace Objetivo. Practicar las operaciones que hay que realizar para insertar un hiperenlace. 1primer paso Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 segundo paso Abre el archivo inicio.htm, que debes tener en la carpeta ejercicios_html/horario. -Vamos a añadir un enlace a la página en Internet de aula Clic. 1 Escribe el siguiente código delante de la etiqueta </body>: <palign="center"> <ahref="http://www.mined.gob.sv"target="_blank"> <b> Visita el sitio </b> </a> </p> Con este código estarás insertando un hiperenlace a www.mined.gob.sv, que será abierto en una nueva ventana (target="_blank"). En este caso hemos utilizado una referencia absoluta. El enlace contendrá el texto visita aulaClic, que aparecerá en
- 15. negrita (<b>), y centrado (align="center"). Observa como hemos anidado las etiquetas, siempre se cierra la última abierta. 2 segundo paso Haz clic sobre el menú Archivo. 3 tercer paso Haz clic sobre la opción Guardar. 4 cuarto paso Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que si te posicionas sobre el texto visita Mined el puntero del ratón se convierte en una mano y si haces clic (y estás conectado a Internet) se abrirá una nueva ventana con la página de aulaClic. -Vamos a cambiar ahora el color de los enlaces. 1 primer paso Si cerraste el archivo inicio.htm, abrelo para seguir con el ejericio: 2 segundo paso Rectifica la etiqueta <body> para que quede así: <bodybgcolor="#99CC99" link="#CC0000"vlink="#CC0000"alink="#CC0000"> Con este código estarás indicando que la página tiene el color de fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000). 3 tercer paso Haz clic sobre el menú Archivo.
- 16. 4 tercer paso Haz clic sobre la opción Guardar. 5 cuarto paso Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que obtienes una página como la que aparece. Fíjate que ahora el texto del enlace aparece en amarillo. 4) Ejercicio paso a paso. Insertar una imagen Objetivo. Practicar las operaciones que hay que realizar para insertar una imagen.
- 17. Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. Ejercicio1. 1 primer paso Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales. 2 segundo paso Sustituye la línea <b>visita aulaclic</b> que está incluida dentro de un hiperenlace, por la línea <imgsrc="imagenes/aulaclic.jpg"alt="visitaaulaclic"width=" 90"height="32"border="4"> Con este código estarás asociando el enlace con la imagen aulaclic.jpg que se encuentra en la directorio imágenes dentro de la carpeta horario (la carpeta donde se encuentra el archivo inicio.htm. La imagen medirá 90 píxeles de ancho, y 32 píxeles de alto (atributos widthy height). Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este color el definido para los enlaces de esta página. En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrará el texto visita aulaclic (atributo alt). 3 tercer periodo Haz clic sobre la opción Guardar del menú Archivo.
- 18. 4 cuarto periodo Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página. Ejercicio2. 1primer paso Abre el documento menu.htm, de la carpeta originales/animales del curso. 2segundo paso Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios HTML/horario 3 tercer paso Añade delante de la primera etiqueta <p ... la siguiente línea: <palign="center"><imgsrc="imagenes/logo_animales.gif"wi dth="122"height="85"></p> El párrafo se añade para centrar la imagen. 4 cuarto paso Haz clic sobre la opción Guardar del menú Archivo. 5 quinto paso Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página.
- 19. 5) Ejercicio paso a paso. Trabajar con tablas Objetivo. Practicar las operaciones que hay que realizar para modificar las propiedades de la tabla. Ejercicio1. Vamos a insertar en la página horario.htm una tabla para colocar la imagen del escudo del colegio en el fondo de la lista. Para eso crearemos una tabla siete fila y seis columnas, en la columna de la izquierda colocaremos el texto. 1primer paso Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2segundo paso Haz clic sobre el menú Archivo. 3tercer paso Haz clic sobre la opción Abrir. Se abrirá una nueva ventana. 4 En Tipo:, elige Todos los archivos. 5 Selecciona el archivogomez&fernadez.htm, que se encuentra en la carpeta animales, y pulsa sobre el botón Aceptar. 6 Detrás de la etiqueta <hr>añade el siguiente código para añadir una línea en blanco, definir la tabla, empezar la definición de la primera fila y primera columna de la tabla.
- 20. Hacemos la tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la primera columna ocupará el 70% de la ventana (width="70%") : <br> <tablewidth="100%"border="0"> <tr> <tdwidth="70%"> 7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y empezar la otra, ahora la segunda columna ocupará el 30% de la ventana (width="30%"): </td> <tdwidth="30%"> 8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la fila y la tabla: </td> </tr> </table> 9 Guarda el archivo y cierra el bloc de notas. 10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia. Ejercicio 2. 1 Abre el documento perros.htm, de la carpeta originales/animales del curso. 2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
- 21. En el documento que has abierto vamos a crear la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO HOMBRE PEQUEÑO GRANDE Duración crecimiento 10 meses 18 a 24 meses 16 años Tiempo de gestación 58 a 63 días 9 meses Duración de vida del pelo/cabello 1 año 2 a 7 años Empezamos por definir la etiqueta de la tabla: 3 Escribe delante de la etiqueta </body>: <table width="575"border="2" align="center"cellspacing="2"bordercolor="#000000"> El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no cambie según el tamaño de la ventana abierta. Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más grueso. El atributo align con el valor center nos permite indicar que la tabla estará centrada con respecto a la ventana. Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la tabla. El atributo bordercolor nos permite definir el color del borde
- 22. la tabla. Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y después entre la dos etiquetas añadir las otras. 4 Escribe: </table> La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas está centrado tanto en horizontal como en vertical: 5 Escribe seis veces: <tralign="center"valign="middle"> </tr> Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál es la fila con mayor número de columnas, tiene cuatro columnas. Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta se expande sobre cuatro columnas: 6 Escribe después de la primera etiqueta <tr..: <tdcolspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td> Vamos a rellenar ahora la segunda fila. En esta fila la primera columna se expande sobre dos filas: 7 Escribe después de la segunda etiqueta <tr..: <tdrowspan="2">DIFERENCIAS</td>
- 23. La segunda columna se expande sobre dos columnas: 8 Escribe a continuación: <tdcolspan="2">PERRO</td> La tercera columna se expande sobre dos filas: 9 Escribe a continuación: <tdrowspan="2">HOMBRE</td> Vamos a rellenar ahora la tercera fila. En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas en el rowspan de la fila anterior. 10 Escribe después de la tercera etiqueta <tr..: <td>PEQUEÑO</td> <td>GRANDE</td> Vamos a rellenar ahora la cuarta fila. En esta fila tenemos que definir las cuatro columnas normales 11 Escribe después de la cuarta etiqueta <tr..: <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> Vamos a rellenar ahora la quinta fila. En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas. 12 Escribe después de la quinta etiqueta <tr..: <td>Tiempo de gestación</td> <tdcolspan="2">58 a 63 días</td>
- 24. <td>9 meses</td> Por último rellenamos la sexta fila. En esta fila tenemos que indicar también que la segunda columna se expande sobre dos columnas. 13 Escribe después de la sexta etiqueta <tr..: <td>Duración de vida del pelo/cabello</td> <tdcolspan="2">1 año</td> <td>2 a 7 años</td> Veamos el resultado. 14 Guarda los cambios y abre la página con tu navegador. Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema 3). 15 Añade background="imagenes/fondopatas.gif" dentro de la etiqueta <table>. De este modo, la imagen fondopatas.gif pasará a ser la imagen de fondo de la tabla. 16 Añade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la primera fila de la tabla será de color verde oscuro. 17 Añade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la segunda fila de la tabla será de color naranja. 18 Añade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las celdas de esa fila, que contienen el texto PEQUEÑO y GRANDE, serán de color amarillo. Por último cambiaremos las tres primeras filas para que el
- 25. texto contenido en ellas tenga formato de cabecera de columna. 19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser títulos de columna, por lo que el texto aparecerá centrado y en negrita.