Ir para conteúdo
  • Cadastre-se

Curso basico e avançado de HTML


Posts recomendados

COMANDOS BÁSICOS DE HTML

 

O QUE É HTML

 

HyperText Markup Language é uma linguagem utilizada na construção de páginas WEB. Ela é composta por vários comandos que o browser interpreta e monta graficamente um resultado.

Qualquer erro que ocorra em uma página WEB, ao contrário de outras linguagens, é ignorada pelo browser.

 

O QUE SÃO OS TAGS

 

Tags são os comandos da liguagem HTML. Eles devem sempre aparecer entre os sinais de menor e maior (< >). Além disso eles têm uma sintaxe de "liga" e "desliga", por exemplo:

 

<center>Texto a ser centralizado</center>

 

Não existe nenhuma diferenciação entre maiúsculas e minúsculas.

 

 

FORMATO DE UM ARQUIVO HTML

 

Um arquivo HTML deve conter alguns comandos básicos, apesar de que o browser pode até interpretar o arquivo sem eles.

São eles:

 

<html>...</html> indica que comandos HTML se encontrarão entre os tags. Eles indicam o início e o fim do arquivo.

<head>...</head> indica o cabeçalho da página, com diversas informações como por exemplo o título.

<title>...</title> especifica o título da página que é mostrado na barra de títulos do navegador.

<body>...</body> contém o corpo do arquivo HTML, ou seja o conteúdo em si da página, com todos os demais comandos que a compõe.

 

VAMOS EXERCITAR

 

Para isso você vai precisar do Bloco de notas e do seu navegador de Internet abertos ao mesmo tempo, após digitar os comandos no Bloco de notas você deverá salvar o documentos com extensão .html, por exemplo index.html. Sua página inicial deverá ser salva com o nome de index.html, as demais você poderá salvar como o nome que quizer, mas sempre nomeescolhido.html .

No navegador você irá abrir seu arquivo salvo em html e visualizar, quando fizer alguma alteração no Bloco de notas salve e após atualize o navegador e veja as alterações.

 

Vejamos um exemplo de arquivo html:

 

<html>

<head>

<title>Alo mundo!</title>

</head>

<body>

Alo mundo! Este e o meu primeiro arquivo HTML!

</body>

</html>

 

Vejamos o resultado deste código:

ht1q.jpg

 

Vejamos a seguir os principais comandos para a criação de páginas simples HTML.

 

 

Cabeçalho

 

Como o próprio nome diz são formatos de texto próprios para cabeçalho.

<h1>...</h1> Este forma um cabeçalho com letras grandes

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6> Este forma um cabeçalho com letras pequenas

 

Entre eles as letras vão diminuindo de tamanho. Por exemplo

 

<html>

<head>

<title>Exemplo de Cabecalho</title>

</head>

<body>

<h1>Exemplo de cabecalho h1</h1>

<h2>Exemplo de cabecalho h2</h2>

<h3>Exemplo de cabecalho h3</h3>

<h4>Exemplo de cabecalho h4</h4>

<h5>Exemplo de cabecalho h5</h5>

<h6>Exemplo de cabecalho h6</h6>

</body>

</html>

 

Aqui está o resultado:

 

ht2e.jpg

 

Paragrafos

 

 

Existe duas maneiras de se criar quebra de linha:

<p> Para criar um parágrafo novo, ou seja pulando uma linha.

<br> Para ir para a linha de baixo

 

Por exemplo:

<html>

<head>

<title>Exemplo de Parágrafos</title>

</head>

<body>

Este e o primeiro paragrafo.<p>Este e

o segundo paragrafo<p> Este e o terceiro paragrafo com<br>quebra de linha

</body>

</html>

Como resultado temos:

 

ht3c.jpg

 

Barra de Divisão

 

A barra de divisão serve para colocar uma separação entre um texto e outro. Deve ser usado o seguinte TAG:

<hr>

 

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Barra de Divisão</title>

</head>

<body>

Este e o primeiro conjunto de texto.<p>

<hr>

Este e o segundo conjunto de texto.

</body>

</html>

Veja o resultado:

 

ht4y.jpg

 

Alinhamento

 

Para alinhar um parágrafo, usaremos um parâmetro do tag <p>:

<p align=>

Podemos usar as opções:

<p align=left> ... </p> É o padrão e alinha o texto à esquerda.

<p align=right> ... </p> Alinha o texto à direita.

<p align=center> ... </p> Centraliza o texto.

 

Vejamos um exemplo:

<html> <head> <title>Exemplo de Barra de Alinhamento</title> </head> <body> <p align=left>Alinha o texto a esquerda.</p> <p align=right>Alinha o texto a direita.</p> <p align=center>Centraliza o texto.</p> </body> </html>

Veja o resultado:

 

ht5.jpg

 

Cores

 

Para trabalharmos com cor, usaremos um parâmetro do TAG <body>, mas antes disso temos que saber como funciona o processo de criação de uma cor em HTML.

HTML usa o padrão de codificação RGB em hexadecimal. RGB (Red Green Blue) usa a quantidade de cada uma das cores básicas (vermelho, verde e azul) para se criar uma cor.

Para se formar uma cor usa-se a seguinte codificação:

#RRGGBB

 

onde:

RR indica um número com a quantidade de vermelho (de 00 à FF)

GG indica um número com a quantidade de vermelho (de 00 à FF)

BB indica um número com a quantidade de vermelho (de 00 à FF)

Por exemplo:

Branco -> #FFFFFF

Preto -> #000000

Vermelho -> #FF0000

Verde -> #00FF00

Azul -> #0000FF

Usaremos os seguintes parâmetros do TAG <body>:

Bgcolor Cor do fundo.

Text Cor do texto.

Link Cor do link.

Alink Cor do link no momento que é acessado.

Vlink Cor do link anteriormente visitado.

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Cores</title>

</head>

<body bgcolor=#000000 text=#FFFFFF link=#FF0000 alink=#00FF00 vlink=#0000FF>

Exemplo do uso de cores </body>

</html>

 

Veja o resultado:

 

ht6.jpg

 

Imagens

 

Existem dois tipos de imagens que podemos utilizar: papel de parede e imagens própriamente ditas.

Vejamos primeiro um papel de parede. Para isso vamos colocar outro parâmetro do TAG <body>:

 

Vejamos um exemplo:

<html>

<head>

<title>Exemplo de Papel de Parede</title>

</head>

<body background="c:\imagens\figura1.jpg">

Este texto vem por cima da figura.

</body>

</html>

Veja o resultado:

 

ht7.jpg

 

Agora usaremos o TAG </IMG> para adicionarmos uma imagem na página acima:

<html>

<head>

<title>Exemplo de Imagens</title>

</head>

<body background="c:\imagens\figura1.jpg">

Este texto vem por cima da figura1.

<img src="http://www.teste.com/figura2.gif">

E este vem ao lado.

</body>

</html>

Veja o resultado:

 

ht8d.jpg

 

Hyperlinks

 

Hyperlinks são comandos HTML para conectarmos páginas independentes umas com as outras, ou até mesmo uma conexão para algum arquivo.

Para isso usaremos o TAG </a> e seu parâmetro href.

 

Veja o exemplo:

<html>

<head>

<title>Exemplo de Hyperlinks</title>

</head>

<body>

Esta frase vem antes desta

<a href="http://www.teste.com/pagina.html">

serie de palavras</a>que ligam o texto a outra pagina.

</body>

</html>

E este é o resultado:

 

ht9r.jpg

 

 

Editado por RevOltadO

...

Link para o comentário
Compartilhar em outros sites


RR indica um número com a quantidade de vermelho (de 00 à FF)

GG indica um número com a quantidade de vermelho (de 00 à FF)

BB indica um número com a quantidade de vermelho (de 00 à FF)

 

Já sabe o que tá errado né?

 

De tudo muito bom o guia. Basicão mesmo. Não é aquele guia que o cara lê e já sai fazendo site, mas sem saber isso não faz nada.

 

Uma pergunta: no L2 tem as tags <br> e <br1>, acho que a <br1> é um espaçamento menor que a <br>

 

Existe alguma relação?

 

Abraços o/

Link para o comentário
Compartilhar em outros sites

  • 5 months later...
  • 3 weeks later...
  • 1 year later...

Nossa veio , voce ressucita o topico pra corrigir 1 erro de portugues ?

 

tenso voce nao acha ?

cyCrFTF.jpg

Obrigado pelo presente Mickaelll

Corintiano Fanático;

Estudante de T.I e l2jbrasileiro nas horas vagas.

Link para o comentário
Compartilhar em outros sites

  • 2 years later...

Microcamp é bom :lol:

 

faço lá Inglês,Espanhol,Web designer e Ti(Tecnologia da imformação)

parabéns pelo tutorial lá vai um pedido

 

tem como mudar o tipo de letra tipo arial, verdana, etc..

 

ah.. nas html de npc dntro do jogo ^^

Editado por Sr.Dos.Aneis

iais.gif

Link para o comentário
Compartilhar em outros sites

  • 2 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Visitante
Responder

×   Você colou conteúdo com formatação.   Remover formatação

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...
  • Registre-se

    Faça parte da maior e  mais antigas comunidades sobre Lineage2 da América Latina.





  • Patrocinadores

  • Quem Está Navegando

    • Nenhum usuário registrado visualizando esta página.
  • Posts

    • Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?     Teria como fazer do dusk shield e do zombie shield dessa maneira?    
    • muchas gracias muy lindos NPC 🙂
    • relaxa jovem gafanhoto, testa as quests. e posTa os erros indesejaveis.  
    • Se alguém pudesse me ensinar como codificar as missões, eu ficaria feliz em fazer isso sozinho ou pelo menos ajudar. Eu realmente quero jogar em um servidor onde todas as quests funcionem bem e melhor ainda se você puder fazer quests customizadas!
    • mas no interlude, nem todas as quests de class,  vai mostrar onde tem que ir, ate o reborn nao mostrava quando era interlude, só mostrou depois que eles colocaram client classic pra rodar, e ficou melhor ainda quando virou hellbound em diante, mas ha sim alguma chance de modificar isso direto no script para fazer igualmente, só basta te um pouco de paciencia e persistencia exato
    • 408_PathToElvenwizard dá Orion eu tive que mexer tbm, até modifiquei e consegui deixar ela igual do Classic, com a seta e a marcação no mapa. (não retail IL) Dá pra importar py de várias revs, o foda é que não da regular as quest py através do debug em tempo real, pelo menos eu não consegui rsrs
    • Hasta el momento todas las QUESTS son completables si te guias con un tutorial de youtube. El problema es que tienen bugs de locacion y de subquests que no avanzan o no te marcan correctamente a donde ir en el mapa, cosa que en Retail si se ve como corresponde.
    • estranho, mas pelo menos a galera nunca reclamo das quests quando tinha aberto 5x, geral fez class primeira e segunda job, poucos que compraram a class
    • en RUSaCis-3.5 data pack, las Quests estan en formato .java y son diferentes a como estan redactadas en jOrion y jFrozen 1.5 (ProyectX) package net.sf.l2j.gameserver.scripting.quest; import net.sf.l2j.commons.random.Rnd; import net.sf.l2j.gameserver.enums.Paperdoll; import net.sf.l2j.gameserver.enums.QuestStatus; import net.sf.l2j.gameserver.enums.actors.ClassId; import net.sf.l2j.gameserver.model.actor.Creature; import net.sf.l2j.gameserver.model.actor.Npc; import net.sf.l2j.gameserver.model.actor.Player; import net.sf.l2j.gameserver.network.serverpackets.SocialAction; import net.sf.l2j.gameserver.scripting.QuestState; public class Q224_TestOfSagittarius extends SecondClassQuest { private static final String QUEST_NAME = "Q224_TestOfSagittarius"; // Items private static final int BERNARD_INTRODUCTION = 3294; private static final int HAMIL_LETTER_1 = 3295; private static final int HAMIL_LETTER_2 = 3296; private static final int HAMIL_LETTER_3 = 3297; private static final int HUNTER_RUNE_1 = 3298; private static final int HUNTER_RUNE_2 = 3299; private static final int TALISMAN_OF_KADESH = 3300; private static final int TALISMAN_OF_SNAKE = 3301; private static final int MITHRIL_CLIP = 3302; private static final int STAKATO_CHITIN = 3303; private static final int REINFORCED_BOWSTRING = 3304; private static final int MANASHEN_HORN = 3305; private static final int BLOOD_OF_LIZARDMAN = 3306; private static final int CRESCENT_MOON_BOW = 3028; private static final int WOODEN_ARROW = 17; // Rewards private static final int MARK_OF_SAGITTARIUS = 3293; // NPCs private static final int BERNARD = 30702; private static final int HAMIL = 30626; private static final int SIR_ARON_TANFORD = 30653; private static final int VOKIAN = 30514; private static final int GAUEN = 30717; // Monsters private static final int ANT = 20079; private static final int ANT_CAPTAIN = 20080; private static final int ANT_OVERSEER = 20081; private static final int ANT_RECRUIT = 20082; private static final int ANT_PATROL = 20084; private static final int ANT_GUARD = 20086; private static final int NOBLE_ANT = 20089; private static final int NOBLE_ANT_LEADER = 20090; private static final int BREKA_ORC_SHAMAN = 20269; private static final int BREKA_ORC_OVERLORD = 20270; private static final int MARSH_STAKATO_WORKER = 20230; private static final int MARSH_STAKATO_SOLDIER = 20232; private static final int MARSH_STAKATO_DRONE = 20234; private static final int MARSH_SPIDER = 20233; private static final int ROAD_SCAVENGER = 20551; private static final int MANASHEN_GARGOYLE = 20563; private static final int LETO_LIZARDMAN = 20577; private static final int LETO_LIZARDMAN_ARCHER = 20578; private static final int LETO_LIZARDMAN_SOLDIER = 20579; private static final int LETO_LIZARDMAN_WARRIOR = 20580; private static final int LETO_LIZARDMAN_SHAMAN = 20581; private static final int LETO_LIZARDMAN_OVERLORD = 20582; private static final int SERPENT_DEMON_KADESH = 27090; public Q224_TestOfSagittarius() { super(224, "Test Of Sagittarius"); setItemsIds(BERNARD_INTRODUCTION, HAMIL_LETTER_1, HAMIL_LETTER_2, HAMIL_LETTER_3, HUNTER_RUNE_1, HUNTER_RUNE_2, TALISMAN_OF_KADESH, TALISMAN_OF_SNAKE, MITHRIL_CLIP, STAKATO_CHITIN, REINFORCED_BOWSTRING, MANASHEN_HORN, BLOOD_OF_LIZARDMAN, CRESCENT_MOON_BOW); addQuestStart(BERNARD); addTalkId(BERNARD, HAMIL, SIR_ARON_TANFORD, VOKIAN, GAUEN); addMyDying(ANT, ANT_CAPTAIN, ANT_OVERSEER, ANT_RECRUIT, ANT_PATROL, ANT_GUARD, NOBLE_ANT, NOBLE_ANT_LEADER, BREKA_ORC_SHAMAN, BREKA_ORC_OVERLORD, MARSH_STAKATO_WORKER, MARSH_STAKATO_SOLDIER, MARSH_STAKATO_DRONE, MARSH_SPIDER, ROAD_SCAVENGER, MANASHEN_GARGOYLE, LETO_LIZARDMAN, LETO_LIZARDMAN_ARCHER, LETO_LIZARDMAN_SOLDIER, LETO_LIZARDMAN_WARRIOR, LETO_LIZARDMAN_SHAMAN, LETO_LIZARDMAN_OVERLORD, SERPENT_DEMON_KADESH); } @Override public String onAdvEvent(String event, Npc npc, Player player) { String htmltext = event; QuestState st = player.getQuestList().getQuestState(QUEST_NAME); if (st == null) return htmltext; // BERNARD if (event.equalsIgnoreCase("30702-04.htm")) { st.setState(QuestStatus.STARTED); st.setCond(1); playSound(player, SOUND_ACCEPT); giveItems(player, BERNARD_INTRODUCTION, 1); if (giveDimensionalDiamonds39(player)) htmltext = "30702-04a.htm"; } // HAMIL else if (event.equalsIgnoreCase("30626-03.htm")) { st.setCond(2); playSound(player, SOUND_MIDDLE); takeItems(player, BERNARD_INTRODUCTION, 1); giveItems(player, HAMIL_LETTER_1, 1); } else if (event.equalsIgnoreCase("30626-07.htm")) { st.setCond(5); playSound(player, SOUND_MIDDLE); takeItems(player, HUNTER_RUNE_1, 10); giveItems(player, HAMIL_LETTER_2, 1); } // SIR_ARON_TANFORD else if (event.equalsIgnoreCase("30653-02.htm")) { st.setCond(3); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_1, 1); } // VOKIAN else if (event.equalsIgnoreCase("30514-02.htm")) { st.setCond(6); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_2, 1); } return htmltext; } @Override public String onTalk(Npc npc, Player player) { String htmltext = getNoQuestMsg(); QuestState st = player.getQuestList().getQuestState(QUEST_NAME); if (st == null) return htmltext; switch (st.getState()) { case CREATED: if (player.getClassId() != ClassId.ROGUE && player.getClassId() != ClassId.ELVEN_SCOUT && player.getClassId() != ClassId.ASSASSIN) htmltext = "30702-02.htm"; else if (player.getStatus().getLevel() < 39) htmltext = "30702-01.htm"; else htmltext = "30702-03.htm"; break; case STARTED: int cond = st.getCond(); switch (npc.getNpcId()) { case BERNARD: htmltext = "30702-05.htm"; break; case HAMIL: if (cond == 1) htmltext = "30626-01.htm"; else if (cond == 2 || cond == 3) htmltext = "30626-04.htm"; else if (cond == 4) htmltext = "30626-05.htm"; else if (cond > 4 && cond < 8) htmltext = "30626-08.htm"; else if (cond == 8) { htmltext = "30626-09.htm"; st.setCond(9); playSound(player, SOUND_MIDDLE); takeItems(player, HUNTER_RUNE_2, 10); giveItems(player, HAMIL_LETTER_3, 1); } else if (cond > 8 && cond < 12) htmltext = "30626-10.htm"; else if (cond == 12) { htmltext = "30626-11.htm"; st.setCond(13); playSound(player, SOUND_MIDDLE); } else if (cond == 13) htmltext = "30626-12.htm"; else if (cond == 14) { htmltext = "30626-13.htm"; takeItems(player, BLOOD_OF_LIZARDMAN, -1); takeItems(player, CRESCENT_MOON_BOW, 1); takeItems(player, TALISMAN_OF_KADESH, 1); giveItems(player, MARK_OF_SAGITTARIUS, 1); rewardExpAndSp(player, 54726, 20250); player.broadcastPacket(new SocialAction(player, 3)); playSound(player, SOUND_FINISH); st.exitQuest(false); } break; case SIR_ARON_TANFORD: if (cond == 2) htmltext = "30653-01.htm"; else if (cond > 2) htmltext = "30653-03.htm"; break; case VOKIAN: if (cond == 5) htmltext = "30514-01.htm"; else if (cond == 6) htmltext = "30514-03.htm"; else if (cond == 7) { htmltext = "30514-04.htm"; st.setCond(8); playSound(player, SOUND_MIDDLE); takeItems(player, TALISMAN_OF_SNAKE, 1); } else if (cond > 7) htmltext = "30514-05.htm"; break; case GAUEN: if (cond == 9) { htmltext = "30717-01.htm"; st.setCond(10); playSound(player, SOUND_MIDDLE); takeItems(player, HAMIL_LETTER_3, 1); } else if (cond == 10) htmltext = "30717-03.htm"; else if (cond == 11) { htmltext = "30717-02.htm"; st.setCond(12); playSound(player, SOUND_MIDDLE); takeItems(player, MANASHEN_HORN, 1); takeItems(player, MITHRIL_CLIP, 1); takeItems(player, REINFORCED_BOWSTRING, 1); takeItems(player, STAKATO_CHITIN, 1); giveItems(player, CRESCENT_MOON_BOW, 1); giveItems(player, WOODEN_ARROW, 10); } else if (cond > 11) htmltext = "30717-04.htm"; break; } break; case COMPLETED: htmltext = getAlreadyCompletedMsg(); break; } return htmltext; } @Override public void onMyDying(Npc npc, Creature killer) { final Player player = killer.getActingPlayer(); final QuestState st = checkPlayerState(player, npc, QuestStatus.STARTED); if (st == null) return; switch (npc.getNpcId()) { case ANT: case ANT_CAPTAIN: case ANT_OVERSEER: case ANT_RECRUIT: case ANT_PATROL: case ANT_GUARD: case NOBLE_ANT: case NOBLE_ANT_LEADER: if (st.getCond() == 3 && dropItems(player, HUNTER_RUNE_1, 1, 10, 500000)) st.setCond(4); break; case BREKA_ORC_SHAMAN: case BREKA_ORC_OVERLORD: if (st.getCond() == 6 && dropItems(player, HUNTER_RUNE_2, 1, 10, 500000)) { st.setCond(7); giveItems(player, TALISMAN_OF_SNAKE, 1); } break; case MARSH_STAKATO_WORKER: case MARSH_STAKATO_SOLDIER: case MARSH_STAKATO_DRONE: if (st.getCond() == 10 && dropItems(player, STAKATO_CHITIN, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, MITHRIL_CLIP, REINFORCED_BOWSTRING)) st.setCond(11); break; case MARSH_SPIDER: if (st.getCond() == 10 && dropItems(player, REINFORCED_BOWSTRING, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, MITHRIL_CLIP, STAKATO_CHITIN)) st.setCond(11); break; case ROAD_SCAVENGER: if (st.getCond() == 10 && dropItems(player, MITHRIL_CLIP, 1, 1, 100000) && player.getInventory().hasItems(MANASHEN_HORN, REINFORCED_BOWSTRING, STAKATO_CHITIN)) st.setCond(11); break; case MANASHEN_GARGOYLE: if (st.getCond() == 10 && dropItems(player, MANASHEN_HORN, 1, 1, 100000) && player.getInventory().hasItems(REINFORCED_BOWSTRING, MITHRIL_CLIP, STAKATO_CHITIN)) st.setCond(11); break; case LETO_LIZARDMAN: case LETO_LIZARDMAN_ARCHER: case LETO_LIZARDMAN_SOLDIER: case LETO_LIZARDMAN_WARRIOR: case LETO_LIZARDMAN_SHAMAN: case LETO_LIZARDMAN_OVERLORD: if (st.getCond() == 13) { if (((player.getInventory().getItemCount(BLOOD_OF_LIZARDMAN) - 120) * 5) > Rnd.get(100)) { playSound(player, SOUND_BEFORE_BATTLE); takeItems(player, BLOOD_OF_LIZARDMAN, -1); addSpawn(SERPENT_DEMON_KADESH, player, false, 300000, true); } else dropItemsAlways(player, BLOOD_OF_LIZARDMAN, 1, 0); } break; case SERPENT_DEMON_KADESH: if (st.getCond() == 13) { if (player.getInventory().getItemIdFrom(Paperdoll.RHAND) == CRESCENT_MOON_BOW) { st.setCond(14); playSound(player, SOUND_MIDDLE); giveItems(player, TALISMAN_OF_KADESH, 1); } else addSpawn(SERPENT_DEMON_KADESH, player, false, 300000, true); } break; } } }  
×
×
  • Criar Novo...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.