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