Diseo de pginas Web Elaboracin de Unidades Didcticas
Diseño de páginas Web Elaboración de Unidades Didácticas en Web
Contenido n n n Páginas Web El lenguaje HTML Estructura de un documento HTML Enlaces Imágenes Colores
¿Qué es una página Web? n n n Fichero de (hiper)texto Indica al navegador qué y cómo presentar la información n Texto n Colores, imágenes, . . . n Enlaces Codificado en lenguaje HTML
¿Cómo crear páginas Web? n Editor de texto (Notepad, Wordpad) n Editor de HTML (HTMLed) n n n Aplicación compatible con HTML (Word, Power. Point) Editor de páginas Web (Composer) Gestor de Webs (Front. Page, Dream. Weaver)
El lenguaje HTML n n Etiquetas <center> Inicio de etiqueta . . . . Elementos a los que afecta </center> Cierre de etiqueta Atributos <table border="0" width="80%". . . >. . . </table>
Estructura de un documento HTML <HTML> <HEAD> <TITLE>Título</TITLE> </HEAD> <BODY> Texto del documento, Gráficos, Enlaces, . . . </BODY> </HTML>
Enlaces n Direcciones URL n n Enlaces locales n n Ficheros en el mismo sevidor Enlaces internos n n Ficheros de otros servidores Web Destinos en el propio fichero Envío de mensajes de correo
Direcciones URL <A HREF = “http: //www. upv. es”> Universidad Politécnica de Valencia </A>
Enlaces locales 1. Fichero en una subcarpeta 2. Fichero en la misma carpeta 3. Fichero en una supercarpeta 2 1 3
Fichero en una subcarpeta n En index. htm: Aficiones: <A HREF = “aficiones/astronomia. htm”> Astronomía </A>
Fichero en la misma carpeta n En index. htm: <A HREF = “splash. htm”> Ver animación </A>
Fichero en una supercarpeta n En astronomía. htm: <A HREF = “. . /index. htm”> Volver al principio </A>
Enlaces internos n Destino del enlace n n Enlace desde el propio fichero n n <A NAME = “nombre” > texto </A> <A HREF = “ nombre”> texto </A> Enlace desde fuera n <A HREF = “http: //www. upv. es/fichero nombre”> texto </A>
Envío de mensajes de correo <A HREF = “mailto: jlhueso@mat. upv. es? tema”>
Inclusión de imágenes n Enlace a la imagen <IMG SRC = “imagen. gif” ALT = “Texto”> </IMG> n La imagen como enlace <A HREF = “dirección de destino”> <IMG SRC = “imagen. gif”> </IMG> </A>
Formato de la imagen n Borde n n Tamaño n n <IMG SRC = “imagen. gif” BORDER = “ 0”> </IMG> Alineación del texto
Códigos de color n Sistema con 16 dígitos n 1 2 3 4 5 6 7 8 9 A B C D E F n #rrggbb n #FFFFFF Blanco n #000000 Negro n #FFFF 00 Amarillo
Colores en una página n Texto normal <BODY TEXT = “black”> n Texto del enlace <BODY LINK = “blue”> n Enlace visitado <BODY VLINK = “#rrggbb”> n Enlace activo (en descarga) <BODY ALINK = “#rrggbb”>
Fondo de la página n Color n n <BODY BGCOLOR = “white”> Imagen n <BODY BACKGROUND = “imagen. gif”>
FIN
- Slides: 20