1 Tema 1B Lenguaje HTML II. Indice 2 1.ListasListas 2.TablasTablas 3.Imágenes. Mapas de imágenesImágenes. Mapas de imágenes 4.Recursos multimedia. Videos.

Presentación del tema: "1 Tema 1B Lenguaje HTML II. Indice 2 1.ListasListas 2.TablasTablas 3.Imágenes. Mapas de imágenesImágenes. Mapas de imágenes 4.Recursos multimedia. Videos."— Transcripción de la presentación:

1 1 Tema 1B Lenguaje HTML II

2 Indice 2 1.ListasListas 2.TablasTablas 3.Imágenes. Mapas de imágenesImágenes. Mapas de imágenes 4.Recursos multimedia. Videos y SonidoRecursos multimedia. Videos y Sonido 5.MarcosMarcos 6.FormulariosFormularios 7.Publicar la webPublicar la web 8. Accesibilidad Accesibilidad

3 Indice 3 1. Listas Tipos de listas Listas marcadas Listas numeradas Listas de definiciones

4 Indice 4 1. Listas Listas marcadas Al comienzo de la lista se inserta la directiva La lista se finaliza con Cada elemento de la lista se comienza con Tanto a UL como a LI podemos indicarle un tipo de icono (disc,circle,square). Atributo type.

5 Indice 5 1. Listas Listas numeradas Al comienzo de la lista se inserta la directiva La lista se finaliza con Cada elemento de la lista se comienza con Tanto a UL como a LI podemos indicarle un tipo de numeración (1,A,aI,i) Con el atributo start podemos hacer que la lista no comience en el primer elemento. Se expresa siempre en números. Con value indicamos un valor concreto para un elemento

6 Indice 6 1. Listas Listas de definiciones Al comienzo de la lista se inserta la directiva La lista se finaliza con El título de la definición se comienza con Cada definición se comienza con

7 Indice 7 2. Tablas Una tabla está delimitada por las directivas y. La estructura general es: Título Col1 Col2 Col3 Col4 Fila1Celda1 F1C2 F1C3 F1C4 F2C1 F2C2 F2C3 F2C4

8 Indice 8 2. Tablas Algunos atributos de TABLE: Summary Este atributo facilita un resumen del propósito y la estructura de la tabla en medios no visuales como voz o Braille alignespecifica la posición de la tabla con respecto al documento. Width Este atributo especifica la anchura deseada de la tabla enter Frame Este atributo especifica qué lados del marco que rodea a una tabla serán visibles rules Este atributo especifica qué líneas de división aparecerán entre las celdas de una tabla. La representación de las líneas de división depende del agente de usuario Border Este atributo especifica la anchura (en píxeles) del marco que rodea a una tabla bordercolor color del borde de la tabla bgcolor color de fondo de la tabla background imagen de fondo

9 Indice 9 2. Tablas Más atributos de TABLE: Cellspacing Cellpadding

10 Indice 10 2. Tablas Las celdas pueden abarcar varias filas o columnas. El número de filas o de columnas abarcado por una celda se establece con los atributos rowspan y colspan.

11 Indice 11 2. Tablas El código para conseguir la tabla anterior es: Tazas de café consumidas por cada senador Nombre Tazas Tipo de Café ¿Azúcar? T. Sexton 10 Espresso No J. Dinnen 5 Descafeinado Sí A. Soria No disponible

12 Indice 12 2. Tablas Las tablas no solo sirven para generar tablas clásicas. En un documento HTML podemos organizar la información que queremos disponer en nuestra página Web mediante tablas. En las celdas no solo podemos colocar texto, también podemos colocar imágenes o cualquier elemento HTML.

13 Indice 13 2. Tablas Las tablas no solo sirven para generar tablas clásicas. En un documento HTML podemos organizar la información que queremos disponer en nuestra página Web mediante tablas. En las celdas no solo podemos colocar texto, también podemos colocar imágenes o cualquier elemento HTML.

14 Indice 14 3. Imágenes La directiva nos permite añadir imágenes en nuestras páginas mediante el atributo src Podemos indicar un texto alternativo que mostrará cuando no se cargue la imagen

15 Indice 15 3. Imágenes Ejercicio: indica qué hacen los siguientes ejemplos :

