FORMATO DE TEXTO
Caracteres especiales y espacios en blanco:
Una página web se ha de ver en paises distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres.
Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una página, debemos sustituirlo por su código.
Por ejemplo, la "á" (a minúscula acentuada) se escribe "á" de modo que la palabra página se escribiría en una página HTML de este modo: página
Caracteres especiales básicos
En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente caracter.
| < | < | > | > |
| & | & | " | " |
Caracteres especiales del HTML 2.0
| Á | Á | À | À |
| É | É | È | È |
| Í | Í | Ì | Ì |
| Ó | Ó | Ò | Ò |
| Ú | Ú | Ù | Ù |
| á | á | à | à |
| é | é | è | è |
| í | í | ì | ì |
| ó | ó | ò | ò |
| ú | ú | ù | ù |
| Ä | Ä | Â | Â |
| Ë | Ë | Ê | Ê |
| Ï | Ï | Î | Î |
| Ö | Ö | Ô | Ô |
| Ü | Ü | Û | Û |
| ä | ä | â | â |
| ë | ë | ê | ê |
| ï | ï | î | î |
| ö | ö | ô | ô |
| ü | ü | û | û |
| Ã | Ã | å | å |
| Ñ | Ñ | Å | Å |
| Õ | Õ | Ç | Ç |
| ã | ã | ç | ç |
| ñ | ñ | Ý | Ý |
| õ | õ | ý | ý |
| Ø | Ø | ÿ | ÿ |
| ø | ø | Þ | Þ |
| Ð | Ð | þ | þ |
| ð | ð | Æ | Æ |
| ß | ß | æ | æ |
Caracteres especiales del HTML 3.2
| ¼ | ¼ | | |
| ½ | ½ | ¡ | ¡ |
| ¾ | ¾ | £ | £ |
| © | © | ¥ | ¥ |
| ® | ® | § | § |
| ª | ª | ¤ | ¤ |
| ² | ² | ¦ | ¦ |
| ³ | ³ | « | « |
| ¹ | ¹ | ¬ | ¬ |
| ¯ | ¯ | ­ | |
| µ | µ | º | º |
| ¶ | ¶ | ´ | ´ |
| · | · | ¨ | ¨ |
| ° | ° | ± | ± |
| ¸ | ¸ | » | » |
| ¿ | ¿ |
Otros caracteres especiales
| × | × | ¢ | ¢ |
| ÷ | ÷ | € | € |
| “ | “ | ™ | ™ |
| ” | ” | ‰ | ‰ |
| Œ | Œ | ƒ | ƒ |
| ‡ | ‡ | † | † |
Espacios en Blanco:
El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (Enter o Intro).
El siguiente ejemplo ilustra este comportamiento:
El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:
Los dos párrafos de la imagen anterior se ven idénticos, aunque el segundo párrafo incluye varios espacios en blanco y está escrito en varias líneas diferentes. La razón de este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.
No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.
Comentarios saltos de linea <br>:
Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.
La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.
En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />).
Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:
El navegador ahora sí que muestra correctamente las nuevas líneas que se querían insertar:
Texto preformateado <pre>:
En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.
En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas.
El siguiente ejemplo muestra el uso de la etiqueta <pre>:
El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias líneas) dentro de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:
Separadores <hr>:
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.
Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja.
El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:
Sangrado de Texto <blockquote>:
Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo.HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web.
La etiqueta <blockquote> permite indicar mediante el atributo cite la dirección de un documento del que se ha extraído la cita.
El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:
Para indicar de forma clara que el texto es una cita externa, los navegadores muestran por defecto el texto del elemento <blockquote> con un gran margen en la parte izquierda.
Formatear el texto <font>:
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:
El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:
Formato de Parrafo <b> <u> <i> <p> ...:
Hay un a gran cantidad de tags para el diseño de la fuente. El
siguiente ejemplo contiene los comandos más importantes de este
grupo.
El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:
Marquesinas <marquee>:
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto.
Para utilizar una marquesina utilizamos <MARQUEE> de la siguiente forma:
Podemos modificar el efecto de la marquesina utilizando los siguientes modificadores:
Con este modificador podemos indicar si la marquesina se va a mover de izquierda a derecha o de derecha a izquierda:
<Marquee direction=right>Esto es un texto en marquesina de izquierda a derecha</Marquee>
Las listas Ordenadas y Desordenadas:
Con HTML se pueden realizar diferentes tipos de listas. En primer
lugar mencionaremos la lista desordenadas, marcada con el elemento
UL. Cada elemento de la lista va marcado con el elemento LI e HTML.
En el navegador se vería de la siguiente manera
Las listas cuyos elementos se numeran son listas numeradas, "ordered lists", y van señalizadas por el elemento LO de HTML. Cada una de las entradas de la lista se forma, nuevamente, con el elemento LI(List Item).
En el navegador se veria de la siguiente manera
Alineaciones:
Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas:
- Izquierda (left).
- Centrado (center).
- Derecha (right).
- Justificado (justify), es decir, centrado a derecha e izquierda.
Podemos utilizar el valor de "text-align: center":
En el navegador se veria de la siguiente manera:
A continuación les dejamos un vídeo que les ayudara a entender de una manera mucho mejor como se utilizan las etiquetas que dan formato a un párrafo de texto:
No hay comentarios:
Publicar un comentario