Diferencias

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

--- html [2023/01/19 03:01] – peron
+++ html [2026/04/21 16:06] (actual) – editor externo 127.0.0.1
@@ Línea 33: / Línea 33: @@
 **Crea un fichero muleto ''[[src.html]]''** introduciendo:
-<code bash>micro ~/public_html/[[src.html]]</code>
+<code bash>micro ~/public_html/src.html</code>
 ...y **pégale el siguiente código fuente HTML**, para darle una estructura para fichero en castellano:
@@ Línea 59: / Línea 59: @@
 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.
-Podrás editar ahora tu fichero ''index.html'' en base al esqueleto ''src.html'' que ya has creado.
+**Edita ahora tu fichero ''index.html'' en base al esqueleto ''src.html'' que ya has creado**.
-Modifica el código HTML 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>''). Reemplaza entonce los ''...'' del fichero, y **agrega contenido similar al siguiente**:
+**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>
@@ Línea 71: / Línea 71: @@
 </code>
+Este código presentará el texto en el navegador de forma simple (sin formato y sin divisiones de párrafo alguno).
 ===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.
+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.
 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:
+Algunas de las etiquetas de formato que podrás utilizar:
 | ''<b></b>'' | **Negrita** |
-| ''<i></i>'' | //Cursiva// |
+| ''<i></i>'' | //Cursiva o itálica// |
-| ''<s></s>'' | --Tachado-- |
+| ''<s></s>'' | <del>Tachado</del> |
 | ''<u></u>'' | __Subrayado__ |
-| ''<code></code>'' | hace que el texto parezca código. |
+| ''<pre></pre>'' | Texto monoespacio. |
-| ''<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. |
+| ''<code></code>'' | hace que el texto parezca código fuente. |
+| ''<blockquote></blockquote>'' | Citado |
 | ''<p>'' | Comienza un nuevo párrafo. |
 | ''<br>'' | inserta un salto de línea. |
@@ Línea 93: / Línea 95: @@
 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:
-Con las consideraciones anteriores, ahora **otorga formato al texto que acabas de crear**. Este deberia quedar de la siguiente manera.
 <code html>
@@ Línea 107: / Línea 108: @@
 </code>
-===Divisiones===
+¡Con esto ya has aprendido cómo otorgarle formato simple HTML a tu contenido de texto!
-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:
+Veamos ahora en forma detenida cómo se utilizan las funciones de los principales tipos de etiquetas.
-<code html><div id="contacto"></code>
+====Etiquetas de bloque====
-Existen más atributos que podrás utilizar. Detallemos algunos.
+La etiqueta ''<p>'' divide el texto en párrafos. Ideal para cuando tenés que separar en capítulos. Se usa así:
-===Listas===
+<code html>
-Las listas son una excelente manera de organizar la información en un documento HTML. HTML admite dos tipos de listas:
+<p>
+Este es un Párrafo
+</p>
+</code>
-  * listas ordenadas ''<ol></ol>'' donde cada elemento recibe un número
+La etiqueta ''<br>'' inserta un salto de línea, sin necesidad de abrir un párrafo nuevo. Simplemente indica:
-  * 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.
+<code html><br></code>
-Por ejemplo, podrás agregar esta información de contacto:
+La etiqueta ''<div>'' es un contenedor de uso general. Ideal para cuadros de texto o separar partes bien diferenciadas.
-<code>
+<code html><div>Texto contenido en un divisor general</div></code>
-  <h2>Contacto</h2>
-  <p>Deseo ser contactad@ por estos medios:</p>
+====Contenedores semánticos====
-  <ul>
-    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
+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:
-    <li><u>XMPP</u>: fulana@texto-plano.xyz</li>
-  </ul>
+<code html>
+<header>Texto de tu encabezado</header>
+  <section>Texto contenido en una sección</section>
+    <article>Texto de tu artículo</article>
+<footer>Pie de página</footer>
 </code>
+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.
-==== Enlaces ====
+>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.
-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.
+====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>'':
-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><li>elemento</li></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.
+==Listas ordenadas==
+Las listas ordenadas usan la etiqueta ''<ol>'' y ''</ol>''.
-===Vínculo interno en la página web===
+<code html>
-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:
+<ol>
+  <li>elemento 1</li>
+  <li>elemento 2</li>
+  <li>elemento n</li>
+</ol>
+</code>
+Muestran un listado ordenado numéricamente, de este tipo:
+  - elemento 1
+  - elemento 2
+  - elemento n
+==Listas Desordenadas==
+Las listas desordenadas se engloban utilizando las etiquetas ''<ul>'' y ''</ul>''.
 <code html>
-<div id="#contacto">Información de Contacto</div>
+<ul>
-  <h2>Contacto</h2>
+  <li>elemento 1</li>
-  <p>Deseo ser contactad@ por estos medios:</p>
+  <li>elemento 2</li>
-  <ul>
+  <li>elemento n</li>
-    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
+</ul>
-    <li><u>XMPP</u>: fulana@texto-plano.xyz</li>
-  </ul>
 </code>
-Ahora podrás vincular a esta sección ''contacto'' tu página utilizando esta forma:
+Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma:
-<code html>href="#Contacto"<Inforamción de Contacto</a></code>
+  * elemento 1
+  * elemento 2
+  * elemento n
-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.
+====Etiquetas de formato====
+Son las que dicen cómo se mostrará el texto que encierran.
-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.
+===Títulos===
-Para hacerlo más específico en castellano, podrías usar algo como esto:
+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.
-<code html><a href="#top">Volver al principio</a>.</code>
+<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.
-=== Vínculo a una web en el mismo directorio ===
+Para poner un enlace necesitarás un ancla (anchor, en inglés).
-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í.
+La etiqueta que genera el enlace se ve así:
-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.
+<code html><a href="https://mi_pagina_web/index.html">La web de ~fulano</a></code>
-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:
+La letra 'a' es la que define que lo que viene a continuación es un enlace. El 'href' significa referencia de hipertexto y a continuación viene la URL a la que vas a enlazar.
-<code html><a href="./gatos.html">¡Visita la web de mis gatos!</a></code>
+Dos cosas importantes que no debes olvidar: el signo ''='' y las comillas ''"''.
-=== Vínculos web externos ===
+Luego viene el texto que leerás en el navegador - //La web de ~fulano// - y finalmente la etiqueta <code html></a></code> que cierra el enlace.
-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>
+Si el archivo enlazado está en la misma carpeta solo hará falta poner el nombre del archivo, sin especificar toda la dirección:
-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:
+<code html><a href="index.html">La web de ~fulano</a></code>
-<code html><a href="./gatos.html#felix">Mi gato Felix.</a></code>
+en cambio, si está en otro servidor porque es la página web de tu amigo, deberás poner la URL completa:
-====Imágenes====
+<code html><a href="https://urldetuamigo/paginadetuamigo.html">La web de mi+amigo</a></code>
-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.
+===Enlace de correo electrónico===
-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
+El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia.
-<code html><img src="./felix.jpg" alt="Félix el gato persiguiendo su cola"></code>
+<code html><a href="mailto:usuario@texto-plano.xyz">Mandame un mail</a></code>
->Existen todo tipo de cosas que puede hacer con la etiqueta ''<img>'': puedes escalarla, agregarle un marco, etc.
+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.
-====Caracteres especiales====
+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.
+<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>
+El símbolo ''&'' separa los diferentes campos: //bcc//, //subject// y //body//. El código ''%20'' reemplaza a la barra ''/''.
+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.
+===Enlace interno===
+Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitarás 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 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>
+Con esto, estamos poniendo un marcador en el inicio de un titular clicbaitero.
+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:
+<code html><a href="#enganche">Volver al títular</a></code>
+===Enlace a una imagen===
+Este enlace es diferente.
+<code html><img src="https://enlace/a_la/imagen.jpg" /></code>
+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 ''""''.
+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 podés agregarle un título y un texto alternativo. Por ejemplo:
+<code html><img src="https://enlace/a_la/imagen.jpg" title="Título" alt="texto_alternativo" /></code>
+El título es el texto que ves cuando pasas el mouse por encima 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.
+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 ;-)!)
+¿Cómo usar una imagen en vez de un texto para el enlace?
+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>
+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=====
@@ Línea 214: / Línea 298: @@
 <code bash>acthtml</code>
+Si lo deseas puedes anunciarlo a través de [[gab]], con un comando similar al siguiente:
+<code bash>gab -m "Están invitados a mi página web en https://texto-plano.xyz/~$USER"</code>
 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.

Texto-Plano

Herramientas de usuario

Diferencias