DISEÑO WEB

1. DISEÑO WEB SEM07. Formatos de Texto y Caracteres Especiales. Ing. Cesar Requejo

2. DISEÑO WEB Formatos de Texto y Caracteres Especiales.- • El lenguaje HTML permite dar varios tipos de formatos al texto de nuestras páginas. Para ello usa una serie de etiquetas, compuestas todas por una instrucción de inicio y otra de fin, que realizan efectos o formatos diversos en el texto que encierran. Estas etiquetas se dividen en dos grupos: las etiquetas de estilo lógico y las etiquetas de estilo físico.

3. DISEÑO WEB Etiquetas de Estilo Físico.- • Las etiquetas de estilo físico son aquellas que especifican exactamente cómo debe ser formateado el texto que modifican. Es decir, una etiqueta de estilo físico es aquella que dice: ’este texto debe estar en negrita’ sin más, no ofrece al navegador otra posible forma de mostrar ese texto. • Poner un texto en negrita: para ello se usa la etiqueta <B>..</B> como abreviatura de la palabra inglesa Bold que significa, precisamente, negrita.

4. DISEÑO WEB Etiquetas de Estilo Físico.- • Ej. Desde esta página puede adquirir la última versión de nuestro programa <B>’gratis’</B> Poner un texto en cursiva: en este caso se usa la etiqueta <I>..</I > como abreviatura de la palabra inglesa Italics que significa cursiva. Su uso es muy similar al anterior. • El último libro que me he leído es <I>El médico</I>

5. DISEÑO WEB Etiquetas de Estilo Físico.- Tachar una palabra o frase: aunque no es muy común en ocasiones puede ser conveniente que una palabra o frase aparezcan tachadas por una línea horizontal. La etiqueta de HTML que permite hacer esto es <STRIKE>..</STRIKE >, en inglés strike significa ’tachado’ • Yo <STRIKE>CASI</STRIKE> NUNCA me equivoco.

6. DISEÑO WEB Etiquetas de Estilo Físico.- Aumentar el tamaño del texto: En ocasiones queremos resaltar una palabra o frase haciendo que esté escrita con una letra de tamaño mayor al texto adyacente. Para ello se usa la etiqueta <BIG>..< /BIG> con cual conseguimos un ligero aumento de tamaño en el texto que es afectado por ella. Si queremos conseguir un aumento de tamaño aún mayor podemos anidar varias de estas etiquetas como observamos en el ejemplo: • Esto es texto normal,<BIG>este es grande<BIG>y este es mayor</BIG></BIG>

7. DISEÑO WEB Etiquetas de Estilo Físico.- Reducir el tamaño del texto: En otras ocasiones podemos pretender lo contrario: Hacer que una frase sea más pequeña que las anteriores. Para ello se usa la etiqueta SMALL que funciona de manera muy similar a la etiqueta BIG. • Esto es texto normal,<SMALL>este es pequeño<SMALL> y este es menor</SMALL></SMALL>

8. DISEÑO WEB Etiquetas de Estilo Físico.- Poner subíndices y superíndices: existen dos etiquetas que permiten poner subíndices y superíndices en una página HTML. Estas etiquetas son SUB y SUP respectivamente. • El 1<SUP>er</SUP>componente químico que estudiamos fue el agua o H<SUB>2</SUB>0

9. DISEÑO WEB Etiquetas de Estilo Físico.- Poner texto subrayado: el texto encerrado entre las instrucciones de inicio y fin de la etiqueta U se muestra simple. El nombre de la etiqueta proviene de la palabra inglesa Underline que significa precisamente subrayado. En general un texto se muestra subrayado para resaltar una información importante. • El plazo límite para la entrega de solicitudes es el<U>15 de Junio</U>

10. DISEÑO WEB Etiquetas de estilo lógico.- En contraposición con los estilos físicos están las etiquetas de estilo lógico. La función de estas etiquetas ya no será decirle al navegador ’pon esto en negrita’ ni similares, sino que simplemente describirán el texto, por ejemplo ’este texto es importante’, ’esto es un código’, etc. <STRONG>...< /STRONG>: El nombre de esta etiqueta significa fuerte o grueso, y sirve para indicar que el texto que modifique es un texto de mayor importancia que el que le rodea y es necesario resaltarlo de algún modo.

11. DISEÑO WEB Etiquetas de estilo lógico.- • <STRONG>No puedes</STRONG>perderte la última versión de nuestro editor HTML. <EM>...< /EM>: Esta etiqueta proviene de la palabra inglesa EMphasize, que significa enfatizar. El texto sobre el que actúa esta etiqueta suele estar mostrado en cursiva. • El autor del libro es<EM>Noah Gordon</EM>.

12. DISEÑO WEB Etiquetas de estilo lógico.- • <STRONG>No puedes</STRONG>perderte la última versión de nuestro editor HTML. <EM>...< /EM>: Esta etiqueta proviene de la palabra inglesa EMphasize, que significa enfatizar. El texto sobre el que actúa esta etiqueta suele estar mostrado en cursiva. • El autor del libro es<EM>Noah Gordon</EM>.

13. DISEÑO WEB Etiquetas de estilo lógico.- <VAR>...< /VAR>: delimita texto escrito por el usuario, variables, argumentos de comandos... Tanto el Explorer™ como el Navigator™ mostrarán este texto como cursiva. • La dirección de esa página es<VAR>www.towercom.es</VAR> <CITE>...< /CITE>: Esta etiqueta suele ser usada para introducir una cita o una referencia (significado de la palabra inglesa cite). Al igual que la etiqueta anterior provoca que el texto que encierra sea mostrado en cursiva:

14. DISEÑO WEB Etiquetas de estilo lógico.- • <CITE>Pienso, luego existo</CITE>dijo Descartes La etiqueta FONT permite tener un gran control sobre el tamaño de un texto. Este tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio (<FONT SIZE="">) y de fin (</FONT>). • Esto es texto normal <FONT SIZE="6"> y esto es grande • </FONT>

15. DISEÑO WEB Etiquetas de estilo lógico.-