Paso apaso de html

Tecnología &informática

Luis Alejandro Fernández Bustos

(902)

Cuarto periodo

Profesor: John Caraballo

Colegio nacional Nicolás Esguerra

Área de informática

Bogotá D.C

2012

Introducción:

- 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.

A lo largo del curso vamos a crear el sitio web, este sitio lo
guardaremos en una carpeta dentro de ejercicios HTML.

En esa carpeta tenemos:

La carpeta el hora rio escolar del grado 902, donde
guardaremos los archivos de un sitio web de un hora enque los
estudiantes puedan ver que es fácil crear una pagina wed
que iremos creando a lo largo de los ejercicios paso a paso.

A este sitio web le colocaremos un fondo en donde este el
escudo de nuestro colegio cual es la que determinara de
donde viene el horario

Una vez tenemos nuestros sitio organizado, podemos empezar
a practicar.

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 nacional Nicolás esguerra edificamos
futuro ">
</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/Nicolás esguerra 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

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>
bienvenidos al campo virtual NE.
<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/gomez&fernadez

-Vamos a modificar la página para que tenga el siguiente
aspecto:
Hora Lunes Martes Miercoles Jueves Viernes
6:00 a Direccion De Direccion De Direccion De Direccion De Direccion De
6:15 Grupo Grupo Grupo Grupo Grupo
6:15 a
C. Naturales Sociales Musica Matematicas Matematicas
7:30
7:30 a
Español Matematicas Sociales C. Naturales Ingles
8:45
8:45
Descanso Descanso Descanso Descanso Descanso
9:15
9:15
Quimica E. fisica Español Sociales C. Naturales
10:30
10:30 a
Informatica Religion Ingles Quimica Español
11:45

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

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.aulaclic.com"target="_blank">
<b>
visita aulaClic
</b>
</a>
</p>

Con este código estarás insertando un hiperenlace a
www.aulaclic.com, 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


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 aulaClic 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


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.

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
como la que aparece aqui.

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

ejercicio.

2segundo paso


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
PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
18 a 24
Duración crecimiento 10 meses 16 años
meses
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del 2a7
1 año
pelo/cabello 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.

Paso apaso de html

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Paso apaso de html

Más de Sebastian Hrnandez

Paso apaso de html