UNIDAD 2.

LENGUAJE DE
MARCADO
2.1. INTRODUCCIÓN AL
LENGUAJE DE MARCADO
El lenguaje de marcado

• Un lenguaje de marcado es también

conocido como lenguaje de marcas, éste
trata de codificar un documento que es
conformado por “marcas” también
conocidas como etiquetas, las cuales
estructuran la información dentro de una
página en estilo HTML o con estilos de
programación específicos para la web como
PHP, Java, SAP, etc.
• Los lenguajes de marcado suelen confundirse con lenguajes
de programación. Sin embargo, no son lo mismo, ya que el
lenguaje de marcado no tiene funciones aritméticas o
variables, como sí poseen los lenguajes de programación.
• Los lenguajes de marcas surgieron dada la
gran variedad de formatos existentes a la
hora de archivar documentos y de los
problemas que se planteaban cuando se
intercambiaban archivos con las
consiguientes pérdidas de formato y otras
Características.
• Así nació un lenguaje especial normalizado
internacional para la formulación de este tipo
de reglas llamado Standard Generalized
Markup Language o SGML [11]. SGML no es
pues, un lenguaje en sí mismo, sino un
metalenguaje y de él se deriva el lenguaje
HTML
• Un lenguaje de marcado cumple con dos objetivos
esenciales a la hora de diseñar y procesar un documento
digital:
Especifica las operaciones tipográficas y las funciones que debe ejecutar el
programa navegador/visualizador sobre dichos elementos. Las operaciones
tipográficas son instrucciones de formato que se aplican a cada uno de los
elementos de un documento digital

Separa un texto en los elementos de los que se compone, como por ejemplo un
párrafo, un capítulo, un encabezamiento, etc.
• Un lenguaje de marcado o de marcas
se basa en instrucciones “WEB”, es
decir, etiquetas de programación que
podemos estructurar de manera
manual o automática mediante
programas de diseño como Adobe
Dreamweaver, Adobe Muse, Web
Evolution x6, etc
Existen 3 utilizaciones básicas de los lenguajes de
marcas:

Los que sirven principalmente para describir el

contenido (por ejemplo, las bases de datos).

Los que sirven para definir el formato (por

ejemplo, los procesadores de textos).

Los que realizan las dos funciones indistintamente

(por ejemplo, el lenguaje HTML).
• El lenguaje de marcas más extendido es el
HTML ("HyperText Markup Language",
Lenguaje de marcado de hipertexto),
fundamento del World Wide Web
(entramado de comunicación de alcance
mundial).
• Los sistemas de programación que utilizan el lenguaje de marcado
son varios por lo que a continuación se presentan algunos de los
más utilizados para los medio web:

HTML Se determinan estos lenguajes como

base por la gran compatibilidad que se
tiene entre los distintos compiladores
XML
de los sistemas como; Mac, Windows,
Linux, Android, etc.
XHTML
¿Qué es lo que determinan los lenguajes de
marcado?

• Estos determinan una serie de

instrucciones que son compiladas por
el sistema operativo y las representa
de tal forma que se puedan
interpretar por el usuario, es decir,
las instrucciones determinan el orden
de los elementos al mostrarse y el
contenido de los efectos que podrá o
no contener.
HTML
• Lenguaje para formatear texto
con el fin de distribuir
documentos en Internet.
• Basta un editor de texto básico,
como el worpad, notepad de
windows para escribir el código
fuente, interpretado por un
navegador como MS-internet
Explorer 3.0, Navigator 3.0 o
superiores.
• La representación de las etiquetas
es; ‹ html ›, las instrucciones son
definidas en ingles y delimitan el
tamaño del documento, el color de
fondo, las imágenes que utilizara, el
orden de los menús que presentara,
entre otras opciones más.
En resumen..

• Los lenguajes de marcas , también denominados

