Tema 1B
Lenguaje HTML II
1
1. Listas
2. Tablas
3. Imágenes. Mapas de imágenes
4. Recursos multimedia. Videos y Sonido
5. Marcos
6. Formularios
7. Publicar la web
8. Accesibilidad
Indice
2
1. Listas
Tipos de listas
Listas marcadas
Listas numeradas
Listas de definiciones
Indice
3
1. Listas
Listas marcadas
•
•
•
•
Al comienzo de la lista se inserta la directiva <UL>
La lista se finaliza con </UL>
Cada elemento de la lista se comienza con <LI>
Tanto a UL como a LI podemos indicarle un tipo de
icono (disc,circle,square). Atributo type.
Indice
4
1. Listas
Listas numeradas
• Al comienzo de la lista se inserta la directiva
<OL>
• La lista se finaliza con </OL>
• Cada elemento de la lista se comienza con <LI>
• 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
5
Indice
1. Listas
Listas de definiciones
•
•
•
•
Al comienzo de la lista se inserta la directiva <DL>
La lista se finaliza con </DL>
El título de la definición se comienza con <DT>
Cada definición se comienza con <DD>
Indice
6
2. Tablas
Una tabla está delimitada por las directivas <TABLE> y </TABLE>.
La estructura general es:
<TABLE border="1">
<CAPTION>Título </CAPTION>
<TR><TH>Col1<TH>Col2<TH>Col3<TH>Col4
<TR><TD>Fila1Celda1<TD>F1C2<TD>F1C3<TD>F1C4
<TR><TD>F2C1<TD>F2C2<TD>F2C3<TD>F2C4
</TABLE>
Indice
7
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
align
especifica 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
Indice
8
2. Tablas
Más atributos de TABLE:
Cellspacing
Cellpadding
Indice
9
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.
Indice
10
2. Tablas
El código para conseguir la tabla anterior es:
<TABLE border="1">
<CAPTION>Tazas de café consumidas por cada senador </CAPTION>
<TR><TH>Nombre<TH>Tazas<TH>Tipo de Café<TH>¿Azúcar?
<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No
<TR><TD>J. Dinnen<TD>5<TD>Descafeinado<TD>Sí
<TR><TD>A. Soria<TD colspan="3">No disponible
</TABLE>
Indice
11
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.
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.
Indice
13
3. Imágenes
La directiva <img> 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
Indice
14
3. Imágenes
Ejercicio: indica qué hacen los siguientes ejemplos :
<img src=imagen.jpg alt=“Cabecera de la página”>
<img src=flores.jpg height=100 width=200>
<img src=flores.jpg border=10>
Indice
15
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.
Indice
16
3. Imágenes. Mapas de imágenes
Podemos definir tres tipos de área:
rectangular
circular
poligonal
Indice
17
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
Indice
18
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,…
Indice
19
3. Imágenes. Mapas de imágenes
Para crear las distintas áreas se utilizan las etiquetas
<MAP> y <AREA>
Para cada área se crea una directiva <AREA> dentro de
una <MAP>
<MAP…>
<AREA …>
<AREA …>
</MAP
Indice
20
3. Imágenes. Mapas de imágenes
Pasos para la creación. Paso 1.
Crear la definición del mapa de imagen
<MAP
name=mapaAndalucia>
<AREA
href=almeria.html
shape=poly
coords="309,157,362,88,382,119,363,157">
<AREA
…
</MAP>
Indice
href=cadiz.html …..
21
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:
<img src=andalucia.jpg usemap=#mapaAndalucia>
Indice
22
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
Indice
23
3. Imágenes. Mapas de imágenes
Definimos el mapa
<MAP name=mapa>
<AREA href="inicio.html" target="contenidos" shape="rect"
coords="14,9,153,32">
<AREA href="alumnos.html" target="contenidos"
shape="rect" coords="193,9,332,32">
<AREA href="profesores.html" target="contenidos"
shape="rect" coords="372,9,513,32">
<AREA href="delegados.html" target="contenidos"
shape="rect" coords="549,9,690,32">
</MAP>
Indice
24
3. Imágenes. Mapas de imágenes
Creamos el enlace
<IMG src="menu.jpg" border=0 usemap=#mapa>
Indice
25
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
Indice
26
3. Imágenes. Mapas de imágenes
Página de interés:
http://platea.cnice.mecd.es/~jmas/manual/html/mapas_
de_imagen.html
Indice
27
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.
Indice
28
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:
<bgsound src="ruta_fichero" >
Indice
29
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:
<embed src=“ruta_fichero”>
Para que comience automáticamente la reproducción utilizamos el
atributo “autostart=true”
Esta etiqueta es utilizada también para incluir otros
objetos.
Indice
30
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.
<embed src=“archivo de video”>
Indice
31
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.
Indice
32
5. Marcos
Para crear una página con marcos utilizaremos la
etiqueta <frameset>, 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, <frameset> sustituye a
<body> y tiene dos atributos principales:
rows: las filas en que dividimos la página
<frameset rows=“200,*”>
cols: las columnas en que dividimos la página
<frameset cols=“50%,*”>
Indice
33
5. Marcos
Dentro de <frameset> utilizaremos la etiqueta
<frame>, que definirá lo que se visualizará en cada
marco creado con frameset. Por ejemplo:
<frame src="cabecera.htm" name="menu">
El nombre que demos al marco nos servirá para
referenciarlo cuando queramos que una página de un
enlace se muestre en él.
Indice
34
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:
<FORM >
(Aquí metemos los elementos del formulario)
</FORM>
Indice
35
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.
Indice
36
6. Formularios
Ejemplos de elementos de un formulario. Etiqueta input
Cuadro de texto:
<input type=text name=apellidos>
Cuadro de texto para contraseña:
<input type=password name=clave>
Cuadro de validación:
<input type=checkbox name=reparada checked>
Botón radio:
<input type=radio name=nombre value=1>
Botón de aceptar:
<input
type=submit value=enviar>
Botón de reset:
<input
type=reset
value=limpiar>
Campo oculto:
<input type=hidden name=plato>
Indice
37
6. Formularios
Ejemplos de elementos de un formulario. Otras etiquetas
Lista desplegable:
<select name=lista size=2 multiple>
<option value=valor1>elemento1</option>
<option value=valor2>elemento2</option>
…
<option value=valorn>elementon</option>
</select>
Area de texto:
<textarea cols=100 rows=10 name=nombre>
Indice
38
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
Indice
39
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
Indice
40
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.
Indice
41
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.).
Indice
42
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.
Indice
Existen herramientas de evaluación que
43
ayudan a realizar evaluaciones de accesibilidad
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.
Indice
44
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#
Indice
45
Descargar

Diapositiva 1