El formato del texto
yuuko3004Trabajo18 de Febrero de 2013
3.370 Palabras (14 Páginas)481 Visitas
Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra página web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el "cuerpo" del documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta body también podemos personalizarla para darle el aspecto que nosotros deseemos.
Esta personalización la conseguiremos a través de una serie de parámetros que a continuación te presentaremos. Bien, pues vamos a empezar.
Color de fondo: bgcolor
El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:
<body bgcolor="#FF0000"></body>
Imagen de fondo: background
Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background". La etiqueta quedaría de la siguiente manera:
<body background="URL"> </body>
Dónde leemos "URL" deberemos escribir la dirección de la imagen que queramos que sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la página, la imagen se repetirá tanto a lo ancho como a lo largo hasta rellenar todo el espacio.
Color de texto: text
Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que sea nuestro texto. Esto lo definiremos con el parámetro "text".
Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente:
<body text= "#000000"></body>
Márgenes: leftmargin, topmargin, rightmargin y bottommargin
Ya sabemos de qué color será nuestro fondo y nuestro texto, pero también podemos predefinir los márgenes de nuestra página web para que queda mucho mejor. Porque no queremos que nuestro texto se quede muy pegada a los márgenes, ¿verdad?
Para especificar los márgenes utilizaremos el parámetro margin, con su correspondiente indicación delante. Así encontraremos "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo.
Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente:
<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>
Color de links: link, alink y vlink
En body también podemos ( y de hecho debemos hacerlo) definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink").
Así pues, si queremos que nuestra página tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estén activos y se queden en azul cuando estén inactivos deberemos escribir lo siguiente:
<body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>
El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar.
Anteriormente ya hemos visto en un pequeño texto introductorio como se ponía la negrita y la itálica. Pero eso era solamente introductorio. A continuación lo vamos a explicar de una forma más detallada.
Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar, entre medias. En el ejemplo de la negrita se abriría <b> y se cerraría </b>.
Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto:
<b><i>Este texto está escrito en negrita y en cursiva</i></b>.Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior. Por último, recordad que podéis escribir las etiqutes en minúsculas o en mayúsculas.
Vamos con los diferentes formateos html que podemos encontrar:
Negrita
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
Este palabra la vamos a poner en negrita y esta otra también
Cursiva
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em>
Este palabra la vamos a poner en cursiva y esta otra también
Subrayado
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:
<u>Así subrayaríamos una frase importante</u>
Así subrayaríamos una frase importante
Texto con espaciado simple o TT
TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>.
<tt>Esta frase la vamos a escribir de forma espaciada </tt>
Esta frase la vamos a escribir de forma espaciada
Palabras más grandes o más pequeñas
Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>.
Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá.
Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.
Un ejemplo sería el siguiente:
Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>.
Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.
Superíndices y subíndices
Mediante el Html también podemos escribir fórmulas matemáticas. Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.
Así nos queda un ejemplo como el siguiente:
Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H <sub>2</sub> O o números elevados a potencias 7<sup>3</sup>.
Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H 2 O o números elevados a potencias 73.
Texto tachado
Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra:
Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da!
Si la palabra no me gusta la puedo tachar así, así o así. ¡Lo mismo me da!
En este tema vamos a tratar y a explicaros los párrafos y los saltos de línea en html. Porque debemos saber que el html los saltos de línea, es decir, los espacios que hagamos en el código no son interpretados te tal forma.
En html para dejar un salto de línea debemos utilizar una serie de etiquetas, de código, que el navegador interpretará cómo tal. Esas etiquetas son <br/> </p> o </pre>. A continuación te explicaremos cada una de ellas.
Saltos de línea
Ya
...