Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño web html

483 views

Published on

Presentación diseño Web en HTML

Published in: Education
  • Be the first to comment

  • Be the first to like this

Diseño web html

  1. 1. Daniel Felipe Lozano 1101 Informática 2011
  2. 2. <ul><li>Páginas Web </li></ul><ul><li>El lenguaje HTML </li></ul><ul><li>Estructura de un documento HTML </li></ul><ul><li>Enlaces </li></ul><ul><li>Imágenes </li></ul><ul><li>Colores </li></ul>
  3. 3. <ul><li>Fichero de (hiper)texto </li></ul><ul><li>Indica al navegador qué y cómo presentar la información </li></ul><ul><ul><li>Texto </li></ul></ul><ul><ul><li>Colores, imágenes, ... </li></ul></ul><ul><ul><li>Enlaces </li></ul></ul><ul><li>Codificado en lenguaje HTML </li></ul>
  4. 4. <ul><li>Editor de texto (Notepad, Wordpad) </li></ul><ul><li>Editor de HTML (HTMLed) </li></ul><ul><li>Aplicación compatible con HTML (Word, PowerPoint) </li></ul><ul><li>Editor de páginas Web (Composer) </li></ul><ul><li>Gestor de Webs (FrontPage, DreamWeaver) </li></ul>
  5. 5. <ul><li>Etiquetas </li></ul><ul><ul><li>< center > Inicio de etiqueta </li></ul></ul><ul><ul><li>................ Elementos a los que afecta </li></ul></ul><ul><ul><li></ center > Cierre de etiqueta </li></ul></ul><ul><li>Atributos </li></ul><ul><ul><li>< table border= &quot;0&quot; width= &quot;80%&quot; ... > </li></ul></ul><ul><ul><li>............. </li></ul></ul><ul><ul><li></ table > </li></ul></ul>
  6. 6. <ul><li>< HTML > </li></ul><ul><li>< HEAD > </li></ul><ul><li>< TITLE > Título </ TITLE > </li></ul><ul><li></ HEAD > </li></ul><ul><li>< BODY > </li></ul><ul><li>Texto del documento, Gráficos, Enlaces, ... </li></ul><ul><li></ BODY > </li></ul><ul><li></ HTML > </li></ul>
  7. 7. <ul><li>Direcciones URL </li></ul><ul><ul><li>Ficheros de otros servidores Web </li></ul></ul><ul><li>Enlaces locales </li></ul><ul><ul><li>Ficheros en el mismo sevidor </li></ul></ul><ul><li>Enlaces internos </li></ul><ul><ul><li>Destinos en el propio fichero </li></ul></ul><ul><li>Envío de mensajes de correo </li></ul>
  8. 8. <ul><li>< A HREF = “http://www.upv.es” > </li></ul><ul><li>Universidad Politécnica de Valencia </li></ul><ul><li></ A > </li></ul>
  9. 9. <ul><li>Fichero en una subcarpeta </li></ul><ul><li>Fichero en la misma carpeta </li></ul><ul><li>Fichero en una supercarpeta </li></ul>1 3 2
  10. 10. <ul><li>En index.htm: </li></ul><ul><li>Aficiones: </li></ul><ul><li>< A HREF = “aficiones/astronomia.htm” > </li></ul><ul><li>Astronomía </li></ul><ul><li></ A > </li></ul>
  11. 11. <ul><li>En index.htm: </li></ul><ul><li>< A HREF = “splash.htm” > </li></ul><ul><li>Ver animación </li></ul><ul><li></ A > </li></ul>
  12. 12. <ul><li>En astronomía.htm: </li></ul><ul><li>< A HREF = “../index.htm” > </li></ul><ul><li>Volver al principio </li></ul><ul><li></ A > </li></ul>
  13. 13. <ul><li>Destino del enlace </li></ul><ul><ul><li>< A NAME = “nombre” > texto </ A > </li></ul></ul><ul><li>Enlace desde el propio fichero </li></ul><ul><ul><li>< A HREF = “  nombre” > texto < /A > </li></ul></ul><ul><li>Enlace desde fuera </li></ul><ul><ul><li>< A HREF = “ http://www.upv.es /fichero  nombre” > texto < /A > </li></ul></ul>
  14. 14. <ul><li><A HREF = “mailto:jlhueso@mat.upv.es?tema” > </li></ul>
  15. 15. <ul><li>Enlace a la imagen </li></ul><ul><ul><li>< IMG SRC = “imagen.gif” ALT = “Texto” > </ IMG > </li></ul></ul><ul><li>La imagen como enlace </li></ul><ul><ul><li>< A HREF = “dirección de destino” > </li></ul></ul><ul><ul><li>< IMG SRC = “imagen.gif” > </ IMG > </ A> </li></ul></ul>
  16. 16. <ul><li>Borde </li></ul><ul><ul><li>< IMG SRC = “imagen.gif” BORDER = “0” > </ IMG > </li></ul></ul><ul><li>Tamaño </li></ul><ul><ul><li>< IMG SRC = “imagen.gif” BORDER = “0” > </ IMG > </li></ul></ul><ul><li>Alineación del texto </li></ul>
  17. 17. <ul><li>Sistema con 16 dígitos </li></ul><ul><li>1 2 3 4 5 6 7 8 9 A B C D E F </li></ul><ul><li>#rrggbb </li></ul><ul><li>#FFFFFF  Blanco </li></ul><ul><li>#000000  Negro </li></ul><ul><li>#FFFF00  Amarillo </li></ul>
  18. 18. <ul><li>Texto normal </li></ul><ul><ul><li>< BODY TEXT = “black” > </li></ul></ul><ul><li>Texto del enlace </li></ul><ul><ul><li>< BODY LINK = “blue” > </li></ul></ul><ul><li>Enlace visitado </li></ul><ul><ul><li>< BODY VLINK = “#rrggbb” > </li></ul></ul><ul><li>Enlace activo (en descarga) </li></ul><ul><ul><li>< BODY ALINK = “#rrggbb” > </li></ul></ul>
  19. 19. <ul><li>Color </li></ul><ul><ul><li><BODY BGCOLOR = “white” > </li></ul></ul><ul><li>Imágen </li></ul><ul><ul><li><BODY BACKGROUND = “imagen.gif” > </li></ul></ul>

×