Diseño y desarrollo de Páginas Web Tecnología IES Pablo Serrano 2010 – 2011 Ignacio Elorriaga

INTRODUCCIÓN Cómo está realizada una página web Documento de texto plano organizado a partir de tags Composición de un tag (no en todos es igual) Abertura Contenido cierre Maneras de crear una web Bloc de notas Programa de diseño web profesional Dreamweaver FrontPage On-line (Google Sites)

Guardado de una Web La primera página del sitio Web se llamará index.html El resto de los documentos tendrán el nombre que se quiera pero sin espacios o “ñ”

Rutas de archivos Se empleará siempre rutas relativas al documento que se trabaja Una ruta relativa es: aquella que indica la ubicación de un archivo desde la posición actual del sistema. Ejemplo: Ejemplo 2: Ejemplo 3: Contacto

Estructura Mínima de una web Esta es mi primera página web

La Cabecera (head) Irá meta-información del sitio Título de la página Autor Idioma Codificación del lenguaje CSS empleada

El cuerpo del documento (body) Información visible del documento Formado a partir de tags Tag = elemento compuesto de 3 secciones (abertura, contenido, cierre)

Tags (elementos) más usuales Tipo ElementoTag HTML Negrita texto Cursiva texto Subrayado texto Encabezados texto … texto

Tipo ElementoTag HTML Enlaces Nombre a mostrar Imagenes Tablas Celda 1 Celda 2 ListasOrdenadas: Item 1 Item 2 Sin ordenar: Item 1 Item 2

Atributos de un tag Son propiedades para mostara ciertas atributos que puede tener ese elemento No son obligatorios en todos, solo en algunos: En una imagen Img -> src En un enlace a una web a -> href

Contenedores (div) Sirven para agrupar elementos en una misma estructura Separando la cabecera, contenido, menú y pie de una página Su estructura es: … O también: …

Diseño Se emplean las CSS (Cascade Style Sheets) Múltiples beneficios: Separación del código web y del código de diseño Simplicidad en los cambios Gran potencia de diseño para elementos

Qué es una CSS y composición Documento de texto plano que tiene una sintaxis específica Denotación de cada elemento como: Nombre_elemento { Propiedad: valor; }

Cómo se añade al HTML Se incluirá una referencia en el head del documento HTML de tal manera:

Tipos de medio de visualización En la referencia HTML se indica el tipo de medio por el que se visualizará, pudiendo haber: All, para todos los tipos de dispositivos Aural, para discursos y sintetizadores de sonido Braille, dispositivos de táctil en braille Embossed, para el paginado de impresoras de braille Handheld, para pequeños dispositivos o smartphones Print, para impresoras Projection, para presentaciones, como diapositivas Screen, para pantallas de ordenador Tty, Se utiliza para los medios de comunicación Tv, usado para dispositivos de tipo televisión