Blog básico para practicar HTML: azaroa 2020

2020(e)ko azaroaren 24(a), asteartea

12 | Diferentes Lenguajes de Marcas

En este post revisar el código HTML para deducir cómo consigue el sangrado de un texto (su desplazamiento hacia la derecha para dejar un espacio en el margen izquierdo). Identificar los diferentes tipos de letras, así como el color del fondo. Analizar el enlace a otra página web. Observar que la imagen insertada es, en esencia, un enlace que apunta a un objeto imagen.

Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

El lenguaje de marcas más extendido es el HTML (HyperText Markup Language, lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado de comunicación de alcance mundial).

Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores.

(Tomado de Wikipedia https://es.wikipedia.org/wiki/Lenguaje_de_marcado)

A continuación se muestra una imagen con algunas instrucciones de marcado de tres lenguajes muy extendidos:

12 | Diferentes Lenguajes de Marcas [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo consigue el sangrado de un texto (su desplazamiento hacia la derecha para dejar un espacio en el margen izquierdo). Identificar los diferentes tipos de letras, así como el color del fondo. Analizar el enlace a otra página web. Observar que la imagen insertada es, en esencia, un enlace que apunta a un objeto imagen. </div>
</td></tr>
</tbody></table>
<br />
<blockquote>
<div style="background-color: lightgrey; font-family: "trebuchet ms" , sans-serif;">
Un <b>lenguaje de marcado</b> o <b>lenguaje de marcas</b> es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.<br />
<br />
El lenguaje de marcas más extendido es el HTML (<i>HyperText Markup Language</i>, lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado de comunicación de alcance mundial).<br />
<br />
Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores.<br />
<br />
(Tomado de Wikipedia <a href="https://es.wikipedia.org/wiki/Lenguaje_de_marcado" target="_blank">https://es.wikipedia.org/wiki/Lenguaje_de_marcado</a>)</div>
</blockquote>
<br />
A continuación se muestra una imagen con algunas instrucciones de marcado de tres lenguajes muy extendidos:<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDrpGjiwWcrCe-bdCjS0aIIK7j5FUSzfQePDm5K7_EAPS6M_mTG-1nu3aSd-gZUM856ZEskBBQUNQ3nEmC2mulWt7KK3CZLMxm49_RVNtq_Swj9dKn0JbWNtyy6oiOh0w3iOnhGfaK7c/s1600/DiferentesLenguajesDeMarcas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="313" data-original-width="668" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDrpGjiwWcrCe-bdCjS0aIIK7j5FUSzfQePDm5K7_EAPS6M_mTG-1nu3aSd-gZUM856ZEskBBQUNQ3nEmC2mulWt7KK3CZLMxm49_RVNtq_Swj9dKn0JbWNtyy6oiOh0w3iOnhGfaK7c/s1600/DiferentesLenguajesDeMarcas.png" /></a>

11 | Enlace ancla

Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el enlace ancla el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página Enlazar vs. incrustar anteriormente mostrada.

Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:

Punto de destino, su código será un identificador.
Punto de origen, su código HTML es la URI completa del punto de destino.

Punto de destino

Supongamos que en cierto lugar de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:

Punto de origen

Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.

Continuando con el caso anterior, distingamos entre sí estas tres URIs:

Ir al comienzo de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html
Ir a una sección de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar
Ir a otra sección de la página http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar

11 | Enlace ancla [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">Ancla es un enlace a cierto punto concreto de una determinada página HTML, de forma que mediante el <i>enlace ancla</i> el visitante salta directamente a ese lugar señalado de la página. En este post se explica la manera de llegar a dos secciones específicas de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><b>Enlazar vs. incrustar</b></a> anteriormente mostrada.</div>
</td></tr>
</tbody></table>

<br />
<p>Para crear un enlace es preciso distinguir entre dos conceptos y a cada cual le corresponderá un código HTML, los conceptos son:</p>

<ul>
<li>Punto de destino, su código será un identificador.</li>
<li>Punto de origen, su código HTML es la URI completa del punto de destino.</li>
</ul>

<br />
<hr style="background-color: #0056b2; height: 4px;" />
<br />

<h3>Punto de destino</h3>
<p>Supongamos que en cierto lugar de la página <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span> se desea colocar un par de anclas que serán los puntos de destino. Para ello se escribirá en cada punto de destino el siguiente código:</p>
<p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;">
<div id="AnclaEnlazar"> </div><br />
<div id="AnclaIncrustar"> </div></span></p>
<br />
<h3>Punto de origen</h3>
<p>Para referirse directamente uno de los puntos anteriormente definidos, habrá que usar la correspondiente URI completa. En el caso que nos ocupa, una de las direcciones sería: <span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#</span><span style="font-family: courier;"><span style="font-family: courier;">AnclaEnlazar</span></span> donde a la referencia de la página se le ha añadido, por ejemplo, el identificador del primer punto de destino.</p><p style="margin-left: 40px; text-align: left;"><span style="font-family: courier;"><div id="AnclaEnlazar"> </div></span> <br /></p>
<br />
<p>Continuando con el caso anterior, distingamos entre sí estas tres URIs:</p>

<ol>
<li>Ir al comienzo de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html</span></a> <br /></li>
<li>Ir a una sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaEnlazar</span></a> <br /></li>
<li>Ir a otra sección de la página <a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar" target="_blank"><span style="font-family: courier;">http://blogbasicoparapracticarhtml.blogspot.com/2018/01/enlazar-vs-incrustar.html#AnclaIncrustar</span></a></li>
</ol>

10 | Enlazar vs. incrustar

En este post revisar el código HTML para deducir cómo se logra enlazar otra página desde el blog. Además, es importante saber el modo en el que se embebe un vídeo (u otro objeto de información) en base a su código HTML.

Enlazar

Esto es un enlace que abre la nueva página en otra pestaña. Veamos cómo se edita un enlace. En la siguiente imagen, se muestran varios enlaces y para conseguirlos:

Escribimos el literal y una vez escrito...
...con el ratón o el teclado seleccionamos el texto del literal y
mediante el icono de insertar enlace pegamos la URL de destino

Imagen de una página de este mismo blog

De la misma manera que podemos hacer que un texto sea un enlace, es decir que apunte a cierta página web. Podemos hacer que una imagen sea también un enlace.

Para el caso de que la portadora del enlace sea una imagen los pasos siguen siendo tres:

Introducimos la imagen en el blog
Con el ratón o el teclado seleccionamos la imagen y
Pulsamos sobre el icono de insertar enlace y pegamos la URL de destino

Inscrustar

Y aquí se ha embebido un vídeo en la propia página:

Y aquí se ha embebido un visor para mostrar en archivo PDF:

10 | Enlazar vs. incrustar [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se logra enlazar otra página desde el blog. Además, es importante saber el modo en el que se embebe un vídeo (u otro objeto de información) en base a su código HTML. </div>
</td></tr>
</tbody></table>

<div id="AnclaEnlazar"> </div>
<br />
<h3>Enlazar</h3>

Esto <a href="https://youtu.be/w_DKWlrA24k" target="_blank">es un enlace</a> que abre la nueva página en otra pestaña. Veamos cómo se edita un enlace. En la siguiente imagen, se muestran varios enlaces y para conseguirlos:
<ol>
<li>Escribimos el literal y una vez escrito...</li>
<li>...con el ratón o el teclado seleccionamos el texto del literal y</li>
<li>mediante el icono de insertar enlace pegamos la URL de destino</li>
</ol>

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody>
<tr>
<td style="border: 1px solid grey;"><a href="http://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="227" data-original-width="671" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUeyhqaBmMrt6f_xYVYL5RFpdVMwWbRkY1hwdvKMbZ7y5EkQxLIhpgPUWz-mAaFFYqYrkCfDU6LO5dpiknDZk_MMfbiRroEWBQ0URJaXfgvyeAozMK7m5RspI3Wl4cNHV4XoIooOvAN2I/w400-h135/InsertarEnlaces.png" width="400" /></a></td>
</tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Imagen de una página de este mismo blog</i><br /></td>
</tr>
</tbody></table>

<div id="AnclaIncrustar"> </div>

<p>De la misma manera que podemos hacer que un texto sea un enlace, es decir que apunte a cierta página web. Podemos hacer que una imagen sea también un enlace.</p>

<p>Para el caso de que la portadora del enlace sea una imagen los pasos siguen siendo tres:</p>

<ol style="text-align: left;">
<li>Introducimos la imagen en el blog</li>
<li>Con el ratón o el teclado seleccionamos la imagen y</li>
<li>Pulsamos sobre el icono de insertar enlace y pegamos la URL de destino</li>
</ol>

<p> </p>

<h3>Inscrustar</h3>

Y aquí se ha embebido un vídeo en la propia página:
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/w_DKWlrA24k" width="560"></iframe>
</div>

<br />
Y aquí se ha embebido un visor para mostrar en archivo PDF:

<br />
<iframe height="600" src="https://drive.google.com/file/d/0B01U8fE2Z-bsd0gwMFI3djJfNjg/preview" width="640"></iframe>

<p> </p>
<p> </p>
<p> </p>

9 | Una tabla más compleja

En este post revisar el código HTML para deducir cómo se establece la anchura de una columna, así como el centrado del contenido de una celda. Observar en la tercera fila cómo se puede unificar en una única celda el contenido de las tres celdas de esa fila. Observar en la cuarta fila cómo se puede unificar en una única celda el contenido de las dos celdas.

celda (1,1)	celda (1,2)	celda (1,3)
celda (2,1)	celda (2,2)	celda (2,3)
COLAPSAR 3 COLUMNAS
COLAPSAR 2 COLUMNAS		celda final
celda inical	COLAPSAR 2 COLUMNAS

celda (1,1) celda (2,1) celda (3,1)	celda (1,2)	celda (1,3)	celda (1,4)
	celda (2,2)	celda (2,3)	celda (2,4)
	celda (3,2)	celda (3,3)	celda (3,4)

Dirección	Temática	Apartados
Blog básico para practicar HTML	Introducción práctica al lenguaje de marcas HTML	0. página HTML 1. primeras etiquetas 2. más etiquetas 3. símbolos especiales 4. enumeración de listas ...

Para ver más ejemplo de tablas se puede visitar esta página de la Guía para escribir documentos HTML.

9 | Una tabla más compleja [código HTML]

<tr>

</td></tr>

</tbody></table>

<br />

<tbody>

<tr>

<td style="text-align: center;" width="20%">celda (1,1)</td>

<td style="text-align: center;" width="50%">celda (1,2)</td>

<td style="text-align: center;" width="30%">celda (1,3)</td>

</tr>

<tr>

<td style="text-align: center;" width="20%">celda (2,1)</td>

<b>celda (2,2)</b></div>

</td>

<td style="text-align: center;" width="30%">celda (2,3)</td>

</tr>

<tr>

<td colspan="3" rowspan="1" style="text-align: center;"><b> <span style="color: white;">COLAPSAR 3 COLUMNAS</span></b></td>

</tr>

<tr>

<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>

celda final</div>

</td>

</tr>

<tr>

celda inical</div>

</td>

<td colspan="2" rowspan="1" style="text-align: center;"><b> <span style="color: blue;">COLAPSAR 2 COLUMNAS</span></b></td>

</tr>

</tbody>

</table>

<br />

<tr>

celda (1,1)<br />

celda (2,1)<br />

celda (3,1)</span></b> </td>

<td style="text-align: center;" width="25%">celda (1,2)</td>

<td style="text-align: center;" width="25%">celda (1,3)</td>

<td style="text-align: center;" width="25%">celda (1,4)</td>

</tr>

<tr>

<td style="text-align: center;" width="25%">celda (2,2)</td>

<td style="text-align: center;" width="25%">celda (2,3)</td>

<td style="text-align: center;" width="25%">celda (2,4)</td>

</tr>

<tr>

<td style="text-align: center;" width="25%">celda (3,2)</td>

<td style="text-align: center;" width="25%">celda (3,3)</td>

<td style="text-align: center;" width="25%">celda (3,4)</td>

</tr>

</tbody></table>

<br />

<tbody>

<div style="margin-left: 20px;"><strong>Dirección</strong></div>

</td>

<div style="margin-left: 20px;"><strong>Temática</strong></div>

</td>

<div style="margin-left: 20px;"><strong>Apartados</strong></div>

</td>

</tr>

<tr>

<td>

<p><a href="https://blogbasicoparapracticarhtml.blogspot.com/" target="_blank">Blog básico para practicar HTML</a></p></div>

</td>

<td>

<div style="margin-left: 20px;">Introducción práctica al lenguaje de marcas HTML</div>

</td>

<td>

<ul>

<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2019/10/pagina-html.html" target="_blank">0. página HTML</a></li>

<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/primeras-etiquetas.html" target="_blank">1. primeras etiquetas</a></li>

<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/mas-etiquetas.html" target="_blank">2. más etiquetas</a></li>

<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/simbolos-especiales.html" target="_blank">3. símbolos especiales</a></li>

<li><a href="https://blogbasicoparapracticarhtml.blogspot.com/2018/01/enumeracion-de-listas.html" target="_blank">4. enumeración de listas</a></li>

</ul>

</div>

</td>

</tr>

</tbody>

</table>

<br />

8 | Una tabla

En este post revisar el código HTML para deducir cómo se establece un fila y sus correspondientes celdas que constituyen las columnas de la tabla. Observar también el mandato bajo el cual la tabla queda centrada en la página, distinguiendo entre centrar la tabla respecto a la página o centrar el texto de una celda dentro de la propia celda. En la anteúltima de las tablas los detalles más señalados son dos: Por una parte los estilos de los bordes en las celdas, y por otro lado la posición de la tabla respecto al margen izquierdo de la página.

celda (1,1)	celda (1,2)	celda (1,3)
celda (2,1)	celda (2,2)	celda (2,3)

Table cell 1	Table cell 2
Table cell 3	Table cell 4
Table cell 5	Table cell 6

celda (1,1)	celda (1,2)	celda (1,3)
celda (2,1)	celda (2,2)	celda (2,3)
celda (3,1)	celda (3,2)	celda (3,3)

Para ver más ejemplo de tablas se puede visitar esta página de la Guía para escribir documentos HTML.

8 | Una tabla [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se establece un fila y sus correspondientes celdas que constituyen las columnas de la tabla. Observar también el mandato bajo el cual la tabla queda centrada en la página, distinguiendo entre centrar la tabla respecto a la página o centrar el texto de una celda dentro de la propia celda. En la anteúltima de las tablas los detalles más señalados son dos: Por una parte los estilos de los bordes en las celdas, y por otro lado la posición de la tabla respecto al margen izquierdo de la página.</div>
</td>
</tr>
</tbody></table>

<br />
<br />

<table align="center" border="1" style="background-color: #f5b7b1; width: 400px;"><tbody>
<tr>
<td>celda (1,1)</td>
<td><div style="margin-left: 20px;">
      <i>celda (1,2)</i> </div></td>
<td>celda (1,3)</td>
</tr>
<tr>
<td>celda (2,1)</td>
<td><div style="text-align: center;">
      <b>celda (2,2)</b></div></td>
<td>celda (2,3)</td>
</tr>
</tbody></table>

<div style="margin: 30px;">
<table><tbody>
<tr>
<td><b>Table cell 1</b></td>
<td><b>Table cell 2</b></td>
</tr>
<tr>
<td style="border: 2px solid red;">Table cell 3</td>
<td style="border: 2px dashed red;">Table cell 4</td>
</tr>
<tr>
<td style="border: 1px double blue;">Table cell 5</td>
<td style="border: 3px solid green;">Table cell 6</td></tr>
</tbody></table></div>

<table align="center" border="0" style="background-color: #abebc6; width: 400px;"><tbody>
<tr>
<td style="border-left: thick solid; border-top: thick solid;">celda (1,1)</td>
<td style="border-right: thin solid; border-top: thin solid;"><div style="margin-left: 20px;">
     <i>celda (1,2)</i> </div></td>
<td>celda (1,3)</td>
</tr>
<tr>
<td style="border-bottom: thin solid; border-right: thin solid;">celda (2,1)</td>
<td style="border-bottom: thin solid; border-right: thin solid;"><div style="text-align: center;"><b>celda (2,2)</b></div>
</td>
<td style="border-bottom-color: initial; border-bottom: thin solid; border-color: initial; border-left-color: currentcolor; border-left: thin solid; border-right-color: currentcolor; border-right: thin solid; border-style: solid; border-top: thin solid; border-width: thin;">celda (2,3)</td>
</tr>
<tr>
<td style="border-bottom-color: initial; border-color: initial; border-left-color: initial; border-right-color: currentcolor; border-right-style: solid; border-right: thin solid; border-top-style: solid; border-top: thin solid; border-width: thin;">celda (3,1)</td>
<td style="border-bottom-color: initial; border-bottom: thin dashed; border-color: initial; border-left-color: currentcolor; border-left: thin dashed; border-right-color: currentcolor; border-right: thin dashed; border-style: dashed; border-top: thin dashed; border-width: thin;">celda (3,2)</td>
<td style="border-bottom: thick solid; border-right: thick solid;">celda (3,3)</td>
</tr>
</tbody></table>

<br />

<p>Para ver más ejemplo de tablas se puede <a href="https://www.uv.es/jac/guia/tablaeje.htm" target="_blank"><b>visitar esta página</b></a> de la <a href="https://www.uv.es/jac/guia/indice.htm" target="_blank"><b>Guía para escribir documentos HTML</b></a>.</p>

<br />

7 | Etiqueta div (y etiqueta span)

En este post se presenta la etiqueta o marca <div> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <span> cuyo uso es muy frecuente.

La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

Frecuentemente nos encontraremos la marca <div> al alinear un texto, el atributo es align y su cuatro posibles valores son:

left: el texto se alinea a la margen izquierda
center: el texto es centrado
right: el texto se alinea a la margen derecha
justify: el texto es justificado o se alinea a ambas márgenes

Por ejemplo: <div align="center">Todo el párrafo de esta frase estará centrado</div>

Todo el párrafo de esta frase estará centrado

Como se ha visto, el uso de la etiqueta div es sencillo, se marca <div> para señalar el comienzo del bloque y se marca </div> para señalar el fin del bloque. Observemos este otro ejemplo:

<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>

Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. Este es el resultado del código anterior:

Índice
Página principal
Material multimedia
Autores

Tal y como se ve, al aplicar la etiqueta div no hay ninguna diferencia visible. Pero internamente el documento ya cuenta con un bloque específico al que se le podría dar un formato determinado. Por ejemplo, mediante el siguiente código encuadraremos el bloque y le daremos un color de fondo:

<div style="border: 2px solid rgb(204, 102, 204);">
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>

El resultado sería:

Índice
Página principal
Material multimedia
Autores

Es decir, la etiqueta <div> configura espacios dentro de la página.

Dado que mediante la etiqueta <div> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <span> que se presenta en Etiqueta span (y etiqueta div).

7 | Etiqueta div (y etiqueta span) [código HTML]

<tr>

En este post se presenta la etiqueta o marca <div> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <span> cuyo uso es muy frecuente.</div>

</td></tr>

</tbody></table>

<br />

La etiqueta <b><div></b> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

<br />

<p>Frecuentemente nos encontraremos la marca <b><div></b> al alinear un texto, el atributo es <b>align</b> y su cuatro posibles valores son:</p>

<li><i>left</i>: el texto se alinea a la margen izquierda</li>

<li><i>center</i>: el texto es centrado</li>

<li><i>right</i>: el texto se alinea a la margen derecha</li>

<li><i>justify</i>: el texto es justificado o se alinea a ambas márgenes</li>

</ol>

<p>Por ejemplo: <span style="font-family: courier;"><div align="center">Todo el párrafo de esta frase estará centrado</div></span></p>

<div align="center"><span style="font-size: medium;">Todo el párrafo de esta frase estará centrado</span></div>

<br />Como se ha visto, el uso de la etiqueta <b>div</b> es sencillo, se marca <div> para señalar el comienzo del bloque y se marca </div> para señalar el fin del bloque. Observemos este otro ejemplo:

<br />

<h1>Índice</h1><br />

Página principal<br /><br />

Material multimedia<br /><br />

Autores<br /><br />

</div>

</blockquote>

Hemos empleado la etiqueta para crear un bloque, que hará las

veces de índice de contenidos. Visualmente la etiqueta no provoca

ningún cambio, pero en la estructura interna del documento hemos

aplicado una división muy importante. Este es el resultado del código anterior:<br />

<div>

<h1>

Índice</h1>

Página principal<br />

Material multimedia<br />

Autores</div>

</blockquote>

Tal y como se ve, al aplicar la etiqueta <b>div</b> no hay ninguna diferencia visible. Pero internamente el documento ya cuenta con un bloque específico al que se le podría dar un formato determinado. Por ejemplo, mediante el siguiente código encuadraremos el bloque y le daremos un color de fondo:<br />

<h1>Índice</h1><br />

Página principal<br /><br />

Material multimedia<br /><br />

Autores<br /><br />

</div></blockquote>

El resultado sería:<br />

<h1>

Índice</h1>

Página principal<br />

Material multimedia<br />

Autores</div>

</blockquote>

<br />

Es decir, la etiqueta <b><div></b> configura espacios dentro de la página.<br />

<br />

Dado que mediante la etiqueta <b><div></b> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <b><span></b> que se presenta en <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-span-y-etiqueta-div.html" target="_blank">Etiqueta span (y etiqueta div)</a>.<br />

<br />

6 | Etiqueta span (y etiqueta div)

En este post se presenta la etiqueta o marca <span> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <div> cuyo uso también es muy frecuente.

La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, a la vez da que se establece el bloque mediante la marca <div> se puede dar un formato al contenido del bloque.

Con la etiqueta <span> sirve para dar cierto formato concreto al contenido de un párrafo. Por ejemplo, el siguiente código modifica el color de las letras del párrafo:

Color de letra normal<br />
<span style="color: red;">Color de letra rojo</span><br />
<span style="color: blue;">Color de letra azul</span><br />

Esos tres párrafos se verían así:

Color de letra normal
Color de letra rojo
Color de letra azul

Si con la marca <div> podemos hacer que todo el texto sea de color rojo, la etiqueta <span> se emplearía para aplicar estilos distintos a algunos párrafos en el interior de un bloque (por ejemplo, un párrafo de color azul). Véase el siguiente código:

<div style="color: red;">
Índice<br />
Página principal<br />
<span style="color: blue;">Material multimedia</span><br />
Autores
</div>

El resultado sería:

Índice
Página principal
Material multimedia
Autores

La etiqueta <span> opera a nivel de párrafo modificando el estilo del texto, mediante la etiqueta <div> también se puede establecer el estilo del texto pero para todo un bloque (visitar Etiqueta div (y etiqueta span) para saber más sobre la etiqueta <div>).

6 | Etiqueta span (y etiqueta div) [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post se presenta la etiqueta o marca <span> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <div> cuyo uso también es muy frecuente. </div>
</td></tr>
</tbody></table>
<br />
La etiqueta <b><div></b> se emplea para definir un bloque de contenido o
sección de la página, a la vez da que se establece el bloque mediante la marca <b><div></b> se puede dar un formato al contenido del bloque.<br />
<br />
Con la etiqueta <b><span></b> sirve para dar cierto formato
concreto al contenido de un párrafo. Por ejemplo, el siguiente código
modifica el color de las letras del párrafo:<br />
<blockquote>
Color de letra normal<br /><br />
<span style="color: red;">Color de letra rojo</span><br /><br />
<span style="color: blue;">Color de letra azul</span><br /></blockquote>
Esos tres párrafos se verían así:<br />
<blockquote>
Color de letra normal<br />
<span style="color: red;">Color de letra rojo</span><br />
<span style="color: blue;">Color de letra azul</span></blockquote>
Si con la marca <b><div></b> podemos hacer que todo el texto sea de color rojo, la etiqueta <b><span></b> se emplearía para aplicar estilos distintos a algunos párrafos en el interior de un bloque (por ejemplo, un párrafo de color azul). Véase el siguiente código:<br />
<blockquote>
<div style="color: red;"><br />
Índice<br /><br />
Página principal<br /><br />
<span style="color: blue;">Material multimedia</span><br /><br />
</div>
</blockquote>
El resultado sería:
<br />
<blockquote>
<div style="color: red;">
Índice<br />
Página principal<br />
<span style="color: blue;">Material multimedia</span><br />
Autores</div>
</blockquote>
La etiqueta <b><span></b> opera a nivel de párrafo modificando el estilo del texto, mediante la etiqueta <b><div></b> también se puede establecer el estilo del texto pero para todo un bloque (visitar <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-div-y-etiqueta-span.html" target="_blank">Etiqueta div (y etiqueta span)</a> para saber más sobre la etiqueta <b><div></b>).

5 | Enumeración de listas subordinadas

En este post revisar el código HTML para deducir cómo se realiza un sublistado de elementos dentro de un listado de orden superior. Es posible combinar viñetas y números.

Lista principal con viñetas y listas secundarias numeradas:

Chicos:

Luis
Joanes
Eneko

Chicas:

Marina
Eguzkiñe
Ane

Lista principal y secundarias con viñetas:

Chicos:

Luis
Joanes
Eneko

Chicas:

Marina
Eguzkiñe
Ane

5 | Enumeración de listas subordinadas [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En este post revisar el código HTML para deducir cómo se realiza un sublistado de elementos dentro de un listado de orden superior. Es posible combinar viñetas y números. </div></td>
</tr>
</tbody></table>
<br />

Lista principal con viñetas y listas secundarias numeradas:<br />
<ul>
<li>Chicos:</li>
<ol>
    <li>Luis </li>
    <li style="margin-left: 30px;">Joanes </li>
    <li>Eneko</li>
</ol>
<li>Chicas:</li>
    <ol>
      <li>Marina </li>
      <li style="margin-left: 30px;">Eguzkiñe </li>
      <li>Ane </li>
    </ol>
</ul>
<br />

Lista principal y secundarias con viñetas:<br />
<ul>
<li>Chicos:</li>
<ul>
    <li>Luis </li>
    <li style="margin-left: 30px;">Joanes </li>
    <li>Eneko</li>
</ul>
<li>Chicas:</li>
<ul>
    <li>Marina </li>
    <li style="margin-left: 30px;">Eguzkiñe </li>
    <li>Ane </li>
</ul>
</ul>
<br />

4 | Enumeración de listas [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
Revisar el código HTML de este post para deducir cómo se construyen los listados. Distinguir entre las enumeraciones en base a listas con viñetas y las listas numeradas. </div>
</td></tr>
</tbody></table>
<br />

Lista con viñetas:
<br />

<ul>
<li>Luis </li>
<li style="margin-left: 30px;">Ane </li>
<li>Marina </li>
<li>Eneko </li>
</ul>
<br />

Lista numerada:
<br />
<ol>
<li>Luis </li>
<li>Ane </li>
<li>Marina </li>
<li>Eneko </li>
</ol>

4 | Enumeración de listas

Revisar el código HTML de este post para deducir cómo se construyen los listados. Distinguir entre las enumeraciones en base a listas con viñetas y las listas numeradas.

Lista con viñetas:

Luis
Ane
Marina
Eneko

Lista numerada:

Luis
Ane
Marina
Eneko

3 | Símbolos especiales

Es bien sabido que, a veces, algunos símbolos no los encontramos en el teclado. Aquí se presentan algunos símbolos soportados por el lenguaje HTML, basta con insertar el correspondiente número del símbolo deseado en la vista de código de nuestra página.

Símbolos especiales:

Ejemplo, para mostrar el sumatorio...

...podemos escribir:

                   SUMATORIO &#8721;

y ese texto se verá así:

                   SUMATORIO ∑

3 | Símbolos especiales [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
Es bien sabido que, a veces, algunos símbolos no los encontramos en el teclado. Aquí se presentan algunos símbolos soportados por el lenguaje HTML, basta con insertar el correspondiente número del símbolo deseado en la vista de código de nuestra página. </div>
</td></tr>
</tbody></table>
<br />
Símbolos especiales:
<br />
<ul>
<li><a href="https://www.w3schools.com/charsets/ref_utf_math.asp" target="_blank">Matemáticos</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_currency.asp" target="_blank">Monedas</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_letterlike.asp" target="_blank">Algunas letras</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_arrows.asp" target="_blank">Flechas</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_geometric.asp" target="_blank">Formas geométricas 1</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_block.asp" target="_blank">Formas geométricas 2</a>  </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_punctuation.asp" target="_blank">Puntuación</a></li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_symbols.asp" target="_blank">Varios 1</a> </li>
<li><a href="https://www.w3schools.com/charsets/ref_utf_dingbats.asp" target="_blank">Varios 2</a>  </li>
</ul>
<br />
Ejemplo, para mostrar el sumatorio...<br />
<blockquote>
...podemos escribir:<pre> SUMATORIO &#8721;
</pre>
<br />
y ese texto se verá así:<pre> SUMATORIO ∑
</pre>
</blockquote>
<br />

2 | Más etiquetas

En general, cada marca debe ser cerrada por su correspondiente marca simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas y al final se mostrará la forma de incluir comentarios en la programación HTML, y se finalizará esta entrada presentando el símbolo especial que más frecuentemente necesitaremos.

<H1>, <H2> hasta <H6> Encabezados

Sirven para escribir los titulares del texto y se pueden definir seis niveles de titulares. Por ejemplo, el siguiente código:

      <h1>Texto muy grande</h1>
      <h2>Texto grande</h2>
      <h3>Texto algo más grande de lo normal</h3>
      <h4>Texto normal</h4>
      <h5>Texto pequeño</h5>
      <h6>Texto muy pequeño</h6>

Producirá la siguiente salida:

Texto muy grande

Texto grande

Texto algo más grande de lo normal

Texto normal

Texto pequeño

Texto muy pequeño

<p> Párrafos

En principio, sin entrar en detalles de alineación u otras características, digamos que los párrafos se definen por las tags <P> y </P>. No obstante, hay veces que que no se marcan los párrafos mediante este par de etiquetas, porque se escribe el párrafo y al final se le añade la directiva de salto de línea que se menciona a continuación.

<br /> Salto de línea

Esta marca no tiene contramarca y se utiliza ella sola escribiéndola al final de un párrafo. Sirve para realizar un salto de linea, pueden ponerse tantas como se desee y realizará un salto de línea por cada una de ellas.

<hr/> Línea horizontal

Esta marca no tiene contramarca y se utiliza ella sola. Sirve para mostrar una línea horizontal. Se recomienda un uso moderado de este recurso. Formato de la línea horizontal:

Si quisiéramos dar color y grosor a la línea horizontal lo haríamos así:
```
 <hr style="background-color: #0056b2; height:5px;" />
```
Si quisiéramos variar lo que ocupa de ancho la línea horizontal usaríamos: “width=x %”, siendo “x” el tanto por cien que ocupa la línea:
```
 <hr width="75%" />
```
Para que la línea horizontal tuviera un color sólido de relleno lo haríamos así:
```
 <hr snoshade="noshade" />
```
Para alinear la línea a la izquierda, derecha o centro utilizamos “align”, con lo valores: “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda. En el siguiente ejemplo se aplican varias de las directivas de formato:
```
 <hr style="background-color:#9900aa; height:15px;" align="left" width="50%" />
```

Ejemplos:

<blockquote> Sangrado

Aquel texto situado entre la marca <blockquote> y la marca </blockquote> queda desplazada a la derecha quedando a su izquierda una sangría o identación. Por ejemplo, el siguiente código:

      <blockquote>
      <h1>Texto desplazado a la derecha</h1>
      </blockquote>
      <h2>Texto sin sangrado</h2>

Producirá la siguiente salida:

Texto desplazado a la derecha

Texto sin sangrado

Comentarios

Aquel texto situado entre la directiva  no se mostrará a través del navegador y serviría para documentar el código y como recordatorio en futuras revisiones del documento.

  Espacio sin ruptura

La entidad   (del inglés Non Breaking Space que significa espacio sin ruptura) sirve para representar en HTML un espacio en blanco y se utiliza normalmente en dos casos:

Cuando queremos que dos palabras no se separen al ajustar el texto al tamaño de la ventana, por ejemplo las dos palabras que forman una marca comercial. En ese caso si ponemos Coca Cola el navegador puede separar las palabras pero si ponemos Coca Cola el navegador no las separará aunque modifiquemos el tamaño de la ventana.
Cuando queremos evitar que el navegador agrupe todos los espacios como si fuesen uno sólo podemos utilizar la entidad   tantas veces como espacios en blanco queramos incluir.

Para consultar la forma de representar otros caracteres especiales pulsar sobre este enlace.

2 | Más etiquetas [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>
<tr>
<td><div style="text-align: center;">
En general, cada marca debe ser cerrada por su correspondiente marca
simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas y al final se mostrará la forma de incluir comentarios en la programación HTML, y se finalizará esta entrada presentando el símbolo especial que más frecuentemente necesitaremos. </div>
</td></tr>
</tbody></table>
<br />
<br />
<hr />
<span class="codigo"><H1></span>, <span class="codigo"><H2></span> <span class="codigo">hasta <H6></span> <b>Encabezados</b><br />
<br />
Sirven para escribir los titulares del texto y se pueden definir seis niveles de titulares. Por ejemplo, el siguiente código:<br />
<pre>      <h1>Texto muy grande</h1>
      <h2>Texto grande</h2>
      <h3>Texto algo más grande de lo normal</h3>
      <h4>Texto normal</h4>
      <h5>Texto pequeño</h5>
      <h6>Texto muy pequeño</h6></pre>
<br />
Producirá la siguiente salida:<br />
<blockquote>
<h1>
Texto muy grande</h1>
<h2>
Texto grande</h2>
<h3>
Texto algo más grande de lo normal</h3>
<h4>
Texto normal</h4>
<h5>
Texto pequeño</h5>
<h6>
Texto muy pequeño</h6>
</blockquote>
<br />
<br />
<hr />
<span class="codigo"><p></span> <b>Párrafos</b><br />
<br />
En principio, sin entrar en detalles de alineación u otras características, digamos que los párrafos se definen por las tags <span class="codigo"><P> y </span><span class="codigo"></P></span>. No obstante, pocas veces se marcan los párrafos mediante este par de etiquetas, porque generalmente se escribe el párrafo sin esas etiquetas y al final se le añade la directiva de <i>salto de línea </i>que se menciona a continuación.
<br />
<br />
<br />
<br />
<hr />
<span class="codigo"><br /></span> <b>Salto de línea</b><br />
<br />
Esta marca no tiene contramarca y se utiliza ella sola escribiéndola al final de una párrafo. Sirve para realizar un salto de linea, pueden ponerse tantas como se desee y realizará un salto de línea por cada una de ellas.
<br />
<br />
<br />
<br />
<hr />
<span class="codigo"><hr/></span> <b>Línea horizontal</b><br />
<br />
Esta
marca no tiene contramarca y se utiliza ella sola. Sirve para mostrar una línea horizontal. Se recomienda un uso moderado de este recurso. Formato de la línea horizontal:<br />
<ul>
<li>Si quisiéramos dar color y grosor a la línea horizontal lo haríamos así:<pre> <hr style="background-color: #0056b2; height:5px;" /></pre>
</li>
<li>Si quisiéramos variar lo que ocupa de ancho la línea horizontal usaríamos: “width=x %”, siendo “x” el tanto por cien que ocupa la línea:<pre> <hr <code class="plain plain">width="75%" /</code>></pre>
</li>
<li>Para que la línea horizontal tuviera un color sólido de relleno lo haríamos así:<pre> <hr s<code class="plain plain">noshade="noshade" /</code>></pre>
</li>
<li>Para alinear la línea a la izquierda, derecha o centro utilizamos
“align”, con lo valores: “align = center” para el centro, “align = right” para la
derecha y “align = left” para la izquierda. En el siguiente ejemplo se aplican varias de las directivas de formato:<pre> <code class="plain plain"></code><hr style="background-color:#9900aa; height:15px;" align="left" width="50%" /></pre>
</li>
</ul>
Ejemplos:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s1600/HR_adibideak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="453" data-original-width="874" height="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJrSqmTFXpiSsBCv8PEkiv0M-7GOCDLv06XR319Kn0O_KMCbVcM9QCL-wnNsGc-tpcyk5SGYw7p2MhI6ycRrnmT1khdHKKYUnIPE6TV2HM38SYo3bBjhgLcifGWrgzhaawsK40xwf0Yk/s640/HR_adibideak.png" width="640" /></a></div>
<br />
<br />
<hr />
<span class="codigo"><blockquote></span> <b>Sangrado</b><br />
<br />
Aquel texto situado entre la marca <span class="codigo"><blockquote> y la marca </span><span class="codigo"></blockquote> </span>queda desplazada a la derecha quedando a su izquierda una sangría o identación. Por ejemplo, el siguiente código:<br />
<pre>      <<span class="codigo">blockquote</span>>
      <h1>Texto desplazado a la derecha</h1>
      <span class="codigo"></blockquote></span>
      <h2>Texto sin sangrado</h2></pre>
<br />
Producirá la siguiente salida:<br />
<blockquote>
<h1>
Texto desplazado a la derecha</h1>
</blockquote>
<h2>
Texto sin sangrado</h2>
<br />
<br />
<br />
<hr />
<span class="codigo"></span> <b>Comentarios</b><br />
<br />
Aquel texto situado entre la directiva <span class="codigo"><span class="codigo"> </span>no  se mostrará a través del navegador y serviría para documentar el código y como recordatorio en futuras revisiones del documento.
<br />
<br />
<br />
<br />
<hr />
&nbsp; <b>Espacio sin ruptura</b><br />
<br />
La entidad <tt><b>&nbsp;</b></tt> (del inglés <u>N</u>on
      <u>B</u>reaking <u>Sp</u>ace que significa espacio sin ruptura) sirve
      para representar en HTML un espacio en blanco y se utiliza normalmente en
      dos casos:
      <br />
<ul>
<li>
   Cuando queremos que dos palabras no se separen al ajustar el texto al
   tamaño de la ventana, por ejemplo las dos palabras que forman una
   marca. En ese caso si ponemos <tt>Coca Cola</tt> el navegador puede
   separar las palabras pero si ponemos
   <tt>Coca<b>&nbsp;</b>Cola</tt> el navegador no las separará
   aunque modifiquemos el tamaño de la ventana.
</li>
<li>
   Cuando queremos evitar que el navegador agrupe todos los espacios
   como si fuesen uno sólo podemos utilizar la entidad
   <tt><b>&nbsp;</b></tt> tantas veces como espacios en blanco
   queramos incluir.
</li>
</ul>
Para consultar la forma de representar otros caracteres especiales pulsar sobre este <a href="http://www.it.uc3m.es/amillares/Module4/entidades.html" target="_blank">enlace</a>.<br />
<div>
<br /></div>

1 | Primeras etiquetas

En general, cada marca debe ser cerrada por su correspondiente marca simétrica. A continuación mencionaremos algunas etiquetas muy utilizadas para ajustar el estilo del texto escrito.

Los recursos más elementales para establecer el estilo del texto son:

Negrita. El texto comprendido entre <b> y </b> se presentará con una escritura gruesa, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:
```
 <b>Esto se ve en el estilo negrita</b>
```
Cursiva. El texto comprendido entre <i> y </i> se presentará con una escritura en cursiva, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:
```
 <i>Esto se ve en cursiva o itálico</i>
```
Subrayado. El texto comprendido entre <u> y </u> será subrayado al presentarlo el navegador, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:
```
 <u>Esto se ve subrayado</u>
```
Tachado. El texto comprendido entre <strike> y </strike> se verá tachado al ser presentado por el navegador, para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:
```
 <strike>Esto se ve tachado</strike>
```
Teletipo. El texto comprendido entre <tt> y </tt> se verá usando la fuente de espacio sencillo o la anchura fija del navegador (esta etiqueta ha quedado en desuso), para comprobarlo se puede introducir el siguiente código en el editor en su modo HTML:
```
 <tt>Esto se ve como un teletipo</tt>
```

Las marcas más arriba descritas se pueden combinar entre sí, siempre y cuando se cuide el orden correcto de apertura y cierre de cada parejas de etiquetas. Por ejemplo, mediante este código ¿cómo se verá el texto?

 <i>Todo el texto está en cursiva y además parte es <b>negrita</b>
    y otra parte está <u>subrayada</u>.</i>

Es evidente que el resultado será:

Todo el texto está en cursiva y además parte es negrita y otra parte está subrayada.

Páginas

2020(e)ko azaroaren 24(a), asteartea

Punto de destino

Punto de origen

Enlazar

Inscrustar

Índice

Índice

Texto muy grande

Texto grande

Texto algo más grande de lo normal

Texto normal

Texto pequeño

Texto muy pequeño

Texto desplazado a la derecha

Texto sin sangrado