Construcción de páginas web.pdf

(1)

www.starbook.es/cp

>> CERTIFICADO DE PROFESIONALIDAD

STARBOOK ®

CP

MF0950_2

[

]

JULIO GÓMEZ LÓPEZ

ALFREDO ALCAYDE GARCÍA

CONSTRUCCIÓN DE

PÁGINAS WEB

(2)

CONSTRUCCIÓN DE PÁGINAS WEB

©Julio López Gómez y Alfredo Alcayde García

ISBN de Edición en Papel:978-84-9265-084-2

MARCAS COMERCIALES. Las designaciones utilizadas por las empresas para distinguir sus productos (hardware, software, sistemas operativos, etc.) suelen ser marcas registradas. RA-MA ha intentado a lo largo de este libro distinguir las marcas comerciales de los términos descriptivos, siguiendo el estilo que utiliza el fabricante, sin intención de infringir la marca y solo en beneficio del propietario de la misma. Los datos de los ejemplos y pantallas son ficticios a no ser que se especifique lo contrario.

RA-MA es una marca comercial registrada.

Se ha puesto el máximo empeño en ofrecer al lector una información completa y precisa. Sin embargo, RA-MA Editorial no asume ninguna responsabilidad derivada de su uso ni tampoco de cualquier violación de patentes ni otros derechos de terceras partes que pudieran ocurrir. Esta publicación tiene por objeto proporcionar unos conocimientos precisos y acreditados sobre el tema tratado. Su venta no supone para el editor ninguna forma de asistencia legal, administrativa o de ningún otro tipo. En caso de precisarse asesoría legal u otra forma de ayuda experta, deben buscarse los servicios de un profesional competente.

Reservados todos los derechos de publicación en cualquier idioma.

Según lo dispuesto en el Código Penal vigente ninguna parte de este libro puede ser reproducida, grabada en sistema de almacenamiento o transmitida en forma alguna ni por cualquier procedimiento, ya sea electrónico, mecánico, reprográfico, magnético o cualquier otro sin autorización previa y por escrito de RA-MA; su contenido está protegido por la Ley vigente que establece penas de prisión y/o multas a quienes, intencionadamente, reprodujeren o plagiaren, en todo o en parte, una obra literaria, artística o científica.

Editado por:

RA-MA, S.A. Editorial y Publicaciones Calle Jarama, 33, Polígono Industrial IGARSA 28860 PARACUELLOS DE JARAMA, Madrid Teléfono: 91 658 42 80

Fax: 91 662 81 39

Correo electrónico:[email protected]

Internet:www.ra-ma.es ywww.ra-ma.com

Maquetación: Gustavo San Román Borrueco Diseño Portada: Antonio García Tomé

ISBN:978-84-9964-338-0

E-Book desarrollado en España enseptiembre de 2014

La ley prohíbe Copiar o Imprimir este libro

(3)

Construcción

de Páginas Web

Julio Gómez López

Alfredo Alcayde García

(4)

MATERIAL ADICIONAL

Este libro dispone de su propia página web que complementa la obra, le permite ampliar sus conocimientos a través de software referenciado a lo largo del libro, presentaciones, herramientas de autoevaluación para evaluar sus conocimientos, etc.

http://www.adminso.es

A través de esta página web los usuarios que se registren, podrán acceder a un curso virtual realizado con . Para poder acceder al curso, el sistema le pedirá la contraseña:

(5)

(6)

ÍNDICE

INTR

INTRODUC

ODUCCIÓN...

CIÓN...

...

... 13

13 CAPÍT

CAPÍTULO 1.

ULO 1. LOS LENGU

LOS LENGUAJES DE MARCAS

AJES DE MARCAS ...

...

... 17

17

1.1 INTRODUCCIÓN ...17

1.2 CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS ...18

1.3 CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS ...19

1.4 EL LENGUAJE HTML...19

1.4.1 Etiqueta...20

1.4.2_{Documento HTML...21}

1.4.3 Definición del tipo de documento DTD...22

1.5 ETIQUETAS BÁSICAS ...27

1.5.1 Etiquetas para el formato de texto ...27

1.5.2 Comentarios...28

1.5.3 Conjunto de caracteres y caracteres especiales ...29

1.5.4 Listas ...29 1.5.5 Tablas ...31 1.5.6 Colores...33 1.5.7 Enlaces...35 1.6 MARCOS...36 1.6.1 Frames...36 1.6.2 Iframes ...38 1.7_CAPAS...40

(7)

8 CONSTRUCCIÓN DE PÁGINAS WEB © STARBOOK

1.8 RESUMEN ...43

TEST DE CONOCIMIENTOS...45

EJERCICIOS PROPUESTOS ...46

CAPÍTULO

CAPÍTULO 2. IMÁGE

2. IMÁGENES Y

NES Y ELEMENTOS

ELEMENTOS MULTIMEDIA...

MULTIMEDIA... 47

47

2.1 ELEMENTOS MULTIMEDIA...47 2.1.1 Imágenes ...47 2.1.2_{Audio ...48} 2.1.3 Vídeos...49 2.1.4 Otros elementos ...50 2.2 UTILIZACIÓN DE IMÁGENES ...51 2.2.1 Imágenes ...51 2.2.2 Mapa de imágenes ...52 2.3 UTILIZACIÓN DE AUDIO...54 2.3.1 Bgsound ...54 2.3.2 Embed ...55 2.3.3 Audio ...56 2.4 UTILIZACIÓN DE VÍDEO ...57 2.4.1 Embed ...57 2.4.2_{Vídeo ...58} 2.4.3 Youtube...60

2.5 UTILIZACIÓN DE OTROS ELEMENTOS...62

2.5.1 Marquesinas...62

2.5.2 Object ...63

CAPÍT

CAPÍTULO 3. TÉ

ULO 3. TÉCNICA

CNICAS DE ACCE

S DE ACCESIBIL

SIBILIDA

IDAD Y USABI

D Y USABILIDA

LIDAD

D ...

... 71

71

3.1 CONCEPTOS BÁSICOS...71 3.1.1 Accesibilidad ...71 3.1.2 Usabilidad...73 3.2 VERIFICANDO LA ACCESIBILIDAD ...74 3.2.1_{Niveles de accesibilidad ...74} 3.2.2 Herramientas ...79

(8)

3.3 DISEÑO DE SITIOS WEB USABLES...84

CAPÍT

CAPÍTULO 4. HERRAM

ULO 4. HERRAMIENT

IENTAS DE EDICIÓ

AS DE EDICIÓN WEB

N WEB ...

...

... 89

89

4.1 INTRODUCCIÓN ...89

4.2 HERRAMIENTAS DE EDICIÓN WEB ...91

4.2.1 Dreamweaver...91 4.2.2 NVU ...94 4.2.3 Bluefish ...96 4.3 OTRAS HERRAMIENTAS...98 4.3.1 Gimp...98 4.3.2 Audacity ...102 4.3.3 Wink ...103 TEST DE CONOCIMIENTOS...106 EJERCICIOS PROPUESTOS ...107

CAPÍTULO

CAPÍTULO 5. FORMULA

5. FORMULARIOS EN

RIOS EN LA CONSTRU

LA CONSTRUCCIÓN

CCIÓN DE

DE

PÁGI

PÁGINAS

NAS WEB

WEB ...

...

... 109

109

5.1 INTRODUCCIÓN ...109 5.2_{ELEMENTOS Y ATRIBUTOS...110} 5.2.1 El formulario ...110 5.2.2 Elementos de entrada...111 5.2.3 Botones...114 5.2.4 Listas desplegables ...115 5.2.5 Etiquetas ...117 5.2.6 Grupos de elementos...117 5.3 EVENTOS...119 5.4 CREACIÓN DE FORMULARIOS...121 5.5 ACCESIBILIDAD Y USABILIDAD ...123 5.5.1 Criterios de accesibilidad...124 5.5.2 Ejemplo...124 5.6_{RESUMEN ...125} TEST DE CONOCIMIENTOS...127

(9)

CAPÍTULO 6. CAPÍTULO 6. PLANTILLAS EN PLANTILLAS EN LA CONSTRUCCIÓN LA CONSTRUCCIÓN DEDE PÁGI PÁGINAS NAS WEBWEB ... 129₁₂₉ 6.1 INTRODUCCIÓN ...129

6.2 REPOSITORIOS LIBRES DE PLANTILLAS ...130

6.3_{EJEMPLO DE UTILIZACIÓN DE PLANTILLAS ...131}

CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE CAPÍTULO 7. HOJAS DE ESTILO EN LA CONSTRUCCIÓN DE PÁGI PÁGINAS NAS WEBWEB ... 143₁₄₃ 7.1 INTRODUCCIÓN ...143

7.1.1 Una breve historia de CSS...144

7.1.2 CSS, HTML, XHTML ...145

7.1.3 Funciones y características...146

7.1.4 El modelo de formato visual y el modelo de caja ...147

7.2 TIPOS DE ESTILOS ...148

7.3 SELECTORES Y REGLAS DE ESTILO...151

7.4_{ATRIBUTOS DE ESTILO ...154}

7.4.1 Propiedades, valores, unidades y media-type...154

7.4.2 Media-types ...158

7.4.3 Propiedades de fondo y color...159

7.4.4 Propiedades de textos ...162

7.4.5 Propiedades de las cajas ...164

7.4.6 Dimensiones en CSS ...168

7.5 ESQUEMAS (LAYOUTS)...169

7.6 HERRAMIENTAS PARA LA CREACIÓN DE HOJAS DE ESTILO...173

7.6.1 Eclipse...173

7.6.2 Eclipse Web Developer Tools ...175

7.7 ACCESIBILIDAD Y USABLIDAD ...178

7.8 RESUMEN ...180

(10)

SOLU

SOLUCION

CIONARIO DE LO

ARIO DE LOS TEST DE CONO

S TEST DE CONOCIMI

CIMIENTO

ENTOS

S ...

...

... 185

185 ÍNDICE

(11)

INTRODUCCIÓN

Este libro surge con el propósito de acercar al lector los aspectos más importantes que encierra la Construcción de páginas webConstrucción de páginas web ante la creciente demanda de personal cualificado. Con tal propósito, puede servir de apoyo también para obtener la Cualificación ProfesionalConfección y publicación de páginas webConfección y publicación de páginas web.

Marco legal

El módulo formativo Construcción de Páginas WebConstrucción de Páginas Web se encuadra dentro de la Cualificación Profesional Confección y publicación de páginas webConfección y publicación de páginas web perteneciente a la Familia Profesional Informática y Comunicaciones. La Familia Profesional Informática y Comunicaciones se regula según se establece en el Real Decreto 1201/2007, de 14 de septiembre (BOE de 27 de septiembre de 2007).

Las capacidades que se desarrollan en el módulo formativo son las siguientes:  C1C1. Identificar los elementos proporcionados por los lenguajes de marcas y

confeccionar páginas web utilizando estos lenguajes teniendo en cuenta sus especificaciones técnicas.

 C2C2. Identificar las características y funcionalidades de las herramientas de edición web, y utilizarlas en la creación de páginas web teniendo en cuenta sus entornos de desarrollo.

 C3C3. Confeccionar plantillas para las páginas web atendiendo a las especificaciones de diseño recibidas.

 _C4_C4_{. Crear formularios e integrarlos en páginas web para incluir interactividad en} las mismas, siguiendo unas especificaciones funcionales recibidas.

(12)

 C5C5. Describir las características de las hojas de estilo para dar formato a las páginas web, y crear ficheros de estilo de acuerdo a un diseño especificado.

Contenidos

A lo largo del libro se estudian los aspectos fundamentales relacionados con la

Construcción de páginas web. El libro se divide en los siguientes capítulos:

 Capítulo 1. Los lenguajes de marcasCapítulo 1. Los lenguajes de marcas. En este capítulo se ven las características principales de los lenguajes de marcas y aprenderá el lenguaje HTML utilizado para la creación de páginas web.

 Capítulo 2. Imágenes y elementos multimediaCapítulo 2. Imágenes y elementos multimedia. Aprenderá los aspectos más importantes de las imágenes y elementos multimedia, y a cómo utilizarlas en su página web.

 Capítulo 3. Técnicas de accesibilidad y usabilidadCapítulo 3. Técnicas de accesibilidad y usabilidad. En este capítulo se verán las técnicas de accesibilidad y usabilidad más utilizadas para permitir que su web sea navegable y accesible a todos los usuarios.

 Capítulo 4. Herramientas de edición webCapítulo 4. Herramientas de edición web. En este capítulo aprenderá a utilizar las herramientas más importantes para la creación de páginas web. Además, aprenderá a utilizar las herramientas más importantes para manejar los elementos más importantes de una web como son las imágenes, vídeos, sonidos, etc.

 Capítulo 5. Formularios en la construcción de páginas webCapítulo 5. Formularios en la construcción de páginas web. Aprenderá a utilizar los formularios para permitir que los usuarios envíen información.

 Capítulo 6. Plantillas en la construcción de páginas webCapítulo 6. Plantillas en la construcción de páginas web. En este capítulo aprenderá a utilizar las plantillas para construir páginas web de una forma fácil y sencilla.

 Capítulo 7. Hojas de estilo en la construcción de páginas webCapítulo 7. Hojas de estilo en la construcción de páginas web. En el último capítulo aprenderá a utilizar las hojas de estilo para mejorar la apariencia de su sitio web y permitir separar el contenido de la web con su apariencia.

A lo largo de libro se proponen una serie de actividades, ejercicios y cuestionarios de autoevaluación que le permitirán adquirir mejor los conocimientos desarrollados a lo largo de la obra. Además, como recurso complementario al libro, el lector podrá descargar a través del portal www.adminso.es software referenciado a lo largo de la obra, autoevaluación, actividades resueltas, etc.

(13)

(14)

1

1 Capítulo

Capítulo

1 LOS LENGUAJES DE MARCAS

LOS LENGUAJES DE MARCAS

OBJETIVOS: OBJETIVOS:

 Conocer las características más importantes de los lenguajes de marcas.  Conocer el lenguaje HTML.

 Utilizar las diferentes etiquetas HTML para la edición de páginas web.  Utilizar los marcos y capas para poder estructura la información de una

página web.

1.1

1.1 INTRODUCCIÓN

INTRODUCCIÓN

Un lenguaje de marcas se podría definir como un lenguaje que permite codificar un documento, incorporando etiquetas o marcas que contienen información adicional acerca de la estructura, formato y presentación del texto.

Aparecieron por primera vez en los años 60, cuando IBM intentó resolver el problema del tratamiento de documentos procedentes de diferentes plataformas mediante el lenguaje GML (G eneralizedM arkupLanguage). El lenguaje permitía ajustar el formato y presentación del documento automáticamente para varios dispositivos con solo indicar el perfil. El lenguaje tras un largo proceso fue estandarizado en 1986 por la ISO (Organización Internacional para la estandarización) pasándose a llamar SGML (S tandard G eneralized M arkUp Language), convirtiéndose en el padre de todos los lenguajes de marcas.

SGML se presenta como un lenguaje muy potente aunque a la vez complejo desde el cual han nacido multitud de lenguajes de marcas, donde HTML se presenta como el más popular de sus hijos, aunque existen otros muchos otros como XML, Latex, XHTML, Tex, SVG, MathML, RTF, RSS,…

(15)

A continuación se puede ver un ejemplo del lenguaje SGML:

Listado 1.1.html Listado 1.1.html

<Nombre> Javier </Nombre> <Apellido1> López </Apellido1> <Apellido2> Segovia </Apellido2> </persona> <telefono>123456789</telefono> <direccion> <calle>Vacia</calle> <numero>11</numero> <poblacion>Almería</poblacion> </direccion> </Contacto>

1.2

1.2 CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS

CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS

Todo lenguaje de marcas debe cumplir las siguientes características:

 Codificación en texto plano.Codificación en texto plano. Todo documento puede estar compuesto únicamente por texto sin formato, sólo caracteres. Pueden utilizarse distintas codificaciones como: ASCII, Unicode, etc.

 Fácil de interpretar.Fácil de interpretar. El archivo puede leerse o interpretarse directamente. Además, se puede codiciar por cualquier editor de textos.

 Portabilidad.Portabilidad. Al ser un documento de texto es independiente de la plataforma, sistema operativo y/o editor con el que se ha creado.

 Compactibilidad.Compactibilidad. En el documento se entremezcla el texto con las marcas, generando un único archivo.

 Flexibilidad.Flexibilidad.Se puede adaptar fácilmente a sus necesidades añadiendo nuevas etiquetas, atributos, etc.

(16)

1.3

1.3 CLASIFICACIÓN DE LOS LENGUAJES DE

CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS

MARCAS

Los lenguajes de marcas se pueden clasificar de diferentes formas, aunque la más extendida establece tres categorías principales:

 Lenguajes de presentación.Lenguajes de presentación. Permiten indicar el formato del texto. Alguno de los lenguajes más utilizados son: RTF, HTML, TeX, etc.

 Lenguajes procedimentales.Lenguajes procedimentales. Su uso se orienta a la presentación del texto, aunque a la vez es visible para el usuario que edita el texto. Sin embargo, el programa que genera la presentación del documento interpreta el código presentando el mismo al usuario final con el formato adecuado. Alguno de los lenguajes más utilizados son: HTML, TeX, etc.

 Lenguajes descriptivos o semánticos.Lenguajes descriptivos o semánticos. Son lenguajes enfocados a definir el contenido del texto y no su formato. En este caso el documento se presenta tal y como es y no como debe presentarse. Son lenguajes procedimentales SML, SGML, etc.

1.4

1.4 EL LENGUAJE HTML

EL LENGUAJE HTML

Internet se ha convertido en la entidad virtual más variada que ha desarrollado el hombre. El número de usuarios crece periódicamente en cientos de miles por todo el mundo, sin que parezca que vaya a dejar de aumentar. Internet es un lugar virtual donde todo el mundo es bienvenido para hacer negocios, comunicarse, buscar información o, simplemente, divertirse navegando por la red.

A continuación, vamos a aprender a crear nuestra propia página web utilizando el lenguaje HTML. HTML (H yper T extM arkupLanguage) es un lenguaje de marcas de hipertexto que incorpora al texto etiquetas o marcas que contienen información adicional sobre su estructura o su presentación. HTML es un lenguaje que el navegador va interpretando para representar la página web.

La historia del lenguaje HTML se remonta a 1991 cuando el padre del World Wide Web, Tim Berners-Lee, publicó el primer documento HTML. En su primera versión, el lenguaje poseía 22 etiquetas y era relativamente sencillo. Sin embargo, en la actualidad, la especificación HTML 4.1 está formada por más de 90. A partir de este momento, el lenguaje se ha estado desarrollando y no ha parado de evolucionar.

(17)

URL DE INTERÉS URL DE INTERÉS

En el enlacehttp://es.wikipedia.org/wiki/Tim_Berners-Lee puedes ver la bibliografía de Tim Bernes-Lee, padre del lenguaje WWW.

En la figura 1.1 se muestra la evolución que ha ido sufriendo el lenguaje HTML desde sus inicios hasta la actualidad.

1989- 1991 HTML 1.0 HTML 2.0

Páginas relativamente sencillas.

1995 HTML 3.0 Guerra de los navegadores. Los fabricantes competían por tener un navegador con más funciones.

El programador debía hacer una página para cada navegador.

1998 HTML 4.0 W3C tomó el mando y puso fin a la guerra de los navegadores creando una sola versión. Se separó estructura de presentación (CSS). 1999 HTML 4.1 Versión más usada, y extendida. Hoy en día se

sigue usando y es la más usada. 2000 XHTML 1.0 Unión de XML y HTML. Concepto Web

Semántica.

2009 XHTML 2.0 Casi ha sido desbancado por HTML 5.0. 2009- Futuro HTML 5.0 Mejor estructura.

API para vídeo y audio.

Figura 1.1. Evolución histórica del lenguaje HTML

En este capítulo vamos a ver la especificación HTML 4.1 por ser la más extendida en la actualidad.

1.4.1

1.4.1 Etiqueta

Etiqueta

El lenguaje HTML está compuesto por etiquetas que le indican al navegador información sobre los datos que recibe. La sintaxis de una etiqueta es:

(18)

Por ejemplo, como veremos más adelante la etiqueta <b> permite poner el texto en negrita.

<b> Texto que aparece en negrita </b>

Las etiquetas tiene opciones o modificadores que permiten cambiar su comportamiento. Por ejemplo, el atributosizede la etiqueta<font> permite indicar el tamaño del tipo de letra:

<font size=5> Hola a todo el mundo </font>

1.4.2

1.4.2 Documento HTML

Documento HTML

Básicamente, todo documento HTML tiene la siguiente estructura:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <HTML> <head> </head> <body> </body> </HTML> donde:

 La primera línea contiene información acerca de la versión de HTML con la que estamos trabajando, también conocida como la línea de definición del lenguaje (DTD).

 <head>. Contiene información no visible sobre la página. Esta información puede ser el autor, título, palabras clave para los buscadores, etc.

 <body>. Es la parte más importante de la página web y en esta zona es donde se guarda todo el contenido que va a mostrar el navegador.

A continuación, vamos a ver de forma resumida los elementos más importantes de cada sección.

(19)

1.4.3

1.4.3 Definición del tipo de documento DTD

Definición del tipo de documento DTD

Para que un documento HTML sea válido según el W3C, debe especificar qué versión de HTML utiliza. Es recomendable utilizar un DTD siempre que sea posible, ya que permite la separación de los datos de la presentación, y al mismo tiempo permite que nuestra página sea fácilmente adaptable a nuevas especificaciones del lenguaje.

HTML, en su especificación 4.01, tiene tres tipos de DTD, de modo que puede seleccionar el que mejor se adapte a nuestras necesidades. A continuación vamos a presentar los tres tipos de DTD desde la versión más restrictiva hacia la más permisiva:

 DTD Estricto (Strict DTD).DTD Estricto (Strict DTD). Es la versión más estricta e incluye todos los elementos y atributos de la especificación excepto los elementos y atributos de presentación. W3C no recomienda utilizar los atributos de presentación ya que como veremos más adelante se sustituyen por las hojas de estilo que veremos en el siguiente capítulo.

La declaración de este tipo de documento se realiza:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 DTD Transicional (Transitional DTD).DTD Transicional (Transitional DTD). Incluye todos los elementos del DTD estricto más los elementos de presentación (que W3C no recomienda utilizar). La declaración de este tipo de documento se realiza:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

 DTD para marcos (Frameset DTD).DTD para marcos (Frameset DTD).Es idéntico al DTD transicional con la única diferencia que incluye soporte para frames. Cambiando en el modelo de contenidos del elemento<body> por el<frameset>.

La declaración de este tipo de documento se realiza:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/frameset.dtd">

1.4.3.1

1.4.3.1_CABECERACABECERA

La cabecera de un documento HTML se encuentra delimitada por las etiquetas <HEAD> y </HEAD>. En la cabecera se encuentra la información que aunque no se presenta directamente al usuario, es importante. Por ejemplo, se incluye información como: el título de la página, palabras clave (que utilizarán los motores de búsqueda para indexar nuestro documento), información sobre el autor, etc.

(20)

Dentro de la cabecera nos podemos encontrar con las siguientes etiquetas:

 <TITLE> </TITLE><TITLE> </TITLE>. Permite indicar el título de la página web que aparecerá en la barra del navegador. Es muy importante asignarle a nuestra web un título, lo más representativo posible. Debido a que esta información será propuesta al usuario, por ejemplo cuando desea archivar la página en favoritos, entonces el título es el nombre que se le presenta para almacenar el enlace a la web.

<TITLE> Título de la página web </TITLE> </HEAD>

<BODY> … </BODY> </HTML

 <META><META>. Permite especificar metadatos de un documento HTML. Los metadatos son información adicional sobre la página web como el autor, tipo de contenido, etc.

Los principales atributos de la etiqueta son:

- namename. Identifica un nombre de propiedad.

- contentcontent. Detalla el valor de la propiedad.

- schemescheme. Atributo que especifica el esquema que se usará para interpretar el valor de la propiedad.

- httphttp-equivequiv. Lo utilizan los servidores HTTP para obtener información sobre los encabezados de respuesta del mensaje HTTP. También puede usarse en lugar del atributoname.

A continuación, puede ver algunos ejemplos de uso de la etiqueta<meta>.

1. <META name="description" content="Contrucción de páginas web">

2. <META name="keywords" content="HTML,CSS,JavaScript,PHP">

3. <META name="author" content="Julio Gómez y Alfredo Alcayde">

(21)

donde:

- En la línea 1 se introduce una descripción genérica del contenido de nuestro documento HTML.

- En la línea 2, se facilitan las palabras clave que serán utilizadas por los buscadores para indexar nuestra página.

- La línea 3 sirve para aportar información sobre el autor de los contenidos. - Para terminar, en la línea 4 se especifica la codificación del conjunto de

caracteres de nuestro documento.

 <LINK>.<LINK>. Este elemento permite crear un vínculo o relación entre nuestro documento y otros recursos. Suele utilizarse para declarar las hojas de estilo que utiliza el documento, el archivo de scripts, describir la posición del documento dentro de una serie, etc. Es importante mencionar que los enlaces realizados con el elemento <LINK >, no se pueden usar para mostrar contenido dentro de un documento.

A continuación, puede ver un ejemplo:

1. <head>

2. <title>Tema 2</title>

3. <link rel="index" href="../indice.html" />

4. <link rel="prev" href="tema1.html" />

5. <link rel="next" href="tema3.html" />

6. <link rel="alternate" media="print" href="tema2-imp.html"/>

7. <link rel="alternate" hreflang="en" href="tema2-en.html"/>

8. </head> donde:

- En las líneas 4 y 5 se indica que el documento pertenece a una serie de documentos y que la página anterior es el tema1.html y la posterior el

tema3.html . Por tanto, si el navegador lo permite utilizará esta información para enlazarla con los botones anterior y siguiente de la barra de herramientas.

(22)

- En la línea 6 se da información para que a la hora de imprimir se utilice otro documento que estará formateado para la impresión. Por ejemplo, se habrán eliminado elementos como los menús.

- En la línea 7 se le avisa al navegador de que existe una traducción al inglés

tema2-en.html de la página que se muestra.



<BASE>.

<BASE>. Permite definir la URL utilizada para resolver todas las direcciones relativas del documento, así como el marco de destino del nuevo enlace. Para ello basta con asignarle la URL al atributohref y el marco al atributotarget .

En el ejemplo se toma como dirección base la dirección:

http://www.ual.es/masterASCI y como marco destino una nueva ventana.

1.4.3.2

1.4.3.2 CUERPO DE UN DOCUMENTOCUERPO DE UN DOCUMENTO

El cuerpo de un documento es el lugar de nuestra página web donde se encuentra todo el contenido de nuestra web. Éste se encuentra bajo las etiquetas <body> y</body>

que se encuentran localizadas debajo de la etiqueta</head>. Dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes, aunque no es recomendable utilizar los atributos de la etiqueta, ya que se están declarando obsoletos, en favor de las hojas de estilo que veremos en el capítulo siguiente.

1.4.3.3

1.4.3.3_{MI PRIMERA PÁGINA WEB}MI PRIMERA PÁGINA WEB

En este apartado, vamos a construir nuestra primera página web. En el siguiente ejemplo se muestra el código de una página web sencilla, el resultado de la misma lo podemos ver en la figura 1.2. Tal y como hemos visto, la estructura de una página web está compuesta por tres partes bien diferenciadas: la definición del DTD, la cabecera y el cuerpo.

En la primera línea especificamos el DTD del documento, en este caso se ha optado por la versión estricta.

Mientras que en la cabecera, se declara el título de la página y los metadatos, a través de la cual, proporciona información a los buscadores.

Para finalizar, en el cuerpo se define un título o encabezado <H1>, un párrafo<P> y

(23)

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <HTML>

<HEAD>

<TITLE>Mi primera página Web</TITLE> <META name="keywords"content="HTML">

<BODY>

<H1>MI PRIMERA PÁGINA WEB</H1> <P>Bienvenidos al mundo del HTML</P>

<A href="http://www.ual.es/masterACSI" target="_blank"> Mi primer enlace: www.ual.es/masterACSI </A>

</BODY> </HTML>

Figura 1.2. Mi primera página web

ACTIVIDAD 1.1 ACTIVIDAD 1.1

 Crea una página web que muestre por pantalla “HOLA A TODO EL MUNDO”.

 Crea una página web que muestre cinco chistes.

 Crea una página web que muestre por pantalla “HOLA A TODO EL MUNDO”.

(24)

1.5

1.5 ETIQUETAS BÁSICAS

ETIQUETAS BÁSICAS

A continuación, se van a ver las etiquetas HTML más utilizadas.

1.5.1

1.5.1 Etiquetas para el formato de texto

Etiquetas para el formato de texto

HTML implementa varias etiquetas que nos van a permitir formatear el texto, las cuales podemos ver en la tabla 1.1. Sin embargo, vamos a pasar por alto una de las más utilizadas (<FONT >), que está dejando de ser usada, debido a que hace que el código no sea muy legible.

Tabla 1.1. Etiquetas para formatear el texto Tabla 1.1. Etiquetas para formatear el texto

Etiqueta Descripción

<B>

<B> Texto en negrita.

<I>

<I> Texto en cursiva.

<U>

<U> Texto subrayado.

<DEL>

<DEL> Texto tachado.

<SUP>

<SUP> Superíndice.

<SUB>

<SUB> Subíndice.

<BIG>

<BIG> Texto grande.

<SMALL>

<SMALL> Texto pequeño.

<TT>

<TT> Texto modo teletipo.

<CITE>

<CITE> Texto modo cita.

<DFN>

<DFN> Texto modo definición.

<PRE>

<PRE> Mantiene el formato del texto, manteniendo espacios y saltos de línea.

A continuación, se muestra un ejemplo básico de la utilización de formato de texto cuyo resultado se muestra en la figura 1.3.

<head>

<title> Formatos de texto </title> </head>

(25)

<body>

<b> Texto en negrita </b> <br> <i> Texto en cursiva </i> <br> <u> Texto subrayado </u> <br> <del> Texto tachado </del> <br>

TEXTO <sup> texto en superíndice </sup> <br> TEXTO <sub> texto en subíndice </sub> <br> </body>

Figura 1.3. Ejemplo de uso de las etiquetas de formato de texto en HTML

 Crea una página web donde utilices los diferentes formatos de texto.  Crea una página web donde utilices los diferentes formatos de texto.

1.5.2

1.5.2 Comentarios

Comentarios

HTML, como cualquier otro lenguaje también nos permite agregar comentarios a nuestro código y que éstos no sean mostrados al cliente, de modo que nos faciliten a los programadores la comprensión y reutilización de códigos de otros.

Un comentario en HTML se realiza de la siguiente forma:

(26)

1.5.3

1.5.3 Conjunto de caracteres y caracteres especiales

Conjunto de caracteres y caracteres especiales

HTML, en su versión 4.01, utiliza la codificación UNICODE UCS4, aunque muchos de los navegadores muestran sólo un pequeño subconjunto de estos caracteres. La información con la que está codificado el conjunto de caracteres la podemos encontrar en el <META>.

Puesto que una página puede ser vista en distintos países, y entre éstos hay diferencias en cuanto a los caracteres utilizados, HTML crea un conjunto denominado “caracteres especiales” que nos permiten identificar de forma inequívoca un carácter. En la

tabla 1.2 puede ver algunos de los más importantes.

Tabla 1.2. Conjunto de caracteres especiales Tabla 1.2. Conjunto de caracteres especiales

Etiqueta Literal Etiqueta Literal Etiqueta Literal Etiqueta Literal Etiqueta Literal Etiqueta Literal <

< < &iacoute;&iacoute; í ¼¼ ¼

>

> > &Oacoute;&Oacoute; Ó ½½ ½

&

& & &oacoute;&oacoute; ó ¾¾ ¾

"

" “ &Uacoute;&Uacoute; Ú ±± ±

  Espacio &uacoute;&uacoute; ú ££ £

&Aacoute;

&Aacoute; Á &eacoute;&eacoute; é €€ €

&aacoute;

&aacoute; á ÑÑ Ñ ¥¥ ¥

&Eacoute;

&Eacoute; É ññ ñ ¢¢ ¢

&eacoute;

&eacoute; é ©© © ¿¿ ¿

&Iacoute;

&Iacoute; Í ®® ®

1.5.4

1.5.4 Listas

Listas

Dentro de HTML se pueden utilizar tres tipos de listas:

 Listas ordenadas.Listas ordenadas. Se definen mediante el elemento <ol> y se les añaden los distintos ítems mediante la etiqueta<li>. En el siguiente ejemplo puede ver cómo se forman las listas ordenadas.

(27)

Listado 1.5a.html Listado 1.5a.html

<ol>

 Listas no ordenadasListas no ordenadas. En este caso se utiliza para definirlas el comando <ul> y para añadir los ítems se utiliza la etiqueta <li>, la misma que para las listas

ordenadas. En el ejemplo puede comprobar cómo la sintaxis es igual que para las listas ordenadas, ya que sólo cambia el elemento de definición.

Listado 1.5b.html Listado 1.5b.html

<ul>

 Listas de definicionesListas de definiciones. Son un tipo especial de listas donde cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia etiqueta. Se definen mediante la etiqueta<dl>, el término<dt> y

la definición<dd>. En el ejemplo siguiente puede ver cómo se crea una lista de definiciones. Listado 1.5c.html Listado 1.5c.html <dl> <dt>Término1</dt> <dd>Definición1</dd> <dt>Término2</dt> <dd>Definición2</dd> </dl>

(28)

En la figura 1.4, puede ver el resultado de aplicar los códigos de ejemplo de los tres tipos de lista, mostrando un ejemplo comparativo de los tipos de listas, donde se observan las diferencias funcionales entre los distintos tipos.

 Crea una página web con una lista numerada que muestre los 5

monumentos españoles que más te gusten.

 Crea una página web con lista no numerada que muestre los nombres de 5

personas.

 Crea una página web que muestre en una lista 5 comunicaciones

autónomas. Y dentro de cada comunidad, muestre otra lista con sus provincias.

 Crea una página web con una lista numerada que muestre los 5

monumentos españoles que más te gusten.

Crea una página web con lista no numerada que muestre los nombres de 5 personas.

 _{Crea una página web que muestre en una lista 5 comunicaciones}

autónomas. Y dentro de cada comunidad, muestre otra lista con sus provincias.

1.5.5

1.5.5 Tablas

Tablas

La tabla es uno de los elementos de más utilizado debido a su funcionalidad y versatilidad, ya que permite organizar y categorizar el contenido dentro del documentohtml .

Figura 1.4. Comparación de los distintos tipos de listas en HTML

Los elementos más utilizados para crear una tabla son:

 <TABLE>. Se utiliza para definir una tabla y asignarle propiedades generales como por ejemplo: el borde (atributoborder ), la anchura (atributowidth).

(29)

 <TR>. Permite definir las distintas filas de la tabla. Hay que tener en cuenta que utilizar una etiqueta por cada fila de la tabla.

 Y dentro de cada fila se declaran las distintas celdas que es dónde se guarda el contenido. Para definir una celda se utiliza la etiqueta<TD>.

En el siguiente ejemplo se crea una tabla sencilla de 3 filas y 3 columnas. Entre comentarios HTML se ha ido explicando la función de cada etiqueta. En la figura 1.5, puede ver el resultado visual de la construcción de la tabla.

<td>Mes</td>  <td>Ingresos</td>  <td>Gastos</td>  </tr>  <tr>

<td>Enero</td>  <td>1050€</td>  <td>150€</td>  </tr>  <tr>

<td>Febrero</td>  <td>1150€</td>  <td>450€</td>  </tr>

</table>

(30)

En la tabla 1.3 puede ver los modificadores para las etiquetas de las tablas que nos permiten hacer que una celda ocupe varias columnas (colspan) o varias filas (rowspan), establecer el tamaño de ancho (width) o alto (height ) de una tabla, o permiten establecer el borde y el color de la tabla.

_{Crea una tabla que muestre un horario de trabajo semanal.}

 Crea una página web que muestre la siguiente tabla:

DATOS FINANCIEROS DATOS FINANCIEROS INGRESOS

INGRESOS GASTOS GASTOS DIFERENCIADIFERENCIA ENERO ENERO 700 700 € € 1.100 1.100 € € -400 -400 €€ … … DICIEMBRE DICIEMBRE 2.000 2.000 € € -1.500 -1.500 € € 500 500 €€

 Utiliza el atributo bcolor para darle color a las anterioes tablas.  _{Crea una tabla que muestre un horario de trabajo semanal.}

 Crea una página web que muestre la siguiente tabla:

DATOS FINANCIEROS DATOS FINANCIEROS I INNGGRREESSOOSS GGAASSTTOOS S DDIIFFEERREENNCCIIAA ENERO ENERO 7 7 11..1 1 --44 … … DICIEMBRE DICIEMBRE . . --11..5 5 55

 Utiliza el atributo bcolor para darle color a las anterioes tablas.

Tabla 1.3. Otras etiquetas de interés para tablas Tabla 1.3. Otras etiquetas de interés para tablas

<td colspan=2> Una celda ocupa dos celdas de forma horizontal.

<td rowspan=2> Una celda ocupa dos celdas de forma vertical.

<td width=200> Indica el ancho de una celda, fila o tabla.

<td height=200> Indica el alto de una celda, fila o tabla.

<table border=1> Indica que el borde de la tabla vale 1.

<td bgcolor=blue> Indica el color de una celda, fila o tabla.

1.5.6

1.5.6 Colores

Colores

Algunas de las etiquetas del lenguaje admiten la propiedad color, bien para dar color al texto, o para establecerlo como fondo del elemento. Para indicar un determinado color se utiliza la combinación de los tres colores básicos (rojo, verde y azul). Para indicar el color

(31)

puede utilizar la codificación de 8 bits (valores entre 0 y 255) o la codificación hexadecimal (valores entre 00 y FF). Por ejemplo, el color negro en HTML es #000000.

Adicionalmente HTML define una paleta de 17 colores heredados de la paleta VGA de Windows (véase la tabla 1.4). Para utilizarlos, es posible utilizar el código del color o su correspondiente nombre.

Tabla 1.4. Paleta de colores HTML Tabla 1.4. Paleta de colores HTML

Etiqueta

Etiqueta C. C. HexadeciHexadecimal mal Color Color DescripciónDescripción

BLACK #000000 NEGRO TEAL #008080 TEAL BLUE #0000FF AZUL NAVY #000080 AZUL MARINO LIME #00FF00 LIMA WHITE #FFFFFF BLANCO PURPLE #800080 PÚRPURA YELLOW #FFFF00 AMARILLO OLIVE #808000 OLIVA RED #FF0000 ROJO MAROON #800000 MARRÓN GRAY #808080 GRIS FUCHSIA #FF00FF FUCSIA GREEN #008000 VERDE SILVER #C0C0C0 PLATA AQUA #00FFFF AGUA ACTIVIDAD 1.5 ACTIVIDAD 1.5

 Crea una página web en la que utilices la etiqueta <font color=”” > texto

</font > para que la página tenga 5 párrafos y cada uno de un color diferente.

 Crea una página web que muestre la palabra “murcielago” con cada letra en

un color diferente.

Crea una página web en la que utilices la etiqueta <font color=”” > texto </font > para que la página tenga 5 párrafos y cada uno de un color diferente.

Crea una página web que muestre la palabra “murcielago” con cada letra en un color diferente.

(32)

1.5.7

1.5.7 Enlaces

Enlaces

Probablemente el enlace sea el elemento más importante dentro del lenguaje HTML, ya que sin él no tiene sentido hablar de navegación.

Para definir un enlace se utiliza la etiqueta de lenguaje<A></A>, cuya sintaxis es la siguiente:

<A HREF="URL" TARGET="Objetivo">Texto del enlace o imagen</A>

donde URL es el destino del enlace que puede ser:

 Enlaces a sitios externos.Enlaces a sitios externos.Para ello, debe indicar la dirección completa.

<a href='http://www.google.es'>Enlace a un sitio web</a>

 Enlace a páginas internas.Enlace a páginas internas. En este caso puede utilizar direccionamiento relativo.

<a href='./h1.html'>Enlace a nuestro sitio web</a>

 Enlaces dentro del documento.Enlaces dentro del documento. Para este tipo de enlaces se crean y utilizan las marcas del propio documento.

<a href='#inicio'>Enlace a nuestro documento</a>

 _{Enlace a archivos.}

<a href='archivo.zip'>Descargar fichero</a>

 Enlace a direcciones de correo electrónico.Enlace a direcciones de correo electrónico.Este tipo de enlaces permite abrir un gestor de correo y enviar unemail a la dirección enlazada. Estos enlaces se

utilizan cada vez menos debido a que son una fuente para rastrear direcciones para utilizarlas como correospam.

<a href='mailto:[email protected]'> Enviar um email </a>

La etiquetatarget permite indicar el destino donde se abre el enlace, es decir, si se muestra en el mismo navegador, en una nueva página del navegador, dentro de unframe, etc. Las opciones más utilizadas son: target=_blank abre una nueva página; target=_top

carga la página en la ventana principal;target=nombre carga la página en elframe indicado por su nombre.

(33)

Así por ejemplo, si desea crear un enlace que cargue en una nueva página Google tendremos:

<a href=http://www.google.es target=_blank>Ir a google</a>

 Crea una página web que contenga los enlaces a 5 buscadores.

 Crea una página web que contenga un listado de enlace con las páginas que

más utilizas.

Crea una página web que contenga los enlaces a 5 buscadores.

 Crea una página web que contenga un listado de enlace con las páginas que

más utilizas.

1.6

1.6 MARCOS

MARCOS

A continuación se van a ver los diferentes modos de estructura el contenido de una página web.

1.6.1

1.6.1 Frames

Frames

Los frames permiten crear páginas a partir de la composición de otras páginas. Es decir, permite crear una página divida en zonas y en cada una de las zonas se muestra otra página web.

En la actualidad, losframes se están dejando de utilizar estas etiquetas, debido a la usabilidad y accesibilidad, y en la especificación HTML 5.0 desaparecen.

Las etiquetas que permiten utilizar frames son:

 <frameset><frameset>. Indica al navegador que se va a declarar un conjunto de frames y define sus proporciones en pantalla mediante los atributosrows ycols, indicando las valores en %, o el resto de lo que quede sin utilizar (*).

(34)

 <frame><frame>. Define el contenido de la ventana, para ello sólo hay que indicarle en su atributo SRC la página web a visualizar.

A continuación se muestra un ejemplo que utiliza 3 frames. Es importante destacar que cuando trabaja con frames, el cuerpo de la página no está formado por la etiqueta <body>, ésta deja lugar a la etiqueta<frameset>, etiqueta con la cual se define la forma en

la que esta dividida la página. En este ejemplo se ha optado por realizar una división en 3 columnas, la primera de ellas de un tamaño del 25%, al igual que la última, dejando el resto para la central. Seguidamente se define el enlace con las distintas páginas que desea vincular a cadaframe_{. Este proceso se realiza mediante el uso de la etiqueta}<frame>_{, a través del}

atributo src se le proporciona la URL de la página. Para finalizar, cierre el frame con la etiqueta</frameset>. Listado 1.8.html Listado 1.8.html <HTML> <HEAD> <TITLE>

Mi primera página con frames </TITLE> </HEAD> <FRAMESET cols="25%,*,25%"> <frame src="h1.html" /> <frame src="tabla.html" /> <frame src="linea.html" /> </FRAMESET > </HTML>

En la figura 1.6 puede ver el resultado del ejemplo.

(35)

 Crea las páginas cabecera.html , menu.html , contenido.html y pie.html .

Cada página debe tener un color de fondo diferente.

 Crea una página deframes para cada una de las siguientes estructuras:

MENU CONTENIDO CABECERA MENU CONTENIDO

CABECERA MENU CONTENIDO

PIE

 Crea las páginas cabecera.html , menu.html , contenido. tml y pie.ht l .

Cada página debe tener un color de fondo diferente.

 Crea una página de frames para cada una de las siguientes estructuras:

CONTENIDO MENU CABECERA CONTENIDO MENU CABECERA CONTENIDO MENU PIE

1.6.2

1.6.2 Iframes

Iframes

Eliframe es un elemento HTML, que permite insertar o incrustar un documento HTML

dentro de un documento HTML principal, permitiendo insertar páginas con mayor control y con estructuras mucho más flexibles que losframes. Aunque inicialmente fue introducido por

Internet Explorer, hoy día es aceptado como estándar por la W3C.

Los atributos que se pueden utilizar en losiframes son los siguientes:

 frameborderframeborder. Indica si el documento HTML incrustado se mostrará con o sin borde. 1 indica borde, 0 ausencia de borde.

 height.height.Especifica la altura del elemento, puede ser expresada en píxeles o en porcentaje (%).

 width.width.Especifica la anchura del elemento, puede ser expresada en píxeles o en porcentaje (%).

 srcsrc. Establece la URL del documento incrustado en eliframe.

 longdesc.longdesc.Permite indicar una descripción larga para el contenido deliframe.  scrolling.scrolling.Establece si en eliframe se permite el uso de barras descrolls y como

(36)

A continuación, se muestra un ejemplo de uso de la etiquetaiframe, donde se muestra la página deGoogle Maps.

<TITLE>_{Mi primera página con iframes} </TITLE> </HEAD> <BODY> <H1> Mi página Web</H1> <H2> Localízame</H2> <div>

</div> </BODY> </HTML>

(37)

 Crea una página web que muestre coniframes los dos buscadores que más

utilizas.

 Crea una página web que muestre coniframes las cuatro páginas que más

utilizas.

 Crea una página web que muestre coniframes los dos buscadores que más

utilizas.

 Crea una página web que muestre coniframes las cuatro páginas que más

utilizas.

1.7

1.7 CAPAS

CAPAS

Una capa es una división o porción de una parte de una página web, que se puede colocar en cualquier lugar. Adicionalmente, pueden ocultarse, solaparse o sobreponerse capas, por lo que resulta un elemento muy atractivo para dotar a la web de dinamismo. Las capas se pueden insertar a través de las etiquetas<div> y<span>.

La principal diferencia es que<div> permite aplicar estilo a una parte más amplia de la página, además tiene un uso adicional que permite crear divisiones de la página, a la que posteriormente se le pueden aplicar unos atributos adicionales que modifican su comportamiento. Los principales atributos son:

 _id_id_{. Establece el nombre de la capa.}

 stylestyle. Establece las propiedades de estilo de la capa. Los principales propiedades son:

- leftleft y toptop. Establecen la posición de la capa con respecto a los márgenes izquierdo y superior. Como siempre se pueden aplicar en píxeles y porcentaje, asignándole el valor position.

- positionposition. Permite referenciar de manera absoluta la posición de la capa.

- z-indexz-index. Número de indexado de la capa. A mayor índice una capa se solapará sobre las demás.

- visibilityvisibility. Establece los valores de visibilidad de la capa, puede tomar los valores:inherit (hereda el valor del padre),visible (muestra la capa) yhidden

(oculta la capa).

En la figura 1.8, puede ver un ejemplo de uso, donde se van a crear tres capas de igual formato, superpuestas y escaladas. Para ello se crean tres capas, en este caso a través

(38)

de la etiqueta <div >, incluyendo en cada una de ellas una imagen. A continuación podemos ver el código del ejemplo.

<TITLE>_{Mi primera página con capas} </TITLE>

</HEAD> <BODY>

<div id="capa1" style="position:absolute; left:100;

top:100;width:200px; height:115px; z-index:1; visibility: visible;"> <img src="ojo.jpg" alt="imagen de prueba">

</div>

</BODY> </HTML>

(39)

En la figura 1.9, partiendo del ejemplo anterior se va a realizar una modificación para ocultar lacapa2. A continuación se puede ver el código.

<TITLE>_{Mi primera página con capas} </TITLE>

</HEAD> <BODY>

<div id="capa1" style="position:absolute; left:100;

top:100;width:200px; height:115px; z-index:1; visibility: visible;"> <img src="ojo.jpg" alt="imagen de prueba">

</div>

</BODY> </HTML>

(40)

 Crea una página web que utilice capas en la que muestre cinco fotografías

diferentes.

 Crea una página web que, utilizando capas, muestre un paisaje de fondo y

muestre dos fotos de animales en primer plano.

 Crea una página web que utilice capas en la que muestre cinco fotografías

diferentes.

 Crea una página web que, utilizando capas, muestre un paisaje de fondo y

muestre dos fotos de animales en primer plano.

1.8

1.8 RESUMEN

RESUMEN

Para finalizar, en la tabla 1.5 puede ver un resumen con las etiquetas HTML más utilizadas.

Tabla 1.5. Etiquetas HTML más utilizadas Tabla 1.5. Etiquetas HTML más utilizadas

<HEAD></HEAD> Definición cabecera.

<BODY></BODY> Definición del cuerpo.

<TITLE> </TITLE> Título de la página.

<!—esto es un comentario -->

<!—esto es un comentario --> Comentarios.

<A href="URL

<A href="URL a la que accede"> a la que accede"> ….. </A>….. </A> Creación de enlaces.

<IMG src="URL" alt="texto

<IMG src="URL" alt="texto alternativo">alternativo"> Inserción de imágenes.

    Espacio. <BR> <BR> Salto de línea. <P> <P> Párrafo. <HR> <HR> Línea horizontal. <b> </b> <b> </b> Negrita.

(41)

<i> ..</i> Cursiva.

<TT> .. </TT> Teletype.

<U> .. </U> Subrayado.

<S>.. </S> Tachado.

<SUP>.. </SUP> Superíndice.

<SUB>.. </SUB> Subíndice.

<DIV>.. </DIV> Capas.

<SPAN>.. </SPAN> Capas.

<LH> Título de la lista </LH> <LH> Título de la lista </LH> <LI> Elemento 1</LI> <LI> Elemento 1</LI> <LI> Elemento 2</LI> <LI> Elemento 2</LI> </UL>

</UL>

Lista sin numerar.

<LH> Título de la lista </LH> <LH> Título de la lista </LH> <LI> Elemento 1</LI> <LI> Elemento 1</LI> <LI> Elemento 2</LI> <LI> Elemento 2</LI> </OL> </OL> Listas numeradas. TABLE> TABLE> <TR> <TR> <TH> contenido de la celda </TH> <TH> contenido de la celda </TH> <TD> contenido de la celda </TD> <TD> contenido de la celda </TD> </TR> </TR> Tablas. <IFRAMES></IFRAMES>

<IFRAMES></IFRAMES> FramesFrames incustrados.

(42)



T

E

S

T

