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>
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 cada párrafo) sobre la temática de la página Web. 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.
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.
Ejercicio 6:
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:
<CENTER><H1><B>EJERCICIO No.7</B></H1><BR>
<FONT SIZE=5 COLOR="#FF0000">Rojo 100%</FONT><BR>
<FONT SIZE=5 COLOR="#8F0000">Rojo 50%</FONT><BR>
<FONT SIZE=5 COLOR="#4F0000">Rojo 25%</FONT><BR>
<FONT SIZE=5 COLOR="#00FF00">Verde 100%</FONT><BR>
<FONT SIZE=5 COLOR="#008F00">Verde 50%</FONT><BR>
<FONT SIZE=5 COLOR="#004F00">Verde 25%</FONT><BR>
<FONT SIZE=5 COLOR="#0000FF">Azul 100%</FONT><BR>
<FONT SIZE=5 COLOR="#00008F">Azul 50%</FONT><BR>
<FONT SIZE=5 COLOR="#00004F">Azul 25%</FONT></CENTER>
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.
Los mecanismos más usados son los siguientes:
1.- Haz una página llamadainteresantesminombre.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.ierafaeluribe.edu.co”>IE RAFAEL URIBE</A>
</BODY>
</HTML>
Ejercicio 9:
Para comprobar cómo se hacen listas.
Listas desordenadas:
El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Listas ordenadas:
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Ejercicio 10:
Haz una lista desordenada con los nombres:Desayuno, almuerzo, Merienda y Cena.
Convierte en ordenada la lista anterior.
Ejercicio 11:
IMÁGENES Y OBJETOS
<IMG> </IMG>
src = "url" - Indica la URL de la imagen que se muestra
alt = "texto" - Descripción corta de la imagen
height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la imagen (no es obligatorio que coincida con la altura original de la imagen)
width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la imagen (no es obligatorio que coincida con la anchura original de la imagen)
Para incluir gráficos e imágenes en nuestras 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 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></IMG>
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.
<body background="url del fondo">
