2. 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:
<framesetrows="*" cols="142,*" framespacing="0" frameborder="NO"
border="0"><framesrc="menu.htm" name="marcoizquierdo" frameborder="no"
scrolling="NO" noresize><framesrc="inicio.htm" name="marcoderecho"
frameborder="no"></frameset>
3. Luego insetamos un línea en blanco debajo de </frameset> y escribimos:
3. <noframes><bodybgcolor="#99CC99"> Esta página tiene marcos, y tu navegador
no los soporta </body></noframes>
4. Y listo hemos finalizado
Insertar texto con diferentes propiedades
1. Abrimos nuestro Archivo creado anteriormente
2. Ahora insertamos una línea en blanco debajo de la etiqueta <Body> y escribimos lo
siguiente:
4. 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. 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)
6. 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:
7. 3. Ahora colocamos una lista intercalando las etiquetas y nos quedara asi:
4. Y listo
Insertar un hiperenlace
8. 1. Primero que todo abrimos nuestro documento Html anterior:
2. Ahora colocamos el siguiente codigo HTML depues de </body> y nos quedara asi:
9. 3. Ahora rectificamos que la etiqueta <body> quede asi:
4. Y finalmente nuestra pagina web, emos terminado.
Insertar una imagen
10. 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:
11. 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:
12. 3. Y finalmente hemos terminado.
Trabajar con tablas
1. Primero que todo abrimos nuestro anterior archi HTML… comenzemos…
13. 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>
<bodybgcolor="#99CC99" link="red" vlink="black" alink="blue">
<h1>Inicio</h1><basefont color="black" size="4">
<br>
<tablewidth="100%" border="0">
<tr>
<tdwidth="70%">
<hr>
<blockquote>
<blockquote>
<p align="center"><imgsrc="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>
14. 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>
<tdwidth="30%">
</ul>
</body><p align="center">
<ahref="http://www.aulaclic.es/" target="_blank">
</td>
</tr>
</table><imgsrc="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:
<tablewidth="575" border="2" align="center" cellspacing="2"
bordercolor="#000000" >
3. Luego escribimos </table>
4. Y escribimos “6” veces
<tralign="center" valign="middle"></tr>
5. Y luego escribimos
<tdcolspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>
15. 6. Ahora vamos a rellenar la segunda fila para ello escribimos después de la
segunda etiqueta <tr…:
<tdrowspan="2">DIFERENCIAS</td>
7. Y luego
<tdcolspan="2">PERRO</td>
<tdrowspan="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><tdcolspan="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><tdcolspan="2">1
año</td><td>2 a 7 años</td>
12. Emos finalizado y nos quedara asi:
Crear conjunto de marcos
16. 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:
<framesetrows="*" cols="142,*" framespacing="0" frameborder="NO"
border="0"><framesrc="menu.htm" name="marcoizquierdo" frameborder="no"
scrolling="NO" noresize><framesrc="inicio.htm" name="marcoderecho"
frameborder="no"></frameset>
3. Luego insetamos un línea en blanco debajo de </frameset> y escribimos:
<noframes><bodybgcolor="#99CC99"> Esta página tiene marcos, y tu navegador
no los soporta </body></noframes>
4. Y listo hemos finalizado
Insertar elementos de formulario
1. Primero que todo abrimos nuestro archivo HTML…
17. 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:
<selectname="animal"><optionselected>--- Elige opción --</option><option>Perro</option><option>Gato</option><option>Otros</option></selec
t>
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 fondo
1. Primero abrimos nuestro documento HTML…
18. 2. Buscamos la etiqueta <basefont> y hacemos una línea en blanco de bajo debajo y
colocamos esto:
<bgsoundsrc="varios/audioanimales.MID" loop="-1">
3. Y luego sustituimos palabras por estos códigos :
- <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=6,0,29,0" width="100" height="23"><paramname="movie"
value="binicio.swf"><paramname="quality" value="high"><embedsrc="binicio.swf"
width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" ></embed></object>
- <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=6,0,29,0" width="100" height="23"><paramname="movie"
value="bgatos.swf"><paramname="quality" value="high"><embedsrc="bgatos.swf"
width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" base="."></embed></object>
-
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
19. rsion=6,0,29,0" width="100" height="23"><paramname="movie"
value="bconsultas.swf"><paramname="quality"
value="high"><embedsrc="bconsultas.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-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"><fontsize="4">Este es Golfo y es de
Valencia</font></p><p align="center"><imgsrc="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 JavaScript
20. 1. 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"><!-- functionMM_reloadPage(init) {
//reloadsthewindowif Nav4 resizedif (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }} elseif (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true);
functionMM_findObj(n, d) { //v4.01 varp,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); if(!x
&&d.getElementById) x=d.getElementById(n); return x; } functionMM_showHideLayers() {
//v6.0 vari,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>
3. Y luego añadimos a onClick="MM_showHideLayers('gatosemana','','show')" después de
border="0".
21. 4. Buscamos el la etiqueta </td> y pegamos
<p align="center"><fontsize="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 estilos
1. 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:
