1. Historia del HTML.
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el"hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamadaWorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags(Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.
https://librosweb.es/libro/xhtml/capitulo_1/breve_historia_de_html.html
2. Estructura de una página en html5
Todos tenemos una estructura basica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy facil de hacer ya que HTML5 tiende a ser una estructura muy semantica y es lo mejor de todo, sus etiquetas son muy básicas por eso vamos a ver como es una Estructura basica de un documento de HTML5. Este lenguaje tiende a hacerse mas simple y humano al escribir el código.
Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.
|
1 2 3 4 5 |
<!DOCTYPE html>
<html lang="es">
<head> |
Muy sencillo para empezar ¿no?, ahora toca el turno del titulo, este sigue siendo el mismo, con diferencia de la etiqueta META, donde le decimos al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.
En realidad es algo demasiado corto y que no quita mucho tiempo, todo esto sigue estando en la etiqueta HEAD que no ha cambiado para nada, es algo muy parecido a XHTML, la cuestión es resumir el código.
|
1 2 3 |
<title>Titulo de la web</title>
<meta charset="utf-8" /> |
Pasemos a las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y losFeeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO.
REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.
|
1 2 3 4 5 |
<link rel="stylesheet" href="estilos.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /> |
Ya terminamos con la parte no visible de la pagina web, es el turno del cuerpo o BODY, esta etiqueta sigue siendo útil para lo mismo, pero a continuación empieza algo interesante que son las etiquetas de la estructura de el sitio visual.
La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.
Recomiendo que solo se use un H1 en una cabecera por cuestiones de SEO, pero es posible poner mas de un H1 y HEADER.
|
1 2 3 4 5 |
<body> <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> |
Como pueden ver, la etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.
Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para articulos o post, esto por cuestiones de SEO que es muy recomendable tambien, ejemplo.
|
1 2 3 4 5 6 |
<section> <article> <h2>Titilo de contenido<h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </p> </article> </section> |
SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o“articulo”
Otra etiqueta interesante es la etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy facil de implementar con H3 de titulo y P de contenido dentro de ella.
|
1 2 3 4 |
<aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> |
ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”
Y finalizando con el pie de la pagina con la etiqueta muy obvia FOOTER , un ejemplo.
|
1 2 3 |
<footer> </span> <p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></p> <span style="color: #333399;"></footer> |
FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”
Ahora veamos nuestro código completo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html>
<html lang="es">
<head> <title>Titulo de la web</title> <meta charset="utf-8" /> <link rel="stylesheet" href="estilos.css" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /> </head>
<body> <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> <section> <article> <h2>Titilo de contenido<h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </p> </article> </section> <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> <footer> Creado por mi el 2011 </footer> </body> </html> |
Y si se preguntan por compatibilidad en los navegadores, solo basta decir que Internet Explorer 6 es compatible solo hay que convertir en bloques las etiquetas HEADER, SECTION, ARTICLE y FOOTER y ademas usar el HTML5 Enabling Script.
https://html5facil.com/tutoriales/estructura-basica-documento-html5/