Embed Size (px)
Citation preview
Tema 1Lenguaje de Marcas HTML
Introducción►HTML: Lenguaje de marcas.►Te permitirá realizar tus páginas web:
Editor de textos ASCII (código fuente) Navegador Web (visualizar página)
►Extensión .html .htm
►Editores HTML
Editores HTML ► WYSIWYG (What Yout See Is What You Get). Lo que ves es lo que obtienes.► Algunos ejemplos:
WYSIWYG (What Yout See Is What You Get). Lo que ves es lo que obtienes.
Dreamweaver BlueGriffon (software libre) KompoZer Aptana Amaya
► Páginas web más profesionales.► Genera el etiquetas HTML y reglas de estilo CSS
automáticamente.► Funciones orientadas a la creación y mantenimiento de páginas
Web.
BlueGriffon
Adobe DreamWeaver
Publicar web en Internet►Necesitamos un servidor de páginas Web donde
alojarlas.►Servidor Web: Software que reside en un ordenador
que está permanentemente conectado a Internet► Tenemos dos opciones
Montar nosotros un servidor Web. (cambiar Router) Contratar Web Hosting (alojamiento web):
►De pago o gratuitos.►Espacio para publicar nuestra Web.
►Al colocar páginas web en el servidor, esta se hacen accesibles para todos los usuarios de su misma red.
1. Definiciones Básicas►HTML (Hyper Text Markup Language):
Lenguaje de marcado de hipertexto Utiliza etiquetas como marcas para delimitar el contenido,
formato y estructura de los distintos elementos que va a contener la página web.
Son interpretadas y visualizadas a través de los navegadores de Internet (Clientes web: Firefox, Internet Explorer, Chrome, etc.).
Contiene: encabezados, textos, tablas, listas, fotos, etc. Enlaces de hipertexto. Clic de ratón. Formularios:
►Por ejemplo para rellenar datos para buscar algo, reservar evento o viaje, pedir un producto, etc.
►HTML no puede procesar dichos datos. Necesitamos otro lenguaje como PHP, JSP, etc.
1. Definiciones Básicas►Navegadores y HTML 5
Los actuales navegadores ya están diseñados para manejar la mayoría de las funcionalidades, pero no todas.
Para saber que características soporta: http://www.html5test.com
Comprobar si el código cumple las reglas: http://validator.w3.org
1. Definiciones Básicas
►Consorcio W3C World Wide Web Consortium Organismo internacional para desarrollar
reglas y convenciones estándares para la red informática mundial.
Liderado por el creador de la Web, Tim Berners-Lee.
Misión: guiar la Web hacia su máximo potencial.
1. Definiciones Básicas► SGML
Standard Generalized Markup Language Tecnología estandar (ISO 8879) Sirve para definir lenguajes de marcado generalizado que
permitan organizar con etiquetas los documentos. A partir de este se crea el HTML como versión simplificada. Se basa en dos postulados:
►El marcado debe ser declarativo, es decir debe describir la estructura de un documento y otros atributos.
►El marcado debe ser riguroso, para que otros programas, bases de datos etc. Puedan procesar estos documentos.
► DTD Document Type Definition Documento SGML que contiene las reglas sintácticas que
definen un tipo de documento específico. Contiene los elementos permitidos, sus atributos, los valores
de estos y reglas de anidación. Si se contrasta un documento con su DTD se valida
1. Definiciones Básicas► XML
eXtensible Markup Language Lenguaje de marcas extensible Metalenguaje Definido por W3C Derivado del SGML pero más adecuado a la web Representa información estructurada de documentos, datos,
configuración, libros, transacciones, facturas, etc. Los nombres de las etiquetas de elementos y de los atributos
tienen que estar en minúscula Los valores de los atributos tienen que estar entre comillas
dobles o simples. Todos los elementos tienen que estar cerrados
►Con contenido <p> … </p>► Sin contenido <br />
Los elementos deben de estar correctamente anidados Se debe incluir una definición (DTD) de tipo de documento
1. Definiciones Básicas► XHTML
eXtensible HyperText Markup Language Variante más restrictiva y ordenada del HTML. Es una aplicación de la sintaxis de XML Se consideró inicialmente como sustituto de HTML, pero en la
práctica no fue así, dado que diferencias con los fabricantes de los navegadores hizo que HTML siguiera usándose manteniendo una continua evolución.
Tiene prácticamente los mismos elementos que HTML pero los elementos se estructuran más coherentemente.
Al cumplir las normas XML puede utilizar herramientas comunes.
Una de las mejoras que aportó fue la separación contenido/formato que luego se ha incorporado a versiones posteriores de HTML e incluos a otros lenguajes.
2. Estándares y versiones►HTML se convirtió en un estandar en
1995►En los últimos años la versión
recomendada por W3C era HTML 4.01►Al diseñar una web conviene
especificar la versión en la primera línea y el DTD, para que el navegador sepa interpretarla.
►Etiqueta <!DOCTYPE>
2. Estándares y versiones► Existen tres variantes de DTD:
HTML Strict: No se pueden usar las etiquetas obsoletas.►<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>►<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> HTML Transitional: Mezcla de todos los HTML, acepta
etiquetas obsoletas. Está pensado para los que no se atreven a usar el Strict, pero les gustaría hacerlo en el futuro.►<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>►<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> HTML Frameset: Lo mismo que el Transitional pero
añadiendo marcos (frames), actualmente obsoleto.►<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>►<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
2. Estándares y versionesHTML5
► La última versión de HTML es HTML5 para la cual el W3C está preparando el futuro estándar de referencia.
► Ya está implementada en las últimas versiones de los navegadores más populares.
► Es muy utilizada por los avances, mejoras y ventajas: Herramientas gráficas de geolocalización Nuevos formularios Gráficos Animación, etc.
► Muy compatible con XHTML y HTML 4► No se define una DTD. Sólo hay que poner:
<!DOCTYPE html>
3. Normas fundamentales►Etiquetas
Marcas que definen los elementos que conforman el léxico del lenguaje.
Delimitan por los signos < y > Dos tipos
►Etiquetas cerradas: etiqueta de apertura <p> y etiqueta de cierre </p>
►Etiquetas abiertas: no hay etiqueta de cierre.
<hr>, <br>, <img>, <imput> XHTML: <hr />, <br />, <img />, <imput /
<hr>, <br>, <img>, <imput>
3. Normas fundamentales► Atributos
Las etiquetas pueden contener atributos o no. Son las características que les queremos dar a la etiqueta
concreta. Van detrás del nombre de la etiqueta, separada por un
espacio en blanco y antes de cerrar la etiqueta con > Nunca van en las etiquetas de cierre. Para asignar un valor concreto al atributo se pone = y el
valor entre comillas Ejemplo: <imput type=“text” name=“nombre”> Lo de las comillas no es obligatorio, pero se recomienda El nombre de las etiquetas y atributos pueden ir en
minúscula o mayúscula, pero se recomienda en minúscula.
3. Normas fundamentales►Comentarios
Líneas de texto que no son interpretadas por el navegador y no se visualizan.
Permiten aclaraciones sobre el código fuente Muy útiles para futuras revisiones y
modificaciones <!-- Esto es un comentario sobre mi web -->
►Se recomienda seguir estas normas básicas para HTML5 para que sea compatible con XHTML y versiones antiguas de HTML
3. Normas fundamentales►Comentarios
Líneas de texto que no son interpretadas por el navegador y no se visualizan.
Permiten aclaraciones sobre el código fuente Muy útiles para futuras revisiones y
modificaciones <!-- Esto es un comentario sobre mi web -->
►Se recomienda seguir estas normas básicas para HTML5 para que sea compatible con XHTML y versiones antiguas de HTML
3. Normas fundamentales► Agrupación de elementos
Elementos que no se visualizan Agrupa a otros elementos para darles un significado
semántico. Permite a los navegadore y buscadores usarlos en
contextos muy distintos. En la versión 4.01 se estructura el documento dividiéndolo
con etiquetas <div id=“header, nav, footer, etc.”> para dar idea del contenido de dichas divisiones.
Etiquetas nuevas HTML5: article, aside, header, footer, nav, figure, dialog, section, hgroup, video, audio, embed, mark, progress, meter, time, canvas, ommand, details, output, input.
4. Estructura básica►Etiquetas Fundamentales de toda pág.
Web<html>
<head><title></title>
</head><body></body>
</html>
Práctica 11. Crear una página Web de prueba con
el Bloc de notas donde sólo aparezca vuestro nombre completo.
2. Nombrarla como practica1.html3. Instalar Notepad++ y comprueba las
diferencias.
Práctica 21. Instalar WampServer2. Para publicar una web habrá que
guardarla en el directorio C:\wamp\www.
3. Publicar la página de prueba creada en la práctica 1.
4. Acceder a las páginas del compañero poniendo la IP y el nombre de la página web en la barra de direcciones del navegador.
4. Estructura básica► Nuevas etiquetas de HTML 5
Se basan en la investigación y análisis de muchas páginas web, basándose en prácticas predominantes utilizadas por los autores, prestando especial atención a la definición de criterios claros e intentando mejorar la interoperabilidad entre navegadores y motores de búsqueda.
Permite definir los contenidos agrupando elementos con nuevas etiquetas, utilizando nombres que tienen un significado relacionado con la estructura de la página.
<header>: encabezado de página. <nav>: enlaces de navegación <article>: artículo pueblicado <section>: sección dentro de un artículo o documento. <aside>: barra lateral. <footer>: pie de página. <dialog>: diálogos y comentarios. Mantiene las etiquetas <div> y <span> pero sólo para los estilos CSS
4. Estructura básica►HTML5 Cambia la funcionaldidad e
algunos elementos (etiquetas)►Agunas etiquetas desaparecen:
Por ser aplicados de mejor manera con CSS Por no favorecer la usabilidad y la
accesibilidad (por ejemplo los frames o marcos)
Por haber sido reemplazados por otros Por provocar ambigüedad o confusión
4. Estructura básica► Anidación de elementos (etiquetas)
Un elemnto HTML puede contener a otros. Las etiquetas anidadas deben estar bien “balanceadas”, es
decir, si se abren en un orden determinado, deben cerrar en el orden inverso al de apertura. Esto lo hace compatible con XHTML.
Las etiquetas deben estar tabuladas. Para la mejor comprensión del código fuente.
<body><h1> Ejemplo incorrecto </body></h1>
<body><h1> Ejemplo correcto </h1>
</body>
4. Estructura básica► Estructura de directorios
Antes de crear una página web es conveniente planificar su diseño y ordenar la información y los recursos que se pretende ofrecer
Generar una estructura de directorios que almacene de manera coherente y ordenada todos los ficheros que contengan las imágenes, sonidos, vídeos, o cualquier otro tipo de contenido de la página web
Cabecera del documento <head></head>
<title> Título de la barra superior del navegador Las etiquetas meta suelen incorporar dos parámetros, el tipo de etiqueta
(que suele ser name) y el contenido (con el parámetro content). <meta> Para indicar a los buscadores de Internet el contenido de la
página y que lo incluyan en sus bases de datos.► <meta name=“description” content=“Página personal de Javi con sus gustos y
aficiones”>► <meta name=“keywords” content=“deportes cine música actualidad”>
<meta> Para redireccionar o refrescar► <meta http-equiv=“refresh” content=“15” url=“http://www.google.es”>
Transcurridos 15 segundos se accederá a google► <meta http-equiv=“refresh” content=“15”> Transcurridos 15 se referesca
<meta> Para indicar la codificación de caracteres a utilizar► <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base> Permite indicar la URL base de los documentos, gráficos, sonidos, etc., a los que se hace referencia en la página web. Si no se incluye esta directiva, el navegador entiende que dichos elementos se encuentran en el mismo directorio donde se encuentran los ficheros con extensión .htm o .html que componen la página web.► <base href=“http://www. mipagina.es/recursos/”>
Práctica 3►Crea una nueva página web con título “Práctica3.
Etiqueta meta” y prueba las siguientes etiquetas: <meta name=“description” content=“Página personal
de Javi con sus gustos y aficiones”> <meta name=“keywords” content=“deportes cine
música actualidad”> <meta http-equiv=“refresh”
content=“15;url=http://www.google.es”> Transcurridos 15 segundos se accederá a google
<meta http-equiv=“refresh” content=“15”> Transcurridos 15 se referesca
Práctica 4
4. Estructura básica►Fondo HTML 4.01
BGCOLOR (color de fondo) BACKGROUND (imagen de fondo) BGPROPERTIES (dejar la imagen fija)
<body background="imagen.gif" bgproperties=“fixed”> Página con fondo fijo </body>
<body bgcolor=“#00FF00”> Página con fondo verde </body>
5. Colores► Código RGB (Red, Green y Blue)
Hexadecimal #RRVVAA Decimal rgb(255,255,255) Nombre en inglés entre comillas
► http://es.wikipedia.org/wiki/Colores_html► Colores seguros
Se muestran de igual manera en todos los navegadores y en todos los sistemas operativos de cualquier dispositivo.
Existen 216 Se recomienda para que la visualización sea idéntica en
todos los dispositivos, tanto en los que no puedan soportar millones de colores, como en los que tengan el valor predeterminado de 256 colores.
Práctica 5► Crea una página con el fondo rojo. Ponle el color de las tres formas
posibles.<body bgcolor=“#00FF00”>
<p>Página con fondo verde </p></body>
► Crea una página con una imagen de fondo.<body background="imagen.gif" bgproperties=“fixed”> <p>Página
con fondo fijo </p></body>
El texto del párrafo anterior “Página con fondo fijo” repítelo varias veces para que no quepa en una sola pantalla y se active la barra de desplazamiento vertical (ctr+c y ctr+v para copiar y pegar).
Prueba la página quitando y poniendo la propiedad bgproperties=“fixed” para ver la diferencia.
6. Espaciados, saltos de línea, párrafos y caracteres
especiales► HTML sólo reconoce un
espacio entre palabra y palabra. Tampoco reconoce tabulaciones y retornos de carro.
► <pre></pre> obliga al navegador a visualizar el texto respetando tabulaciones, espacios y retornos de carro, tal como se escribe.
Práctica 6
Práctica 7
Práctica 8. Cabeceras
8. Semántica en textos►Versión 4.01 html
<center></center> <font></font> Atributos:
►Size (tamaño)►Color►Face (Tipo de letra)
<font face=“arial, helvetica, lucida sans“ size=“6” color=“yellow”>tipo de letra</font>
Práctica 9. Semántica en textos
8. Semántica en textos►HTML 5
Etiquetas para dar un estilo de letra especial a un fragmento de texto
La diferencia es el tipo de letra <cite>, <em>, <dfn>, <strong>, <code>,
<samp>, <kbd> y <var>.►Ejemplo. Etiquetas anidadas, se cierran
en orden inverso:...<b><i><u>Texto en negrita, itálica y
subrayado</u></i></b>
Práctica 10►Escriba una página, a partir de la
anterior, cuyo texto sea: El texto puede estar en negrita, itálica o subrayado, incluso en negrita, itálica y subrayado.
9. Listas de elementos
El atributo value de la etiqueta <li></li> para listas numeradas <ol></ol> obliga a que un elemento sea un número concreto. Ejemplo <li value=“3”>
9. Listas de elementos
<ul type=“square”><li>Inicio</li><li>Noticias</li><li>Artículos</li><li>Contacto</li>
</ul>
<ol type=“A”><li start=“C”>Escuchar</li><li>Anotar</li><li value=“F”>Realizar</li><li>Finalizar</li>
</ol>
Práctica 11► Haga una Lista de la compra, lista de la compra. Construya una lista no numerada del estilo:
• Lechuga.• Filetes de pollo.• Manzanas.• Queso de oveja.
► Haga una receta de cocina. Construya una lista numerada del estilo: Receta de una tarta de manzana: 1. Hacer la masa y dejarla reposar. 2. Pelar, lavar y cortar las manzanas. 3. Estirar la masa sobre la bandeja, colocar encima las manzanas y añadir mermelada. 4. Meter al horno hasta que se haga.
► Construya una lista de definiciones según el patrón:• Aserción: afirmación de alguna cosa.• Aserradero: sitio donde sierran la madera, piedra u otra cosa.
► Cambie el icono de la lista no numerada antes realizada y pruebe con los tres tipos para ver su aspecto. Cambie el icono de la lista numerada antes realizada y pruebe con los cinco tipos para ver su aspecto.
► Ponga un icono distinto para cada elemento de las listas anteriormente definidas.
► Haga que la lista numerada anterior empiece en 5 y que a mitad de lista salte varios números entre dos elementos.
10. Imágenes
10. Imágenes
Práctica 12►Crea una página web nueva e introduce una
imagen que previamente te hayas descargado de internet. Incluye el atributo alt con un mensaje y comprueba, abriendo la página con distintos navegadores, si al situar el ratón sobre la imagen, sin hacer clic, aparece el mensaje del alt.
► Introduce una segunda imagen utilizando las etiquetas <figure></figure> y <figcaption></figcaption>
11. Vínculos o hiperenlaces
11. Vínculos o hiperenlaces
Práctica 13►Crea una página nueva con tres
enaces: Uno con el texto Google que enlace a la
página www.googl.es y el atributo target=“_self”, prueba a quitar el atributo y comprueba que hace exactamente lo mismo, ya que la opción por defecto es esa.
Otro enlace idéntico al anterior con el atributo target=“_blank”. Observar la diferencia con el anterior.
Otro enlace con el logotipo de Google que enlace también a www.google.es.
11. Vínculos o hiperenlaces
Práctica 14► Crea una carpeta llamada practica14► Dentro crea dos subcarpetas: apartado1 y partado2► En cada carpeta introduce una página web con el texto
“Apartado1” o “Apartado2” dentro de la etiqueta <h1> (encabezado de nivel 1). Nómbralas como apartado1.htm y apartado2.htm.
► Dentro de la carpeta practica14 crea una página web llamada practica14.htm que contenga la etiqueta <nav> y una lista no numerada como la de la diapositiva anterior con dos enlaces: Uno que enlace con apartado1.htm El otro con apartado2.html
► Ahora en las páginas apartado1.htm y apartado2.htm crea un enlace que se llame Inicio y que nos lleve de nuevo a practica14.htm
11. Vínculos o hiperenlaces
Práctica 15► Crea una carpeta practica15► Crea dos subcarpetas “Archivos compridos” e
“Imágenes”► Crea varios archivos txt y comprímelos en un rar dentro
de la carpeta “Archivos comprimidos”► Guarda un imagen en la carpeta Imágenes► Crea una web en la carpeta practica15 llamada
practica15.htm con dos enlaces: Uno al archivo comprimido Otro a la imagen
► Prueba la web para ver como se abren al pinchar sobre los enlaces.
11. Anclas o Vínculos Internos
<a href=“pagina.html#marca”>
Si es un enlace dentro de la misma página sólo se pone #marca
11. Anclas. Ejemplo
CLIC
Práctica 16►Elije un tema de wikipedia, y como en el
ejemplo anterior, enlaza el índice del principio con cada apartado del documento usando anclas.
►El documento debe tener al menos dos niveles, como en el ejemplo.
►En el texto pon los enunciados con cabeceras: Nivel 1: <h1>…</h1> Nivel 2: <h2>…</h2>
11. Mapas. Imagen con enlaces
► Un caso especial de imágenes y enlaces es la combinación de ambos para usar imágenes como mapas sensibles al ratón. Dependiendo del sitio de la imagen donde se pinche, se seleccionará un documento u otro. Para implementar este comportamiento se divide la imagen en zonas y a cada zona se le asocia un enlace distinto.
► El mapa se define con la etiqueta <MAP> y </MAP>, y dentro de este mapa, cada nueva zona de la imagen se define con la etiqueta <AREA>. Esta ÁREA puede tener forma de círculo, cuadrado o rectángulo. Por ejemplo:
<map name=“mi_mapa”> <area shape=“rect” coords=“xl,yl,x2,y2” href=“enlace1.html”> <area shape=“circ” coords=“x,y,r” href=“enlace2.html”><area shape=“poly” "coords=“xl,yl,x2,y2,x3,y3,...” href=“enlace3.html!> <area shape=“default" nohref>
</map> <img src="mapa.gif" usemap="#mi_mapa">
11. Mapas. Imagen con enlaces
► <MAP> avisa de que se va a definir un mapa sensible al ratón, con el atributo NAME se le asigna un nombre al mapa. Entre la etiqueta <MAP> y su cierre </MAP> se definen las áreas en que se divide la imagen, así como el enlace asociado a cada una de ellas, mediante <AREA>.
► Atributos de <area>: SHAPE: índica la forma del área a definir. Puede ser:
► Un rectángulo (RECTANGLE, RECT).► Un círculo (CIRCLE, CIRC).► Un polígono (POLYGON, POLY). ► O un área por defecto (DEFAULT).
COORDS: coordenadas. Varían según el área especificada.► Si es un rectángulo se especifica la esquina superior izquierda (x 1, y 1) y la esquina inferior
derecha, (x2, y2).► Si es un círculo se especifica el centro (x, y) y el radio (r).► Si es un polígono se dan sus "n" puntos: (xl, yl), (x2, y2), etc.► Si es el área por defecto se supone que es toda el área de la imagen que no se ha asignado
previamente a otras áreas. HREF: es un enlace como los que ya se han visto previamente. Se puede especificar
explícitamente que en ciertas áreas no se desea saltar a ningún lado con NOHREF.► ALT: tiene la misma utilidad que en las imágenes, es decir, mostrar un texto cuando se sitúa el
ratón encima, y es especialmente útil para navegadores que no tengan capacidad de mostrar imágenes, sólo texto.
► Una vez definido el mapa se carga la imagen con <IMG>, indicando qué imagen cargar con el atributo SRC y usando el mapa antes definido con el atributo USEMAP, es decir: <img src=“mapa.gif” usemap="#mi_mapa">.
Ejemplo►Supongamos la siguiente imagen de
una casa:
►Vamos a poner como enlace el sol, el tejado y la ventana grande.
Abrimos la imagen con el Paint
►Apuntamos lo puntos de la ventana (Rect)► Punto superior izquierdo y punto inferior derecho
Los puntos del tejado► Los cuatro puntos del tejado, ya que no es un rectángulo y
lo consideraremos como un polígono (Poly).► En las figuras aparecen los dos primeros.
Los puntos del Sol► El punto central y el radio► Para el radio necesitamos el punto del extremo del círculo
sin movernos verticalmente y restar el valor de x.
Radio: 95-52=43Coordenada del eje X
Coordenada del eje Y
Código
EjecuciónSi hacemos Clic aquíVamos a la página del Tejado de la derecha
Si hacemos Clic aquíVolvemos a la casa
Práctica 17►Realiza un mapa libre al estilo del ejemplo
anterior que contenga lo siguiente: Un círculo. Un rectángulo. Un polígono.
►Al pulsar en cada área debe irse a una página con su nombre en un <h1> y un enlace para volver a la página con la imagen del mapa. Al estilo del ejemplo que habéis visto.
12. Tablas► Las tablas son un elemento del HTML que permiten representar
datos tabulados con más de una dimension, en forma de matrix, es decir, con la información dispuesta en filas y columnas.
► No se deben utilizar como herramientas de diseño. Tradicionalmente se han utilizado para controlar el diseño y maquetar la web, aunque esto hacia dificil extraer los datos almacenados y navegar.
► Un objetivo del HTML5 es separar el contenido a mostrar en una pagina web (html) de la forma en que es presentado (hojas de estilo CSS). Si a pesar de esto queremos utilizarla para ayudar al diseño, debemos poner: <table role=“presentation”> Para avisar a las herramientas para extraer los datos
12. Etiquetas básicas► Una tabla se define mediante la directiva <table> </table>.
► HTML5 solo soporta el atributo border dentro de la etiqueta <table>, que especifica si las celdas tienen borde o no. Por defecto no tiene borde. Tabla sin borde: <table>…</table> Tabla con borde: <table border=“1”>…</table>
► Definir una fila: <tr>…</tr>► Definir una columna o celda: <td> </td>
► Los <td> estarán dentro de los <tr>
12. Ejemplo 1
12. Ejemplo 2<table> <tr> <td>Lunes</td> <td>Martes</td> <td>Miércoles</td> <td>Jueves</td> <td>Viernes</td> </tr> <tr> <td>Lengua</td> <td> </td> <td>Matemáticas</td> <td>Música</td> <td></td> </tr></table>
12. Tablas irregulares► Cada celda de una tabla puede contar con dos
parámetros, para que la celda se extienda más allá de lo normal. colspan: hace que la celda se extienda hacia la
derecha, tantas celdas como se indique en su valor. rowspan: la celda se extenderá hacia abajo, tantas filas
como se indique.
COLSPAN
ROWSPAN
Pasos a seguir:
1. Seleccionar primera unión de celdas a realizar.
2. Poner el rowspan o colspan en la primera celda del conjunto a unir.
3. Eliminar las celdas que sobran porque quedan unidas a la anterior.
4. Continuar con el siguiente conjunto de celdas a unir
12. Tablas irregulares► style="background-color: rgb(102, 255, 153);” : es un atributo con una regla de stilo que
pone de un color la fila completa.
<tr style="background-color: rgb(102, 255, 153);"><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr style="background-color: rgb(102, 255, 153);"><td colspan="6"> </td>
</tr>
Como podemos ver al unir la fila, hemos eliminado el resto de celdas, quedando una sola
12. Tablas irregulares► En el siguiente ejemplo hemos aplicado el valor rowspan a las
tres primeras celdas de la izquierda. Habrá que eliminar la primera celda de la tercera y cuarta fila.
<tr><td rowspan="3"> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
Widht – Anchura (Nº o %)Height – Altura (Nº o %)Align – Alineación horizontal (left, right, center)Velign – “” vertical (top, bottom, middle)
12. Tablas irregulares
Actividad 18►Crea la tabla siguiente tabla, utilizando
las etiquetas colspan y rowspan:
12. Tablas complejas.Etiquetas complementarias
► Una tabla semánticamente correcta suele emplear algunas etiquetas más que, si bien no son necesarias, son recomendables.
► <caption>: empleada al comienzo de la tabla, le asigna un nombre general a la tabla.
► <colgroup>: a continuación de caption podemos destacar un número de columnas con una línea similar a ésta: <colgroup style="background-color: rgb(220, 220, 200);" span="3"> </colgroup>. Se emplea el parámetro span para indicar el número de columnas que se verán afectadas.
► <thead>: permite definir una o varias filas como cabeceras de la tabla. Al utilizarla, en lugar de definir las celdas con <td> emplearemos <th>, mientras que las filas seguirán creándose con <tr>.
► <tbody>: si utilizamos thead para definir la cabecera, emplearemos también <tbody> para indicar en qué punto comienzan las filas normales de la tabla.
► <tfoot>: por último, la pareja anterior se complementa con tfoot para establecer las filas que formarán parte del final de la tabla.
12. Tablas complejas.Etiquetas complementarias
► Tabla sin <colgroup>
► Tabla con <colgroup>: gracias a esta etiqueta podemos destacar un número de columnas con una línea similar a ésta:
<colgroup style="background-color: rgb(220, 220, 200);" span="3"></colgroup>.
Se emplea el parámetro span para indicar el número de columnas que se verán afectadas.
12. Tabla compleja<table border="1"> <caption>Tardes ocupadas</caption> <colgroup style="background-color: rgb(220, 220, 200);"
span="1”></colgroup> <thead> <tr> <th> <br> </th> <th>Lunes</th> <th>Martes</th> <th>Miércoles</th> <th>Jueves</th> <th>Viernes</th> </tr> </thead> <tbody> <tr> <td>Lengua</td> <td>x<br> <td> x<br></td> <td><br></td> <td><br></td> <td>x<br></td> </tr>
<tr> <td>Matemáticas</td> <td><br></td> <td> <br></td> <td>x<br></td> <td><br></td> <td>x<br></td> </tr>
<tr> <td>Música</td> <td>x<br></td> <td> <br></td> <td><br></td> <td>x<br></td> <td><br></td> </tr> </tbody> <tfoot> <tr> <td>Totales</td> <td>2<br></td> <td>1<br></td> <td>1<br></td> <td>1<br></td> <td>2<br></td> </tr> </tfoot></table>
Ejemplo 3 <table> <colgroup style="background:
#BBBBFF;"></colgroup> <colgroup span="3"> <col style="background: #AAFFAA;"> <col style="background: #BBFFBB;"> <col style="background: #CCFFCC;"> </colgroup> <colgroup span="2"> <col style="background: #FFBBBB;"> <col style="background: #FFCCCC;"> </colgroup> <tbody> <tr> <th>País</th> <th>Salmón</th> <th>Camarones</th> <th>Ostras</th> <th>Arroz</th> <th>Trigo</th> </tr> <tr> <td>Reino Unido</td> <td>2050</td>
<td>1545</td> <td>1156</td> <td>5007</td> <td>12254</td> </tr> <tr> <td>Estados Unidos</td> <td>1358</td> <td>1884</td> <td>784</td> <td>10597</td> <td>24554</td> </tr> <tr> <td>Australia</td> <td>985</td> <td>65</td> <td>518</td> <td>2548</td> <td>10548</td> </tr> </tbody> </table>
Actividad 19►Crea una tabla simple con 9 filas y 8
columnas similar a la del ejemplo 1. Estructúrala como tabla compleja, añadiendo las etiquetas <caption>, <colgroup>, <thead>, <th>, <tbody> y <tfoot>:
13. Formularios► Cuando se desea recopilar cierta información que puedan aportar los visitantes
de una web, por ejemplo sus datos personales de registro, o bien su opinión sobre una encuesta, o cualquier otro dato de interés, una herramienta que facilita esta tarea, son los formularios.
► Se componen de varias entradas o elementos con los que el usuario puede interactuar, como cajas de texto, casillas de verificación (checkboxes), de opción (radio buttons), listas desplegables, etc.
► Toda la información recopilada podrá ser enviada: A través de una URL, a un programa que sea capaz de procesarla y resida en un servidor
web A través de un botan de validación, al correo del administrador de la pagina. Para ello es
necesario tener instalado un sistema cliente de correo tipo Thunderbird, Outlook, Apple Mail, etc.
► El formulario se define mediante la directiva <form> </form> y dentro de ella se incluirán el resto de elementos que compongan el formulario de entradaos.
13. Un formulario elemental<html>
<head><title>Mi primer formulario</title> </head> <body> <form> <input> <input></form> </body>
</html>
13. Atributos del <form>► action, programa o lugar al que se van a enviar los datos del formulario.
► method, especifica cómo se envía la información al servidor. "post": envía los datos de manera codificada al usuario, dentro de la petición
http. "get": envía los datos agregándolos a la dirección URL detrás de un signo de
interrogación.
► target, especifica dónde se debe mostrar la respuesta que se recibe después de enviar el formulario. _blank: opción por defecto. Nueva ventana. _self: Misma ventana
► name, para asociarle un nombre unívoco que permita diferenciarle entre otros formularios.
13. Atributos del <form>► enctype, permite indicar como deben ser codificados los datos al enviarlos.
text/plain: Texto plano, parejas con el nombre de la entrada y el valor tecleado por el usuario:Nombre=Antonio Apellidos=GarcíaDopico Login=dopico
multipart/form-data: cada dato viene en un apartado del correo. Dicho apartado tiene como nombre el de la entrada y como contenido, el dato introducido por el usuario:
--------------------------------------------------- 7d22eedd24Content-Disposition: form-data; name="Nombre"Antonio--------------------------- 7d22eedd24Content-Disposition: form-data; name="Apellidos"García Dopico--------------------------- 7d22eedd24Content-Disposition: form-data; name="Login"dopico--------------------------------------------------- 7d22eedd24
application/x-www-form-urlencoded:► Opción por defecto.► Sustituye los espacios por "+" y los caracteres especiales por " %" seguidos por su código ASCII:
Nombre=Antonio&Apellidos=Garc%EDa+Dopico&Login=dopico
13. Formulario simple. Se envia a un servidor Web.
<html><head> <title> Ejemplo basico de un formulario </title> </head> <body><h1> Formulario basico</h1><form action="http://algunsitio.com" method="post"› Nombre: <input type="text" name=" nombre "><br/><input type=“submit“/><input type="reset“/></form></body>
</html>
13. Etiqueta <input>► La sintaxis general de un elemento de entrada <input> suele
ser así:<input type="TipoDeEntrada” name="Nombre” value="Valor">
► Es una etiqueta esencial para los formularios, ya que permite crear diferentes elementos de entrada interactivos, con los que el usuario puede editar la información del formulario.
► Atributos: name: Especifica el nombre del elemento y permite reconocer
posteriormente el valor asignado a las diferentes entradas del formulario.
value: Si el usuario no introdujo ningan valor, el valor sera el predeterminado por el atributo value.
type: Especifica diferentes controles en el formulario, de tal forma que según el tipo especificado se crea un tipo de entrada u otro.
13. Etiqueta <input>.Entradas de texto
► TYPE="text“
► Se emplean para pedir al usuario que proporcione un dato en formato texto.
► Toda entrada debe identificarse con un nombre, por lo que siempre necesita tener el atributo NAME, al que se le asigna como valor el nombre que identifica esta entrada, por ejemplo, "dirección", si lo que se va a pedir al usuario es su dirección.
► A partir de este nombre y el valor introducido por el usuario se construye una pareja "(nombre,valor)", que es lo que devuelve el formulario.
► Vamos a enviar los valores del forulario a un email, para observar como se enviarían los datos:
<form action="mailto:[email protected]" method=“post“ enctype="text/plain"><input type="text" name=“address"></form>
► Su aspecto es el de una caja donde introducir texto. Si el usuario introduce C/Azaf ranal, n° 7, se recibiría por mail:
ADDRESS=C/Azafranal, n° 7
13. Etiqueta <input>.Entradas de texto
►Atributos: name: nombre con el que se identifica la entrada o
dato. Es imprescindible. value: valor que toma la entrada o dato. Si se
especifica o asigna un valor inicial, este valor aparecerá por defecto en la caja de texto.
placeholder: como value pero es un texto informativo, si no se introduce ningún dato ese texto no se enviaría como información del formulario. Cuando haces clic en el cuadro el texto desaparece.
size: tamaño de la caja de texto en caracteres. maxlength: longitud máxima permitida para el texto
de entrada en caracteres.
13. Etiqueta <input>.Entradas de texto. Ejemplo
► <input type=“text” name=“nombre” value=“Aquí su nombre “ size=“40” maxlength=“30”>
► Como el tamaño de la caja es mayor que la longitud máxima permitida, a los 30 caracteres se bloqueará y no podrás escribir más.
► <input type=“text” name=“nombre” value=“Aquí su nombre “ size=“10” maxlength=“30”>
► Como en este caso el tamaño de la caja es más pequeño que la longitud máxima permitida, cuando escribas más de 10 caracteres, el texto se irá desplazando hacia la izquierda y ocultando los primeros caracteres hasta que lleguemos a 30.
13. Etiqueta <input>.Palabras clave (Password)
► TYPE="password“
► Igual que las de texto, pero oculta los caracteres que se teclean.
► Este tipo de entrada se utiliza para pedir contraseñas.
► Tiene los mismos atributos que las entradas de texto: NAME, VALUE, SIZE y MAXLENGTH, con los mismos significados. Obviamente no tiene sentido asignar un valor inicial al atributo VALUE, ya que no tiene sentido una contraseña por defecto.
► <input type=“password” name=“contrasena” size=“20” maxlength=“20”>
13. Etiqueta <input>.Botón de opción (Radio
Button)► TYPE="radio"
► Hay unas cuantas opciones y se quiere que el usuario elija una entre ellas; se emplean para hacer una pregunta al usuario, que admite varias respuestas posibles, y el usuario sólo puede escoger una de ellas.
► Se le pone a todas el mismo nombre. La diferencia es que cada una devolverá un valor distinto, ya que cada opción tendrá un atributo VALUE distinto.
► Se suele acompañar de un texto que describe cada opción y de una pregunta al principio en que se encomienda al usuario elegir una opción.
► Hay un atributo adicional que permite marcar alguna opción como ya seleccionada: CHECKED.
► A continuación, se muestra un formulario en el que se le pregunta al usuario qué desea comer y en el que se le da como opciones pollo asado, filete, trucha y boquerones. El nombre de esta entrada de formulario es "Segundo plato" y tiene como opción preseleccionada el filete.
Que desea comer de segundo plato?<br/><input type=“radio” name=“Segundo plato” value="Pollo“/>Pollo asado<br/><input type=“radio” name=“Segundo plato” value=“Filete“ checked/>Filete<br/><input type=“radio” name=“Segundo plato” value=“Trucha“/>Trucha<br/><input type=“radio” name=“Segundo plato” value=“Boquerones”>Boquerones
► Si se selecciona el pollo, mandará por correo la pareja Segundo plato=Pollo.
13. Etiqueta <input>.Casilla de verificación (Check
Box)► TYPE="checkbox".
► Similar al anterior, pero permite marcar varios simultáneamente. Se emplean a modo de preguntas sencillas, cuya respuesta, normalmente, sólo puede ser booleana, "sí" o "no". Por tanto, tiene sentido una casilla de verificación por sí sola sin necesidad de relacionarla con otra.
► En este caso cada entrada tendrá un nombre distinto, que identificará una sola casilla, no el conjunto. En cambio el valor que se asignará será siempre el mismo para todos, un valor que indique si el usuario ha marcado o no esta casilla, por ejemplo yes , si, ok, etc.
► Cada casilla tendrá un texto descriptivo que ayudará al usuario a saber qué está marcando y una pregunta global que describa esta sección del formulario.
► También está el atributo CHECKED, que permite mostrar al usuario algunas opciones como ya marcadas.
► Ejemplo: se le pregunta al usuario qué desea con su hamburguesa, dando como opciones: lechuga (ya preseleccionada), tomate (también preseleccionada), cebolla, pepinillos, queso (indica un extra de 50 céntimos), ketchup y mostaza.
Qué desea con su hamburguesa?<br/><input type=“checkbox” name=“Lechuga” value=“Yes” checked/>Lechuga<br/><input type=“checkbox” name=“Tomate” value=“Yes” checked/>Tomate<br/><input type=“checkbox” name=“Cebolla” value=“Yes” />Cebolla<br/><input type=“checkbox” name=“Pepinillos” value=“Yes” />Pepinillos<br/><input type=“checkbox” name=“Queso” value=“Yes” />Queso (+50 céntimos)<br/><input type=“checkbox” name=“Ketchup” value=“Yes” />Ketchup<br/><input type=“checkbox” name=“Mostaza” value=“Yes” />Mostaza
► Si selecciona lechuga, queso, cebolla y ketchup, mandará un correo con:Lechuga=Yes, Queso=Yes,Cebolla=Yes y Ketchup=Yes.
13. Etiqueta <input>.Entrada oculta (Hidden)
► TYPE="hidden“
► Éste es un tipo de entrada especial. No muestra nada al usuario ni recoge ninguna información.
► Se utiliza para diferenciar datos que provienen de formularios similares pero ubicados en distintos sitios web. En dicho caso se usa una entrada oculta para saber de dónde viene la información.
► Atributos: NAME y VALUE, para poder construir un par (nombre, valor). Su aspecto, por tanto, es:<INPUT TYPE="hidden" NAME="Origen" VALUE="Paris">
► Suponiendo un formulario que está en varios sitios web, todas las entradas ocultas tendrían el mismo nombre, pero un valor distinto para cada una, que indicaría de dónde vienen los datos.
13. Etiqueta <input>.Entrada archivo (File)
► TYPE="f ile“
► <input type=“file” name=“foto”>
► Permite al usuario enviar un archivo.
► Al usar esta entrada, se debe cambiar la forma en que se manda el correo electrónico, si no, se recibe un par (NombreEntrada, NombreArchivo), que no es lo deseado. Para mandar el archivo, y no su nombre, debe cambiarse el formato con que se envía la información. Dicho formato se especifica en el atributo ENCTYPE de la etiqueta FORM:<form action="mailto:[email protected]" method=“post“ enctype="multipart/form-data">
► El formato de la información pasa de ser texto ("text/plain") a ser un correo con varias partes ("multipart"). Una de la partes contendrá el archivo, no su nombre.
13. Etiqueta <input>.Botón enviar (Submit)
► TYPE="submit"
► Como su nombre indica, este botón envía los datos que componen el formulario que haya introducido el usuario.
► Cuando el usuario pincha en este botón se ejecuta la acción asociada al formulario. Como aún no se ha visto PHP, CGI o ASP, se limitará a enviar un mensaje a la dirección de correo especificada en el atributo ACTION con los pares "nombre = valor", donde "nombre" es el nombre asociado a cada entrada y "valor", el dato introducido por el usuario en esa entrada.
► Este botón tiene un atributo VALUE que se emplea para cambiar el texto que aparece en el botón (por defecto, Submit Query o Enviar consulta).
► <input type=“submit” value=“Confirmar”>
13. Etiqueta <input>.Botón borrar (Reset)
► TYPE="reset“
► Este botón es análogo al anterior. Como su nombre indica, borra todos los datos que haya introducido el usuario, cargando los valores por defecto.
► Cuando se da a este botón, se borran todos los datos del formulario.
► También tiene un atributo VALUE que se emplea para cambiar el texto que aparece en el botón (por defecto, "Reset“ o Restablecer).
► <input type=“reset” value=“Limpiar”/>
13. Etiqueta <input>.Imagen
► TYPE=“image”
► Se emplea para usar una imagen como botón de enviar, de forma que cuando se pulse sobre dicha imagen se envíen los datos.
► Su utilidad es la misma que la del botón de enviar
► Surge porque hay muchos formularios distribuidos por todos lados y con esta entrada se evita dejar la leyenda del botón de enviar en un idioma concreto, recurriendo a algo gráfico.
► <input type="image" src=“ok.png" width=“60” height=“60” border=“0” alt="Submit">
► Sin el width y el heiht la imagen sale demasiado grande, con estos atributos la limitamos
► Atributos src: para especificar la trayectoria de la imagen width: ancho (pixeles ó %) height: alto (pixeles ó %) Border: borde Alt: texto alternativo que deben ponerse por si el navegador no es capaz de mostrar la imagen
13. Etiqueta <input>.Rango de Valores
►Type=“number” y Type=“range”►Permiten utilizar los atributos min y max
pare establecer un rango de valores válido en la entrada.
►<input type=“nunber" name="EdadEmpleado" min="16" max="67"›
►La diferentecia radica en que en “range” los valores se especifican mediante sliders o barras de desplazamiento.
13. Etiqueta <input>.Color
► Type=“color”► Nos proporciona una paleta (selector) de colores. Así con
un solo click podemos elegir facílmente un color.► Atributo value: para poner un valor por defecto en
hexadecimal, por ejemplo el negro sería así: #000000.► <input name="color" type="color" value="#f3f3f3"/>
13. Etiqueta <input>.Expresiones Regulares
(pattern)► Se usan en muchos ámbitos de la
informática, por ejemplo para busquedas y sustituciones avanzadas.
► Las expresiones regulares son un lenguaje para la descripción de lenguajes. Una expresión regular define un lenguaje. Por ejemplo, la expresión regular [a-z]+ define el lenguaje formado por las cadenas que consisten en repeticiones de una o mas letras minúsculas.
► Tabla de metasímbolos usados en las expresiones regulares
13. Etiqueta <input>.Expresiones Regulares
(pattern)► Atributo pattern► Podemos especificar una expresión regular (regex) para el valor del campo
contra la que verificar. ► Nos permite implementar validaciones para fechas, emails, códigos de
productos o lo que se nos ocurra. ► Sólo temos que incluir una expresión regular en un atributo de HTML5.► Al ingresar un valor que no cumple con la expresión regular que está en el
atributo pattern, el navegador nos mostrará un mensaje (nativo del navegador) diciendo que el campo es inválido.
► Si estás familiarizado con las expresiones regulares, sabrás que este patrón: [0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01]) acepta solo fechas en el siguiente formato: DD.MM.AAAA.
13. Etiqueta <input>.Otros type de HTML5
► Type=“search”: El campo contendrá valores de búsqueda.► Type=“tel”: representa un control para introducir un número de telefono. A di
ferencia de los tipos url y email, el tipo tel no obliga a cumplir una sintaxis particular, dado que los campos de un número de telefono pueden tener multiples formas validas. Si se necesita hacer cumplir un formato en particular sera necesario utilizar el atributo pattern del elemento <input> o el metodo setCustomValidity(), para realizar un mecanismo de validaciOn en el lado del cliente.
► Type=“url”: una dirección de un localizador de un recurso de Internet.► Type=“email”: una dirección de correo electrónico o una lista de direcciones.► Type=“datetime”: una fecha y una hora, consta de año, mes, dia, hora, minuto,
segundo y fracción de segundo, con la zona horaria en UTC.► Type=“date”: una fecha compuesta de año, mes y dia.► Type=“month”: consta de un mes y un año, sin zona horaria.► Type=“week”: un número de semanas, sin zona horaria.► Type=“time”: consta de hora, minuto, segundo y fracción, sin zona horaria.► Type=“datetime-local: una fecha y una hora, consta de año, mes, dia, hora,
minuto, segundo y fraccicin de segundo, sin zona horaria.► Type=“button”: botón con ningún comportarniento predeterminado.
13. Listas de selección (Pull Down List)
► Permiten elegir una opción entre varias posibles.► No muestra las opciones hasta que se pincha sobre ella, entonces despliega una lista con todas
las opciones posibles. ► <SELECT></SELECT><OPTION></OPTION>.► Atributos
name, como siempre, es el nombre que identifica a la entrada y es un atributo de <SELECT>. size: representa el número de opciones a mostrar en la lista, valor que puede ser diferente al nlimero de
opciones que componen la lista. multiple; atributo lógico que permite seleccionar varias opciones de la lista; si no esta presente, solo se
podra seleccionar una Unica opción
► El atributo VALUE representa el valor que se asignará a este formulario y es un atributo de cada opción, es decir, de la etiqueta <OPTION>. Además se puede establecer una opción como predeterminada, poniéndole el atributo SELECTED en su etiqueta. Si no se pone, aparecerá la primera de las opciones como predeterminada.<select name="Provincia"> <option value=“Madrid”>Madrid </option><option value=“Soria” selected>Soria</option><option value="Toledo">Toledo</option><option value="Cuenca“>Cuenca</option><option value=“Cáceres“>Cáceres</option><option value="Badajoz“>Badajoz</option><option value="Ávila“>Ávila</option></select>
multiple
13. Área de texto► Esta entrada de formulario se utiliza para que el usuario pueda escribir un párrafo.
Este tipo de entrada se emplea para recoger opiniones o comentarios.► Se indica con la etiqueta <TEXTAREA>, que tiene su cierre </TEXTAREA>. Los
atributos que tiene son: NAME, con el nombre que identifica la entrada; ROWS, con el número de filas; COLS, con el número de columnas. READONLY, atributo lógico para impedir al usuario editar el texto.
► Además está WRAP, que indica cómo se parten las líneas al llegar al final de la línea: WRAP= " off". Valor por defecto. No parte las líneas al llegar al final y el usuario sigue
tecleando en la misma línea, simplemente aparece un scrollbar para poder acceder a toda la línea. Si quiere cambiar de línea debe teclear forzosamente un retorno de carro. Envía el texto tal cual se tecleó.
WRAP="soft". Al llegar al final del recuadro cambia de línea y se vuelve a poner al principio, por lo que el usuario ve que la línea se ha partido, pero después manda el texto como se tecleó, sin añadir saltos de línea que el usuario no ha tecleado.
WRAP="hard". Al llegar al final parte las líneas. Además, manda el texto como se ve en el recuadro, con saltos de línea que el usuario no tecleó.
<textarea name=“comentario” rows=“10” cols=“40” wrap=“soft”>Aquí su opinión</textarea>
Actividad 20►Imagina que trabajas en una empresa
y tienes que diseñar su página web.
►Diseña un formulario para la empresa en el que aparezcan todos los elemenos vistos hasta el momento.
Organización de las entradas► Las entradas se pueden agrupar para hacer más legible el formulario, para ello se emplea
la etiqueta <FIELDSET> con su cierre </FIELDSET>.
► Además, se puede asociar un texto descriptivo al grupo para facilitar su comprensión, de modo que el usuario sepa qué datos se esperan. Se consigue mediante la etiqueta <LEGEND>, que también tiene su cierre </LEGEND>.
► Normalmente las entradas se suelen acompañar de un texto que indica al usuario qué se espera que introduzca, pero dicho texto no está asociado con la entrada. Para evitar que el navegador vea la entrada y el texto descriptivo como entes independientes, se emplea la etiqueta <LABEL> que, como su nombre indica, etiqueta una entrada. Tiene su cierre equivalente </LABEL>.
<FIELDSET><LEGEND> Datos Personales </LEGEMD><LABEL> Nombre: <INPUT TYPE="text" NAME="Nombre"> </LABEL><LABEL> Apellidos: <INPUT TYPE="text" NAME="Apellidos"> </LABEL><LABEL> Dirección: <INPUT TYPE="text" NAME="Direccion"> </LABEL><LABEL> Teléfono: <INPUT TYPE="text" NAME="Telefono"> </LABEL>
</FIELDSET>
13. Formulario con agrupación de elementos y
patrones
Actividad 21►Organiza el formulario de la actividad
20 con las etiquetas <fieldset>, <legend> y <label>.
13. Formulario dentro de una tabla
Actividad 22►Introduce el formulario de la actividad
20 en una tabla sin borde.
Actividades de repaso