lenguajes de marcado o lenguajes de descripción de
documentos, definen la estructura, la semántica y
controlan el procesamiento de un documento digital.
2.2.Representacion de
documentos
El objetivo de la representación de los documentos es el de traducir los mismos
a términos del sistema, es decir la codificación necesaria con la cual este
comprenda la información y la represente a los usuarios que la soliciten, los
documentos son alojados en un servidor el cual tiene el soporte necesario para
contenerlos y ejecutarlos cuando sea requerido.
 Las representaciones que Además la representación de
generaremos serán aptas los documentos se hace en
para su procesamiento por torno a criterios temáticos, y
parte de aplicaciones para ser más exactos, en
informáticas según diversos torno a criterios temáticos
modelos. analíticos.
Elección y selección de elementos de representación

Estas unidades de representación pueden tomar la forma de un descriptor

unitérmino, un descriptor sintagmático, una agrupación artificial de palabras...etc.
El elemento de representación está formado por tanto de una o más palabras que
forman un descriptor u otra construcción con valor representativo, de manera que
cada una de las partículas que forman dicho elemento de representación en
principio no poseen carga de significación autónoma.
Términos sencillos

La opción clásica y en Recuperación de Información es optar por los términos sencillos (palabras)
obtenidos directamente de los documentos. Este enfoque recibe el nombre de Bag of Words (literalmente
Bolsa de Palabras) y considera las palabras sencillas directamente como términos de indización,
asumiendo la correspondencia entre los términos y los conceptos que estos representan.
 MODELADO DE OBJETO DE DOCUMENTO

• El modelo de objeto de documento

(DOM) es una interfaz de
programación de aplicación (API)
para los documentos HTML y XML.
Facilita una representación
estructurada del documento y
define de qué manera los programas
pueden acceder, al fin de modificar,
tanto su estructura, estilo y
contenido.
• El DOM da una representación del documento como un grupo de
nodos y objetos estructurados que tienen propiedades y métodos.
Esencialmente, conecta las páginas web a scripts o lenguajes de
programación.
• En el DOM, los documentos tienen una estructura lógica que es muy
parecida a un árbol. Sin embargo, el DOM no especifica que los documentos
deban ser implementados como un árbol o un bosque, ni tampoco
especifica cómo deben implementarse las relaciones entre objetos.
• Con el Modelo de Objetos del Documento los programadores
pueden construir documentos, navegar por su estructura, y añadir,
modificar o eliminar elementos y contenido. Se puede acceder a
cualquier cosa que se encuentre en un documento HTML o XML, y
se puede modificar, eliminar o añadir usando el Modelo de
Objetos del Documento, salvo algunas excepciones.
2.3 Tipos de Datos Básicos

Lenguajes de Marcado
Tipos de Datos básicos
Este tema describe los tipos básicos de datos que pueden
aparecer como contenido de un elemento o valor de un atributo:
• Mayúsculas o minúsculas
En la definición de cada atributo se incluye información sobre la importancia que tiene para sus valores
la distinción entre mayúsculas y minúsculas.
CS
El valor distingue entre mayúsculas y minúsculas (es decir, los agentes de usuario interpretan "a" y "A" de manera
diferente).
CI
El valor no distingue entre mayúsculas y minúsculas (es decir, los agentes de usuario interpretan "a" igual que "A").
CN
No puede haber diferencias entre mayúsculas y minúsculas, p.ej., porque es un número o un carácter del conjunto de
caracteres del documento.
CA
La definición del elemento o atributo ya da la información sobre la distinción entre mayúsculas y minúsculas.
CT
Consultar la definición del tipo para detalles sobre la distinción entre mayúsculas y minúsculas.
Tipos de Datos básicos
• Cadenas de Texto: Ciertos atributos toman por valor un texto que
se supone debe ser "legible por humanos".
• URL’s: En general los URIs hacen distinción entre mayúsculas y
minúsculas. Puede haber URIs, o partes de URIs, donde la
diferencia no importe (p.ej., nombres de máquinas), pero la
identificación de éstas puede no ser fácil. Los usuarios deberían
considerar que en los URIs se distingue siempre entre mayúsculas
y minúsculas (para quedarse del lado de la seguridad).
Tipos de Datos básicos
• Colores: El tipo de valor de atributo "color" se refiere a las
definiciones de colores según se especifican en [SRGB] (Un espacio
estándar de colores por defecto para Internet). Un valor de color
puede ser o bien un número hexadecimal (anteponiendo un signo
"#") o uno de los siguientes dieciséis nombres de colores.
Tipos de Datos básicos
• Longitudes:
Píxeles (Pixels): El valor %pixel es un entero que representa un número de píxeles del lienzo
(papel, pantalla). Así, el valor "50" significa cincuenta píxeles.

