Cargando

Ir a contenido


 


HTML5 – Creación de Documentos y Atributos

En este tutorial veremos los elementos más importantes definidos por HTML5, el document y metadata elements. Estos son los elementos que usamos para crear un documento HTML y describir su contenido. También se verán los atriburos HTML5.


Escrito por el ago 04 2013 19:57 html5 creación de documentos html5 crear docs


HTML5 – Creación de Documentos y Atributos


Esta es la parte menos interesante pero sin duda alguna es una de las más críticas. Cada documento HTML usa al menos una parte de estos elementos y en algunas ocasiones todos ellos, así que no está de más que sepamos usarlos de manera apropiada para la creación de documentos HTML5 correctos y generales.

Elementos de tipo document

Empecemos con los elementos de tipo document. Estos son los bloques que le dan forma a nuestro documento HTML y fija un contexto inicial para el navegador.

El elemento doctype

El elemento doctype es único en su categoría. Es una buena práctica comenzar cada documento HTML que creemos con un elemento de tipo doctype. Este es el elemento que le dice al navegador que estará tratando con HTML.
La mayoría de los navegadores de igual manera desplegará nuestro contenido de manera correcta si omitimos el doctype, pero es una mala práctica en confiar en que el navegador se comporte de esta manera.
La sintaxis correcta para aplicar un elemento de tipo doctype es la siguiente:
<!DOCTYPE HTML>

El elemento html

Este elemento es mayormente llamado el elemento raíz y el mismo indica el comienzo del HTML dentro de nuestro documento

La sintaxis es la siguiente:

<!DOCTYPE HTML>
<html>
Contenidos y elementos aqui
</html>

El elemento head

El elemento head contiene todos la metadatos del documento. En HTML, los metadatos le proporcionan al navegador la información acerca del contenido y el marcado en el documento, pero adicionalmente podemos incluir scripts y referencias a recursos externos tales como hojas de estilo CSS.

La sintaxis es la siguiente dentro del documento:

<!DOCTYPE HTML>
<html>
<head>
<title>Hello</title>
</head>
</html>

El elemento body

Este elemento encapsula el contenido de un documento HTML, es el opuesto del elemento head el cual encapsula los metadatos e información del documento. El elemento body siempre sigue luego del elemento head, lo que significa que es el segundo hijo en la estructura del elemento raíz html.

Veamos su sintaxis:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I like <code id="applecode">apples</code> and oranges.
</p>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos.jpg


Elementos de tipo metadata

Los elementos de tipo metadata nos permiten proveer información acerca del documento HTML. Ellos no son contenido por si mismos pero si proveen información del contenido que les seguirá. Los elementos de tipo metadata son agregados al elemento head.

Fijando un título a nuestro documento

El elemento title fija un título o nombre a nuestro documento. Los navegadores usualmente despliegan el contenido de este elemento en la parte superior de la ventana o pestaña.
Veamos como lo agregamos a nuestra estructura:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I like <code id="applecode">apples</code> and oranges.
</p>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos-2.jpg


Fijando la base para URL relativas

El elemento base fija una URL base, en la cual que links relativos, contenidos en el documento HTML serán resueltas. Un link relativo es uno que omite el protocolo, host y puerto de la URL y es evaluado contra otra URL. El elemento base también específica como los links son abiertos cuando un usuario hace click sobre ellos y como el navegador actúa luego de que un formulario ha sido ingresado.

Ya visto los elementos esenciales para el documento solo nos queda completar con el resto de los elementos que funcionan para los metadatos y de esa forma construir un documento HTML correcto y que pueda ser interpretado por cualquier navegador de la mejor manera.

Atributos
  • dir
El atributo dir especifica la dirección del texto contenido en un elemento. Los valores soportados para el mismo son:
  • ltr (texto de izquierda a derecha)
  • rtl (texto de derecha a izquierda)

Veamos un ejemplo sencillo de la aplicación del mismo:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p dir="rtl">This is right-to-left</p>
<p dir="ltr">This is left-to-right</p>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos-3.jpg

  • contextmenu
Este atributo nos permite definir el contexto de los elementos para los menús. Estos aparecen en la pantalla cuando el usuario los dispara por así decirlo, por ejemplo, cuando realizamos click derecho sobre algún elemento.
  • draggable
El atributo draggable forma parte del soporte de HTML5 para drag&drop y es usado para indicar cuando un elemento puede ser arrastrado.
  • dropzone
El atributo dropzone forma parte del soporte de HTML5 para drag&drop y es la contraparte del atributo draggable que se explicó anteriormente.
  • hidden
El atributo hidden es un atributo booleano que indica que un elemento no es relevante por lo tanto no estará presente visualmente en el documento. Los navegadores interpretan este atributo de manera que esconden el elemento de la vista del usuario. Veamos un ejemplo del mismo:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script>
var toggleHidden = function() {
var elem = document.getElementById("toggle");
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
} else {
elem.setAttribute("hidden", "hidden");
}
}
</script>
</head>
<body>
<button onclick="toggleHidden()">Toggle</button>
<table>
<tr><th>Name</th><th>City</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
<tr><td>Anne Jones</td><td>Paris</td></tr>
</table>
</body>
</html>

En este ejemplo definimos una tabla que contiene un elemento tr el cual representa una fila en la cual el atributo hidden está presente. Adicionalmente definimos un botón que al momento de ser presionado invoca el la función de Javascript toggleHidden que retira el atributo hidden.




HTML5-creacion-de-documentos-y-atributos-4.jpg

  • id
Uno de los atributos más conocidos es id, el cual permite asignar un identificador único a un elemento. Estos identificadores comúnmente son usados para aplicar estilos a algún elemento o seleccionar un elemento con Javascript. Veamos un ejemplo de cómo utilizamos el atributo id para aplicar un estilo a un elemento.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<style>
#w3clink {
background:grey;
color:white;
padding:5px;
border: thin solid black;
}
</style>
<body>
<p/>
<a id="w3clink" href="http://w3c.org">W3C web site</a>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos-5.jpg

  • spellcheck
El atributo spellcheck es usado para especificar si el navegador debe verificar la sintaxis de algún contenido. El uso de este atributo solo tiene sentido cuando es aplicado a algún elemento que el usuario pueda editar.
Veamos un ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos-6.jpg

  • style
El atributo style permite que definamos un estilo CSS directamente en un elemento, vemos:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a href="http://apress.com" style="background: grey; color:white; padding:10px">
Visit the Apress site
</a>
</body>
</html>
  • tabindex
Este atributo nos permite controlar el orden de los focos de los elementos cuando accedemos a ellos a través de la tecla tabular.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>Name: <input type="text" name="name" tabindex="1"/></label>
<p/>
<label>City: <input type="text" name="city" tabindex="-1"/></label>
</p>
<label>Country: <input type="text" name="country" tabindex="2"/></label>
</p>
<input type="submit" tabindex="3"/>
</form>
</body>
</html>




HTML5-creacion-de-documentos-y-atributos-7.jpg


Hemos podido aprender todo lo referente a los atributos y de qué manera pueden ser aplicados a los elementos en nuestro documento HTML. Esto con la finalidad de extender su funcionalidad de manera que se adapten a las necesidades de nuestro sitio web
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 04 2013 19:57
  •   Actualizado ago 04 2013 20:02
  •   Visitas 1.3K
  •   Nivel
    Profesional