Practica Html2

Escuela en Ingeniería en Computación
Diseño Web Multimedia I

Contenido: Tablas, Imágenes y Vinculos
Objetivo:
Al finalizar el estudiante:
- Aplicara tablas como forma de ordenar la información ya sea texto o imágenes.
- Insertara imágenes en una pagina Web para mejorar el diseño de una la misma
- Aplicara el concepto de hipervínculos, a manera de navegación entre las páginas
de ejercicio.

1. Tablas (una forma de ordenar la información.)
<html>
<head>
<title>Tablas</title>
</head>
<body bgcolor=quot;#000000quot; text=quot;#FFFFFFquot;>
<table width=quot;100%quot; border=quot;1quot; cols=quot;2quot; cellpadding=quot;3quot; bordercolor=quot;#FFFFFFquot;
borderColorLight=quot;#FFFFFFquot; borderColorDark=quot;#00FFC0quot;>
<tr>
<td width=quot;50%quot;>
Aqui estas creando una celda
</td>
Aqui esta otra celda
</td>
</tr>
<tr>
una mas
</td>
celda 4
</td>
</tr>
<tr>
aqui esta la celda 5
</td>
y la 6
</td>
</tr>

</table>

</body>
</html>

Guarda el archivo con el nombre de ejemplo1.html

2. Tablas 2 (Ordenar las imágenes)

Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

Para este ejercicio necesitamos que descargues del Internet cuatro imágenes del tema
que gustes, cambia el nombre de las imágenes a img1, img2…img4.
Y sigue este código:

<html>
<head>
<title>Tablas</title>
</head>
<body bgcolor=quot;#000000quot; text=quot;#FFFFFFquot;>
<table width=quot;100%quot; border=quot;0quot; cols=quot;2quot; cellpadding=quot;3quot; bordercolor=quot;#FFFFFFquot;
<tr>
<td width=quot;50%quot; align=quot;centerquot; colspan=quot;2quot;>
Este es un ejemplo de como trabajar con tablas
</td>
</tr>

<tr>
<td width=quot;50%quot; align=quot;centerquot;>
<img src=quot;img1.jpgquot; alt=quot;quot; title=quot;img1quot; width=quot;50quot; height=quot;50quot; border=quot;2quot; />
</td>
</td>
</tr>
<tr>
Estas son iomagenes de casas
</td>
Observa bien el codido de esta manera podras ver como agregas una imagen y sus
atributos
</td>
</tr>
<tr>
</td>
</td>
</tr>

</table>

</body>
</html>



NOTA: no dejes de un lado ver como esta el código, para que puedas comprender que
hace cada etiqueta.

3. Imágenes
Vamos a trabajar con las mismas imágenes que tienes guardadas para este ejercicio. Y
dejaremos las imágenes entre el texto.
<html>
<head>
<title>imagenes</title>

</head>
<body bgcolor=quot;#0000FFquot; text=quot;#FFFFFFquot;>
<p align=quot;justifyquot;>
<img src=quot;img1.jpgquot; alt=quot;una casaquot; title=quot;img1quot; width=quot;300quot; height=quot;250quot;
align=quot;leftquot; border=quot;0quot; />
Una casa (del latín casa, ‘cabaña’) es una edificación construida para ser
habitada; suele organizarse en una o varias plantas, no superando tres normalmente
y puede disponer de estancias en sótano, o en semisótano, y la zona superior
puede ser abuhardillada o aterrazada.

</p>

<img src=quot;img3.jpgquot; alt=quot;El plano de mi casaquot; title=quot;img3quot; width=quot;275quot; height=quot;275quot;
border=quot;3quot; align=quot;rightquot; />
Es el lugar en el que históricamente se desarrollaron las actividades y
relaciones específicas de la vida familiar, desde el nacimiento a la
muerte de muchos de sus componentes, con las variantes típicas de
cada época, cultura, clase social o clima. También sirve de refugio contra
la lluvia, el viento y demás agentes meteorológicos, protege de posibles
intrusos, humanos o animales, y es el lugar donde almacenar los enseres y
propiedades de quienes en ella habitan.
</p>


