Diferencias

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

--- html [2023/01/19 17:09] – [Contenido HTML] peron
+++ html [2023/01/19 17:26] (actual) – [Enlaces] peron
@@ Línea 145: / Línea 145: @@
 ====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':
+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>'' ''</ol>''.
+Las listas ordenadas usan la etiqueta ''<ol>'' y ''</ol>''.
 <code html>
@@ Línea 162: / Línea 162: @@
 Muestran un listado ordenado numéricamente, de este tipo:
- elemento 1
+  - elemento 1
- elemento 2
+  - elemento 2
- elemento n
+  - elemento n
 ==Listas Desordenadas==
 Las listas desordenadas se engloban utilizando las etiquetas ''<ul>'' y ''</ul>''.
@@ Línea 175: / Línea 176: @@
   <li>elemento n</li>
 </ul>
+</code>
 Muestran una viñeta o punto de enumeración en lugar de un número, de esta forma:
@@ Línea 197: / Línea 199: @@
 <h6>Títular h6</h6>
 </code>
-===Divisores===
-<code><br /></code>
-Salto de linea
-<code><hr /></code>
-Linea horizontal. Una raya que abarca el ancho del documento-
 ====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.
@@ Línea 231: / Línea 225: @@
 El enlace de correo electrónico es igual al enlace explicado recién, solo que cambia la referencia.
-<code html><a href="mailto:usuario@texto-plano.xyz">Mandame un mail</a>
+<code html><a href="mailto:usuario@texto-plano.xyz">Mandame un mail</a></code>
-La diferencia está en la palabra mailto: seguida de la dirección de correo electrónico.
+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.
 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
+<code html>
-+href="mailto:~usuario@texto-plano.xyz;copia@otro_destino.com&bcc=copiaoculta@ot
+<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>
-+ro_destino.com&subject="Asunto%20del%20mail&body=Este%20es%20el%20cuerpo%20del%
+</code>
-+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 ''/''.
+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.
@@ Línea 249: / Línea 242: @@
 ===Enlace interno===
 Son los enlaces que apuntan a otra parte dentro del mismo documento. Para generar un enlace interno necesitarás dos etiquetas:
-  * una para el enlace
-  * Un identificador 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.
+  * una etiqueta para el enlace
-Lo que hacemos es ponerle un nombre identificador (id) al título:
+  * Un identificador ''id'' para el contenido enlazado
-<code html><h2 id="titulo">Título genial</h2></code>
+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:
-Con esto, estamos poniendo un marcador en el inicio del texto.
+<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="#titulo">Volver al título</a></code>
+<code html><a href="#enganche">Volver al títular</a></code>
 ===Enlace a una imagen===
@@ Línea 294: / Línea 289: @@
---------------
-====Listas====
-Las //listas// HTML son una excelente manera de organizar información puntual en un documento HTML. HTML admite dos tipos de listas:
-| Tipo de lista | Etiqueta HTML | Resultado |
-| Listas ordenadas | ''<ol></ol>'' | Cada elemento recibe un número. |
-| Listas desordenadas | ''<ul></ul>'' | Cada elemento usa una viñeta. |
-El contenedor de listas requiere dos conjuntos de etiquetas, ya sea ''ol'' o ''ul'' para encerrar la lista completa, y un segundo conjunto de etiquetas, ''<li></li>'', para indicar cada elemento de la lista.
-Por ejemplo, si deseas agregar información de contacto utilizando listas con viñetas, deberías utilizar una sintaxis similar a la siguiente:
-<code>
-  <h2>Contacto</h2>
-  <p>Deseo ser contactad@ por estos medios:</p>
-  <ul>
-    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
-    <li><u>XMPP</u>: fulana@texto-plano.xyz</li>
-  </ul>
-</code>
-==== Enlaces ====
-Los enlaces son la característica fundamental del hipertexto. Podrás incluír 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 (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:
-<code html>
-<div id="#contacto">Información de Contacto</div>
-  <h2>Contacto</h2>
-  <p>Deseo ser contactad@ por estos medios:</p>
-  <ul>
-    <li><u>Correo Electrónico</u>: fulana@texto-plano.xyz</li>
-    <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:
-<code html>href="#Contacto"<Inforamción de Contacto</a></code>
-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.
-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.
-Para hacerlo más específico en castellano, podrías usar algo como esto:
-<code html><a href="#top">Volver al principio</a>.</code>
-=== 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:
-<code html><a href="./gatos.html">¡Visita la web de mis gatos!</a></code>
-=== 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:
-<code html><a href="https://texto-plano.xyz/~fulana">¡Mira el sitio web de ~fulana!</a></code>
-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="./gatos.html#felix">Mi gato Felix.</a></code>
-====Divisiones====
-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:
-<code html><div id="contacto"></code>
-Existen más atributos que podrás utilizar. Detallemos algunos.
-====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
-<code html><img src="./felix.jpg" alt="Félix el gato persiguiendo su cola"></code>
->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=====