Para empezar a conocer HTML, realizamos varias prácticas que consistían en utilizar las distintas etiquetas, añadiendo sus modificadores, etc. Muchas de estás prácticas eran progresivas, es decir, sobre la misma práctica se iban modificando cosas hasta tener el resultado final.
La primera práctica consiste en colocar varias imágenes y modificar su estilo.
<html> <head> <title>PRÁCTICA 1</title> </head> <body> <h2 align="center">Práctica 1</h2> <hr align="center" size="10" width="80%" color="blue"> <img src="chrome.jpg" alt="Tamaño original" border="3"> <img src="firefox.png" alt="Achatada" border="0" height="300" width="600"> <img src="explorer.jpg" alt="Alargada" border="0" height="600" width="300"> <img src="opera.png" alt="Doble grande" border="0" height="600"> </body> </html>
1ª MODIFICACIÓN
Es buena práctica almacenar las imágenes, sonidos, vídeo, etc. en un directorio aparte, para que las rutas sean más claras y lo tengamos todo organizado.
Esta modificación consiste en crear un directorio para las imágenes, guardar éstas en él y modificar lo que sea necesario para que se siga viendo correctamente.
<html> <head> <title>PRÁCTICA 1.1: IMÁGENES EN DIRECTORIOS</title> </head> <body> <h2 align="center">Práctica 1.1</h2> <hr align="center" size="10" width="80%" color="blue"> <img src="img/chrome.jpg" alt="Tamaño original" border="3"> <img src="img/firefox.png" alt="Achatada" border="0" height="300" width="600"> <img src="img/explorer.jpg" alt="Alargada" border="0" height="600" width="300"> <img src="img/opera.png" alt="Doble grande" border="0" height="600"> </body> </html>
2ª MODIFICACIÓN
Añadir texto con distintos modificadores (color, cursiva, negrita, etc.). Además, poner enlaces en las imágenes para que dirijan a la web que queramos.
<html> <head> <title>PRÁCTICA 1.2: CON TEXTOS</title> </head> <body> <h2 align="center">Práctica 1.2</h2> <hr align="center" size="10" width="80%" color="blue"> <marquee><s>Texto en marquesina y tachado.</s></marquee> <!-- Al ponerlo en marquesina, se pone directamente encima de la imagen --> <a href="http://www.google.com/chrome?hl=es"><img src="img/chrome.jpg" alt="Tamaño original" border="3"></a> <b><i>Texto en negrita y cursiva.</i></b> <a href="http://www.mozilla-europe.org/es/"><img src="img/firefox.png" alt="Achatada" border="0" height="300" width="600" align="top"></a> <blink><font color="blue">Texto parpadeante y azul.</font></blink> <a href="http://windows.microsoft.com/es-ES/windows/downloads?T1=downloadsIE"><img src="img/explorer.jpg" alt="Alargada" border="0" height="600" width="300" align="middle"></a> Texto sin marcadores. <a href="http://www.opera.com/browser/download/"><img src="img/opera.png" alt="Doble grande" border="0" height="600" align="bottom"></a> </body> </html>
3ª MODIFICACIÓN
Crear distintas capas que contengan las distintas partes de la página que hemos estado haciendo.
<html> <head> <title>PRÁCTICA 1.3: CON CAPAS</title> </head> <body> <div name="capa_inicio"> <h2 align="center">Práctica 1.3</h2> <hr align="center" size="10" width="80%" color="blue"> </div> <div name="capa_imagen1"> <marquee><s>Texto en marquesina y tachado.</s></marquee> <a href="http://www.google.com/chrome?hl=es"><img src="img/chrome.jpg" alt="Tamaño original" border="3"></a> </div> <div name="capa_imagen2"> <b><i>Texto en negrita y cursiva.</i></b> <a href="http://www.mozilla-europe.org/es/"><img src="img/firefox.png" alt="Achatada" border="0" height="300" width="600" align="top"></a> </div> <div name="capa_imagen3"> <blink><font color="blue">Texto parpadeante y azul.</font></blink> <a href="http://windows.microsoft.com/es-ES/windows/downloads?T1=downloadsIE"><img src="img/explorer.jpg" alt="Alargada" border="0" height="600" width="300" align="middle"></a> </div> <div name="capa_imagen4"> Texto sin marcadores. <a href="http://www.opera.com/browser/download/"><img src="img/opera.png" alt="Doble grande" border="0" height="600" align="bottom"></a> </div> </body> </html>
4ª MODIFICACIÓN
Añadir estilos a las capas.
<html> <head> <title>PRÁCTICA 1.4: CON CAPAS (OPCIONAL)</title> </head> <body> <div name="capa_inicio" style="position:absolute; left:100; top:100; visibility:hidden; background-color:#66CCFF"> <h2 align="center">Práctica 1.4</h2> <hr align="center" size="10" width="80%" color="blue"> </div> <div name="capa_imagen1" style="position:absolute; left:20; top:20; width:200px; height:200px; overflow:scroll"> <marquee><s>Texto en marquesina y tachado.</s></marquee> <a href="http://www.google.com/chrome?hl=es"><img src="img/chrome.jpg" alt="Tamaño original" border="3"></a> </div> <div name="capa_imagen2" style="position:absolute; left:300; top:20; width:400px; height:200px; background-color:#FF6600; overflow:hidden"> <b><i>Texto en negrita y cursiva.</i></b> <a href="http://www.mozilla-europe.org/es/"><img src="img/firefox.png" alt="Achatada" border="0" height="300" width="600" align="top"></a> </div> <div name="capa_imagen3" style="position:absolute; left:400; top:280; width:300px; height:600px; overflow:auto"> <blink><font color="blue">Texto parpadeante y azul.</font></blink> <a href="http://windows.microsoft.com/es-ES/windows/downloads?T1=downloadsIE"><img src="img/explorer.jpg" alt="Alargada" border="0" height="600" width="300" align="middle"></a> </div> <div name="capa_imagen4" style="position:absolute; left:10; top:900; width:900px; height:700px; background-image:url(http://hd-wallpaper.org/wallpapers/10/Color_Flow_Light_Effect.jpg)"> Texto sin marcadores. <a href="http://www.opera.com/browser/download/"><img src="img/opera.png" alt="Doble grande" border="0" height="600" align="bottom"></a> </div> </body> </html>
La etiqueta del salto de línea <br> no me la coge dentro del código, así que la he eliminado. Simplemente la utilizaba para separar un poco unas imágenes de otras.
No hay comentarios:
Publicar un comentario