actividades html
-
Upload
juan-carlos-arrinas -
Category
Documents
-
view
213 -
download
1
description
Transcript of 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
I.E.S LA CAÑADA DPTO TECNOLOGÍA
Cuando abrimos el explorador obtendremos:
Nombre de la página Contenido de la página
I.E.S LA CAÑADA 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
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á:
I.E.S LA CAÑADA Página 11