Tutariales

Eso si lo saque de internet de seguro ellos tambien pero no importa qui les va:

Letras

Para aplicar diferentes tipos o estilos de letras se pueden utilizar una variedad de códigos. Los siguientes códigos muestran varios ejemplos de como lograr esto y sus resultados.

Código:	Resultado:
<b>Letra en Bold</b>	Letra en Bold
<i>Letra en italica</i>	Letra en italica
<u>Letra subrayada</u>	Letra subrayada

Además de estos estilos existen otros códigos para diferentes tamaños, colores y formas. Por ejemplo:

Código:	Resultado:
<font face="Arial" color="orange" size=1>El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "naranja" y el tamaño (size) debe ser "1"</font>	El tipo (face) de esta letra debe ser "Arial", el color (color) debe ser "naranja" y el tamaño (size) debe ser "1"

Otros tipos de letras que se pueden utilizar son "Tahoma", "Comic Sans","Impact", "Verdana"o alguna que descarguen ustedes ; otros tipos de colores que se pueden utilizar son "green" (verde), "yellow" (amarillo), "blue" (azul), "gray" (gris); y para aumentar el tamaño (size) de las letras solo deben aumentar el número dentro del código y listo.

---

Recuerda que para los códigos tengan efecto debes escribirlos exactamente como aparecen aquí. Si te sirve de ayuda solo copia ( Ctrl + C )  y pega  ( Ctrl + V ) los códigos de ejemplos en un editor de texto para que vayas practicando.

Colores

 Existen 2 formas para cambiar los colores. Una de ellas es a través de los códigos de colores por nombre (blue, yellow, red, etc.) y la otra es a través de codificaciónes (#000000 = blanco #ffffff = negro #999999 = gris). Ejemplos : 

Clasificación de colores por nombre:

red	yellow	blue
green	black	lime
gray	white	orange

Estos colores son los básicos, pero si quieren un color , por ejemplo, un celeste claro deberan usar los colores hexadecimales

#00FFF7

Clasificación de colores hexadecimales :

#FF3300	#FFFF66	#3333FF
#339933	#000000	#33FF00
#999999	#FFFFFF	#FF9933

---

Recuerda escribir el símbolo de (#)antes de la codificación de color por número, sin dejar espacios para que el código tenga efecto. Para ver una lista de los colores hexadecimales clic AQUI

Como modificar los bordes

Este es el borde :

 

groove borders

Y el codigo de este borde es el siguiente :

<p style="background-color: #000082; border: 10px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Para cambiar el color del fondo deben modificar esto :

<p style="background-color: #000082; border: 10px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Por ejemplo :

Cambio	Resultado
<p style="background-color: pink; border: 10px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>	groove borders

Para cambiar el grosor del borde deben cambiar esto:

<p style="background-color: #000082; border: 10px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Por ejemplo : 

Cambio	Resultado
<p style="background-color: pink; border: 5px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>	groove borders

Para cambiar el color del borde deben cambiar esto :

<p style="background-color: pink; border: 5px groove #000000; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Por ejemplo :  

Cambio	Resultado
<p style="background-color: pink; border: 5px grooveMediumOrchid ; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>	groove borders

Para cambiar el tamaño de la fuente dentro del cuadro deben cambiar esto :

<p style="background-color: pink; border: 5px groove MediumOrchid ; text-align:center; font-size: 15px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Por ejemplo :

Cambio	Resultado
<p style="background-color: pink; border: 5px grooveMediumOrchid ; text-align:center; font-size: 30px;"><font color="#ffffff" face="courier new">groove borders</font></p>	groove borders

Para cambiar el color de la fuente dentro del cuadro deben cambiar esto:

<p style="background-color: pink; border: 5px groove MediumOrchid ; text-align:center; font-size: 30px;"><font color="#ffffff" face="courier new">groove borders</font></p>

Por ejemplo :

Cambio	Resultado
<p style="background-color: pink; border: 5px grooveMediumOrchid ; text-align:center; font-size: 30px;"><font color="Indigo" face="courier new">groove borders</font></p>	groove borders

Para cambiar el estilo de la fuente dentro del cuadro deben cambiar esto:

<p style="background-color: pink; border: 5px groove MediumOrchid ; text-align:center; font-size: 30px;"><font color="Indigo" face="courier new">groove borders</font></p>

Por ejemplo :

Cambio	Resultado
<p style="background-color: pink; border: 5px grooveMediumOrchid ; text-align:center; font-size: 30px;"><font color="Indigo" face="Verdana">groove borders</font></p>	groove borders

Para cambiar lo que dice dentro del cuadro deben cambiar esto:

<p style="background-color: pink; border: 5px groove MediumOrchid ; text-align:center; font-size: 30px;"><font color="Indigo" face="Verdana">groove borders</font></p>

Por ejemplo:

Cambio	Resultado
<p style="background-color: pink; border: 5px grooveMediumOrchid ; text-align:center; font-size: 30px;"><font color="Indigo" face="Verdana">TEXTO TEXTO TEXTO</font></p>	TEXTO TEXTO TEXTO

Y después de todas estas modificaciones pudimos pasar de esto :

groove borders

A esto : 

TEXTO TEXTO TEXTO

Como modificar los cuadros 

Por ejemplo, tenemos este cuadro seguí los pasos para aprender a modificar los colores, el tamaño,etc.

Texto

Este es el código del cuadro: 

</div><br /> <div style="text-align: left;"><br /> <span style="font-size: 48px;"><span style="font-family: century gothic;"><span style="letter-spacing: -5px; text-shadow: -2px -2px 2px rgb(255, 51, 153);"> </span></span></span></div><br /> <div style="border-radius: 5px 5px; border-top-width: 3px; border: 3px dashed black; box-shadow: 0px 0px 3px white, 0px 0px 20px black; height: 250px; line-height: 10px; margin-left: 75px; text-align: center; text-shadow: 0px 0px 3px white, 0px 0px 5px blackcolor:#0489B1; width: 350px;"><br /> <span style="color: black;"><span style="font-size: 22px;"><span style="font-family: bookman old style;"><span style="font-size: 28px;">Texto</span></span></span></span><br /> <br /> <div style="text-align: left;"><br /> </div><br /> </div><br />

Para cambiar el color deben cambiar esto: 

Cambio

Resultado

</div><br /> <div style="text-align: left;"><br /> <span style="font-size: 48px;"><span style="font-family: century gothic;"><span style="letter-spacing: -5px; text-shadow: -2px -2px 2px rgb(255, 51, 153);"> </span></span></span></div><br /> <div style="border-radius: 5px 5px; border-top-width: 3px; border: 3px dashed HotPink; box-shadow: 0px 0px 3px white, 0px 0px 20px black; height: 250px; line-height: 10px; margin-left: 75px; text-align: center; text-shadow: 0px 0px 3px white, 0px 0px 5px blackcolor:#0489B1; width: 350px;"><br /> <span style="color: black;"><span style="font-size: 22px;"><span style="font-family: bookman old style;"><span style="font-size: 28px;">Texto</span></span></span></span><br /> <br /> <div style="text-align: left;"><br /> </div><br /> </div><br />

Texto

Para cambiar el tipo de bordes solo deben cambiar esto: 


Tienen para elegir , solid (que es sólido, solo el color), dotted (que es con puntos), dashed (rayas) , outset, inset, groove, ridge (son como marcos,todos con diferentes tipos de "Sombras") y por ultimo double (que es un borde doble) 

Cambio

Resultado

</div><br /> <div style="text-align: left;"><br /> <span style="font-size: 48px;"><span style="font-family: century gothic;"><span style="letter-spacing: -5px; text-shadow: -2px -2px 2px rgb(255, 51, 153);"> </span></span></span></div><br /> <div style="border-radius: 5px 5px; border-top-width: 3px; border: 3px double HotPink; box-shadow: 0px 0px 3px white, 0px 0px 20px black; height: 250px; line-height: 10px; margin-left: 75px; text-align: center; text-shadow: 0px 0px 3px white, 0px 0px 5px blackcolor:#0489B1; width: 350px;"><br /> <span style="color: black;"><span style="font-size: 22px;"><span style="font-family: bookman old style;"><span style="font-size: 28px;">Texto</span></span></span></span><br /> <br /> <div style="text-align: left;"><br /> </div><br /> </div><br />

Texto

Para cambiar el tamaño: 

Cambio

Resultado

</div><br /> <div style="text-align: left;"><br /> <span style="font-size: 48px;"><span style="font-family: century gothic;"><span style="letter-spacing: -5px; text-shadow: -2px -2px 2px rgb(255, 51, 153);"> </span></span></span></div><br /> <div style="border-radius: 5px 5px; border-top-width: 3px; border:10px double HotPink; box-shadow: 0px 0px 3px white, 0px 0px 20px black; height: 250px; line-height: 10px; margin-left: 75px; text-align: center; text-shadow: 0px 0px 3px white, 0px 0px 5px blackcolor:#0489B1; width: 350px;"><br /> <span style="color: black;"><span style="font-size: 22px;"><span style="font-family: bookman old style;"><span style="font-size: 28px;">Texto</span></span></span></span><br /> <br /> <div style="text-align: left;"><br /> </div><br /> </div><br />

ReynaMia3390 (Vieron como queda)

Espero que allan entendido muy bien estos tutoriales y los puedan practicar :)