go to vampirefreaks main page

Ayuda_HTML

Created on: July 29, 2008
Description:
CULT EN CONSTRUCCION, DISCULPA LAS MOLESTIAS
� STAFF DE AYUDA HTML (Para formar parte del Staff inf�rmate aqu�)
EL STAFF
� NORMAS DEL CULT

  • Si eres nuev@, comienza presentandote en el thread "Introducciones", no abras un tema nuevo para este fin ya que ser� eliminado.

  • Queda terminantemente prohibido cualquier tipo de amenaza, insulto, pelea, desprecio, etc, dentro de XtreemCulture. Las diferencias deben solventarse fuera del cult, de no ser asi, la administraci�n se reserva el derecho de expulsar a los participantes del circo.

  • Queda terminantemente prohibido cualquier tipo de muestra racista, sexista, clasista, homofoba, etc.

  • Prohibido descalificar a ning�n miembro o hacer cualquier tipo de desprecio, ya sea en concursos, juegos, secciones, comentarios, fotos, etc.
    SI NO RESPETAS NO SERAS RESPETADO.

  • Prohibido hacer publicidad de otros cults en este, excepto quellos que se presenten en afiliados.

  • SUGERENCIAS, IDEAS, DUDAS o QUEJAS acerca del cult, se expresar�n en el thread dedicado a ello.
    No env�es mensajes privados Inbox, a los miembros del staff respecto a este asunto, ni abras nuevos temas al respecto, hazlo en el citado thread.

  • El Staff se reserva el derecho de la libre expulsi�n de un miembro de Ayuda HTML, siempre y cuando se considere necesario. El miembro expulsado ser� notificado de la expulsi�n, as� como del motivo que ha conllevado a su ejecuci�n.
� LO + DESTACADO

  • [30-07-08] Empezamos a poner en marcha el layout del cult, no pienso perder mucho tiempo puesto que lo que mas me urge es el contenido para empezar a invitar a miembros.
� CONTENIDOS


TEXTO B�SICO Y MARQUESINAS

Puedes configurar los estilos de texto tanto en [HTML] como en [CSS].
HTML es ideal para la estilizaci�n de palabras u oraciones, pero si lo que quieres es cambiar bloques m�s grandes de texto es mejor que utilices CSS, f�cil de usar.
Si quieres cambiar el texto o links que estan en tu p�gina de VF necesitar�s poner etiquetas de HTML alrededor de ellos.


Estilizar el texto en HTML:
<i> Texto en cursiva </i>
<b> Texto en negrita </b>
<u> Texto subrayado </u>
<strike> Texto tachado</strike>
Para centrar el texto:
<div align="center"> Texto centrado </div>
Para cambiar el color del texto:
<font color="orange"> Texto naranja </font>
<font color="#990000"> Texto rojo en hexadecimal </font>
<font size="1"> Texto peque�o </font>
<font size="4"> Texto m�s grande </font>
<font face="Times New Roman, Times, Serif">Texto en Times New Roman </font>
Puedes probar cambiando los valores para obtener distintos resultados.


Combinar distintos c�digos de fuente con HTML:
Si quieres cambiar el color, tama�o y/o fuente de letra, puedes hacerlo todo con la misma etiqueta:

<font size="1" color="red"> Texto rojo con tama�o 1 </font>
<font size="3" face="Georgia"> Texto Georgia con tama�o 3 </font>
<face="Courier" font size="1" color="orange"> Texto Courier de tama�o 1 en naranja </font>


Poner un enlace al texto:
Para poner un enlace a un texto necesitar�s el [URL] de la p�gina a la que quieres enlazar el texto y el c�digo siguiente:
<a href="URL DE LA P�GINA A ENLAZAR"> QUE QUIERES QUE PONGA EN EL LINK </a>


Estilizando el texto en CSS:
El estilo CSS utiliza una sintaxis distinta al HTML.
As�, utilizando CSS englobas dentro de una misma etiqueta un c�digo que afecta a todo el texto de una parte de tu perfil. Para que tenga efecto en el texto de tu perfil en general, aplica el c�digo a "html, body". Por ejemplo:
<style type="text/css">
html, body {
color: red;
font-family: Georgia;
font-size: 8pt;
font-weight: bold;
font-style: italic;
text-decoration: underline;
letter-spacing: 5px;
font-variant: small-caps;
}
</style>


Estilizando links con CSS:
Los Links tienen 3 estados diferentes: a:link (link por visitar), a:visited (link visitado) y a:hover (cuando el puntero del rat�n se pone encima del link). Puedes utilizar CSS para cambiarlos separadamente si quieres:
<style type="text/css">
a:link { color: red; text-decoration: none; }
a:visited { color: green; text-decoration: overline; }
a:hover { color: orange; background: white; text-decoration: none; }
</style>


Marquesinas en movimiento:
Puedes utilizar marquesinas para hacer que el texto se mueva. Tambi�n puedes utilizar las marquesinas para a�adir en lugar de texto, im�genes.
<marquee> Marquesina en movimiento </marquee>
<marquee behavior="scroll" direction="right"> Hacia la derecha </marquee>
<marquee behavior="alternate"> Hacia izquierda y derecha alternativamente </marquee>ee


Tambi�n puedes cambiar la velocidad con "scrollamount:

<marquee scrollamount="4"> Velocidad 4 </marquee>
<marquee scrollamount="20"> Velocidad 20 </marquee>


"Scrolldelay" permite que tu marquesina se vaya parando en distinta posici�n:
<marquee scrolldelay="500" scrollamount="100"> Scrolldelay 500 </marquee>








IM�GENES (inc fondos y banners)


El c�digo b�sico para poner una imagen es:
<img src="URL DE LA IMAGEN">


Puedes cambiar distintos atributos de la imagen como anchura, altura e incluso a�adir un texto alternativo. Es una buena opci�n el configurar la anchura y la altura porque as� le ordenas al navegador de internet c�mo quieres que aparezcan las imagenes de tama�o, por el contrario, si no defines los atributos de la imagen, el navegador las cargar�, por defecto, con el tama�o original de la imagen, lo cual a veces puede resultar inc�modo ya que puede aparecer demasiado grande en el navegador. Tambi�n es una buena idea poner un texto alternativo, de este modo los usuarios sabr�n de que trata la imagen en cso de que �sta no se cargue.

Una etiqueta m�s completa para definir estos atributos ser�a:

<img src="URL DE LA IMAGEN" width="100px" height="120px" alt="�Yo en la playa!">


La URL de la imagen que pongas en este c�digo debe proceder de alg�n servidor. Hay varios servidores de internet gratuitos y de muy buen uso donde puedes subir tus imagenes, como: [ Tinypic ] o [ Photobucket ]. El motivo de subirlas a un servidor es que el resto de gente no pueden ver las im�genes que tienes en tu disco duro, por lo cual al subirlas a la red podr�n ser vistas por cualquier usuario navegante. Estos servidores gratuitos te permiten compartir tus im�genes online �a cambio de nada! y te suministran una direcci�n http:// con la ubicaci�n en la que est�n colgadas, de hecho, en los servidores podr�s ver la URL de la imagen y as� s�lo tendr�s que copiarla y pegarla c�modamente. �sa es la direcci�n que tienes que sustituir en el c�digo para que tu imagen se muestre.



Fondos:

Puedes poner un fondo a toda tu p�gina o en cualquier caja.
Una vez que tengas la URL de la imagen que quieras colocar de fondo, este es el c�digo que necesitas para poner un fondo en tu p�gina:

<style type="text/css">
html, body { background: url('URL DE LA IMAGEN'); }
</style>

Banners:

Los Banners son b�sicamente im�genes clickeables. Necesitar�s la URL del banner (lee arriba si no est�s familiarizado con la forma de subir im�genes a internet) y tambi�n necesitas la URL del Cult o Perfil al cual quieres enlazar el banner:

<a href="URL DE LA P�GINA QUE QUIERES ENLAZAR"><img src="URL DEL BANNER" border="0"></a>

Al poner el valor border="0" evitas que aparezca un borde de color alrededor de la imagen, lo cual afea la imagen, asi que te recomendamos que utilices este valor.





NICK BANNER


�C�mo reemplazar tu nick en tu perfil con un banner?

Primero busca o haz tu banner. No necesitas ning�n software caro para hacerlo, puedes encontrar una larga lista de programas gratuitos o demos.

Os recomendamos [ Serif PhotoPlus ] o, si tienes algo m�s de experiencia, [ The GIMP ].

Cuando hayas hecho tu banner tendr�s que subirlo a un servidor. [ Tinypic ] o [ Photobucket ] son dos servidores gratuitos y f�ciles de manejar.

Finalmente necesitar�s poner la URL de la imagen subida al servidor que elijas en el siguiente c�digo:


<style type="text/css">
.profilename {
color: #000000;
font-size: 0px;
text-align: left;
background: url('URL DE LA IMAGEN');
height: ALTURA DE LA IMAGENpx;
width: ANCHURA DE LA IMAGENpx;
}
</style>







BORDES


Los bordes pueden ser utilizados al rededor de tablas o imagenes. A continuacion un ejemplo de como aplicar los bordes en SCC:

<style>
table, .table {
border: solid;
border-width: thin;
</style>


Estilo De Linea:
style="border: dashed; border-width: thin;


NOTA: Cambia EL TEXTO MARCADO por los atributos que deseas

Estilos



groove
inset
outset
ridge
dotted
dashed
solid (default)
double
hidden
none
inherit

Anchuras



thin
medium (default)
thick




CURSORES


Estos son algunos de los cursores basicos que usted puede usar para su perfil.
Estos son Algunos ejemplos de cursores:

move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, crosshair


Aqui Los Ejemplos:


move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
crosshair
auto (default for hover)
default (default arrow)


Este es el CSS por defecto para colocar tu cursor:
<style type="text/css">
body {
cursor: Nombre;}
</style>

El texto rayado es donde deberas poner el nombre del cursor:
style="cursor: Nombre;

Este codigo es para tener tu cursor customizado (imagen o lo que sea):
<style type="text/css">
body {
cursor: url("URL DEL CURSOR AQUI");}
</style>



Cajas Y Tablas



Las Cajas [o Scrollboxes] Estan hechas por html.El DIV amplia la forma predeterminada, asi que en una caja todo lo que tienes que hacer es darle una altura y anchura y el desplazamiento en auto de esta manera:
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> contenito Aqui </div>


Las flechas de desplazamiento no se veran si no hasta que el contenido dentro sea extenso:
a little content
lots of content blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

To make scrollboxes appear side by side, as in the example above, the code is:

<table><tr><td>

br> Para hacer que las cajas esten juntas como en el ejemplo, El codigo es:
<table><tr><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 1 content </div>
</td><td>
<div style="width: 100px; height: 100px; overflow: auto; border: 1px solid red;"> box 2 content </div>
</td></tr></table>




  • Anchor Boxes


QUIEN SOY AQUI


LO QUE ME GUSTA AQUI


LO QUE ODIO AQUI


MUSICA AQUI

Para crear una tabla como esta en donde se cambia el contenido haciendo clic en los links, es: <style type="text/css">
.container {
width: 250px; height: 200px;
overflow: auto; overflow-y: hidden;
border: 3px double #999999;
}
.section { height: 200px; overflow: auto; }
</style>

<table width="350px"><tr><td>
<div style="overflow: auto; width: 100px; height: 200px; border: 3px double #999999;">
NAVIGATION
<br><a href="#profile">[ HACERCA DE MI ]</a>
<br><a href="#likes">[ LO QUE ME GUSTA ]</a>
<br><a href="#loathes">[ LO QUE ODIO ]</a>
<br><a href="#music">[ MUSICA ]</a>
</div>
</td><td>
<div class="container">

<a name="profile"></a>
<div class="section">
<br><br>HACERCA DE MI
</div>

<a name="likes"></a>
<div class="section">
<br><br>LO QUE ME GUSTA O AMO
</div>

<a name="loathes"></a>
<div class="section">
<br><br>LO QUE ODIO
</div>

<a name="music"></a>
<div class="section">
<br><br>MUSICA
</div>

</div>
</td></tr></table>


Tablas

La etiqueta <table> define la tabla. En el interior se utiliza &lttre> anidadas y &lttd> etiquetas para construir su estructura de la tabla. Las tablas son buenas para la organizaci�n de las cajas div, texto o im�genes, o incluso en otras tablas.

<table><tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr></table>


Cell 1 Cell 2

<table><tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr><tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr></table>


Cell 1 Cell 2
Cell 3 Cell 4



ESCONDER CONTENIDO


<style type="text/CSS">
.profile_title {display: None;}
.likes_title {display: None;}
.dislikes_title {display: None;}
.music_title {display: None;}
</style>

Este codigo sirve para crear un codigo mas limpio y más organizado que también puedes lograr el mismo efecto haciendo de este modo:

    <style type="text/CSS">
    .profile_title, .likes_title, .dislikes_title, .music_title {display: none;}
    </style>


Tome en cuenta esto: Los usuarios Premium pueden elegir una opcion para que su perfil este en blanco, esto ayuda por si desea ocultar todo y nos facilita el trabajo. Para los no-premium es necesario usar un codigo con el nombre-codigo de lo que se desea borrar, vaya a las siguientes paginas

Puedes ir Tambien a Aqui


musica


mostrarcode


geek


links
� PROBLEMAS FRECUENTES DEL HTML

PROBLEMAS DEL HTML
� AFILIADOS

CULT HERMANO

Unete a Los Cuervos De Poe, si te gusta Edgar Alan Poe o quieres unirte a un cult en habla hispana, este es el indicado!

CULTS AFILIADOS


Owner: Nox_
Members (37): [view]
Who Can Join: anyone can join
Who Can Post: unmoderated
Who Can View: anyone
Who Can Upload Pics: Moderators
Posts: 815
Posts Today: 0
Posts This Week: 0
Posts This Month: 29
Affiliate Cults: Celeste, Latinos, LosCuervosdePoe, Metal_Kult_Spanish, La_Bruja_de_la_Cocina, Chamber_of_darkness
Members Viewing (0):

[Cult Statistics]
[View All Cult Posts] [View Expanded Posts]
[Edit Pictures] [Upload Pictures]
[ General Discussion ]
Subject
Replies
Started Last Comment
Ayuda_HTML
1
02/19/2012 07:44pm
by Nox_
04/22/2012 07:04pm
by Nox_
Graficos Y Layouts, GRATIS!!
1
02/19/2012 07:54pm
by Nox_
04/07/2012 06:50pm
by Nox_
[View All Cult Posts] [View Expanded Posts]