Ejercicios de Lenguaje HTML

Ejercicios de Lenguaje HTML (I)
Ejercicio 1
1.- Abre el Bloc de Notas y escribe el siguiente texto:
<HTML>
<HEAD>
<TITLE>Mi primera pgina</TITLE>
<HEAD>
<BODY>
<CENTER><H1>Mi primera pgina</H1></CENTER>
<HR>
<P>Esta es mi primera pgina
</BODY>
</HTML>
2.- Gurdalo 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 pgina.
<H1>TTULO 1</H1>
<H2>TTULO 2</H2>
<H3>TTULO 3</H3>
<H4>TTULO 4</H4>
<H5>TTULO 5</H5>
<H6>TTULO 6</H6>
Slvalo 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 prrafos (de tres o cuatro lneas
en Andaluca. Separa los prrafos sin poner etiquetas, slo pulsando Intro una o dos veces. Slv
que los prrafos se ven juntos.
2.- Sigue con la edicin del fichero, pon las etiquetas <P> a cada prrafo. Slva el fichero y bre
3.- Aumenta la separacin entre prrafos con <BR> y <P>.
Ejercicio 4:
Para comprobar cmo se pueden alinear textos.
1.- Edita el fichero mipag01tunombre.html y justifica todos los prrafos con <DIV align=justify>
2.- Ahora centra el prrafo 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 prrafo las etiquetas
cursiva y teletipo.
2.- Usa la etiqueta <FONT> con size = 1,2, etc., para tener las primeras palabras del segundo p
3. Ahora usa la etiqueta <FONT> con size = + 1, - 1, + 2, - 2, etc. para tener las primeras palab
decreciente.
Ejercicio 6:
Para comprobar los parmetros de los colores. Gua de colores
Black Silver Gray White Maroon Red
Green Lime Olive Yellow Navy Blue
1.- Haz un fichero colores01tunombre.html con varias lneas como la siguiente, una para cada u
<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>
Slvalo y lelo en tu navegador.
2.- Cambia los colores RGB anteriores y observa los resultados.
3.- Experimenta con los cdigos para obtener el color amarillo.
Ejercicio 8:
Para comprobar cmo hacer hipertexto.
Los mecanismos ms usados son los siguientes:
1.- Haz una pgina llamada interesantesminombre.html donde poner enlaces a sitios interesant
texto:
<HTML>
<HEAD>
<meta http-equiv=Content-Type content=text/html; char-
set=ISO-8559-1>
<TITLE>Sitios de inters</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Mis pginas favoritas</H1>
</CENTER>
<HR>
Estas son mis pginas favoritas:
<P><A HREF=http://www.google.es>Google</A>
<BR> <A HREF=http://www.juntadeandalucia.es/averroes/iesalfonso_romero_barcojo>IES Alfo
</BODY>
</HTML>
Ejercicio 9:
Para comprobar cmo se hacen listas.
Listas desordenadas:
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 grficos e imgenes en unestras pginas utilizaremos la etiqueta <IMG> de esta ma
<IMG SRC="fichero_grafico"" ALT="description"
El parmetro SRC especifica el nombre del fihero que contiene el grfico. Los formatos de image
el texto que se mostrar en lugar del grfico en aquellos navegadores que no lo muestren.
Con los parmetros HEIGHT y WIDTH se puede indicar siempre: la altura y la anchura del grfico
<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 pon
HTML que estamos elaborando.
Se puede alinear una imagen a la izquierda o a la derecha de la pgina. Esto se consigue con lo
y ALIGN=LEFT (la imagen queda a la izquierda).
Tambin se puede poner una imagen como fondo de toda la pgina. Esto se consigue poniendo
etiqueta <BODY>, siendo imagen el nombre del fichero grfico GIF o JPG.
<BODY BACKGROUND="animales/gato.gif">
Apoyndote en la explicacin anterior, edita el archivo del ejercicio n 3 e inserta una imagen ce
Ejercicio 12:
Edita el archivo n 6 y coloca como imagen de fondo de la pgina una paleta de colores que cap
Ejercicios propuestos y resueltos HTML Tablas

Hola a todos, hoy os dejo una serie de ejercicios de Java para practicar todo
aquello que hemos explicado en anteriores posts, haciendo hincapi en las
tablas en HTML.
Todos los ejercicios que proponemos estn resueltos en este mismo post,
intenta hacerlo por ti mismo y si te quedas atascado puedes mirar la solucin.
Recuerda, que no tiene por que estar igual tu solucin con la del post, el
objetivo es que aprendas no que me copies la solucin.
Aqu te dejo un post sobre las tablas en HTML:
Tablas HTML
Si tienes alguna duda, recuerda que puedes consultarnos escribiendo un
comentario en este post o envindonos un e-mail a
administrador@discoduroderoer.es
1) Realiza un documento html parecido a la siguiente imagen:
Esconder
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Ejercicio 2 Tablas</title>
5 </head>
6 <body>
7 <table border=1>
8 <tr>
9 <td>
10 Mes
11 </td>
12 <td>
13 Visitas
14 </td>
15 <td>
16 Clicks
17 </td>
18 </tr>
19 <tr>
20 <td>
21 Enero
22 </td>
23 <td>
24 500
25 </td>
26 <td>
27 25
28 </td>
29 </tr>
30 <tr>
31 <td>
32 Febrero
33 </td>
34 <td>
35 600
36 </td>
37 <td>
38 20
39 </td>
40 </tr>
41 <tr>
42 <td>
43 Marzo
44 </td>
45 <td>
46 1000
47 </td>
48 <td>
49 50
50 </td>
51 </tr>
52 </table>
53 </body>
54 </html>
2) Modifica el ejercicio anterior para que se muestre asi. Utiliza thead y tbody:
Esconder
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <table border=1>
8 <caption>Visitas Web</caption>
9 <thead>
10 <tr>
11 <td>
12 Mes
13 </td>
14 <td>
15 Visitas
16 </td>
17 <td>
18 Clicks
19 </td>
20 </tr>
21 </thead>
22 <tbody>
23 <tr>
24 <td>
25 Enero
26 </td>
27 <td>
28 500
29 </td>
30 <td>
31 25
32 </td>
33 </tr>
34 <tr>
35 <td>
36 Febrero
37 </td>
38 <td>
39 600
40 </td>
41 <td>
42 20
43 </td>
44 </tr>
45 <tr>
46 <td>
47 Marzo
48 </td>
49 <td>
50 1000
51 </td>
52 <td>
53 50
54 </td>
55 </tr>
56 </tbody>
57 </table>
58 </body>
59 </html>
3) Crea una tabla con el siguiente aspecto:
Esconder
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <table border="1">
8 <caption>Medallas olimpicas</caption>
9 <tr>
10 <th>
11 Paises
12 </th>
13 <th>
14 Medallas
15 </th>
16 </tr>
17 <tr>
18 <td>
19 USA
20 </td>
21 <td>
22 13
23 </td>
24 </tr>
25 <tr>
26 <td>
27 China
28 </td>
29 <td>
30 25
31 </td>
32 </tr>
33 <tr>
34 <td>
35 Espaa
36 </td>
37 <td>
38 3
39 </td>
40 </tr>
41 <tr>
42 <td>
43 Francia
44 </td>
45 <td>
46 6
47 </td>
48 </tr>
49 </table>
50
51 </body>
52 </html>
4) Realiza una tabla como se muestra en la siguiente tabla. Usa las fusiones de
columnas y filas.
Esconder
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <table border="1">
8 <tr>
9 <td colspan="2">
10 A
11 </td>
12 <td>
13 B
14 </td>
15 <td>
16 C
17 </td>
18 </tr>
19 <tr>
20 <td rowspan="3">
21 D
22 </td>
23 <td colspan="2">
24 E
25 </td>
26 <td>
27 F
28 </td>
29 </tr>
30 <tr>
31 <td>
32 G
33 </td>
34 <td colspan="2">
35 H
36 </td>
37 </tr>
38 <tr>
39 <td>
40 I
41 </td>
42 <td>
43 J
44 </td>
45 <td>
46 K
47 </td>
48 </tr>
49 </table>
50 </body>
51 </html>
5) Realiza una tabla como se muestra en la siguiente imagen.
Esconder
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
7 <table border="1px">
8 <tr>
9 <td>
10 mes
11 </td>
12 <td>
13 enero
14 </td>
15 <td>
16 febrero
17 </td>
18 <td>
19 marzo
20 </td>
21 <td>
22 abril
23 </td>
24 <td>
25 mayo
26 </td>
27 <td>
28 junio
29 </td>
30 </tr>
31 <tr>
32 <td>
33 Pib
34 </td>
35 <td>
36 0.2
37 </td>
38 <td>
39 0.4
40 </td>
41 <td>
42 0.2
43 </td>
44 <td>
45 0.3
46 </td>
47 <td>
48 0.1
49 </td>
50 <td>
51 0.2
52 </td>
53 </tr>
54 <tr>
55 <td>
56 pnb
57 </td>
58 <td>
59 1.3
60 </td>
61 <td>
62 1.2
63 </td>
64 <td>
65 1.1
66 </td>
67 <td>
68 1.9
69 </td>
70 <td>
71 1.7
72 </td>
73 <td>
74 1.6
75 </td>
76 </tr>
77 </table>
78
79 </body>
80 </html>
Espero que os sea de ayuda. Si tenis dudas preguntad. Estamos para
ayudarte.

Ejercicios de Lenguaje HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ejercicios de Lenguaje HTML

Transféré par

Droits d'auteur :

Formats disponibles

Ejercicios de Lenguaje HTML (I)

Black Silver Gray White Maroon Red

Green Lime Olive Yellow Navy Blue

Ejercicios propuestos y resueltos HTML Tablas

Vous aimerez peut-être aussi