Antes de tudo:
REGRAS | Link-nos | Versão Atual do Tutorial
Tuto de HTML da Mah
Este Tutorial de HTML pertence a Marcela940.
ATENÇÃO: Esta é a versão antiga do meu tutorial. Para ver a nova, clique aqui.
Então é natal...(8)
É, esse ano passou tão rápido! Mais um ano está vindo... Que venha! Estamos prontos para enfrentar mais uma etapa da nossas vidas! Achei q essa época tão especial (minha favorita) merecia um lay todo especial também... Espero que vocês gostem! Ah, queria lembrar que no natal eu fico mais caridosa... Quem sabe não é a oportunidade tão esperada para você fazer um lay para eu avaliar e quem sabe até colocar em "Lays prontos"? (: Sempre acrescentarei coisas novas, então é bom ler as 'atualizações' logo ali em baixo ^^ Essa PP eh para ajudar vcs, portanto não faça copycat e nem retire os créditos de qualquer coisa que eu tenha feito! Porque não vai lendo as regras enquanto a PP e o lay carregam? (: Não esquece de me linkar se usou alguma coisa daqui! :D Obriigada pelas 36 mil visitas! Isso mostra que meu trabalho está sendo valorizado e reconhecido *---*
Dúvidas, sugestões, críticas, comentários? Neomail-me com o título "Tuto de HTML da Mah", seja qual for o assunto que eu terei prazer em lhe responder. :)
REGRAS
Se não me linkar morre :K Peço gentilmente que dê os créditos à esta petpage se usar qualquer um dos meus códigos. Infelizmente, não tenho visto muitas pessoas honestas ultimamente. Me linkando, vc está ajudando na divulgação da Petpage para que outros neopianos a usem e tirem todas as suas dúvidas ^^
Nuunca, jamais, nem em sonho, nem pra banho faça copycat ou tirarei o tuto do ar e deixarei de ajudar à todos os neopianos necessitados... ;/
Seja honesto, não tire os créditos dos meus moldes ou de qualquer outra coisa que EU tenha feito!
Pode ficar a vontade para usar os códigos, só peço para que não copiem a PP e que me dê os devidos credítos se ela te ajudou, pois ela me deu muito trabalho. Copiou? Morreu! :K
Leia a F.A.Q. antes de me mandar qualquer neomail.
Por favor, se esta petpage lhe ajudou ou se você pegou qualquer coisa daqui, dê os devidos créditos. Como? Faça uma sessão de créditos na sua PP e me linke. Outras pessoas podem estar precisando de ajuda com HTML, assim como você!
Ficaram claras todas as regras? Hum! Espero não ter q me aborrecer com pessoas insolentes!
Autógrafos
À pedido de muitos fãs meus, eu decidi colocar na miinha PP autógrafos prontos pra quem quiser pegar :D (Use sem moderação :P)
Fazendo Animações
Oii :D É, sou eu de novo... Vc deve tá enjoado de mim, não é mesmo? xD Maas esse tuto é MEU, se vc naum queiser mais me ver se jogue da janela MUAHAHAHAHAHAHAH 
Maluquices à parte, vamos em frente! Fazer animações é muito fácil... Mas, vc sabe o que é uma animação? Provavelmente sim, mas se naum sabe, são imagens que se mexem, como essa:
Deu pra notar q ela se mexe né? Pronto, aqui vc vai aprender a fazer qualquer imagem se mexer! Vamos ao material que vamos usar:
- Meio copo de leite Paint ou seu programa de edição de imagens
- GIF Movie Gear
Se você quiser um brom programa de edição que não seja o paint, eu recomendo que você baixe o Photofiltre Studio. Vá no site baixaki.com.br e procure por ele. Use o mesmo site para baixar o Movie Gear (você pode usar outro GIF Animator também, mas vou ensinar aqui como fazer usando ele).
Após ter baixado o GIF Movie Gear, vá até seu programa de edição e faça uma imagem qualquer. Vou usar essa imagem:
Agora vou colorir alguns quadradrinhos, assim (não esqueça de ir em 'salvar como' e mudar o nome, senão essa imagem substituirá a inicial, e você vai precisar da imagem anterior):
Para dar o efeito de movimento, vou voltar a imagem inicial e pintar outros quadradinhos, diferentes do primeiro, assim (não esqueça de ir em 'salvar como' e mudar o nome):
Para finalizar, uma terceira imagem para dar mais movimento ainda (coloquei meu user para ninguém roubar a imagem;não esqueça de ir em 'salvar como' e mudar o nome):
Vamos para o GIF Animator agora. Instale-o e o abra. Quando abrir, vai encontrar:
Clique em 'Open File' e abra todas as imagens que você fez usando 'ctrl' para selecionar + de uma imagem. Quando abrir, vai encontrar (copie o link e cole no seu navegador):
Agora olha como ficou o meu:
Pronto, sua imagem está pronta para ser usada :D Você pode fazer com letras também:
Agora é com você, use sua criatividade e faça o que quiser :D Boa sorte ^^
Criando sua Petpage
Primeiro, o que é uma petpage? É a página do seu pet, onde você pode colocar o que quiser (menos coisas contra as regras, lógico .-.). Essa página é onde trabalharemos grande parte dos códigos e acessórios mostrados nessa PP. Petpage é popularmente conhecido como PP, podendo ser dado pelos links /~NOMEDOPET ou http://www.neopets.com/~NOMEDOPET, e nunca por http://www.neopets.com/preview_homepage.phtml. Para ver a PP de um pet, vá até o perfil dele e clique no ícone "Ver Página do Pet":
Para editá-la, clique no nome do seu Neopet, assim:
Abriu uma página com a imagem do seu Neopet e algumas informações sobre ele. Agora escolha qualquer um dos seus pets, clique na setinha branca do lado da sua foto e depois clique em "Editar página", como mostra a figura abaixo:
Abriu uma página cheia de códigos(em inglês) certo? Apague tudo! Vamos fazer a nossa PP! TODOS os códigos à seguir são para serem colocadas nessa página que você excluiu os códigos! Lembrando que não paga absolutamente NADA para fazer uma PP. Ah, também não dá pra alguém criar um Petpage pra você, dar senhas é super proibido.
Sobre o quê eu faço minha PP?
Você pode fazer uma PP de (nada de copycats, ok?):
Screens (apesar de ser comum, pode divertir muitas pessoas. Tente fazer uns bem engraçados ^^)
Restaurante (também são comuns, mas podem te render uma boa grana)
Tutoriais (são legais, só não tente fazer um sobre um assunto que você não domina, pois chegarão milhões de dúvidas)
Histórias (ótimas, mas poucas pessoas têm paciência para lê-las e-e')
Gráficos (lays, imagens fofas, contadores... Só faça se você souber ^^)
Encomendas (são muito úteis, mas, de novo, só faça se você souber fazer coisinhas legais)
Imagens engraçadas (essa é a mais fácil, você só precisa sair por aí procurando imagens legais, se pegar alguma de uma PP do neo, dê os créditos ^^)
Links diários (para quem não sabe fazer lays, essa é uma boa opição)
Moldes (é uma boa, muito útil. Mas só faça se souber mesmo fazer moldes!)
Dicas (de moda, beleza... São bem úteis para meninas :D)
Jogos (dicas de jogos, jogos fáceis para ganhar nps... Essas coisas ^^)
Awards (claro, só para distribuir seus awards)
Manual para Iniciantes (ensinar como mexer no neo, como usar o banco, loja, fóruns e etc)
Vida virtual (Um segundo jogo como o neo, com dolls, animais, moeda própria, casas... SÓ NÃO VALE COPYCAT!)
Tá vendo só? Muitos temas para você criar uma PP tudo de boom! Boa sorte :D
Códigos Básicos
Esses são os códigos que fazem coisas simples e que você vai ultizá-los quase em tudo :) . HTML significa Hyper Text Mark-up Language, é o código mais usado para a criação de Páginas da Internet. Antes de tudo, você precisa saber que todos os códigos devem estar entre os sinais . Esses sinais se chamam Tags! Quando você usa , você vai iniciar um comando. Para encerrar um comando, digite "/" (barra) depois do primeiro (Não pode ter espaço entre as Tags, a "/" e o código).
Para misturar códigos, basta pegar os q vc quer (ex: "tag"font color="xtag" e "tag"u"tag") e colocar um depois do outro ("tag"u"tagtag"font color="xtagtag"/u"tagtag"/font"tag") de modo que englobe o que vc quer :D
Para deixar seu texto em Negrito
Para duplicar este efeito Negrito
Para deixar seu texto em Itálico
Para deixar seu texto Subilinhado
Para deixar seu texto riscado
Para deixar seu texto
Na outra linha (como dar um "enter")
Para deixar seu texto um pouco maior
Para deixar seu texto um pouco menor
Para deixar seu texto no meio da página
Para fazer uma barra rolante
Para mudar a velocidade e a direção da barra rolante
Ps: Mude "5" para a velocidade desejada (entre 1 e 100). Eu recomendo velocidades entre 1 e 5. O resto é rápido demais.
Velocidade 100
Velocidade 1
Substitua "left" para a direção desejada. Você pode mudar para outras direções: left(esquerda), right(direita), down(baixo) e up(cima)
Para direita
Para cima
Para esquerda
Para baixo
Para colocar um efeito "vai-e-volta" no seu texto
Tuto de Html da Mah
Para fazer seu texto ficar indo pra cima e pra baixo
Tuto de HTML da Mah
Obrigada max_legalzinho
Para colocar um efeito zig zag no seu texto
Tuto de HTML da Mah
Troque LARGURA por uma largura (vai de 1% até 100%). Obrigada max_legalzinho
Para colocar um efeito zig zag doido no seu texto
Tuto de HTML da Mah
Troque LARGURA por uma largura (vai de 1% até 100%). Obrigada max_legalzinho
Para mudar a cor da borda da barra rolante
Borda colorida
Ps: Substitua "pink" por um código de cor (use a Tabela de cores), "2" pela largura da borda desejada e "TIPO DE LINHA" por um tipo de linha. Os seguintes tipos de linha estão disponíveis:
dashed
dotted
solid
double
groove
ridge
inset
outset
Para mudar a cor do fundo da barra rolante
Fundo colorido
Ps: Substitua "pink" pelo código da cor desejada. Use a Tabela de cores.
Para colocar uma barra rolante com borda e fundo colorido
Fundo e borda coloridos
Ps: Substitua "pink" por um código de cor, "2" pela largura da borda desejada, "TIPO DE LINHA" por um tipo de linha e "200" pela largura da barra desejada. Use a Tabela de cores.
Para mudar a cor do seu texto
Substitua "#000000" pelo código ou o nome em inglês da cor que você queira. Use a Tabela de cores.
Para colocar uma frase ou uma palavra com Link colorido
Substitua "#000000" pelo código ou o nome em inglês da cor que você queira. Use a Tabela de cores.
Para colocar um efeito legal em textos
Tuto da Mah
Troque 50 pelo tamanho desejado e "pink" pela cor desejada. Use a Tabela de cores.
Para Mudar o tamanho do texto
Ps: Os tamanhos variam de 1 á 7, mude "2" para o tamanho desejado.
Para deixar seu texto à esquerda
Para deixar seu texto à dierita
Para deixar seu texto (só funciona no IE) GIGANTE
Para mudar o tipo de letra do seu texto
Ps: Mude "verdana" para o tipo de letra desejado. Os tipos de letras disponíveis são:
Verdana
Tahoma
Georgia
Terminal
Courier
Modern
Comic Sans Ms
Times
Arial
gigi
forte
magneto
ravie
jokerman
nyala
castellar
Impact
mistral
chiller
segoe print
harrington
papyrus
pristina
Para Mudar o tamanho,cor, e o tipo de letra do texto
Ps:Mude "2" para o tamanho desejado, "green" para a cor desejada e "gigi" para o tipo de letra desejado.
Onde "size" é o tamanho.
Onde "color" é a cor
Onde "face" é o tipo de letra.
Todos foram englobados em uma única tag "font" e fechados com uma única tag "/font". Sim, isso é possível e prático, impedindo que você tenha que repetir "font" para cada código que precisar. Você pode treinar isso com outros códigos também ^^.
Fazer menus de navegação é bem fácil, são dois códigos: basta colocar o 1º código onde ficará o link desejado
Troque "Nome do Link" pelo nome do link (Ex.: Regras, Créditos, Início, Contador)
E o 2º onde a pessoa irá quando clicar no link:
Não esqueça que os números das partes dos códigos têm que coincidir!
Exemplo: O 1º você coloca onde quer que o link fique (o lugar mais comum são menus). Exemplo: O meu, quero que fique no menu de navegação. Então coloco aquele link. O 2º você coloca onde quer que a pessoa vá quando clicar nesse link . Exemplo: Na minha navegação, você clica em "Hospedando Imagens" e é direcionado à uma parte da minha PP.
Para fazer uma linha que atravessa a página inteira
Para alterar o tamanho da linha
Ps: Substitua "200" por um número qualquer.
Para mudar a cor da linha que atravessa a página inteira
Substitua "#000000" pelo código ou o nome em inglês da cor que você queira. Use a Tabela de cores.
Para alterar o tipo da linha (só funciona no IE)
Ps.: Substitua "dashed" por um tipo de linha, "1" pela largura da linha e "000000" pela cor da linha.
Para alterar o tipo (só funciona no IE), o tamanho e a cor da linha
Ps.: Substitua "dashed" por um tipo de linha, "1" pela largura da linha, "000000" pela cor da linha e "40" pelo tamanho da linha. Use a Tabela de cores.
Para colocar uma frase ou uma palavra com Link
Ps: Substitua neopets.com pelo seu link.
Nessa parte, você aprenderá a mexer com imagens.
Para colocar uma imagem link (uma imagem na qual você clica e é direcionado até outra página)
Ps: Substitua "IMAGESHACK.JPG" pela URL da sua imagem e "neopets.com" pela URL onde você quer que a pessoa seja direcionada ao clicar na imagem.
Para colocar qualquer imagem na sua PP, vc precisa da URL (é o endereço que aparece na barrinha aí de cima, onde você digita o site). Você pode pegar qualquer imagem que você não saiba a URL e é isso que eu irei mostrar agora: Como pegar a URL de uma imagem.
Primeiro, você precisa ir até a página onde vc viu a imagem. Eu vou usar como exemplo o meu lojista:
Primeiro, você deve ir até a página onde você viu a tal imagem e clicar nela com o botão direito. Em seguida, clique em "Propriedades", assim:
Agora é só copiar a URL da imagem:
Depois do "ctr+c", basta substituir "LINKDAIMG.png" no código abaixo pela URL que você acabou de copiar, usando "ctrl+v". Sua imagem agora está pronta para ir direto para a PP!
Para fazer uma imagem rolar
Troque LINKDAIMAGEM.png pelo link da sua imagem.
Para fazer uma imagem rolar alterando sua velocidade e direção
Troque LINKDAIMAGEM.png pelo link da sua imagem, "left" pela direção desejada. As direções possíveis são:left(esquerda), right(direita), down(baixo) e up(cima). Mude "5" para a velocidade desejada (entre 1 e 100).Eu recomendo velocidades entre 1 e 5. O resto é rápido demais.
Velocidade 100
Velocidade 1
Para fazer uma imagem rolar em uma borda
Substitua "pink" por um código de cor (use a Tabela de cores), "2" pela largura da borda desejada e "TIPO DE LINHA" por um tipo de linha. Os seguintes tipos de linha estão disponíveis:
dashed
dotted
solid
double
groove
ridge
inset
outset
Para colocar uma borda na sua imagem
Troque "TAMANHO" pelo tamanho da borda, "TIPODELINHA" pelo tipo de linha (citados acima) e "COR" pela cor da borda (use a Tabela de cores)
Para colocar uma imagem link com borda
Troque "TAMANHO" pelo tamanho da borda, "TIPODELINHA" pelo tipo de linha (citados acima), "COR" pela cor da borda (use a Tabela de cores) e "neopets.com" pelo link desejado.
Para fazer um efeito legal com várias imagens
Para colocar uma imagem em um canto específico da sua PP
Troque "LINKDAIMG.png" pelo link da imagem e "DIREÇÃO" pela direção desejada (left,right)
Regular o tamanho da imagem para maior 
ou menor
Troque 150 no primeiro por um número qualquer e 25 no segundo por um número qualquer.
Maas, e se você quiser colocar na sua PP uma imagem editada por você? Dirija-se à hospedando imagens.
Suas mensagens nos Fóruns
Nessa parte, eu vou falar sobre como personalizar suas mensagens nos fóruns. Para alterar suas configurações você terá que ir em Preferências nos fóruns. Você também poderá mudar o seu avatar e assinatura.
Para mudar a cor da sua mensagem nos fóruns
Ps: Troque "000000" pelo código da cor desejada.
Para colocar um nome ou palavra na parte superior da sua mensagem
Para colocar uma cor neste nome que fica na parte superior da sua mensagem
Ps: Substitua "#000000" pelo código da cor desejada.
ATENÇÃO!!! Os códigos anteriores foram para um nome ficar na parte de cima da mensagem! Se vc quer o nome na parte de cima e a mensagem, vc deve colocar primeiro o código do nome que fica em cima e logo em seguida vc deverá colocar os códigos seguintes. Para personalizar somente a sua mensagem:
Para colocar sua mensagem em negrito
Para colocar sua mensagem em itálico
Para colocar sua mensagem subilinhada
Para colocar sua mensagem no centro
Para mudar a cor da sua mensagem
Ps: Troque "000000" pelo código da cor desejada.
Para saber mais, visite:
Tutorial de Fontes
Hospedando Imagens
E se você quiser uma imagem editada por você e salva no seu computador? Uma imagem que não tem URL? Calma! Para isso existem os sites que hospedam as imagens salvas no seu computador. Eu uso o photobucket.com, que é simples de usar, mas para usar este, você precisa se cadastrar. Existem outros também, como o imageshack.com, que é simples de usar e não precisa fazer cadastro. Ambos os sites são inteiramente gratuitos. Aqui eu vou ensinar passo a passo nesses dois sites de hopedagem diferentes.
Photobucket
O PB é muito fácil de usar. Mostrarei aqui dos primeiros passos até a hospedagem. Primeiro, entre no site (photobucket.com). Depois clique em "Join now. It's free":
Assim que clicar, siga as instruções abaixo:
Use "ctrl" para selecionar vários arquivos. Depois de selecionar os arquivos e hospedar, clique em "return to album", passe o mouse por cima da img e pegue o "Direct Link" (2º link). Depois substitua onde está escrito "SEULINK.jpg" pelo seu link no código abaixo:
Imageshack
Primeiro, você tem que entrar no site. Copie e cole no seu navegador: "imageshack.us".
O site vai abrir. Aí você clica em "browser" e vai abrir uma janela com os seus documentos. Agora clique na imagem que você quer hospedar e depois clique em abrir, clicando em seguida em "Start Upload!" assim:
Depois você vai pegar o primeiro link, o "Direct link to image" e substitua onde está escrito "SEULINK.jpg" pelo seu link no código abaixo:
Photobucket x Imageshack
Qualidade de Hospedagem
PB: Excelente, a imagem fica sempre disponível para quando você perder o link. 
IS: A imagem dura por algum tempo, mas depois é excluida para não ocupar espaço no servidor deles, além de o link ficar disponível somente na hora da hospedagem. 
Rapidez
PB: Muito rápido.
IS: Para hospedar 1 imagem você espera alguns minutos.
Facilidade
PB: É necessário cadastro para hospedar.
IS: Não é necessário cadastro para hospedar.
: Photobucket! É, sem dúvida, o melhor site de hospedagem ^^ Vale apena fazer o cadastro :D
Fazendo Layouts (Fundos para PPs)
Para colocar somente uma cor como fundo
Para colocar uma imagem como fundo
Ps: aqui sua imagem deve ter uma URL.
Para uma imagem fixa no fundo
Caso você queira fazer um layout não contínuo (daqueles que você usa a barra de rolagem para ler o texto) até o seguinte guia:
Mas, se você quer realmente aprender como fazer um lay contínuo (daquele que o texto desce até o layout acabar), visite este exelente guia (o da minha miiga, kah, está de volta *o*):
E, se quiser aprender a fazer um layout para guild, entre:
Tuto de Lays de Guild da Ana
Moldes de Layouts
Colocarei aqui alguns moldes de lays para vcs fazerem seus próprios layouts sem terem que se preocupar com codificação. Fique a vontade para escolher qualquer um de acordo com a sua necessidade, só não retire os créditos. Você pode usá-los para a sua encomenda à vontande, contanto que não mexa nem retire os créditos. Na caixinha de fundo roxo fica o link do molde. Na outra caixinha, fica seu código. Aprenda a usar os moldes aqui. Em cima de cada caixinha, tem um exemplo da forma do molde.
Por favor, nunca tire os créditos! Não custa nada você deixar o meu link-me no molde, nada mais justo, já que fui EU quem tive um trabalhão pra fazer!
Moldes Contínuos
Molde 1
Código:
Código:
Código:
Código:
Código:
Código:
Código:
Código:
Código:
Código:
Código:
guest: Legaal! Termiinei *---*
Eu: Ótimo, maas não feche o paint com seu layout ainda! Agora hospede-o para terminarmos a primeira parte. Depois que hosperdar, seu layout estará pronto *-*. Guarde o link do layout hospedado no bloco de notas ^^.
guest:*comemora* Agora é a segunda parte, a parte da "linha", certo? :P
Eu: Exato! Agora nós vamos para a segunda parte, fazer a linha. Como muitos users têm dúvidas nessa parte, fiz uma demonstração com imagens para facilitar o seu entendimento: clique aqui. Se quiser continuar aprendendo, vá para o paint onde seu lay está aberto e clique em "Imagem", no menu superior. Em seguida clique em "Inverter/Girar". Clique em "Inverter verticalmente". Ficou de cobeça pra baixo não foi? Se não, repita o processo até ficar :P. Clique em "Imagem" e depois em "Atributos". Configure a altura para "10" e clique em Ok.
guest: Formou uma.. linha! Agora entendi o pq desse nome :P
Eu: Isso! Agora vá em "Salvar como..." para não perder seu layout. Salve tbm em .png e hospede-a. Guarde o link no bloco de notas!
guest: EStou adoorando isso *o*
Eu: Que boom ^^! Agora vamos à minha parte favoriita: Mexer com o código *-* Seei q vc jah deve ter um certo "medo" desse nome, maas vc verá como é bem fácil :D O código vai estar debaixo de cada modelo de lay, junto com o link para vc enfeitá-lo. Você pode alterar o código, mas não retire os créditos. Copie o código (o que está na caixinha debaixo da roxa, com o nome "código" em cima) no bloco de notas. Você pode usar ctrl+f para procurar as palavras abaixo. Quando achá-las, substitua:
LINKDASUALINHA.png: Pelo link da linha que vc hospedou.
LINKDOSEULAY.png: Pelo link do lay que vc hospedou.
#COR: Por um código da tabela de cores. Não se esqueça de colocar o "# na frente do código.
TAMANHO: Pelo tamanho da sua letra.
TIPO: Pelo tipo da sua letra.
Prontiinho, seu lay contínuo está pronto! Agora eh soh fazer sua PP ^^
Usando Moldes de Lays Não-contínuos
Logo abaixo, irei ensinar como fazer seu lay usando os moldes não-contínuos:
Eu: Oláá guest! Esta é a mais novidade (que já nem é tão nova assim) do meu tutorial: estou disponibilizando para vcs moldes de lays õ/ *joga confete*
guest: Eer.. Legal.. Maas, o que seriam moldes de lays? *confuso*
Eu: Moldes de Lays são usados geralmente por pessoas que não sabem ou têm preguiça de codificar seus lays, eles servem para fazer lays sem muito esforço^^. Pronto para aprender como usar o resto dos moldes?
guest: Claro! Espero que não seja difícil...
Eu: Não é não, a parte mais difícil você já deve ter aprendido (se não, não interferirá em nada aqui ;D), que é usar os moldes contínuos ^^ Esses são os moldes mais fáceis de usar :D
guest: Ufa!
Eu: Então, para começar, usaremos seu editor de imagens (exemplo:paint) e o bloco de notas. Esses, como são fáceis, ensinarei em 2 partes: Layout e Codificação. Agora, abra seu editor de imagens. Deixe ele abertinho aí, vamos usá-los daqui à pouco ^^. Primeira parte: Layout - Copie a URL que está na caixinha com fundo roxo e cole no seu navegador (onde vc digita o site que quer visitar). Quando a imagem abrir, vc clica nela com o botão esquerdo do mouse, depois com o botão direito. Agora clica em copiar e cola no seu editor de imagens.
guest: Pronto. O que faço agora? *u*
Eu: Agora vc irá enfeitar o seu layout do jeito que vc quiser. Só não mexa na posição das caixinhas!!! Fora isso, vc pode enfeitá-lo à vontade, colando imagens, textos, palavras... Não se esqueça de salvar, quando terminar, no formato .png!! Copie o link a seguir e cole no seu navegador, ele te ensinará melhor a como mexer no paint:
guest: Legaal! Termiinei *---*
Eu: Ótimo, maas não feche o paint com seu layout ainda! Agora hospede-o para terminarmos a primeira parte. Depois que hosperdar, seu layout estará pronto *-*. Guarde o link do layout hospedado no bloco de notas ^^.
guest:*comemora*
Eu: Isso, estamos terminando! Agora vamos à minha parte favoriita: Mexer com o código *-* Seei q vc jah deve ter um certo "medo" desse nome, maas vc verá como é bem fácil :D O código vai estar debaixo de cada modelo de lay, junto com o link para vc enfeitá-lo. Você pode alterar o código, mas não retire os créditos. Copie o código (o que está na caixinha debaixo da roxa, com o nome "código" em cima) no bloco de notas. Você pode usar ctrl+f para procurar as palavras abaixo. Quando achá-las, substitua:
LINKDOSEULAY.png: Pelo link do lay que vc hospedou.
#COR: Por um código da tabela de cores. Não se esqueça de colocar o "# na frente do código.
TAMANHO: Pelo tamanho da sua letra.
TIPO: Pelo tipo da sua letra.
Prontiinho, seu lay não-contínuo está pronto! Não é fácil? Agora eh soh fazer sua PP ^^
Layouts Prontos
Agora vou disponibilizar aqui layouts feitos por mim (outros deixei que outras pessoas fizessem ^^). Peço de novo para que não retirem os créditos. Se eu ver uma única petpage que retirou os créditos, eu tiro os lays. Aqui, é só copiar e colar o código do layout e escrever seu texto onde tem "TEXTO DA CAIXINHA AQUI!". Nada além disso, o lay vem prontinho pra vc :D Então, quem será o primeiro a usar? *-* (Clique e arraste a miniatura do lay até o topo da página para vizulizá-lo maior)
Estou aceitando layouts de users com as seguintes condições:
- Saber fazer lays contínuos e não contínuos
- Saber codificar lays contínuos e não continuos
- O lay deve ser inteiramente de sua autoria
- Deve constar no lay, junto com o seu crédito, o nome "Tuto de HTML da Mah" ou "/~amandinha159753
- Imagens ou outros enfeites para o lay não poderão ser pegas de outras petpages
- Seu lay passará por uma avaliação minha, podendo ser ou não aprovado
- Se aprovado, seu lay passará por algumas alterações, o lay alterado só será colocado se você permitir
- Lays multipáginas e copycats não serão aceitos
É, acho que é só isso. Se quiser participar, faça um dentro dessas regrinhas e quando estiver todo pronto, coloque em uma PP e mande o link por neomail para mim. Boa sorte :D
Lay "Dark"
Apareceu uma roda com várias cores né? Pois bem, clique em uma cor do círculo de dentro e em outra do círculo menor para ver se elas combinam. Aí é só escolher as cores que você quer. Agora você terá que prestar bastante atenção: clique no "Non Java.script" e só pegue o segundo link (o que vai estar depois de "img src="). Copie até o final das aspas ("). Sem esse passo, seu widget não funcionará! Agora, substitua "LINKDOWIDGET.JPG" no código abaixo pelo link que você pegou:
Só faço um pedido: Não retirem os créditos, por favor (; Pronto, seu widget está pronto :D
Se preferir, tenho alguns modelos prontos, pode pegar sem me consultar, contanto que deixe os meus créditos (não sugiro que você os coloque na sua PP, pois como esses contadores são usados por várias pessoas, o número de pessoas online será grande e falso. Mas se você não conseguir fazer o seu, sinta-se à vontade):
Amarelo e Preto
Azul claro e Preto
Verde claro e Preto
Roxo e branco
Azul e branco
Vermelho e branco
Petro e branco
Fazendo Link-mes e Awards
Beem, essa parte é muuiiitoo fácil! Link-mes e awards são bem parecidos no modo de fazer. Copie o link a seguir e cole no seu navegador, ele te ensinará melhor a como mexer no paint:
Se você quiser um link-me, desenhe o seu link-me no paint (coloque seu user embaixo bem pequeno, só para ninguém roubar sua imagem) e salve no formato ".png" (pode apenas clicar em savar e em Ok, mas salvando nesse formato, a imagem ficará mais conservada). Depois hospede-o e substitua "www.neopets.com" no código abaixo pelo site que você quer que a pessoa que clicar na imagem seja direcionada (Exemplo: Eu estou no site neopets. Clico na imagem do seu link-me e vou para a sua PP, seu perfil, sua loja, sua galeria ou outra coisa. Coloque um link que seja relacionado a você, para ninguém roubar sua imagem). Substitua também "LINKDAIMAGEM.png" pelo link que você pegou da sua imagem ao hospedá-la. O código é o seguinte:
Se quiser, vc também pode usar border="0" para que não apareça nenhuma borda no seu link-me, assim:
Prontiinho! Seu link-me está feito! Agora é só colocá-lo em uma petpage sua e usar o código de fazer Caixas de Texto para colocar o código do seu link-me dentro para que as pessoas possam pegá-los :D
Se você quiser fazer um award, desenhe seu award no paint (coloque seu user embaixo bem pequeno, só para ninguém roubar sua imagem) e salve no formato ".png" (pode apenas clicar em savar e em Ok, mas salvando nesse formato, a imagem ficará mais conservada). Depois hospede-o e substitua "www.neopets.com" no código abaixo pelo site que você quer que a pessoa que clicar na imagem seja direcionada (Exemplo: Eu estou no site neopets. Clico na imagem do seu link-me/award e vou para a sua PP, seu perfil, sua loja, sua galeria ou outra coisa. Coloque um link que seja relacionado a você, para ninguém roubar sua imagem). Substitua também "LINKDAIMAGEM.png" pelo link que você pegou da sua imagem ao hospedá-la. O código é o seguinte:
Se quiser, vc também pode usar border="0" para que não apareça nenhuma borda no seu award, assim:
Prontiinho! Seu award está feito! Agora é só colocá-lo em uma petpage sua e usar o código de fazer Caixas de Texto para colocar o código do seu award dentro para que as pessoas possam pegá-los :D
Awards Recebidos
Coloquei os awards que recebi em outro petpage, para que essa não fique tão cheia de imagens ^^
Clique!
Gostou do meu tutorial guest? Ele te ajudou? Usou alguma coisa daqui? Não gostou? Então me linka! :D Sintá-se à vontade para pegar o que mais gostar (ou, se preferir, todos :F) e colocar na sua linda petpage (:
No momento, nós disponibilizamos de 10 tipos de link-mes.
NOVO!Link-me para meninos!
Aqui ficarão as perguntas que eu recebo por neomail frequentimente. Leia-as antes de me enviar qualquer neomail, sua dúvida pode estar aqui:
1 - Você faz Layouts para Petpages?
Não. Maas, se vc me pegar num dia que eu estiver entediada e de bom humor... Quem sabe?! Só não insista!
2 - Você faz contadores?
Nãão! Teem na PP esninando!
3 - Posso te linkar/colocar sua plaquinha na minha PP / loja / perfil?
Claroo que podee! Não precisa me mandar neomails perguntando isso! Falem pro seus neoamigos me linkarem/colocarem minha plaquinha também! ;)
4 - Como eu coloco aquelas caixinhas para a pessoa pegar o código? Está tudo beem explicadinho aqui, olhe bem no topo de onde o link te mandar. Mas se você não achou, procure na navegação por: "Caixas de Texto". (:
5 - Posso copiar seu lay?Resposta óbivia: NÃO! Poor favor, não fiique me enviiando nms perguntando isso ;)
6 - Posso copiar alguns códigos do seu tuto e colocar na minha PP? Resposta: NÃO! Geente, deu muito trabalhoo meeesmo fazer esse tutorial para vcs. See eu veer isso, desativo o tuto e denunciio a pessoa na hora! u.u
7 - Como coloco o nome do user que está visitando minha PP? Bem, isso é bem simples. Basta colocar o código #VISITO.R sem o ponto final ^^
8 - Eu segui seu tutorial para fazer um link-me, fiz e deu certo mas na hora de colocar na PP, não apareceu ''salvar mudanças''. O que eu faço? Bom, primeiro você deve se certificar que colocou a barra no último "TEXTAREA"... Se vc colocou e continua tendo est problema, tente tirar o último "/div" depois do seu texto.
9 - O conteúdo da minha PP ultrapassa a caixa de códigos, ficando embaixo dela. Será que extourei o limite de caractéres? Não, até porque PPs não tem limite de caractéres. O problema é do "TEXTAREA" que vc usa. Usando "TEXTAREA" não tem problema, mas se você usa "textarea", sempre dará bug.
10 - Tô fazendo um lay com os seus moldes, mas, quando eu vou colocar o link no navegador, aparece a imagem e uma lupa que você clica no molde e ele aumenta... Se eu fazer um lay com ele aumentado do mesmo jeito vai dar certo? Você deve fazer com ele grande, senão ele ficará pequeno demais, além de mal codificado ^^
11 - Me ensina a fazer lays multipáginas? Desculpa, esse se faz com CSS, minha área é HTML. Não pretendo ensiná-lo aqui e muito menos dá uma aula exclusiva para você (; Também nem me peça para fazer 1 pra você. Chega de neomails perguntando sobre isso!
Extras
Aqui você encontrará
Dicas | Homenagens | Personalizando Lojas
Personalizando Lojas
Personalizar sua loja é muito fácil. Passe o mouse em 'Lojas', depois clique em 'Sua Loja'.
Depois em 'Criar/Editar Sua Loja' e desça um pouco quando abrir.
Ao descer você vai ver uma caixa de texto grande, é ali onde vc vai colocar os códigos de HTML. Não sei o motivo, mas nas lojas o código 'a -disallowed_word- não funciona. Lá vc pode colocar backs e lays para lojas (meus moldes não servem). Veja algumas PPs logo abaixo.
Dicas
PPs Legais
Vou pôr aqui PPs que vc pode usar para deixar a sua muito mais bonnita! Só não abuse - PPs enfeitadas demais ficam feias. :D Aah, e não esqueçam de colocar os créditos ;)
*Gray Hearts Códigos de Músicas*
Coisas de Crepúsculo
Cursores Animados
Ícones e Layouts
Encomendas da Poo
Tutorial de Screens
Layouts
Músicas
Ícones
Ícones de Crespúsculo
Lays com CSS
Layouts com CSS
Glitters
Backgrounds
Gifs
Layouts (PPs/Guilds)
Graphics
Layouts
Cursores
Cursores
Enfeites para Layouts
Mini Adopts II
Links da Cigarra
Músicas
Gifs
Gifs Fofos
Makeables e Kaoanis
Lembrando que para colocar cursores: Copie o código de um que você tenha gostado e cole em primeiro lugar (até mesmo antes do código do lay) na sua PP. Para colocar músicas: Copie o código de uma que você tenha gostado e cole em primeiro lugar (até mesmo antes do código do lay, pode ser embaixo ou em cima do cursor) na sua PP.
Homenagens
Aqui ficarão algumas homenagens que pessoinhas muuito legais fiizeram para mim *o*
_helo_s2_: Feez uma PP das suas melhores amiigas *-*
Sobre a Mah: Feez uma PP exclusivamente falando sobre miim (não posso acreditar *-*). Obriigada *.*
Adoramos a Mah: Valeuu, essa PP fiicou muiitíssimo mara *------*
Links da Samy: Meu tuto é a melhor PP do mês *dança*
Quase tudo sobre a Mah & Quase tudo sobre a Mah²: Ouun, meus fãs sempre tão carinhosos *--* Mais 2 lindas PPs sobre mim, ficaram muiito lindas cortacor_forever (: Valeuzão *--*
Estefany025: Um dia desses recebi um lindo neomail de uma fã da minha PP, amei *-* Obrigada :* Copie o link a seguir e cole no seu navegador:
Gabriela_hk4: A melhor PP de 2009 *o* Aah, e olha o que eu ganhei (Dinha: Olhaa mamãe, sou eu *-*):
Tutorial do Mothi: Fui a PP destaque de dezembro na PP da Sue, além de ter um lugar especial falando o seguinte sobre o meu tuto:
Comentário: A 'Petpage Destaque' do mês de Dezembro é... Tutorial de HTML da Mah.
Bem, este tuto tem vindo a se destacar cada vez mais ao longo do tempo, foi tendo sucesso e é hoje em dia um dos mais famosos e melhores tutoriais de HTML e não só. O Tutorial de HTML da Mah contém ainda tutoriais de NeoHTML, Moldes de Lays, Tutorial de Contadores, Link-me's e Awards.
Sua estética é muito própria, a dona da petpage (Marcela) tem a particuliridade de fazer ela mesma os seus lays, usando novos metódos como o Lay de Multiplaspáginas.
É por estas razões que este Tuto é a Petpage Destaque deste mês, sendo que é tambem a primeira de muitas 'Petpage Destaque
Parabens Marcela.
Comentário de Marcela:Quero só agradecer à todos que fazem do meu tuto o q ele é hoje :D" *--------*
Você fez uma homenagem pra miim e quer aparecer aqui? Me mande um neomail. :D
Personalizando Lojas
Eu tinha colocado isso antes, mas o bug do neo apagou tudo .-.
Aqui você aprenderá como deixar sua loja lindona ;) No menu do neo, passe o mouse em cima do nome "Lojas". Em seguida, clique em Sua Loja (até aí você já deveria saber, eu sei :3). Quando a página abrir, aparecerá, no menu de links um pouco acima do nome da sua loja, Criar/Editar Sua Loja. Nesta página você pode alterar o nome da sua Loja, incluir códigos nela e personalizar o seu lojista. Mas, o que interessa pra nós é o quadro vazio do lado do nome "Descrição da Loja", onde você vai usar os seus códigos. Sintá-se à vontade para escrever, colocar música, cursor, imagens, enfim, dê asas à sua imaginação ^^. Para isso, você pode usar os links da seção "Dicas", pouco mais acima. Aqui vou colocar algumas petpages de backgrounds para lojas, lembrando que eles servem também para petpages.
Fundos
Backgrounds (no fim da página)
Quer sua PP de backs aqui? neomail. :D
Tabela de cores
Obrigada à anynhabbc por me indicar um tutorial de Layouts para guilds
Pixels de Evelyn's Place
À guest por estar visitando minha PP e colaborando para a melhoriia da mesma! Obrigada! *u*
Música, cursor e minigif "new" por miim (não copie!) ^^
À HTML Basic por 2 códigos que traduzi de lá ^^
À Moldes de Link-mes pelo button de bolinhas
Você chegou ao fim do meu tutorial... Parabééns! Espero que você tenha conseguido fazer sua PP direitinho!Volte sempre que quiser!
