Guia HTML & CSS by f_c_dragons

Guia HTML

REGLAS

1º: NO COPIES LA PAGINA O TE DENUNCIARÉ
2º: QUE APRENDAS MUCHO HTML ;)
3º: NO ACEPTO AWARDS

PARTE 1 PARTE 2 PARTE 3 PARTE 4 PARTE 5

PARTE 1

QUIERES TU LINK ASI:
2000 nps y comida gratis al mes
<font style="font-size: 18px; letter-spacing: normal; font-style: italic; font-weight: bold; font-family: verdana; color: #FFFFFF; height: 22px;"><a href="/">NOMBRE DEL LINK</a></font>

QUIERES TU TEXTO ASI?
<font style="font-size: 24px; letter-spacing: normal; font-style: normal; font-family: verdana; color: #000000; height: 36px;">TU TEXTO AQUÍ</font>

ESTO TAMBIEN ESTA CHULO, PUES NO TE PIERDAS EL CODIGO ABAJO:

O PREFERIS QUE VOTE SIN FONDO DE COLOR?
TU TEXTO AQUI

O LO PREFERIS CON UN COLOR DE LETRA DIFERENTE?
<font color="RED">TU TEXTO AQUI</font>

PARA PONER COLOR DE FONDO SOLO TENEIS QUE PONER:

PARA PONER LINKS EN LA ASO EN EL LOOKUP O EN LA TIENDA O MAS PONED ESTE CODIGO Y CAMBIAD DONDE PONE EL LINK CAMBIADLO POR EL LINK QUE QUERAIS Y CAMBIAD 2000 NPS Y COMIDA GRATIS POR EL NOMBRE DEL LINK QUE QUERAIS, COMO QUERAIS QUE SE LLAME EL LINK
POR EJEMPLO:
<a href="http://www.neopets.com/freebies">2000 nps y comida gratis</a>
SE VERIA ASI: 2000 nps y comida gratis

PARA SALTAR UNA LINEA O SALTAR UN PARRAFO SERIA ASI:
SALTAR UNA LINEA: <br>
SALTAR UN PARRAFO: <p></p>

PARTE 2

PARA PONER SUBRAYADO O NEGRITA O CURSIVA TENEIS QUE PONER:
CURSIVA: <i>TEXTO EN CURSIVA AQUI</i>
NEGRITA: <b>TEXTO EN NEGRITA AQUI</b>
SUBRAYADO: TEXTO AQUI SUBRAYADO

CAMBIAD EL LINK DE LA IMAGEN Y DEL SITIO DONDE VA EN EL DE IMAGEN CON LINK Y EN EL DE IMAGEN SIN LINK CAMBIAD EL LINK DE LA IMAGEN POR OTRO.
PARA PONER UNA IMAGEN SIN LINK:
POR EJEMPLO:
<img src="http://i158.photobucket.com/albums/t95/fcdragons/BANNERHTML.jpg">

PARA PONER UNA IMAGEN CON LINK:
POR EJEMPLO:
<a href="http://www.neopets.com/~dragonselo"><img src="http://i158.photobucket.com/albums/t95/fcdragons/BANNERHTML.jpg"></a>

QUIERES QUE TU LETRA SE VEA ASÍ
<font color="red">texto en color aqui</font>

PARA PONER LOS CUADROS ESTOS QUE PONGO PARA PONER LOS CODIGOS:
<textarea>lo que quieres que ponga dentro del cuadro
DESPUES CIERRA EL CODIGO CON (SIN ESPACIOS)

PARA CENTRAR UNA IMAGEN O ALGUNA COSA O LAS LETRAS O UN LINK, ETC. TIENES QUE PONER:
<center>LO QUE QUIERES QUE PONGA CENTRADO</center>

PARA VER TU TEXTO EN LETRA COMO ESTA TIENES QUE PONER:
<font face="ALIEN ENCOUNTERS">AQUI TU TEXTO</font>
CAMBIAD ALIEN ENCOUNTERS POR LA LETRA QUE DESEAIS, PODÉIS VER LAS LETRAS DISPONIBLES CON EL WORD O DIFERENTES PROGRAMAS.

PARTE 3

QUIERES TU IMAGEN O TEXTO A LA IZQUIERDA?
IMAGEN:
<p align="-blocked-"><img src="http://i158.photobucket.com/albums/t95/fcdragons/lupelordkass-2.jpg"></p>

TEXTO:
<p align="-blocked-">AQUÍ TU TEXTO</p>

QUIERES TU TEXTO O IMAGEN A LA DERECHA?
TEXTO:
<p align="-blocked-">TEXTO AQUÍ</p>

IMAGEN:
<p align="-blocked-"><img src="http://i158.photobucket.com/albums/t95/fcdragons/lupelordkass-2.jpg"></p>

QUIERES HACER TU TEXTAREA GRANDE O PEQUEÑA?
<textarea cols="70" rows="5">TEXTO DE LA TEXTAREA AQUÍ
CAMBIA EL COLS Y ROWS POR OTRO NUMERO O SI LO KIERES ASI...
Y RECUERDA QUE ACABA EN (SIN ESPACIOS)

QUIERES UNA LINEA COMO ESTA:

POR FAVOR CAMBIAD LA IMAGEN Y LOS COLORES...

CODIGOS DE LOS FAMOSOS HA OCURRIDO ALGO! AQUI:
<center> <div align="center"> <p></p> <p></p> <table width="400" cellspacing="0" cellpadding="3"> <tr><td width="400" align="center" colspan="2"><b>Ha ocurrido algo!</b></td></tr> <tr> <td width="80"><img src="http://www.cnwcentral.com/neopets/draikgif.gif" border="1" height="80" width="80"></td> <td width="320"> Encuentras a un draik volando y te dice, unete a la aso de ayuda mas nueva, S.A.N. para entrar haz clic <a href="http://www.neopets.com/guilds/guild.phtml?id=3105425">aquí</a> </td> </tr> </table> </div> </center>
CAMBIAD LA IMAGEN, EL TEXTO, Y EL LINK.

PARA QUE TU TEXTO ESTE TACHADO
<strike>TEXTO TACHADO</strike>

PARA QUE TU TEXTO ESTE ASI TIENES QUE PONER:
<span style="width: 80; height: 70; font-size: 34px; font-family: verdana; color: #FF40FF; font-weight: bold;">AQUÍ EL TEXTO QUE QUIERAS PONER</span>
PODEIS CAMBIAR LOS CODIGOS DE COLORES.

4| | |MOLA EH? ABAJO TIENES EL CODIGO. | | |3
<font color="#FF66FF"> <font face="Webdings">4</font>| | |</font><font face="cracked johnnie" color="#FFFFFF">AQUI TU TEXTO, ESPERO QUE TE GUSTE EL CODIGO!</font> <font color="#FF66FF"> | | |<font face="Webdings">3</font></font>
PUEDES CAMBIAR LOS CODIGOS DE COLORES.

QUEREIS UNA TABLA? COMO ESTA?

SIEMPRE TE HAS PREGUNTADO:
COMO HACEN PARA PONER EL NOMBRE DE QUIEN VISITA LA PAGINA Y QUE SE MUEVA?
PUES AQUI TIENES EL CODIGO!
HOLA # VISITOR A MI PETPAGE
LO DE # VISITOR VA SIN ESPACIO, ES DECIR QUE IRIA EL # Y EL VISITOR JUNTOS
PODEIS CAMBIAR EL TEXTO PERO NUNCA QUITEIS EL # VISITOR (SIN ESPACIOS)

QUIERES UNA IMAGEN BORROSA?

AQUI TIENES EL CODIGO:
<img src="http://i158.photobucket.com/albums/t95/fcdragons/disco2035.jpg" style="">
CAMBIAR LA URL DE LA IMAGEN.

PARTE 4

O LA QUIERES TRANSPARENTE?

EL CODIGO:
<img src="http://i158.photobucket.com/albums/t95/fcdragons/disco2035.jpg" style="">
YA SABEIS, TENEIS QUE CAMBIAR LA URL DE LA IMAGEN. ;)

OYE, Y SI LA HACEMOS ONDULADA_ ??

AQUI EL CODIGO:
<img src="http://i158.photobucket.com/albums/t95/fcdragons/disco2035.jpg" style="">
YA SABEIS LO DE LA URL, QUE LA TENEIS QUE CAMBIAR

O LA QUIERES GRIS?

ABAJO EL CODIGO:
<img src="http://i158.photobucket.com/albums/t95/fcdragons/disco2035.jpg" style="">

PARTE 5

AHORA VIENE LA SCROLLBAR, MUCHOS OS PREGUNTAREIS, QUE ES LA SCROLLBAR?
ES ESTO:

Y ESTO SON LAS PARTES:

Y SI OS LO ESTABAIS PREGUNTANDO... SI, ESTO ESTA HECHO CON PAINT CON MAS DE MEDIA HORA, YA SE QUE ES UNA CHAPUZA PERO BUENO, MA COSTADO HACER TODAS LAS LINEAS Y COLORES, Y SOBRETODO LA FLECHITA...
Y ESTO ES EL CODIGO:
<style> body { } </style>
CAMBIAD LOS CODIGOS DE COLORES...

AQUI TIENES COLORES PARA ESTAS COSAS DE CAMBIAR COLORES:
RED
BLUE
NAVY
GREEN
OLIVE
YELLOW
LIME
MAGENTA
PURPLE
CYAN
BROWN
BLACK
GREY
TEAL
WHITE

GUIA CSS

Un CSS de neopets suele estar entre las dos etiquetas siguientes:
<style> esto { } </style>

Lo de esto {no:loborres;} ni los // que hay despues de style no lo tienes que tocar, si lo quitas, puede dar errores de neo, es para evitar los filtros de neo. Eso si, puees cambiar el texto, mientras no quites los {} o los : y los ;

y tu diras, ¿entonces como es mas o menos un codigo CSS simple?
Bueno, pues estoy dispuesto a enseñarte algo simple.

Mira esto seria ya codigo CSS:
<style> esto { } #estoesunaid { margin: 0; position: absolute; } .estoesunaclase { margin: 0; color: #FFFFFF; } </style>

Uff, que rollo, que dificil y largo es.

eso es mentira. El codigo CSS, puedo decir que no es facil aprenderselo todo, dudo que haya alguien que lo sepa todo. Pero aprender y saberlo manejar muy bien es facil. Es normal que la primera impresion que te de sea que es dificil y un rollo.

Pero poco a poco en esta guia iras aprendiendo mas o menos que no es dificil.

Asignar clases y id's a lenguage HTML

<style> esto { } .clase { color: #FFFFFF; } </style> Comenzamos a escribir HTML <div class="clase">Texto de dentro del div</div>

Aver, si usamos la logica. Te debiste dar cuenta de dos cosas. Lo primero es que usamos class= para decirle al HTML que vamios a ponerle una clase. Y lo segundo que entre las comillas de class= pusimos el nombre de la clase que creamos. Pero esta iba sin punto. Pues si esta bien, no es que me haya equivocado. AL añadirlo en HTML no hace falta poner el .(punto).

Con los id's hariamos lo mismo solo que en vez de class= usariamos id= y añadiriamos el nombre del id sin el #

Estas preparado para comenzar? No seas vago levantate de tu sillon, y haz 5 vueltas al campo. Es broma, bueno que comenzamos.

Tema 2: Lo primero para CSS

En el tema anterior vimos un ejemplo de css, el que os muestro a continuacion, y os explico los # y los .(puntos) mira aqui teneis el codigo:

<style> esto { } #estoesunaid { margin: 0; position: absolute; } .estoesunaclase { margin: 0; color: #FFFFFF; } </style>

Como ya marca nuestra amiga textarea tenemos varias cosas que explicar. Primero que es el #estoesunaid y despues el .estoesunaclase lo explico a continuacion.

#estoesunaid: Estos son id's. Todos los id's van acompañados con un simbolo # al principio. le puedes llamar como quieras, y ponerle las cosas que quieras.

.estoesunaclase: Estos son clases, y van acompañados siempre por un punto al principio. Esto, suele usarse para darle formato a cosas dentro de la id. Veamos un ejemplo:

<style> esto { } #estoid { position: absolute; margin: 0; width: 40; } #estoid .estoclase { color: #FFFFFF; font-size: 24pt; text-transform: uppercase; } </style>

Explicacion

En cambio si ponemos un p dentro de otro div el cual no tenga asignado la clase .estoclase, por mucho que queramos no nos deberia salir el texto como lo dice la clase.

Bueno, como ves es simple. Vamos a comenzar ahora en serio la Guia esto se ira complicando, pero con lo list@ que tu eres lo entenderas a la primera. y sino a la segunda ;)

Tema 3: Comenzando por crear divs

A un div se le pueden añadir muchas cosas en CSS. Aqui algunas cuantas importantes:

Ves? Esos son algunos, no todos porque sino me muero jejej.

Espero que hayas entendido algo, porque yo explicando no soy muy bueno.

Tema 4: Cambiandole formato a fuentes

Bueno, primero la edicion de fuentes se tiene que poner en una clase y despues en un p es decir:
<style> esto { } .clase { color: #FFFFFF; } </style> <p class="clase">Aqui texto con formato</p> No te olvides de cerrar el <p> con un </p>

Importante si haces un p dentro de otro, aunque no tenga clase, deberas cerrarlo. Sino se te quedara texto que quieres con formato sin frmato.

Ahora os voy a mostrar una tabla como la de antes para la edicion de texto.

Admito que he hecho un poco de copy+paste (copiAR+Pegar) con la priemra tabla que habia hecho :S

Bueno, esto tambien se le pude añadir a los h1 h2 h3 etc...

Si quieres añadirle formato a una etiqueta. tan solo escribe la etiqueta (sin puntos ni #) y despues los {} y dentro de los {} su formato, ejemplo:
<style> esto { } h1 { font-size: 72pt; color: #FFFFFF; border-bottom: 1px #FFFFFF solid; } h2 { font-size: 64pt; color: #CCCCCC; border-bottom: 1px #CCCCCC solid; } </style>

Tambien lo puedes hacer con muchas cosas, como por ejemplo a la etiqueta font.

Bueno, pasamos al siguiente capitulo, hipervinculos en CSS, espero que os guste.

Tema 5: Hipervinculos(enlaces) en CSS

Como ves con la letra a nos referimos a los hipervinculos, Si ponemos el codigo que os he mostrado arriba, cambiaremos de color todos los hipervinculos a color blanco.

Eso no es todo. Sabes que por ejemplo puedes hacer que al pasar por encima cambie de color el hipervinculo. Y que los que ya habias visitado de hipervinculos, sean de otro color. Y los que esten activos tambien puedes elegir un color diferente a los otros.

Eso se hace añadiendole una cosa a la letra a aqui os dejo un ejemplo:
<style> esto { } a:visited { color: #FFFFFF; } a:link { color: #CCCCCC; } a:active { color: #999999; } a:hover { color: #666666; } </style>

Explicacion

Los formatos de los a son los mismos que los de texto, asique no haria falta poner la misma tabla dos veces.

Tambien se puede hacer otra cosa. Para hacer mas corto el CSS, se puede hacer que dos engan el mismo color con tan solo una linea.
Ejemplo:
<style> esto { } a:link, a:visited, a:active { color: #FFFFFF; } a:hover { color: #000000; } </style>

Como ves, a los normales, los visitados, y los activos, le hemos puesto el mismo formato usando comas. Esto sirve para todo el CSS, para los id's y para las clases. Pero se me olvido explicarlo y lo explico aqui.

Y eso es todo en los hipervinculos, el proximo ya es el penultimo tema de aprendizage, a los demas que vienen, seran de aprender a hacer lookups y layouts.

Tema 6: Los fondos en CSS

Bueno, en CSS, se le puede poner un fondo a un div, a una clase, a un vinculo, a un texto, a un id, etc.

Primero necesitamos saber como se pone un fondo. Pues de la siguiente manera.
<style> esto { } #fondoid { background-color: #CCCCCC; } </style> Le hemos puesto un fondo gris a #fondoid con background-color

Como ves hemos usado background-color para ponerle el fondo de un color a un id. Si cambias el # por un . se lo estaras poniendo a una clase. y si le quitas #fondoid y pones a:hover se lo pondras que al pasar por encima de un link se le ponga el fondo de ese color.

Y ahora, como se ponen fondos, pero no de color, sino de imagenes.

Pues tan solo vamos a cambiar unas cosillas, aqui otro ejemplo:
<style> esto { } #fondoid { background: url("-blocked-") repeat-x; } </style> Como ves esto se va complicando ;)

Bueno, hemos usado background, para ponerle un fondo de imagen a #fondoid. Ahora te explico todo. Ponemos url() para que el CSS sepa que le vamos a poner una URL de una imagen.
Despues dentro de los parentesis de url podemos poner la imagen de fondo, con el link que te haya dado internet al subirla.

y lo de repeat-x dice que se repita en horizontal, recuerda que X es horizontal, Y es vertical, eso es porque esta hecho en coordenadas. Si no pones nada de repeat, se te repetira en X y en Y, tambien puedes hacer que no se repita cambiando repeat-x por no-repeat

Esta petpage usa repeat-y y de fondo tiene una imagen de 1280px de anchura por 9x de altura, a que no lo parece? pero como se repite parece que sea una imagen muy grande.

En el proximo tema vamos con el body, y luego ya enseñamos a hacer userlookups, petpages, guild layouts, y todo eso.

Tema 7: El estilo del body

Bueno, el body se coloca de la siguiente forma en CSS:
<style> esto { } body { background-color: #FFFFFF; } </style> Ahora he cambiado todo el color de fondo de la pagina a blanco (#FFFFFF)

Al body se le pueden añadir muchas cosas como ves. tambien un background(fondo) con imagen ;)

Creando Graficos

Guild Layouts

Lo segundo es ocultar las cosas, usa el truco que puse arriba.

Lo segundo seria un fondo que se repita en vertical repeat-y y si se repite en vertical que sea igual claro.

para saber el top y left, deberias usar la ventana informacion de photoshop.

Despues pones los divs donde calgan y todo y listo.

Userlookups

Petpages

Petlookups

Cosas que se suelen ocultar

Y ahora, esto suele ponerse en los guild layouts:

<style> esto { } td, tr { background-color: transparent; } .map, .contain, #main, table, td { border: none; background: none; } </style>

Bueno, os esperabais otra cosa en lo de graficos? no, seria muy dificil de explicar si no es de otra forma, yo quiero que lo hagais y descubrais vosotros. ;) Sino, se os tendria que dar todo hecho y no se aprende nada.