Documentos HTML 5
En este artículo tratamos de presentar a detalle lo que HTML es a nivel conceptual. Nos fijamos en lo que es un lenguaje de marcas, lo que son las etiquetas HTML y cómo se compara con otros elementos importantes del rompecabezas de desarrollo de páginas web y el manejo de hojas de estilos CSS.
Vamos a explicar la estructura básica para crear sus propios archivos HTML de manera correcta.
DOCTYPE
La declaración DOCTYPE es la primera línea que se integra en un documento html. Antes de HTML5, esto podría ser un poco confuso ya que el código que se veía de la siguiente manera:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
En esta línea de código se define como un documento "público" y se define la disponibilidad, el DTD significa Document Type Definition, que declara la versión de HTML que se utiliza y la sección final es una URL que apunta a que el DTD se pueden encontrar.
Las palabras "sueltas", (o de transición) "estricto" y "marcos" se refieren a diferentes versiones de HTML 4, lo que permitió marcado un poco diferente. Estos eran esencialmente sólo para ayudar a los desarrolladores de transición desde versiones anteriores de HTML.
DOCTYPE en HTML 5
EN HTML 5 afortunadamente se simplifica la situación con un DOCTYPE refrescantemente y simple quedando de la siguiente manera:<!DOCTYPE HTML>
El DOCTYPE en HTML5 es muy simple y es compatible con todos los navegadores principales. Lo que se busca es un modo estándar para todos. El DOCTYPE también le ayuda a validar su código, lo que garantiza que las normas actuales se están cumpliendo. Cada página que usted cree debe usar un DOCTYPE y que el código sea plenamente compatible con los estándares de desarrolo.
El elemento Root
Después de la deficnión del DOCTYPE, el código HTML inicia. Esto es indicado por el elemento raíz(root) HTML. Si el código HTML completo es un árbol, esta es la raíz de donde brota todo lo demás.El elemento raíz se define por una "etiqueta".
<! DOCTYPE HTML>
<html lang="en" xml:lang="en">
<- Todo va aquí ->
</ html>
Tenga en cuenta que el elemento raíz incluye un atributo de idioma, en nuestro caso Español (es). Siempre hay que asegúrese de indicar el idioma adecuado para cada página.
Todo lo demás que vamos a añadir a esta página se encuentra en el interior del elemento raíz. Se trata del contenedor por cada trozo de información y parte del contenido, con la única excepción que es es el DOCTYPE.
El elemento HEAD
El siguiente elemento dentro del documento html es el HEAD o encabezado la cual se define de la siguiente manera.<head>
<!-- Código Integrado en esta sección -->
</head>
El contenido que se integra en esta sección es principalmente informativo, se define el título, descripción del documento, palabras claves, el juego de caracteres, etc.
En este es lugar es en donde tradicionalmente se cargan en importantes recursos externos.
Meta Tags
Las etiquetas meta se utiliza para definir los metadatos de la página. Los Metadatos adoptap muchas formas y pueden incluir palabras claves, autores, descripción del documento.Juego de caracteres
También se establece, el juego de caracteres que normalmente son UTF-8 y, esencialmente, le dice al navegador qué codificación de caracteres a usar.Sus páginas definitivamente debe incluir una indicación de que juego de caracteres a usar. No lo piense más, es sólo una de esas cosas que hay que hacer.
A continuación se muestra una declaración de conjunto de caracteres típicos en HTML5.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Titulo
Otro elemento que va dentro de el encabezado es el título del documento. Esta etiqueta es una pieza muy simple y se indica el título de la página que desea. He aquí un ejemplo:<title>Galería de Diseño Tutoriales | Design Mexico</title>
Enlaces y Scripts
Lo último que vamos a discutir son las etiquetas de referencia que permiten la inclusión de los recursos externos. En una página web muy simple se hace la referencua a una hoja de estilo.
<link rel="stylesheet" href="style.css">
Etiqueta Body
La parte final de una página HTML es la más importante. Todo dentro dentro de esta etiqueta define el contenido y la estructura de su página.<body>
<!-- Page Content Goes Here -->
</body>
Una visión general
Una disculpa por la naturaleza de este tema, los principiantes a menudo suelen caer en el aburrimiento en este tipo de temas, pero es algo fundamental y la verdadera diversión del HTML es todo lo que se coloca dentro de las etiquetas del <body>.
Ahora sabemos que un documento HTML tiene un DOCTYPE que indica al navegador cómo mostrar la página y ayuda a garantizar las normas adecuadas se están utilizando. También sabemos que hay una jerarquía de conjunto de cómo se estructuran las páginas HTML. Casi todo el DOCTYPE, pero se echa en el elemento raíz, lo que significa que es el "elemento principal" de los elementos de la cabeza y el cuerpo, que a su vez tienen sus propios hijos.
La estructura básica de un documento HTML que se conoce como el DOM o Document Object Model. Se refiere metafóricamente como un árbol y es representado como la imagen de arriba.
.png)
.png)
Comentarios
Publicar un comentario