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

...