El documento proporciona instrucciones paso a paso para crear una página web básica utilizando HTML. Explica cómo insertar texto con diferentes propiedades, hipervínculos, imágenes, tablas, marcos, elementos de formulario, sonido de fondo, llamadas a JavaScript y hojas de estilos.
Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar rápidamente todas
nuestras páginas y ahorrarnos escribir los elementos mínimos de una página
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: