Diseño de paginas web con xhtml + css

01/06/2009

EJERCICIO 6: A partir de la estructura de directorios y archivos indicada en la siguiente imagen:
favicon.ico

Diseño de Páginas Web con XHTML + CSS

index.html

proyectos.html

portafolio

mancora.html puntasal.html

imagenes

mancora.jpg puntasal.jpg

1) Crear la siguiente página llamada index.html que sirva como página principal del sitio:

2) Crear la páginade proyectos.html del portfolio:

Otros tipos de enlaces
HTML define las etiquetas para enlazar recursos que se deben cargar automáticamente.

1

01/06/2009

Otros tipos de enlaces
Otros enlaces // Bienvenidos a nuestra página html

Otros tipos de enlaces
El favicon es un icono que aparece junto a la URL cuando visitamos algunos sitios web. Además de “decorar”, el faviconayuda a nuestros lectores a localizar más fácilmente la página entre sus favoritos. El favicon debe ser un icono de 16×16 píxeles, en 16 colores y en formato .ico.

EJERCICIO 7: Enlazar el favicon en todas las páginas del ejercicio 6.

Listas
Listas no ordenadas Listas ordenadas Listas de definición

Listas
Las listas ofrecen la posibilidad de presentar cierto tipo de información de unamanera útil y simple. XHTML permite crear listas ordenadas, no ordenadas y listas de definición.

Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta encierra todos los elementos de la lista y la etiqueta cadauno de sus elementos.

2

01/06/2009

Listas no ordenadas
Menú Inicio Noticias Artículos Contacto

Listas no ordenadas
Menú C.P.M. San Pedro Chanel Universidad de Piura Universidad Nacional de Piura

Listas ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo unorden determinado. Se definen mediante la etiqueta . Los elementos de la lista se definen mediante la etiqueta .

Listas ordenadas
Instrucciones Enchufar correctamente Encender el CPU Encender el monitor

Listas de definición
Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La etiqueta crea la lista dedefinición y las etiquetas y definen respectivamente el término y la descripción de cada elemento de la lista.

Listas de definición
p Elemento de bloque, para construir párrafos. strong Elemento de línea, para remarcar la importancia de un contenido. em Elemento de línea, para enfátizar parte del contenido.

3

01/06/2009

EJERCICIO 8: Determinar el código HTML que corresponde a lasiguiente lista anidada simple:

EJERCICIO 9: Determinar el código HTML que corresponde a la siguiente lista anidada compleja:

Imágenes
El uso de imágenes es uno de los factores que ha popularizado tanto el World Wide Web. Para incluir imágenes solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes, se especifican a partir de la etiqueta .Imágenes y objetos
Imágenes Mapas de imagen Objetos

Imágenes


EJERCICIO 10: Modificar las páginas de la carpeta portfolio del ejercicios 6 para mostrar directamente las imágenes de los proyectos.

4

01/06/2009

Mapas de Imagen
Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una imagen. El usuario puede hacer click sobre cada una de las zonas definidas y cadauna de ellas puede apuntar a una URL diferente. Para crear un mapa de imagen, en primer lugar se inserta la imagen original mediante la etiqueta . A continuación, se utiliza la etiqueta para definir las zonas de la imagen. Cada zona se define mediante la etiqueta .

Mapas de imagen


Objetos
Además de las imágenes, HTML permite incluir en las páginas web otro elemento, como el...