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?

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

0 comments

Notes on slide 1

1 Favorite