PROGRAMACIÓN

ETIQUETAS HTML 5.2

Etiqueta Descripción Atributos principales
html engloba todo el documento lang
head delimita el encabezado del documento
title título del documento (se muestra en la pestaña del navegador)
base / URI base para direcciones relativas href, target
link / enlace a otros archivos (hoja de estilo, etc.) href, rel, media, type, title
meta / metainformación sobre el documento name, content, charset
style hoja de estilo incluida en el documento type, title
body delimita el cuerpo del documento
article artículo
section sección
nav navegación
aside lateral
h1 a h6 encabezado (de nivel 1 a 6)
header cabecera
footer pie
address dirección (información sobre el autor)
p párrafo
hr / separador
div división
blockquote cita larga (que incluye varios párrafos) cite
pre texto preformateado
main principal
figure ilustración
figcaption pie de ilustración
br / salto de línea
wbr posible salto de línea
a hiperenlace href, target, download, rel, type
span contenedor de texto genérico
strong importante
em énfasis
sub subíndice
sup superíndice
abbr abreviatura title
b atención
cite obra
data datos value
dfn definición title
kbd teclado
i tecnicismo
mark resaltado añadido posteriormente, no en el original
q cita cite
s incorrecto
small comentario
time fecha y hora datetime
u sonido inarticulado
code código (de programa de ordenador)
samp salida (de programa de ordenador)
var variable (de programa de ordenador)
bdo dirección de escritura dir
bdi ignorar dirección de escritura dir
ins texto insertado cite, datetime
del texto borrado cite, datetime
picture imagen múltiple para diferentes resoluciones o densidades
img / imagen alt, src, usemap, ismap, width, height
iframe marco incrustado en el documento src, srcdoc, name, sandbox, width, height
embed src, type, width, height
object objeto data, type, width, height
param / parametro para <objeto> name, value
video src, poster, preload, autoplay, loop, muted, controls, width, height
audio src, preload, autoplay, loop, muted, controls
source origen de <img>, <audio> o <video> src, type
track kind, src, srclang, label, default
map mapa de imagen name
area / área en mapa de imagen alt, coords, href, hreflang, rel, shape, target, type
ol lista ordenada reversed, start, type
ul lista no ordenada
li elemento de lista (ordenada o no ordenada) value
dl lista de definición
dt término en lista de definición
dd definición en lista de definición
table tabla border
caption leyenda de tabla
colgroup grupo de columnas span
tbody cuerpo de tabla (grupo de filas)
thead cabecera de tabla (grupo de filas)
tfoot pie de tabla (grupo de filas)
tr fila
td celda colspan, rowspan, headers
th celda de cabecera colspan, rowspan, headers, scope, abbr
col columna span
form formulario accept-charset, action, autocomplete, enctype, method, target
label etiqueta de un control form, for
input / control (hay varios tipos) type (submit, reset, button, text …)
button botón name, type, value, form
select caja de lista name, multiple, size, …
datalist
optgroup grupo de opciones en una caja de lista label
option opción de caja de lista label, selected, value
textarea área de texto name, cols, rows, …
output cálculo name, for
progress barra de progreso value, max
meter indicador value, min, max, low, high, optimum
fieldset grupo de controles name, disabled
legend leyenda de grupo de controles
details desplegable
summary leyenda para <details>
dialog cuadro de diálogo de una aplicación
script script src, type, charset, async, defer
noscript contenido a mostrar en navegadores que no admiten <script>
template plantillas utilizables por scripts
canvas zona de dibujo utilizable por script width, height
ruby notación ruby
rb elemento de notación ruby (base)
rt elemento de notación ruby (texto)
rtc elemento de notación ruby (contenedor)
rp elemento de notación ruby (paréntesis)
!DOCTYPE tipo de documento (versión de html empleada)
<!– … –> comentario (sólo visible en el código fuente)
Anuncios
PROGRAMACIÓN

INTRODUCCIÓN A HTML

Una página web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero no es así, está compuesta por multitud de diferentes ficheros, como son las imágenes, los posibles vídeos y lo más importante: el código fuente.

El código de las páginas está escrito en un lenguaje llamado HTML, que indica básicamente donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro.

El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en negrita</B>.

PARTES DE UN DOCUMENTO HTML

Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes </body>
</html>

 

PROGRAMACIÓN

HTML5

HTML pertenece a la familia de los lenguajes de marcado y es utilizado para la elaboración de páginas web. Actualmente HTML se encuentra en su versión HTML5., la cual especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.

HTML5 soluciona la falta de un criterio para definir el contenido semántico de una página web agregando una serie de etiquetas destinadas a facilitar la estructura del documento desde el punto de vista de su significado:

  • section: Esta etiqueta sirve para agrupar elementos relacionados entre sí de forma temática.
  • header: Creada para incluir información destinada a ayudar en la navegación
  • nav: Esta etiqueta la utilizaremos para incluir el menú de navegación.
  • footer: Destinada a incluir la información sobre el elemento que lo contiene (autoría, propiedad, enlaces…)
  • aside: Su uso indicado es para agrupar el contenido a visualizar en la página, pero que no forma parte del contenido principal de la página.

Estas nuevas etiquetas permiten varios niveles de anidamiento entre sí, lo cual aporta un alto grado de complejidad a la estructura del documento, aunque aporta una enorme flexibilidad para estructurar correctamente el contenido de la página desde el punto de vista semántico.

En HTML5 la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico.

Estos son los componentes básicos del HTML:

<!DOCTYPE html> Lo primero que se encuentra en el código es la declaración del tipo de documento que se está mostrando. El DOCTYPE variará según el tipo de documento realizado.

html Tras declarar el tipo de documento, se indica que se inicia el documento HTML. Esta etiqueta se cierra cuando finaliza el documento. El atributo lang indica el idioma del juego de caracteres.

head En un documento HTML hay una cabecera dónde se colocan los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.

meta charset Obligatorio en HTML5, informa el juego de caracteres del documento, debería ser siempre utf-8. Como todo metadato debe ir dentro del head

title Es un tipo de metadato especial que proporciona el título de la página. Por motivos de posicionamiento (SEO) se recomienda que el meta title sea parecido al H1 del documento y a la URL de la página.

body En su interior está el contenido de la página.