Practica Html2

611 visualizaciones

Publicado el

Podras hayar mas informacion en mi sitio web http://josuefortisitca.iespana.es o en http://www.freewebs.com/josuefortis007/ ha cerca de la elaboracion de paginas web como Hipervinculos, Tablas e Insertar imagenes.

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
611
En SlideShare
0
De insertados
0
Número de insertados
20
Acciones
Compartido
0
Descargas
66
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Practica Html2

  1. 1. 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> <td width=quot;50%quot;> Aqui esta otra celda </td> </tr> <tr> <td width=quot;50%quot;> una mas </td> <td width=quot;50%quot;> celda 4 </td> </tr> <tr> <td width=quot;50%quot;> aqui esta la celda 5 </td> <td width=quot;50%quot;> 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
  2. 2. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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; borderColorLight=quot;#FFFFFFquot; borderColorDark=quot;#00FFC0quot;> <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 width=quot;50%quot; align=quot;centerquot;> <img src=quot;img2.jpgquot; alt=quot;quot; title=quot;img2quot; width=quot;50quot; height=quot;50quot; border=quot;3quot; /> </td> </tr> <tr> <td width=quot;50%quot; align=quot;centerquot;> Estas son iomagenes de casas </td> <td width=quot;50%quot; align=quot;centerquot;> Observa bien el codido de esta manera podras ver como agregas una imagen y sus atributos </td> </tr> <tr> <td width=quot;50%quot; align=quot;centerquot;> <img src=quot;img3.jpgquot; alt=quot;quot; title=quot;img3quot; width=quot;50quot; height=quot;50quot; border=quot;0quot; /> </td> <td width=quot;50%quot; align=quot;centerquot;> <img src=quot;img4.jpgquot; alt=quot;quot; title=quot;img4quot; width=quot;50quot; height=quot;50quot; border=quot;0quot; /> </td> </tr> </table> </body> </html> Guarda el archivo con el nombre de ejemplo2.html Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  3. 3. Escuela en Ingeniería en Computación Diseño Web Multimedia I 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> <p align=quot;justifyquot;> <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> <p align=quot;justifyquot;> 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> Guarda el archivo con el nombre de ejemplo3.html 4. Vínculos Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  4. 4. Escuela en Ingeniería en Computación Diseño Web Multimedia I <html> <head> <title>Vinculos</title> </head> <body bgcolor=quot;#0000FFquot; text=quot;#FFFFFFquot; link=quot;#FF0000quot; vlink=quot;#80FF00quot;> <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> <p align=quot;justifyquot;> <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> <p align=quot;justifyquot;> 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; borderColorLight=quot;#FFFFFFquot; borderColorDark=quot;#00FFC0quot;> <tr> <td width=quot;33%quot; align=quot;centerquot;> <a href=quot;ejemplo1.htmlquot;>Ir al primer ejemplo...</a> </td> <td width=quot;33%quot; align=quot;centerquot;> <a href=quot;ejemplo2.htmlquot;>Ir al Segundo ejemplo...</a> </td> <td width=quot;33%quot; align=quot;centerquot;> Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez
  5. 5. Escuela en Ingeniería en Computación Diseño Web Multimedia I <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. Instructores: Milagro de Arévalo, Josué Fortis, Christopher Lara, Carlos Narváez

×