Diablo 2 Latino :: Ver tema - Mini tutorial HTML (listas de comercio)

Diablo 2 Latino

Sobre la web - Mini tutorial HTML (listas de comercio)

Bigboss - 27 May, 2006 - 06:49 PM
Asunto: Mini tutorial HTML (listas de comercio)

Mini Tutorial HTML

Ya que hemos añadido la sección de la lista de trade en el perfil y ésta no admite bbcode, he pensado en hacer este pequeño tutorial sobre cómo dar forma a tus listas de trade, ya sea en el tema de los colores, el tamaño de la letra, subrayados, negritas, etc.

Este pequeño documento tiene 2 partes. La primera de ellas se basa en la utilización de la aplicación de microsoft office llamada frontpage. Si no te quieres complicar la vida y tener que aprender nuevos comandos es la solución más sencilla, aunque será conveniente que, si usas este método, guardes tu lista siempre en tu pc y la modifiques en el archivo original, para después copiarla.
Si crees que aprenderte unas cuantas órdenes en html no resultará un problema para ti te recomiendo usar el segundo método, que consiste en la utilización del hueco destinado a la lista de trade, añadiendo las órdenes necesarias para que el texto tome la forma que quieras, tal y como se hace habitualmente en los foros de la web con el bbcode.

1. Html basado en frontpage.

Esta forma, como ya he indicado antes, es la que más conviene utilizar a los menos "manitas" dentro de la informática, o tienen peor memoria.
Para hacerlo lo más sencillo posible, colgaré unas screens que faciliten el uso de este método a los usuarios.

Lo primero que debemos hacer es ejecutar la aplicación en cuestión y pinchar el botón de nueva página, tal y como se indica en el siguiente dibujo.

Tras esto nos encontraremos con una página en la que escribir un texto, en la que podrás crearlo y modificarlo como si te encontrases en word, open office, o cualquier otro procesador de textos.
Como ejemplo vamos a poner un pequeño texto que he creado para el tutorial, aunque aquí deberías poner tu lista de trade, atendiendo a la clasificación que cada uno crea conveniente (por mulas, por tipos de objetos, etc.), la modalidad, el reino y cualquier otra información que consideres de utilidad. Veamos como puede quedar algo con modificaciones de color, tamaño y subrayado.

Ya tenemos nuestro texto escrito y modificado a nuestro gusto, pero... cómo hacemos para que se muestre de esa forma en la web?
Pues es muy sencillo. Para ello comencemos por pulsar la pestaña que hay en la parte de abajo llamada html, indicada en el siguiente dibujo.

Ahora te encuentras con muchos códigos que indican, desde la procedencia de la página, el programa con el que se han hecho, el título, y algunas cosas más.
De esto en realidad sólo debemos hacerle caso a lo que es realmente el texto, el "cuerpo" del archivo que se encuentra entre códigos "body". Se trata de la parte rodeada en la siguiente foto.

Ahora tan solo tenemos que copiar esa parte y pegarla en el cuadro de la lista de trade. De esa forma la tendremos lista.

2. Html basado en cualquier texto

Para organizar nuestra lista de trade de este modo, lo único que necesitamos es saber unas cuantas órdenes de html y aplicarlas del mismo modo que el bbcode

Código:

<u>texto</u> El texto estará subrayado.

<font color="orange" size="3">texto</font> El texto será mostrado en color naranja (acepta varios colores poniéndoles los nombres en inglés) y aparecerá a un tamaño 3 (equivalente a 12 puntos).
*Tras probar este comando, he de advertir que la web, en los perfiles de usuario y, por consiguiente, en las listas de trade, no acepta cambios en el tamaño de la letra.

<i>texto</i> El texto será mostrado en cursiva.

<b>texto</b> El texto será mostrado en negrita.

*Las órdenes relacionadas con la fuente (aquí sólo he mostrado las más básicas) van juntas, no es necesario abrir más de una orden si deseas darlas, tal y como se ha mostrado aquí.

