1 / 20

Diseño de páginas Web

Diseño de páginas Web. Elaboración de Unidades Didácticas en Web. Contenido. Páginas Web El lenguaje HTML Estructura de un documento HTML Enlaces Imágenes Colores. ¿Qué es una página Web?. Fichero de (hiper)texto Indica al navegador qué y cómo presentar la información Texto

webb
Télécharger la présentation

Diseño de páginas Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Diseño de páginas Web Elaboración de Unidades Didácticas en Web

  2. Contenido • Páginas Web • El lenguaje HTML • Estructura de un documento HTML • Enlaces • Imágenes • Colores

  3. ¿Qué es una página Web? • Fichero de (hiper)texto • Indica al navegador qué y cómo presentar la información • Texto • Colores, imágenes, ... • Enlaces • Codificado en lenguaje HTML

  4. ¿Cómo crear páginas Web? • Editor de texto (Notepad, Wordpad) • Editor de HTML (HTMLed) • Aplicación compatible con HTML (Word, PowerPoint) • Editor de páginas Web (Composer) • Gestor de Webs (FrontPage, DreamWeaver)

  5. El lenguaje HTML • Etiquetas <center> Inicio de etiqueta ................ Elementos a los que afecta </center> Cierre de etiqueta • Atributos <table border="0" width="80%" ...> ............. </table>

  6. Estructura de un documento HTML <HTML> <HEAD> <TITLE>Título</TITLE> </HEAD> <BODY> Texto del documento, Gráficos, Enlaces, ... </BODY> </HTML>

  7. Enlaces • Direcciones URL • Ficheros de otros servidores Web • Enlaces locales • Ficheros en el mismo sevidor • Enlaces internos • Destinos en el propio fichero • Envío de mensajes de correo

  8. Direcciones URL <A HREF = “http://www.upv.es”> Universidad Politécnica de Valencia </A>

  9. 2 1 3 Enlaces locales • Fichero en una subcarpeta • Fichero en la misma carpeta • Fichero en una supercarpeta

  10. Fichero en una subcarpeta • En index.htm: Aficiones: <A HREF = “aficiones/astronomia.htm”> Astronomía </A>

  11. Fichero en la misma carpeta • En index.htm: <A HREF = “splash.htm”> Ver animación </A>

  12. Fichero en una supercarpeta • En astronomía.htm: <A HREF = “../index.htm”> Volver al principio </A>

  13. Enlaces internos • Destino del enlace • <A NAME = “nombre” > texto </A> • Enlace desde el propio fichero • <A HREF = “nombre”> texto </A> • Enlace desde fuera • <A HREF = “http://www.upv.es/ficheronombre”> texto </A>

  14. Envío de mensajes de correo <A HREF= “mailto:jlhueso@mat.upv.es?tema”>

  15. Inclusión de imágenes • Enlace a la imagen <IMG SRC = “imagen.gif” ALT = “Texto”> </IMG> • La imagen como enlace <A HREF = “dirección de destino”> <IMG SRC = “imagen.gif”> </IMG> </A>

  16. Formato de la imagen • Borde • <IMG SRC = “imagen.gif” BORDER = “0”> </IMG> • Tamaño • <IMG SRC = “imagen.gif” BORDER = “0”> </IMG> • Alineación del texto

  17. Códigos de color • Sistema con 16 dígitos • 1 2 3 4 5 6 7 8 9 A B C D E F • #rrggbb • #FFFFFF  Blanco • #000000  Negro • #FFFF00  Amarillo

  18. Colores en una página • Texto normal <BODY TEXT = “black”> • Texto del enlace <BODY LINK = “blue”> • Enlace visitado <BODY VLINK = “#rrggbb”> • Enlace activo (en descarga) <BODY ALINK = “#rrggbb”>

  19. Fondo de la página • Color • <BODY BGCOLOR = “white”> • Imagen • <BODY BACKGROUND = “imagen.gif”>

  20. F I N

More Related