Longitud (Length): El valor %lenght puede ser o bien un %Pixel; o bien un porcentaje del
espacio horizontal o vertical disponible. Así, el valor "50%" significa la mitad del espacio
disponible.

•Multilongitud (MultiLength): El valor %MultiLength; puede ser un %Length; o una longitud

relativa . Una longitud relativa tiene la forma "i*", donde "i" es un entero. Los agentes de usuario,
cuando reparten espacio entre los elementos que compiten por ese espacio, adjudican primero
las longitudes en píxeles y en porcentajes, y después dividen el espacio sobrante entre las
longitudes relativas. Cada longitud relativa recibe una porción del espacio disponible que es
proporcional al entero que precede al "*". El valor "*" es equivalente a "1*". Así, si hay disponibles
60 píxeles de espacio después de haber adjudicado el agente de usuario el espacio en píxeles y
en porcentajes, y las longitudes relativas que deben asignarse son "1*", "2*" y "3*", se asignarán
10 píxeles al 1*, 20 píxeles al 2* y 30 píxeles al 3*.
Tipos de Datos básicos
• Tipos de Contenido: Ejemplos de tipos de contenido son
"text/html", "image/png", "image/gif", "video/mpeg", "text/css", y
"audio/basic".
• Códigos de Idioma: El valor de los atributos cuyo tipo es un código
de idioma %LanguageCodese refiere a un código de idioma.
• Codificaciones de Caracteres: Los atributos "charset" %Charset;se
refieren a una codificación de caracteres en HTML: ISO-8859-1 y
en HTML5: Unicode UTF-8
Tipos de Datos básicos
• Fechas y Horas: La ISO8601 permite muchas opciones y
variaciones en la representación de fechas y horas. La
especificación actual usa uno de los formatos descritos en el perfil
DATETIME.
El formato es:
AAAA-MM-DDThh:mm:ssDZH