Es un edificio destinado a vivienda unifamiliar, de un grupo de personas
o una persona sola; mientras que se suele denominar piso a la vivienda
unifamiliar independiente que forma parte de una edificación, normalmente de
<img src=quot;img4.jpgquot; alt=quot;mi casaquot; title=quot;img4quot; width=quot;100quot; height=quot;102quot;
align=quot;middlequot; border=quot;0quot; />
varias alturas. Cuando está ocupada permanente como vivienda, suele llamarse
también hogar.
</p>
</body>
</html>


4. Vínculos


<html>
<head>
<title>Vinculos</title>

</head>
<body bgcolor=quot;#0000FFquot; text=quot;#FFFFFFquot; link=quot;#FF0000quot; vlink=quot;#80FF00quot;>
<img src=quot;img1.jpgquot; alt=quot;una casaquot; title=quot;img1quot; width=quot;300quot; height=quot;250quot;
align=quot;leftquot; border=quot;0quot; />
Una casa (del latín casa, ‘cabaña’) es una edificación construida para ser
habitada; suele organizarse en una o varias plantas, no superando tres normalmente
y puede disponer de estancias en sótano, o en semisótano, y la zona superior
puede ser abuhardillada o aterrazada.

</p>

<img src=quot;img3.jpgquot; alt=quot;El plano de mi casaquot; title=quot;img3quot; width=quot;275quot; height=quot;275quot;
border=quot;3quot; align=quot;rightquot; />
Es el lugar en el que históricamente se desarrollaron las actividades y
relaciones específicas de la vida familiar, desde el nacimiento a la
muerte de muchos de sus componentes, con las variantes típicas de
cada época, cultura, clase social o clima. También sirve de refugio contra
la lluvia, el viento y demás agentes meteorológicos, protege de posibles
intrusos, humanos o animales, y es el lugar donde almacenar los enseres y
propiedades de quienes en ella habitan.
</p>


Es un edificio destinado a vivienda unifamiliar, de un grupo de personas
o una persona sola; mientras que se suele denominar piso a la vivienda
unifamiliar independiente que forma parte de una edificación, normalmente de
<img src=quot;img4.jpgquot; alt=quot;mi casaquot; title=quot;img4quot; width=quot;100quot; height=quot;102quot;
align=quot;middlequot; border=quot;0quot; />
varias alturas. Cuando está ocupada permanente como vivienda, suele llamarse
también hogar.
</p>

<hr />
<table width=quot;100%quot; border=quot;1quot; cellpadding=quot;3quot; bordercolor=quot;#FFFFFFquot;
<tr>
<a href=quot;ejemplo1.htmlquot;>Ir al primer ejemplo...</a>
</td>
<a href=quot;ejemplo2.htmlquot;>Ir al Segundo ejemplo...</a>
</td>


<a href=quot;ejemplo3.htmlquot;>Ir al tercer ejemplo...</a>
</td>
</tr>

</table>
</body>
</html>

Guardar el ejercicio con el nombre Ejemplo5.html

5. Ejercicios
1. Crea una página Web que contenga una tabla con la siguiente estructura.
Texto texto imagen
texto
imagen texto texto
texto
- Descarga texto e imágenes del tema que te indique tu instructor.
2. Investigue en el Internet que es colspan y rowspan y para que sirve.
3. Investiga que hace la etiqueta Fieldset y legend dentro de un codigo html.
4. Agrega hipervínculos a cada uno de los ejemplos realizados anteriormente, para que
se enlacen entre si.
5. Investiga que es cellspacing y cellpadding etiquetas para una tabla.


Practica Html2

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Practica Html2

Semelhante a Practica Html2 (20)

Practica Html2