Recuperacion

COLEGIO NICOLAS ESGUERRA

901

Juan Fernando reyes Galeano -29

TRABAJO DE INFORMATICA

Crear una página básica

1. Primero que todo abrimos nuestro documento HTML…

2. Ahora insertamos una línea en blanco debajo de la etiqueta </head> y escribimos el siguiente código:

<frameset rows="*" cols="142,*" framespacing="0" frameborder="NO" border="0"> <frame src="menu.htm" name="marcoizquierdo" frameborder="no" scrolling="NO" noresize> <frame src="inicio.htm" name="marcoderecho" frameborder="no"> </frameset>

3. Luego insetamos un línea en blanco debajo de </frameset> y escribimos:

<noframes> <body bgcolor="#99CC99"> Esta página tiene marcos, y tu navegador no los soporta </body> </noframes>

4. Y listo hemos finalizado

Insertar texto con diferentes propiedades1. Abrimos nuestro Archivo creado anteriormente

2. Ahora insertamos una línea en blanco debajo de la etiqueta <Body> y escribimos lo siguiente:

3. Ahora detrás de la etiqueta <basefont> inserta una línea en blanco, y escribes cualquier cosa Ejemplo “Inicio”

4. Luego retificaremos la etiqueta <basefont> y la colocamos asi:

5. Luego encerraremos el “Inicio” con “<H1>”inicio”<H1” y nos quedara asi:

6. Luego agregaremos una etiqueta <hr> y después agregaremos el siguiente código y nos quedara así:

Y listo..

(EJERCISIO 2)

1. Comenzamos dándole de encabezado la palabra Gatos asi “<h1>Gatos</h1>” y nos quedara asi:

2. Ahora Agregamos una columna y colocamos dentro de una etiqueta <blockquote> lo siguiente:

3. Ahora colocamos una lista intercalando las etiquetas y nos quedara asi:

4. Y listo

Insertar un hiperenlace

1. Primero que todo abrimos nuestro documento Html anterior:

2. Ahora colocamos el siguiente codigo HTML depues de </body> y nos quedara asi:

3. Ahora rectificamos que la etiqueta <body> quede asi:

4. Y finalmente nuestra pagina web, emos terminado.

Insertar una imagen

1. Abrimos nuestra pagina en HTML anterior y comenzemos…

2. Ahora sustituyes la línea <b> Aula Clic Cursos de HTML</b> por este código:

3. Y finalmente nos quedara asi:

(EJERCISIO 2)

1. Primero que todo abrimos nuestro archivo anterior de HTML…

2. Luego buscamos la etiqueta <p….. y la cambiamos por el siguiente código HTML:

3. Y finalmente hemos terminado.

Trabajar con tablas1. Primero que todo abrimos nuestro anterior archi HTML… comenzemos…

2. Detrás de la etiqueta <hr> añadimos 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.Codigo:<html> <head> <title>Index</title> </head> <body bgcolor="#99CC99" link="red" vlink="black" alink="blue"><h1>Inicio</h1><basefont color="black" size="4"><br><table width="100%" border="0"><tr> <td width="70%"><hr><blockquote> <blockquote><p align="center"><img src="Imagenes/Baile de pinguinos.gif" width="122" height="85"> </p><em>Somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales. <br>

Desde esta página web intentaremos resolver tus dudas acerca de cómo cuidar a tus mascotas.</em></p></blockquote></blockquote><br><h1>Gatos</h1><blockquote> <h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3></blockquote><ul><li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li><ul><li>Preferiblemente que coma pienso</li><li>Cepillarle los dientes una vez a la semana</li><li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li></td><td width="30%"></ul></body><p align="center"><a href="http://www.aulaclic.es/" target="_blank"></td></tr></table><img src="Imagenes/Visitar Aula Clic.jpg" alt="visita aulaclic" width="200" height="50" border="4"></a></p></html>

(EJERCISIO 2)

1. Abrimos nuestro anterior archivo HTML…2. Antes de la etiqueta </body> agregamos el siguiente código html:

<table width="575" border="2" align="center" cellspacing="2" bordercolor="#000000" >

3. Luego escribimos </table>4. Y escribimos “6” veces

<tr align="center" valign="middle"> </tr>5. Y luego escribimos

<td colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>

6. Ahora vamos a rellenar la segunda fila para ello escribimos después de la segunda etiqueta <tr…:<td rowspan="2">DIFERENCIAS</td>

