trabajo jose 2

15
Colegio nacional Nicolás esguerra Edificamos futuro Trabajo de html Jose Alexander Bernal saenz C:904 C:4 Profesor : john a caraballo

Upload: informaticabacaa

Post on 16-Aug-2015

46 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Trabajo jose 2

Colegio nacional Nicolás esguerra

Edificamos futuro

Trabajo de html

Jose Alexander Bernal saenz

C:904

C:4

Profesor : john a caraballo

Page 2: Trabajo jose 2

Unidad 1Crear una pagina basica

<html><head><title>Inicio</title></head><body bgcolor="#99CC99"></body></html>

Este seria el codigo base

esto lo escribiriamos en el bloc de notas despues lo guardamos :seleccionandole donde queremos que este y añadiendole el .html para que se abra con el navegador

Page 3: Trabajo jose 2

Unidad dosInsertar textos con diferentes propiedades

insertar texto con diferentes propiedades debajo de la etiqueta body

<basefont color="red" size="1 ">

Esto lo que crearia seria un linea en blanco que separaria el titulo de el contenidodespués creariamos un texto dentro de la etiqueta <hr> y escribiríamos lo que queremos que aparezca arriba de la linea

Page 4: Trabajo jose 2

para agregar una descripción

<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></ul><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></ul>

Este seria el codigo solo modificamos el contenido y ya

Unidad 3Insertar un hiperenlaces

aca añadiremos un enlace para esto el codigo correspondiente seria

<p align="center">

<a href="http://www.aulaclic.com" target="_blank"><b>visita aulaClic</b>

Page 5: Trabajo jose 2

</a></p>

Esto nos agregaria un hiperenlace en nuestra pagina

Unidad 4Insertar una imagen

para agregar una imagen crearemos una carpeta llamada como nuestra empresa en este caso “guayos”dentro de esta crearemos una pagina llamada imágenes aca pegaremos una imagen que la renombraremos como imagen 1 para que la imagen aparezca en la pagina web agregamos el codigo :

<img src="imagenes/imagen 1.jpg" width="200" height="80">

Width and height =ancho y alto

Page 6: Trabajo jose 2

Para que las imagenes se centren pegariamos este codigo

<p align="center">

Atrás del codigo para las imágenes es decir

<p align="center"><img src="imagenes/imagen 1.jpg" width="200" height="80">

Unidad 5Trabajar un tablas

tablasaca lo que intentamos hacer es que las imágenes queden a un lado y la descripción a otro el codigo para esto seria

<br><table width="100%" border="0"><tr> <td width="70%">

Esto detrás de hr

y

</td><td width="30%">

Page 7: Trabajo jose 2

esto detrás de </ul>

</td></tr></table>

Escribimos delante de la etiquita </body>

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

Despues escribimos </table>

Después escribimos 6 vecees <tr align="center" valign="middle">

Unidad 6Crear un conjunto de marcos

Inserta la linea en blanco debajo de la etiqueta </head>

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

NO" noresize>

Page 8: Trabajo jose 2

<frame src="inicio.htm" name="marcoderecho" frameborder="no"></frameset>

con la primera linea estaras creando dos marcos en la pagina

se distribuiran en forma de columna (cols="142,*"). 

inserta una linea en blanco debajo de la etiqueta </frameset>, 

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

Unidad 7Insertar elementos de formularios

Busca la linea de <td>Campo de seleccion</td>

<select name="animal">

<option selected>--- Elige opci&oacute;n ---</option><option>Perro</option><option>Gato</option><option>Otros</option></select>

Inserte una line a de en blanco debajo de la linea <input name="restablecer" type="reset" value="Restablecer">,

Page 9: Trabajo jose 2

y escribe el siguiente codigo en ella <input name="enviar" type="submit" value="Enviar">

Unidad 8Insertar sonido de fondo

Insertar una linea en blanco debajo de la etiqueta <basefont>

Después escribimos este codigo <bgsound src="varios/audioanimales.MID" loop="-1">

con este codigo estaras estableciendo el archivo  audioanimales.MID

sustituye la palablar inicio por el siguiente codigo

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

Page 10: Trabajo jose 2

</embed></object>

sustitulle la palabra guayos por el sieguiente codigo

<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="bperros.swf"><param name="quality" value="high"><embed src="bperros.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash" ></embed></object>

Unidad 9Modificar las propiedades de una capa

Añaade la pagina detrás de la etiqueta  </table> 

El siguiente codigo

<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">&nbsp;</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>

Page 11: Trabajo jose 2

La capa se mostrara a distancia de margenes específicamente width y height 

Unidad 10Llamadas a javascript

Copia el siguiente codigo de lante de la etiqueta </head>:

<!--function MM_reloadPage(init) { //reloads the window if Nav4 resizedif (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

Page 12: Trabajo jose 2

if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_showHideLayers() { //v6.0var i,p,v,obj,args=MM_showHideLayers.arguments;for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }obj.visibility=v; }}//--></script>

Después busca la linea <a href="#"><img src="imagenes/gatito.gif" alt="gatito" border="0"></a> y Ya

Unidad 11Crear hoja de estilos

Inserta este codigo en el documento en blanco

body { background-color: #FFCC00; }.mitexto { text-transform: uppercase; color: #FF0000; }

con este texto define el color del documento

#FFCC00 (

Page 13: Trabajo jose 2

Pagina wed: file:///C:/Users/estacion1/Desktop/HTML/guayos/index.htm