Unidad 1. Crear paginas web estaticas
1.2 Elabora páginas web estáticas haciendo uso del lenguaje de etiquetas XHTML
30
horas Del 6 de marzo al 30 de marzo de 2017. R=03/04/2017 25%
Cuadro de evaluación 1.2
INDICADORES
|
Uso de los elementos del lenguaje HTML 5%
|
Manejo
de texto en las paginas 10%
|
Vinculación
entre paginas del sitio 10%
|
Manejo
de listas 10%
|
Incorporación
de elementos multimedia 15%
|
Manejo
de tablas 10%
|
Manejo
de formularios 10%
|
Organización
de las carpetas que contienen información del sitio 5%
|
Presentación
del código 5%
|
Presentación
de Resultados 10%
|
Actitudes
10%
|
Valor
|
5%
|
10%
|
10%
|
10%
|
15%
|
10%
|
10%
|
5%
|
5%
|
10%
|
10%
|
Valores
|
E=5
S=3.88
I=1.25
|
E=10
S=7.75
I=2.5
|
E=10
S=7.75
I=2.5
|
E=10
S=7.75
I=2.5
|
E=15
S=11.6
I=3.75
|
E=10
S=7.75
I=2.5
|
E=10
S=7.75
I=2.5
|
E=5
S=3.88
I=1.25
|
E=5
S=3.88
I=1.25
|
E=10
S=7.75
I=2.5
|
E=10
S=7.75
I=2.5
|
Letra
|
|||||||||||
Alcanzado
|
|||||||||||
Aprovechamiento
|
Ponderación
|
||||||||||
HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.
HTML son las siglas deHyperText Markup Language. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), más conocido como W3C.
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML,DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
Etiquetas y atributos
XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan
XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta sería algo como esto:
<etiqueta>Algo aquí dentro</etiqueta>
Elementos HTML
HTML define el término elemento para referirse a las partes que componen los documentos HTML. En realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:
• Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:
Sintaxis de las etiquetas XHTML
cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
Introducción a XHTML Capítulo 2. Características básicas
www.librosweb.es 19
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:
La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.
Estructura de un documento XHTML
El DOCTYPE XHTML
Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nota: El anterior doctype es de tipo XHTML estricto, pero podríamos elegir otros doctypes para XHTML, por ejemplo el transicional. Para más información y códigos de los diferentes doctypes, puedes leer el artículo Doctype de HTML.
Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html> .
El elemento raíz (HTML)
El resto de nuestro documento tiene que ir dentro de la etiqueta <html> . Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así:
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="es" lang="es">
Las letras "es" son el código ISO que representan al idioma "español".
La cabecera (HEAD)
La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc.
Juego de caracteres
Tenemos que empezar definiendo el formato en el que se guardan los caracteres en el archivo. La codificación estándar utilizada en XHTML es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos…). Utilizando el juego de caracteres UTF-8 tendremos resueltas la mayoría de nuestras necesidades.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente.
Como decíamos, es posible guardar tu archivo con otra codificación de caracteres. XHTML también lo permite y si trabajas en Windows el juego de caracteres por defecto que se utiliza es el Latin-1. Para ello simplemente tienes que especificar en tu etiqueta META que estás utilizando esa codificación, sustituyendo utf-8 por ISO-8859-1 (para Latin-1) o cualquier otro juego de caracteres que estés utilizando. Te quedaría así tu etiqueta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head> , mientras que para el título usamos la etiqueta <title> . El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc.
Quedaría así:
<head>
<meta…..
<title>Título de la web</title>
</head>
Nota: El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código.
Otra cosa que quizás deberías incluir en la cabecera es la mencionada etiqueta META "Content-Type" para especificar el juego de caracteres. Luego veremos en el documento básico final cómo quedaría el HEAD con esa etiqueta para definir la codificación de caracteres del archivo.
El cuerpo (BODY)
Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body> , y que contiene toda la Información que de mostrará en el navegador. Quedaría así:
<body>
<p>Aquí va el cuerpo de la web</p>
</body>
Nota: Si te fijas, hemos colocado un párrafo dentro del cuerpo, porque en XHTML estricto no se pueden colocar textos directamente dentro del BODY, sin colocarlos dentro de alguna etiqueta. Es decir, una vez abierto el cuerpo, no podemos escribir texto tal cual, sino comenzar con alguna etiqueta XHTML y el texto colocarlo siempre dentro. Puedes utilizar cualquier etiqueta que te interese, como P o DIV, por poner unos ejemplos, pero el caso es colocar tus textos, u otros contenidos, dentro de cualquier tipo de contenedor.
La plantilla de nuestro documento básico XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Título de la web</title>
</head>
<body>
<p>Aquí va el contenido</p>
</body>
</html>
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.
HTML son las siglas deHyperText Markup Language. El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), más conocido como W3C.
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML,DocBook y MathML.
La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos. La principal desventaja es que pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
Etiquetas y atributos
XHTML significa eXtensive HyperText Markup Language y es la versión evolucionada del HTML. Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan
XHTML es un lenguaje que se basa en etiquetas (tags). Una etiqueta sería algo como esto:
<etiqueta>Algo aquí dentro</etiqueta>
Elementos HTML
HTML define el término elemento para referirse a las partes que componen los documentos HTML. En realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por:
• Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:
Sintaxis de las etiquetas XHTML
cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas:
Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>
Ejemplo incorrecto en XHTML (pero correcto en HTML):
Introducción a XHTML Capítulo 2. Características básicas
www.librosweb.es 19
<dl compact>...</dl>
Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:
La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto.
Estructura de un documento XHTML
El DOCTYPE XHTML
Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nota: El anterior doctype es de tipo XHTML estricto, pero podríamos elegir otros doctypes para XHTML, por ejemplo el transicional. Para más información y códigos de los diferentes doctypes, puedes leer el artículo Doctype de HTML.
Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html> .
El elemento raíz (HTML)
El resto de nuestro documento tiene que ir dentro de la etiqueta <html> . Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así:
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="es" lang="es">
Las letras "es" son el código ISO que representan al idioma "español".
La cabecera (HEAD)
La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc.
Juego de caracteres
Tenemos que empezar definiendo el formato en el que se guardan los caracteres en el archivo. La codificación estándar utilizada en XHTML es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos…). Utilizando el juego de caracteres UTF-8 tendremos resueltas la mayoría de nuestras necesidades.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente.
Como decíamos, es posible guardar tu archivo con otra codificación de caracteres. XHTML también lo permite y si trabajas en Windows el juego de caracteres por defecto que se utiliza es el Latin-1. Para ello simplemente tienes que especificar en tu etiqueta META que estás utilizando esa codificación, sustituyendo utf-8 por ISO-8859-1 (para Latin-1) o cualquier otro juego de caracteres que estés utilizando. Te quedaría así tu etiqueta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head> , mientras que para el título usamos la etiqueta <title> . El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc.
Quedaría así:
<head>
<meta…..
<title>Título de la web</title>
</head>
Nota: El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código.
Otra cosa que quizás deberías incluir en la cabecera es la mencionada etiqueta META "Content-Type" para especificar el juego de caracteres. Luego veremos en el documento básico final cómo quedaría el HEAD con esa etiqueta para definir la codificación de caracteres del archivo.
El cuerpo (BODY)
Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body> , y que contiene toda la Información que de mostrará en el navegador. Quedaría así:
<body>
<p>Aquí va el cuerpo de la web</p>
</body>
Nota: Si te fijas, hemos colocado un párrafo dentro del cuerpo, porque en XHTML estricto no se pueden colocar textos directamente dentro del BODY, sin colocarlos dentro de alguna etiqueta. Es decir, una vez abierto el cuerpo, no podemos escribir texto tal cual, sino comenzar con alguna etiqueta XHTML y el texto colocarlo siempre dentro. Puedes utilizar cualquier etiqueta que te interese, como P o DIV, por poner unos ejemplos, pero el caso es colocar tus textos, u otros contenidos, dentro de cualquier tipo de contenedor.
La plantilla de nuestro documento básico XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Título de la web</title>
</head>
<body>
<p>Aquí va el contenido</p>
</body>
</html>
Uso de meta tags adecuados.
Los meta tags son marcas en lenguaje HTML que van en la
parte superior del código fuente de cada página, a través de las cuales se
entrega a los sistemas de indexación y búsqueda, la información mínima para
hacer una correcta indexación del contenido que incluye.
meta tags son un conjunto de elementos que obedecen a un
estándar definido por el World Wide Web Consortium por lo que su uso está
regulado y mediante los cuales redescribe información concreta sobre la página,
tal como título, autor, descripción, idioma y otros. Los más importantes,
aunque no los únicos, son los siguientes:
•<title>Nombre del Sitio o
Institución</title>
•<meta name="title" content="Nombre del
Sitio o Institución">
•<meta name="description"
content="Descripción del Sitio o Institución">
•<meta name="keywords"
content="Palabras claves del Sitio o Institución">
Adicionalmente sobre este tema se ha dado en los últimos
años un trabajo de estandarización muy importante a través del grupo Dublín
Core que ha definido los elementos meta tags a usar.
Las meta tags son identificadores ocultos, es decir
instrucciones especiales del lenguaje HTML que no son mostradas directamente en
el navegador, pero que gracias a la
información que contienen de nuestra página web, nos ayudan a mejorar nuestra
posición en el listado de los resultados
de los mayores buscadores (altavista, excite, lycos....).
El funcionamiento de las Meta Tags en los motores de
búsqueda es simple, y lo podemos resumir en 3 puntos:
Añadimos nuestra página en el motor de búsqueda,
facilitando la dirección de la misma y
nuestro e-mail a los buscadores. Normalmente cada motor tiene un apartado para
poder añadir nuestro Sitio Web, se suelen
identificar por "add url", "submit a site"
,"añadir url","sugerir sitio",etc. Mas adelante damos la dirección
de algunos páginas web donde podrás registrar tu URL en varios motores a la
vez, facilitándote el trabajo de alta de tu Sitio Web.
El motor de búsqueda navegará por tu Sitio Web, e
incluirá en su índice la información que encuentre en las Meta Tags de tu
página, tales como descripción, palabras clave, titulo, autor y muchos mas
datos que ayudarán a un buen indexado de nuestra página en los motores de búsqueda .
El usuario introduce en un buscador el tema en el cual
esta interesado, mediante palabras clave. Seguidamente el motor de búsqueda
revisará en sus archivos todas aquellas páginas que contengan (en las Meta
Tags) las palabras clave que ha introducido el usuario, ofreciéndole una lista
de todas las páginas que contengan esas palabras clave, y aquí es donde
interviene el tener unas buenas Meta Tags, para que una de las páginas que se
muestran al usuario sea la nuestra.
Aunque hay algunos buscadores que no utilizan todas las
Meta tags, es recomendable incluirlas, para realizar una correcta promoción de
nuestra web en los motores de busqueda que si lo hacen.
Las Meta Tags se deben de colocar en la cabecera de la
página web, entre <HEAD> y
</HEAD>. Normalmente cuando queremos promocionar nuestro Sitio Web, este
consta de una página principal, que se nombra
como index.htm o default.htm, en el cual debemos de introducir las Meta
Tags para que sean efectivas (en caso de que trabajemos con marcos Irán en la
página donde se configuran estos).
Existen dos tipos de Meta Tags, con distintas funciones:
LAS META NAMES
LAS HTTP-EQUIV
LAS META NAMES
Los Meta Names se
utilizan para optimizar el resultado en los motores de búsqueda. Contienen
información referida al documento HTML pero no se presenta en la pantalla del
navegador.
Meta name TITLE
Es la principal etiqueta para los buscadores, que
proporciona el titulo de nuestro Sitio Web. Es importante que se corresponda
con el contenido de la etiqueta <TITLE>contenido</TITLE>, que
tenemos en nuestra página web.
El titulo debe de ser una frase breve que resuma bien el
tema de nuestra página, debe incluir las palabras clave mas importantes de su
sitio, tales como el nombre de su empresa, si fuera el caso.
No escriba todo el texto en mayúsculas y acentué
normalmente. Evite palabras como
"bienvenido","sitio","web".
<META
NAME="title" CONTENT="título del sitio">
Meta name DESCRIPTION
En esta tag es donde pondremos la descripción de nuestra
página, que será la frase que acompañará al titulo anterior en los listados de
los buscadores. No es conveniente repetir palabras en ella, pero si lo es,
utilizar alguna de las palabras clave que utilizaremos en el campo keywords. No
escriba todo el texto en mayúsculas y acentúe normalmente. Utilicé una frase de
extensión no muy larga y que describa a la perfección nuestro sitio. Si desea
asegurarse que los buscadores muestren la mayor parte de su descripción no
sobrepase los 120 y 140 caracteres en la
longitud de la frase.
<META NAME="description"
CONTENT="descripción dela página">
Meta name KEYWORDS
En esta tag pondremos las palabras exactas por las cuales
queremos que nuestro sitio sea encontrado por los robots de búsqueda. Las
palabras pueden estar separadas por espacios, por comas o por ambos a la vez.
No es conveniente repetir palabras, ya que muchos robots de indexación las
rechazan. Incluya solo las palabras mas importantes para la página, acentuadas normalmente, y utilizando
mayúsculas solo cuando es necesario. No es conveniente hacer una lista de
palabras demasiado larga, entre 10 y 20, será mas que suficiente.
<META
NAME="Keywords"
CONTENT="palabra1, palabra2,.... ">
Meta Name DC LANGUAGE
Determina el idioma en el que esta escrita nuestra página
web.
<META NAME="Language"
CONTENT="Spanish">
Meta Name REVISIT
Esta Meta tag sirve para configurar la caché del
explorador, permitiendo la actualización de la página durante el periodo de
tiempo especificado en el identificador.
<META
NAME="Revisit" CONTENT="nº days">
Meta Name AUTHOR
Nos permite colocar el nombre del autor de la página
dentro de las Meta Tags.
<META
NAME="author" CONTENT="nombre">
Esta Meta tag dispone de una serie de atributos que nos
permite elegir los elementos de la página que no queremos que sean indexados
por los motores de búsqueda, tales como los archivos o los vínculos de que
dispone la página. Los parámetros de esta Meta son los siguientes:
all La página será
indexada por completo (incluidos archivos).
none La página
será indexada pero sin ningún archivo.
Index La página
puede ser indexada por los robots.
noindex La página
no podrá ser indexada por los robots.
Follow Permite que
los robots sigan los vínculos de nuestra página a otras.
nofollow No
permite que los robots sigan los vínculos de nuestra página a otras.
<META
NAME="robots" CONTENT="all | index | follow">
LAS META HTTP-EQUIV
La etiqueta HTTP-EQUIV, tiene control sobre los
exploradores, y son utilizadas para refinar la información y dar instrucciones
al explorador que las esta leyendo. Existen varios tipos de META HTTP-EQUIV:
Pragma ó cache-control
Es una manera de controlar la caché del explorador
(memoria donde se guardan las páginas que hemos visitado en la red). Esta
etiqueta puede tener dos valores:
"cache" (utiliza la memoria caché para guardar la página, con lo cual
se cargará mas rápido en el ordenador, pero puede ser un punto en contra a la
hora de actualizar la página, puesto que los usuarios no verán los nuevos
resultados), "no-cache" (no utiliza la caché del explorador para
guardar la página).
<META HTTP-EQUIV="Pragma"
CONTENT="no-cache/cache"> ( para Netscape)
<META HTTP-EQUIV="Cache-Control"
CONTENT="no-cache"> (para
el Explorer)
Expires
Indica al explorador cuando acaba la vida de una página,
limitando el uso de una la misma a una fecha y una hora determinada. Es una
Meta útil siempre que el contenido de la web sea perecedero.
META
HTTP-EQUIV="expires" CONTENT="Fri, 20 Feb 2000 10:51:12
GMT">
Refresh
Especifica el tiempo en segundos que el explorador
tardará en mandarte a una segunda dirección URL, una vez que se haya cargado la
página que contiene a la Meta
tag.
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.nuevaurl.es">
Set-Cookie
Es una de las maneras mas fáciles de introducir una
cookie en el explorador del usuario que visita la página. Para que la cookie
sea guardada en el disco duro del usuario que visita la web, debe especificarse
una fecha de expiración de esta, en caso contrario la cookie se eliminará al
acabar la sesión actual.
<META
HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx
;expires=Friday, 15-Feb-01 14:18:41 GMT; path=/">
Window-Target
Esta Meta especifica el nombre de la ventana en la cual
se debe visualizar la pagina web. Es muy útil para evitar que nuestra página
sea vista en el marco de otra página web ajena a la nuestra, puesto que con el
parámetro _top elimina todos los marcos
existentes en el explorador. Puede tener varios parámetros:
_black La página
se visualiza en una ventana del explorador nueva.
_top La página se visualiza en la ventana completa del
explorador, eliminando los marcos que existan en la ventana del explorador.
_self La página se
visualiza en el mismo marco desde el cual se originó el hipervínculo.
<META
HTTP-EQUIV="Window-target" CONTENT="_top">
ACTIVIDAD DE APRENDIZAJE
Elabore en bloc de notas cada una de las paginas (minimo 5) que forman parte del sitio web que describiste en el 1.1, las cuales deben contar con el siguiente contenido y características:
Elabore en bloc de notas cada una de las paginas (minimo 5) que forman parte del sitio web que describiste en el 1.1, las cuales deben contar con el siguiente contenido y características:
- Definir la estructura de cada pagina
- otorgar un titulo a cada pagina
- Agrega comentarios a cada pagina como fecha de realización, quien lo hizo, descripción de la pagina, etc)
- Agrega las meta tags para hacer que los buscadores localicen fácilmente el sitio web desarrollado
- Guardar cuidando la nomenclatura de un documento web (sin espacios), guárdalo en una carpeta que lleve el nombre de tu proyecto web.
- Cuida de las 5 reglas para definir elementos web
Manejo de texto en las paginas web
Podrás consultarlo en el documento introducción a xhtml que compartí en one drive:
- Titulo, secciones y párrafos
- marcado básico de texto
- Marcado avanzado de texto
El proceso de estructurar un texto simple consiste en indicar las diferentes zonas o secciones que componen el texto. De esta forma, los textos estructurados utilizan etiquetas para delimitar cada párrafo y títulos de sección para delimitar cada una de las secciones que forman el texto.
Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc.
- Estructurar texto
La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.
- Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta<p>, que permite definir los párrafos
que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto
con la etiqueta<p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrandosu texto con la etiqueta p. El navegador también se encarga deseparar automáticamente cada párrafo.</p>
</body></html>
- Secciones
Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en diferentes secciones jerárquicas.
Las etiquetas que definen los títulos de sección son<h1>,<h2>,<h3>,<h4>,<h5> y<h6>. La etiqueta<h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta<h6> es la que se utiliza para delimitar las secciones menos importantes de la página.
- Marcado básico de texto
Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el HTML proporciona varias etiquetas paramarcar cada uno de los diferentes tipos de texto.
<em> y <strong>.
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
más importantes</strong>.</p>
</body>
HTML también permite marcar de forma adecuada las modificaciones realizadas en el contenido de una página. En otras palabras, HTML permite indicar de forma clara el texto que ha sido eliminado y el texto que ha sido añadido a un determinado texto original. Las etiquetas utilizadas son<ins> y<del>, cuya definición formal es la siguiente:
<p>El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de
<del datetime="20091025" cite="http://www.librosweb.es/mas_informacion.html"> marcado de hipertexto</del> <ins datetime="20091026" cite="http://www.librosweb.es/
mas_informacion.html"> marcas hipertextuales</ins>) es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto.</p>
<blockquote>
Sirve para agregar una cita textual haciendo que el texto aparezca mas adentro del párrafo normal.
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo es una dirección URL que indica el documento original de la cita."</blockquote>
- Marcado avanzado de texto
<acronym>
Se emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de esas siglas
HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).
En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar.
Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.
En estos casos, se puede utiliza la etiqueta<pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas.
Listas
Sirven para agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación de un sitio web por ejemplo está formado por un grupo de palabras.
El lenguaje HTML define tres tipos de listas:
Las listas no ordenadas es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados.
La etiqueta<ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.
Las listas ordenadas contiene elementos que se muestran siguiendo un orden determinado.
La lista ordenada, que se define mediante la etiqueta<ol>. Los elementos de la lista se definen mediante la etiqueta<li>, la misma que se utiliza en las listas no ordenadas.
Las listas de definición es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones.
La etiqueta<dl> crea la lista de definición y las etiquetas<dt> y<dd> definen
respectivamente el término y la descripción de cada elemento de la lista.
Pueden combinarse las listas para da una mejor presentación al contenido de los sitios web.
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso
Las partes que componen la URL anterior son:
Ejemplo:
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
Cuatro tipos diferentes de URL relativas:
se pueden incluir en una página HTML para ilustrar la información contenida. Se distinguen dos tipos: las imágenes de contenido y las imágenes de adorno.
Las imágenes de contenido:
Son las que proporcionan información y complementan la información textual.
Las imágenes de adorno:
Son las que se utilizan para hacer bordes redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de página, etc.
Las imágenes de contenido se incluyen directamente en el código HTML mediante la etiqueta<img>
Las imágenes de adorno no se deberían incluir en el código HTML, sino que
deberían emplearse hojas de estilos CSS para mostrarlas.
atributos de imágenes:
Elementos de formulario
Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>, por lo que su definición formal y su lista de atributos es muy extensa:
La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.
Contraseña <br/>
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro de texto normal en un cuadro de contraseña.
son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.
Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado
El valor del atributo type para estos controles de formulario es checkbox. Si no se añade un texto al lado de la etiqueta<input /> del checkbox, el usuario sólo
ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox.
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes.
Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
El valor del atributo type para estos controles de formulario es radio. El atributo name se emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se seleccione otra opción.
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario:
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario:
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.
Fichero adjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que permite navegar por los directorios y archivos del ordenador del usuario.
Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico:
<input type="button" name="guardar" value="Guardar Cambios" />
El valor del atributo type para este control de formulario es button. Si pruebas a pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra los datos introducidos. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.
Formularios avanzados
Algunos elementos adicionales para mejorar la estructura de los formularios creados son:
La etiqueta<legend> se incluye dentro de cada etiqueta<fieldset> y establece el título que muestra el navegador para cada agrupación de elementos.
las áreas de texto
Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto normal
Los atributos más utilizados en las etiquetas<textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante rows, que indica directamente las filas de texto que serán visibles.
ACTIVIDAD DE EVALUACIÓN
<body><p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p></body>
- Nuevas líneas
HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).
<br>
Se utiliza la etiqueta para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior.<p>Este segundo párrafo sí que contiene saltos <br/>de <br/>línea <br/>y otro tipo de espaciado.</p></body>
- Espacios en blanco
La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas.
Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el símbolo& al principio y el símbolo; al final).
<p>Este segundo párrafo sí que contiene saltos <br/>de <br/>línea <br/>y otro tipo de espaciado.</p></body>
- Texto preformateado
En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar.
Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.
En estos casos, se puede utiliza la etiqueta<pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas.
<pre>La etiqueta prerespeta los espacios en blancoymuestra el textotal y comoestá escrito</pre>
ACTIVIDAD DE APRENDIZAJE
Agregar a cada página de tu proyecto web el texto estructurado requerido en cada página, además aplica formato básico, avanzado, espacios en blanco, citas todas las etiquetas que te permitan agregar el texto.
Listas
Sirven para agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta. El menú de navegación de un sitio web por ejemplo está formado por un grupo de palabras.
El lenguaje HTML define tres tipos de listas:
- listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden).
- listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden)
- listas de definición (un conjunto de términos y definiciones similar a un diccionario).
- Listas no ordenadas
Las listas no ordenadas es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados.
La etiqueta<ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.
<ul> <li>Inicio</li> <li>Noticias</li> <li>Artículos</li> <li>Contacto</li></ul>
- Listas ordenadas
Las listas ordenadas contiene elementos que se muestran siguiendo un orden determinado.
La lista ordenada, que se define mediante la etiqueta<ol>. Los elementos de la lista se definen mediante la etiqueta<li>, la misma que se utiliza en las listas no ordenadas.
<ol> <li>Enchufar correctamente</li> <li>Comprobar conexiones</li> <li>Encender el aparato</li></ol>
- Listas de definición
Las listas de definición es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones.
La etiqueta<dl> crea la lista de definición y las etiquetas<dt> y<dd> definen
respectivamente el término y la descripción de cada elemento de la lista.
<dl> <dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd> <dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd> <dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd></dl>
<h1> Alimentos </h1><ul> <li> frutas </li> <ol> <li> Manzana </li> <li> Fresas </li> <li> Naranjas </li> </ol> <li> verduras </li> <ol> <li> Zanahorias</li> <li> Betabel</li> <li> Cebolla </li> </ol> <li> cereales </li> <ol> <li> Frijoles</li> <li> Trigo</li> <li> Amaranto </li> </ol></ul>
ACTIVIDAD DE APRENDIZAJE
Agregar en tus páginas de tu proyecto web el texto estructurado con listas ordenadas, listas desordenadas, listas de definición y listas anidadas.
Enlaces, hipervinculos o hipertextos
Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso
Las partes que componen la URL anterior son:
- Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizanhttp://. Las páginas webseguras (por ejemplo las de los bancos y las de los servicios de email) utilizanhttps:// (se añade una letras).
- Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.
- Ruta (/xhtml/capitulo4.html):camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.
- Enlaces relativos y absolutos
Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves.Ejemplo:
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
Cuatro tipos diferentes de URL relativas:
- El origen y el destino del enlace se encuentran en el mismo directori
- El destino del enlace se encuentra cerca de su origen y en un nivel superior.
- El destino del enlace se encuentra cerca de su origen y en un nivel inferior.
- El origen y el destino del enlace se encuentran muy alejados
- Enlaces básicos etiqueta <a>
Los enlaces en HTML se crean mediante la etiqueta<a>, se emplea para enlazar todo tipo de recursos.
El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.
Ejemplo:
Enlace que apunta a la pagina principal de google
<a href="http://www.google.com">Página principal de Google</a>
Enlaces que apuntan directamente a documentos
<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>
Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior:
<a href="/">Volver al inicio</a>
El otro atributo básico de la etiqueta<a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.
Imagenes
Son las que proporcionan información y complementan la información textual.
Las imágenes de adorno:
Son las que se utilizan para hacer bordes redondeados, para mostrar pequeños iconos en las listas de elementos, para mostrar fondos de página, etc.
Las imágenes de contenido se incluyen directamente en el código HTML mediante la etiqueta<img>
Las imágenes de adorno no se deberían incluir en el código HTML, sino que
deberían emplearse hojas de estilos CSS para mostrarlas.
La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG.
Ejemplo
<img src="logotipo.gif" alt="Logotipo de Mi Sitio" />
- src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL indicadas pueden ser absolutas o relativas.
- alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a las imágenes.
Mapas de imagen
Aunque el uso de los mapas de imagen se ha reducido drásticamente en los últimos años, aún se utilizan en algunos sitios especializados. Muchas agencias de viaje y sitios relacionados utilizan mapas geográficos para seleccionar el destino del viaje. La mayoría de mapas se realiza hoy en día mediante Flash, aunque algunos sitios siguen recurriendo a los mapas de imagen.
Un mapa de imagen permite definir diferentes zonas "pinchables" dentro de una imagen. El usuario puede pinchar sobre cada una de las zonas definidas y cada una de ellas puede apuntar a una URL diferente. Siguiendo el ejemplo anterior, una sola imagen que muestre un mapa de todos los continentes puede definir una zona diferente para cada continente. De esta forma, el usuario puede pinchar sobre la zona correspondiente a cada continente para que el navegador muestre la página que contiene los viajes disponibles a ese destino.
Las zonas o regiones que se pueden definir en una imagen se crean mediante rectángulos, círculos y polígonos. Para crear un mapa de imagen, en primer lugar se inserta la imagen original mediante la etiqueta<img>. A continuación, se utiliza la etiqueta<map> para definir las zonas o regiones de la imagen. Cada zona se define mediante la etiqueta<area>.
<img src="imagenes/sur.jpg" usemap="#mapa_torres" />
<map name="mapa_torres">
<area shape="rect" coords="120,170,154,180"
href="http://www.tamazuladegordiano.gob.mx/new/" />
</map>
Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.
<object width="425" height="350">
<param name="movie" value="videos/colapsa.mpeg"></param>
<param name="wmode" value="transparent"></param>
<embed src="videos/colapsa.mpeg" type="application/ x-shockwave-flash" wmode="transparent" width="425" height="350">
</embed>
</object>
ACTIVIDAD DE APRENDIZAJE
Utilice la inclusión o inserción de imágenes, mapa de imágenes y objetos en vídeo que puedan complementar la información contenida en las paginas del sitio web desarrollado en la actividad de evaluación 1.1
Manejo de Tablas
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos.
Las tablas más sencillas de HTML se definen con tres etiquetas:
Manejo de formularios
<map name="mapa_torres">
<area shape="rect" coords="120,170,154,180"
href="http://www.tamazuladegordiano.gob.mx/new/" />
</map>
Objetos
Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.
<object width="425" height="350">
<param name="movie" value="videos/colapsa.mpeg"></param>
<param name="wmode" value="transparent"></param>
<embed src="videos/colapsa.mpeg" type="application/ x-shockwave-flash" wmode="transparent" width="425" height="350">
</embed>
</object>
ACTIVIDAD DE APRENDIZAJE
Utilice la inclusión o inserción de imágenes, mapa de imágenes y objetos en vídeo que puedan complementar la información contenida en las paginas del sitio web desarrollado en la actividad de evaluación 1.1
Manejo de Tablas
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos.
Las tablas más sencillas de HTML se definen con tres etiquetas:
- <table> para crear la tabla,
- <tr>para crear cada fila
- <td> para crear cada columna.
- Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o de la columna. En este caso, HTML define la etiqueta <th> para indicar que una celda es cabecera de otras celdas.
- La etiqueta<caption> es para establecer la leyenda o título de una tabla. La etiqueta debe colocarse inmediatamente después de la etiqueta <table> y cada tabla sólo puede incluir una etiqueta <caption>.
Tablas complejas
Estas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
Ejemplo de fusión de columnas
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
Ejemplo de fusión de filas
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
Actividad de Aprendizaje
Agregar en tus páginas de tu proyecto web información de ella misma pero estructurado en tablas complejas.
Se crean formularios para que los usuarios interactúen con las aplicaciones web.
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
- <form>
- <input>.
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto).
Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input>, por lo que su definición formal y su lista de atributos es muy extensa:
- Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto:
Nombre <br/>
<input type="text" name="nombre" value="" />
- Cuadro de contraseña
La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.
Contraseña <br/>
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro de texto normal en un cuadro de contraseña.
- checkbox o "casillas de verificación"
son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.
Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado
El valor del atributo type para estos controles de formulario es checkbox. Si no se añade un texto al lado de la etiqueta<input /> del checkbox, el usuario sólo
ve un pequeño cuadrado sin ninguna información relativa a la finalidad de ese checkbox.
- Radiobutton
Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes.
Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.
Sexo <br/>
<input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer
El valor del atributo type para estos controles de formulario es radio. El atributo name se emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se seleccione otra opción.
- Botón de envío de formulario
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario:
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.
- Botón de envío de formulario
La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario:
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta.
- Ficheros adjuntos
Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.
Fichero adjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que permite navegar por los directorios y archivos del ordenador del usuario.
- Botón
Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico:
<input type="button" name="guardar" value="Guardar Cambios" />
Formularios avanzados
Algunos elementos adicionales para mejorar la estructura de los formularios creados son:
- <fieldset>
- <legend>
La etiqueta<legend> se incluye dentro de cada etiqueta<fieldset> y establece el título que muestra el navegador para cada agrupación de elementos.
las áreas de texto
Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto normal
Los atributos más utilizados en las etiquetas<textarea> son los que controlan su anchura y altura. La anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante rows, que indica directamente las filas de texto que serán visibles.
Descripción del producto <br/>
<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>
Las listas deplegables
Los tres tipos de listas desplegables disponibles.
- las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor.
- las que sólo permite seleccionar un valor pero muestra varios a la vez.
- la que muestra varios valores y permite realizar selecciones múltiples.
Para Programar las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor ve el siguiente ejemplo:
Sistema operativo <br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
Para Programar las listas que sólo permite seleccionar un valor pero muestra varios a la vez analice el siguiente ejemplo:
Sistema operativo <br/>
<select id="so2" name="so2" size="5">
<option value="windows" selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
Para Programar las listas que muestra varios valores y permite realizar selecciones múltiples analice el siguiente ejemplo:
<label for="so3">Sistema operativo</label> <br/>
<select id="so3" name="so3" size="5" multiple="multiple">
<option value="windows" selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
Actividad de Aprendizaje
Agregar en tus páginas de tu proyecto web un formulario con los elementos básicos (controles) que permitan a los usuarios interactuar con quien administrara el sitio web que estas desarrollando.
En el documento word que realizaste en el resultado de aprendizaje 1.1 donde describiste el proyecto web a realizar elaborar el reporte del sitio web que estas desarrollando. Los contenidos a agregar son:
- Encabezado del reporte de la rubrica 1.2
- La rubrica 1.2
- Breve descripción sin faltas ortográficas de lo que contiene cada una de las páginas que estas desarrollando
- El código html de cada una de las páginas desarrolladas
- la imagen de la pantalla (lo mas grande y claro que se pueda) de cada una de las paginas desarrolladas.
GUARDARLO EN LA CARPETA DE TU PROYECTO WEB Y COMPARTIRLA EN ONE DRIVE ENVIANDO EL LINK AL CORREO jvivast@hotmail.com