D

E

C

O

N

O

C

I

M

I

E

N

T

O

S



1.

1. ¿Qué etiqueta indica un salto de línea?

a) a) <br> b) b) <bl> c) c) <break> d) d) <ln> 2.

2. ¿Cuál es la forma correcta de introducir un comentario?

a) a) <!- -> b) b) <¡-- --!> c) c)  d) d) <--! --> 3.

3. ¿Cuál de las siguientes respuestas describe la forma correcta de insertar un enlace?

a)

a) <href targer="enlace.html">enlace< /href>

b)

b) <a href="enlace.html">< /a>

c)

c) </a href="enlace.html">

d)

d) <a href="enlace.html">enlace< /a>

4.

4. ¿Qué etiqueta se utiliza para definir un título de primer nivel?

a) a) <title> b) b) <super> c) c) <h1> d) d) <h6> 1.

1. ¿Qué etiqueta indica un salto de línea?

a) a) <br> b) b) <bl> c) c) <break> <ln> 2.

2. ¿Cuál es la forma correcta de introducir un comentario?

a) a) <!- -> <¡-- --!> c) c) < -- --> )) <--! --> 3.

3. ¿Cuál de las siguientes respuestas describe la forma correcta de insertar un enlace?

a)

a) <href targer="enlace.html">enlace< /href>

)) <a hre ="enlace.html">< a>

c)

c) </a href="enlace.html">

d)

d) <a href="enlace.html">enlace< /a>

4.

4. ¿Qué etiqueta se utiliza para definir un título de primer nivel?

a) a) <title> )) <super> c) c) <h1> d) d) <h6>

(43)

5.

5. Para abrir un enlace en una ventana nueva se debe utilizar la propiedad:

a) a) target="_blank" b) b) new c) c) blank d) d) target="_new" 5.

5. Para abrir un enlace en una ventana nueva se debe utilizar la propiedad:

a) a) target="_blank" b) b) new c) c) blank arget="_new



E

J

E

R

C

I

C

I

O

S

P

R

O

P

U

E

S

T

O

S

 1.

1. Diseña una página web que contenga los siguientes elementos: dos párrafos, una tabla y una lista no numerada.

2.

2. Diseña una página web que contenga cuatro frames, creando una página web para cada uno de ellos que responda a su cometido:

a)

a) Un frame superior a modo de banner , de anchura máxima y altura 150 píxeles.

b)

b)_{Uno inferior que se usará de pie de página con la mismas dimensiones del frame}

anterior.

c)

c) Un frame para menú con una anchura del de 250 píxeles.

d)

d) Un frame para contenidos que ocupe el resto de la página.

e)

e) Crea una página web que contenga una tabla con tu horario de clase.

f)

f) Crea una página web con dos iframes.

1.

1. Diseña una página web que contenga los siguientes elementos: dos párrafos, una tabla y una lista no numerada.

2.

2. Diseña una p gina web que contenga cuatro rames, creando una p gina web para cada uno de ellos que responda a su cometido:

a)

a) Un frame superior a modo de banner , de anchura m xima y altura 150 p xeles.

b)

b) Uno inferior que se usará de pie de página con la mismas dimensiones del frame anterior.

c

c Un frame para men con una anchura del de 250 p xeles.

d)

d) Un frame para contenidos que ocupe el resto de la página.

e)

e) Crea una página web que contenga una tabla con tu horario de clase.

f)

(44)

2

2 Capítulo

Capítulo

2 IMÁGENES Y ELEMENTOS MULTIMEDIA

IMÁGENES Y ELEMENTOS MULTIMEDIA

OBJETIVOS: OBJETIVOS:

 Conocer los diferentes elementos multimedia, sus características principales

y extensiones.

 Utilizar en las páginas web imágenes.  Utilizar imágenes para crear mapas.

 Utilizar vídeos y otros elementos como applet , flash, etc.

Sin duda alguna, los elementos multimedia han contribuido enormemente en hacer una web más amigable, atractiva y funcional. Existen un gran número de elementos multimedia que se pueden utilizar en las páginas web. Algunos de los elementos multimedia más importantes son: imágenes, sonido, vídeos, animacionesflash,applets, etc.

En este capítulo, primero se estudian las características más importantes de los diferentes elementos multimedia, y cómo utilizar dichos elementos en las páginas web.

2.1

2.1 ELEMENTOS MULTIMEDIA

ELEMENTOS MULTIMEDIA

2.1.1

2.1.1 Imágenes

Imágenes

A la hora de utilizar imágenes en una página web hay que tener en cuenta que no es posible utilizar cualquier formato de imagen. Por ejemplo, no es recomendable utilizar imágenes BMP porque no están comprimidas y por lo tanto hacen que la web sea más “pesada” para poderla visualizarla.

Los formatos de imágenes que se aconsejan utilizar son: JPEG ,GIF yPNG . Por otro lado, es recomendable adaptar el tamaño y la resolución de las imágenes que se van a utilizar en una página web. Bajo la premisa de que sólo va a ser vista en pantalla, por tanto hay que

(45)

adaptarlas a una resolución estándar (normalmente 800 x 600 píxeles). En caso de estar mal adaptadas provocaremos una página de mayor peso que tarda más tiempo en cargarse y resulta menos atractiva para el usuario.

A continuación se describen los distintos formatos, así como sus ventajas e inconvenientes:

 BMP (Windows bitmap).BMP (Windows bitmap). Es el formato más usado por las aplicaciones Windows, concretamente es el usado porMicrosoft Paint . Se caracteriza por representar la imagen por una matriz de píxeles donde cada píxel se codifica en función del color que representa. Por ejemplo, en una imagen en blanco y negro cada píxel esta codificado por 0 ó 1. El formato BMP es poco eficiente para utilizarse en páginas web ya que genera imágenes bastante pesadas.

 GIF (Compuserve GIF).GIF (Compuserve GIF). Es probablemente unos de los formatos gráficos más utilizados en Internet, tanto para imágenes como para animaciones. Es muy utilizado porque permite preservar la transparencia en imágenes. Es un formato sin pérdida de calidad para imágenes con una paleta de hasta 256 colores. Es decir, aunque permite elegir cualquier color para la imagen esta sólo puede contener 256 colores distintos.

 JPEG (Joint Phorographic Experts Group).JPEG (Joint Phorographic Experts Group). Es el estándar de compresión y codificación de archivos de imágenes fijas aunque ha sido adoptado como formato de archivo se utiliza normalmente para fotografías y gráficos. Como desventaja hay que destacar que no permite el fondo transparente.

 PNG (Portable Network Graphics).PNG (Portable Network Graphics). Es un formato gráfico basado en un algoritmo libre de compresión sin pérdida, que fue desarrollado para suplir las deficiencias del formatoGIF . Es un formato bastante interesante por la calidad de las imágenes, tamaño y por la capacidad de permitir el fondo transparente. Aunque su uso no está tan extendido como los otros formatos cada día se utiliza más, ya que ha sido recibido con una gran acogida.

2.1.2

2.1.2 Audio

Audio

Con la evolución de web, y la tendencia hacia una web interactiva cada día se necesitan de más contenidos multimedia entre ellos el audio, que se utiliza por ejemplo para reproducir una melodía de fondo, mientras el usuario navega por la web.

Existen distintos formatos de audio que se pueden clasificar en función de la compresión a la que ha sido sometida la grabación. Básicamente se pueden clasificar en tres grupos: