actividades html

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


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.



6.- 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.


actividades html

Documents

Transcript of actividades html