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

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.

I. Práctica 1:

II. Listas en Html
Numerada u ordenada.
No ordenada.
Listas de glosario o de definición.
Menús.
Listas de directorio.

II. Listas No Ordenadas (i)
Syntaxis : <UL><li>..</UL>
Ejercicio:

II. Listas Ordenadas (ii)
Syntaxis: <OL><li>…</OL>
Ejercicio:

II. Listas de Glosario (iii)
Syntaxis: <DL><dt><dd>…</DL>
Ejercicio:

II. Listas de Menu y Directorio (iii)
Syntaxis:
<MENU><li>…</MENU>
<DIR><li>…</DIR>

II. Anidamiento de Listas

III. Comentarios en HTML
Syntaxis:

IV. Diseño Gráfico
Adobe Creative Suite
Photoshop
Freehand
Illustrator
InDesign
Dreamweaver
Otras compañías
Corel Draw
Xara Xtreme
Inkscape
XaraLX
GIMP
Sodipodi

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.

VI. Ejemplo de Profundidades

VII. Tamaño de una Imagen

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).

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)

X. Gráfico rasterizado vs vectorial

XI. Usando color en el WWW.

XII. Cómo cambiar la apariencia de una página.
Color de fondo: <body bgcolor="#RRGGBB">
<body bgcolor="#RRGGBB"> = <body bgcolor="#0000FF">

XIII. Color del texto y Links.

XIV. Color del texto y Links (i)

XV. Imágenes de fondo
<body background="fondo1.jpg">

XVI. Imágenes y Texto.

XVII. Alineamiento de imágenes.
Align=top
Align=middle
Align=bottom
Align=right
Align =left

XVIII. Como terminar el texto envolvente.
Atributo Clear de la etiqueta <BR>.
<br clear=“left">
<br clear=“right">
<br clear="all">

XIX. Márgenes alrededor de las imágenes.
<img src="fondo.bmp" align=“left" vspace=35 hspace=35>

XX. Enlace a Imágenes.
Usamos: <a href=“”></a>

XXI. Borde de las imágenes
Atributo BORDER

XXII. Borde de las imágenes (i)

XXIII. Modificando el tamaño de las imágenes
Atributos: Width & Height

XXIV. El atributo ALT

XXV. Pasos para crear una Página Web compleja (WebSite)
Planificación.
Secciones de la página.
Uniformidad de las páginas.

PREGUNTAS?

http://ingedgarcruzh.blogspot.com	30
http://www.ingedgarcruzh.blogspot.com	12
http://www.slideshare.net	1

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

by Edgar Cruz on Oct 11, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 43

Statistics

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