donde:
AAAA = año con cuatro dígitos
MM = mes con dos dígitos (01=enero, etc.)
DD = día del mes con dos dígitos (de 01 a 31)
hh = hora con dos dígitos (de 00 a 23) (NO se permite am/pm)
mm = minuto con dos dígitos (00 a 59)
ss = segundo con dos dígitos (00 a 59) DZH = designador de zona
horaria
Tipos de Datos básicos
• Tipos de Vínculos: Los autores pueden usar los siguientes tipos de
vínculos reconocidos, enumerados aquí junto con sus
interpretaciones convencionales. Los agentes de usuario, los
motores de búsqueda, etc. pueden interpretar estos tipos de
vínculos de diferentes maneras.
Tipos de Datos básicos
Alternate
Designa una versión alternativa del documento en que aparece el vínculo. Cuando se usa con el atributo hreflang, implica que hay una versión traducida del documento. Cuando se usa conjuntamente con el
atributo media, implica que hay una versión diseñada para un medio (o medios) diferentes.
Stylesheet
Se refiere a una hoja de estilo externa. Véase la sección sobre hojas de estilo externas para más detalles. Se usa junto al tipo de vínculo "Alternate" para ofrecer hojas de estilo alternativas seleccionables por el
usuario.
Start
Se refiere al primer documento de un conjunto de documentos. Este tipo de vínculo dice a los motores de búsqueda qué documento es considerado por el autor como el punto de inicio de un conjunto.
Next
Se refiere al siguiente documento en una secuencia lineal de documentos. Los agentes de usuario pueden optar por precargar el documento marcado como "next", para reducir el tiempo de carga aparente.
Prev
Se refiere al documento anterior en una serie ordenada de documentos. Algunos agentes de usuario también soportan el sinónimo "Previous".
Contents
Se refiere a un documento que sirve como tabla de contenidos. Algunos agentes de usuario también soportan el sinónimo ToC (de "Table of Contents").
Index
Se refiere a un documento que proporciona un índice para el documento actual.
Glossary
Se refiere a un documento que proporciona un glosario de términos que pertenecen al documento actual.
Copyright
Se refiere al aviso de copyright del documento actual.
Chapter
Se refiere a un documento que actúa como capítulo en una colección de documentos.
Section
Se refiere a un documento que actúa como sección en una colección de documentos.
Subsection
Se refiere a un documento que actúa como subsección en una colección de documentos.
Appendix
Se refiere a un documento que actúa como apéndice en una colección de documentos.
Help
Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)
Bookmark
Se refiere a una señal de lectura. Una señal de lectura (bookmark) es un vínculo a un punto de entrada importante dentro de un documento extenso. Se puede utilizar el atributo title, por ejemplo, para dar un rótulo
a la señal de lectura. Obsérvese que pueden definirse varias señales de lectura en cada documento.
Tipos de Datos básicos
• Descriptores de Medios: La siguiente es una lista de
los descriptores de medios reconocidos:

screen
Para pantallas no paginadas de computadora.
tty
Para medios que utilicen una cuadrícula de caracteres de ancho fijo, como teletipos, terminales y dispositivos portátiles con posibilidades limitadas de representación.
tv
Para dispositivos tipo televisión (baja resolución, en color, desplazamiento limitado).
projection
Para proyectores.
handheld
Para dispositivos de mano (pantalla pequeña, monocromos, gráficos por mapas de bits, ancho de banda limitado).
print
Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentación preliminar a la impresión.
braille
Para dispositivos táctiles braille.
aural
Para sintetizadores de voz.
all
Apropiado para todos los dispositivos.
Tipos de Datos básicos
• Datos de Scripts: Los datos de scripts pueden aparecer como contenido del elemento SCRIPT y como valor
de los atributos de eventos intrínsecos. Los agentes de usuario no deben evaluar los datos de script como
código HTML, sino que deben pasarlos tal y como están como datos para un motor de scripts. La
importancia de la distinción entre mayúsculas y minúsculas en los datos de scripts depende del lenguaje de
programación del script.
• Datos de hojas de Estilo: Los datos de hojas de estilo pueden aparecer como contenido de un
elemento STYLE y como valor de un atributo style . Los agentes de usuario no deben evaluar los datos de
estilo como código HTML. La importancia de la distinción entre mayúsculas y minúsculas en los datos de
estilo depende del lenguaje de la hoja de estilo.
• Nombres de Marcos de Destino: Excepto los nombres reservados enumerados a
continuación, los nombres de marcos destino deben empezar con un carácter alfabético (a-z A-Z). Los
agentes de usuario deberían ignorar otros nombres de destino.

Los siguientes nombres de destino están reservados y tienen significados especiales.

_blank
El agente de usuario debería cargar el documento designado en una ventana nueva y sin nombre.
_self
El agente de usuario debería cargar el documento en el mismo marco que el elemento que hace referencia a
este destino.
_parent
El agente de usuario debería cargar el documento en el FRAMESET padre inmediato del marco actual. Este
valor es equivalente a _self si el marco actual no tiene padre.
_top
El agente de usuario debería cargar el documento en la ventana original completa (cancelando así todos los
demás marcos). Este valor es equivalente a _self si el marco actual no tiene padre.
2.4 Estructura global de un
documento.
El HTML es uno de los primeros lenguajes de marcas que surgieron.
Este lenguaje servirá como base para explicar la estructura general
de los lenguajes de marcado.
 2.4 Estructura global de un documento.
