Historia de HTML

Historia de HTML
Qu es el HTML?
EL HTML es un lenguaje de programacin para la elaboracin de pginas web, basado en el uso
de etiquetas encerradas por corchetes angulares (<>) el cual se utiliza para traducir la
estructura y la informacin en forma de texto, con la posibilidad de agregar objetos como
imgenes, videos etc. En la actualidad el HTML es complementado por otras tecnologas como
las Hojas de Estilo en Cascada (CSS), el JavaScript entre otras.
HTML naci pblicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por
primera vez en Internet por Tim Berners-Lee en 1991. En esta publicacin se describen 22
etiquetas que mostraban un diseo inicial y relativamente simple de HTML. Varios de estos
elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han
ido aadiendo con el paso de los aos. De esta manera, podemos hablar de que han existido
distintas versiones de HTML a lo largo de la historia de internet.
Orgenes del HTML

El primer documento que se public de manera formal, sobre la estructura del HTML se public
en el ao de 1991 con el nombre de: HTML Tags, simplemente texto en donde se explican las
etiquetas que se usan en HTML. Este documento an se encuentra disponible para su consulta
en la web: HTML Tags.
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: <Title></Title>
Versiones de HTML
El primero en salir fue el HTML 1, sin embargo no fue considerado un estndar, por lo que
muchas veces se considera al HTML 2 como la primera versin del HTML.
HTML 2: Presentado en el ao de 1995, el HTML 2 es considerado la primera versin del HTML, el
cual no soportaba tablas y donde la declaracin explcita de los elementos body, html y head es
opcional.
HTML 3.2: Esta versin se lanz en el ao de 1997 gracias al organismo de estandarizacin
llamado W3C (World Wide Web Consortium). El cual incorpor los ltimos avances de las pginas
web como applets de Java y texto que fluye alrededor de las imgenes.
HTML 4.0: Lanzada en 1998. Entre sus novedades ms destacadas se encuentran las hojas de
estilos CSS, la posibilidad de incluir pequeos programas o scripts en las pginas web, mejora de
la accesibilidad de las pginas diseadas, tablas complejas y mejoras en los formularios.
HTML 4.01: sali a la luz en 1999 como una revisin y actualizacin de la versin HTML 4.0, por
lo que no incluye novedades significativas.
HTML 5: quinta revisin importante del lenguaje bsico de la World Wide Web, el cual especifica
dos variantes de sintaxis para HTML: el clsico HTML (text/html), y la variante conocida como
HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estndar 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.
Estructura bsica de HTML #1
La estructura bsica de una pgina web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que est
en medio ser la pgina web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la pgina. Aqu irn cierta informacin que no es
directamente el contenido de la pgina. Aqu se pone el ttulo de la pgina, los metadatos,
estilos, cdigo javascript (todo esto se estudiar en captulos venideros). La primera que se suele
estudiar es <title></title>, que indica el ttulo de la pgina (lo que el navegador pone en la
parte superior izquierda).
La segunda parte es <body></body>. Aqu va propiamente el contenido de la pgina: fotos,
prrafos, formularios, etc.
<html>
<head>
<title>Esto es el título de la
página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
Adems, dentro de <body></body> distinguimos varias etiquetas:

<br> => Indica salto de lnea. En HTML un salto de lnea normal (plsando la tecla Enter) no
produce un salto de lnea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itlica.
Tambin observamos el cdigo &iaacute; => Esto indica que queremos poner una "i" con acento,
es decir, "". Esto se explicar en un captulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en maysculas o

minsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo
resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /)
debe cerrarse (es decir, poner su equivalente con el smbolo /), si no, el navegador podra dar
resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como
<br> o <hr>.
Estructura bsica de HTML #2

