¡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.
El navegador web solicita a través de una dirección URL una copia de estos ficheros de hipertexto al servidor, los presente en pantalla, y permite vincularlos.
Tutorial de HTML
Introducción
Un sitio web no es mas que una colección de ficheros de texto plano con enlaces de hipertexto. Estos ficheros de texto suelen escribirse según el formato del lenguaje HTML, por lo que por convención tienen la extensión .html.
En este tutorial aprenderás el diseño web "a mano" en nuestro sistema compartido.
Sin ser el visualmente más elegante, esto te permitirá una manera simple y llana de expresarte en la Web, de una forma minimalista.
Primeros pasos
El lenguaje de marcado HTML se utiliza para crear páginas web. Se denomina de marcado porque integra etiquetas que marcan el texto. Estas etiquetas le informan al navegador sobre la apariencia del texto contenido - definiendo títulos, enlaces, listas, párrafos, etc.
Si bien la mayoría de servicios de creación web actuales desean que hagas uso de distintos sistemas de contenido y plantillas prearmadas, en este caso crearás la web desde nuestro shell Unix escribiendo el código HTML en tu editor de texto favorito.
¡Comencemos!
El archivo más importante será tu ~/public_html/index.html, ya que en texto-plano.xyz será el que entregue el servidor cuando se ingresa la url raíz del sitio (por ejemplo, http://texto-plano.xyz/~fulana).
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 ingresa:
micro ~/public_html/index.html
Si el fichero no existiese, se creará automáticamente para que puedas trabajar con él.
Estructura de los documentos HTML
Idealmente, los documentos HTML deben contar con una “estructura” o esqueleto definido, de la siguiente forma:
- Identificador de tipo de Documento
DOCTYPE - Contenido de hipertexto
<html>- Encabezado
<head>: define el título y características del documento. - Cuerpo
<body>: entre estas etiquetas se define el contenido en sí.
Escribe tu documento según la siguiente plantilla.
<!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 lista el esqueleto básico! Guarda los cambios (Ctrl+s) y conserva el esqueleto para otras páginas webs.
Etiquetas de atributo
Estas permiten definir 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. En este caso, la de atributo b le ordena al navegador que presente este texto estará en negrita con dicho atributo de formato.
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 para incorporar contenido al cuerpo (o sea, entre la etiqueta de apertura <body> y la etiqueta de cierre </body>).
<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>
Sabiendo usar etiquetas, dale formato ahora al texto. Deberá quedarte de la siguiente manera.
<body> <h1>¡Hola Tercer Mundo!</h1> <p> Este es el primer párrafo que deseo escribir, ya que estoy escribiendo 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>
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>.
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 <, 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!