Actividades HTML2

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.



Cuando abrimos el explorador obtendremos:

Nombre de la página Contenido de la página

2.- Distintos tipos de fuente:

<HTML>

<HEAD>

<TITLE> Distintos tipos de fuente</TITLE>

</HEAD>

<BODY>

En este ejemplo veremos distintos tipos de fuente

 

Texto en negrita

 

Texto en negrita

 

Texto en cursiva

 

Texto subrayado

 

También podemos anidar distintos estilos

podemos anidar un texto en negrita en un texto

en cursiva

</BODY>

</HTML>

En el ejemplo de arriba la etiqueta 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.

3.- Cambiar el tipo, tamaño y color de un determinado texto:

<HTML>

<HEAD>

<TITLE>Cambiar un texto determinado</TITLE>

</HEAD>

<BODY>



Cambiamos el tipo de letra



 



Cambiamos el tamaño de letra



 



Cambia el color del texto



 



Cambiamos tamaño, color y tipo



</BODY>

</HTML>



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.

http://html-color-codes.info/codigos-de-colores-hexadecimales/

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>



Cambia el tipo de letra



 



Cambiamos el tamaño de letra



 

<BODY STYLE="background:#80BFFF">

</BODY>

</HTML>



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…

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>



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.



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á:

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.



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.

Ahora vamos a insertar un texto o una imagen con movimiento, la

etiqueta que hay que utilizar es:

<marquee……………</marquee>



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.



También podemos hacer que se mueva el texto, introducimos el

siguiente código:

En el navegador veremos texto1 y texto2 en movimiento:



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



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:




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

google:

Actividades HTML2

Documents

Transcript of Actividades HTML2