html

¡Esta es una revisión vieja del documento!

Lenguaje de Marcado de Hipertexto

HTML (Hypertext Markup Language) es un lenguaje de marcado y formato de documento que permite hipertexto. Se trata del lenguaje de formato básico en el que está construida la Telaraña de Alcance Global WWW.

Tutorial de HTML

Introducción

En principio, un sitio web no es mas que una colección de ficheros de texto plano con enlaces. Estos ficheros de texto suelen escribirse según el formato que permite el lenguaje HTML, por lo cual cuentan con la extensión .html.

Sin ser el visualmente más elegante, el uso de HTML permite una manera simple y llana de expresión de texto en la Web, de una forma minimalista.

Primeros pasos

Si bien la mayoría de servicios de creación web actuales suelen obligar a emplear variados sistemas de contenido y plantillas prearmadas, en este Tutorial aprenderás la elaboración de una web “a mano” a travñes de nuestro shell Unix. Esto implica escribir el código HTML en tu editor de texto favorito.

Es posible que Micro sea más del agrado del principiante: cuenta con soporte para mouse y es probable que sus comandos sean más parecidos a los que está acostumbrado: ctrl+c y ctrl+v para copiar y pegar, ctrl+s para guardar y ctrl+q para salir. Pero puedes utilizar cualquier editor que gustes.

¡Comencemos!

El archivo inicial de tu página web será ~/public_html/index.html. Cuando se ingresa la URL raíz del sitio (por ejemplo, http://texto-plano.xyz/~fulana), nuestro servidor entregará una copia del mismo.

Estructura de los documentos HTML

Tu fichero HTML debería contar con una “estructura”. Normalmente, este suele seguir el siguiente esqueleto:

  • Identificador de tipo de Documento DOCTYPE
  • Contenido de hipertexto <html>
    • Encabezado <head>: define el título y características del documento.
    • Cuerpo <body>: Aquí pondrás el contenido que será visible en el navegador web.

Crea un fichero muleto src.html con: 

micro ~/public_html/[[src.html]]

…e introduce siguiente código, para darle la estructura: 

<!DOCTYPE html>
<html>
  <head>
      <title>Titulo de tu página web</title>
      <meta http-equiv="content-type" content="text/html"/>
      <meta lang="es-ES" dir="ltr">
      <meta charset="utf-8"/>
  </head>
 
  <body>
  </body>
</html>

¡Ya tienes listo el esqueleto básico! Puedes los cambios (Ctrl+s) y conserva este esqueleto llamado src.html para otras páginas webs.

Contenido HTML

Etiquetas de atributo

El lenguaje HTML se denomina de marcado pues integra lo que llamamos etiquetas que marcan el texto. Estas etiquetas informan al navegador sobre la apariencia del texto contenido - definiendo títulos, enlaces, listas, párrafos, etc. Por medio de las mismas definirás distintos atributos, que el navegador se encargará de presentar al texto.

A menudo estas etiquetas se utilizan en pares, con apertura de etiqueta y un cierre de etiqueta. El texto delimitado entre la apertura y el cierre se verá afectado por los atributos solicitados. Por ejemplo, el atributo b le ordena al navegador que presente un texto en negrita.

Estas son algunas de las etiquetas de formato que uso:

<b></b> Negrita
<i></i> Cursiva
<s></s> –Tachado–
<u></u> Subrayado
<code></code> hace que el texto parezca código.
<pre></pre> Texto preformateado. Eso es usar el formato en el archivo de texto. Los diferentes navegadores interpretan esto de diferentes maneras y no siempre funciona como cabría esperar.
<p> Comienza un nuevo párrafo.
<br> inserta un salto de línea.
<hr> traza una línea horizontal a lo largo de la página.
<center></center> alinea el texto en el centro de la página.

No todas las etiquetas deben ir seguidas de un cierre de etiqueta. Las etiquetas simples no operan sobre texto delimitado alguno; simplemente se agregan donde lo deseas (por ejemplo podrás usar <hr> para trazar una línea horizontal.

Aprovechemos las etiquetas de atributos para incorporar contenido al cuerpo del sitio web. Como vimos, este comprende el espacio entre la etiqueta de apertura <body> y la etiqueta de cierre </body>). Agrega al cuerpo, entonces: 

<body>
¡Hola Tercer Mundo!
Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano. 
He aprendido que las etiquetas permiten definir formatos, por ejemplo este texto está en negrita y este texto está en cursiva. También puedes usar subrayado.
</body>
Recuerda que si tu documento se encuentra formateado con líneas y párrafos en blanco, estos no aparecerán en la página web a menos que también incluyas las respectivas etiquetas de párrafo <p> y de salto de línea <hr>.

Con las consideraciones anteriores, ahora otorgarle formato al texto que acabas de crear. Este deberia quedar de la siguiente manera. 

<body>
<h1>¡Hola Tercer Mundo!</h1>
<p>
Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano. 
<hr>
<p>He aprendido que las etiquetas permiten definir formatos, por ejemplo <b>este texto está en negrita</b> y <i>este texto está en cursiva</i>. También puedes usar <u>texto subrayado</u>.
</p>
</body>

Divisiones

El uso de de estas <div> te permitirá dividir el documento en secciones discretas. También podrás otorgar a estas secciones un identificador que facilite el referenciado a ellas desde otros lugares del documento.

Crea una división específica con una etiqueta <div> con el atributo id, y contacto sirva para agregar esta sección a la página, de esta forma: 

<div id="contacto">

Existen más atributos que podrás utilizar. Detallemos algunos.

Listas

Las listas son una excelente manera de organizar la información en un documento HTML. HTML admite dos tipos de listas:

  • listas ordenadas <ol></ol> donde cada elemento recibe un número
  • listas desordenadas <ul></ul> que usan viñetas en su lugar.

Las listas son un poco más complejas, ya que requieren dos conjuntos de etiquetas, ol o ul, para encerrar la lista completa y un segundo conjunto de etiquetas, <li></li>, para indicar cada elemento de la lista.

Por ejemplo, podrás agregar esta información de contacto: 

  <h2>Contacto</h2>
  <p>Deseo ser contactad@ por estos medios:</p>
  <ul>
    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
    <li><u>XMPP</u>: fulana@texto-plano.xyz</li>
  </ul>

Enlaces

Los enlaces son la característica definitoria del hipertexto. Podrás incular tanto a secciones dentro del documento actual, a otras páginas que componen el sitio web, así como a otros sitios web completamente distintos que se encuentren en línea.

Para crear un enlace utiliza el par de etiquetas <a></a>. En este caso, el texto contenido entre estas etiquetas será presentado como el hiperenlace (en el que podrás hacer clic en la página web).

Modifica estas etiquetas con el atributo href para indicarle al navegador a qué dirección URL vincular (opera de forma similar al modificador de indentificador de la etiqueta div). Existen tres clases amplias de cosas a las que puede vincular.

Vínculo interno en la página web

Primero intenta enlazar a una sección de la página web actual. Para lograrlo, primero debes contar con un <div> con identificador (podrás colocarla antes de la información de contacto). Digamos que su página contiene una sección de imágenes geniales de gatos. Configura un div para contenerlas que se parezca a esto: 

<div id="#contacto">Información de Contacto</div>
  <h2>Contacto</h2>
  <p>Deseo ser contactad@ por estos medios:</p>
  <ul>
    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
    <li><u>XMPP</u>: fulana@texto-plano.xyz</li>
  </ul>

Ahora podrás vincular a esta sección contacto tu página utilizando esta forma: 

href="#Contacto"<Inforamción de Contacto</a>

Como ves, # le indica al navegador que haciendo clic en dicho vínculo, deseas dirigirte a una sección incorporada dentro la página actual.

También podrás definir otros vínculos útiles: incluso si no hubieses configurado ningún <div> en tu documento web, siempre podrás usar href=“#top” y href=“#bottom” para saltar a la parte superior o inferior de la página.

Para hacerlo más específico en castellano, podrías usar algo como esto: 

<a href="#top">Volver al principio</a>.

Vínculo a una web en el mismo directorio

Suele ser muy útil vincular otras páginas web situadas en tu mismo directorio ~/public_html/, de forma de no hacer una sóla página web gigante, sino varias más pequeñas vinculadas entre sí.

Para recurrir a esto, podrás usar la misma técnica que utilizaste al vincular un div, excepto que en lugar de usar # en el href, debes utilizar ./ para decirle al navegador que busque un nuevo documento HTML situado el mismo directorio (o carpeta) donde se encuentra el documento actual.

De esta forma, en lugar de poner las fotos de tus gatos en un div, podrás colocarla en un fichero web aparte llamado gatos.html. Podrías vincular a esta web aparte de esta forma: 

<a href="./gatos.html">¡Visita la web de mis gatos!</a>

Vínculos web externos

Finalmente, podrás vincular a cualquier sitios web que esté en línea. Para lograrlo, incluye la dirección web completa (URL) en tu href, de modo que te quede algo como esto: 

<a href="https://texto-plano.xyz/~fulana">¡Mira el sitio web de ~fulana!</a>

Una cosa más: si deseas vincular a una sección específica de una página, podrás al href un #id final, de esta manera: 

<a href="./gatos.html#felix">Mi gato Felix.</a>

Imágenes

Puedes agregar imágenes a tu página web empleando la etiqueta simple <img> (no tiene etiqueta de cierre).

<img> cuenta con dos atributos: src que le dice al navegador la dónde encontrar la imagen, y alt, que debería proporcionar una descripción de texto opcional de la imagen.

Si quisieras incluir una foto de su gato Felix en tu página, coloca el archivo de imagen felix.jpg en el mismo directorio que la página web e insérta en tu página la etiqueta 

<img src="./felix.jpg" alt="Félix el gato persiguiendo su cola">
Existen todo tipo de cosas que puede hacer con la etiqueta <img>: puedes escalarla, agregarle un marco, etc.

Caracteres especiales

Vaya a saber porqué, HTML no siempre muestra caracteres especiales como nos gustaría.

Si tiene un carácter que no puede mostrar correctamente, deberá usar algo llamado entidad HTML. Las entidades comienzan con un & seguido de un poco de texto. Por ejemplo, dado que el navegador piensa que < es parte del código html, ¡estos símbolos no aparecen!. Para lograr que lo hagan sin incordios, utiliza el suplantador &lt, donde lt significa “menor que”.

La realidad es que hay demasiadas suplantadores como para enumerarlas todas aquí, pero hay un montón de páginas que tienen todos los códigos que podrías desear.

Para entender cómo encajan todas estas partes, lo es mejor es estudiar el código HTML de muchas de páginas web. En la mayoría de los navegadores podrás hacerlo con Ctrl+u (En MacOS usa Comando+Opción+u). Si la página cuenta con muchos scripts o CSS, probablemente no sea tan útil mirar su código fuente, pero una página simple como https://texto-plano.xyz/ podrá resultarte muy útil.

Conclusión

Ahora sabes lo suficiente como para crear a mano tu propia página web desde cero.

Para publicarla debes actualizarle los permisos a los documentos que creaste. En nuestro sistema esto es sencillísimo ingresando: 

acthtml

Existe tanta información sobre HTML en la web que unas pocas búsquedas rápidas deberían poder proporcionar información sobre cualquier tema. Ten en cuenta que gran parte de esta información está dirigida a personas que buscan lo último y lo mejor; no hay nada de malo en eso. Pero tampoco tiene nada de especial. Depende de tí decidir qué se adapta a tus necesidades.

En mi opinión, el contenido es más importante que la presentación. Si agregas un montón de transiciones elegantes o estilos con guionado a mi prosa, ¿mejorará la información que estoy tratando de presentar? ¿Quizás? Pero, probablemente no.

¿Qué sigue?

Hay muchas cosas que puede hacer con tu cuenta shell en texto-plano.xyz. Echa un vistazo a Gopher y Gemini, prueba IRC o juega en línea.

¡Que te diviertas!

  • html.1674067082.txt.gz
  • Última modificación: 2023/01/18 18:38
  • por peron