Diferencias

Muestra las diferencias entre dos versiones de la página.

--- html [2023/01/11 19:08] – [Estructura] peron
+++ html [2023/01/19 17:26] (actual) – [Enlaces] peron
@@ Línea 1: / Línea 1: @@
 ====== 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 [[world_wide_web|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.
+''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 [[world_wide_web|Telaraña de Alcance Global WWW]].
-Puedes consultar su su especificación completa en [[https://html.spec.whatwg.org/]].
 ====== Tutorial de HTML ======
 ====Introducción====
-Abarcaré aquí [[uso de html|el diseño web "a mano" en nuestro sistema compartido]].
+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 [[filosofia unix#minimalismo|minimalista]].
-Sin ser el visualmente más elegante, nos permite una manera simple y llana de expresarnos en la Web, de una forma [[filosofia unix#minimalismo|minimalista]].
 ==== Primeros pasos ====
-Un sitio web no es mas que una colección de ficheros de texto plano concebidos para que el [[navegador web]] los vincule entre sí, los interprete 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''.
-De un tiempo a esta parte la mayoría de servicios de creación web desean que en lugar de escribir código HTML, hagas uso de sus sistemas de contenido y plantillas prehechas. Esto es contrario a lo que estamos buscando, que es crear una web a mano desde [[pubnix|nuestro shell Unix]].
+La mayoría de servicios de creación web actuales usualmente obligan 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 [[pubnix|nuestro shell Unix]]. Esto implica escribir el código HTML en tu [[editores de texto|editor de texto]] favorito.
-En este caso aprenderás a crear tu página web a mano, escribiendo el código HTML en tu [[editores de texto|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.
+>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.png?200 |}}
-<code bash>micro ~/public_html/index.html</code>
-Si el fichero no existiese, se creará automáticamente para que puedas trabajar con él. Puedes consultar [[index.html|este ''index.html'']] de ejemplo.
+¡Comencemos!
-{{ :micro.png?200 |}}
+====Estructura de los documentos HTML ====
-====El documento HTML====
+Tu fichero HTML debería contar con una "estructura". Normalmente, esta suele conformar el siguiente esqueleto:
-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í.
+  * 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.
-Por convención, los documentos escritos en HTML cuentan con una extensión ''.html'', aunque esta no es mandatorio.
+**Crea un fichero muleto ''[[src.html]]''** introduciendo:
-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.
+<code bash>micro ~/public_html/[[src.html]]</code>
-====Estructura====
+...y **pégale el siguiente código fuente HTML**, para darle una estructura para fichero en castellano:
-El Documento HTML debe contar con una "estructura" o esqueleto definido, de la siguiente forma:
+<code html>
+<!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>
+</code>
-  * Identificador de tipo de Documento
+¡Felicitaciones! Conserva este esqueleto básico ''src.html'', pues te servirá para crear la mayoría de las páginas webs que desees.
-  * 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.
+==== Contenido HTML ====
-Comienza entonces por introducir en tu web ''index.html'' una primer //etiqueta simple// ''<!DOCTYPE>'' que definirá dicho documento como una estructura HTML:
+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), [[servidores en texto-plano.xyz|nuestro servidor]] entregará una copia del mismo.
-<code html><!DOCTYPE html></code>
+**Edita ahora tu fichero ''index.html'' en base al esqueleto ''src.html'' que ya has creado**.
-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>''.
+**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:
 <code html>
-<!DOCTYPE html>
+<body>
-<html>
+¡Hola Tercer Mundo!
-...
+Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano.
-</html>
+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>
 </code>
->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í.
+Este código presentará el texto en el navegador de forma simple (sin formato y sin divisiones de párrafo alguno).
-¡Ya has definido el espacio para trabajar en el documento HTML!
+===Etiquetas de atributo===
-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>''.
+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 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.
-Debe quedarte así:
+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**.
+Algunas de las etiquetas de formato que podrás utilizar:
+| ''<b></b>'' | **Negrita** |
+| ''<i></i>'' | //Cursiva o itálica// |
+| ''<s></s>'' | <del>Tachado</del> |
+| ''<u></u>'' | __Subrayado__ |
+| ''<pre></pre>'' | Texto monoespacio. |
+| ''<code></code>'' | hace que el texto parezca código fuente. |
+| ''<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.
+Con las consideraciones anteriores, **otorga formato al contenido que acabas de crear**. Este podría quedar de la siguiente manera:
 <code html>
-<!DOCTYPE html>
+<body>
-<html>
+<h1>¡Hola Tercer Mundo!</h1>
-  <head>
+<p>
-  </head>
+Este es el primer párrafo que deseo escribir, ya que estoy editando HTML a mano.
+<hr>
-  <body>
+<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>.
-  </body>
+</p>
-</html>
+</body>
 </code>
-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!
+¡Con esto ya has aprendido cómo otorgarle formato simple HTML a tu contenido de texto!
-A continuación aprenderás qué incorporar al encabezado y al cuerpo del contenido HTML.
+Veamos ahora en forma detenida cómo se utilizan las funciones de los principales tipos de etiquetas.
-====Encabezado====
+====Etiquetas de bloque====
-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**:
+La etiqueta ''<p>'' divide el texto en párrafos. Ideal para cuando tenés que separar en capítulos. Se usa así:
 <code html>
-  </head>
+<p>
-    <title>Titulo de tu página web</title>
+Este es un Párrafo
-  </head>
+</p>
 </code>
->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]].
+La etiqueta ''<br>'' inserta un salto de línea, sin necesidad de abrir un párrafo nuevo. Simplemente indica:
-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:
+<code html><br></code>
+La etiqueta ''<div>'' es un contenedor de uso general. Ideal para cuadros de texto o separar partes bien diferenciadas.
+<code html><div>Texto contenido en un divisor general</div></code>
+====Contenedores semánticos====
+Al igual que las etiquetas anteriores, opcionalmente puedes utilizar //contenedores HTML// para separar las partes de tu web de manera lógica. Los contenedores habilitados son:
 <code html>
-    <meta http-equiv="content-type" content="text/html"/>
+<header>Texto de tu encabezado</header>
-    <meta lang="es-ES" dir="ltr">
+<section>Texto contenido en una sección</section>
-    <meta charset="utf-8"/>
+<article>Texto de tu artículo</article>
+<footer>Pie de página</footer>
 </code>
-En efecto, el encabezado ''<head></head>'' para un sitio web en castellano podría quedarte así:
+El ''header'' contiene el encabezado -logo, título de la web, frase matadora-. Es lo primero que se ve al ingresar en la página. ''section'' indica una sección en tu web. Muy útil si dividís tu página en secciones. La etiqueta ''article'' puede contener -como su nombre indica- un artículo. El ''footer'' contiene el pie de la página: notas sobre los derechos, fecha de publicación, datos de contacto, etc.
+>Un ejemplo: podrías tener una página con críticas de cine. Usar secciones para separar los distintos géneros (drama, policial, terror (mi preferido), musical) y luego usar los artículos para contener cada una de las críticas.
+====Listas====
+Las listas pueden estar ordenadas usando números consecutivos (también letras), o no-ordenadas (¿desordenadas?) usando viñetas con distintas figuras. En ambos casos cada elemento de la lista va encerrado entre las etiquetas ''<li>'':
+<code html><li>elemento</li></code>
+==Listas ordenadas==
+Las listas ordenadas usan la etiqueta ''<ol>'' y ''</ol>''.
 <code html>
-  </head>
+<ol>
-    <title>Titulo de tu página web</title>
+  <li>elemento 1</li>
-    <meta http-equiv="content-type" content="text/html"/>
+  <li>elemento 2</li>
-    <meta lang="es-ES" dir="ltr">
+  <li>elemento n</li>
-    <meta charset="utf-8"/>
+</ol>
-  </head>
 </code>
-¡Ya tienes listo el encabezado! Guarda nuevamente los cambios y conserva el esqueleto para otras páginas webs.
-====Cuerpo====
+Muestran un listado ordenado numéricamente, de este tipo:
-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.
-===Divisiones===
+  - elemento 1
-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.
+  - elemento 2
+  - elemento n
-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
+==Listas Desordenadas==
-<code html><div id="AlgunNombre"></code>
+Las listas desordenadas se engloban utilizando las etiquetas ''<ul>'' y ''</ul>''.
-Como ves, una vez abiertas, las etiquetas de divisiones pueden cerrarse de forma simple utilizando el ''>''.
+<code html>
-===Etiquetas de atributo===
+<ul>
-Estas permiten definir distintos atributos, que el navegador se encargará de presentar al texto.
+  <li>elemento 1</li>
+  <li>elemento 2</li>
+  <li>elemento n</li>
+</ul>
+</code>
-Las etiquetas se ven así:
+Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma:
-<code html><b>este texto estará en negrita</b></code>
+  * elemento 1
+  * elemento 2
+  * elemento n
-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.
+====Etiquetas de formato====
+Son las que dicen cómo se mostrará el texto que encierran.
-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.
+===Títulos===
-Usa etiquetas de atributos para dar formato al texto del cuerpo.
+La etiqueta ''<h>'' ''</h>'' demarca un títular -o encabezado-. Hay 6 niveles, siendo ''h1'' es el más enfatizado y ''h6'' el menos enfatizado.
-Estas son algunas de las etiquetas de formato que uso:
+<code html>
+<h1>Títular h1</h1>
+<h2>Títular h2</h2>
+<h3>Títular h3</h3>
+<h4>Títular h4</h4>
+<h5>Títular h5</h5>
+<h6>Títular h6</h6>
+</code>
+====Enlaces====
+Una de las características principales de una página 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.
-| ''<b></b>'' | **Negrita** |
+Para poner un enlace necesitarás un ancla (anchor, en inglés).
-| ''<i></i>'' | //Cursiva// |
+La etiqueta que genera el enlace se ve así:
-| ''<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>''.
+<code html><a href="https://mi_pagina_web/index.html">La web de ~fulano</a></code>
-Algunas etiquetas también contienen información adicional que llamamos //indicadores//. Veremos más sobre esto cuando veamos los enlaces.
+La letra 'a' es la que define que lo que viene a continuación es un enlace. El 'href' significa referencia de hiper-texto y a continuación viene la URL a la que vas a enlazar.
-===Listas===
+Dos cosas importantes que no debes olvidar: el signo = y las comillas dobles.
-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
+Luego viene el texto que leerás en el navegador -La web de ~fulano- y finalmente la <code html></a></code> que cierra el enlace.
-  * 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.
+Si el archivo enlazado está en la misma carpeta solo hará falta poner el nombre del archivo, sin especificar toda la dirección:
-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:
-<code html>
+<code html><a href="index.html">La web de ~fulano</a></code>
-<ol>
-<li>Artículo uno</li>
-<li>Artículo dos</li>
-</ol>
-</code>
+en cambio, si está en otro servidor porque es la página web de tu amigo, deberás poner la URL completa:
+<code html><a href="https://urldetuamigo/paginadetuamigo.html">La web de mi+amigo</a></code>
-==== Enlaces ====
+===Enlace de correo electrónico===
-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.
+El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia.
-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).
+<code html><a href="mailto:usuario@texto-plano.xyz">Mandame un mail</a></code>
-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.
+La diferencia está en la palabra ''mailto:'' seguida de la dirección de correo electrónico.
+Mailto indica al navegador que debe abrir un mensaje nuevo en la aplicación predeterminada de correo y cargar el campo "para" con la dirección establecida en el enlace.
-===Vínculo interno en la página web===
+Podés hacer que el mensaje tenga los campos previamente completados si agregás la información en el enlace. De esa manera el visitante de tu página no tiene más que cliquear el enlace y luego en el botón de enviar, ya que todo estará completo.
-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:
-<code html><div id="gatos">¡Las imágenes de gatos van aquí!</div></code>
+<code html>
+<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>
+</code>
-Ahora podrás vincular a cualquier ''div'' de tu página siempre que tenga una ID asignado, utilizando esta forma:
+El símbolo ''&'' separa los diferentes campos: //bcc//, //subject// y //body//. El código ''%20'' reemplaza a la barra ''/''.
-<code html>href="#DivID"</code>
+Se ve complicado a primera vista, pero una vez que pasa la primera impresión podrás ver que es más sencillo de lo que parece.
-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:
+===Enlace interno===
+Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitarás dos etiquetas:
-<code html><a href="#gatos">¡Mis fotos geniales de gatos!</a>.</code>
+  * una etiqueta para el enlace
+  * Un identificador ''id'' para el contenido enlazado
-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.
+Por ejemplo, tenemos un texto largo y queremos que cuando el lector llegue hasta abajo pueda volver al título del artículo, lo que hacemos es ponerle un nombre identificador (id) al titular:
+<code html>
+<h2 id="enganche">¡Regalan plata gratis!</h2>
+</code>
-Para hacerlo más específico en castellano, podrías usar algo como esto:
+Con esto, estamos poniendo un marcador en el inicio de un titular clicbaitero.
-<code html><a href="#top">Volver al principio</a>.</code>
+Luego, al final del artículo, ofreces al lector la posibilidad de volver arriba+usando el signo # y el nombre que le asignaste al marcador:
-=== Vínculo a una web en el mismo directorio ===
+<code html><a href="#enganche">Volver al títular</a></code>
-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.
+===Enlace a una imagen===
-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:
+Este enlace es diferente.
-<code html><a href="./gatos.html">¡Visita la web de mis gatos!</a></code>
+<code html><img src="https://enlace/a_la/imagen.jpg" /></code>
-=== Vínculos web externos ===
+La etiqueta abre con ''img'', indicando que va a enlazar una imagen. Continúa con ''src'' (source), que es la fuente de la imagen (no sé por qué no usaron href). No olviden el signo ''='' y las comillas dobles ''""''.
-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:
-<code html><a href="https://texto-plano.xyz/~fulana">¡Mira el sitio web de ~fulana!</a></code>
+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.
-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:
+Para completar la llamada podés agregarle un título y un texto alternativo. Por ejemplo:
-<code html><a href="./gatos.html#felix">Mi gato Felix.</a></code>
+<code html><img src="https://enlace/a_la/imagen.jpg" title="Título" alt="texto_alternativo" /></code>
-====Imágenes====
+El título es el texto que ves cuando pasas el mouse por encima de la imagen.
-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.
+El texto alternativo se mostrará cuando el navegador no tenga soporte para imágenes, las imágenes estén deshabilitadas o uses un navegador no gráfico.
-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
+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!)
-<code html><img src="./felix.jpg" alt="Félix el gato persiguiendo su cola"></code>
+¿Cómo usar una imagen en vez de un texto para el enlace?
->Existen todo tipo de cosas que puede hacer con la etiqueta ''<img>'': puedes escalarla, agregarle un marco, etc.
+Es fácil, solo tendrías que encerrar la etiqueta de la imagen dentro de las etiquetas de un enlace.
+<code html><a href="https://mi_enlace"><img src="https://mi_imagen.jpg"/></a></code>
-====Caracteres especiales====
+De esta manera tendrías 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 podría ser la imagen de una carta postal en un enlace
++de tipo ''mailto''.
-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=====