Sep 07 2009

HTML (IV)

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:

  • Tengo un ordenador con un procesador de doble núcleo, cada núcleo es de 2.6<abbr title=”Giga Hercios, medida estandarizada de la capacidad de ciclos que es capaz de realizar un ordenador en un determinado tiempo”>GHz</abbr>tengo también una memoria de 8<abbr title=”Gigabytes o lo que es lo mismo, 1.000.000.000 bytes”>GB</abbr> de <abbr title=”Random Access Memory”>RAM<abbr>además de un disco duro de 1 <abbr title=”1 Terabyte son 1024GB”TB</abbr> de disco duro.
  • Tengo un ordenador con un procesador de doble núcleo, cada núcleo es de 2.6GHz tengo también una memoria de 8GB de RAM además de un disco duro de 1 TB de disco duro.
  • 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>

  • Atributo Face: Este atributo nos permite definir el tipo de letra. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente
    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>
  • Atributo Size: Este atributo nos permite seleccionar el tamaño de la letra, siendo “1” el más pequeño y “7” el más grande, ejemplo:

    <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>
  • Atributo Color:El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por
    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:

    Colores
    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:

    <font color=”#FF0000″>Rojo</font>

    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:

    Galdakao Fighters

    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:

  • Si el origen (página donde está el link) está en el mismo directorio que el destino (pagina a la que apunta el link), entonces solo tenemos que escribir su nombre:

    <a href=”trucos.html” title=”Trucos de Informatica by Sakrow”>Trucos Informaticos</a>

  • Si el destino esta en un subdirectorio deberemos de utilizar la barra “\” para subir e indicarle el camino:

    <a href=”galeria/foto_ordenador.jpg” title=”Ordenador de Sobremesa”>Ver Imagen del Ordenador</a>

  • Si por el contrario la dirección esta por encima de la carpeta, deberemos de utilizar “../” para subir de carpeta:

    <a href=”../index.html” title=”Inicio”>Volver al inicio de la pagina</a>

  • 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:

    <a href=”mailto:sakrow@gmail.com” title=”E-mail de contacto de Sakrow”>¡¡Contacta conmigo!!</a>

    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):

    <a id=”principio_de_pagina” />

    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:

    <a href=”#principio_de_pagina” title=”Este link le llevara al inicio de la pagina”>Volver al inicio de la pagina</a>

    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:

    <a href=”pagina_seleccionada.html#ancla_de_pagina_selccionada” title=”Este link le llevara a un sitio predeterminado de otra página”>Ir a Descripción</a>

    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:

    Ancla de Ejemplo

    2 comentarios

      • bastago on 07/03/2010 at 6:15 PM

      tiooooo

      aver si me dices como acer para ke la imagen de fondo de la web acer ke se pongra la resoluccion automaticamente

      y ya te ire preguntadon mas cosiyas xD

      • Sakrow on 24/03/2010 at 4:21 PM

      Eso lo tienes que hacer mediante CSS, utilizando “div” y sus respectivas “id”. No es difícil, solamente hay que entenderlo bien.

      Un Saludo

      sakrow

    Deja un comentario

    Your email address will not be published.

    Uso de cookies

    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

    ACEPTAR
    Aviso de cookies