HTML Aula 1: Conhecendo o HTML
-
Quem Está Navegando 0 membros estão online
Nenhum usuário registrado visualizando esta página.
-
Conteúdo Similar
-
Por Gnius
Olá galera do TK,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çã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ê ajuda o servidor a crescer e você também tem várias vantagens dentro do game.</p></marquee>
<tr>
Vamos para as explicações:
Selecione a opçã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ê ajuda o servidor a crescer e você também tem vá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.
Ajudei?Rep+?
-
Por Gnius
OBS:Criei esse outro tópico porque perdi a minha outra conta onde fiz esse mesmo tópico
Olá galera do TK,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...
Ajudei? REP+?
-
Por Danihcv
Bom galera, dessa vez venho trazer um tutorial bem simples sobre tabelas e como criá-las para 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.tibiaking.com/forum/topic/49092-tutorial-formatando-textos-em-php/#entry284885
___________________________________________________________________________________________
E isso é tudo, pessoal!
Espero que tenha dado para entender tudo de forma correta e simples.
-
Por Danihcv
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 <sub> (no inicio) e </sub> (no final). Então o seguinte código:
X<sub>5</sub> 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 <sup> (no inicio) e </sup> (no final). Então o seguinte código:
X<sup>3</sup> 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! 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!
_____________________________________________________________________________________
---------------------------------------------------------------------------------------------------------------------------
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!
-
Por Smart Maxx
Um colega meu pediu esse efeito de nevar > desse site aqui < ... então resolvi compartilhar com vcs tb, para colacarem em seus gesior nessa época natalina.
vá no seu layout.php :
em cima da primeira tag <head> cole esse código ...
<script type="text/javascript"> //Configure below to change URL path to the snow image var snowsrc= "http://2.ii.gl/byGz__HJK.gif" // Configure below to change number of snow to render var no = 250; // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0; // Configure how much snow should drop down before fading ("windowheight" or "pageheight") var snowdistance = "pageheight"; ///////////Stop Config////////////////////////////////// var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>"); } } } function snowIE_NS6() { // IE and NS6 main animation function doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script> Abrçs
-
Posts Recomendados
Participe da conversa
Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.