7. Y luego<td colspan="2">PERRO</td><td rowspan="2">HOMBRE</td>

8. Ahora vamos a rellenar la tercera fila, escribe esto después de la tercera etiqueta <tr…:<td>PEQUEÑO</td><td>GRANDE</td>

9. Ahora rellenaremos la cuarta fila, en esta fila tenemos que definir las cuatro columnas normales y escribimos esto 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>

10. Ahora vamos a rellenar ahora la quinta fila para ellos hacemos esto después de la quinta etiqueta <tr…:<td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td>

11. Por ultimo rellenamos la sexta fila, y escribimos después de la sexa etiqueta <tr…:<td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td>

12. Emos finalizado y nos quedara asi:

Crear conjunto de marcos

1. Primero que todo abrimos nuestro documento HTML…

2. Ahora insertamos una línea en blanco debajo de la etiqueta </head> y escribimos el siguiente código:

<frameset rows="*" cols="142,*" framespacing="0" frameborder="NO" border="0"> <frame src="menu.htm" name="marcoizquierdo" frameborder="no" scrolling="NO" noresize> <frame src="inicio.htm" name="marcoderecho" frameborder="no"> </frameset>

3. Luego insetamos un línea en blanco debajo de </frameset> y escribimos: <noframes> <body bgcolor="#99CC99"> Esta página tiene marcos, y tu navegador no los soporta </body> </noframes> 4. Y listo hemos finalizado

Insertar elementos de formulario1. Primero que todo abrimos nuestro archivo HTML…

2. Ahora Buscamos la línea <td>Campo de seleccion</td>, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente código: <select name="animal"> <option selected>--- Elige opción ---</option> <option>Perro</option> <option>Gato</option> <option>Otros</option> </select>

3. Ahora insertamos una línea en blanco debajo de la línea <input name="restablecer" type="reset" value="Restablecer">, y escribe el siguiente código en ella: <input name="enviar" type="submit" value="Enviar">

4. Y listo final mente hemos terminado.

Insertar sonido de fondo1. Primero abrimos nuestro documento HTML…

2. Buscamos la etiqueta <basefont> y hacemos una línea en blanco de bajo debajo y colocamos esto:<bgsound src="varios/audioanimales.MID" loop="-1">

3. Y luego sustituimos palabras por estos códigos :- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="binicio.swf"> <param name="quality" value="high"> <embed src="binicio.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" > </embed> </object>

- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="bgatos.swf"> <param name="quality" value="high"> <embed src="bgatos.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."> </embed> </object>

- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/

swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="bconsultas.swf"> <param name="quality" value="high"> <embed src="bconsultas.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."> </embed> </object>

4. Y finalmente hemos terminado…

Modificar las propiedades de una capa

1. Primero que todo abrimos nuestro código HTML.

2. Ahora detrás de la etiqueta </table> colocamos el siguiente código:<div id="gatosemana" style="position:absolute; width:320px; height:320px; z-index:1; left: 10px; top: 69px; background-color:#FFFF99; layer-background-color:#FFFF99;" > <p align="center"> </p> <p align="center"><font size="4">Este es Golfo y es de Valencia</font></p> <p align="center"><img src="imagenes/gato1.gif" ></p> <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p> </div>

3. Y listo finalmente hemos terminado

Llamadas a JavaScript1. Primero que todo abrimos nuestro codigo HTML…

2. Ahora buscamos la etiqueta </head> y delante de la etiqueta </head> colocamos el siguiente código:

<script language="JavaScript" type="text/JavaScript">  </script>

3. Y luego añadimos a onClick="MM_showHideLayers('gatosemana','','show')" después de border="0".

4. Buscamos el la etiqueta </td> y pegamos <p align="center"><font size="2">Pulsa sobre la imagen para ver el gato de la semana</font></p>

5. Y luego buscamos la línea <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p> Y Añade onClick="MM_showHideLayers('gatosemana','','hide')" después de size="4" dentro de la etiqueta <font.

6. Y final mente hemos terminado.

Crear hoja de estilos1. Abrimos un documento en blanco:

2. Ahora colocamos lo siguiente:body { background-color: #FFCC00; } .mitexto { text-transform: uppercase; color: #FF0000; }

3. Y el código nos quedara asi:

4. Y la página web nos quedara así:

Recuperacion

Documents

Transcript of Recuperacion