Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

2. Insertar textos en HTML (III)

2.3 Otras etiquetas

Saltos de línea y separaciones

Saltos de línea

Si queremos dejar una línea en blanco o un salto de línea, tenemos dos opciones, o usar la etiqueta <p> </p> sin texto, lo cual no es muy aconsejable, o utilizar la etiqueta <br/>

Si queremos dejar varias líneas en blanco, usaremos varias etiquetas <br/> seguidas.

Esta etiqueta no tiene otra etiqueta de cierre, ya que no la necesita, no obstante, en XHTML este tipo de etiquetas llevan una barra inclinada al final, para indicar que se abren y cierran en sí mismas. El ponerla es ocpional, sin embargo es recomendable, ya que forma parte de la estandarizacion del código.

Podemos escribirla <br/> o también <br>.

Linea horizontal de separación

Mediante la etiqueta <hr/> se crea un salto de línea con una línea horizontal de separación. Al igual que la anterior esta etiqueta no tiene otra etiqueta de cierre, y en XHTML lleva la barra inclinada al final. Esta etiqueta puede tener los siguientes atributos:

• align="posicion": Sus posibles valores son left (alineación izquierda), right (alineación derecha), o center (alineación centrada).
• noshade: No muestra sombra, evitando el efecto en tres dimensiones. ete atributo no necesita un valor, por lo que se escribe simplemente la palabra clave.
• size="numero": Indica el grosor de la linea en pixels.
• width ="num%": Indica el ancho de la linea en tanto por ciento en función del ancho de la ventana del visor. Tambien se puede especificar un número (sin porcentaje) que indicaría el ancho de la línea en píxeles.

Veamos un ejemplo con el siguiente código:

<hr align="center" size="4" width="60%" noshade/>

En el navegador veremos lo siguiente:

Texto preformateado: Etiquetas "pre" y "code".

En el código HTML no se respetan los espacios en blanco ni los saltos de línea, de manera que son interpretados como un único espacio en blanco entre palabras al escribirse en la página. Sin embargo esto podemos cambiarlo mediante la etiqueta <pre> ... </pre>

El texto que se incluye dentro de esta etiqueta aparecerá preformateado, es decir, con el mismo formato que en el editor de textos, incluidos los espacios en blanco y los saltos de línea. Sin embargo el tipo de letra será también el mismo que en el editor, es decir, letra tipo "courier" como de máquina de escribir.

Veamos un ejemplo. Escribamos en el editor el siguiente código:

	<pre>
	                 Hola
	    esto es un         texto 
			
			preformateado   con   la
			etiqueta 
			          "pre"
	</pre>
	

Este código lo veremos con el siguiente texto en el navegador:

	                 Hola
	    esto es un         texto 
			
			preformateado   con   la
			etiqueta 
			          "pre"
	

La etiqueta <code> ... </code> da también al texto el mismo tipo de letra (courier), sin embargo no respeta ni los espacios en blanco ni los saltos de línea. Veamos el mismo código anterior cambiando la etiqueta:

En el editor de texto escribiríamos:

	<code>
	                 Hola
	    esto es un         texto 
			
			preformateado   con   la
			etiqueta 
			          "pre"
	</code>
	

Este código lo veremos así en el navegador:

Comentarios

Un comentario es un texto que se escribe en el código, y que sirve de aclaración o para definir qué es lo que hay en las siguientes líneas. El comentario no influye en el código de la página, a efectos prácticos es como si no estuviera, sirve sólo para uso del diseñador o programador, el cual hace sus anotaciones o aclaraciones de lo que está haciendo.

Para escribir un comentario lo haremos siempre así:

<!-- Texto del comentario -->

El navegador ignorará el texto que hay encerrado entre los signos <!-- y --> pero éste puede verse en el código fuente o texto html del editor. Los comentarios son anotaciones del programador, para su uso interno, le sirven para recordar o aclarar lo que está haciendo, separar secciones, indicar correcciones o versiones de la página, y todo tipo de anotaciones particulares que considere conveniente.

No se deben escribir en los comentarios datos personales o privados, ya que estos pueden verse también en el navegador, para ello basta con buscar en el menu del navegador la opción "Ver / Código fuente".

Espacios en blanco

La solución al problema de colocar espacios en blanco en la página (Varios espacios entre dos palabras), no es tan sencilla como el de las línes en blanco.

Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto   (es importante incluir el símbolo & al principio y el símbolo ; al final. El símbolo & se escribe pulsando la tecla de mayúsculas y el numero "6" -teclado alfanumerico-).

Por tanto si queremos incluir tres espacios adicionales entre dos palabras, deberemos escribir el texto   tres veces seguidas entre esas dos palabras.

ejemplo : este sería el código

<p> entre estas dos &nbsp; &nbsp; &nbsp; &nbsp; palabras hay cuatro espacios adicionales.</p>

Y este sería el resultado en el navegador:

Entre estas dos         palabras hay cuatro espacios adicionales

En realidad los espacios en blanco se crean usando la forma de insertar caracteres especiales, estos son los caracteres que por estar reservados para la creación de etiquetas, o por otros motivos, pueden ser problemáticos a la hora de escribirlos.

En la siguiente página veremos los caracteres especiales:

Caracteres especiales.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com