Para dar formato de dirección en html utilizamos el elemento <address>.
Código : <address></address>
Resultado: formato para escribir direcciones
Pasemos al Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br>
<address>Formato utilizado para escribir direcciones con "address"</address><br>
</body>
</html>
Programa 22
Representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
El elemento <acronym> es el que utilizaremos para los acrónimos.
Código : <acronym></acronym>
Resultado: formato para escribir acrónimos
Antes de continuar, ¿sabéis lo que es un acrónimo?
Pues bien para los que no lo sabéis en lingüística moderna, un acrónimo (del griego ἄκρος akros, 'extremo' y ὄνομα ónoma, 'nombre') puede ser una sigla que se lee como una palabra o un vocablo formado al unir parte de dos palabras.
Este tipo de acrónimos funden dos elementos léxicos tomando, casi siempre, del primer elemento el inicio y del segundo el final[1].
Ahora que sabemos lo que es un acrónimo pasemos al código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br>
<acronym title="Boletín Oficial del Estado">BOE</acronym> publicado con fecha...
</body>
</html>
Programa 21
La representación en el navegador:
Al pasar el mouse sobre el acrónimo “BOE”, se abre una ventana con el significado del mismo, en este caso “Boletín Oficial del Estado”.
Este elemento al igual que el de abreviatura, nos ayudan a crear páginas web profesionales y elaboradas.
[1] Fuente: http://es.wikipedia.org/wiki/Acronimo
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Con <abbr> podremos indicar abreviaturas. Es decir que el navegador mostrará una abreviatura pero al pasar el mouse sobre la misma nos mostrara en una ventana emergente el texto completo:
Código : <abbr></abbr>
Resultado: formato para escribir abreviaturas con texto emergente
Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal
<br>
<abbr title="Esto sería el texto sin abreviar">este es el texto abreviado con "abbr"</abbr>
</body>
</html>
Programa 20
En el navegador se vería como sigue al pasar el mouse sobre la abreviación:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Con el elemento <cite> daremos formato a los textos que hagan referencia a otra fuente de información.
Código : <cite></cite>
Resultado: formato para hacer referencia a otra fuente
Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br>
<cite>Formato utilizando "cite"</cite>
</body>
</html>
Programa 19
Representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Como se puede ver en este y los anteriores temas hay muchos elementos que nos ayudaran a estructurar el texto.
El formato que veremos ahora se utiliza para mostrar variables.
Código : <var></var>
Resultado: formato variables de un programa
Código de ejemplo:
Como en el ejemplo anterior se ha insertado un salto de línea en el código para una representación en el navegador más clara.
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto sin formato<br>
<var>Texto con formato de "variables"</var>
</body>
</html>
Programa 18
El código anterior se vería así en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Cuando queremos diferenciar un texto a introducir del resto del texto, este formato nos ayudara a mantener la estructura de nuestra web.
Con <kbd> le daremos un formato diferente al texto a introducir.
Código : <kbd></kbd>
Resultado: formato texto a introducir
Código de ejemplo:
He agregado un <br>, (salto de línea) en el código para obtener una mejor presentación y ver el resultado en dos líneas.
La representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Seguimos con elementos que nos ayudaran a estructurar el texto, Ahora veremos cómo poner el texto en formato ejemplo.
Código : <samp></samp>
Resultado: formato ejemplo
Código de ejemplo (samp, proviene del inglés sample=ejemplo):
Se ha agregado un <br>, salto de línea en el código para poder ver el resultado en dos líneas.
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal <br>
<samp>Texto en formato ejemplo</samp>
</body>
</html>
Programa 16
Esta sería la representación en el navegador:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Entre los elementos que nos pueden ayudar a la estructuración de texto tenemos el que nos permite mostrar el texto en formato código.
Código : <code></code>
Resultado : formato código
Programa de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal
<code>Texto en formato código</code>
</body>
</html>
Programa 15
La representación en el navegador seria la siguiente:
Recordad de probar las diferentes representaciones en diferentes navegadores.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Continuando con los diferentes elementos que nos ayudaran a estructurar el texto, Ahora veremos cómo poner el texto en formato definición.
Código : <dfn></dfn>
Resultado: formato definición
Código de ejemplo:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal
<dfn>Texto en formato definición - dfn -</dfn>
</body>
</html>
Programa 14
Se vería así (en IE8):
Nota: Tened en cuenta que los diferentes navegadores pueden representar de diferentes maneras el código, probad este código por ejemplo en IE y en Google Chrome y veréis la diferencia.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Continuando con los diferentes elementos, que nos ayudan a estructurar el texto, en este caso veremos como enfatizar aún más el texto.
Código : <strong></strong>
Resultado: mayor enfatizado
Para facilitar la diferencia en el ejemplo hemos incluido el elemento anterior "enfatizado" (<em></em>), así podemos apreciar las diferencias entre diferentes elementos de estructuración.
Código de ejemplo utilizando <strong>:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal
<em>Texto enfatizado utilizando em</em>
<strong>Texto mayor enfatizado utilizando strong</strong>
</body>
</html>
Programa 13
Se vería así:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Podemos destacar palabras y oraciones dentro del texto de nuestra web con diferentes formatos, que nos ayudaran a estructurar el texto. Entre estos elementos se encuentra el enfatizado.
Código : <em></em>
Resultado: enfatizado
Código de ejemplo de texto enfatizado:
<html>
<head>
<title>Estructuración de Texto</title>
</head>
<body>
Texto normal
<em>Texto enfatizado</em>
</body>
</html>
Programa 12
En el navegador ser ven los dos formatos de texto, normal y enfatizado:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Ahora veremos cómo hacer un encabezado o un título fácilmente para nuestra página web, y además un formato que podamos repetir en otras, para mantener la homogeneidad (aunque más adelante veremos métodos más avanzados para realizar esta tarea)
Se puede dar mayor o menor importancia a los textos cambiando el tamaño de la fuente y aplicando "negrita".
Para que nuestra web mantenga un aspecto homogéneo debemos tener igual criterio en todo nuestro documento, esto podemos controlarlo fácilmente utilizando la etiqueta<hN></hN>, en donde N es un valor entero comprendido entre 1 y 6 (el 1 daría formato a los títulos de mayor importancia, y el 6 a los de menor importancia).
Estos títulos son párrafos, y producen saltos de línea. Veamos un ejemplo:
<html>
<head>
<title>Encabezados o Títulos</title>
</head>
<body>
<h1>Ejemplo de Encabezado 1 - etiqueta h1 </h1>
<h2>Ejemplo de Encabezado 2 - etiqueta h2 </h2>
<h3>Ejemplo de Encabezado 3 - etiqueta h3 </h3>
<h4>Ejemplo de Encabezado 4 - etiqueta h4 </h4>
<h5>Ejemplo de Encabezado 5 - etiqueta h5 </h5>
<h6>Ejemplo de Encabezado 6 - etiqueta h6 </h6>
</body>
</html>
Programa 11
Como se puede observar esta etiqueta tiene un principio <hn> y un cierre <hn>.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Como hemos dicho anteriormente el html fue diseñado al principio especialmente para texto. Es por eso que los saltos de línea no se representan, y aunque lo escribamos en varias líneas se representa en una sola línea separada por espacios, veamos un ejemplo.
Código Ejemplo de separadores y líneas:
<html>
<head>
<title>Espacios y líneas</title>
</head>
<body>
Esto
aunque no lo parezca
es
una
sola
línea
de
texto
</body>
</html>
Programa 9
El código anterior ejecutado en el navegador será así:
El ancho de la representación de esta línea de texto vendrá determinado por la ventana del navegador.
Como podréis observar tampoco se representan los espacios en blanco, por muchos espacios que pongamos en el código, el navegador sólo representará uno.
Para representar un salto de línea se utiliza la etiqueta <br>. Es decir que por cada <br> que se escribe en el código, se salta una línea en la representación.
Código Ejemplo de etiqueta <br>:
<html>
<head>
<title>Etiqueta de salto de línea <br></title>
</head>
<body>
Esto
es una línea, que saltara una línea después de la etiqueta -> br<br>
esta línea está debajo porque antes hay una etiqueta -> br <br>
</body>
</html>
Programa 10
El código anterior se verá representado en el navegador así:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Para representar saltos de línea utilizamos la etiqueta <br>. Para el caso de párrafos, utilizamos las etiquetas <p> y </p> para cerrar el párrafo.
Cada vez que se cambia de párrafo, se representa un salto de línea que separa un párrafo de otro.
Código Ejemplo de párrafo:
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p>Primer Párrafo</p>
<p>Segundo Párrafo</p>
</body>
</html>
Programa 4
Como siempre copia o escribe este código con un editor de texto plano (como el Bloc de Notas de Windows), grábalo como un archivo con extensión .hml y después abre ese archivo con el navegador, y obtendrás algo como esto.
La etiqueta <p> </p> cuenta con el atributo align que permite alinear el texto a la izquierda, a la derecha o al centro.
Este atributo también permite justificar el texto a los márgenes, veamos los ejemplos:
Código Ejemplo de párrafo alineado a la izquierda (left):
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p align="left">texto alineado a la izquierda</p>
</body>
</html>
Programa 5
En el navegador se verá algo así:
Código Ejemplo de párrafo alineado a la derecha (right):
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p align="right">Texto alineado a la derecha</p>
</body>
</html>
Programa 6
Así vera en el navegador con alineación a la derecha:
Código Ejemplo de párrafo alineado al centro (center):
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p align="center">Texto alineado al centro</p>
</body>
</html>
Programa 7
Vista de texto alineado al centro:
Código Ejemplo de párrafo justificado (justify):
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p align="justify">Texto justificado a los márgenes izquierda y derecha, esta línea es más larga para que podáis observar claramente cómo funciona la justificación.</p>
</body>
</html>
Programa 8
Vista de texto justificado:
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Los separadores de texto son líneas horizontales que se utilizan para separan las secciones de los documentos.
Se incluyen mediante el elemento <hr>, y no tienen etiqueta de cierre. Se separan del texto en un salto de línea antes y después.
El elemento <hr> dispone de los siguientes atributos:
A continuación un ejemplo. Copiad el siguiente código en un editor de texto plano (o en notepad2), guardar el archivo con extensión .html y después abridlo con cualquier navegador para ver los resultados.
y el resultado será el siguiente:
[1] Píxel: la menor unidad homogénea en color que forma parte de una imagen digital.
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
Hemos visto en los temas anteriores, algo sobre html, y podíamos utilizar para realizar las pruebas y los ejemplos el Notepad (Bloc de Notas) de Windows o cualquier editor de texto "plano".
Les vamos a proponer ahora otro editor de fácil uso y con algunas ventajas sobre los editores simples.
Estamos hablando del Notepad2, es muy simple de usar, pero entre sus diferencias destaca la de utilizar colores para facilitarnos la escritura y lectura del código, además es posible configurarlo para que realice automáticamente el cierre de sentencias que hemos abierto, he incluso puede identificar qué tipo de archivo estamos utilizando de acuerdo al nombre de la extensión de este.
No necesita instalación, solo se baja en un archivo .zip, se descomprime en una carpeta y ‘voila’, ya está funcionando.
Después solo queda "jugar" con los ‘settings’ para adaptarlo a la comodidad de cada uno.
Lo podéis descargar gratis de la siguiente Web:
http://www.flos-freeware.ch/notepad2.html
Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.
