Guia HTML

BIENVENIDO guest A LA ZONA HTML, DONDE PODRAS SABER MUCHAS COSAS SOBRE 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

QUIERES TU TEXTO ASI?

QUIERES ESTO? ABAJO EL CODIGO:


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




GUAUUU COMO VOTA!!!



O PREFERIS QUE VOTE SIN FONDO DE COLOR?

O LO PREFERIS CON UN COLOR DE LETRA DIFERENTE?

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:

SE VERIA ASI:
2000 nps y comida gratis


PARA SALTAR UNA LINEA O SALTAR UN PARRAFO SERIA ASI:
SALTAR UNA LINEA:
SALTAR UN PARRAFO:

PARTE 2


PARA PONER SUBRAYADO O NEGRITA O CURSIVA TENEIS QUE PONER:
CURSIVA:
NEGRITA:
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:

PARA PONER UNA IMAGEN CON LINK:
POR EJEMPLO:


QUIERES QUE TU LETRA SE VEA ASÍ

PARA PONER LOS CUADROS ESTOS QUE PONGO PARA PONER LOS CODIGOS:

DESPUES CIERRA EL CODIGO CON (SIN ESPACIOS)

PARA CENTRAR UNA IMAGEN O ALGUNA COSA O LAS LETRAS O UN LINK, ETC. TIENES QUE PONER:

PARA VER TU TEXTO EN LETRA COMO ESTA TIENES QUE PONER:

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:

TEXTO:

TAMBIEN PUEDES HACER:

YA SABEIS QUE PODEIS CAMBIAR EL COLOR Y TIPO DE LETRA.


QUIERES TU TEXTO O IMAGEN A LA DERECHA?
TEXTO:

IMAGEN:

YA SABES QUE PUEDES AÑADIR TODO ESO DE FONT FACE COLOR.


QUIERES HACER TU TEXTAREA GRANDE O PEQUEÑA?

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:



SOLO TIENES QUE PONER:

ESTE ES UN CODIGO BASTANTE CORTO ¬¬

O QUIERES ESTA:




TAMBIÉN PODÉIS PONER UNA NORMALITA
QUE ES ASI:



EL CODIGO ES:


TAMBIEN LA PUEDES HACER GRANDE Y PEQUEÑA.

CAMBIAD LOS NUMEROS DE WIDTH Y HEIGHT, SI LO DEJAIS ASI SERÁ UN CUADRADO, WIDTH=ANCHO HEIGHT=ALTURA



POR FAVOR CAMBIAD LA IMAGEN Y LOS COLORES...


CODIGOS DE LOS FAMOSOS HA OCURRIDO ALGO! AQUI:

CAMBIAD LA IMAGEN, EL TEXTO, Y EL LINK.


PARA QUE TU TEXTO ESTE TACHADO

PARA QUE TU TEXTO ESTE ASI TIENES QUE PONER:

PODEIS CAMBIAR LOS CODIGOS DE COLORES.

4| | |MOLA EH? ABAJO TIENES EL CODIGO. | | |3

PUEDES CAMBIAR LOS CODIGOS DE COLORES.

QUEREIS UNA TABLA? COMO ESTA?

A B C
D E F

AQUI TIENES EL CODIGO ;)

SIEMPRE TE HAS PREGUNTADO:
COMO HACEN PARA PONER EL NOMBRE DE QUIEN VISITA LA PAGINA Y QUE SE MUEVA?
PUES AQUI TIENES EL CODIGO!

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:

CAMBIAR LA URL DE LA IMAGEN.

PARTE 4



O LA QUIERES TRANSPARENTE?

EL CODIGO:

YA SABEIS, TENEIS QUE CAMBIAR LA URL DE LA IMAGEN. ;)

OYE, Y SI LA HACEMOS ONDULADA_ ??

AQUI EL CODIGO:

YA SABEIS LO DE LA URL, QUE LA TENEIS QUE CAMBIAR


O LA QUIERES GRIS?

ABAJO EL CODIGO:

PARTE 5


AHORA VIENE LA SCROLLBAR, MUCHOS OS PREGUNTAREIS, QUE ES LA SCROLLBAR?
ES ESTO:
ESTO ES LA SCROLLBAR
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:

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


RED
FF0000
FF3300 CC3300 FF9999 FFCCCC 990033 MAROON
990000
FF3333 CC3333 FFCC99 CC0066 993300
FF0033 CC0033 FF9966 FF6699 660000
000000 CC0000 663333 990066 330000
LIME
66FF00
33FF33 66FF66 OLIVE
66FF00
99FF99 CCFFCC GREEN
00FF00
00CC00 009900 006600 003300
00CC00 009900 006600 003300
009900 006600 66FF00 009900
AQUA
00FFFF
00FFFF 3333FF TEAL
006666
6666FF 9999FF BLUE
0000FF
33FFFF 66FFFF 99FFFF CCFFFF
CCCCFF 0000CC 000099 000099
CCCCFF 000066 000033 000099
00CCCC 009999 006666 003333
YELLOW FFFF33 FFFF66 FFFF99 FFFFCC
CCCC00 999900 666600 333300
FUCHSIA FF33FF FF66FF FF99FF FFCCFF
CC00CC 990099 660066 330033
TEAL 7D337D 7D667D 7D997D 7DCC7D
E100E1 CC00CC AF00AF 990099
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
663300 663333 663366 663399 6633CC 6633FF
660000 660033 660066 660099 6600CC 6600FF
333300 333333 333366 333399 3333CC 3333FF
003300 003333 003366 003399 0033CC 0033FF
330000 330033 330066 330099 3300CC 3300FF
000000 000033 000066 000099 0000CC 0000FF

GUIA CSS

Tema 1: Que es CSS?
Tema 2: Lo primero para CSS
Tema 3: Comenzando por crear divs
Tema 4: Cambiandole formato a fuentes
Tema 5: Hipervinculos(enlaces) en CSS
Tema 6: Los fondos en CSS
Tema 7: El estilo del body
Creando Graficos

Tema 1: Que es CSS?

Con CSS, las siglas de Cascading Style Sheet(Hojas de estilo en cascada), nos podemos referir a diseño en codigo. Con css, consigues que todo este en su sitio. Eso si el codigo esta bien.

Un CSS de neopets suele estar entre las dos etiquetas siguientes:

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:

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

Bueno, para asignar una clase a algun elemento HTML, tan solo debemos hacer lo siguiente, os pongo un ejemplo con un div, que es como una tabla pero mejor.

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

Lo primero es saber la sintaxis, la explicamos un poco en el tema anterior. Pero vamos a explicarla mas a fondo.

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:

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:

Explicacion

Aver, aqui hemos puesto una clase(.estoclase) dentro de una id(#estoid). Aqui lo que hemos hecho, es que si le ponemos dentro del div un p con la clase .estoclase, y luego escribimos dentro del p cualquier cosa. Nos saldra con color blanco(color:#FFFFFF;) una fuente de 24puntos de grande(font-size:24pt;) y que todo lo que escribamos sera en mayusculas, aunque en el editor este en minusculas(text-transform:uppercase;)

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

Hola, primero, quiero explicarte que es un div. Un div se escribe asi:

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

Escritura dentro {} Que se puede poner dentro del : y ;? Explicacion
position: ; Se pueden poner las siguientes cosas:

absolute (hay mas pero pongo la mas usada en neo)

Explicacion:

absolute: Este se coloca por encima de todo lo que no sea absolute, otros con valor absolute, si que podrian ponerse por encima de este. Las coordenadas del absolute se fijan con left y top. El lugar definido para un absolute sin left y top, es la esquina superior izquierda de la caja(div) que lo contiene.

left: ; & top: ; Aqui se puede poner un numero, como por ejemplo 150px, s mejor que lo pongas siempre en px(pixeles). Con left eliges la distancia que tiene el position:absolute; de su izquierda dentro de lo que lo contiene, y con top, eliges la distancia que hay con la parte de arriba de la caja(div) que lo contiene. Si no pones px al final de left y top, te saldra donde le de la gana
float: ; Aqui se puede poner:

left o right

con float:left; haces que el div se quede en la izquierda. Sirve cuando hay un div que contiene todos los divs de la pagina. y con float:right;, haces que se ponga a la derecha.
width: ; & height: ; Aqui es como el left:; y el top:; un numero acompañado con px(pixeles). Con width eliges la anchura. y con height la altura. Esto se le pueden añadir a muchas cosas, no solo a los divs.
display: ; En display le puedes poner esto:

none, block, hay mas pero estos los mas utilizados.

display:none; hace que no se muestre el elemento al que se lo pones, asi es como hacen que no se vea por ejemplo lo de mi cuenta, explorar y todo eso.
display:block; hace que se muestre como un bloque, y tendra un salto de linea br antes y despues del elemento que tenga display block
margin: ; & padding: ; aqui es como el width, el left, el top y el height, necesita un numero seguido de px con margin, eliges el margen que habra con los elementos de dentro del div. y con padding lo mismo pero los elementos de fuera. Esto se le pude asignar a los float, para marcar su posicion como si fuera un position absolute.
border: ; aqui puedes hacer muchas cosas. Por ejemplo mira puedes poner: border:1px #FFFFFF solid; aqui el borde sera 1px e color blanco y solido es decir una sola linea. donde solid esta lo siguiente:

solid, dashed, double, dotted

solid: Crea un borde de una sola linea alrededor del elemento al que se lo hayas puesto.

dashed: Crea lineas continuas alrededor del elemento al que se lo pongas.

double: Crea como un doble borde

dotted Crea como si puntitos por todo el alrededor del elemento al que se lo pongas

Tambien se le puede poner border-top:; (solo borde arriba) border-bottom:;(solo borde por debajo) border-left:;(solo borde en la izquierda) border-right:;(solo borde en la derecha) o poner border top y border bottom a la vez, o cualquier cosa que inventes.

overflow: ; en overflow se puede poner lo siguiente:

visible, hidden, scroll, auto

visible: Muestra todo lo que hay dentro del div, quepa o no en el.

hidden: Lo que no cabe dentro del div no se mostrara.

scroll: creara barras de desplazamiento(scrollbars) SIEMPRE y si no cabe alguna cosa dentro, estas se podran mover y bajar xD

auto Esta tambien creara barras de desplazamiento, pero tan solo si se sobrepasa el tamaño del div

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, vamonos a cambiarle el formato a las fuentes ;) con esto conseguiras que queden muy bien ;) podras hacer encabezados bonitos y todo eso. Vamos a comenzar.

Bueno, primero la edicion de fuentes se tiene que poner en una clase y despues en un p es decir:

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.

Escritura dentro {} Que se puede poner dentro del : y ;? Explicacion
font: ; Aqui es como el border, puedes poner una cosa asi: font:24pt comic sans ms; Explicacion:

Cambia el tipo, tamaño y estilo de fuente. pudes poner font-weight:bold; en bold se puede poner italic(cursiva) underline(subrayado) o dejarlo en bold(negrita)

color: ; Aqui pones el codigo de un color. Abajo del todo tendras una tabla de colores. Cambias el color del texto.
align: ; Aqui puedes poner o left o right. Alineas el texto a la izquierda(left) o derecha(right).
width: ; & height: ; Aqui es un numero acompañado con px(pixeles). Con width eliges la anchura. y con height la altura. Esto se le pueden añadir a muchas cosas, solo funciona si tienes puesto el display:block;.
display: ; En display le puedes poner esto:

none, block, hay mas pero estos los mas utilizados.

display:none; hace que no se muestre el elemento al que se lo pones, asi es como hacen que no se vea por ejemplo lo de mi cuenta, explorar y todo eso.
display:block; hace que se muestre como un bloque, y tendra un salto de linea br antes y despues del elemento que tenga display block
margin: ; & padding: ; aqui es como el width, el left, el top y el height, necesita un numero seguido de px con margin, eliges el margen que habra con los elementos de dentro del div. y con padding lo mismo pero los elementos de fuera. Esto se le pude asignar a los float, para marcar su posicion como si fuera un position absolute.
border: ; aqui puedes hacer muchas cosas. Por ejemplo mira puedes poner: border:1px #FFFFFF solid; aqui el borde sera 1px e color blanco y solido es decir una sola linea. donde solid esta lo siguiente:

solid, dashed, double, dotted

solid: Crea un borde de una sola linea alrededor del elemento al que se lo hayas puesto.

dashed: Crea lineas continuas alrededor del elemento al que se lo pongas.

double: Crea como un doble borde

dotted Crea como si puntitos por todo el alrededor del elemento al que se lo pongas

Tambien se le puede poner border-top:; (solo borde arriba) border-bottom:;(solo borde por debajo) border-left:;(solo borde en la izquierda) border-right:;(solo borde en la derecha) o poner border top y border bottom a la vez, o cualquier cosa que inventes.

overflow: ; en overflow se puede poner lo siguiente:

visible, hidden, scroll, auto

visible: Muestra todo lo que hay dentro del div, quepa o no en el.

hidden: Lo que no cabe dentro del div no se mostrara.

scroll: creara barras de desplazamiento(scrollbars) SIEMPRE y si no cabe alguna cosa dentro, estas se podran mover y bajar xD

auto Esta tambien creara barras de desplazamiento, pero tan solo si se sobrepasa el tamaño del div

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:

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

Los hipervinculos son esas cosas que tu clickas y te llevan a otra pagina, pues si, eso tambien se puede editar con CSS. Es facil. Aqui te muestro un ejemplo:

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:

Explicacion

a:visited Esto es para los links que ya has visitado. o el visitante ya ha visitado. Si un visitante ha visitado ese link y tu no, a ti te saldra como que no lo has visitado, y al visitante que si que lo ha visitado le saldra como que si lo ha visitado.
a:link Esto es para los links normales, que ni has visitado ni has hecho nada con ellos. a:active Esto es para los links activos a:hover Esto es para que cuando pases por encima cambie al color que elijas. Tambien se le puede cambiar el fondo.

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:

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 vamos a comenzar opara editar fondos en CSS. Es facil de hacer. Suelen ir en la etiqueta body, esta la explicare en el siguiente tema.

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.

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:

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

con estilo no me refiero a que el body sea supermegaultrafashion xD sino, que a la etiqueta body tambien se le puede añadir estilo. El body se podria decir que controla todo el contenido de la pagina, el contenido es diferente al estilo, no confundamos ;)

Bueno, el body se coloca de la siguiente forma en CSS:

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

Creando Graficos

Truco para graficos Si, quieres esconder algo de neopets, como la barra que pone mi cuenta, explorar, neopet central, etc. Puedes hacer click derecho sobre algo que no sea una imagen y darle a codigo fuente
Una vez le has dado, busca los divs que quieres quitar entre todo ese codigo. y despues lo pones entre tus etiqwuetas de style si es id recuerda con un # si es class con un punto. y despues pon dentro de los {} display:none; para que no se vean.

Guild Layouts

Bueno, vamos a aprender a crear guild layouts, primero, para un guild layout, lo fundamental son las imagenes, necesitamos un encabezado. Una imagen con position:absolute.

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

Lo mismo, pero aqui deberas mostrar lo de la tienda neohogares y todo eso.

Petpages

Como aqui no hace falta ocultar nada, con tu diseño propio va bien ;)

Petlookups

Esto seria como un userlookup ;)

Cosas que se suelen ocultar

Esto suele ocultarse en los graficos, pon el siguiente diseño en tus graficos:

Y ahora, esto suele ponerse en los guild layouts:

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.

T H E
E N D




NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions