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 INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”

Listas, Comentarios, Diseño, Imágenes y Color en el WWW.

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:


II. Listas en HtmlII. 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)II. Listas No Ordenadas (i)

• Syntaxis: <UL><li>..</UL>

• Ejercicio:


II. Listas Ordenadas (ii)II. Listas Ordenadas (ii)

• Syntaxis: <OL><li>…</OL>

• Ejercicio:


II. Listas de Glosario (iii)II. Listas de Glosario (iii)

• Syntaxis: <DL><dt><dd>…</DL>

• Ejercicio:


II. Listas de Menu y Directorio (iii)II. Listas de Menu y Directorio (iii)

• Syntaxis: – <MENU><li>…</MENU>– <DIR><li>…</DIR>


II. Anidamiento de ListasII. Anidamiento de Listas

III. Comentarios en HTMLIII. Comentarios en HTML

• Syntaxis:


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


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.


VI. Ejemplo de ProfundidadesVI. Ejemplo de Profundidades


VII. Tamaño de una ImagenVII. Tamaño de una Imagen


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


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)


X. Gráfico rasterizado vs vectorialX. Gráfico rasterizado vs vectorial


XI. Usando color en el WWW.XI. Usando color en el WWW.


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">


XIII. Color del texto y Links.XIII. Color del texto y Links.


XIV. Color del texto y Links (i)XIV. Color del texto y Links (i)


XV. Imágenes de fondoXV. Imágenes de fondo

• <body background="fondo1.jpg">


XVI. Imágenes y Texto.XVI. Imágenes y Texto.


XVII. Alineamiento de imágenes.XVII. Alineamiento de imágenes.

• Align=top

• Align=middle

• Align=bottom

• Align=right

• Align =left


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">


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>


XX. Enlace a Imágenes.XX. Enlace a Imágenes.

• Usamos: <a href=“”></a>


XXI. Borde de las imágenesXXI. Borde de las imágenes

• Atributo BORDER


XXII. Borde de las imágenes (i)XXII. Borde de las imágenes (i)


XXIII. Modificando el tamaño de las imágenes

XXIII. Modificando el tamaño de las imágenes

• Atributos: Width & Height


XXIV. El atributo ALTXXIV. El atributo ALT


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.

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

Education

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