Aquí están sólo las órdenes más sencillas, suficientes para hacer un texto que no se haga difícil de leer y bien organizado, diferenciando las distintas partes del mismo.
Como es de suponer, el lenguaje html dispone de muchísimas más órdenes que permiten modificar de muy diversas formas el texto, pero aquí no son necesarios y, en la mayoría de los casos, sólo complicarían la vida al usuario.
Si deseáis saber más sobre html podéis encontrar cientos de tutoriales buscando simplemente en google.
Si creéis que hay órdenes realmente necesarias para el fin que buscamos que no se encuentren recogidas entre las anteriormente citadas, podéis comentarlo en este post para que se incluyan en la lista.

Espero que este mini-tutorial que he elaborado ayude a algún usuario de esta web.

Un saludo.

Holyshark - 27 May, 2006 - 07:37 PM
Asunto: Mini tutorial HTML (listas de comercio)

Código:

<table border=2>
//* Para crear una tabla. El Border=2 es para variar el grosor del borde.
<tr>
//* Creas una fila nueva
<td>
//*Creas una columna en la fila
TEXTO
</td>
//* Cierras la celda
<td>
//* Nueva columna en la fila
TEXTO2
</td>
</tr>
//* Cierras la fila
</tr>
//* Nueva fila. Vuelta a empezar
.
.
.
</tr>
//* Cierras la ultima fila
</table>
//* Cierras la tabla

Ese es el modo HTML para hacer tablas. Si vais a meter MUCHOS datos usad Frontpage, en la barrita de arriba dais a Tabla y la creais. Luego escribis en ella como lo hariais en Word.

EJEMPLO:
<table>
<tr>
<td>Item</td>
<td>Precio</td>
</tr>
<tr>
<td>SoJ</td>
<td>6 ists</td>
</tr>
<tr>
<td>Zakarum</td>
<td>1 Um</td>
</tr>
</table>

EDITO: Ejemplo HTML en http://holyshark.webcindario.com/ejemplo.html
Como podreis entender, la lista puede estar en modo de texto normal, pero asi queda elegante. Podeis meter dos items por fila, por ejemplo, como se ve en la segunda tabla.

senaaaa - 27 May, 2006 - 08:14 PM
Asunto: Mini tutorial HTML (listas de comercio)

La lista de comercio soporta todo el lenguaje HTML? Con esto me refiero a si puedo crear una mini web ahi dentro? xDD

Bigboss - 27 May, 2006 - 08:27 PM
Asunto: Mini tutorial HTML (listas de comercio)

Pues, por lo que acabo de probar no, no lo soporta todo. No hace caso de los cambios de letra (lo acabo de añadir en este minituto) y las tablas las crea, pero se hace un lío. El mayor problema es que crea mucho espacio en blanco antes.

Un saludo.

senaaaa - 27 May, 2006 - 09:34 PM
Asunto: Mini tutorial HTML (listas de comercio)

Valla timo xDD, pues q me metan el bbcode porq si el html no rula entero... xDD

Saludos

ciklo - 27 May, 2006 - 11:34 PM
Asunto: Mini tutorial HTML (listas de comercio)

Buen tuto.
Gracias.

matnez25 - 27 May, 2006 - 11:44 PM
Asunto: Mini tutorial HTML (listas de comercio)

Buen tutorial Bigboss, a ver si mas tarde lo pongo a prueba ^_^

[K]NiGhT - 28 May, 2006 - 12:33 AM
Asunto: Re: Mini tutorial HTML (listas de comercio)

senaaaa escribió:

La lista de comercio soporta todo el lenguaje HTML? Con esto me refiero a si puedo crear una mini web ahi dentro? xDD

Evidentemente, y por motivos de seguridad, no todas las etiquetas HTML están aceptadas. Creo que con poner alguna negrita y algún subrayado, basta xD

senaaaa - 28 May, 2006 - 01:06 AM
Asunto: Re: Mini tutorial HTML (listas de comercio)

Por motivos de seguridad??