Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Practica Html2

623 Aufrufe

Veröffentlicht am

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.

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×