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

LENGUAJE DE MARCADO

Un lenguaje especializado basado en SGML es el que se emplea para redactar la versión digital del Oxford English Dictionary. Permite búsquedas sofisticadas, además de facilitar la conversión a HTML.

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

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 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 poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores.

CLASES DE LENGUAJES DE MARCADO

Se suele diferenciar entre tres clases de lenguajes de marcado, aunque en la práctica pueden combinarse varias clases en un mismo documento. Por ejemplo, el HTML contiene etiquetas puramente procedimentales, como la B de bold (negrita), junto con otras puramente descriptivas (‘BLOCKQUOTE, el atributo HREF). El HTML también incluye el elemento PRE, que indica que el texto debe representarse tal y como está escrito.

Marcado de presentación

El marcado de presentación es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información. El marcado de presentación resulta más fácil de elaborar, sobre todo para cantidades pequeñas de información. Sin embargo, resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado más estructurados.

Marcado de procedimientos

El marcado de procedimientos está enfocado hacia la presentación del texto, sin embargo, también es visible para el usuario que edita el texto. El programa que representa el documento debe interpretar el código en el mismo orden en que aparece. Por ejemplo, para formatear un título, debe haber una serie de directivas inmediatamente antes del texto en cuestión, indicándole al software instrucciones tales como centrar, aumentar el tamaño de la fuente, o cambiar a negrita. Inmediatamente después del título deberá haber etiquetas inversas que reviertan estos efectos. En sistemas más avanzados se utilizan macros o pilas que facilitan el trabajo.

Marcado descriptivo

El marcado descriptivo o semántico utiliza etiquetas para describir los fragmentos de texto, pero sin especificar cómo deben ser representados, o en qué orden. Los lenguajes expresamente diseñados para generar marcado descriptivo son el SGML y el XML.

Una de las virtudes del marcado descriptivo es su flexibilidad: los fragmentos de texto se etiquetan tal como son, y no tal como deben aparecer. Estos fragmentos pueden utilizarse para más usos de los previstos inicialmente. Por ejemplo, los hiperenlaces fueron diseñados en un principio para que un usuario que lee el texto los pulse. Sin embargo, los buscadores los emplean para localizar nuevas páginas con información relacionada, o para evaluar la popularidad de determinado sitio web.

QUÉ ES JSP

JSP es un acrónimo de Java Server Pages, que en castellano vendría a decir algo como Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Las páginas JSP están compuestas de código HTML/XML mezclado con etiquetas especiales para programar scripts de servidor en sintaxis Java. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.

MOTOR JSP

El motor de las páginas JSP está basado en los servlets de Java -programas en Java destinados a ejecutarse en el servidor-, aunque el número de desarrolladores que pueden afrontar la programación de JSP es mucho mayor, dado que resulta mucho más sencillo aprender que los servlets.

En JSP creamos páginas de manera parecida a como se crean en ASP o PHP -otras dos tecnologías de servidor-. Generamos archivos con extensión .jsp que incluyen, dentro de la estructura de etiquetas HTML, las sentencias Java a ejecutar en el servidor. Antes de que sean funcionales los archivos, el motor JSP lleva a cabo una fase de traducción de esa página en un servlet, implementado en un archivo class (Byte codes de Java). Esta fase de traducción se lleva a cabo habitualmente cuando se recibe la primera solicitud de la página .jsp, aunque existe la opción de precompilar en código para evitar ese tiempo de espera la primera vez que un cliente solicita la página.

QUÉ ES ASP

ASP (Active Server Pages) es la tecnología desarrollada por Microsoft para la creación de páginas dinámicas del servidor. ASP se escribe en la misma página web, utilizando el lenguaje Visual Basic Script o Jscript (Javascript de Microsoft).

Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de que se envíe la página a través de Internet al cliente. Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear la página final que verá el cliente. El cliente solamente recibe una página con el código HTML resultante de la ejecución de la página ASP. Como la página resultante contiene únicamente código HTML, es compatible con todos los navegadores.

El tipo de servidores que emplean este lenguaje son, evidentemente, todos aquellos que funcionan con sistema Windows NT, aunque también se puede utilizar en un PC con windows 98 si instalamos un servidor denominado Personal Web Server. Incluso en sistemas Linux podemos utilizar las ASP si instalamos un componente denominado Chilisoft, aunque parece claro que será mejor trabajar sobre el servidor web para el que está pensado: Internet Information Server.

Con las ASP podemos realizar muchos tipos de aplicaciones distintas. Nos permite acceso a bases de datos, al sistema de archivos del servidor y en general a todos los recursos que tengaV el propio servidor. También tenemos la posibilidad de comprar componentes ActiveX fabricados por distintas empresas de desarrollo de software que sirven para realizar múltiples usos, como el envio de correo, generar gráficas dinámicamente, y un largo etc.

Actualmente se ha presentado ya la segunda versión de ASP, el ASP.NET, que comprende algunas mejoras en cuanto a posibilidades del lenguaje y rapidez con la que funciona. ASP.NET tiene algunas diferencias en cuanto a sintaxis con el ASP, de modo que se ha de tratar de distinta manera uno de otro.

QUÉ ES CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores…

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.

EJEMPLO:

<p style="color:green;font-weight:bold">El párrafo saldrá con color verde y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:

Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.

Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.

COLOR EN LOS ENLACES

Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta <body>?

Para hacer esto utilizaremos el atributo style dentro del enlace:

<a href="mienlace.html" style="color:red">

Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento. Espaciado entre líneas

Con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 25 pixels:

<p style="line-height: 25px;">

Un párrafo normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas

</p>

ESPACIADO ENTRE CARACTERES

Se puede definir también el espacio entre cada carácter. Esto se hace con el atributo de CSS letter-spacing. Veamos un ejemplo:

<p style="letter-spacing:12cm">

Este párrafo tiene las letras espaciadas por 1 centímetro.

</p>

Este atributo, al igual que ocurre con muchos otros de CSS, no está soportado por todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.

ENLACES SIN SUBRAYADO

Uno de los efectos más significativos y fáciles de realizar con CSS es eliminar el subrayado de los enlaces de una página web. Existe un atributo que sirve para definir la decoración de un texto, si está subrayado, tachado, o si no tiene ninguna de estas “decoraciones”. Es el atributo text-decoration, en este caso indicaremos en un enlace que no queremos decoración:

<a href="mipagina.html" style="text-decoration:none">

INCLUIR ESTILOS PARA TODO UN SITIO WEB

Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Veamos ahora todo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos

Para ello vamos a colocar la etiqueta <LINK> con los atributos

rel=”STYLESHEET” indicando que el enlace es con una hoja de estilo.

type=”text/css” porque el archivo es de texto, en sintaxis CSS.

href=”estilos.css” indica el nombre del fichero fuente de los estilos.

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>

Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. </p>

</body>
</html>

DHTML (HTML DINÁMICO)

DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la página que antes.

Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc.

DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.

Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript o VBScript.

Aclaración: DHTML también puede englobar la programación en el servidor.

QUÉ ES JAVASCRIPT

Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web.

Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad con la mayoría de los navegadores modernos, es el lenguaje de programación del lado del cliente más utilizado.

Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal vez el único, con que cuenta este lenguaje es el propio navegador.

Javascript es el siguiente paso, después del HTML, que puede dar un programador de la web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en la programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un poco de práctica.

Entre las acciones típicas que se pueden realizar en Javascript tenemos dos vertientes. Por un lado los efectos especiales sobre páginas web, para crear contenidos dinámicos y elementos de la página que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear páginas interactivas con programas como calculadoras, agendas, o tablas de cálculo.

Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños scripts, pero también de programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Además, Javascript pone a disposición del programador todos los elementos que forman la página web, para que éste pueda acceder a ellos y modificarlos dinámicamente.

Con Javascript el programador, que se convierte en el verdadero dueño y controlador de cada cosa que ocurre en la página cuando la está visualizando el cliente.