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 estandarizado por el W3 Consortium. Es el formato básico en el que está construida la Telaraña de Alcance Global WWW, ya que las páginas web en su gran mayoría están escritas con este lenguaje de marcado.

Puedes consultar su su especificación completa en https://html.spec.whatwg.org/.

Tutorial de HTML

Introducción

Abarcaré aquí el diseño web "a mano" en nuestro sistema compartido.

Sin ser el visualmente más elegante, nos permite una manera simple y llana de expresarnos en la Web, de una forma minimalista.

Primeros pasos

HTML es un lenguaje de marcado con el que podemos crear nuestras páginas web. Se llama marcado porque integra etiquetas que marcan el texto. Las etiquetas le informan al navegador sobre la apareciencia del texto contenido -definiendo títulos, enlaces, listas, párrafos, etc.

Un sitio web no es mas que una colección de ficheros de texto plano concebidos para que el navegador web los vincule y los presente en pantalla. Estos ficheros de texto suelen escribirse según el formato del lenguaje HTML, por lo que por convención tienen la extensión .html.

La mayoría de servicios de creación web desean que hagas uso de distintos sistemas de contenido y plantillas prearmadas.

En nuestro caso crearás la web desde nuestro shell Unix escribiendo 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.

En este caso, para editar tu fichero index.html utiliza… 

micro ~/public_html/index.html

Si el fichero no existiese, se creará automáticamente para que puedas trabajar con él. Puedes consultar este ''index.html'' de ejemplo.

El documento HTML

Los documentos HTML que crearás serán ficheros de texto sin formato, que incluyen instrucciones de presentación que permiten ordenarle al navegador web cómo ha de presentar el texto: si debe hacerlo en negrita o subrayados, si debe estar encolumnado, si ha de utilizar colores, cómo debe organizarse en la página (párrafos, listas, etc.). Finalmente estas instrucciones de presentación permiten indicar cómo se enlazan o vinculan los documentos entre sí.

Por convención, los documentos escritos en HTML cuentan con una extensión .html, aunque esta no es mandatorio.

Normalmente instrucciones de presentación en pantalla que sigue en navegador web están contenidas dentro el mismo documento HTML siguiendo una formulación a la que llamaremos etiquetas. Estas etiquetas son fragmentos de texto específicos entrecerrados con signos mayor y menor <>. El navegador no las mostrará de forma directa, sino que las interpretará, presentando el documento según dichas instrucciones de presentación.

Estructura

El Documento HTML debe contar con una “estructura” o esqueleto definido, de la siguiente forma:

  • Identificador de tipo de Documento
  • HTML
    • Encabezado
    • Cuerpo

Como vemos, según esta convención, cada página web debería comenzar con una etiqueta que le permitirá al navegador conocer que se trata de una página web.

Comienza entonces por introducir en tu web index.html una primer etiqueta simple <!DOCTYPE> que definirá dicho documento como una estructura HTML: 

<!DOCTYPE html>

A continuación, define en el documento un conjunto de par de etiquetas <html></html>. Estas etiquetas en particular - como la mayoría de las etiquetas, son pares. En este caso se componen por una etiqueta de apertura indicada con <html> y otra etiqueta de cierre indicada con </html>. 

<!DOCTYPE html>
<html>
...
</html>
En las etiquetas HTML la / indica “cierre de etiqueta”. Todo lo que está contenido entre las <etiquetas abiertas> y </etiqueta cerradas> en este caso el …), formará parte del contenido HTML en sí.

¡Ya has definido el espacio para trabajar en el documento HTML!

Reemplaza ahora el … que figuraba entre los etiquetados HTML de apertura y de cierre, para definir las dos partes que componen el contenido HTML: un encabezado <head></head> y un cuerpo <body></body>.

Debe quedarte así: 

<!DOCTYPE html>
<html>
  <head>
  </head>
 
  <body>
  </body>
</html>

En resumen, la estructura básica - - de un documento HTML ya está conformada. Es el “esqueleto” sobre el cual podrás crear cualquier documento. Puedes guardar los cambios (también puedes dejar este documento a mano, para no tener que volver a armar un esqueleto, ¡ya lo has realizado!

A continuación aprenderás qué incorporar al encabezado y al cuerpo del contenido HTML.

Encabezado

Las etiquetas <head></head> que delimitan el encabezado del documento suelen ser utilizadas por el autor para definir información opcional del documento HTML que podría serle útil para caracterizarlo. Por ejemplo, utiliza este sector podrás incorporarle un par de etiquetas <title></title> que definan un título de página web: 

  </head>
    <title>Titulo de tu página web</title>
  </head>
El texto involucrado entre entre el par de etiquetas de título será el que aparezca en la barra de título del navegador, en forma de titular, cuando este reciba la copia de la página del servidor.

Aún dentro del encabezado, también es importante indicar ciertas etiquetas meta. En particular, unas que definan el uso de texto con caracteres acentuados, eñes y emojis; ya que esta funcionalidad se encuentra normalmente desactivada. Para activarlos incluye lo siguiente: 

    <meta http-equiv="content-type" content="text/html"/>
    <meta lang="es-ES" dir="ltr">
    <meta charset="utf-8"/>

En efecto, el encabezado <head></head> para un sitio web en castellano podría quedarte así: 

  </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>

¡Ya tienes listo el encabezado! Guarda nuevamente los cambios y conserva el esqueleto para otras páginas webs.

Cuerpo

Esta es la sección del cuerpo es la más importante, ya que en ella irá el contenido del documento que se presentará en el navegador web de quien solicite una copia del mismo para su lectura.

Etiquetas de atributo

Estas permiten definir distintos atributos, que el navegador se encargará de presentar al texto.

Las etiquetas se ven así: 

<b>este texto estará en negrita</b>

Como ya vimos, 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. En este caso, la de atributo b le ordena al navegador que presente este texto estará en negrita con dicho atributo de formato.

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.

Usa etiquetas de atributos para dar formato al texto del cuerpo.

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.
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>.

Algunas etiquetas también contienen información adicional que llamamos indicadores. Veremos más sobre esto cuando veamos los enlaces.

Agreguemos entonces algún contenido a nuestro index.html: 

<h1>Hola Tercer Mundo!</h1>
<p>
¡Esta es mi <u>primer</u> <b>página web</b> en <i>texto-plano.xyz</i>!
</p>
Estoy aprendiendo a escribir HTML a mano.
<hr>

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. Cualquier cosa que desee puede ir en un elemento de la lista, incluso en otra lista. Esta es una gran manera de hacer contornos. Una lista simple sería algo como esto: 

<ol>
<li>Artículo uno</li>
<li>Artículo dos</li>
</ol>

Divisiones

La última estructura (opcional) de la que hablaremos serán las etiquetas <div></div>. 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 facilita el referenciado a ellas desde otros lugares del documento.

Para crear una división específica, modifica la apertura de etiqueta div agregándole el atributo id, y un AlgunNombre que le sirva de identificador, de esta forma 

<div id="AlgunNombre">

Como ves, una vez abiertas, las etiquetas de divisiones pueden cerrarse de forma simple utilizando el >.

Enlaces

Los enlaces son la característica definitoria de HTML. Podrás vincular 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. 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="gatos">¡Las imágenes de gatos van aquí!</div>

Ahora podrás vincular a cualquier div de tu página siempre que tenga una ID asignado, utilizando esta forma: 

href="#DivID"

Como ves, # le indica al navegador que haciendo clic en dicho vínculo, deseas dirigirte a una sección incorporada en la página actual. De esta forma, para vincular a nuestra sección de fotos de gatos, utillizarías: 

<a href="#gatos">¡Mis fotos geniales de gatos!</a>.

También podrás definir algunas cosas adicionales muy útiles. Incluso si no ha 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.1674001283.txt.gz
  • Última modificación: 2023/01/18 00:21
  • por peron