(1) Introducción a HTML

1. ¿Para qué necesitamos HTML?

Cuando uno intenta vender un artículo en internet debe cuidarse mucho de la imagen que da su anuncio, ya que afecta a las probabilidades de venta mucho más de lo que uno en un principio esperaría.
Posiblemente el factor más importante en este aspecto es la descripción: una descripción detallada y exacta tienta mucho más que un anuncio que apenas tiene una línea, ya que al posible comprador le surgen muchas dudas y no siempre se anima a ponerse en contacto con el vendedor.
Pero hay otro aspecto que muchos vendedores olvidan a menudo, y es el aspecto estético. Olvidado, pero importante, ya que puede hacer que tus anuncios parezcan realmente profesionales.

Lo primero que debes saber es que para crear tu anuncio utilizaras un lenguaje de etiquetado que se conoce como HTML.
Existen muchas guias y cursos para aprender este lenguaje, pero aquí lo que vamos a ver es solo aquellas cosas que eBay no hace automaticamente por nosotros.

2. ¿Qué es HTML?

Para comenzar diré que nos referimos a HTML como un lenguaje de etiquetado y no de programación porque no damos órdenes, sino que simplemente "organizamos" nuestros código utilizando unas etiquetas.
Una etiqueta es basicamente algo como lo siguiente:
<etiqueta> parte del texto a que afecta la etiqueta </etiqueta>

Como podeis ver en realidad se trata de 2 etiquetas: una que indica el comienzo y otra que marca el final, así que todo lo que vaya entre una y otra se vera afectado por la etiqueta.
Además yo marcare siempre en negrita la etiqueta y dejaré como texto normal la parte "modificable" para que os resulte mas fácil identificar que es exactamente lo que debéis cambiar en cada caso concreto.

Otra cosa que es interesante que sepáis es que a un solo texto se le pueden aplicar varias etiquetas, basta con meter unas "dentro" de otras como si de cajitas se tratase (cerrando primero la ultima en abrirse).
<etiqueta1><etiqueta2> texto </etiqueta2></etiqueta1>

Pero no es necesario que recordeis estas (ni otras) cosas, basta con que entendais cual es el funcionamiento basico de estas etiquetas y os paseis por esta guian cada vez que necesiteis consultar algo. Que para eso está.

3. ¿Cómo pongo HTML en mi anuncio?

Muy fácil.
En la descripcion de tu anuncio tienes dos opciones: "Estándar" y "HTML". Selecciona esta última y ya estás trabajando en HTML.
Ten en cuenta que puedes pasar de un tipo a otro en cualquier momento, es decir, que puedes hacer cosas en "Estándar" si te resulta mas sencillo y luego pasarte a HTML, y viceversa.

En realidad, la vista "Estándar" lo que hace es pasar a HTML ciertas órdenes muy utilizadas (negrita, cursiva, etc.) de forma automática, así que en general puede ser práctico cuando se comienza en eBay.
Además, nos va a valer como ejemplo para este tema preliminar.

4. ¿Qué hace la vista "Estándar"?

En una nueva ventana, abre el apartado "Vender" de eBay y selecciona una categoría cualquiera. Vamos a ver un ejemplo sencillo (no aceptes al final para no crear el anuncio).

En "Estándar" vamos a introducir un texto en cada una de las tres opciones que nos da eBay (negrita, cursiva y subrallado) utilizando los botones N, I y S que aparecen en esta pestaña.
Acto seguido, pulsad en la vista "HTML". Observareis que todo ha sido pasado a HTML.

El problema es que cuando el sistema de la vista "Estandar" crea el codigo HTML lo hace de un modo bastante enrevesado, así que nosotros vamos a comenzar desde el principio utilizando nuestro propio código HTML.
A partir de ahora y en los siguientes capitulos de esta guía, utilizaremos siempre la vista "HTML" y aprenderemos desde cero a crear anuncios personalizados.

(2) Características básicas

1. Lo mismo, pero mejor

La vista "Estándar" ya nos permitia hacer unas pocas cosas en lo que respecta al estilo de nuesto anuncio, como modificar el tipo y tamaño de texto, el color, añadir negrita, cursiva o subrallado, etc.
Ahora vamos a aprender a hacer exactamente lo mismo pero en la vista "HTML".

