I.E.S LA CAÑADA Página 1
ACTIVIDADES DE HTML
1.-Estructura básica de un archivo HTML:
<HTML> <HEAD>
<TITLE> ejemplo de código HTML</TITLE> </HEAD>
<BODY>
Aquí va el contenido de la página </BODY>
</HTML>
Guardamos el archivo con el nombre que queramos y con la extensión .html ó .htm.
I.E.S LA CAÑADA Página 2
Cuando abrimos el explorador obtendremos:
I.E.S LA CAÑADA Página 3
2.-Distintos tipos de fuente:
<HTML> <HEAD>
<TITLE> Distintos tipos de fuente</TITLE> </HEAD>
<BODY>
En este ejemplo veremos distintos tipos de fuente <BR> <STRONG>Texto en negrita</STRONG> <BR> <B>Texto en negrita</B> <BR> <I>Texto en cursiva</I> <BR> <U>Texto subrayado</U> <BR>
También podemos anidar distintos estilos
<I>podemos anidar <B>un texto en negrita </B> en un texto en cursiva</I>
</BODY> </HTML>
I.E.S LA CAÑADA Página 4
En el ejemplo de arriba la etiqueta <BR> se utiliza para hacer un salto de línea dentro del párrafo.
En el navegador lo que obtenemos es:
Para el texto en negrita podemos utilizar dos etiquetas distintas. Las etiquetas en principio da igual que se escriban en mayúsculas ó minúsculas, el navegador las reconoce de igual manera.
I.E.S LA CAÑADA Página 5
3.-Cambiar el tipo, tamaño y color de un determinado texto:
<HTML> <HEAD>
<TITLE>Cambiar un texto determinado</TITLE> </HEAD>
<BODY>
<FONT FACE=”Arial black”> Cambiamos el tipo de letra </FONT>
<BR>
<FONT SIZE =+3>
Cambiamos el tamaño de letra </FONT>
<BR>
<FONT COLOR=RED> Cambia el color del texto </FONT>
<BR>
<FONT COLOR=GREEN SIZE=”6” FACE=”Calibri”> Cambiamos tamaño, color y tipo
</FONT> </BODY> </HTML>
I.E.S LA CAÑADA Página 6
En el navegador lo que obtenemos es lo siguiente:
Los colores en HTML también se pueden meter con códigos, cada código HTML tiene el símbolo # y 6 letras o números. Los dos primeros símbolos del código representan la intensidad del color rojo, 00 es el menos intenso y FF es el más intenso, los otros dos símbolos representan la intensidad del verde y los dos últimos símbolos la intensidad del azul.
Así por ejemplo tenemos los siguientes colores: #FF0000 rojo puro
#00FF00 verde #0000FF azul
En el siguiente enlace tenéis un diagrama con los códigos de colores en HTML.
I.E.S LA CAÑADA Página 7
4.- Usar los códigos de colores HTML para cambiar el color de fondo del sitio web:
En este caso la etiqueta que tenemos que utilizar es: <BODY STYLE=”background:color”>
En el siguiente ejemplo cambiamos el color de fondo de la página. <HTML>
<HEAD>
<TITLE>Color de fondo del sitio web</TITLE> </HEAD>
<BODY>
<FONT FACE="Arial"> Cambia el tipo de letra </FONT>
<BR>
<FONT SIZE =+3>
Cambiamos el tamaño de letra </FONT>
<BR>
<BODY STYLE="background:#80BFFF"> </BODY>
I.E.S LA CAÑADA Página 8
El resultado que obtenemos en el navegador es:
En la imagen de arriba vemos que el fondo de la página es azul claro.
En lugar de poner el código de 6 dígitos con números y letras, también podemos poner el nombre del color: red, yellow, blue, etc…
I.E.S LA CAÑADA Página 9
5.-Establecer vínculos.
En esta actividad utilizaremos una etiqueta HTML para crear un vínculo que enlace con una determinada página web.
<A HREF=http://página con la que quiero enlazar> Texto con el que se va a hacer el hipervínculo </A>
El ejemplo será de la siguiente manera: <HTML>
<HEAD>
<TITLE> ESTABLECER VINCULOS </TITLE> </HEAD>
<BODY>
<AHREF=http://www.educa.madrid.org/web/ies.lacanada.coslada/> <CENTER>web oficial del I.E.S La Cañada</CENTER>
</A> </BODY> </HTML>
I.E.S LA CAÑADA Página 10
Si pinchamos en el enlace del I.E.S la Cañada, iremos a la página oficial del Instituto.
I.E.S LA CAÑADA Página 11
El vínculo no tiene porque ser enlazado con un texto, también puede ser con una imagen tal y como vemos en el siguiente ejemplo:
En el ejemplo de arriba el vínculo está asociado a una imagen, en el navegador lo que veremos será:
I.E.S LA CAÑADA Página 12
6.-Insertar una imagen:
En esta actividad insertaremos una imagen con las etiquetas html. <IMG SRC = “imagen. jpg”>
Para que se inserte bien la imagen, tiene que estar el archivo de la imagen y el archivo del bloc de notas en la misma carpeta.
I.E.S LA CAÑADA Página 13
En la siguiente imagen tenemos el código html que tenemos que poner
Etiqueta para insertar una imagen, centrada y con 220 de anchura y 300 de altura.
I.E.S LA CAÑADA Página 14
Ahora vamos a insertar un texto o una imagen con movimiento, la etiqueta que hay que utilizar es:
I.E.S LA CAÑADA Página 15
Para que la imagen de arriba de los tulipanes, tenga movimiento el código que hay que introducir es:
Lo que veremos en el navegador será la siguiente imagen, que se mueve de derecha a izquierda de la pantalla:
I.E.S LA CAÑADA Página 16
I.E.S LA CAÑADA Página 17
7.- Actividad para hacer un formulario para elegir distintas opciones en forma de botón, introduce las etiquetas que aparecen en la siguiente imagen:
I.E.S LA CAÑADA Página 18
Realiza un formulario que tenga 5 cuestiones distintas y cada cuestión tenga 4 opciones de botón. Además en la página cada cuestión debe tener distinto tipo de letra y color .Las cuestiones pueden ser sobre lo que tú quieras.
8.- Etiqueta para refrescar a otra página:
I.E.S LA CAÑADA Página 19
En el navegador lo que veremos será:
Y pasado un cierto tiempo nos lleva (refresca) a la página de google:
