Pesquisar na Comunidade

Olá galera do XTibia,parei com meu Projeto PokeAW,mais tenho alguns HTML que postarei ao decorrer do tempo aqui no TK. Estou trazendo pra vocês um PHP que pode ser bem útil em seu servidor,o player escolhe a forma de donate que ele queira apenas selecionando a opção Print do resultado https://imgur.com/a/1frHn OBS:Você ja deve ter as paginas dos donate pronta,esse aqui é só um "Atalho" e para deixar mais organizado no seu layout E além vem com texto's animados que pode ser removido caso não queira. Vamos lá! <center> <center> <table width="500" heigth="40" valign="middle" border="1"> <tbody> <tr> <td> <marquee direction="right" > Selecione a op&ccedil;&atilde;o que queira Donatar</marquee> </td></tr></tbody></table></center> <center> <select onchange="location.href=this.value"> <option value="Site para onde sera direcionado">PicPay</option> <option value="Site para onde sera direcionado">PagSeguro</option> <option value="Site para onde sera direcionado">Mercado Pago</option> </select> <marquee direction=down <P align="center"><center> <p style="font-size:2em;">Donatando voc&ecirc; ajuda o servidor a crescer e voc&ecirc; tamb&eacute;m tem v&#225;rias vantagens dentro do game.</p></marquee> <tr> Vamos para as explicações: Selecione a op&ccedil;&atilde;o que queira Donatar Texto animado(Da esquerda para direita)em um "Bloco" que fica em cima das opção ~~~~~~~~ Site para onde sera direcionado Sera o site para onde ira direcionar apos ter selecionado a opção. ~~~~~~~~ PicPay PagSeguro Mercado Pago Sera os nomes da opção,no caso o donate. ~~~~~~~~ Donatando voc&ecirc; ajuda o servidor a crescer e voc&ecirc; tamb&eacute;m tem v&#225;rias vantagens dentro do game. É a mensagem animada(De cima para baixo) onde irá aparecer no site logo embaixo das opção. OBS:Esses códigos na letras são em HTML,para deixa-los com acento(Tipo é,ã,ç)etc... Qualquer duvida não insista em perguntar.

Olá galera do XTibia,venho por meio desse tópico disponibilizar um HTML que consiste em montar uma tabela para diversas utilidades. Eu tenho alguns HTML feito por min,talvez eu disponibilize aki no tk. Então sem enrrolação vamos lá. A tabela pode ser montada de diversos jeito,eu montei para uma lista de pokemon Shiny(Print da tabela feita https://imgur.com/a/HL91L ) Para adiciona-lo em seu site vá em htdocs>system>pages: Agora crie um arquivo .PHP e cole isso dentro <table border="1"> <tr> <th>Pokemon</th> <th>Forma Shiny</th> <th>Quantidade de Shiny stone</th> </tr> <tr> <td>Venusaur</td> <td>Shiny Venusaur</td> <td>7</td> Explicação: Venusaur:Nome do pokemon Shiny Venusaur:Transformação para shiny 7:Quantidade de Shiny stone Você pode usar essa tabela para outras coisas,não só para tabela de pokemons shinys,é só altera-la da maneira que você quiser. <table border="1"> <tr> <th>Primeira Tag</th> <th>Segunda tag</th> <th>Terceira tag</th> </tr> <tr> <td>Sequencia da primeira tag</td> <td>Sequencia da terceira tag</td> <td>Sequencia da terceira tag</td> Caso queira remover uma coluna Apague <th>Terceira tag</th> <td>Sequencia da terceira tag</td> Caso queira adicionar uma outra coluna <th>Quarta tag</th> <td>Sequencia da terceira tag</td> E assim por diante...

ta dando esse error quando mando uma vocação do meu servidor dbo alguem poderia me ajudar agradeço desde ja

Alguem sabe como fazer uma page antes da pagina principal. Igual a desse server aqui https://www.eldera.com.br/ .... Eu tenho uma pasta com esse layout porem não sei como fazer.

Olá Galera Do Xtibia, gostaria de uma ajuda, para colocar, o botão de curtir igual aqui o da pagina do Xtibia no meu site de otserver, estou com muitos problemas para colocar, se alguem puder me ajudar a colocar o botão no meu site, para a galera poder curtir a FANPAGE do servidor, direto pelo site seria muito bom, Darei REP+ para quem me der uma força. obrigado deis de já !!!!

Olá a todos! Como puderam ver no título do tópico, estou aqui pra ver o que você acha importante um site de Otserv. Você pode falar qualquer coisa, por mais complexa ou simples que seja, por exemplo: "Um sistema que informe o meu desempenho em upar, mostrando uma média de experiência que consigo em determinado tempo." Esse foi apenas um exemplo de um sistema. Opinem também você como administrador de um servidor, o que seria importante pra você? Saber quantas pessoas estão acessando o site do seu servidor e quantos desses acesso estão se convertendo em jogadores? Peço a todos que lerem e tiverem opiniões que postem, pois é de grande ajuda a mim e a outras pessoas que por ventura queiram saber sobre o mesmo. Desde já agradeço a todos.

Olá, está montando seu servidor de pokémon, tibia, naruto etc e não tem nenhum layout para seu website? Peça aqui agora seu layout Requisitos: 1- Se não for usar não peça! 2- Se for usar daqui um ano peça daqui 1 ano 3- seu poste deve conter: Nome do Site: Tipo: ex: Modern Acc Tipo Layout: Ex: Pokémon Explicação: Como deseja ele Download: Deixe para download sua base: ex: Modern Acc, Avuejan Acc etc... ​4- Não sera feito layout complexos por que não só pago 5- Layout para entrega sera de 48h a 1 mês (Da trabalho) 6- Não fique falando cade o meu, ha o meu tava na frente, por que sera desclassificado (Não sera feito). 7- Deixe a logo de seu servidor também para download ou upada Façam seus pedidos!

Seguinte, estou precisando de um code em html onde eu possa exibir codes de html e php. Exemplo, ao eu escrever <code>código</code> ele ira mostra o code ao envez de interpretar. Um outro code, é um do estilo deste spoil q tem aqui no forum, quero ele para poder coloca o <code> dentro, dai o cara clica, vai abaxar uma box e mostra o code.

Galera To tentando cria um site!! Ela ta todo em php e eu uso o LeechFTP E tem q te o index.html E naum consigo passa o index.php para Html C poderem ajudar obrigado!! ;D

E ae galera do xtibia, estou querendo trocar meu layout feito em css para html. Baixei um sistema php pronto e quero mudar o design e tal, e pelo css e muito mais complexo do que o html. Ai queria saber como fazer isso, desde ja eu agradeço. Obrigado.

Estão a ver o trecho azul logo abaixo da imagem negra? Pois bem, isso que eu não estou a conseguir remover, já tentei colocar padding/border/margin como 0, porém não funcionou, percebi que é do próprio DIV, mas não sei como remover. Se alguém tiver alguma sugestão a me passar, faça isso, por favor. Resolvi, era só colocar um display:block na imagem.

Olá a todos, venho mostrar a vocês, o Layout do site para o servidor Pokémon Oblivion, e peço a vocês opiniões sobre tudo, de cor à conteúdos e funções. Conteúdos e Funções: • Notificações de nova notícia, que seus créditos foram depositados etc... • Shop. • Diversos tutoriais (Estou pensando se o jogador é que vai mandar, e antes de ser postado vai ser revisado pela a equipe e caso aprovado, será postado). • Gestão de clã ou guild, como queiram chamar. • Informação dos torneios. • Postagem de novidades ou notícias. • Upload de foto para os usuários. E mais que podem vim a ser colocadas. Pois bem, agora que vocês já sabem o que pretendo fazer, vamos ao layout. Live-preview, site logo abaixo. Criticas são sem bem vindas, entretanto, que sejam construtivas e que me ajude a melhorar. Bem, isso é tudo, obrigado desde já, Delkawy.

Por ende, podríamos decir que el autoritarismo en parte brota como un proceso de detección del fallo deficitario en errores normativos. Tambi n puede visitar pgina : web page

Bom galera dessa vez trago pra vcs um tutorial simples de como editar (formatar) textos em suas páginas PHP. 1°) Negrito Para deixar um texto em negrito basta definir esse texto com <b> (no inicio) e </b> (no final). Então o seguinte código: <b>Essa frase esta em negrito!</b> Teria esse efeito: Essa frase esta em negrito! 1.1°) Modo alternativo Outro modo de escrever em negrito é usando <strong> e </strong> Apesar do strong não ser destinado à isso tem o mesmo efeito de negrito. 2°) Sublinhado Para deixar um texto sublinhado basta definir esse texto com <u> (no inicio) e </u> (no final). Então o seguinte código: <u>Essa frase esta sublinhada!</u> Teria esse efeito: Essa frase esta sublinhada! 3°) Itálico Para deixar um texto em itálico basta definir esse texto com <i> (no inicio) e </i> (no final). Então o seguinte código: <i>Essa frase esta em italico!</i> Teria esse efeito: Essa frase esta em italico! 3.1°) Modo alternativo Outro modo de escrever em itálico é usando <em> e </em> 4°) Riscado Para deixar um texto riscado basta definir esse texto com <s> (no inicio) e </s> (no final). Então o seguinte código: <s>Essa frase esta riscada!</s> Teria esse efeito: Essa frase esta riscada! 5°) Mudando a fonte do texto Para mudar a fonte basta colocar <font face='FONTE QUE VC DESEJA'> (preste atenção aqui, pois o nome da fonte deve estar entre aspas simples!) no inicio e </font> no final da frase. Então o seguinte código: <font face='Times New Roman'> Fonte massa! </font> Teria esse efeito: Fonte massa! 6°) Mudando a cor do texto Para mudar a cor basta colocar <font color='COR (EM INGLES) QUE VC DESEJA ou código html'> (preste atenção aqui, pois a cor deve estar escrita em inglês e entre aspas simples! O mesmo serve para o código html, deve estar entre aspas simples!) no inicio e </font> no final da frase. Então o seguinte código: <font color='red'>Ta vermelho!</font> <font='blue'>Ta azul!</font> Teria esse efeito: Ta vermelho! Ta azul! 6.1°) Tabela de cores em html Aqui tem um link onde vc pode pegar o código html das cores de sua preferência para usar no código acima: http://www.flextool.com.br/tabela_cores.html 7°) Mudando o tamanho do texto Bom aqui tem uma diferença da formatação de texto normal. Existem 7 tamanhos de fonte em php: O tamanho 2 é o tamanho padrão dos textos. Para mudar o tamanho da fonte basta usar o código <font size='TAMANHO QUE VC DESEJA (de 1 a 7)'> (preste atenção aqui, pois o tamanho deve estar escrito entre aspas simples!) no inicio e </font> no final da frase. Então o seguinte código: <font size='5'>Tamanho 5!</font> Teria esse efeito: Tamanho 5 8°) Textos especiais (subscrito e sobrescrito) Para deixar um texto subscrito basta usar _{(no inicio) e} (no final). Então o seguinte código: X₅ Teria o seguinte efeito: X5 (OBS: não ficaria em negrito! Eu apenas coloquei negrito para chamar atenção!) Para deixar um texto sobrescrito basta usar ^{(no inicio) e} (no final). Então o seguinte código: X³ Teria o seguinte efeito: X3 (OBS: não ficaria em negrito! Eu apenas coloquei negrito para chamar atenção!) 9°) Iniciando uma nova linha Para iniciar uma nova linha basta usar <br> no inicio da frase que inicia a nova linha. Então o seguinte código: <br>Se liga, linha 1 <br> <br> <br>Agora linha 4 Teria o seguinte efeito: Obs.: Não necessita fechar esse comando usando </br> pois ao declarar um <br> ele já inicia outra linha mesmo que a anterior "não tenha sido fechada". 10°) Juntando os efeitos Você pode usar os comandos de size, color e face (fonte) em um só comando <font> da seguinte maneira: Ou seja, o seguinte código: <br><font face='times new roman' color='#0000FF' size='5'> Olha que loko! </font> Teria o seguinte efeito: Olha que loko! Vc pode concatenar todos os efeitos acima da forma que vc quiser, basta ter atenção! Por exemplo, o seguinte código: Aqui ta sem nada! <b>A partir daqui ta tudo em negrito... <font face='times new roman' color='##D2691E' size='6'>A partir daqui ta em negrito, azul, outra fonte, outro tamanho e em outra cor... </font> <i>A partir daqui ta em italico </i>Agora ta sem italico... </b>Agora ta sem negrito... </font>Agora ta da forma padrão! Teria o seguinte efeito: Aqui ta sem nada! [/size]A partir daqui ta tudo em negrito... A partir daqui ta em negrito, azul, outra fonte, outro tamanho e em outra cor... A partir daqui ta em italico Agora ta sem italico... Agora ta sem negrito... Agora ta da forma padrão![/size] _____________________________________________________________________________________ --------------------------------------------------------------------------------------------------------------------------- AGORA É A SUA VEZ!!! Poste aqui um texto de sua autoria e editado da forma ensinada do jeito que vc quiser! Eu darei REP+ a todo post que estiver editado de forma correta! ^^ E isso é tudo pessoal! ^^ _____________________________________________________________________________________ --------------------------------------------------------------------------------------------------------------------------- Créditos Eu (@Danihcv)

Bom galera, dessa vez venho trazer um tutorial bem simples sobre tabelas e como criá-las em suas paginas PHP. Então vamos ao que interessa. ___________________________________________________________________________________ Para definir o que estará dentro da tabela usamos <table> no inicio e </table> no final. Para definirmos o que estará entro de uma linha da tabela usamos <tr> no inicio e </tr> no final. *A linha por sua vez estará dentro da tabela, então primeiro declaramos o inicio da table e dps declaramos o inicio da linha. Para definirmos o que estará dentro de uma coluna usamos <td> no inicio e </td> no final. *A coluna por sua vez estará dentro da linha, que por sua vez estará dentro da tabela. Então primeiro declaramos o inicio da linha e dps declaramos o inicio da coluna. *Antes de começar uma nova coluna, finalize a anterior, para que não gere nenhum "bug". Para colocarmos um título às colunas devemos delimitar o mesmo usando <th> no inicio e </th> no final. *O titulo da coluna segue a mesma logica da coluna, ou seja, vc deve declarar uma linha para colocar os títulos dentro da mesma. *A diferença to th para o td é que o th coloca o seu texto em negrito. E no caso das paginas de sites de tibia, também coloca um fundo cinza escuro e altera a cor da letra para branco. Então vamos ver uma tabela de exemplo: <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> E esse seria o resultado: Titulo-Coluna-1 Titulo-Coluna-2 Titulo-Coluna-3 Coluna-1,linha-1 Coluna 2,linha-1 Coluna-1,linha-2 *Como pode-se ver, podem haver espaços vazios, os seja, uma linha pode ter mais colunas que outras. Dessa forma a coluna não terá valor algum nas demais linhas. Agora vamos colocar as bordas da nossa tabela. Para isso devemos adicionar as especificações da borda após decalararmos o inicio da table e colocamos tais especificações dentro do "comando" que usamos para dar o inicio à table. Obrserve: "Mas quais são as especificações da borda?" Bom, elas são basicamente 3: a espessura, o espaçamento e a cor. Códigos para os respectivos parametros: *Espessura: border="1" (nesse caso, a espessura da borda seria de 1 pixel) *Espaçamento: cellspacing="0" (nesse caso, não haverá espaçamento de uma borda pra outra entre 2 linhas/colunas. Assim fazemos uma borda simples, pois sem isso a borda da tabela ficaria com 2 linhas separadas, deixando um aspecto inusitado.) *Cor: bordercolor="#000000" (nesse caso a borda seria preta. Para ver o código da cor que vc deseja colocar, visite essa pagina de cores HTML e copie o código HTML da cor que vc qr e coloque dentro das aspas.) Então vamos ver um exemplo de uma tabela com bordas simples: <table [b]border="1" [b]cellspacing="0[/b]" [b]bordercolor="[url=null]#248685[/url]"[/b][/b]> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> Esse seria o resultado (estou usando uma pagina do Gesior para mostrar o resultado): Porém se vc fizer o teste aí com frases maiores dentro das colunas e etc. Verá que todo o conteúdo de dentro da tabela (e inclusive a própria tabela) estarão concentrados no canto das colunas (e no caso da tabela, a mesma estará concentrada no canto esquerdo da pagina). Então digamos que vc queira colocar a tabela no centro da pagina e que vc queira centralizar todo o conteúdo da tabela no centro de suas respectivas colunas. Vc teria que usar um "comando" que centraliza o conteúdo. E esse comando é <div align="center"> (onde tem center vc pode esolher entre left (esquerda), right (direita) e claro center (centro)) aí logo em seguida vc coloca o conteúdo a ser centralizado e fecha o mesmo com </div> Atenção! Para usar o div align para centralizar uma tabela vc deve primeiro declarar ele e em seguida declarar o inicio da tabela e então após declarar o fim da tabela vc deve logo em seguida declarar o fim do div. Exemplo para centralizar a tabela no centro da pagina: <div align="center"> <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> </div> Caso vc queira centralizar o conteúdo de uma coluna, vc deve declarar o div align após declarar o inicio da coluna. Exemplo de coluna com conteúdo centralizado no centro da mesma: <th> <div align="center"> Testando </div> </th> _____________________________________________________________________________________________ Caso vc queira fazer edições no conteúdo da tabela, aqui tem um tutorial sobre edição de textos em HTML: http://www.xtibia.com/forum/topic/233324-tutorial-formatando-textos-em-php/ ___________________________________________________________________________________________ E isso é tudo, pessoal! Espero que tenha dado para entender tudo de forma correta e simples. ^^ ___________________________________________________________________________________________ Créditos Eu (@Danihcv)

Bom galera, dessa vez venho trazer um tutorial bem simples sobre tabelas e como criá-las em suas paginas PHP. Então vamos ao que interessa. ___________________________________________________________________________________ Para definir o que estará dentro da tabela usamos <table> no inicio e </table> no final. Para definirmos o que estará entro de uma linha da tabela usamos <tr> no inicio e </tr> no final. *A linha por sua vez estará dentro da tabela, então primeiro declaramos o inicio da table e dps declaramos o inicio da linha. Para definirmos o que estará dentro de uma coluna usamos <td> no inicio e </td> no final. *A coluna por sua vez estará dentro da linha, que por sua vez estará dentro da tabela. Então primeiro declaramos o inicio da linha e dps declaramos o inicio da coluna. *Antes de começar uma nova coluna, finalize a anterior, para que não gere nenhum "bug". Para colocarmos um título às colunas devemos delimitar o mesmo usando <th> no inicio e </th> no final. *O titulo da coluna segue a mesma logica da coluna, ou seja, vc deve declarar uma linha para colocar os títulos dentro da mesma. *A diferença to th para o td é que o th coloca o seu texto em negrito. E no caso das paginas de sites de tibia, também coloca um fundo cinza escuro e altera a cor da letra para branco. Então vamos ver uma tabela de exemplo: <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> E esse seria o resultado: Titulo-Coluna-1 Titulo-Coluna-2 Titulo-Coluna-3 Coluna-1,linha-1 Coluna 2,linha-1 Coluna-1,linha-2 *Como pode-se ver, podem haver espaços vazios, os seja, uma linha pode ter mais colunas que outras. Dessa forma a coluna não terá valor algum nas demais linhas. Agora vamos colocar as bordas da nossa tabela. Para isso devemos adicionar as especificações da borda após decalararmos o inicio da table e colocamos tais especificações dentro do "comando" que usamos para dar o inicio à table. Obrserve: "Mas quais são as especificações da borda?" Bom, elas são basicamente 3: a espessura, o espaçamento e a cor. Códigos para os respectivos parametros: *Espessura: border="1" (nesse caso, a espessura da borda seria de 1 pixel) *Espaçamento: cellspacing="0" (nesse caso, não haverá espaçamento de uma borda pra outra entre 2 linhas/colunas. Assim fazemos uma borda simples, pois sem isso a borda da tabela ficaria com 2 linhas separadas, deixando um aspecto inusitado.) *Cor: bordercolor="#000000" (nesse caso a borda seria preta. Para ver o código da cor que vc deseja colocar, visite essa pagina de cores HTML e copie o código HTML da cor que vc qr e coloque dentro das aspas.) Então vamos ver um exemplo de uma tabela com bordas simples: <table [b]border="1" [b]cellspacing="0[/b]" [b]bordercolor="[url=null]#248685[/url]"[/b][/b]> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> Esse seria o resultado (estou usando uma pagina do Gesior para mostrar o resultado): Porém se vc fizer o teste aí com frases maiores dentro das colunas e etc. Verá que todo o conteúdo de dentro da tabela (e inclusive a própria tabela) estarão concentrados no canto das colunas (e no caso da tabela, a mesma estará concentrada no canto esquerdo da pagina). Então digamos que vc queira colocar a tabela no centro da pagina e que vc queira centralizar todo o conteúdo da tabela no centro de suas respectivas colunas. Vc teria que usar um "comando" que centraliza o conteúdo. E esse comando é <div align="center"> (onde tem center vc pode esolher entre left (esquerda), right (direita) e claro center (centro)) aí logo em seguida vc coloca o conteúdo a ser centralizado e fecha o mesmo com </div> Atenção! Para usar o div align para centralizar uma tabela vc deve primeiro declarar ele e em seguida declarar o inicio da tabela e então após declarar o fim da tabela vc deve logo em seguida declarar o fim do div. Exemplo para centralizar a tabela no centro da pagina: <div align="center"> <table> <tr> <th>Titulo-Coluna-1</th> <th>Titulo-Coluna-2</th> <th>Titulo-Coluna-3</th> <tr> <td>Coluna-1,linha-1</td> <td>Coluna-2,linha-1</td> </tr> <tr> <td>Coluna-1,linha-2</td> </table> </div> Caso vc queira centralizar o conteúdo de uma coluna, vc deve declarar o div align após declarar o inicio da coluna. Exemplo de coluna com conteúdo centralizado no centro da mesma: <th> <div align="center"> Testando </div> </th> _____________________________________________________________________________________________ Caso vc queira fazer edições no conteúdo da tabela, aqui tem um tutorial sobre edição de textos em HTML: *Link ainda indisponível, estou criando o tópico ___________________________________________________________________________________________ E isso é tudo, pessoal! Espero que tenha dado para entender tudo de forma correta e simples. ^^

Ola Galera Tudo Bem ? eu Estou Vendo Ai Que Esta avendo um Curso de Html Eu Também Tenho Algumas Videos Aulas Sobre o Assunto Que No Meu Curso Deram Pragente Eu Irei Começa a Postalas Download Do Webedit WebEdit.zip Introdução Princípios Básicos Tags Comuns I Tags Comuns II LINKS Imagens Tags Adicionais Organização do Código Lista

Confira também as duas primeiras aulas para não ficar perdido: http://www.xtibia.com/forum/topic/205838-aula-2-listas-ordenadas-listas-nao-ordenadas-listas-de-definicao/ Nesta terceira aula vou ensinar tabelas. Tabelas Tabelas são conjuntos de células, divididas em colunas e linhas, e servem para mostrar dados tabulados. Embora muitos ditos "desenvolvedores" usem tabelas pra fazer layouts dos sites, isso NÃO é recomendado e eu vou ensinar isso usando divs e CSS. Tabelas são definidas pela tag <table> e possuem vários elementos internos para organizar. Como exemplo, vamos construir uma tabelinha com os stages de um servidor. Dentro da tag table, nós usamos as tags <tr> (table row) para definir uma linha e, dentro dessa linha, <td> (table data) para definir uma célula. Também podemos usar o atributo "border" para definir a espessura da borda, em pixels, mas em breve vamos mudar isso. Assim: <table border="1"> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </table> Bem básico né? Mas essa primeira linha não ficou legal... que tal se a gente dividir a tabela em uma linha de cabeçalho? Também é possível! As tabelas podem usar as tags <thead> (table head), <tfoot> (table footer) e <tbody> (table body) (NESTA ORDEM) para separar cabeçalhos, rodapés e corpo da tabela. Dentro do thead, usamos a tag <th> (table header) ao invés de tr para destacar o cabeçalho. Por exemplo: <table border="1"> <thead> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> Além disso, nós também podemos usar a tag <caption> para definir a legenda/título de uma tabela! Ao invés de usar um heading fora da tabela, isso facilita nosso trabalho <table border="1"> <caption>Stages do servidor</caption> <thead> <tr> <th>Level mínimo</th> <th>Level máximo</th> <th>Stage</th> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> É importante saber usar todos estes elementos na hora de fazer seu site. Embora haja pouca diferença visual, por exemplo, ao colocar o th, na prática isso é bom para ferramentas de pesquisa e é um bom costume. A tarefa da vez vai usar esta aula e a anterior: imagine um servidor fictício, e faça uma página com o título, uma lista com as skill rates e uma tabela com os stages (como nos exemplos acima). Se quiser, use imagens, links e os outros elementos da primeira aula também.

Se você não acompanhou a aula anterior, faça isso agora: http://www.xtibia.co...inks-e-imagens/ Para organizar as coisas, o HTML nos permite estruturas básicas de listas e tabelas. Vou começar pelas listas: Listas As listas são divididas em 3 tipos: temos as listas ordenadas (que são tipo 1, 2, 3 ou i, ii, iii); temos as listas não-ordenadas, que são as com pontinho na frente; e temos as listas de definição, que são listas de itens e suas descrições. Listas ordenadas A tag da lista ordenada é <ol> (ordered list), e cada um dos itens é um elemento <li> (list item). Assim: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> O resultado é este: As listas ordenadas tem 5 tipos diferentes de ordem: por números, letras maiúsculas, letras minísculas, números romanos maiúsculos, e números romanos minúsculos. Também existem diversos outros tipos especiais, como ideogramas japoneses, números armênios, letras gregas... mas só vou tratar destes 5. Você pode me perguntar se quiser outro. Para alterar, você tem que colocar, no atributo style, o código list-style-type: <tipo>. Nos 5 tipos, na ordem: <ol style="list-style-type: decimal"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Usar o atributo style é, essencialmente, usar CSS. Então, que isso sirva como introdução para nossas aulas futuras Listas não-ordenadas Já as listas não-ordenadas tem apenas 3 tipos: círculo, disco e quadrado. Da mesma forma que nas listas ordenadas, você usará o list-style-type, só que a tag é <ul> (unordered list): <ul style="list-style-type: circle"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: disc"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Em ambos os casos, tanto listas ordenadas quanto listas não-ordenadas, você pode definir list-style-type como none para não ter nenhuma marcação: <ul style="list-style-type: none"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Listas de definição O terceiro tipo de lista, a lista de definição (<dl>), é diferente: você tem um item (<dt> (definition topic)), e debaixo dele adiciona a(s) descrição(ões) (<dd> (definition description)). Assim: <dl> <dt>Café</dt> <dd>Quente</dd> <dd>Preto</dd> <dt>Leite</dt> <dd>Frio</dd> <dt>Chocolate</dt> <dd>Melhor se quente</dd> <dd>Marrom</dd> </dl> Pode ter quantas descrições forem necessárias. O recuo é automático e não há configuração. Não vou definir uma tarefa pra essa aula, mas testem, mexam com as listas, insiram uma lista dentro da outra pra ver como fica, vejam os resultados, pratiquem! qualquer dúvida, responderei de prontidão.