HISTORIA
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador de CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force) (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. El organismo IETF organiza un grupo de trabajo de HTML en 1995 y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML. A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium).
El 14 de enero de 1997 se publicó la versión HTML 3.2 y es la primera recomendación de HTML publicada por el W3C.
El HTML 4.0 fue publicado el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran la posibilidad de incluir pequeños programas o scripts en las páginas web,las hojas de estilos CSS, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.
El HTML 4.0 fue publicado el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran la posibilidad de incluir pequeños programas o scripts en las páginas web,las hojas de estilos CSS, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.
Estructura interna de una página HTML.
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).
La estructura básica de una página HTML es:
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).
La estructura básica de una página HTML es:
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html
Estos son los elementos básicos que toda página HTML debe llevar.
Si observamos toda página comienza con la marca:<html> y finaliza con la marca:</html>
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head>
</head>
Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.
Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).
ESTRUCTURA DE LAS ETIQUETAS:
<html></html>
Abre y cierra un documento HTML <head></head>
Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Está información no es visible. <body></body>
Dentro de esta etiqueta va toda la parte visible de la página web.
Etiquetas del Encabezado <title></title>
El título de la página web.
Atributos de la etiqueta Body <body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal. <body text=?>
Configura el color por defecto del texto, usando el valor del código de color hexadecimal. <body link=?>
Configura el color de las ligas, usando el valor del código de color hexadecimal. <body vlink=?>
Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal <body alink=?>
Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.
Etiquetas HTML de Texto <pre></pre>
Texto pre-formateado <hl></hl>
Título más grande <h6></h6>
Título más pequeño <b></b>
Negritas <u></u>
Subrayado <i></i>
Cursivas <tt></tt>
Tipo máquina de escribir <cite></cite>
Cita, en cursiva <em></em>
Resalta una palabra, negrita o cursiva <strong></strong>
Resalta una palabra o grupo de palabras
<font face=?></font>
Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <font size=?></font>
Coloca tamaño de letra, de 1 a 7 <font color=?></font>
Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)
Ligas <a href="URL"></a>
Hipervínculo <a href="mailto:EMAIL"></a>
Hipervínculo mailto (para envío de correo) <a name="name"></a>
Ancla en el mismo documento <a href="#name"></a>
Liga hacia algún lugar dentro del mismo sitio
Formato y presentación <p></p>
Nuevo párrafo <p align=?>
Alinea el párrafo hacia la izquierda, derecha o al centro <br>
Inserta un interlineado suave. Crea otra línea <blockquote>
</blockquote>
Texto indentado de ambos lados <dl></dl>
Lista de definiciones (glosario) <dt>
Precede a cada término en definiciones <dd>
Precede cada definición <ol></ol>
Lista ordenada <li></li>
Entrada en una lista <ul></ul>
Lista con viñetas sin ordenar <div align=?>
Para formato a porciones grandes del documento html, incluyendo hojas de estilo
Elementos Gráficos <img src="name">
Incorpora una imagen <img src="name" align=?>
Alinea la imagen: izquierda, derecha y centro <img src="name" border=?>
Determina el contorno de la imagen. Un valor 0 no tendrá contorno <map></map>
Mapa de imágenes <body background="URL o ruta de archivo"></body>
Coloca la imagen como fondo de la página <hr>
Linea horizontal <hr size=?>
Tamaño de una linea horizontal <hr width=?>
Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hr noshade>
Linea horizontal sin sombra
Tablas <table></table>
Crea tabla <tr></tr>
Crea filas en una tabla <td></td>
Crea celda en una fila <th></th>
Encabezado de tabla, texto normal, negrita y centrado
Atributos de Tablas <table border=#>
Coloca contorno en las celdas de la tabla <table cellspacing=#>
Espacio entre las celdas de una tabla <table cellpadding=#>
Espacio entre el contorno de una celda y su contenido <table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página <tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha, centro <tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo,enmedio <td colspan=#>
Expansión de una celda, en número de columnas <td rowspan=#>
Expansión de una celda, en número de celdas <td nowrap>
Texto continuo dentro de una celda
Marcos (frames) <frameset></frameset>
Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets <frameset rows="value,value">
Número de lineas en un frameset, usando pixeles o porcentaje de ancho <frameset cols="value,value">
Número de columnas en un frameset, usando pixeles o porcentaje de ancho <frame>
Frame singular dentro de un framset <noframes></noframes>
Texto que aparecerá en navegadores que no soportan frames
Atributos de Frames <frame src="URL">
Especifica que página html se muestra <frame name="name">
Nombra al frame para que sea identificado por otros frames y accesado <frame marginwidth=#>
Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 <frame marginheight=#>
Margen superior e inferior de un grame, igual o mayor a 1 <frame scrolling=VALUE>
Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto <frame noresize>
No permite al usuario modificar el tamaño de un frame
Formas <form></form>
Forma <select name="name"></select>
Menú desplegable <option>
Opción del menú desplegable <textarea name="name" cols=40 rows=8></textarea>
Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type="checkbox" name="name">
Crea un checkbox. <input type="radio" name="name" value="x">
Crea botón de radio. <input type=text name="name" size=20>
Crea una opción de texto para entrada de información o despliegue <input type="submit" value="name">
Crea botón de envío de forma tipo submit <input type="image" border=0 name="name" src="name.gif">
Crea botón de envío con imagen <input type="reset">
Crea botón de limpieza (reset). Vacía la forma
Otras Etiquetas HTML <EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130">
Incorpora sonido con panel de control en la pantalla.
< object width="600" height="300">
<param name="movie" value="miarchivo.swf">
<embed src="miarchivo.swf" width="600" height="300">
</embed>
</object>
Para insertar una pelicula flash swf en html
<!-- Este es un comentario -->
Inserta comentarios no visibles en la página.
< iframe src ="/mipagina.html"> ... </iframe> >
Inserta un frame dentro de una página. Inline Frame.
< script type="text/javascript">
document.write("<h2>bienvenido!</h2>")
</script>
Inserta un script dentro de una página html.
<span style="color:#00FFFF;"> </span>
Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color.
Abre y cierra un documento HTML <head></head>
Encabezado de la página - aquí se coloca titulo, metatags, e informacion para buscadores entre otras cosas. Está información no es visible. <body></body>
Dentro de esta etiqueta va toda la parte visible de la página web.
Etiquetas del Encabezado <title></title>
El título de la página web.
Atributos de la etiqueta Body <body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal. <body text=?>
Configura el color por defecto del texto, usando el valor del código de color hexadecimal. <body link=?>
Configura el color de las ligas, usando el valor del código de color hexadecimal. <body vlink=?>
Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal <body alink=?>
Configura el color de las ligas al darle clic, usando el valor del código hexadecimal.
Etiquetas HTML de Texto <pre></pre>
Texto pre-formateado <hl></hl>
Título más grande <h6></h6>
Título más pequeño <b></b>
Negritas <u></u>
Subrayado <i></i>
Cursivas <tt></tt>
Tipo máquina de escribir <cite></cite>
Cita, en cursiva <em></em>
Resalta una palabra, negrita o cursiva <strong></strong>
Resalta una palabra o grupo de palabras
<font face=?></font>
Coloca el tipo de letra: por ejemplo, arial, verdana, courier,etc. <font size=?></font>
Coloca tamaño de letra, de 1 a 7 <font color=?></font>
Configura el color, usand valor hexadecimal o nombre directo (blue, green, etc.)
Ligas <a href="URL"></a>
Hipervínculo <a href="mailto:EMAIL"></a>
Hipervínculo mailto (para envío de correo) <a name="name"></a>
Ancla en el mismo documento <a href="#name"></a>
Liga hacia algún lugar dentro del mismo sitio
Formato y presentación <p></p>
Nuevo párrafo <p align=?>
Alinea el párrafo hacia la izquierda, derecha o al centro <br>
Inserta un interlineado suave. Crea otra línea <blockquote>
</blockquote>
Texto indentado de ambos lados <dl></dl>
Lista de definiciones (glosario) <dt>
Precede a cada término en definiciones <dd>
Precede cada definición <ol></ol>
Lista ordenada <li></li>
Entrada en una lista <ul></ul>
Lista con viñetas sin ordenar <div align=?>
Para formato a porciones grandes del documento html, incluyendo hojas de estilo
Elementos Gráficos <img src="name">
Incorpora una imagen <img src="name" align=?>
Alinea la imagen: izquierda, derecha y centro <img src="name" border=?>
Determina el contorno de la imagen. Un valor 0 no tendrá contorno <map></map>
Mapa de imágenes <body background="URL o ruta de archivo"></body>
Coloca la imagen como fondo de la página <hr>
Linea horizontal <hr size=?>
Tamaño de una linea horizontal <hr width=?>
Ancho de linea horizontal, ya sea porcentaje o valor absoluto. <hr noshade>
Linea horizontal sin sombra
Tablas <table></table>
Crea tabla <tr></tr>
Crea filas en una tabla <td></td>
Crea celda en una fila <th></th>
Encabezado de tabla, texto normal, negrita y centrado
Atributos de Tablas <table border=#>
Coloca contorno en las celdas de la tabla <table cellspacing=#>
Espacio entre las celdas de una tabla <table cellpadding=#>
Espacio entre el contorno de una celda y su contenido <table width=# or %>
Ancho de la tabla, en pixeles o porcentaje del ancho de la página <tr align=?> or <td align=?>
Alineación para las celdas, izquierda derecha, centro <tr valign=?> or <td valign=?>
Alineación vertical de las celdas, arriba, abajo,enmedio <td colspan=#>
Expansión de una celda, en número de columnas <td rowspan=#>
Expansión de una celda, en número de celdas <td nowrap>
Texto continuo dentro de una celda
Marcos (frames) <frameset></frameset>
Substituye a la etiqueta HTML body en documentos con frames. Puede insertarse en otros framesets <frameset rows="value,value">
Número de lineas en un frameset, usando pixeles o porcentaje de ancho <frameset cols="value,value">
Número de columnas en un frameset, usando pixeles o porcentaje de ancho <frame>
Frame singular dentro de un framset <noframes></noframes>
Texto que aparecerá en navegadores que no soportan frames
Atributos de Frames <frame src="URL">
Especifica que página html se muestra <frame name="name">
Nombra al frame para que sea identificado por otros frames y accesado <frame marginwidth=#>
Margen izquierdo y derecho de un grame, debe ser igual o mayor que 1 <frame marginheight=#>
Margen superior e inferior de un grame, igual o mayor a 1 <frame scrolling=VALUE>
Determina si un frame tiene barra de desplazamiento, Puede ser yes, no, auto, el cual es por defecto <frame noresize>
No permite al usuario modificar el tamaño de un frame
Formas <form></form>
Forma <select name="name"></select>
Menú desplegable <option>
Opción del menú desplegable <textarea name="name" cols=40 rows=8></textarea>
Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type="checkbox" name="name">
Crea un checkbox. <input type="radio" name="name" value="x">
Crea botón de radio. <input type=text name="name" size=20>
Crea una opción de texto para entrada de información o despliegue <input type="submit" value="name">
Crea botón de envío de forma tipo submit <input type="image" border=0 name="name" src="name.gif">
Crea botón de envío con imagen <input type="reset">
Crea botón de limpieza (reset). Vacía la forma
Otras Etiquetas HTML <EMBED SRC="url o ruta de archivo" VOLUME="50" HEIGHT="50" WIDTH="130">
Incorpora sonido con panel de control en la pantalla.
< object width="600" height="300">
<param name="movie" value="miarchivo.swf">
<embed src="miarchivo.swf" width="600" height="300">
</embed>
</object>
Para insertar una pelicula flash swf en html
<!-- Este es un comentario -->
Inserta comentarios no visibles en la página.
< iframe src ="/mipagina.html"> ... </iframe> >
Inserta un frame dentro de una página. Inline Frame.
< script type="text/javascript">
document.write("<h2>bienvenido!</h2>")
</script>
Inserta un script dentro de una página html.
<span style="color:#00FFFF;"> </span>
Aplica a un grupo de texto un estilo, por ejemplo font, tamaño, color.
LAS ETIQUETAS META
La forma usual de insertar metadatos en el documento es por medio de la etiqueta <META> en la sección <HEAD> de la página.
Esta etiqueta es de aquellas de las que llamabamos "elementos vacios" porque no lleva etiqueta de cierre. Su estructura es la de una declaración propiedad:valor. Por ejemplo:
Esta etiqueta es de aquellas de las que llamabamos "elementos vacios" porque no lleva etiqueta de cierre. Su estructura es la de una declaración propiedad:valor. Por ejemplo:
<meta name="generator" content="HTML-Kit" />
etiqueta que contiene la metainformación de que el documento ha sido escrito usando dicho editor.
No existe ninguna regla acerca de la informacion que puedes o no puedes incluir en las metatags. El standard html define la estructura de una etiqueta META, pero no sus valores. Es perfectamente válido que inventes tus propias etiquetas META; sin embargo dado que no se visualizan en el navegador, y que realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META mas difundidas) tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.
No existe ninguna regla acerca de la informacion que puedes o no puedes incluir en las metatags. El standard html define la estructura de una etiqueta META, pero no sus valores. Es perfectamente válido que inventes tus propias etiquetas META; sin embargo dado que no se visualizan en el navegador, y que realmente solo se aprovechan por los buscadores y otras herramientas informáticas (que lógicamente solo entienden las etiquetas META mas difundidas) tampoco tiene mucho sentido crear tu propia metainformación, salvo para uso propio.
Etiquetas META mas usuales
description
<meta name="description" content="Esta es la mejor pagina del mundo mundial" />
Mediante esta etiqueta podemos incluir como metadato una descripción de nuestra página. Esta descripción puede ser leida y utilizada por algunos buscadores
La etiqueta <meta> admite el atributo lang, que nos permite ofrecer información sobre el idioma:
<meta name="description" content="Esta es la mejor pagina del mundo mundial" lang="ES" />
La etiqueta <meta> admite el atributo lang, que nos permite ofrecer información sobre el idioma:
<meta name="description" content="Esta es la mejor pagina del mundo mundial" lang="ES" />
keywords
<meta name="keywords" content="mp3, free, FREE, download, britney, spears" />
Las palabras clave son aquellas que resumen de forma significativa el contenido de la pagina. Por ejemplo keywords adecuadas para ignside.net podrían ser "noticias, internet, manuales, html"
Las dos etiquetas META que acabas de ver son las mas importantes. Como los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la pagina segun ellas, existe una auténtica industria montada sobre estas dos sencillas lineas. Una buena selección de descripción y keywords puede suponer que tu página aparezca muy arriba en las búsquedas, y eso supone mucho dinero para las páginas comerciales.
Las dos etiquetas META que acabas de ver son las mas importantes. Como los buscadores leen estas etiquetas y pueden juzgar acerca de la importancia de la pagina segun ellas, existe una auténtica industria montada sobre estas dos sencillas lineas. Una buena selección de descripción y keywords puede suponer que tu página aparezca muy arriba en las búsquedas, y eso supone mucho dinero para las páginas comerciales.