• La mayoría de los efectos se especifican de la misma forma:
rodeando el texto que se quiere marcar entre dos etiquetas o
directivas (tags, en inglés).
 2.4 Estructura global de un documento.
• Los tags pueden tener uno ó más atributos.

• Los tags pueden contener otros tags.

 2.4 Estructura global de un documento.
• Un documento HTML comienza con la etiqueta <html>, y termina
con </html>.

• El encabezamiento, delimitado por <head> y </head>

• Lleva la directiva <title>, que permite especificar el título del

documento.
 2.4 Estructura global de un documento.
• El cuerpo, delimitado por <body> y </body>,
donde reside la información del documento.
2.4 Estructura global de un documento.
2.4 Estructura global de un documento.
2.5 Elementos básicos: textos,
vínculos, listas, tablas, objetos,
imágenes y aplicaciones
Sintaxis
Caracteres:
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque
los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque
preformateado <pre>.

Marcadores, marcas o etiquetas (tags):

Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los
marcadores constan de una marca inicial < ...> , que da el nombre y atributos del elemento, seguida del
contenido ó secuencia de caracteres y una marca final </...>.
Las marcas iniciales se escriben entre los símbolos '<' y '>' (menor y mayor) y las finales entre '</' y '>' (menor,
barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que 'Hola Mundo' es una cabecera de nivel uno.
Algunos elementos sólo tienen una marca inicial (por ejemplo el tag <hr> que representa una línea horizontal
y <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de
línea por cada una de ellas. ).
Formateo de párrafos o bloques:
El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos
de línea son ignorados por los navegadores que interpretan html.
Para agregar un retorno de línea es necesario usar el tag único <br>.
Elemento <hr /> inserta un línea además de un retorno de línea
<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y
que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen
izquierdo y derecho del texto, para que se diferencie de los demás.
Efecto visual
Tipos de letras
La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de
HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.

Para un documento completo podría usar las fuentes de google con un línea en el head como está:

<link href='//fonts.googleapis.com/css?family=Cuprum:400italic,400,700italic,700' rel='stylesheet' >

Imagenes
Colocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El
tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran mayoría de los tags
de html, no necesita un cierre. El atributo "src" es imprescindible para poder colocar una imagen.
Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se
escribe así: <img src="ruta">, donde "ruta" es la dirección o la url dónde se encuentra situada la
imagen. Solo es posible cargar imagenes gif, jpg y png.
El tag <img> tiene dos atributos que debemos considerar alt y title, básicamente los dos cumplen la
misma función, mostrar un título al estar el mouse sobre la imagen. No todos los navegadores
soportan ambos, por ejemplo iExplorer solo soporta title. Para fines de validación es necesario
incluir alt=''.
Si la imagen es usada como hipervínculo, el valor por defecto es 1px. Si no requerimos el bordees
necesario agregar el atributo border='0' sobre todo si usamos iExplorer de preferencia en una hoja
de estilo. Por ejemplo.
Hiperenlaces

Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos
hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:
href
Este atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el elemento actual (el
origen del vínculo) y el destino del vínculo definido por este atributo. El destino de un vinculo puede ser: una página web
interna o externa, o un título, imagen, parrafo dentro de la misma página con el vinculo de origen (enlaces internos)
target
Destino del hiperenlace
self: Abrir el enlace en la misma ventana que se encuentra el documento actual (valor por defecto). En el caso que existe
un iframe, la ventana se abrirá en el mismo marco
blank: independientemente de si el enlace esta o no dentro de un iframe, el valor '_blank' creará una ventana nueva
Listas

Listas desordenadas
Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista
comenzará con una etiqueta <li>.

•Café
<ul> <li>Café</li> <li>Leche</li> <li>Té</li> </ul> •Leche
•Té

Listas numeradas u ordenadas

Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li>.

<ol> <li>Café</li> <li>Leche</li> <li>Té</li> </ol> 1.Café

2.Leche
3.Té
Listas de glosario
Este tipo de lista denominado 'definition list' requiere tres tags(<dl>, <dt> y <dd>) para destacar el
texto en cuestión. el tag puede utilizarse para construir definiciones (por ejemplo: recetas).
Para construir una lista, el texto debe escribirse entre los tags de definición de listas <dl> y </dl>.
Los tags <dt> y su correspondiente </dt> son un definición de término y <dd> así como su
correspondiente </dd> son una descripción.
Las listas a su vez pueden anidarse, esto es colocarse unas dentro de otras. Los márgenes de cada
lista, los tipos de letra, numeración, colores, etc. podrán ser ajustados desde una hoja de estilos
CSS. Por ejemplo:
Tablas
Una tabla HTML5 puede ser considerada de manera simple como un grupo de filas donde cada una
de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML,
son definidas usando tags.
Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag
HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple).
Adenás de los tags thead y tbody,
Las tablas en html 5 no usan atributos de presentación. Como los atributos de presentación van
siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden
lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación tales
como "border".
Las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud
en el código. Cuando el contenido de una celda debe ser vacío, use siempre un espacio en blanco
(&nbsp;) en su lugar.