16 Indice 16 3. Imágenes. Mapas de imágenes Un mapa de imagen es una imagen cualquiera de nuestra página en la que definiremos una serie de áreas que actuarán como enlaces normales de html.

17 Indice 17 3. Imágenes. Mapas de imágenes Podemos definir tres tipos de área: rectangular circular poligonal

18 Indice 18 3. Imágenes. Mapas de imágenes Para definir cada área debemos darle las coordenadas que la delimitan: Para el área rectangular hay que indicar las coordenadas de dos vértices extremo Para el área circular hay que indicar las coordenadas del centro y su radio Para el área poligonal hay que indicar las coordenadas de cada uno de sus vértices, tantos como queramos que tenga

19 Indice 19 3. Imágenes. Mapas de imágenes Para averiguar las coordenadas de un punto se puede utilizar un programa de edición gráfica como PAINT, PHOTOSHOP,…

20 Indice 20 3. Imágenes. Mapas de imágenes Para crear las distintas áreas se utilizan las etiquetas y Para cada área se crea una directiva dentro de una </MAP

21 Indice 21 3. Imágenes. Mapas de imágenes Pasos para la creación. Paso 1. Crear la definición del mapa de imagen <AREA href=cadiz.html ….. …

22 Indice 22 3. Imágenes. Mapas de imágenes Pasos para la creación. Paso 2. Indicar a la directiva IMG dónde está la definición del mapa:

23 Indice 23 3. Imágenes. Mapas de imágenes Ejemplo Hemos diseñado un menú para una página mediante un programa de diseño gráfico y la hemos guardado como imagen jpg. Mediante el mismo programa hemos calculado las coordenadas correspondientes a cada botón: boton1: 14, 9, 153, 32 boton2: 193, 9, 332, 32 boton3: 372, 9, 513, 32 boton4: 549, 9, 690, 32

24 Indice 24 3. Imágenes. Mapas de imágenes Definimos el mapa

25 Indice 25 3. Imágenes. Mapas de imágenes Creamos el enlace

26 Indice 26 3. Imágenes. Mapas de imágenes Ejercicio: Partiendo de un fichero que contiene el plano de una vivienda crear enlaces diferentes para cada una de las habitaciones. Al pinchar en una habitación debe saltar a una página donde aparecería la información de dicha habitación resultado

27 Indice 27 3. Imágenes. Mapas de imágenes Página de interés: http://platea.cnice.mecd.es/~jmas/manual/html/mapas_ de_imagen.html

28 Indice 28 4. Recursos multimedia. Videos y sonido Existen diversas formas de incluir un fichero de audio en una página, formas que dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas para cada una de ellas.

29 Indice 29 4. Recursos multimedia. Videos y sonido BGSOUND La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por Internet Explorer. Su sintaxis básica, es la siguiente:

30 Indice 30 4. Recursos multimedia. Videos y sonido EMBED Fue creada por Netscape, pero adoptada por Microsoft. Esta etiqueta nos va a incluir en la página web un objeto especial, una especie de consola de mando, aunque se puede ocultar con el atributo “hidden=true”. La sintaxis es: Para que comience automáticamente la reproducción utilizamos el atributo “autostart=true” Esta etiqueta es utilizada también para incluir otros objetos.

31 Indice 31 4. Recursos multimedia. Videos y sonido EMBED Esta etiqueta también nos permitirá insertar un video y, al igual que con el sonido, va acompañada del atributo “src", que indica la ruta donde se encuentra el archivo que contiene el video a insertar.

32 Indice 32 5. Marcos Los marcos (frames en inglés) permiten dividir una página web en zonas independientes unas de otras. Así, podremos “cargar” una zona de la página mientras la otra permanece inamovible. Son muy utilizados para dejar un menú de navegación en una zona estática, mientras que la información se va “cargando” en la otra zona de la página.

33 Indice 33 5. Marcos Para crear una página con marcos utilizaremos la etiqueta, cuya función es dividir el navegador en varios trozos que mostrarán distintas páginas webs simultáneamente. En una página con marcos, sustituye a y tiene dos atributos principales: rows: las filas en que dividimos la página cols: las columnas en que dividimos la página

