Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Paso apaso de html

941 views

Published on

  • Be the first to comment

Paso apaso de html

  1. 1. Tecnología &informática Luis Alejandro Fernández Bustos (902) Cuarto periodo Profesor: John CaraballoColegio nacional Nicolás Esguerra Área de informática Bogotá D.C 2012
  2. 2. 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
  3. 3. 1) Ejercicio paso a paso: Crear una página básicaObjetivo:Practicar las operaciones que hay que realizar para crear unapágina básica.A lo largo del curso vamos a crear el sitio web, este sitio loguardaremos en una carpeta dentro de ejercicios HTML.En esa carpeta tenemos:La carpeta el hora rio escolar del grado 902, dondeguardaremos los archivos de un sitio web de un hora enque losestudiantes puedan ver que es fácil crear una pagina wedque iremos creando a lo largo de los ejercicios paso a paso.A este sitio web le colocaremos un fondo en donde este elescudo de nuestro colegio cual es la que determinara dedonde viene el horarioUna vez tenemos nuestros sitio organizado, podemos empezara practicar.
  4. 4. 1primer pasoSi no tienes abierto el Bloc de notas, ábrelo para realizar elprimer ejercicio.2 segundo pasoEscribe el código que aparece a continuación:<html><head><title>Inicio</title></head><bodybgcolor="colegio nacional Nicolás esguerra edificamosfuturo "></body></html>Con este código estarás creando un documento con el título
  5. 5. "Inicio", y con el color de fondo verde(colegio nacional nicolesesguerra edificamos futuro).3 tercer pasoHaz clic sobre el menú Archivo.4 cuarto pasoHaz clic sobre la opción Guardar como. Se abrirá el cuadro dediálogo Guardar como.5 quinto pasoEn el recuadro Tipo: elige Todos los archivos.6 sexto pasoGuarda el documento con el nombre inicio.htm, dentro de lacarpeta Mis documentos/ejercicios HTML/Nicolás esguerra detu disco duro.7 séptimo pasoAbre el documento que acabas de crear en un navegador, ycomprueba 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.
  6. 6. 2)Ejercicio paso a paso.Insertar texto con diferentes propiedadesObjetivo: Practicar las operaciones que hay que realizar para insertar texto especificando sus propiedadesEjercicio1.1 primer pasoSi no tienes abierto el Bloc de notas, ábrelo para realizar elejercicio.
  7. 7. 2 segundo pasoAbre el archivo inicio.htm, que creaste en el tema anterior yque se encuentra en la carpeta ejercicios HTML/horarioescolar3 tercer pasoInserta una línea en blanco debajo de la etiqueta <body>, yescribe 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ásningún cambio ya que la página no tiene texto.4 cuarto pasoDetrás de la etiqueta <basefont>inserta una línea en blanco, yescribe el siguiente texto: Inicio5 quinto pasoGuarda el archivo y visualízalo en tu navegador, el texto debeaparecer en rojo y pequeño.Dejaremos la página un poco más discreta y cambiaremos elcolor del texto a verde oscuro (#003333) y subiremos eltamaño de las letras.6 sexto pasoRectifica la etiqueta <basefont para que quede así:<basefontcolor="#003333"size="4">Con este código estarás estableciendo el color verde oscuro
  8. 8. (#003333) y tamaño 4 para el texto del documento.7 séptimo pasoGuarda el archivo y visualízalo en tu navegador, observa loscambios.8 octavo pasoEncierra el texto Inicio entre etiquetas <H1> de la siguienteforma:<h1>Inicio</h1>Con este código estarás convirtiendo el texto en unencabezado de primer nivel.9 noveno pasoGuarda el archivo y visualízalo en tu navegador, observa loscambios, el texto aparece destacado y más grande.
  9. 9. 10 decimo pasoInserta una línea en blanco debajo del código anterior, yescribe 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 laregla12 doceavo pasoInserta una línea en blanco debajo de la etiqueta anterior, yescribe el siguiente código en ella:<blockquote><blockquote><palign="left"><em>bienvenidos al campo virtual NE.<br>Desde esta p&aacute;gina web intentaremos resolver tus dudasacerca de el nuevo horario escolar de este año.</em></p></blockquote></blockquote>Ejercicio2. 1 primer paso Abre el documento gomez&fernandez.htm,
  10. 10. 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 Viernes6:00 a Direccion De Direccion De Direccion De Direccion De Direccion De6:15 Grupo Grupo Grupo Grupo Grupo6:15 a C. Naturales Sociales Musica Matematicas Matematicas7:307:30 a Español Matematicas Sociales C. Naturales Ingles8:458:45 Descanso Descanso Descanso Descanso Descanso9:159:15 Quimica E. fisica Español Sociales C. Naturales10:3010:30 a Informatica Religion Ingles Quimica Español11:451 primer pasoEmpezamos por darle a la palabra horario un estilo deencabezado 1: <h1>hora</h1>Si quieres puedes ir observando los cambios según los vayasintroduciendo, guardando sin cerrar el bloc de notas yvisualizando la página cada vez (la primera vez abres elexplorador con la página horario.htm y después de ver elefecto, en vez de cerrar la ventana del explorador la dejasabierta, así cuando hayas hecho el siguiente cambio en lapágina podrás volver a la sesión del explorador con la páginahorario.htm y después de hacer clic en el botón Actualizar detu navegador verás mejor el efecto producido por el cambioque has incorporado a la página).
  11. 11. 2 segundo pasoDetrás añadimos una regla con la etiqueta <hr>.3 tercer pasoAñadimos una línea en blanco con <br>
  12. 12. 4 cuarto paso La pregunta queda sangrada con respecto al resto del texto,la colocamos dentro de una etiqueta <blockquote> y ademásle asignamos un estilo de encabezado 3:<blockquote><h3>&iquest;los dias dela semana escolarDENTALES?</h3></blockquote>5quinto pasoSólo nos queda definir la lista intercalando las siguientesetiquetas:<ul><li>lunes </li><ul><li>materias </li></ul><li>martes </li><li>materias </li></ul>6 sexto pasoGuarda el archivo y visualízalo en tu navegador.Ejercicio paso a paso.Insertar un hiperenlaceObjetivo.Practicar las operaciones que hay que realizar para insertar unhiperenlace.
  13. 13. 1primer pasoSi no tienes abierto el Bloc de notas, ábrelo para realizar elejercicio.2 segundo pasoAbre el archivo inicio.htm, que debes tener en la carpetaejercicios_html/horario.-Vamos a añadir un enlace a la página en Internet de aulaClic.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 awww.aulaclic.com, que será abierto en una nueva ventana(target="_blank"). En este caso hemos utilizado una referenciaabsoluta.El enlace contendrá el texto visita aulaClic, que aparecerá ennegrita (<b>), y centrado (align="center"). Observa comohemos anidado las etiquetas, siempre se cierra la últimaabierta.2 segundo pasoHaz clic sobre el menú Archivo.3 tercer pasoHaz clic sobre la opción Guardar.
  14. 14. 4 cuarto paso Abre con tu navegador el documento inicio.htm que acabasde guardar, y comprueba que si te posicionas sobre el textovisita aulaClic el puntero del ratón se convierte en una mano ysi haces clic (y estás conectado a Internet) se abrirá unanueva ventana con la página de aulaClic.-Vamos a cambiar ahora el color de los enlaces.1 primer pasoSi cerraste el archivo inicio.htm, abrelo para seguir con elejericio:2 segundo pasoRectifica 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 elcolor de fondo verde (#99CC99), y el color de los enlaces rojo(#CC0000).3 tercer pasoHaz clic sobre el menú Archivo.4 tercer pasoHaz clic sobre la opción Guardar.5 cuarto pasoAbre con tu navegador el documento inicio.htm que acabasde guardar, y comprueba que obtienes una página como laque aparece. Fíjate que ahora el texto del enlace aparece enamarillo.
  15. 15. 4) Ejercicio paso a paso. Insertar una imagenObjetivo.Practicar las operaciones que hay que realizar para insertaruna imagen.Si no tienes abierto el Bloc de notas, ábrelo para realizar elejercicio.Ejercicio1.1 primer paso Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales.
  16. 16. 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 laimagen aulaclic.jpg que se encuentra en la directorioimágenes dentro de la carpeta horario (la carpeta dondese 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), queaparecerá de color rojo, al ser este color el definido para losenlaces de esta página. En el caso de que la imagen no pueda ser visualizada, ose situe el puntero sobre ella, se mostrará el texto visitaaulaclic (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áginacomo la que aparece aqui.
  17. 17. 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:
  18. 18. <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 tablasObjetivo.Practicar las operaciones que hay que realizar para modificarlas propiedades de la tabla.Ejercicio1.Vamos a insertar en la página horario.htm una tabla paracolocar la imagen del escudo del colegio en el fondo de lalista. Para eso crearemos una tabla siete fila y seis columnas,en la columna de la izquierda colocaremos el texto.1primer pasoSi no tienes abierto el Bloc de notas, ábrelo para realizar elejercicio.2segundo pasoHaz clic sobre el menú Archivo.
  19. 19. 3tercer pasoHaz 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 seencuentra en la carpeta animales, y pulsa sobre el botónAceptar.6 Detrás de la etiqueta <hr>añade el siguiente código paraañadir una línea en blanco, definir la tabla, empezar ladefinición de la primera fila y primera columna de la tabla.Hacemos la tabla invisible (border="0") y que ocupe todo losancho de la ventana (width="100%"), la primera columnaocupará 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ódigopara cerrar la columna y empezar la otra, ahora la segundacolumna ocupará el 30% de la ventana (width="30%"):</td><tdwidth="30%">8 Detrás de la etiqueta <img> añade el siguiente código paracerrar 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
  20. 20. que ahora la imagen está a la derecha del texto y si haces laventana más pequeña, el ancho de las columnas cambia.Ejercicio2.1 Abre el documento perros.htm, de la carpetaoriginales/animales del curso.2 Guarda la página con el mismo nombre en tu directorio deejercicios Mis documentos/ejercicios_html/animalesEn el documento que has abierto vamos a crear la siguientetabla: 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
  21. 21. fijo para que ese tamaño no cambie según el tamaño de laventana abierta. Con el valor 2 del atributo border hacemos que el bordeexterno de la tabla aparezca más grueso. El atributo align con el valor center nos permite indicar quela tabla estará centrada con respecto a la ventana. Con el valor 2 del atributo cellspacing hacemos queaparezca un hueco entre las celdas de la tabla. El atributo bordercolor nos permite definir el color del bordela tabla. Para que no se nos olvide cerrar etiquetas es mejor añadirla etiqueta de cierre y después entre la dos etiquetas añadirlas 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 enhorizontal como en vertical: 5 Escribe seis veces: <tralign="center"valign="middle"></tr> Ya hemos definido las filas, ahora las vamos a rellenar conlas columnas. Miramos cuál es la fila con mayor número decolumnas, tiene cuatro columnas. Rellenamos la primera fila, en esta fila aparece una solacolumna por lo que hay que indicar que esta se expandesobre cuatro columnas:
  22. 22. 6 Escribe después de la primera etiqueta <tr..:<tdcolspan="4">DIFERENCIAS ENTRE EL PERRO Y ELHOMBRE</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 laprimera y la última están incluidas en el rowspan de la filaanterior. 10 Escribe después de la tercera etiqueta <tr..:<td>PEQUE&Ntilde;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..:
  23. 23. <td>Duraci&oacute;n crecimiento</td><td>10 meses</td><td>18 a 24 meses</td><td>16 a&ntilde;os</td> Vamos a rellenar ahora la quinta fila.En esta fila tenemos que indicar que la segunda columna seexpande sobre dos columnas. 12 Escribe después de la quinta etiqueta <tr..:<td>Tiempo de gestaci&oacute;n</td><tdcolspan="2">58 a 63 d&iacute;as</td><td>9 meses</td> Por último rellenamos la sexta fila.En esta fila tenemos que indicar también que la segundacolumna se expande sobre dos columnas. 13 Escribe después de la sexta etiqueta <tr..:<td>Duraci&oacute;n de vida del pelo/cabello</td><tdcolspan="2">1 a&ntilde;o</td><td>2 a 7 a&ntilde;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 irobservando los cambios según los vayas introduciendo,guardando sin cerrar el bloc de notas y cada vezactualizando la página en tu navegador (como hiciste en elejercicio paso a paso del tema 3). 15 Añade background="imagenes/fondopatas.gif" dentrode la etiqueta <table>. De este modo, la imagenfondopatas.gif pasará a ser la imagen de fondo de la tabla.
  24. 24. 16 Añade bgcolor="#669966" dentro de la primera etiqueta<tr>. De este modo, la primera fila de la tabla será de colorverde oscuro. 17 Añade bgcolor="#FFCC99" dentro de la segundaetiqueta <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 eltexto PEQUEÑO y GRANDE, serán de color amarillo. Por último cambiaremos las tres primeras filas para que eltexto contenido en ellas tenga formato de cabecera decolumna. 19 Sustituye td por th en las líneas que se encuentran entrelos tres primeros pares de etiquetas <tr> y </tr>. De estemodo, las celdas de las tres primeras filas pasarán a ser títulosde columna, por lo que el texto aparecerá centrado y ennegrita.

×