Esto hará que tu página sea compatible, dado que algunos navegadores tienen problemas al mostrar
celdas vacías.
Estado del tiempo
Usando enlaces a otra página para obtener el pronostico del tiempo de nuestra ciudad.
La línea cinco es una llamada a una hoja de estilo.
Observe que las líneas 1,2,3 y 12hacen referencia a la misma cadena. No cambie un solo carácter
de está cadena o su página dejara de funcionar.
iframes
Un iframe es un marco flotante que puede estar colocado en cualquier parte de la página. Las
propiedades de un iframe son:

Propiedad scrolling,scrolling='auto': automático, scrolling='YES':forzado, scrolling='NO': Valor

por defecto.

Propiedad frameborder: 0 sin borde, 1 o superior ancho del marco

Altura y su ancho: height='390' width='640'
2.6 Estructura y disposición.
<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente
encontraremos el menú, logotipo, y encabezados del sitio.

<nav>: Dentro de nav pondremos siempre las ligas más importantes del sitio.

<aside> Representa una sección de una página que consiste en contenido que está
tangencialmente relacionado con el contenido que le rodea, que podría ser considerado
independiente de ese contenido.

<section> se usa para representar un bloque de nuestra página que tiene valor semántico, es decir,
que aporta un significado a la página. Realmente si tenemos que clasificar por la importancia del
significado, el ranking sería: article sería la etiqueta que contiene la información más relevante,
section la que contiene información menos relevante, y div que contiene información que no aporta
significado ninguno.
Un aspecto importante de la etiqueta section es que debe tener un título. La etiqueta section crea
una sección de manera explícita en el outline del documento, por lo tanto debemos siempre
asignarle un encabezado (h1-h6) ya que si no se le aplicará directamente untitle.

Por lo tanto, una buena forma de identificar cuando es necesario usar una etiqueta section es
cuando tengamos la necesidad de aplicar un encabezado.

<article> representa una composición auto-contenida en un documento, página, una aplicación o en

el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la
sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada
de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento
independiente del contenido.
Cuando los elementos <article> están anidados, los internos representan artículos relacionados con
el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que
representa la entrada del blog.

Los datos del autor de un elemento <article> pueden ser proporcionados a través del
elemento <address>, pero no se aplica a los elementos <article>anidados.

La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el

atributo pubdate atributo de un elemento <time>.

<address>. Es el elemento encargado de contener la información de contacto con los autores del
documento.
 tributo descripción valor por omisión
title Texto informativo o título del elemento. Texto legible. Sensible a M/m.. Lo fija el navegador.
Suele mostrarse a modo de 'tool tip'.

id Le da un nombre al elemento que lo Un nombre único. Sensible a M/m. Lo fija el navegador.

diferencia de todos los demás del
documento.