¿Para qué, si ya sabiamos hacerlo en "Estandar"?
Porque si pretendéis hacer un anuncio profesional tendreis que trabajar en HTML, y estar pasando continuamente de una vista a la otra porque hay cosas que solo sabeis hacer en una y cosas que solo sabeis hacer en otra es un autentico lío.

2. Organizar nuestros párrafos.

Lo primero que vamos a aprender es a crear párrafos.
Cada párrafo se separa del siguiente una línea completa, lo que permite leer mucho mejor el texto.
Es muy importante que no amontoneis la informacion de vuestro anuncio como cuadre, sino que la hagais fácil de leer, de modo que el comprador la vea toda de un solo vistazo.
Por eso os sugiero que creeis un parrafo para cada dato de intereis que ofrezcais, aunque eso implique que cada línea sea un parrafo distinto.

Cada parrafo comienza con la etiqueta <p> y termina con la etiqueta </p>.

Cread un anuncio de prueba (no acepteis al final, solo es para ver como queda), poned un texto como el siguiente y pulsad "Vista previa" para ver el efecto que causa:

 <p>Nombre del artículo</p>
 <p>Característica 1</p>
 <p>Característica 2</p>
 <p>Característica 3</p>
 <p>Otras características menos relevantes</p>

Mucho mejor que si estuviese todo amontonado, ¿verdad?

Si quereis dar espacio extra entre un párrafo y otro, utilizad la etiqueta <br />.
Eso creará una nueva linea en blanco, y podemos añadir tantas como queramos seguidas.

¡Fijaos en que las etiqueta que acaban en /> no necesitan otra etiqueta que las cierre!

Bueno, pues en nuestro anuncio ejemplo, vamos a añadir espacio extra despues del titulo, porque queremos distanciarlo mas para que se vea mejor.
Además, en las características que consideramos de poca importancia, podemos poner varias en distintas líneas pero sin crear nuevos párrafos, ya que no queremos llamar tanto la atención del posible comprador sobre esos detalles.

 <p>Nombre del artículo</p>
 <br />
 <p>Característica 1</p>
 <p>Característica 2</p>
 <p>Característica 3</p>
 <p>Otras características menos relevantes.
 <br />Línea adicional para características poco relevantes.
 </p>

¿Lo habeis probado en vuestro anuncio de prueba? ¿Queda bien?
Bueno, pues ahora continuaremos dandole un toque de estilo, para que el texto no sea todo igual.

3. Negrita, cursiva y subrayado

De un modo totalmente análogo, podemos dar estes estilos a nuestro texto, utilizando las siguientes etiquetas:

NEGRITA: <b> </b>
CURSIVA: <i> </i>
SUBRAYADO: <u> </u>

Si sabeis un poco de inglés os resultarán fáciles de recordar (bold, italic y underline). Si no, tened a mano esta guía para echarles un vistazo n___~

Estos estilos os servirán para realzar vuestro texto si sabeis utilizarlos bien, pero tened cuidado en no recargar el anuncio excesivamente: si poneis efectos por todos los lados, lo único que conseguireis es que el comprador no sepa donde centrar su atención.
Reforzad los aspectos únicos de vuestro artículo, con un criterio similar al que utilizais a la hora de escoger las palabras que lo describirán en el título del anuncio. Es decir, las que pueden convencer al comprador de que es eso y no otra cosa la que él quiere comprar.

Por ejemplo, vamos a vender ese reproductor mp4 que nos regalaron en Navidades pero que no nos gusta el modelo.
¿Qué queremos resaltar? Pues que es un mp4 y sobre todo que está casi nuevo. Así que incidiremos en esos dos datos, aunque también incluyamos un montón de información técnica que es relevante para la venta de dicho artículo pero no necesitamos destacar.

 <p><b>Reproductor MP4</b></p>
 <br />
 <p>Estado: <u>Como nuevo</u></p>
 <p>Funciona perfectamente. Revisado.</p>
 <p></p>
 <p>Detalles técnicos.
 <br />Más detalles técnicos.
 </p>

4. Color del texto

La negrita suele funcionar muy bien a la hora de resaltar el texto, y el subrayado da una imagen formal, pero probablemente lo que más llama la atención es una adecuada selección de colores.
De nuevo, os adviertos que seais cuidadosos con este recurso: un abuso de colores, o una mezcla inadecuada pueden estropear un anuncio (hay algunos que hacen daño a la vista... literalmente). Pero con mesura y un poco de buen gusto, son un modo fantástico de realzar el texto y hacerlo mucho más llamativo.

Mucha gente prefiere CSS para los atributos de color (yo, sin ir más lejos) pero por simplicidad os explicaré el código HTML correspondiente. Por eso de no complicaros.

COLOR: <font color="codigo_color"> </font>

El código de color puede ser de dos tipos: el nombre del color en inglés (red, green, pink, etc.) o bien un código hexadecimal.
Los códigos hexadecimales comienzan con un símbolo # y se componen de 6 cifras (2 para el rojo, 2 para el verde y 2 para el azul) que reprensentan la mezcla de esos tres colores básicos.
Como aprenderse todo eso puede ser un lío, he creado una tabla externa en la que podeis encontrar los más utilizados.

www(punto)freewebs(punto)com/nipponkara/eBay/colores(punto)htm

Como en las guías de eBay no está permitido colocar enlaces externos he tenido que hacer un pequeño "chanchullo", así que tendreis que copiar el enlace en una ventana de vuestro navegador y sustituir las partes donde pone (punto) por un punto propiamente dicho.
Lamento las molestias, pero es todo lo que he podido hacer.

5. Tamaño del texto

Y finalmente, otro de los apartados básicos es el tamaño del texto. Porque, como es evidente, un texto de gran tamaño llama más la atención que uno menudito que apenas se ve.
Así que lo que haremos será resaltar nuestro texto, haciendo que las partes más relevantes vayan en tamaños mayores, y las menos importantes en letra más pequeña.

TAMAÑO: <font size="numero"> </font>

El número que indica el tamaño puede indicarse en píxeles (en ese caso pondremos 12px, por ejemplo) o en punto (y entonces pondremos 7pt, por ejemplo). La elección es indistinta.
Para ver si un texto es lo suficientemente grande o pequeño, lo mejor es ir probando poco a poco y visualizando nuestro borrador. Así sabemos en todo momento como quedará nuestro anuncio.

Además, si os fijais, el codigo del color y del tamaño se parecen: en realidad ambos son atributos de la misma etiqueta.
Eso quiere decir que si queremos modificar ambas características solo necesitamos utilizar una etiqueta. ¿Cómo?

COLOR y TAMAÑO: <font color="codigo_color" size="numero"> </font>

Y no olvideis que las etiquetas pueden anidarse (meterse unas dentro de otras), así que podemos, por ejemplo, hacer que nuestro título tenga un texto grande, rojo y en negrita. ¿Qué mejor para llamar la atención?

 <p><font color="red" size="20px"><b>Reproductor MP4</b></font></p>
 <br />
 <p>Estado: <u>Como nuevo</u></p>
 <p>Funciona perfectamente. Revisado.</p>
 <p></p>
 <p>Detalles técnicos.
 <br />Más detalles técnicos.
 </p>

 (3) Imágenes

1. Imagen básica

Bueno, ya hemos incluido algo de texto en nuestro anuncio. Como ya hemos dicho, la descripción es fundamental.
Pero, seamos realistas, los artículos entran por la vista. O como se suele decir, una imagen vale más que cien palabras.
Así que encendamos nuestros scanners, nuestras cámaras y dispongámonos a obtener unas cuantas imágenes que muestren nuestro artículo de forma fidedigna y atractiva.

El problema es que eBay nos cobrará por poner más de una imagen... a no ser que encontremos un modo de colocarlas en nuestra descripción, claro.
Y eso, por supuesto, es lo que haremos.

Antes de dar la etiqueta que se utilizaría para colocar una imagen, quisiera hacer un comentario acerca de donde alojarla.
En general los alojamientos (es decir, las compañías que te dan espacio para tu web) no permiten que utilices imágenes allí guardadas desde otro dominio (es decir, que no podrás usarlas en eBay). Si lo intentases solo verias una imagen de error.
Pero hay ciertos alojamientos que sí lo permiten, e incluso algunos que se dedican exclusivamente a la tarea de almacenar imágenes, así que bastara con que utilices alguno de ellos. Yo suelo recomendar PhotoBucket ( photobuket(punto)com ) porque es especialmente sencillo de utilizar, pero hay muchos más.

Y una vez aclarado ese detallito, por supuesto aqui va el codigo de la etiqueta "img".

IMAGEN: <img src="enlace" />

Obviamente en lugar de la palabra enlace tendrás que utilizar la dirección que te ofrece tu servidor web. Y no, no vale utilizar la dirección que tiene en tu disco duro, ya que así solo la podrás ver tú (y no los vendedores, que es lo que interesa).

Eso sí, os sugiero que si quereis hacer un anuncio de aspecto profesional seais cuidadosos a la hora de seleccionar vuestras imagenes.
Si os excedeis es posible que el comprador no sepa donde centrar su atención, así que es preferible algo de mesura.
Sobre todo evitad las típicas animaciones graciositas (que son lentas a la hora de cargar y generalmente inútiles) porque su uso suele resultar contraproducente.

2. Dónde y cómo colocar una imagen

Las imágenes son a todos los efectos como texto, pero dado su tamaño si las colocamos en medio de una frase el resultado obtenido será un tanto extraño. Por eso siempre se sitúan de forma separada.
Más adelante aprenderemos métodos un poco más sofisticados para hacerlos, pero de momento podemos contentarnos con colocar las imágenes en un párrafo aparte.

<p><img src="enlace1" /> <img src="enlace2" /> <img src="enlace3" /></p>

Ese es un ejemplo de código en que 3 imágenes se sitúan en la misma línea. Puesto al principio de nuestro anuncio puede resultar efectivo.
Si tuviésemos más imágenes podríamos incluirlas en el mismo párrafo o (probablemente mejor) crear más párrafos para que se apreciasen con más claridad.

3. Tamaño de la imagen

Vale, muy bien, hemos puesto la imagen que deseabamos en nuestro anuncio. Pero resulta que es demasiado grande y no queda bien. ¿Qué hacemos?

Una de las opciones es utilizar un programa de retoque fotográfico y modificarla.
Pero como somos algo perezosillos y además esto es un tutorial de HTML, vamos a dejarla como está y hacer que simplemente se vea de otro tamaño.
Para eso utilizaremos los atributos width (ancho) y height (alto) dentro de la etiqueta de imagen.

IMAGEN CON TAMAÑO: <img src="enlace" width="ancho" height="alto" />

Tanto el ancho como el alto se especificarán con un número, que indica los píxeles con los que se verá la imagen. Todo es cosa de ir probando qué tamaño es el más apropiado.

Es importante que sepais que no es necesario especificar ambos; podeis utilizar solo uno de los dos atributos y el otro se ajustará automaticamente para que mantenga la proporción con respecto a la imagen original.
Tenedlo en cuenta porque os resultará tremendamente práctico a la hora de crear vuestros anuncios, ya que lo normal es que para ajustar la imagen al texto solo os preocupe una de sus dimensiones y al mantener la proporción queda mucho más natural.

(4) Enlaces

1. Enlace básico

Ahora empieza lo realmente util.
Cambiar el color o poner negrita hace que un anuncio resulte atractivo, añadir imágenes sirve además para ofrecer información fiable acerca del artículo, pero el enlazar a páginas externas nos permitirá todo un mundo de posibilidades.
Por ejemplo, puedes poner un enlace a la página oficial de los fabricantes de tu artículo. O a una crítica positiva del mismo. O crear tu propia página con información adicional. O a tu tienda, si es que la tienes. ¡Y muchas cosas más!

La etiqueta para los enlaces es "a" (de "anchor", ancla en inglés) y utilizaremos un atributo llamado "href" (no, Shreck no :D) para indicarle cual es la direccion de la pagina que queremos que abra.
El codigo general es el siguiente:

ENLACE: <a href="enlace"> texto </a>

El texto puede ser el que tu quieras, y si, puede llevar formato de color, tamaño, etc.
Recordad que los enlaces suelen empezar por "http://" ya que si los poneis empezando por "www." no funcionará.

Como ejemplo, un botón.

    <p><font color="red" size="20px"><b>Reproductor MP4</b></font></p>
    <br />
    <p>Estado: <u>Como nuevo</u></p>
    <p>Funciona perfectamente. Revisado.</p>
    <p></p>
    <p>Detalles técnicos.
    <br /><a href="www.elcorteingles.es/informatica/">Buscar en El Corte Ingles</a>
    </p>

2. Abrir en otra ventana

Pero, claro, no queremos que el posible comprador se vaya a ver otras páginas.
¿Por qué? Bueno, porque si sale de nuestra subasta y no la está siguiendo es posible que perdamos ese comprador, que finalmente adquiera el artículo en otro sitio.

Para evitarlo lo que haremos es forzar a que el enlace que hemos creado se abra en una ventana distinta.
De ese modo mantendrá abierta nuestra subasta en eBay al mismo tiempo que abre una nueva en otro sitio.

Para ello utilizaremos el atributo "target" de la etiqueta "a". Este atributo define en que ventana se abrira el enlace.
Nosotros le daremos el valor _blank (aunque pueden usarse otros) para que nos abra cada enlace en una ventana distinta.

ENLACE: <a href="enlace" target="_blank" > texto </a>

3. Modificar el aspecto del enlace

Bueno, hasta el momento hemos personalizado nuestro texto con colores, negrita, etc., pero ¿y nuestros enlaces? ¿Podemos hacer lo mismo?
La respuesta, obviamente, es sí.

Aunque en estos casos se aprecia enormemente la utilidad del CSS, por sencillez vamos a hacerlo con HTML. Así evitas tener que aprender un montón de códigos nuevos.
Basicamente lo que tienes que hacer es introducir tu código de estilo dentro de la etiqueta del enlace.

Por ejemplo, aquí lo hago para personalizar el color:

    <a href="www.elcorteingles.es/informatica/"><font color="green">Buscar en El Corte Ingles</font></a>

Pero también podría hacerlo con el tamaño, añadir cursiva, etc.
Simplemente pon el código que abre el enlace, luego el texto personalizado con sus respectivas etiquetas, y finalmente cierra el enlace.
Así de sencillo.

4. Una imagen clickable

Exactamente lo mismo que hemos con texto personalizado podemos hacerlo con una imagen.
¿A qué me refiero? Pues a crear imágenes que enlazan a una página.

ENLACE e IMAGEN: <a href="enlace" target="_blank" ><img src="enlace" width="ancho" height="alto" /></a>

Puedes pensar que no tiene especial interés, ya que al fin y al cabo es lo mismo que enlazar a partir de texto, pero en ocasiones se le encuentra una utilidad muy particular: la posibilidad de ver ampliadas las imágnes de tu anuncio.
Imagínate que tienes muchas fotos de tu artículo, pero si las pones todas te ocupan demasiado espacio en tu anuncio y la página tarda en cargar. Lo que haces es hacer visibles con IMG unas versiones pequeñas de dichas imágenes (modificada con cualquier programa de edición) y enlazar a una versión grande que también colgarás en la red.
Basta que indiques en tu anuncio que al hacer click se ampliarán, y así los posibles compradores tendrán acceso a todas esas fotos de un modo cómodo y práctico.

NOTA: Esta guía todavía esta en construcción.
Proximamente será ampliada con nuevos temas.

RESUMEN

PARRAFO:  <p> </p>
LÍNEA:  <br />

NEGRITA: <b> </b>
CURSIVA: <i> </i>
SUBRAYADO: <u> </u>

COLOR DE TEXTO: <font color="color"> </font>
TAMAÑO: <font size="numero"> </font>
COLOR y TAMAÑO: <font color="codigo_color" size="numero"> </font>

IMAGEN: <img src="enlace" width="ancho" height="alto" />

ENLACE: <a href="enlace" target="_blank" > texto </a>
ENLACE e IMAGEN: <a href="enlace" target="_blank" ><img src="enlace" width="ancho" height="alto" /></a>

 |---> Lista de colores: www(punto)freewebs(punto)com/nipponkara/eBay/colores(punto)htm