Post on 07-Mar-2016
description
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 2
Cuando abrimos el explorador obtendremos:
Nombre de la página Contenido de la página
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
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>
</HTML>
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 10
En el navegador lo que veremos será:
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 12
Sí pinchamos en la imagen iremos a la página oficial del Instituto.
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 DPTO TECNOLOGÍA
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 DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 14
En el navegador lo que veremos será:
Ahora vamos a insertar un texto o una imagen con movimiento, la
etiqueta que hay que utilizar es:
<marquee……………</marquee>
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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:
La imagen de los tulipanes se mueve hacia la izquierda.
I.E.S LA CAÑADA DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 16
También podemos hacer que se mueva el texto, introducimos el
siguiente código:
En el navegador veremos texto1 y texto2 en movimiento:
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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:
Etiquetas para hacer tres botones de opción de un formulario
I.E.S LA CAÑADA DPTO TECNOLOGÍA
I.E.S LA CAÑADA Página 18
En el navegador lo que obtendremos será:
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:
El código que hay que poner es:
I.E.S LA CAÑADA DPTO TECNOLOGÍA
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: