Sesión 06: Ing. Edgar A. Cruz Huaman INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”   Listas, Comentarios, Diseño, Imágenes y ...
I. Práctica 1:
II. Listas en Html <ul><li>Numerada u ordenada. </li></ul><ul><li>No ordenada. </li></ul><ul><li>Listas de glosario o de d...
II. Listas No Ordenadas (i) <ul><li>Syntaxis : <UL><li>..</UL> </li></ul><ul><li>Ejercicio: </li></ul>
II. Listas Ordenadas (ii) <ul><li>Syntaxis: <OL><li>…</OL> </li></ul><ul><li>Ejercicio: </li></ul>
II. Listas de Glosario (iii) <ul><li>Syntaxis: <DL><dt><dd>…</DL> </li></ul><ul><li>Ejercicio: </li></ul>
II. Listas de Menu y Directorio (iii) <ul><li>Syntaxis:  </li></ul><ul><ul><li><MENU><li>…</MENU> </li></ul></ul><ul><ul><...
II. Anidamiento de Listas
III. Comentarios en HTML <ul><li>Syntaxis:  <!-- Esto es un Comentario --> </li></ul>
IV. Diseño Gráfico <ul><li>Adobe Creative Suite </li></ul><ul><ul><li>Photoshop   </li></ul></ul><ul><ul><li>Freehand   </...
V.  Imagen (con y sin animación) <ul><li>Gráficos vectoriales (SVG, SWF, PDF, …) </li></ul><ul><li>Gráficos randerizados (...
VI. Ejemplo de Profundidades
VII. Tamaño de una Imagen
VIII. Gráficos vectoriales:  <ul><li>Gráficos bidimensionales formados por puntos,  líneas y curvas generados a partir de ...
IX. Gráficos rasterizados: <ul><li>Imágenes formadas por una malla de puntos (pixels), con información sobre cada píxel. <...
X. Gráfico rasterizado vs vectorial
XI. Usando color en el WWW.
XII. Cómo cambiar la apariencia de una página. <ul><li>Color de fondo:  <body bgcolor=&quot;#RRGGBB&quot;>  </li></ul><ul>...
XIII. Color del texto y Links.
XIV. Color del texto y Links (i)
XV. Imágenes de fondo <ul><li><body background=&quot;fondo1.jpg&quot;> </li></ul>
XVI. Imágenes y Texto.
XVII. Alineamiento de imágenes. <ul><ul><ul><li>Align=top </li></ul></ul></ul><ul><ul><ul><li>Align=middle </li></ul></ul>...
XVIII. Como terminar el texto envolvente. <ul><li>Atributo  Clear  de la etiqueta <BR>. </li></ul><ul><ul><li><br clear=“l...
XIX. Márgenes alrededor de las imágenes. <ul><li><img src=&quot;fondo.bmp&quot; align=“left&quot; vspace=35 hspace=35> </l...
XX. Enlace a Imágenes. <ul><li>Usamos: <a href=“”></a> </li></ul>
XXI. Borde de las imágenes <ul><li>Atributo BORDER </li></ul>
XXII. Borde de las imágenes (i)
XXIII. Modificando el tamaño de las imágenes <ul><li>Atributos: Width & Height </li></ul>
XXIV. El atributo ALT
XXV. Pasos para crear una Página Web compleja (WebSite) <ul><li>Planificación. </li></ul><ul><li>Secciones de la página. <...
PREGUNTAS?
Upcoming SlideShare
Loading in …5
×

Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW

914
-1

Published on

Topicos Especiales: Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW.

Published in: Education, Travel, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
914
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sesion Nº6 Listas - Comentarios - Diseño - Imagenes y Color en el WWW

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

    Clipping is a handy way to collect important slides you want to go back to later.

×