IES CARLOS III
DPTO. TECNOLOGÍA
EJERCICIO PREVIO: Crear la carpeta htmlnombrealumnos. Cada ejercicio se nombrará: htmlnºnombrealumnos.htm EJERCICIO Nº1: <html> <head> <title>Cocina Para Todos</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Estás en la página <b>Cocina para Todos</b>.</p> <p>Aquí aprenderás recetas fáciles y deliciosas.</p> </body> </html> EJERCICIO Nº2: Se trata de repetir el Ejercicio nº1 eliminando la etiqueta <title>. Observa y explica las diferencias en el mismo ejercicio. EJERCICIO Nº3: Construir una página que tenga, por este orden: 2 Párrafos centrados 3 Párrafos alineados a la derecha Un salto de línea triple 1 párrafo alineado a la izquierda EJERCICIO Nº4: TODOS LOS ENCABEZADOS. Construir una página web que contenga todos los encabezados posibles con distintas alineaciones. EJERCICIO Nº5: FORMATO DE TEXTO. Construir una página web que contenga los elementos: <b>, <u>, <sup>, <sub>. EJERCICIO Nº6. Realizar una página que tenga las siguientes características: • Un titular con encabezado de nivel 1 centrado y color verde oliva. • Un segundo titular con encabezado de nivel 2 centrado, también de color verde oliva.
HTML. EJERCICIOS
1/7
IES CARLOS III
•
DPTO. TECNOLOGÍA
Todo el texto de la página deberá presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Comic Sans MS" o “Tahoma” y en caso de que ésta no esté en el sistema que se coloque la fuente "Arial".
EJERCICIO Nº7. Añadir a la página del Ejercicio Nº1 un fondo de la carpeta de fondos. EJERCICIO Nº8. Añadir a la página del Ejercicio Nº1 un color de fondo. EJERCICIO Nº9. Modificar los márgenes de cualquier ejercicio anterior con los el fin de probar los distintos valores de este atributo. Ejemplo: topmargin=10 leftmargin=10 marginheight=10 marginwidth=10 bgcolor=336699 EJERCICIO Nº10 Observar que ocurre si no introduzco los códigos específicos de Netscape EJERCICIO Nº11 Construir una página web que ocupe un espacio mayor que una pantalla y colocar un enlace interno para pasar del principio al final de la página y otro que realice la operación inversa. EJERCICIO Nº12 Construir una página web que en la que aparezcan enlaces a otras páginas web. EJERCICIO Nº13 Construir una página web en la que aparezcan enlaces para crear un mensaje de correo dirigido a una dirección. EJERCICIO Nº14 Construir una página web con un enlace a un fichero zip. HTML. EJERCICIOS
2/7
IES CARLOS III
DPTO. TECNOLOGÍA
EJERCICIO Nº15 Construir una página web con un enlace a un fichero pdf. EJERCICIO Nº16 El fichero coloreshtmlmejor3.html de la carpeta Colores tiene un enlace a otro fichero que no funciona. Soluciona el problema. NOTA: En la carpeta COLORES tienes los ficheros que necesitas.
EJERCICIO Nº17 1.- Tienes que crear la carpeta Renault y el fichero index.html. 2.- Dentro de ella crearás las carpetas: Megane, Laguna, Scénic y Espace., y en cada una de ellas los respectivos ficheros Megane, Laguna, Scénic y Espace, todos con la extensión html.
HTML. EJERCICIOS
3/7
IES CARLOS III
DPTO. TECNOLOGÍA
3.- Ahora vas crear enlaces en index a cada uno de los ficheros Megane, Laguna, Scénic y Espace y viceversa.
EJERCICIO Nº18 Coloca una imagen en el fichero del sitio web renault “megane.html”, para ello utiliza la etiqueta img y el atributo src.
EJERCICIO Nº19 A la imagen del ejercicio anterior le daremos una pequeña descripción, para ello utiliza el atributo alt. EJERCICIO Nº20 A la imagen del ejercicio anterior le daremos una altura y anchura en pixels, para ello utiliza los atributos height y width. EJERCICIO Nº21 A la imagen del ejercicio anterior le pondremos un cuadro que rodea la imagen, para ello utiliza el atributo border=” nº de pixels”. EJERCICIO Nº22
HTML. EJERCICIOS
4/7
IES CARLOS III
DPTO. TECNOLOGÍA
Utilizar la imagen como enlace, para ello colocaremos la imagen entre la etiqueta de apertura y la de cierre del enlace. EJERCICIO Nº23 Realizar una página que contenga una imagen varias veces repetida pero con distintos atributos. • • • •
Una de las veces que salga debe mostrarse con su tamaño originar y con un borde de 3 pixeles. En otra ocasión la imagen aparecerá sin borde, con su misma altura y con una anchura superior a la original También mostraremos la imagen sin borde, con su misma anchura y con una altura superior a la original Por último, mostraremos la imagen con una altura y anchura mayores que las originales, pero proporcionalmente igual que antes.
EJERCICIO Nº24 Utilizar la imagen del ejercicio 16 como ejemplo para alinearla a la derecha, izquierda o centro con la etiqueta div y el atributo align. También se puede hacer con la etiqueta p. EJERCICIO Nº25 Utilizar la imagen del ejercicio 16 como ejemplo para alinearla a la derecha, izquierda o centro con la etiqueta img y el atributo align. Añadir texto para observar como se alinea en el lado opuesto de la imagen. EJERCICIO Nº26 Crear una tabla que tenga dos filas y dos celdas en cada línea. <table>: Tabla y su correspondiente etiqueta de cierre. <tr>: Fila y su correspondiente etiqueta de cierre. <td>: Celda y su correspondiente etiqueta de cierre. EJERCICIO Nº27 Dar formato a la tabla anterior con los atributos: <border> <bgcolor> y <bordercolor> con los valores ya conocidos. El atributo <border> con valores numéricos.
HTML. EJERCICIOS
5/7
IES CARLOS III
DPTO. TECNOLOGร A
EJERCICIO Nยบ28 Dar formato a la tabla anterior con los atributos: <height> (altura) <width> (anchura), con sus correspondientes valores en porcentaje. EJERCICIO Nยบ29 Dar formato a la tabla anterior con los atributos: <height> (altura) <width> (anchura), con sus correspondientes valores en pixels.
HTML. EJERCICIOS
6/7
IES CARLOS III
DPTO. TECNOLOGÍA
EJERCICIO Nº30 Crear un sitio web, utilizando como base el ejercicio nº15 (Renault), aplicando todas las etiquetas vistas con sus correspondientes atributos y valores de estos. Etiquetas html head title body body body body p div B I, em u sup sub h1,……h6 font font font A href a name A href A href img img img img img Table, tr,td table table table table
Atributos
Valores
background bgcolor topmargin leftmargin align align
imagen.jpg código hexadecimal o nombre color valores numéricos valores numéricos center,…. center,….
align face color size #destino destino http://www.iesgrinon.com mailto:iesgrinon@terra.es src alt height, width border align
center,…. Nombre fuente código hexadecimal o nombre color nº
border bgcolor bordercolor height, width
nº código hexadecimal o nombre color código hexadecimal o nombre color pixels-porcentaje
HTML. EJERCICIOS
nombre fichero texto pixels pixels center,….
7/7