HTML
Historia del HTML
Estructura de una página en HTML
Manejos de etiquetas y su sintaxis
Etiquetas Básicas del HTML
Desarrollo
1- La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador delCERN (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 llamada WorldWideWeb (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.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML 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). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, comoapplets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. 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.
La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).
2- Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
Vamos a analizar más detenidamente las distintas secciones que componen la página Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).
El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE>
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo
Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas
<script language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:
BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores 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, parámetros 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, parámetro 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 pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
3-
|
Etiquetas |
|||
|
Apertura |
Acción |
Atributos |
Cierre |
|
< ! |
Comentario. |
Ninguno |
--> |
|
<A> |
Hipervínculo. |
HREF, NAME, REL, REV, TITLE |
</A> |
|
<ADDRESS> |
Formato para dirección del autor. |
Ninguno |
</ADDRESS> |
|
<BASE> |
Url del autor; contexto del documento. |
HREF |
</BASE> |
|
<BASEFONT SIZE> |
Tamaño de la fuente base. |
Ninguno |
NO |
|
<BGSOUND> |
Sonido de fondo. |
SRC, LOOP. |
NO - Internet Explorer |
|
<BIG> |
Aumenta el tamaño. |
Ninguno |
</BIG> |
|
<BLINK> |
Hace parpadear el texto. |
Ninguno |
</BLINK> - Netscape |
|
<BLOCKQUOTE> |
Da formato con sangría a un párrafo |
Ninguno |
</BLOCKQUOTE> |
|
<BODY> |
Cuerpo del documento. |
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK |
</BODY> |
|
<BR> |
Retorno de línea. |
CLEAR: Se utiliza en combinación con ALIGN de IMAGE. |
NO |
|
<CAPTION> |
Posición de la leyenda en una tabla. |
ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER |
</CAPTION> |
|
<CENTER> |
Centrar. |
Ninguno |
</CENTER> |
|
<CITE> |
Formato para citas en itálicas. |
Ninguno |
</CITE> |
|
<CODE> |
Formato en tipo código. |
Ninguno |
</CODE> |
|
<DD> |
Definiciones marcadas, para Lista de Definiciones <DL>. |
Ninguno |
NO |
|
<DFN< |
Formato en itálica. |
Internet Explorer |
</DFN< |
|
<DIR> |
Lista de directorio, con elementos marcados con <LI>. |
Ninguno |
</DIR> |
|
<DL> |
Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. |
Ninguno |
</DL> |
|
<DT> |
Términos marcados, para Lista de Definiciones <DL>. |
Ninguno |
NO |
|
<EM> |
Formato enfatizado en itálica. |
Ninguno |
</EM> |
|
<EMBED> |
Sonido de Fondo. |
SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. |
NO - Netscape |
|
<FONT> |
Definición de la fuente. |
SIZE, COLOR. Internet Explorer: FACE. |
</FONT> |
|
<FORM> |
Para ingreso de datos del usuario en un formulario. |
ACTION, METHOD |
</FORM> |
|
<H1 ...H6> |
Tamaño de letras del 1 al 6. |
HTML 3.0: LEFT, CENTER, RIGHT |
</H1 .../H6> |
|
<HEAD> |
Encabezamiento del documento. |
BASE, TITLE, ISINDEX, NEXTID, META |
</HEAD> |
|
<HR> |
Línea horizontal. |
NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR |
NO |
|
<HTML> |
Al principio y al fin de todo documento. |
HEAD, BODY |
</HTML> |
|
<I> |
Itálica (Cursiva). |
Ninguno |
</I> |
|
<IMG> |
Cargar imágenes. |
ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE |
NO |
|
<INPUT> |
Define un objeto de ingreso en un formulario. |
TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED |
</INPUT> |
|
<ISINDEX> |
Indica que existe un index en el server para el documento. |
Netscape: PROMPT |
NO |
|
<ISMAP> |
Activa la selección de imágenes para el usuario. |
Ninguno |
NO |
|
<KBD> |
Formato monoespaciado. |
Ninguno |
</KBD> |
|
<LI> |
Ítem de lista. |
Netscape: VALUE, TYPE |
NO |
|
<LISTING> |
Listados |
Ninguno. Obsoleto. |
</LISTING> |
|
<LIT> |
Literal. Como PRE, pero usa letra proporcional. |
Ninguno |
</LIT> |
|
<MARQUEE> |
Marquesina. |
ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. |
</MARQUEE> - Internet Explorer |
|
<MENU> |
Lista menú. |
Ninguno |
</MENU> |
|
<META> |
Metainformación ubicada en HEAD. |
EQUIV, CONTENT, NAME |
NO |
|
<NEXTID> |
Es un parámetro que identifica al documento. |
NO |
NO |
|
<NOBR> |
Elimina los saltos de líneas. |
Ninguno |
NO |
|
<OL> |
Lista ordenada, con elementos marcados con <LI>. |
TYPE, START, VALUE. |
</OL> |
|
<OPTION> |
Opción de selección dentro de un formulario. |
VALUE, SELECTED VALUE |
NO |
|
<P> |
Retorno de línea, con un espacio. |
Ninguno |
NO |
|
<P ALIGN> |
Alineación de texto. |
LEFT, CENTER, RIGHT |
</P> |
|
<PLAINTEXT> |
Pasaje de texto plano. |
Ninguno. Obsoleto. |
</PLAINTEXT> |
|
<PRE> |
Visualiza el texto en su formato original. |
WIDTH |
</PRE> |
|
<S> |
Texto tachado. |
Ninguno |
</S> |
|
<SAMP> |
Formato tipo ejemplo. |
Ninguno |
</SAMP> |
|
<SELECT> |
Para selección de opciones dentro de un formulario. |
NAME, SIZE, MULTIPLE |
</SELECT> |
|
<SMALL> |
Disminuye el tamaño. |
Ninguno |
</SMALL> |
|
<STRONG> |
Formato enfatizado más fuerte que <EM>. |
Ninguno |
</STRONG> |
|
<SUB> |
Subíndice. |
Ninguno |
</SUB> |
|
<SUP> |
Superíndice. |
Ninguno |
</SUP> |
|
<TABLE> |
Tabla. |
BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR |
</TABLE> |
|
<TD> |
Celdas de una fila en una tabla, dentro de <TR>. |
ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH |
</TD> |
|
<TEXTAREA> |
Área para ingreso de texto dentro de un formulario. |
NAME, ROWS, COLS. |
</TEXTAREA> |
|
<TH> |
Título de Tabla. |
ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH |
</TH> |
|
<TITLE> |
Título dentro de HEAD. |
Ninguno |
</TITLE> |
|
<TR> |
Fila de una Tabla. |
ALIGN, VALIGN |
</TR> |
|
<TT> |
Formato tipo máquina. |
Ninguno |
</TT> |
|
<UL> |
Lista no ordenada, con elementos marcados con <LI> . |
COMPACT, TYPE |
</UL> |
|
<VAR> |
Formato tipo variable. |
Ninguno |
</VAR> |
|
<WBR> |
Se usa con NOBR para una sección que deba ser separada. |
Ninguno |
NO |
|
<XMP> |
Similar a PRE. |
Ninguno |
</XMP> |