Latest Shouts In The Shoutbox -- View The Shoutbox · Rules -  


  Reply to this topicStart new topicStart Poll

> Codes For Dummies { ! }
Kai Yoshida
 Posted: Jun 8 2016, 02:05 AM
Quote Post
played by Vannya
10 Agosto
Paparazzi
Estudiante
Awards: None
Juzgador
Soltero
Demisexual
Rep: 15 pts
22
age
140
posts
Offline // Hit Wonder //


CODDING BASICS FOR YOU

INTRODUCCIÓN


No todos somos expertos en códigos html o css, tampoco se pretende que sean unos expertos en programación para ser capaces de usar el foro ¡Por eso mismo! Dedicaré éste espacio para explicar las bases y algunos trucos para que puedan sentirse cómodos editando más allá de lo básico.

Aclaración: Todos los códigos utilizados aquí vienen con asteriscos. Eso no quiere decir que los códigos al usarlos tienen que llevar asterisco, al contrario, su código no va a ser tomado si hacen eso. Éstan así sólo para carácter ilustrativo.


BÁSICO


Se debe aclarar que cada vez que se utiliza HTML o CSS, se debe colocar el post dentro del BBCode [*DoHTML], el cual, como verá, ya se encuentra arriba para hacerle click. Si deseas usar, además, plantillas que encontraste fuera del foro, tienes que utilizar el botón de [*NOUSARTEMPLANTE] que permite que la tablilla en cuestión no deforme el foro.

¡En resumen! Tu post al principio debería verse así si vas a utilizar alguna plantilla:

[*NOUSARTEMPLANTE] [*dohtml] TU CONTENIDO AQUÍ [*/*dohtml] [*/*NOUSARTEMPLANTE]

Y así si solamente quieres editar tu texto:

[*dohtml] TU CONTENIDO AQUÍ [*/*dohtml]

Aclaración: Es vital que el código de nousartemplante sea colocado primero y después del dohtml, como se muestra en el ejemplo. De lo contrario podrían haber fallos en la tablilla/post.
Detalle: Al usar el nousartemplante, eviten usar el BBCode [*Align=center/left/right] que ya viene en la parte de arriba, porque ésto puede provocar fallas en sus posts. utilicen el html <*center>, <*left> o <*right> a cambio.


HTML


Ahora que eso fue aclarado, comencemos por los códigos que se usan todos los días como para dar espacio, editar colores más allá de los ofrecidos y demás detalles.


Texto

Ah, lo que más se desea para tener un buen formato en el rol. Les explicaré cómo cambiar su color de font, el tamaño e incluso la fuente del mismo.

Algo que muchos no saben es que cuando se utiliza dohtml, los espacios que dejas con enter no se toman. Por lo tanto, debes utilizar el código <*br> para dejar un pequeño espacio. Un br es un punto y aparte. Dos br's dejan un espacio entre párrafos. Añade tantos como quieras, pero ten en cuenta lo anterior.

El código básico para querer editar el texto se llama "font", eso será lo primero que escriban. Para añadirle el estilo a su font, se agrega el atributo "style", por lo que quedaría como resultado <*font style="" >.

Dentro de las comillas colocaremos lo que queremos editar. Los atributos son: color, font-size, font-style/font-weight y font-family.

color: Colocas el código de color que quieres para tu texto. El código puedes sacarlo de aquí. El código SIEMPRE tiene que ir con un # antes. Por ejemplo: #FFFFFF.

font-size: Éste es el más fácil. Es el tamaño que le quieres colocar a tu texto. Se maneja mediante px y el número del tamaño. Por ejemplo: 20px.

font-style/font-weight: Éstos dos manejan la cursiva y la negrita. Si deseas usar cursiva, utiliza font-style. De querer usar negrita, font-weight. Ejemplo: "font-style: italic; font-weight: bold;".

font-family: Y éste, finalmente, maneja la font que van a utilizar para su texto. Pueden utilizar dos lugares, o éste o éste. El primero es más fácil, pero el segundo puede tener un poco más de variedad. De todas formas, explicaré ambos.

Primera página: Éste sólo tienen que encontrar la font que más les gusta y luego hacer click en el botón del medio el cual, si mantienen el mouse encima, dirá "quick use". Al hacerle click allí los llevará a una nueva página donde bajarán hasta encontrar un cuadro con pestañas y un código adentro. El código que deben utilizar es que se encuentra en Standard y es similar a éste: <*link *href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type*='**text/css'>. Lo copian y van al siguiente paso.

Segunda página: El proceso es el mismo al final, pero tienen que llegar ahí. Luego de haber elegido la font que quieren, le hacen click, Allí dentro encontrarán un botón que dice "Google Web Font". De allí, arriba de todo dice "Open ---- in Google Fonts". Luego, repiten el proceso de arriba.

Ahora ¿Qué hacen con éste código? Lo pegan dentro de su post, obviamente dentro del dohtml. Dónde no importa, pero debe estar ahí ¡Ahora están listos para editar su font!. Utilizando el "font-family", escriben el nombre de su font tal cual está presentado en su página, de lo contrario no lo va a reconocer.

¡De ésta manera, nuestro estilo tomó forma! Les debería quedar algo así:

[*dohtml]

<*link *href='https://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type*='**text/css'>

<**font **style="font-size: 15px; color: #000000; font-weight: bold; font-family: Open Sans;">SU TEXTO IRÁ AQUÍ <**/**font>

[*/*dohtml]

Aclaración: Todo atributo debe ser separado por un punto y coma ( ; ), incluyendo el último atributo.
Detalle: Pueden colocar éste código tantas veces se quiera dentro de su post. Tengan en cuenta que SOLAMENTE lo que va entremedio del <*font><*/*font> es lo que ganará los atributos que editaron.


Imagenes

Tanto como para añadir imágenes en el foro dentro de los códigos o porque simplemente quieren colocar una imagen propia, no está de más aclarar.

Primero y principal, todas sus imágenes tienen que estar subidas en un servidor que sea para eso. Lugares como zerochan no permiten que se linkee una de sus imágenes fuera de sus páginas. Hay miles de alternativas, pero personalmente les recomiendo photobucket o tinypic. La primera pueden hacerse una cuenta y tener todas sus imágenes ahí, la segunda no es necesaria la cuenta pero una vez ya cerraste la página no tienes manera fácil para llegar a esa imagen a menos que tengas el link.

Una vez subidas nuestras imágenes, verán que tienen varios códigos para ofrecer. Dependiendo de la circunstancia, puedes usar alguno de esos.

CÓDIGOS CSS: Es un código CSS cuando notas que viene ya con las palabras "brackground: url( ---- );". Allí sólo tienes que copiar el link directo ofrecido y pegarlo entremedio de los paréntesis. Ésto también se aplica en avatares y las imágenes a editar de tu perfil.

CÓDIGOS HTML: si te encuentras utilizando el dohtml, tienes que utilizar el código html que se ofrece. Te darán un código enorme, pero te recomiendo que borres la parte del código que viene como <*a href=""> <*/*a> porque ésto no aporta en nada a tu imagen. Si deseas no tocar nada, puedes hacerlo.

BBCODE: El más normal y más fácil para ustedes. Éste se usa SOLAMENTE si no hay una situación como los dos anteriores. Simplemente haces click en donde dice IMG y colocas el link directo que la página te ofrece. Nada más.

Y eso sería lo básico de lo básico ¡Sin embargo! Si tienen dudas que no aclaré aquí, pueden preguntarme tanto por éste tema como por MP. Lo dejo abierto para aclarar sus dudas~.

--------------------
OWNER OF A HEAVY HEART
In the end you dig yourself the hole you're in when you don't know what you want you just repeat yourself again. In the end you just repeat yourself again when you don't know who you are you dig yourself the hole you're in (unless you're ready to leave).

PMEmail Poster
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options Reply to this topicStart new topicStart Poll


 


 

Skin made by Kman of Kskins