![Page 1: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/1.jpg)
Sesión 06:
Ing. Edgar A. Cruz Huaman
INSTITUTO SUPERIOR TECNOLÓGICO INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”
Listas, Comentarios, Diseño, Imágenes y Color en el WWW.
![Page 2: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/2.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
I. Práctica 1:I. Práctica 1:
![Page 3: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/3.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Listas en HtmlII. Listas en Html
• Numerada u ordenada.
• No ordenada.
• Listas de glosario o de definición.
• Menús.
• Listas de directorio.
![Page 4: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/4.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Listas No Ordenadas (i)II. Listas No Ordenadas (i)
• Syntaxis: <UL><li>..</UL>
• Ejercicio:
![Page 5: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/5.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Listas Ordenadas (ii)II. Listas Ordenadas (ii)
• Syntaxis: <OL><li>…</OL>
• Ejercicio:
![Page 6: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/6.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Listas de Glosario (iii)II. Listas de Glosario (iii)
• Syntaxis: <DL><dt><dd>…</DL>
• Ejercicio:
![Page 7: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/7.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Listas de Menu y Directorio (iii)II. Listas de Menu y Directorio (iii)
• Syntaxis: – <MENU><li>…</MENU>– <DIR><li>…</DIR>
![Page 8: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/8.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Anidamiento de ListasII. Anidamiento de Listas
![Page 9: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/9.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
III. Comentarios en HTMLIII. Comentarios en HTML
• Syntaxis: <!-- Esto es un Comentario -->
![Page 10: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/10.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IV. Diseño GráficoIV. Diseño Gráfico
• Adobe Creative Suite– Photoshop – Freehand – Illustrator – InDesign – Dreamweaver
• Otras compañías– Corel Draw – Xara Xtreme – Inkscape – XaraLX – GIMP – Sodipodi
![Page 11: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/11.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
V. Imagen (con y sin animación)V. Imagen (con y sin animación)
• Gráficos vectoriales (SVG, SWF, PDF, …)• Gráficos randerizados (BMP, JPEG, GIF, TIFF,
PNG,…)• Parámetros de un imagen.
– Profundidad (nº bits utilizados para representar el color).
– Tamaño (píxels, cm,) Número de bytes– Formatos
• Compatibilidad y migración– Algoritmos de comprensión con y sin pérdida de
calidad.
![Page 12: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/12.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VI. Ejemplo de ProfundidadesVI. Ejemplo de Profundidades
![Page 13: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/13.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VII. Tamaño de una ImagenVII. Tamaño de una Imagen
![Page 14: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/14.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VIII. Gráficos vectoriales: VIII. Gráficos vectoriales:
• Gráficos bidimensionales formados por puntos, líneas y curvas generados a partir de fórmulas matemáticas.
• Admiten escalados sin pérdida de calidad
• Ideal para figuras, diagramas, esquemas (dibujos simples).
![Page 15: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/15.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IX. Gráficos rasterizados:IX. Gráficos rasterizados:
• Imágenes formadas por una malla de puntos (pixels), con información sobre cada píxel.
• Admiten escalados pero con pérdida de calidad
• Comparativamente ocupan mayor tamaño que los gráficos vectoriales
• Ideal para imágenes con gran variedad de colores (fotografías)
![Page 16: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/16.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
X. Gráfico rasterizado vs vectorialX. Gráfico rasterizado vs vectorial
![Page 17: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/17.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XI. Usando color en el WWW.XI. Usando color en el WWW.
![Page 18: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/18.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XII. Cómo cambiar la apariencia de una página.
XII. Cómo cambiar la apariencia de una página.
• Color de fondo: <body bgcolor="#RRGGBB"> – <body bgcolor="#RRGGBB"> = <body bgcolor="#0000FF">
![Page 19: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/19.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIII. Color del texto y Links.XIII. Color del texto y Links.
![Page 20: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/20.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIV. Color del texto y Links (i)XIV. Color del texto y Links (i)
![Page 21: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/21.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XV. Imágenes de fondoXV. Imágenes de fondo
• <body background="fondo1.jpg">
![Page 22: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/22.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XVI. Imágenes y Texto.XVI. Imágenes y Texto.
![Page 23: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/23.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XVII. Alineamiento de imágenes.XVII. Alineamiento de imágenes.
• Align=top
• Align=middle
• Align=bottom
• Align=right
• Align =left
![Page 24: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/24.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XVIII. Como terminar el texto envolvente.
XVIII. Como terminar el texto envolvente.
• Atributo Clear de la etiqueta <BR>.– <br clear=“left">– <br clear=“right">– <br clear="all">
![Page 25: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/25.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIX. Márgenes alrededor de las imágenes.
XIX. Márgenes alrededor de las imágenes.
• <img src="fondo.bmp" align=“left" vspace=35 hspace=35>
![Page 26: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/26.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XX. Enlace a Imágenes.XX. Enlace a Imágenes.
• Usamos: <a href=“”></a>
![Page 27: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/27.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XXI. Borde de las imágenesXXI. Borde de las imágenes
• Atributo BORDER
![Page 28: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/28.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XXII. Borde de las imágenes (i)XXII. Borde de las imágenes (i)
![Page 29: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/29.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XXIII. Modificando el tamaño de las imágenes
XXIII. Modificando el tamaño de las imágenes
• Atributos: Width & Height
![Page 30: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/30.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XXIV. El atributo ALTXXIV. El atributo ALT
![Page 31: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/31.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XXV. Pasos para crear una Página Web compleja (WebSite)
XXV. Pasos para crear una Página Web compleja (WebSite)
• Planificación.
• Secciones de la página.
• Uniformidad de las páginas.
![Page 32: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW](https://reader036.vdocumento.com/reader036/viewer/2022081603/557c9408d8b42a6c788b4f18/html5/thumbnails/32.jpg)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman