El HTML, ese misterioso mundo

Tema: El HTML, ese misterioso mundo Sáb Dic 03, 2011 2:42 am

TUTORIAL: GENERACIÓN PASO A PASO DEL HTML DE UNA FICHA

NOTA: tutorial hecho con Firefox, puede que los códigos no queden igual en los demás navegadores

Voy a comenzar a poner el código más básico que serviría para una ficha, y después la iré explicando paso a paso.

Por ejemplo, resulta que quiero hacer el HTML para la siguiente ficha:

(por cierto es de uso libre)

Spoiler:

Link: https://2img.net/h/i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png

1º Comenzaría por abrir un Bloc de Notas o Wordpad para hacer ahí el diseño del boceto del HTML

2º Una vez con ello abierto, pegaría los dos códigos principales que me servirán para colocar la imagen en el fondo

Código:: <table style="WIDTH: 750px; HEIGHT: 1925px" background="URL de la IMAGEN">

<tbody>

<tr>

<td valign="top" align="center">

----

</td></tr></tbody></table></center>

3º Modifico los parámetros de WIDTH (ancho) y HEIGHT (altura) por los de la ficha original y pongo el link directo de la imagen de la ficha donde dice URL de la IMAGEN

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

----

</td></tr></tbody></table></center>

4º Una vez colocado esto pasamos a rellenar la zona de "----" con los códigos de los scrollboxes y los "enters" que en el idioma html son

Código Scrollboxes:

Código:: <div style="TEXT-ALIGN: justify; WIDTH: 522px; FLOAT: left;
HEIGHT: 225px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

El truco de Escribe aquí

sirve para ver qué longitud y amplitud tendrá el scrollbox, si no sale
la barra lateral de desplazamiento es porque el scroll es más largo que
la cantidad de Escribe aquí
que hay. Si añadís más os acabará saliendo.

Por su puesto, también habría que modificar aquí los parámetros del
WIDTH y HEIGHT. Y también el FLOAT y el MARGIN (para que os sea más
fácil o las dos siempre right o las dos siempre left, incluso middle)

La zona de los "----" se rellenará con tantos scrollboxes como apartados
tenga la ficha y tantos enters como espacios tenga en cada apartado. Es
decir, en la imagen aparecen 3 niveles para los enters y 5 recuadros
para los scrollboxes.

Quedaría así:

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: middle; HEIGHT:
225px; MARGIN-middle: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT: 305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT: 305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT: 305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: right; HEIGHT:
225px; MARGIN-right: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

</td></tr></tbody></table></center>

5º Una vez hecho este boceto (que tendrá sus fallos) nos dirigimos a nuestra ficha, le damos a "Cambiar

MODO HTML", pegamos el código y le damos a "Modo Normal"

Si lo pegáis en vuestra ficha veréis que unas cosas están muy arriba y otras se han quedado abajo.

Este es el paso en el que nos centraremos en la edición ya dentro del
MODO HMTL de nuestra ficha e iremos cambiando al modo normal para ver
cómo se están colocando los scrollboxes y ver si su tamaño es el
adecuado.

5.1 Vamos a empezar modificando el primer scroll. Volvemos a modo
HTML y añadimos más
hasta que se quede a la altura del
cuadro.

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: middle; HEIGHT:
225px; MARGIN-middle: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: right; HEIGHT:
225px; MARGIN-right: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

</td></tr></tbody></table>

Aseguraros de que estáis trabajando sobre el apartado nº 1 (sobre mi)
para que luego no haya más jaleo en el código. Por eso es importante
diferenciarlos y no apretujarlos todos.

5.2 Como véis ahora está demasiado hacia la izquierda, habría que meterlo más hacia el centro y añadir más Escribe aquí
para ver la longitud del scrollbox

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

 

<div style="TEXT-ALIGN: justify; WIDTH: 300px; FLOAT: left; HEIGHT:
150px; MARGIN-left: 310px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
305px; MARGIN-LEFT: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: right; HEIGHT:
225px; MARGIN-right: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

</td></tr></tbody></table>

Si os fijáis he cambiado la anchura y altura del scroll para que encaje en el rectángulo y he modificado el margin de middle a left, y en el margin left le he dado un margen de 310px

5.3 Ahora vayamos con el siguiente grupo. Ponemos un

para que se baje una línea más y las letras no peguen con el marco del
rectángulo.

Encontramos un conjunto de 3 recuadros, falta por poner más Escribe aquí
para comprobar el largo de los scroll, así que añadimos más.

De paso, aprovechamos para quitarles anchura margen, WIDTH y MARGIN
para que entren los 3 en la misma fila y cuando veamos que el largo es
excesivo modificamos el HEIGHT (ir probando poco a poco hasta que quede a
vuestro gusto)

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

 

<div style="TEXT-ALIGN: justify; WIDTH: 300px; FLOAT: left; HEIGHT:
150px; MARGIN-left: 310px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
220px; MARGIN-LEFT: 200px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
220px; MARGIN-LEFT: 70px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: right; HEIGHT:
220px; MARGIN-right: 60px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 500px; FLOAT: right; HEIGHT:
225px; MARGIN-right: 150px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

</td></tr></tbody></table>

Bien, si echáis un vistazo, veréis que el ancho he decidido mantenerlo.

Like a Star @ heaven

El margen en los tres scroll lo he modificado, y cada uno tiene
distintas medidas cosa que es lógica. Porque si para el primero necesito
200px y su ancho es de 120px, si al siguiente le pongo lo mismo, se me
irá muy lejos, porque es como si esos px se sumaran, por lo que
desplazarían el segundo scroll 320px.

Like a Star @ heaven

En el último scroll, he cambiado de left a right, y tiene 60px de
margen ¿porqué? sencillo: porque esta vez contamos los px a partir del
lado derecho y no del izquierdo, como no tiene un scroll más a la
derecha, se parte de 0px.

Like a Star @ heaven

Al añadir más Escribe aquí
he podido ver cuánto eran de largo y he acortado su altura, HEIGHT

5.4 Finalizamos ya con el último scrollbox en la tercera fila. En el
código anterior este scroll se ha quedado demasiado pegado a los
recuadros de la segunda fila.

Agregamos más
en la fila entre los scrollboxes de la segunda y la tercera fila.

Like a Star @ heaven

Añadimos más Escribe aquí
para calcular su ancho WIDTH y su alto HEIGHT. Hacemos los cambios necesarios para que quede perfecto.

Like a Star @ heaven

Modificamos el MARGIN, como está a la derecha donde no tenemos dibujo, ponemos menos px

Código:: <table style="WIDTH: 760px; HEIGHT: 1985px"
background="http://i1216.photobucket.com/albums/dd366/electra55/Caballow/grecia.png">

<tbody>

<tr>

<td valign="top" align="center">

 

<div style="TEXT-ALIGN: justify; WIDTH: 300px; FLOAT: left; HEIGHT:
150px; MARGIN-left: 310px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
220px; MARGIN-LEFT: 200px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: left; HEIGHT:
220px; MARGIN-LEFT: 70px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

<div style="TEXT-ALIGN: justify; WIDTH: 120px; FLOAT: right; HEIGHT:
220px; MARGIN-right: 60px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí </div>

 

<div style="TEXT-ALIGN: justify; WIDTH: 300px; FLOAT: right; HEIGHT:
155px; MARGIN-right: 105px; OVERFLOW: auto"> Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí Escribe
aquí Escribe aquí Escribe aquí </div>

</td></tr></tbody></table>

Y esto es todo, espero que os pueda ser de ayuda. Para que la
información esté más completa os aconsejo pasaros por el tutorial de
Mcviales que es con el que yo aprendí
"Cómo
generar el código HTML de una ficha"

Cualquier duda podéis consultármela.

Un saludo!

Tema: Re: El HTML, ese misterioso mundo Sáb Dic 03, 2011 2:48 am

Perdonad pero no sé porqué se cortan los códigos -.-
Mañana os pongo un enlace del bloc de notas donde tengo todos los pasos

EDITO:

Aquí os dejo un PDF de este mismo tutorial para que veáis bien los códigos:

TUTORIAL

Tema: Re: El HTML, ese misterioso mundo Jue Feb 02, 2012 3:09 pm

Ayer lo puse en mi ficha y no sabia como avisarte porque no me acordaba de mi cuenta, puedo usarlo? me encanta la imagen y todo! si no puedo usarlo avisame y lo quito, muchas gracias! genial tu tutorial!

Tema: Re: El HTML, ese misterioso mundo Jue Feb 02, 2012 5:59 pm

Alywe escribió:: Perdonad pero no sé porqué se cortan los códigos -.-
Mañana os pongo un enlace del bloc de notas donde tengo todos los pasos

EDITO:

Aquí os dejo un PDF de este mismo tutorial para que veáis bien los códigos:

Tutorial

Megaupload ya no furula

Tema: Re: El HTML, ese misterioso mundo Miér Feb 08, 2012 5:44 pm

Yap, es que apenas tengo tiempo de subir todos los archivos a mediafire, ahora lo edito.

Y tranquila Mine, puedes usarla Smile

EDITO

Ya se puede descargar!

Tema: Re: El HTML, ese misterioso mundo Dom Mayo 20, 2012 10:11 am

yo tengo un problema y es que si pongo una imagen de fondo me sale repetida como puedo hacer para que me salga 1 vez?

Tema: Re: El HTML, ese misterioso mundo Miér Jun 06, 2012 5:20 pm

Lo que le pasa a Angy2001 me ha pasado a mi, creo que lo mejor es reiniciar entera la presentación.

Tema: Re: El HTML, ese misterioso mundo Jue Jun 07, 2012 10:18 am

Eso es porque habeis puesto una medida ancho y largo que es mayor que la imagen que habeis subido.
Comprobar que cuando hayais subido la imagen este "no cambiar tamaño" porque si es muy grande a veces los cargadores las ponen mas pequeñas