Todos los documentos Html tienen la estructura que se muesta a continuacin, aunque la
etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la
ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>
<BODY>
Aqu ira el contenido de la pgina
</BODY>
</HTML>
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="Informacin sobre el Centro,las enseanzas que se pueden
cursar, los departamentos didcticos">
<meta name="keywords" content="educacin,enseanza,instituto, profesores, alumnos">
Las etiquetas le indican a los buscadores el contenido de nuestras pginas (description) y
algunas palabras clave (keywords) para su localizacin.
La cabecera es la seccin comprendida entre <head> y </head>. En ella se encuentra
necesariamente el ttulo (entre las etiquetas <title> y </title>).
El ttulo de la pgina debe describir su contenido por ejemplo:
<TITLE>Colegio Pblico de Villaman - mbito de Influencia - </TITLE>
no valdra en cambio
<TITLE>Pgina de Inicio</TITLE> ya que esto no dice nada por si solo
Dentro de la cabecera tambin se suele incluir cdigo en JavaScript, que se reconoce porque va
comprendido entre las etiquetas
<script language="JavaScript">

</SCRIPT>
El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde

debemos colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body> La etiqueta <body> suele
contener algunos atributos, a saber:
BGCOLOR parmetro usado para especificar el color de fondo de la pgina. El color se define
como una terna de nmeros (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red,
Green, Blue). Tambin se puede usar el nombre en ingls de los colores predefinidos en los
navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el
de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parmetros usados para especificar el color por omision de: texto con enlace,
enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que
BGCOLOR.
BACKGROUND, parmetro usado para especifica la ruta y nombre de archivo (URL) de la imagen
que ser usanda como fondo del documento. Esta se ver como mosaico para cubrir toda la
ventana si es pequea (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el
directorio completo donde estn nuestras pginas, desde C:\ a C:\webs por ejemplo, la ruta
especificada debe seguir siendo vlida.
Por ejemplo si la pgina desde la que hacemos el enlace se encuentra en el
directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se
encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">
Si la pgina estuviese en ejemplos se pondra:

<BODY BACKGROUND="../gifs/fondo.gif">
Estructura bsica de HTML5

<!DOCTYPE html>
<html lang="es">
<head>
<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
los Feeds. Estas son muy cortas con excepcin 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 <link rel="stylesheet" href="estilos.css" />

2
3 <link rel="shortcut icon" href="/favicon.ico" />
4
5 <link rel="alternate" title="Pozolera 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 continuacin 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 descripcin 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 <body>
2 <header>
3 <h1>Mi sitio web</h1>
4 <p>Mi sitio web creado en html5</p>
5 </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 <section>
2 <article>
3 <h2>Titilo de contenido<h2>
4 <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
5 </article>
6 </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 <aside>
2 <h3>Titulo de contenido</h3>
3 <p>contenido</p>
4 </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 <footer> </span>
2 <p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></
3 <span style="color: #333399;"></footer>
FOOTER es nuestro equivalente a un DIV con ID=footer o pie
Ahora veamos nuestro cdigo completo:
1 <!DOCTYPE html>
2
3
4 <html lang="es">
5
6 <head>
7 <title>Titulo de la web</title>
8 <meta charset="utf-8" />
9 <link rel="stylesheet" href="estilos.css" />
10 <link rel="shortcut icon" href="/favicon.ico" />
11 <link rel="alternate" title="Pozolera RSS" type="application/rss+xml" href="/feed.rss" />
12 </head>
13
14 <body>
15 <header>
16 <h1>Mi sitio web</h1>
17 <p>Mi sitio web creado en html5</p>
18 </header>
19 <section>
20 <article>
21 <h2>Titilo de contenido<h2>
22 <p> Contenido (ademas de imagenes, citas, videos etc.) </p>
23 </article>
24 </section>
25 <aside>
26 <h3>Titulo de contenido</h3>
27 <p>contenido</p>
28 </aside>
29 <footer>
30 Creado por mi el 2011
31 </footer>
32

Historia de HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Historia de HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Historia de HTML

Orgenes del HTML

Adems, dentro de <body></body> distinguimos varias etiquetas:

Es importante mencionar que las etiquetas se pueden escribir indistintamente en maysculas o

Estructura bsica de HTML #2

El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu donde

Si la pgina estuviese en ejemplos se pondra:

Estructura bsica de HTML5

<meta charset="utf-8" />

1 <link rel="stylesheet" href="estilos.css" />

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro

SECTION es el equivalente a un DIV con ID=contenido y ARTICLE a

ASIDE es nuestro equivalente a un DIV con ID=sidebar o barra

FOOTER es nuestro equivalente a un DIV con ID=footer o pie

Ahora veamos nuestro cdigo completo:

Anda mungkin juga menyukai