Embed Size (px)
Citation preview
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
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
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>
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.
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
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
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:
<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.
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>
<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
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).
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>
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.
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
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.
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.
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.
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.
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.
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
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
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>
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>
<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
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.
