Actividades HTML2
-
Upload
juan-carlos-arrinas -
Category
Documents
-
view
218 -
download
4
description
Transcript of Actividades HTML2
![Page 1: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/1.jpg)
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.
![Page 2: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/2.jpg)
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
![Page 3: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/3.jpg)
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>
![Page 4: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/4.jpg)
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.
![Page 5: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/5.jpg)
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>
![Page 6: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/6.jpg)
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.
![Page 7: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/7.jpg)
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>
![Page 8: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/8.jpg)
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…
![Page 9: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/9.jpg)
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>
![Page 10: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/10.jpg)
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.
![Page 11: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/11.jpg)
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á:
![Page 12: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/12.jpg)
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.
![Page 13: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/13.jpg)
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.
![Page 14: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/14.jpg)
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>
![Page 15: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/15.jpg)
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.
![Page 16: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/16.jpg)
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:
![Page 17: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/17.jpg)
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
![Page 18: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/18.jpg)
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:
![Page 19: Actividades HTML2](https://reader033.fdocuments.ec/reader033/viewer/2022042823/568bd8c71a28ab2034a49d15/html5/thumbnails/19.jpg)
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: