Inicio > Programaciòn Web 1 > Actividades > HTML5

Historia del HTML...

Creador del HTML

El origen del lenguaje HTML se remonta al físico Tim Berners-Lee, un trabajador del CERN (Organización Europea para la Investigación Nuclear) quien a finales de 1989 propuso el lenguaje HTML junto con el protocolo HTTP, cuya finalidad era crear un medio para poder compartir información entre diversos “grandes” físicos de la época que trabajaban por todo el mundo.

Orígenes del HTML

El primer documento que se publicó de manera formal, sobre la estructura del HTML se publicó en el año de 1991 con el nombre de: “HTML Tags“, simplemente texto en donde se explican las etiquetas que se usan en HTML. Este documento aun se encuentra disponible para su consulta en la web: HTML Tags.

Tal y como explica el documento, en HTML se utilizan etiquetas de apertura y de cierre (solo en algunas excepciones no) en donde se abre con los corchetes angulares y se cierra de igual manera con los corchetes pero anteponiendo un (/).

Es decir:

Versiones de HTML

El primero en salir fue el

HTML 1, sin embargo no fue considerado un estándar, por lo que muchas veces se considera al HTML 2 como la primera versión del HTML.

HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional.

HTML 3.2: Esta versión se lanzó en el año de 1997 gracias al organismo de estandarización llamado W3C (World Wide Web Consortium). El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0: Lanzada en 1998. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

HTML 4.01: salió a la luz en 1999 como una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

HTML 5: quinta revisión importante del lenguaje básico de la World Wide Web, el cual especifica dos variantes de sintaxis para HTML: el clásico HTML (text/html), y la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estándar aun no es tan utilizado pero su potencial es mucho mayor a las versiones anteriores, el cual incluye interesantes mejoras como nuevos elementos y etiquetas

Extraido de: webadictos.com/2012/12/30/breve-historia-del-html/?wa_count=5

APORTE PERSONAL: El primer diseño en html se publico en 1991 pero sin embargo no es conciderado como la primera version de este; sino que es la version que se lanzo en 1995, apartir de ahí se fueron lanzando varias versiones mejoradas de este lenguaje hyper texto, hasta llegar a lo que conocemos hoy en día como HTML5 e incluso se ha hablado de una nueva version llamada HTML6 que aun no es muy conocida en el mercado del desarrolo web.

En el siguiente enlace veremos un video en el cual se explica la historia del HTML

Estructura basica de una pagina HTML5

			
								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

								<!DOCTYPE html>

								<html lang="es">

								<head>

								    <meta charset="utf-8" />

								    <title>Estructura basica de una pagina web en HTML5</title>

								</head>

								<body>

								        <header>

								            <nav>

								                <a href="inicio.html">Inicio</a>

								                <a href="nosotros.html">Nosotros</a>

								                <a href="opcion.html">Opcion</a>

								                <a href="opcion.html">Opcion</a>

								            </nav>

								        </header>

								        <!-- Cuerpo de la pagina -->

								        <footer>

								            <p>Derechos reservados</p>

								            <p>Contactenos en info@tumaestroweb.com</p>

								        </footer>

								</body>

								</html>

<head>: Nos delimita el encabezado de la pagina, el contenido de esta etiqueta no se ve pero es muy importante ya que es donde declararemos hojas de estilos o CSS ( siguiendo este curso veremos CSS3)

<body>: dentro de body tendremos el contenido visible del sitio

Las etiquetas mas importantes en HTML5

<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menu, logotipo, y encabezados del sitio.

<nav>: Dentro de <nav> pondremos siempre las ligas mas importantes del sitio.

<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el “pie” de la pagina.

¿Header y footer siempre van en el encabezado y pie de pagina de una pagina?

No estos pueden repetirse y ser contenidos en otras etiquetas, por su puesto la etiqueta en una posición con mayor valor jerárquico en el documento tendra mas peso que otras

Apliquemos ahora Section, article y aside…

			
								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

								33

								34

								<!DOCTYPE html>

								<html lang="es">

								<head>

								    <meta charset="utf-8" />

								    <title>Estructura basica de una pagina web en HTML5</title>

								</head>

								<body>

								        <header>

								            <nav>

								                <a href="inicio.html">Inicio</a>

								                <a href="nosotros.html">Nosotros</a>

								                <a href="opcion.html">Opcion</a>

								                <a href="opcion.html">Opcion</a>

								            </nav>

								        </header>

								        <aside>

								            <p>el contenido de aside es algo que no tiene gran relevancia en la pagina, como un submenu, buscador, formulario de contacto etc...</p>

								        </aside>

								        <section>

								            <p>un section es una manera de dividir la pagina por "secciones" de tal modo que podemos dividir el contenido de esta por temas</p>

								            <article>

								                <h1>El article es la parte mas importante del sitio</h1>

								                <p>Basicamente en el article pondremos lo mas importante de la pagina, la informacion jerarquicamente mas importante, un article puede tener header y footer, sin estropear el SEO.</p>

								            </article>

								        </section>

								        <footer>

								            <p>Derechos reservados</p>

								            <p>Contactenos en info@tumaestroweb.com</p>

								        </footer>

								</body>

								</html

Extraido de: www.tumaestroweb.com/html5/estructura-basica-de-una-pagina-web-en-html5/

APORTE PERSONAL: la estructura basica del HTML5 inicia definiendo el tipo de formato en el que se va a trabajar el cual se asigna con la instruccion DOTYPE html, usamos el head que es donde va todo lo oculto ahi tambien va el titulo que se asigna con la instruccion Title. por otro lado esta tambien la instruccion body que es el cuerpo de la pagina donde va lo que queremos mostrar de ella.

Estan tambien algunas etiquetas importantes como es el caso del header que es donde va el encabezado que vamos a mostrar, basicamente cumple la misma funcion del Head con la diferencia del que en la anterior no era visible.

En el siguiente video veremos una explicacion de como hacer la estructura basica de HTML5

Etiqueta

Una etiqueta o marca HTML es un código que se incluye en los archivos creados con el lenguaje HTML para estructurar, añadir significado o formato al contenido a una página web.

Ejemplo

La Música Libre o Copyleft

Etiquetas basicas

nos dá el tipo de letra más grande.

nos dá el tipo de letra más pequeño.

HTML agrega automaticamente un espacio antes y después de cada título.

al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.

Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Los párrafos se definen con la etiqueta

Resultado

Este es el primer párrafo.

Y este es el segundo párrafo.

Este es el primer párrafo.

Y este es el segundo párrafo.

La etiqueta se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.

El salto de línea está definido con la etiqueta
. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta
obliga a saltar de línea dondequiera que la ubiquemos.

Esto es
un salto de lí
nea.

Resultado

Esto es
un salto de lí
nea.

La etiqueta

nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.

La etiqueta

no tiene cierre.

Resultado

Tabla con las etiquetas básicas

Etiquetas	Descripción	Ej.
a	Define el tamaño de los encabezados
	Define un párrafo
	Define un comentario
	Define un salto de línea
	Define una línea horizontal

Extraido de: www.virtualnauta.com/html-etiquetas-basicas

Tabla en HTML

Tanto en HTML como en otros programas las tablas se utilizan para organizar datos, pero también nos puede ayudar en organizar la información en la pantalla, dado a que una celda de tabla puede contener cualquier elemento HTML, como por ejemplo un párrafo o un campo de texto de un formulario.

En HTML una tabla está formada por un conjunto de directivas, unas obligatorias y otras opcionales. La directiva principal que delimita e incluye las otras directivas es la directiva . Los elementos definitorios para una tabla son las filas, las columnas y las celdas. HTML ofrece directivas como para construir las filas y , , , y son directivas opcionales, pero importantes, porque con ellas las tablas se pueden estructurar visualmente mejor.

Los atributos @headers y @scope facilitan a los navegadores especiales de voz la tarea de comprender como está estructurada la información de la tabla. Es lo que se llama "Accesibilidad Web". La utilización de estos atributos es vital en páginas Web destinadas a ofrecer información a las personas con discapacidad visual.

Para que el navegador imprime una tabla en la página Web necesita un conjunto básico de directivas:

,
para construir las celdas. Cada cruce entre las filas y las celdas forman las columnas. Sin embargo, la directiva	no es la única directiva con la cual se puede construir una celda. La directiva	también sirve para construir celdas, pero está pensada a construir celdas de cabecera. Al encontrar la directiva	el navegador convierte el texto que lo rodea en negrita y lo centra con respecto a la celda. Las directivas como:

, y

. El siguiente código es una estructura básica de una tabla:

Ejemplo

<table border="1">
    <tr>
      <td>cabecera</td>
      <td>cabecera</td>
      <td>cabecera</td>
    </tr>
    <tr>
      <td>cabecera</td>
      <td>cuerpo</td>
      <td>cuerpo</td>
    </tr>
    <tr>
      <td>cabecera</td>
      <td>pie</td>
      <td>pie</td>
    </tr>
</table>

Extraido de: www.html5.showbizreal.com/Columnas/module/tableMod.php

Los formularios son una característica del estándar HTML Que permite a los autores recolectar información provista por los visitantes. Estos formularios pueden resultar útiles para reunir información personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autor necesite.

Un formulario puede insertarse en un documento HTML a través del elemento HTML form que actuará como contenedor para todos los elementos de entrada. Toda la información recolectada por un formulario puede ser enviada a un agente procesador (un archivo conteniendo un script hecho especialmente para procesar esta información) que usualmente va especificado en el atributos "action". Lo que el agente procesador haga con la información y cómo la maneje es un tema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar la información de un formulario debes usar un script del lado servidor.

También puedes especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos del formulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el método de envío del formulario.

De este modo, un formulario simple puede tener la siguiente declaración:

Ejemplo: Este control permite a los usuarios ingresar texto en una o más líneas. se inserta utilizando el tag HTML textarea y puede ser usado para recolectar reportes, comentarios, cartas, etc. En este tag, el contenido será el texto inicial.