34 Indice 34 5. Marcos Dentro de utilizaremos la etiqueta, que definirá lo que se visualizará en cada marco creado con frameset. Por ejemplo: El nombre que demos al marco nos servirá para referenciarlo cuando queramos que una página de un enlace se muestre en él.

35 Indice 35 6. Formularios Un formulario es una herramienta que se utiliza para recoger información introducida por el usuario para su posterior procesamiento. HTML no puede, procesar la información por lo que habrá que recurrir a otras herramientas como PHP, ASP,… La etiqueta que nos permite insertar un formulario en html es FORM. La sintaxis es la siguiente: (Aquí metemos los elementos del formulario)

36 Indice 36 6. Formularios Los atributos principales de la etiqueta FORM son los siguientes: action: indica al navegador que debe hacer con la información cuando se pulse el botón de envío. Se puede pasar a otra página o bien mandarlos por correo con mailto:direccion_correo name: indica el nombre del formulario method: indica al navegador la forma de enviar los datos. Si utilizamos GET, los valores serán visibles en la barra de direcciones. Si utilizamos POST será transparente al usuario.

37 Indice 37 6. Formularios Ejemplos de elementos de un formulario. Etiqueta input Cuadro de texto: Cuadro de texto para contraseña: Cuadro de validación: Botón radio: Botón de aceptar: Botón de reset: Campo oculto:

38 Indice 38 6. Formularios Ejemplos de elementos de un formulario. Otras etiquetas Lista desplegable: elemento1 elemento2 … elementon Area de texto:

39 Indice 39 7. Publicar la web Para que la página que estamos creando sea visible en toda Internet, es necesario que esté alojada en un servidor web. Existen varias posibilidades: Alojarla en un servidor web externo Crear nuestro propio servidor web

40 Indice 40 7. Publicar la web Para subir la página a un servidor web, necesitaremos tres datos: Nombre del servidor o dirección IP Nombre de usuario Contraseña Estos datos debe facilitárnoslos el servidor, así como la dirección URL para poder visualizar nuestra página una vez subida

41 Indice 41 7. Publicar la web Cuando dispongamos de estos datos, instalaremos un programa de FTP (del tipo WS_FTP) y lo configuraremos con dichos datos. Una vez configurado realizaremos una conexión con el servidor. En la mayoría de los programas de FTP aparecen dos ventanas de archivos, una del servidor y otra local. Para subir los archivos bastará con arrastrarlos hasta el servidor.

42 Indice 42 8. Accesibilidad Nos referimos a un acceso universal a la web independiente de hardware, software, idioma, localización geográfica, cultura y capacidades de los usuarios. WAI (Web Accessibility Initiative) es una iniciativa cuyo objetivo es facilitar el acceso de las personas con discapacidad. Partiendo de esta idea, una página accesible lo será tanto para una persona con discapacidad, como para cualquier otra persona que se encuentre bajo circunstancias externas que dificulten su acceso a la información (en caso de ruidos externos, en situaciones donde nuestra atención visual y auditiva no estén disponibles, etc.).

43 Indice 43 8. Accesibilidad Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG), cuya función principal es guiar el diseño de páginas Web hacia un diseño accesible, reduciendo de esta forma barreras a la información. WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes en las que el diseño de una página puede producir problemas de acceso a la información. Las Pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores. Existen herramientas de evaluación que ayudan a realizar evaluaciones de accesibilidad

44 Indice 44 8. Accesibilidad CONSEJOS PARA CREAR SITIOS WEBS ACCESIBLES: Imágenes y animaciones: Use el atributo alt para describir la función de cada elemento visual. Multimedia: Proporcione subtítulos y transcripción del sonido, y descripción del vídeo. Enlaces de hipertexto: Use texto que tenga sentido leído fuera de contexto. Por ejemplo, evite "pincha aquí". Figuras y diagramas: Descríbalos brevemente en la pagina o use el atributo longdesc. Marcos: Use el elemento noframes y títulos con sentido.

45 Indice 45 8. Accesibilidad Para más información sobre este tema: http://www.w3c.es/divulgacion/guiasbreves/Accesibilidad http://www.w3c.es/Traducciones/es/WAI/intro/accessibility http://www.albinoblacksheep.com/flash/blind.php#