Caballow-Sos
Bienvenido al Foro de Caballow Sos Donde encontraras todo para pasarlo bien y ayudarte en el juego de Caballow. Registrate ahora!



 
ÍndicePortalCalendarioFAQBuscarMiembrosGrupos de UsuariosRegistrarseConectarse

Comparte | 
 

 El HTML, ese misterioso mundo

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
Alywe
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 181
Apodo Caballow : Alywe
Fecha de inscripción : 01/09/2011

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



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

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>



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://illiweb.com/fa/pbucket.gif">


<tbody>


<tr>


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





----





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



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í<br>Escribe aquí<br>Escribe aquí<br>Escribe
aquí<br>Escribe aquí<br>Escribe aquí<br>Escribe
aquí<br></div>



Exclamation 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://illiweb.com/fa/pbucket.gif">



<tbody>



<tr>



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





<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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







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



Una vez hecho este boceto (que tendrá sus fallos) nos dirigimos a nuestra ficha, le damos a "Cambiar Arrow 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://illiweb.com/fa/pbucket.gif">

<tbody>

<tr>

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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



Exclamation
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://illiweb.com/fa/pbucket.gif">

<tbody>

<tr>

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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



Like a Star @ heaven 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.




Like a Star @ heaven 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://illiweb.com/fa/pbucket.gif">

<tbody>

<tr>

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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



Like a Star @ heaven 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.


Like a Star @ heaven 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://illiweb.com/fa/pbucket.gif">

<tbody>

<tr>

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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



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



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



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



<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



<div style="TEXT-ALIGN: justify; WIDTH: 300px; FLOAT: right; HEIGHT:
155px; MARGIN-right: 105px; OVERFLOW: auto"> Escribe
aquí<br>Escribe aquí<br>Escribe aquí<br>Escribe
aquí<br>Escribe aquí<br>Escribe aquí<br>Escribe
aquí<br>Escribe aquí<br>Escribe aquí<br>Escribe
aquí<br>Escribe aquí<br>Escribe aquí<br></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!

________________________________________________________________
Volver arriba Ir abajo
Alywe
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 181
Apodo Caballow : Alywe
Fecha de inscripción : 01/09/2011

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

________________________________________________________________


Última edición por Alywe el Miér Feb 08, 2012 5:47 pm, editado 1 vez
Volver arriba Ir abajo
Mine Hester
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 14
Apodo Caballow : &#9829;tarita&#9829;
Fecha de inscripción : 30/06/2011

MensajeTema: 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!
Volver arriba Ir abajo
LinuxMicrosoft
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 337
Apodo Caballow : linuxmicrosoft
Fecha de inscripción : 27/07/2011

MensajeTema: 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
Volver arriba Ir abajo
Alywe
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 181
Apodo Caballow : Alywe
Fecha de inscripción : 01/09/2011

MensajeTema: 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!

________________________________________________________________
Volver arriba Ir abajo
Angy2001
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 1
Apodo Caballow : Angy2001
Fecha de inscripción : 14/05/2012

MensajeTema: 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?
Volver arriba Ir abajo
Zatsune Miku
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 2
Apodo Caballow : Zatsune Miku
Fecha de inscripción : 05/06/2012

MensajeTema: 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.
Volver arriba Ir abajo
Alywe
Potrillo Ingenuo
Potrillo Ingenuo
avatar

Cantidad de envíos : 181
Apodo Caballow : Alywe
Fecha de inscripción : 01/09/2011

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

________________________________________________________________
Volver arriba Ir abajo
Contenido patrocinado




MensajeTema: Re: El HTML, ese misterioso mundo   

Volver arriba Ir abajo
 

El HTML, ese misterioso mundo

Ver el tema anterior Ver el tema siguiente Volver arriba 
Página 1 de 1.

Permisos de este foro:No puedes responder a temas en este foro.
Caballow-Sos :: Entorno CaballoW :: SOS Fichas :: Tutoriales-
Cambiar a: