3.TEXTO
3.1.Juego de caracteres
Este apartado puedes saltartelo si quieres, basta que sepas que todos los visores de páginas Web actuales soportan todos los caracteres gráficos de la especificación ISO 8859-1, que permiten escribir textos en la mayoria de los paises occidentales. Si tienes que insertar en tu web algún caracter fuera de lo normal, lee este apartado.
Se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Estos caracteres pueden ser representados por un código númerico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el simbolo & y terminan con el simbolo ;.
A continuación están las principales entidades:
| Carácter | Código | Entidad | Carácter | Código | Entidad | Carácter | Código | Entidad | Carácter | Código | Entidad | |
| ! | ! | -- | " | " | -- | # | # | -- | $ | $ | -- | |
| % | % | -- | & | & | -- | ' | ' | -- | ( | ( | -- | |
| ) | ) | -- | * | * | -- | + | + | -- | ´ | , | -- | |
| - | - | -- | . | . | -- | / | / | -- | : | : | -- | |
| ; | ; | -- | < | < | -- | = | = | -- | > | > | -- | |
| ? | ? | -- | @ | @ | -- | [ | [ | -- | \ | \ | -- | |
| ] | ] | -- | ^ | ^ | -- | _ | _ | -- | ` | ` | -- | |
| { | { | -- | | | | | -- | } | } | -- | ˜ | ~ | -- | |
| & |   | nbsp | ¡ | ¡ | iexcl | ¢ | ¢ | cent | £ | £ | pound | |
| ¤ | ¤ | curren | ¥ | ¥ | yen | ¦ | ¦ | brvbar | § | § | sect | |
| ¨ | ¨ | uml | (c) | © | copy | ª | ª | ordf | « | « | laquo | |
| ¬ | ¬ | not | | ­ | shy | (r) | ® | reg | ¯ | ¯ | macr | |
| ° | ° | deg | ± | ± | plusm | ² | ² | sup2 | ³ | ³ | sup3 | |
| ´ | ´ | acute | µ | µ | micro | ¶ | ¶ | para | · | · | middot | |
| ¸ | ¸ | cedil | ¹ | ¹ | sup1 | º | º | ordm | » | » | raquo | |
| 1/4 | ¼ | frac14 | 1/2 | ½ | frac12 | 3/4 | ¾ | frac34 | ¿ | ¿ | iquest | |
| À | À | Agrave | Á | Á | Aacute | Â | Â | Acirc | Ã | Ã | Atilde | |
| Ä | Ä | Auml | Å | Å | Aring | Æ | Æ | AEling | Ç | Ç | Ccedil | |
| È | È | Egrave | É | É | Eacute | Ê | Ê | Ecirc | Ë | Ë | Euml | |
| Ì | Ì | Igrave | Í | Í | Iacute | Î | Î | Icirc | Ï | Ï | Iuml | |
| Ð | Ð | Eth | Ñ | Ñ | Ntilde | Ò | Ò | Ograve | Ó | Ó | Oacute | |
| Ô | Ô | Ocirc | Õ | Õ | Otilde | Ö | Ö | Ouml | × | × | times | |
| Ø | Ø | Oslash | Ù | Ù | Ugrave | Ú | Ú | Uacute | Û | Û | Ucirc | |
| Ü | Ü | Uuml | Ý | Ý | Yacute | Þ | Þ | Thorn | ß | ß | szlig | |
| à | à | agrave | á | á | aacute | â | â | acirc | ã | ã | atilde | |
| ä | ä | auml | å | å | aring | æ | æ | aeling | ç | ç | ccedil | |
| è | è | egrave | é | é | eacute | ê | ê | ecirc | ë | ë | euml | |
| ì | ì | igrave | í | í | iacute | î | î | icirc | ï | ï | iuml | |
| ð | ð | eth | ñ | ñ | ntilde | ò | ò | ograve | ó | ó | oacute | |
| ô | ô | ocirc | õ | õ | otilde | ö | ö | ouml | ÷ | ÷ | divide | |
| ø | ø | oslash | ù | ù | ugrave | ú | ú | uacute | û | û | ucirc | |
| ü | ü | uuml | ý | ý | yacute | þ | þ | thorn | ÿ | ÿ | yuml |
Por lo tanto la palabra página la podríamos escribir como:
página
página
página
3.2. Espaciados y saltos de línea
En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor.Asimismo tampoco se representan tabulaciones, retornos de carro, etc... Para ello existen unas instrucciones específicas que indican estos códigos. La instrucción <PRE></PRE> obliga a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc. ...Para indicar un salto de línea se utiliza <BR> y para un cambio de párrafo ( una línea en blanco en medio ) se utiliza <P>.
La instrucción <P> puede usarse también como cerrada <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al visor la forma de justificar el párrafo. Los valores posibles de este parámetro son left, right y center.
| SI PONEMOS | SE VERA ASI |
Esto es una frase |
Esto es una frase |
<PRE>Esto es una frase</PRE> |
Esto es una frase |
| Esto<BR> es una<P> frase | Esto es una frase |
| <P align="right">párrafo justificado a laderecha </P> | párrafo justificado a la derecha |
| <P align="center">párrafo de texto centrado </P> | párrafo de texto centrado |
La Instrución <HR> muestra una línea horizontal de tamaño determinable. Utilizada sin ningún parámetro mostraría una línea horizontal que ocuparía todo el ancho de la página. Tiene los siguientes parámetros opcionales:
align = "posición".
Alinea la línea a la izquierda (left), a la derecha (right) o la
centra (center).
noshade. No muestra sombra, evitando el efecto
en tres dimensiones.
size = "número".
Indica el grosor de la línea de pixels.
width = "número en tanto por ciento (%)".
Indica el ancho de la línea en tanto por ciento en función del
ancho de ventana del visor. También se puede especificar un
número sin poner el simbolo de porcentaje, entonces indicaría
el ancho de la línea en pixels.
<HR align = "center" size="20" width="50%">
3.3. Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras. El texto que escribamos entre el inicio y el fin de cada instrucción será el afectado por ella. Los textos marcados como cabeceras provocan automáticamente un retorno de carro sin necesidad de incluir la instrucción <BR>:
| SI PONEMOS | SE VERA ASI |
| <H1>Texto de prueba</H1> | Texto de prueba |
| <H2> Texto de prueba</H2> | Texto de prueba |
| <H3> Texto de prueba</H3> | Texto de prueba |
| <H4> Texto de prueba</H4> | Texto de prueba |
| <H5> Texto de prueba</H5> | Texto de prueba |
| <H6> Texto de prueba</H6> | Texto de prueba |
| <H3>Texto de Prueba</H3>Esta es mi página. | Texto de PruebaEsta es mi página. |
NOTA: El uso de estas instrucciones puede ser útil para poner el título, pero puedes prescindir de ellas, dado que ya podremos aumentar el tamaño de letra de cualquier frase con los atributos de texto que veremos a continuación.
3.4.Atributos de texto
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias instrucciones. Algunas de ellas pueden ser no reconocidas por determinados visores de Internet:
| Atributo | Directiva | Ejemplo | Resultado |
| Negrita | <B></B> | <B>Texto de prueba</B> | Texto de prueba |
| Cursiva | <I></I> | <I> Texto de prueba</I> | Texto de prueba |
| Teletype | <TT></TT> | <TT> Texto deT prueba</TT> | Texto de prueba |
| Subrayado | <U></U> | <U> Texto de prueba</U> | Texto de prueba |
| Tachado | <S></S> | <S> Texto de prueba</S> | |
| Parpadeo | <BLINK></BLINK> | <BLINK> Texto de prueba</BLINK> | |
| Superíndice | <SUP></SUP> | <SUP> Texto de prueba</SUP> | Texto de prueba |
| Subíndice | <SUB></SUB> | <SUB> Texto de prueba</SUB> | Texto de prueba |
| Centrado | <CENTER></CENTER> | <CENTER> Texto de prueba</CENTER> | Texto de prueba |
Por otro lado la instrucción <FONT></FONT> nos permite variar el tamaño, el color y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.
size = "valor". Da
al texto un tamaño en puntos determinado.
color ="código de color".
Escribe el texto en el color cuyo código se especifica.
face ="nombre de font". Escribe
el texto en el tipo de letra especificado. Si este tipo de letra
no existe en el ordenador que ve la página, se usará el tipo de
fuente predeterminado del navegador.
<FONT size="2" color ="#FF0000" face="Arial">Texto de prueba</FONT>
Existen otras instrucciones que realizan las mismas operaciones que las antes vistas en los atributos del texto, asi <STRONG></STRONG> es igual que <B></B>, <EM></EM> es igual que <I></I> y <STRIKE></STRIKE> es igual que <S></S>.
Añadiremos algo de lo aprendido en nuestra página portada.htm:
| <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD> <!-- A continuación se pone fondo amarillo y texto en negro--> <BODY bgcolor ="#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta página web para ver que es lo que sucede, de paso probamos los parámetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> </BODY> </HTML> |