1. Creación de páginas web. Lenguaje HTML > HTML,siglas de HyperTextMarkup Language («lenguaje de marcas de hipertexto»),
Ejercicios de Lenguaje HTML (I)
Ejercicio 1
1.- Abre el Bloc de Notas y escribe el siguiente texto:
<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
<HEAD>
<BODY>
<CENTER><H1>Mi primera página</H1></CENTER>
<HR>
<P>Esta es mi primera página
</BODY>
</HTML>
2.- Guárdalo con el nombre mipag01tunombre.html
3.- Arranca el navegador y abre el fichero que acabas de crear.
Ejercicio 2
Edita el fichero mipag01tunombre.html y pon el siguiente cuerpo a la página.
<H1>TÍTULO 1</H1>
<H2>TÍTULO 2</H2>
<H3>TÍTULO 3</H3>
<H4>TÍTULO 4</H4>
<H5>TÍTULO 5</H5>
<H6>TÍTULO 6</H6>
2. Sálvalo con el nombre mipag02tunombre.html y luego ábrelo con el navegador.
Ejercicio 3
1.- Edita el fichero mipag01.html y pon en el cuerpo dos o tres párrafos (de tres o cuatro líneas caada párrafo)
tomados del artículo de la energía en Andalucía. Separa los párrafos sin poner etiquetas, sólo pulsando Intro
una o dos veces. Sálvalo, y luego edítalo con tu navegador. Observa que los párrafos se ven juntos.
2.- Sigue con la edición del fichero, pon las etiquetas <P> a cada párrafo. Sálva el fichero y ábrelo con el
navegador.
3.- Aumenta la separación entre párrafos con <BR> y <P>.
Ejercicio 4:
Para comprobar cómo se pueden alinear textos.
1.- Edita el fichero mipag01tunombre.html y justifica todos los párrafos con <DIV align=justify>. Comprueba
en el navegador la presentación.
3. 2.- Ahora centra el párrafo y ajusta a la derecha el segundo. Comprueba el resultado.
Ejercicio 5:
Para cambiar el aspecto de la letra
1.- Edita el fichero mipagina01tunombre.html y pon a las frases del primer párrafo las etiquetas adecuadas
para que aparezcan en negrita, cursiva y teletipo.
2.- Usa la etiqueta <FONT> con size = 1,2, etc., para tener las primeras palabras del segundo párrafo en
tamaño creciente.
3. Ahora usa la etiqueta <FONT> con size = + 1, - 1, + 2, - 2, etc. para tener las primeras palabras del segundo
párrafo en tamaño creciente y decreciente.
4. Ejercicio 6:
Para comprobar los parámetros de los colores. Guía de colores
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy Blue Teal Aqua
1.- Haz un fichero colores01tunombre.html con varias líneas como la siguiente, una para cada uno de los
colores de la tabla anterior.
<FONT color=”red”>Rojo</FONT>
Ejercicio 7:
1.- Haz un fichero colores02tunombre.html con el siguiente texto:
<FONT COLOR=”#FF0000”>Rojo 100%</FONT>
<FONT COLOR=”#8F0000”>Rojo 50%</FONT>
<FONT COLOR=”#4F0000”>Rojo 25%</FONT><P>
<FONT COLOR=”#00FF00”>Verde 100%</FONT>
<FONT COLOR=”#008F00”>Verde 50%</FONT>
<FONT COLOR=”#004F00”>Verde 25%</FONT><P>
<FONT COLOR=”#0000FF”>Azul 100%</FONT>
<FONT COLOR=”#00008F”>Azul 50%</FONT>
<FONT COLOR=”#00004F”>Azul 25%</FONT>
Sálvalo y léelo en tu navegador.
2.- Cambia los colores RGB anteriores y observa los resultados.
3.- Experimenta con los códigos para obtener el color amarillo.
Ejercicio 8:
Para comprobar cómo hacer hipertexto.
5. Los mecanismos más usados son los siguientes:
1.- Haz una página llamada interesantesminombre.html donde poner enlaces a sitios interesantes. Por
ejemplo, puedes empezar con el siguiente texto:
<HTML>
<HEAD>
<meta http-equiv=”Content-Type” content=”text/html; char-
set=ISO-8559-1”>
<TITLE>Sitios de interés</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Mis páginas favoritas</H1>
</CENTER>
<HR>
Estas son mis páginas favoritas:
<P><A HREF=”http://www.google.es”>Google</A>
<BR> <A HREF=”http://www.juntadeandalucia.es/averroes/iesalfonso_romero_barcojo”>IES Alfonso Romero
Barcojo</A>
</BODY>
</HTML>
Ejercicio 9:
Para comprobar cómo se hacen listas.
Listas desordenadas:
6. Listas ordenadas:
Ejercicio 10:
Haz una lista desordenada con los nombres:Desayuno, almuerzo, Merienda y Cena.
Convierte en ordenada la lista anterior.
Ejercicio 11:
Para incluir gráficos e imágenes en unestras páginas utilizaremos la etiqueta <IMG> de esta manera:
<IMG SRC="fichero_grafico"" ALT="description"
El parámetro SRC especifica el nombre del fihero que contiene el gráfico. Los formatos de imagen deben ser
7. JGP o GIF. El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores
que no lo muestren.
Con los parámetros HEIGHT y WIDTH se puede indicar siempre: la altura y la anchura del gráfico en píxeles.
<IMG SRC="animales/gato.jpg" ALT="Gato" Width=100 Height=145
El nombre del fichero imagen debe hacer referencia ala carpeta de origen del mismo. No se pondrá si ésta es
la misma que la del documento HTML que estamos elaborando.
Se puede alinear una imagen a la izquierda o a la derecha de la página. Esto se consigue con los parámetros
ALIGN= RIGHT (imagen a la derecha) y ALIGN=LEFT (la imagen queda a la izquierda).
También se puede poner una imagen como fondo de toda la página. Esto se consigue poniendo el parámetro
BACKGRONUD="imagen" en la etiqueta <BODY>, siendo imagen el nombre del fichero gráfico GIF o JPG.
<BODY BACKGROUND="animales/gato.gif">
Apoyándote en la explicación anterior, edita el archivo del ejercicio nº 3 e inserta una imagen centrada detrás
de cada párrafo.
Ejercicio 12:
Edita el archivo nº 6 y coloca como imagen de fondo de la página una paleta de colores que captures en
Internet.
Caráct
er
Entidad
HTML
Caráct
er
Entidad
HTML
á á Á Á
é é É É
í í Í Í
ó ó Ó Ó
ú ú Ú Ú
ü ü Ü Ü
ñ ñ Ñ Ñ
¡ ¡ ¿ ¿
