Professional Documents
Culture Documents
Instructions
Cre una tabla (completa) con tres filas. Si necesits un repaso, fijate en Consejos
tiles.
Hint
Primero, coloc las etiquetas<table></table>, despus agreg las
etiquetas <tbody></tbody>(cuerpo de tabla) en medio de tus etiquetas de tabla.
Pods crear filas de tabla dentro del cuerpo de tu tabla con las etiquetas <tr></tr>.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
<title>Mi pgina de fotos</title>
</head>
<body>
<table border="1px">
<tr>
<td></td>
</tr>
<td></td>
<tr>
<td></td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Instructions
Agreg tres celdas de tabla por fila para obtener un total de nueve celdas.
Hint
Pods crear celdas de tabla con las etiquetas <td></td>.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
<title>Mi pgina de fotos</title>
</head>
<body>
<table border="1px">
<tr>
<td></td> <td></td> <td></td>
</tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Instructions
Hint
El encabezado de la tabla (<thead>) contiene las etiquetas <th></th> y va despus de
la etiqueta de inicio<table> pero antes de la primera fila de la tabla.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
<title>Mi pgina de fotos</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="3"> MIS FOTOS</th>
</tr>
<tr>
<td></td> <td></td> <td></td>
</tr>
<td></td> <td></td> <td></td>
<tr>
<td></td> <td></td> <td></td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Instructions
Insert una etiqueta <img /> entre cada par de etiquetas <td></td>. Asegurate de
ajustar cada atributosrc con la imagen URL que elegiste como foto.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"></link>
<title>Mi pgina de fotos</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="3"> FOTOS DE ANIMALES</th>
</tr>
<tr>
<td><img
src="http://deconceptos.com/wp-content/uploads/2008/09/concepto-deanimales.jpg"
/></td>
<td><img
src="http://animalesmascotas.com/wpcontent/uploads/2011/01/animales-salvajes1.jpg"
/></td>
<td><img
src="http://1.bp.blogspot.com/k_LL6VasU0A/Tcp1eWIrgXI/AAAAAAAAAAc/BawlRdm2r8Y/s1600/animales+salvajes.jpg" /></td>
</tr>
<td><img src="http://www.oocities.org/es/animaleswebs/img/animales-marinos1.jpg"
/></td> <td><img src="http://3.bp.blogspot.com/_XQGuByKF2bA/Sbl6x7JcKgI/AAAAAAAAAAk/t-
3OQovGhyI/s320/animales-salvajes-2.jpg"
/></td>
<td><img
src="http://2.bp.blogspot.com/_AKSYZU4s0Nc/SEFlAuzopI/AAAAAAAAABU/083G5Q4r_YY/s400/Dibujo.JPG" /></td>
<tr>
<td><img
src="http://3.bp.blogspot.com/_o-1UTO4UVQ/RzIEmy1Dw8I/AAAAAAAAAKk/5RsDrENOuw0/s320/lince.jpg"
/></td>
<td><img
src="http://imalbum.aufeminin.com/album/D20061123/240522_PWN3TRW8TJCZQG3DZYOFHUL
EXJAAMP_10006_emofondos_animales_emotik_com_H044718_L.jpg"
/></td>
<td><img
src="http://ocularis.es/blog/pics/falcon1.jpg" /></td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Enlazalos
Perfecto! Ahora solamente necesits encerrar cada etiqueta <img> entre
etiquetas <a></a>. As:
<a href="http://codecademy.com">
<img src="http://s3.amazonaws.com/kpcbweb/companies/451/logo/grid_3/codecademy-logoblack.jpg">
</a>
Instructions
Encerr cada etiqueta <img> con etiquetas <a></a> como se muestra en el ejemplo.
No hay necesidad de hacer que los atributos src de tu etiqueta <img> yhref de tu
etiqueta apunten a la misma direccin web; de hecho, te sugerimos que los hagas
diferentes.
Hint
Te acords de cmo funcionan las etiquetas <a>?
<a href="direccin del sitio web"><
El cielo es el lmite
Ahora conts con una linda tabla de imgenes interactivas para mostrar en tu sitio
web que crece rpidamente.
Pero no hay razn para que te quedes solamente con nueve imgenes: pods crear
un lbum completo con docenas de imgenes, bien organizadas en una tabla. No
dudes en experimentar y enlazar las imgenes chiquitas de la tabla a versiones ms
grandes de las fotos, de aadir celdas adicionales a la tabla, y muchas cosas ms.
Instructions
Hac clic en Guardar y enviar cuando ests listo para finalizar el curso.