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 basico en el que esta construida la Telarana de Alcance Global WWW.

Tutorial de HTML

Introduccion

En principio, un sitio web no es mas que una coleccion de ficheros de texto plano con enlaces. Estos ficheros de texto suelen escribirse segun el formato que permite el lenguaje HTML, por lo cual cuentan con la extension .html.

Sin ser el visualmente mas elegante, el uso de HTML permite una manera simple y llana de expresion de texto en la Web, de una forma minimalista.

Primeros pasos

La mayoria de servicios de creacion web actuales usualmente obligan a emplear variados sistemas de contenido y plantillas prearmadas. En este Tutorial aprenderas la elaboracion de una web "a mano" a travnes de nuestro shell Unix. Esto implica escribir el codigo HTML en tu editor de texto favorito.

Es posible que Micro sea mas del agrado del principiante: cuenta con soporte para mouse y es probable que sus comandos sean mas parecidos a los que esta 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!

Estructura de los documentos HTML

Tu fichero HTML deberia contar con una "estructura". Normalmente, esta suele conformar el siguiente esqueleto:

Identificador de tipo de Documento DOCTYPE
Contenido de hipertexto '''' * Encabezado '''': define el titulo y caracteristicas del documento. * Cuerpo '''': Aqui pondras el contenido que sera visible en el navegador web. **Crea un fichero muleto ''[[src.html]]''** introduciendo: micro ~/public_html/[[src.html]] ...y **pegale el siguiente codigo fuente HTML**, para darle una estructura para fichero en castellano: `Titulo de tu pagina web

...`

¡Felicitaciones! Conserva este esqueleto basico src.html, pues te servira para crear la mayoria de las paginas webs que desees.

Contenido HTML

El archivo inicial de tu pagina web sera ~/public_html/index.html. Cuando se ingresa la URL raiz del sitio (por ejemplo, http://texto-plano.xyz/~fulana), nuestro servidor entregara una copia del mismo.

Edita ahora tu fichero index.html en base al esqueleto src.html que ya has creado.

Incorpora contenido al cuerpo del sitio web. Como vimos, este comprende el espacio entre la etiqueta de apertura <body> y la etiqueta de cierre </body>). Reemplaza entonce los ... del fichero, y agregando algo como sigue:

<body>
¡Hola Tercer Mundo!
Este es el primer parrafo que deseo escribir, ya que estoy editando HTML a mano.
He aprendido que las etiquetas permiten definir formatos, por ejemplo este texto esta en negrita y este texto esta en cursiva. Tambien puedes usar subrayado.
</body>

Este codigo presentara el texto en el navegador de forma simple (sin formato y sin divisiones de parrafo alguno).

Etiquetas de atributo

Para indicar formato y atributos HTML, utilizaremos lo que llamamos etiquetas que marcan el texto. Estas etiquetas informan al navegador sobre la apariencia del texto contenido - definiendo titulos, enlaces, listas, parrafos, etc. Por medio de las mismas definiras distintos atributos, que el navegador se encargara 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 vera afectado por los atributos solicitados. Por ejemplo, el atributo b le ordena al navegador que presente un texto en negrita.

Algunas de las etiquetas de formato que podras utilizar:


`<b></b>`	Negrita
`<i></i>`	Cursiva o italica
`<s></s>`	~~Tachado~~
`<u></u>`	Subrayado
`<pre></pre>`	Texto monoespacio.
	hace que el texto parezca codigo fuente.
`<blockquote></blockquote>`	Citado
`<p>`	Comienza un nuevo parrafo.
`<br>`	inserta un salto de linea.
`<hr>`	traza una linea horizontal a lo largo de la pagina.
`<center></center>`	alinea el texto en el centro de la pagina.

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 podras usar <hr> para trazar una linea horizontal.

Con las consideraciones anteriores, otorga formato al contenido que acabas de crear. Este podria quedar de la siguiente manera:

<body>
<h1>¡Hola Tercer Mundo!</h1>
<p>
Este es el primer parrafo 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 esta en negrita</b> y <i>este texto esta en cursiva</i>. Tambien puedes usar <u>texto subrayado</u>.
</p>
</body>

¡Con esto ya has aprendido como otorgarle formato simple HTML a tu contenido de texto!

Veamos ahora en forma detenida como se utilizan las funciones de los principales tipos de etiquetas.

Etiquetas de bloque

La etiqueta <p> divide el texto en parrafos. Ideal para cuando tenes que separar en capitulos. Se usa asi:

<p>
Este es un Parrafo
</p>

La etiqueta <br> inserta un salto de linea, sin necesidad de abrir un parrafo nuevo. Simplemente indica:

<br>

La etiqueta <div> es un contenedor de uso general. Ideal para cuadros de texto o separar partes bien diferenciadas.

<div>Texto contenido en un divisor general</div>

Contenedores semanticos

Al igual que las etiquetas anteriores, opcionalmente puedes utilizar contenedores HTML para separar las partes de tu web de manera logica. Los contenedores habilitados son:

<header>Texto de tu encabezado</header>
<section>Texto contenido en una seccion</section>
<article>Texto de tu articulo</article>
<footer>Pie de pagina</footer>

El header contiene el encabezado -logo, titulo de la web, frase matadora-. Es lo primero que se ve al ingresar en la pagina. section indica una seccion en tu web. Muy util si dividis tu pagina en secciones. La etiqueta article puede contener -como su nombre indica- un articulo. El footer contiene el pie de la pagina: notas sobre los derechos, fecha de publicacion, datos de contacto, etc.

Un ejemplo: podrias tener una pagina con criticas de cine. Usar secciones para separar los distintos generos (drama, policial, terror (mi preferido), musical) y luego usar los articulos para contener cada una de las criticas.

Listas

Las listas pueden estar ordenadas usando numeros consecutivos (tambien letras), o no-ordenadas (¿desordenadas?) usando vinetas con distintas figuras. En ambos casos cada elemento de la lista va encerrado entre las etiquetas <li>:

<li>elemento</li>

Listas ordenadas

Las listas ordenadas usan la etiqueta <ol> y </ol>.

<ol>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento n</li>
</ol>

Muestran un listado ordenado numericamente, de este tipo:

elemento 1
elemento 2
elemento n

Listas Desordenadas

Las listas desordenadas se engloban utilizando las etiquetas <ul> y </ul>.

<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento n</li>
</ul>

Muestran una vineta o punto de enumeracion en lugar de un numero, de esta forma:

elemento 1
elemento 2
elemento n

Etiquetas de formato

Son las que dicen como se mostrara el texto que encierran.

Titulos

La etiqueta <h> </h> demarca un titular -o encabezado-. Hay 6 niveles, siendo h1 es el mas enfatizado y h6 el menos enfatizado.

<h1>Titular h1</h1>
<h2>Titular h2</h2>
<h3>Titular h3</h3>
<h4>Titular h4</h4>
<h5>Titular h5</h5>
<h6>Titular h6</h6>

Enlaces

Una de las caracteristicas principales de una pagina web es que se pueden enlazar distintos documentos. La esencia de la WWW es el hiper-texto: un texto que puede direccionarnos a otros textos, formando una verdadera red.

Para poner un enlace necesitaras un ancla (anchor, en ingles). La etiqueta que genera el enlace se ve asi:

<a href="https://mi_pagina_web/index.html">La web de ~fulano</a>

La letra 'a' es la que define que lo que viene a continuacion es un enlace. El 'href' significa referencia de hiper-texto y a continuacion viene la URL a la que vas a enlazar.

Dos cosas importantes que no debes olvidar: el signo = y las comillas dobles.

Luego viene el texto que leeras en el navegador -La web de ~fulano- y finalmente la </a> que cierra el enlace.

Si el archivo enlazado esta en la misma carpeta solo hara falta poner el nombre del archivo, sin especificar toda la direccion:

<a href="index.html">La web de ~fulano</a>

en cambio, si esta en otro servidor porque es la pagina web de tu amigo, deberas poner la URL completa:

<a href="https://urldetuamigo/paginadetuamigo.html">La web de mi+amigo</a>

Enlace de correo electronico

El enlace de correo electronico es igual al enlace explicado recien, solo que cambia la referencia.

<a href="mailto:usuario@texto-plano.xyz">Mandame un mail</a>

La diferencia esta en la palabra mailto: seguida de la direccion de correo electronico. Mailto indica al navegador que debe abrir un mensaje nuevo en la aplicacion predeterminada de correo y cargar el campo "para" con la direccion establecida en el enlace.

Podes hacer que el mensaje tenga los campos previamente completados si agregas la informacion en el enlace. De esa manera el visitante de tu pagina no tiene mas que cliquear el enlace y luego en el boton de enviar, ya que todo estara completo.

<a href="mailto:usuario@texto-plano.xyz;copia@otro_destino.com&bcc=copiaoculta@otro_destino.com&subject="Asunto%20del%20mail&body=Este%20es%20el%20cuerpo%20del%20mensaje">Mandame un mail</a>

El simbolo & separa los diferentes campos: bcc, subject y body. El codigo %20 reemplaza a la barra /.

Se ve complicado a primera vista, pero una vez que pasa la primera impresion podras ver que es mas sencillo de lo que parece.

Enlace interno

Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitaras dos etiquetas:

una etiqueta para el enlace
Un identificador id para el contenido enlazado

Por ejemplo, tenemos un texto largo y queremos que cuando el lector llegue hasta abajo pueda volver al titulo del articulo, lo que hacemos es ponerle un nombre identificador (id) al titular:

<h2 id="enganche">¡Regalan plata gratis!</h2>

Con esto, estamos poniendo un marcador en el inicio de un titular clicbaitero.

Luego, al final del articulo, ofreces al lector la posibilidad de volver arriba+usando el signo # y el nombre que le asignaste al marcador:

<a href="#enganche">Volver al titular</a>

Enlace a una imagen

Este enlace es diferente.

<img src="https://enlace/a_la/imagen.jpg" />

La etiqueta abre con img, indicando que va a enlazar una imagen. Continua con src (source), que es la fuente de la imagen (no se por que no usaron href). No olviden el signo = y las comillas dobles "".

La barra final, indica el cierre de la etiqueta. No es obligatorio, pero es una buena costumbre evitar ir dejando etiquetas abiertas por todo el documento.

Para completar la llamada podes agregarle un titulo y un texto alternativo. Por ejemplo:

<img src="https://enlace/a_la/imagen.jpg" title="Titulo" alt="texto_alternativo" />

El titulo es el texto que ves cuando pasas el mouse por encima de la imagen.

El texto alternativo se mostrara cuando el navegador no tenga soporte para imagenes, las imagenes esten deshabilitadas o uses un navegador no grafico.

Los formatos soportados son JPG, GIF (y GIF animados), PNG, SVG, BMP e ICO. GIF, PNG y SVG soportan transparencias. (Hablo de pixeles transparentes, no de ropa interior o_O!)

¿Como usar una imagen en vez de un texto para el enlace?

Es facil, solo tendrias que encerrar la etiqueta de la imagen dentro de las etiquetas de un enlace.

<a href="https://mi_enlace"><img src="https://mi_imagen.jpg"/></a>

De esta manera tendrias una imagen que enlaza con una URL que puede ser cualquiera de las que describimos antes. Incluso puede ser la misma URL de la imagen. Un claro ejemplo podria ser la imagen de una carta postal en un enlace +de tipo mailto.

Conclusion

Ahora sabes lo suficiente como para crear a mano tu propia pagina web desde cero.

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

acthtml

Si lo deseas puedes anunciarlo a traves de gab, con un comando similar al siguiente:

gab -m "Estan invitados a mi pagina web en https://texto-plano.xyz/~$USER"

Existe tanta informacion sobre HTML en la web que unas pocas busquedas rapidas deberian poder proporcionar informacion sobre cualquier tema. Ten en cuenta que gran parte de esta informacion esta dirigida a personas que buscan lo ultimo y lo mejor; no hay nada de malo en eso. Pero tampoco tiene nada de especial. Depende de ti decidir que se adapta a tus necesidades.

En mi opinion, el contenido es mas importante que la presentacion. Si agregas un monton de transiciones elegantes o estilos con guionado a mi prosa, ¿mejorara la informacion que estoy tratando de presentar? ¿Quizas? Pero, probablemente no.

¿Que 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 linea.

¡Que te diviertas!