HTML
HTML o lenguaje de marcado de Hipertexto es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.
HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de el contenido. HTML consiste en una serie de elementos que se utilizan para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc.
HTML es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes, listas, vídeos, etc.
El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya.
El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida, pueda enfrentarse a la tarea de crear una web. HTML es fácil y pronto podremos dominar el lenguaje. Más adelante se conseguirán los resultados profesionales gracias a nuestras capacidades para el diseño y nuestra vena artista, así como a la incorporación de otros lenguajes para definir el formato con el que se tienen que presentar las webs, como CSS.
Historia de 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 llamada World Wide Web (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, como applets 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 HTML5, 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).
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML.
La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.
Etiquetas
Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.
La etiqueta de apertura y la de cierre son las misma con la única diferencia de la diagonal "/" , es necesario la etiqueta de cierre para limitar el campo de acción de la etiqueta, por ejemplo a etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se escribe la etiqueta de apertura el navegador tomará como párrafo todo el texto que se encuentre después de dicha etiqueta hasta toparse con la etiqueta de cierre </p> y así con las demás etiquetas según la función de cada una, la mayoría de las etiquetas de HTML son etiquetas de este tipo. Por ejemplo:
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.
Algunos ejemplos de etiquetas son:
Atributos de etiquetas.
Las etiquetas tienen atributos que nos sirven para especificar ciertos detalles de esa etiqueta, por ejemplo, especificar un color de texto o de fondo, el ancho y alto de algún elemento, su alineación, la ubicación de un documento o imagen, etc.
El segundo caso del ejemplo anterior vimos que <img> sirve para insertar una imagen, pero para que la etiqueta funcione necesita de sus atributos, por medio de estos le daremos uso a la etiqueta.
Los atributos se escriben dentro de la etiqueta de la siguiente forma:
<etiqueta atributo1="algo" atributo2="algo">
Ahora volviendo al ejemplo de la etiqueta <img> es necesario indicar en forma de un atributo la dirección y el nombre de la imagen que queremos que se muestre, esto de la siguiente manera:
<img src="/carpeta/mi_imagen.jpg">
Con lo anterior nuestra etiqueta <img> ya podrá mostrar la imagen deseada.
Hay atributos específicos para cada etiqueta, en este ejemplo mostramos la etiqueta <img> con el mínimo requerido, pero puede llevar mas atributos, que no mencionaré aquí pues no es el tema a tratar, pero si hay que decir que a cualquier etiqueta de HTML se le puede agregar atributos, para algunas etiquetas como esta, será algo forzoso agregar el atributo, pero para otras podrá ser algo opcional, sin embargo, las etiquetas y sus atributos son la base del lenguaje HTML, y por medio de estas es como se construye una página web.
Lista de Etiquetas de HTML
Luego de colocar las etiquetas que definen la estructura de nuestro documento podemos comenzar a añadir mas elementos haciendo uso de múltiples etiquetas. A continuación se muestran algunas de las etiquetas básicas que podemos utilizar para comenzar a crear un documento HTML:
- <tittle></tittle>: Esta se coloca dentro de la cabecera y es el texto que mostrara el navegador en la barra de titulo de la ventana.
- <h1>,<h2>...<h6>: Se utilizan para identificar los distintos niveles de titulo en un documento HTML. <h1> es el de mayor jerarquía y <h6> el de menor jerarquía.
- <p></p>: Con esta se identifica el inicio y el final de un párrafo simple
- <strong></strong>: Fragmento de texto importante o palabras clave.
- <em></em>: Fragmento de texto enfatizado respecto a la frase que lo contiene.
- <mark></mark>: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo.
- <i></i>: Fragmento de texto con voz o tono alternativo al resto.
- <b></b>: Fragmento de texto sin importancia destacable (fines utilitarios).
- <u></u>: Fragmento de texto para nombres propios o escritura incorrecta intencionada (sic).
- <span></span>: Fragmento de texto sin significado (útil para seleccionar).
- <s></s>: Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)
Ejemplo de pagina con HTML
A continuación se muestra un ejemplo de como crear la estructura de una pagina web con las etiquetas básicas:
El ejemplo que se plante a continuación será realizado en el bloc de notas de Windows, para ello seguiremos los siguientes pasos:
Etiquetas de la estructura: Antes de comenzar a agregar objetos a nuestra pagina es necesario crear la estructura básica de la siguiente manera: <!DOCTYPE html>
<html>
<head>
<title>Este es el titulo de la pagina</title>
</head>
<body>
<h1>Texto de prueba</h1>
<p>Este es un ejemplo de creacion de una pagina web</p>
</body>
</html>
Guardar el archivo: Una vez agregados los objetos debemos guardar el archivo con la extensio .html, para ello daremos clic en archivo > guardar como:
En el nombre del archivo escribiremos al final
.HTML Y este seria el resultado que se mostraría en el navegador:
Referencias:
