Page 1

I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 1


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

Cuando abrimos el explorador obtendremos:

Nombre de la página

I.E.S LA CAÑADA

Contenido de la página

Página 2


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 3


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 4


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 5


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 6


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 7


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 8


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 9


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 10


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 11


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 12


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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 13


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 14


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 15


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 16


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 17


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

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

Página 18


I.E.S LA CAÑADA

DPTO TECNOLOGÍA

En el navegador lo que veremos será:

Y pasado un cierto tiempo nos lleva (refresca) a la página de google:

I.E.S LA CAÑADA

Página 19

Actividades HTML2  
Actividades HTML2  

Actividades de html

Advertisement