En la anterior edición nos quedamos con los «blockquote» y los «hr», bien ahora empezaremos con los formatos del texto, ya hemos visto el <b></b>, <i></i>…
Pero eso solo es para darle un pequeño formato a algo, algún palabra, pero poca cosa, con lo siguiente podremos hacer muchas cosas más además de poder cambiarles el formato a toda una frase o un párrafo.
Antes de empezar con los formatos de las letras, sus colores y demás, me gustaría hacer un pequeño paréntesis y meter aquí un tipo de formato de textos, que nos es otro que los acrónimos y las abreviaturas. Se utilizaran en este caso las etiquetas <acronym></acronym> y <abbr></abbr> respectivamente. El efecto es igual para las dos etiquetas, cuando se pasa el ratón por encima, nos saldrá un rectángulo explicativo. Es necesario utilizar el atributo «title», en este atributo deberemos de escribir el valor de lo que queremos poner, ejemplo:
Utilizar esto es algo lioso, sobre todo para editar las cosas, porque puede llegar a la confusion, pero si lo estructuramos bien, la pagina quedara mucho mejor y los usuarios lo agradeceran.
Formatos variados
Para empezar con las formatos hablaremos de la etiqueta <font></font>, con esta etiqueta podremos cambiar desde ese color, hasta las dimensiones de las letras, todo con estos sencillos atributos:
<font> color=»red» size=»5″ face=»Comic Sans MS,arial,verdana»</font>
que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasara al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Ejemplo:
<font face=»Comic Sans MS,arial,verdana»>Este texto tiene atributo face</font>
<font size=»7″>Fuente en tamaño 7</font>
<font size=»6″>Fuente en tamaño 6</font>
<font size=»5″>Fuente en tamaño 5</font>
<font size=»4″>Fuente en tamaño 4</font>
<font size=»3″>Fuente en tamaño 3</font>
<font size=»2″>Fuente en tamaño 2</font>
<font size=»1″>Fuente en tamaño 1</font>
un número hexadecimal que está compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.
Por otra parte, es posible definir de una manera inmediata algunos de los colores más
frecuentemente usados para los que se ha creado un nombre más nemotécnico:
| Aqua | Black |
| blue | fuchsia |
| gray | green |
| lime | maroon |
| navy | olive |
| purple | red |
| white | yellow |
| silver | teal |
Un ejemplo:
<font color=»red»>Este texto está en rojo</font>
Además de poder poner eso, se puede hacer mediante el método RGB. Los valores RGB se indican en numeración hexadecimal, esto es, en base 16.
| 0=0 | 4=4 | 8=8 | C=12 |
| 1=1 | 5=5 | 9=9 | D=13 |
| 2=2 | 6=6 | A=10 | E=14 |
| 3=3 | 7=7 | B=11 | F=15 |
Para conseguir los colores deberemos de mezclar los valore de la siguiente manera:
RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.
Ejemplo: Cómo se cambiaría la fuente para escribir en rojo:
Al Atributo color le damos un valor RGB en formato hexadecimal. El carácter # se coloca al
principio de la cadena. Con este método se pueden llegar a conseguir muchísimo colores, aquí algunos:
| Naranja | #FF8000 |
| Verde Turquesa | #339966 |
| Azul oscuro | #000080 |
Como las páginas web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. La forma de conseguir esto es limitando nuestros colores a los que se pueden conseguir utilizando la siguiente norma:
| Utilizaremos siempre estos valores | |
| 00 | 33 |
| 66 | 99 |
| CC | FF |
Con esta técnica se consiguen los siguientes colores:
#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Asique tenéis colores para probar y poder decidir cual os gusta más. Y aquí termina los que se refiere a personalizar el texto, hay muchas más posibilidades usando CSS cosa que daremos más adelante.
Enlaces
Todos conocemos los enlaces entre paginas, tanto locales como externos, o mas comúnmente denominadas URL. Bien , crearlas no es nada complicado, el que frecuente foros o blogs, no tendrá ningún problema con la forma, ya que es prácticamente igual.
Si queremos un link a una página de otro servidor, esto es externa, deberemos de utilizar la etiqueta <a>, de esta forma:
<a href=»http://gdkofighters.blogspot.com» title=»Blog de Artes Marciales con sedes de Galdakao, Bilbao, Bizkaia.»>Galdakao Fighters</a>
Que quedaria:
El atributo «href» contiene la URL a donde se enlazara en enlace. Es MUY IMPORTANTE que nos se nos olvide el «http://» porque si no, no funcionara.
En «title» escribiremos una descripción que queramos que aparezca cuando posemos el ratón en el enlace, al igual que pasa en las etiquetas de <abbr> y <acronym>. Pero no hay que confundir el titulo del texto (title) con el texto del enlace (lo que se ve, en este caso «Galdakao Fighters»). Son completamente diferentes.,
Para enlaces internos necesitaremos nuestro propio servidor y la técnica es la misma, solamente que deberemos de saber donde están las páginas que queremos enlazar:
Todo esto es respecto a enlaces de URL, pero también podemos hacer un enlace que habrá automáticamente el cliente de correo que tenga el usuario para que escriba un mensaje a esa dirección, normalmente es el Outlook, pero recomiendo el Thunderbird.( que es libre xD)
Es tan sencillo como incluir un «mailto», me explico con un sencillo ejemplo:
Anclas
Las anclas nos permiten «teletranportarnos» a cualquier parte de la pagina con un enlace, esto sí que son enlaces locales!. Lo que hacen es enlazar una posición concreta de la pagina, funcionan de la siguiente manera:
En el punto al cual nos queramos dirigir , pondremos nuestro ancla (utilizando el atributo id):
Si ahora vemos nuestra página en el navegador no notaremos nada extraño, no se ve el ancla, porque es invisible. Para usarlos deberemos de crear un link que nos lleve al ancla:
Recordad que siempre que uséis las anclas debéis de utilizar las almohadillas «#» sino no funcionara. Pero solo en la re-dirección, cuando la nombramos no debemos de poner «#». Del mismo modo que enlazamos anclas de una página podemos enlazar un ancla de otra página:
Las anclas son muy útiles para paginas muy largas y con muchos contenidos o muchas descripciones y fotos. Se pueden utilizar para muchas cosas. Son muy comunes en los FAQ.
Un ejemplo de las anclas es:
