Conceptos Basicos De Html5

CONCEPTOS BÁSICOS DE HTML 5

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión mayor del lenguaje básico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

HTML y CSS

Para crear un sitio web, debes dar instrucciones al ordenador. No basta con escribir el texto que se ha incluido en el sitio (como lo haría en un procesador de textos Writer, por ejemplo), también debe indicar dónde colocar este texto, insertar imágenes, crear enlaces entre páginas, etc.

Para crear una página web con HTML es necesario tener que aprender dos lenguajes HTML Y CSS. Estos dos lenguajes son complementarios, ya que tienen funciones diferentes:

HTML (HyperText Markup Language): Apareció por primera vez en 1991 en el lanzamiento de la Web. Su función es la gestión y organización del contenido. Así que en HTML puedes escribir lo que deseas mostrar en la página: texto, enlaces, imágenes…

CSS (Cascading Style Sheets, también conocidas como hojas de estilo): El papel de CSS es gestionar la apariencia de la página web (diseño, posicionamiento, colores, tamaño de texto...). Este lenguaje ha complementado el código HTML desde 1996.

Luego de saber lo que es HTML aquí vamos a tratar (HTML5) que ahora es el lenguaje del futuro. Se puede crear un sitio web únicamente en HTML, pero no va a quedar muy estético por la forma como aparecerá la información. Esta es la razón por la que CSS siempre lo completa. HTML define el contenido, CCS permite organizar el contenido y definir la presentación: el color, la imagen de fondo, los márgenes, el tamaño del texto

HTML 5 necesita una página HTML para funcionar. Es por eso que lo primero que se aprende son los conceptos básicos de HTML antes de lograr el cuidado de la decoración en CSS.

Diferentes versiones de HTML y CSS

Con el tiempo, HTML y CSS han evolucionado. La primera versión de HTML (HTML 1.0) ni siquiera ofrecía la posibilidad de mostrar las imágenes. Una muy breve historia de estos lenguajes para conocimiento general:

• HTML 1: Es la primera versión creada por Tim Berners-Lee en 1991.

• HTML 2: La segunda versión de HTML apareció en 1994 y se terminó en 1996 con la aparición de HTML 3.0, esta es la versión que en realidad plantea las bases de las siguientes versiones de HTML. Las reglas y el funcionamiento de esta versión están dadas por el W3C (mientras que la primera versión fue creada por una persona).

• HTML 3: Apareció en 1996, esta nueva versión de HTML, añade muchas posibilidades al lenguaje como tablas, applets, scripts, posicionamiento de texto alrededor de imágenes, etc.

• HTML 4: Esta es la versión más común de HTML (en concreto, es HTML 4.01). Apareció por primera vez en 1998 y propone el uso de marcos (que dividen una página web en varias partes), tablas más complejas, mejoras en las formas, etc. Más importante aún, esta versión permite por primera vez utilizar hojas de estilo del famoso CSS.

• HTML 5: Es la última versión. Aún no está muy extendida, llama mucho la atención porque trae muchas mejoras como la posibilidad de incluir fácilmente vídeos, mejorar el contenido, nuevas características para los formularios, etc. EL estándar estará completado en el año 2014.

• CSS 1: En 1996, apareció la primera versión de CSS. En ella se establecen las bases de este lenguaje que permiten mejoras de presentación en páginas web, tales como colores, márgenes, fuentes, etc.

• CSS 2: apareció en 1999 y fue completado por CSS 2.1, esta nueva versión de CSS, añade numerosas opciones. Ahora se pueden utilizar técnicas de posicionamiento muy precisas que permiten ver los elementos en el lugar deseado en la página.

• CSS 3: esta es la última versión, que agrega características muy esperadas, tales como bordes redondeados, degradados, sombras, etc.

De HTML5 y CSS3 aún no se han finalizado totalmente las versiones estandarizadas de W3C. Sin embargo, incluso si puede haber cambios menores en estos lenguajes. Muchos sitios web profesionales se construyen hoy en día en las versiones más recientes.

Editor de Texto: Se trata de programas dedicados a la escritura de código. Uno por lo general, puede utilizarlos para varios lenguajes, no sólo HTML y CSS. Han demostrado ser poderosos aliados para los diseñadores sitios de web, entre ellos está (Aptana, Notepad + +, jEdit, vim...).

ETIQUETAS Y SUS ATRIBUTOS

Las páginas HTML se llena con lo que se denominan etiquetas. Estos son invisibles en la pantalla para los visitantes, pero permiten que el equipo entienda lo que se desea mostrar. Las etiquetas son fáciles de detectar. Están rodeadas de "galones", es decir, los símbolos < y >, de esta manera:

<etiqueta>

Las etiquetas indican la naturaleza del texto que encierran. Se refieren, por ejemplo: "Este es el Título de la página", "Esta es una imagen", "Este es un párrafo de texto", etc.

Hay dos tipos de etiquetas

• Etiquetas de dos en dos Se abren, contienen texto, y se cierran. Lo que aparece como:

<title> Este es un título </ title>

Distinguimos una etiqueta de apertura (<title>) y una etiqueta de cierre (</ title>) que indica que el título termina. Todo lo que no se encuentra entre estas dos etiquetas no es un título.

• Etiquetas huérfanas Estas son las etiquetas que más se utilizan para insertar un elemento en un lugar específico (por ejemplo, una imagen). No es necesario delimitar el principio y el fin de la imagen, sólo significa que el equipo "Inserte una imagen aquí."

Atributos

Los atributos son unas etiquetas referentes a opciones. Se complementan para proporcionar información adicional. El atributo se coloca después del nombre de la etiqueta y tiene el mayor valor, así:

<etiqueta atributo="valor">

En el caso del funcionamiento de etiquetas "pares", se ponen los atributos en la etiqueta de apertura y no en la etiqueta de cerrado.

Estructura básica de una página HTML5

Este código corresponde a una página web en HTML5:

Código HTML:

<! DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title> Página de prueba HTML5. The One </ title>

</ head>

<body>

</body>

</html>

Es recomendable poner espacios al principio de algunas líneas para desplazar las etiquetas. No es obligatorio y no tienen impacto en la visualización en pantalla, pero hace que el código fuente sea más legible. Esto se llama sangría. En el editor, basta con pulsar la tecla de tabulación (Tab) para obtener el mismo resultado.

Las etiquetas se abren y cierran en un orden específico. Por ejemplo, el

<html> es el primero que se abre y es también el último que se cierra (al final del código con </html>). Las etiquetas deben ser cerradas en el orden inverso de su apertura. Ejemplo:

<html>

<body>

</body>

</html>

Una etiqueta que está abierta en el interior de otra también debe estar cerrada en el interior.

<! DOCTYPE html>

La primera línea es el tipo de documento. Es esencial porque es lo que indica que se trata de una página web HTML. En realidad no es una etiqueta como cualquier otra (pues comienza con un signo de exclamación), se puede considerar que es sólo la excepción que confirma la regla.

Esta línea fue un tipo de documento muy complejo. Era imposible retenerla en la cabeza. Para XHTML 1.0, se tenía que escribir:

<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "Http :/ /

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Como parte de HTML5, se decidió simplificarla, para el deleite de los desarrolladores. Cuando se ve una etiqueta de tipo corto (<! DOCTYPE html>), significa que la página está escrita en HTML5.

HTML5 Tiene mejor Estructura

En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div.

Estos son los elementos:

• Section representa una sección "general" dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.

• Article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.

• Aside representa

...