Salto de línea (<br>)
Como HTML reduce todo tipo de espacios en blanco y saltos de línea a un espacio en blanco, existe una forma de crear un salto de línea, el uso de la etiqueta <br>. Cada aparición de esta etiqueta produce un salto de línea.
<html>
<head>
<title>ejemplo de salto de linea</title>
</head>
<body>
Esta línea no acaba en salto de linea.
Esta línea no acaba en salto de linea.
Esta línea si acaba en salto de linea.<br>
Esta línea no acaba en salto de linea.
Esta línea no acaba en salto de linea.
Esta línea si acaba en salto de linea.<br>
Esta línea no acaba en salto de linea.
Esta línea no acaba en salto de linea.
</body>
</html>
Separadores (<hr>)
Los separadores son elementos que se muestran como una barra horizontal en la pantalla. De ellos pueden modificarse varios atributos:
- size: grosor de la barra horizontal
- width: anchura de la barra horizontal
- align: alineamiento de la barra, puede valer left, right o center
- noshade: elimina el aspecto tridimensional
Un ejemplo de separadores:
<html>
<head>
<title>ejemplo de separadores</title>
</head>
<body>
<hr width=33% align=left size=1>
<hr width=33% align=center size=4>
<hr width=33% align=right size=8>
</body>
</html>
Estilos físicos
Son un conjunto de etiquetas que aplican ciertos cambios a la forma en que se visualiza el texto.
- <b>: muestra el texto en un tipo de letra más grueso
- <i>: muestra el texto inclinado (en cursiva)
- <u>: subraya el texto
- <tt>: utiliza un tipo de letra no proporcional
- <big>: muestra el texto con un tipo de letra más grande
- <small>: utiliza un tipo de letra menor
- <s>: utiliza un tipo de letra tachado
- <sub>: escribe como subíndice
- <sup>: escribe como superíndice
Un ejemplo de cada uno de ellos:
<html>
<head>
<title>ejemplo de estilos físicos</title>
</head>
<body>
Estilos físicos:<br>
<b>negrita</b>, <br>
<i>cursiva</i>, <br>
<u>subrayado</u>, <br>
<tt>letra no proporcinal</tt>, <br>
<big>grande</big>, <br>
<small>pequeña</small>, <br>
<s>tachado</s>, <br>
<sub>subíndice</sub>, <br>
<sup>superíndice</sup><br>
</body>
</html>
Estilos lógicos
Al igual que los estilos físicos modifican el aspecto del texto, pero en vez de con un cambio permanente, la modificación depende de las preferencias del usuario.
- <strong>: muestra el texto en un tipo de letra más fuerte, normalmente en negrita
- <em>: muestra el texto enfatizado, noermalmente en cursiva
- <code>: suele utilizarse para mostrar algun tipo de código, suele utilizar un tipo de fuente no proporcional
- <blockquote>: bloque de texto indentado
Un ejemplo de cada uno de ellos:
<html>
<head>
<title>ejemplo de estilos lógicos</title>
</head>
<body>
Estilos lógicos:<br>
<strong>fuerte</strong>, <br>
<em>enfatizado</em>, <br>
<code>código</code>, <br>
<blockquote>bloque indentado</blockquote>, <br>
</body>
</html>
Fuentes de texto
Las fuentes de texto permiten realizar una serie de modificaciones al aspecto del texto. Entre ellas cabe destacar el tamaño, el color y la familia como las más importantes. Todas ellas se modifican a través de los atributos de la etiqueta <font>.
Tamaño del texto
El tamaño del texto es una de las características más fáciles de modificar. El texto tiene un tamaño que va de 1 a 7, siendo 3 el tamaño establecido por defecto.
La etiqueta <basefont> permite modificar el tamaño de letra por defecto. El siguiente ejemplo hace que el tamaño de fuente por defecto pase de 3 a 5:
<html>
<head>
<title>ejemplo de basefont</title>
<head>
<body>
El texto por defecto tiene tamaño 3.
<basefont size=5>
A partir de ahora tendrá tamaño 5.
<body>
</html>
También es posible cambiar el tamaño de ciertas secciones de un documento sin tener que cambiar el tamaño por defecto. Para esto existe la etiqueta <font>. Mediante su atributo size podemos especificar cualquier tamaño entre 1 y 7, o usar el signo "+" o "-" y una cantidad para agrandar o enpequeñecer el texto de forma relativa al tamaño por defecto. Veamos un ejemplo:
<html>
<head>
<title>ejemplo de font</title>
</head>
<body>
<font size=1> fuente de tamaño 1</font><br>
<font size=2> fuente de tamaño 2</font><br>
<font size=3> fuente de tamaño 3</font><br>
<font size=4> fuente de tamaño 4</font><br>
<font size=5> fuente de tamaño 5</font><br>
<font size=6> fuente de tamaño 6</font><br>
<font size=7> fuente de tamaño 7</font><br>
</body>
</html>
Color del texto
El color del texto puede cambiarse mediante la utilización del atributo color de la etiqueta <font>. El color puede especificarse mediante un nombre de color o mediante una descripción RBG. Veamos un ejemplo:
<html>
<head>
<title>ejemplo de color</title>
</head>
<body>
<font color=red>Color rojo</font>
<font color=green>Color verde</font>
<font color=#0000ff>Color azul</font>
</body>
</html>
Tipo de fuente
El tipo de fuente se modifica mediante el atributo face de la etiqueta <font>. Si se especifica más de una el navegador utilizará la primera que esté disponible. Las fuentes por lo general varian entre navegadores y entre sistemas operativos, por lo que es conveniente utilizar varias para asegurarnos de que se utilizará alguna de las que deseemos. He aqui un ejemplo:
<html>
<head>
<title>ejemplo de tipos de fuentes</title>
</head>
<body>
Fuente por defecto
<font face="arial">Fuente Arial</font>
<font face="times">Fuente Times</font>
<font face="helvetica">Fuente Helvetica</font>
</body>
</html>
Cabeceras (<h1>..<h6>)
Suelen utilizarse para identificar los titulos de las diferentes secciones de un documento. Suelen aparecer en negrita y con tamaños de letra variando desde muy grande para <h1> hasta muy pequeño para <h6>. El siguiente ejemplo los muestra todos para asi poder distinguir fácilmente los cambios entre ellos:
<html>
<head>
<title>ejemplo de cabeceras</title>
</head>
<body>
<h1>Cabecera h1</h1>
<h2>Cabecera h2</h2>
<h3>Cabecera h3</h3>
<h4>Cabecera h4</h4>
<h5>Cabecera h5</h5>
<h6>Cabecera h6</h6>
</body>
</html>
Párrafos
Los párrafos pueden especificarse de varias formas. La más inmediata es escribir directamente el texto y colocar saltos de línea con <br> entre ellos. Sin embargo esta no es la más conveniente. Es mejor utilizar alguna de las etiquetas <p> o <div>. Ambas tienen el efecto de crear un párrafo con la diferencia de que <p> añade un salto de línea al final del párrafo, cosa que no hace <div>. Ambas tienen la utilidad añadida de delimitar todo el párrafo, pudiéndose de esta forma aplicar cambios al mismo a través de sus atributos. De ellos el más importante es align que permite escoger la alineación horizontal del texto.
Un ejemplo sobre párrafos:
<html>
<head>
<title>ejemplo de párrafos</title>
</head>
<body>
Párrafos separados por un salto de línea. <br>
Párrafos separados por un salto de línea. <br>
<p>Un párrafos delimitado por <p>.</p>
<div>Un párrafos delimitado por <div>.</div>
</body>
</html>
Texto preformateado
La etiqueta <pre> sirve para delimitar un texto que deseamos sea mostrado como código fuente, lo que normalmente se traduce en un tipo de texto no proporcional y el respeto de los espacios, saltos de línea y tabuladores. Todos los ejemplos de este tutorial están creados utilizando esta etiqueta.
<html>
<head>
<title>ejemplo de texto preformateado</title>
</head>
<body>
Este es un ejemplo muy simple del uso de <pre>.<br>
Sin <pre>:
----
| |
| |
----
Con <pre>:
<pre>
----
| |
| |
----
</pre>
</body>
</html>
Texto parpadeante
Podemos hacer que el texto parpadee utilizando la etiqueta <blink>. Usadlo con cuidado porque es una de las cosas que menos gustan a los navegantes. He aqui un ejemplo
<html>
<head>
<title>ejemplo de texto parpadeante</title>
</head>
<body>
Esta línea es normal.
<blink>Esta en cambio parpadea.</blink>
</body>
</html>
Continua a la Pagina #4
