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.

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

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

• Atributos: Width & Height

XXIV. El atributo ALTXXIV. 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.

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

ExtremaduraPRE Nº6

Videogame nº6

COMPROMISO Nº6

Kidda.es nº6

Infoseseña nº6

APTN_COFENAT Nº6

sportmil nº6

jurídiCCOO nº6

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

ZOCALO Nº6

Módulo Nº6

Bolettin nº6

Revista_Impulso nº6

Segojoven nº6

Trabajo practico nº6

Cuadernícolas Nº6

Boletín Nº6

Boletin Nº6

Fotogénicas Nº6

Sigmanario nº6