class Asigna nombres de clases al elemento. Por Lista de clases separadas por espacio en Lo fija el navegador.
defecto, clases CSS. blanco. Sensible a M/m. cdata

style Permite especificar información de estilo1. Declaraciones de estilo. Lo fija el navegador.

Por defecto, estilos CSS.

lang Información sobre el idioma del contenido Un código de idioma. Lo fija el navegador. PD.: "desconocido".
del elemento y del valor de sus atributos.

dir Indica la dirección de texto y tablas. Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.

Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc,
pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este
en el 'pie' de la pagina.
2.7 Formularios
Los formularios son una característica del estándar HTML que permite a los autores llevar datos del
exterior al interior de nuestro sistema. Esto se logra mediante componentes que transportan diversos
tipos de datos para múltiples aplicaciones donde tu imaginación es el límite

Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios
elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes
atributos:

method indica cómo se enviarán las respuestas "post" es el valor que envía los datos al agente de
procesamiento almacenándolos en el cuerpo del formulario, en tanto que "get" envía los datos
agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación.

action indica la dirección a la que se enviará la información (una url o dirección de correo
electrónico: mailto:dirección_de_correo@equipo)
target nos permite mostrar el resultado en la ventana deseada:
target = '_blank' Fuerza que el documento referenciado por el enlace sea mostrado en una
nueva ventana del navegador.
target = '_self' El documento referenciado se mostrara en la misma ventana

La sintaxis genérica para la etiqueta form:

La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten
al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada
en el atributo action de la etiqueta form, por el método indicado en el atributo method.
Un ejemplo básico es:

Se puede insertar cualquier elemento HTML en una etiqueta form (como botones,
hipervínculos, tablas y texto), pero los elementos interactivos son los más interesantes. Estos
elementos interactivos son:
•La etiqueta input: Todos los botones y casillas de texto
•La etiqueta textarea: una casilla de texto
•La etiqueta select: una lista de opciones múltiples
Opción
Reset
Send 1
Opción 2
Opción 3
Ejemplo de un formulario:
Fieldset
La etiqueta “fieldset” se usa en formularios para agrupar campos relacionados entre sí.
La sintaxis es:
<fieldset>Ejemplo<fieldset>

El efecto que conseguimos gracias a la etiquetas fieldset es un rectángulo enmarcando el texto que
esté incluido dentro de él.
Ejemplo: Observe que fieldset se ensanchará al 100% de la página. Modificar las caraterísticas de
este elemento es tema de CSS.
Legend

La etiqueta <legend> se utiliza para asignar un título a un fieldset.

La sintaxis es:
<fieldset><legend>Leyenda</legend>Ejemplo<fieldset>

LeyendaEsto es un fieldset con legend

Label

La etiqueta <label> se utiliza para adjuntar información a los controles.

El valor del atributo for debe ser igual al valor id del elemento input para que los reconozca como
asociados.
outgroup
La etiqueta <optgroup> se utiliza para agrupar opciones relacionada, por medio de un título común,
en los menús desplegables.
Ejemplo de formulario con validación

Observe que en la línea 2 el código action='#' indica que los datos del formulario serán enviados a la
página que lo envia

En la línea 11 type='email'. Un nuevo tipo de datos soportado por html5

Cuando es necesario que un campo tome valor usaremos en la etiqueta input el atributo required.
Si el usuario deja este campo en blanco, dependiendo del navegador obtendremos un mensaje de
error, o simplemente colocarán el cursor de escritura al primer campo vacio. Líneas 8, 13 y 17

En html5 se introduce el atributo placeholder cuyo valor es un mensaje para que el usuario sepa
que información debe introducir (Líneas 7 y 12).
Envío de datos
Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se
envían a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos
representados por el nombre del elemento formulario, un signo igual ('=') y luego el valor asociado.
Estos pares nombre/valor se separan unos de otros mediante el símbolo de unión ('&'). Por lo tanto,
los datos que se envían al script se verán así:
Con el método get (enviar los datos mediante una dirección URL), la URL será una cadena como la
siguiente: