Jump to content
Notícia
  • Adquira já o seu VIP!

Search the Community

Showing results for tags 'html'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Anunciantes
    • Advertise here
    • silvaBR Cheats
    • Velozhost
  • ################## WEB CHEATS ##################
  • Anúncios/Eventos
    • Regras
    • Anúncios
    • Eventos do fórum
  • Feedback & Suporte
    • Tutoriais WC
    • Suporte
    • Sugestões
    • Denúncias e Reclamações
    • Depósito
  • Shooter Zone
    • Counter Strike
    • Valorant
    • Rainbow Six Siege
    • Outros Shooters em Geral
    • Shooter Zone - Lixão
  • Battle Royale
    • COD Warzone
    • Free Fire
    • PUBG - Playerunknown's Battlegrounds
    • Fortnite
    • Outros Jogos Battle Royale
  • MMO Zone
  • Outros Games Zone
  • Design Zone
  • Info Zone
  • ################## WEB CHEATS ##################
  • Entretenimento & Diversão
  • MarketPlace
  • Old WC's Bate Papo
  • 【FREE FIRE】▄︻┻┳═一's Fórum do Clube
  • Anticomunismo's Tópicos
  • Tópicos Importantes !'s Tópicos

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Discord


Idade

 
or  

Found 52 results

  1. Opa tudo bom? Vamos aprender HTML? Bom como venho postando vários arquivos de estudos na Info Zone agora e a vez do HTML hehe Certo vamos lá! Como padrão, terá arquivos em Inglês e Português Será 22 PDF somando no total 391.7MB de arquivos Aproveitem! [hide][Hidden Content]]
  2. Olá pessoal tudo bem, bem eu estou começando na área de PHP agora e estou tentando criar um formulário de contanto, porem sempre me deparo com o mesmo erro mas não consigo resolver eu criei o formulário, utilizei css para estilizar e agora estou configurando com php, mas meu formulário não vai de jeito nenhum, já revisei o código varias vezes e mesmo assim ele ainda diz que esta tendo um erro. estou deixando uma copia do formulário para vocês poder baixar e verificar, não sei oque esta dando de errado pfv me ajudem.. FORMULÁRIO EM HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Contato</title> <link rel="Stylesheet" type="text/css" href="css/contato.css"> </head> <body> <form name="formteste" action="receber.php" method="POST"> <h1>Contato</h1> <p class="nome"> <input type="text" name="nome" placeholder="Insira o seu nome" required="required"> </p> <p class="email" > <input type="email" name="email" placeholder="Insira um E-mail Valido" required="required"> </p> <p class="assunto"> <input type="text" name="assunto" placeholder="Insira o assunto" required="required"> </p> <p class="mensagem"> <textarea name="mensagem" placeholder="Insira uma mensagem" required="required"></textarea> </p> <p class="enviar"> <input type="submit" name="enviar" value="Enviar"> </p> </form> </body> </html> ESTILIZAÇÃO EM CSS body{ margin: 0; padding: 0; } form{ font-size: 16px; background: #CCC; max-width: 500px; margin: 0 auto; padding: 0 10px 10px 10px; } h1{ text-align: center; color: #333; } input, textarea{ width: 470px; padding: 10px; } .enviar input { background: #069; height: 40px; width: 150px; font-weight: bold; border-radius: 5px; border: 1px solid; color: #CCC; cursor: pointer; } .enviar input :hover{ background: #078; } textarea{ resize: none; width: 470px; height: 120px; line-height: 20px; } CONFIGURAÇÃO EM PHP <?php if(isset($_POST['email']) && !empty($_POST['email'])){ $nome = addslashes($_POST(['nome']); $email = addslashes($_POST(['email']); $assunto = addslashes($_POST(['assunto']); $mensagem = addslashes($_POST(['mensagem']); $to = "voucolocarmeuemailaqui"; $subject = "Atendimento - Consuta"; $body = "Nome: ".$nome. "\r\n". "Email: ".$email."\r\n". "Assunto: ".$assunto."\r\n". "Mensagem: ".$mensagem; $header = "From:voucolocarmeuemailaqui"."\r\n". "Reply-To:".$email."\r\n". "X=Mailer:PHP/".phpversion(); if(mail($to,$subject,$body,$header)){ echo("E-mail enviado com sucesso!"); }else{ echo("O Email não pode ser enviado"); } } ?> POR FAVOR ME AJUDEM FORMULARIO.rar
  3. Fala galera beleze veio compartilhar um dos meus jogos com voces, Super Batalhas de Guerreiros ll, é uma Fan Game, stratégia e ação, reuni vários Personagens épicos de jogos antigos tais como King of Dragon, Knight of The Round,Demon Hunter, e outros tudo em um só jogo. este que estou compartilhando é a versão pra Android compatível com a tela 16:9, o jogo é gratuito ja esta completo desenvolvi no Construct 2 logo quando comecar a mexer no C3 irei converter esse projeto pro C3 e dar continuidade. Objetivo do jogo Você começa com alguns Guerreiros e com um Guardião você precisara proteger seu Castelo das invasões dos inimigos, para vencer o jogo destrua o Monumento do seu Adversário de acordo com cada tropa Você pode treinar seus Guerreiros mas com o limite de criação que começa com 10/10, a cada Level que você completar o limite de criação de Guerreiros aumenta +2 Controles Você pode controlar seus Guerreiros manualmente, apenas Clique em cima de algum Guerreiro de sua escolha voces podem baixar e instalar direto no Link [Hidden Content] Video GamePlay jogando no Celular [Hidden Content]
  4. Primeiramente esse sistema não fui eu que construí, somente melhorei a estilização integrada dele, fica ao seu critério caso veja necessidade criar um css para o mesmo. Todos os créditos de programação ao marcos otílio. Link tutorial de configuração da guildmark pelo mesmo: Clique para ver Pastas dependentes do código (seu diretório)..guilds/imag_guilds Esse arquivo inclui as divs estilizadas conforme o tema que o mesmo criou [Aqui vai o código]: <style type="text/css"> <!-- body,td,th { color: #ffffff; font-family: Arial; } body { background-image: url(); } --> </style> <?php error_reporting(0); /* Logica Guild Marck: b030(00000+$guildid).bmp b030(00000+$guildid).bmp */ $guildid = $_POST['guildid']; $img = "./guilds/imag_guilds/b0".(3000000+$guildid).".bmp"; if (isset($_FILES['arquivo']['name'])) { $uploaddir = '.\\guilds/imag_guilds\\'; $arquivo = $uploaddir."b0".(3000000+$guildid).".bmp"; $dimensao = getimagesize($_FILES['arquivo']['tmp_name']); if($_FILES['arquivo']["type"] == "image/bmp") { if(($dimensao[0] <= 16) && ($dimensao[1] <= 12)) { if($_FILES['arquivo']["size"] <= 2000) { if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $arquivo)) { copy($arquivo,$uploaddir."b0".(2000000+$guildid).".bmp"); copy($arquivo,$uploaddir."b0".(1000000+$guildid).".bmp"); echo "O arquivo foi enviado com sucesso.<br>"; $img = "imags_guilds/b0".(3000000+$guildid).".bmp"; } else { echo "[Error]: O arquivo não foi enviado.<br>"; } } else { echo "[Error]: Imagem muito pesada.<br>"; } } else { echo "[Error]: Imagem muito grande.<br>"; } } else { echo "[Error]: Formato de imagem invalida.<br>"; } } ?> <br> <form method="post" enctype="multipart/form-data"> <div style="width: 100%;"><font color="#CEB798"><b>A Imagem deve ser 16x12 formato BMP 24bits </b><br /></font></div> <div style="margin-top: 2.2%; position: relative; width: 100%;"> <div class="guildid"> <input name="guildid" style="padding: 12px; color:#CEB798; float: left; width: 100%; border: none; border-bottom: 1px solid black;" placeholder="Guild ID, digite /guildid" type="text" /> </div> <!-- CONTROLES --> <style> .bt-controls{ background-color: #CEB798; border : 1px solid #CEB798; color: white; } .bt-controls:hover{ background-color: #CEB798; border : 1px solid black; color: green; } </style> <div class="controls" style=""> <input class="bt-controls" style="border:none; margin-top: 2%; width: auto; float: left;" name="arquivo" type="file" /> <input class="bt-controls" style="margin-top: 2%; float: right; width: auto;" type="submit" value="Confirmar" /> </div> <!-- FIM CONTROLES --> </div> </form> <style type="text/css"> <!-- body,td,th { color: #ffffff; font-family: Arial; } body { background-image: url(); } --> </style> <?php error_reporting(0); /* Logica Guild Mark: b030(00000+$guildid).bmp b030(00000+$guildid).bmp */ $guildid = $_POST['guildid']; $img = "./guilds/imag_guilds/b0".(3000000+$guildid).".bmp"; if (isset($_FILES['arquivo']['name'])) { $uploaddir = '.\\guilds/imag_guilds\\'; $arquivo = $uploaddir."b0".(3000000+$guildid).".bmp"; $dimensao = getimagesize($_FILES['arquivo']['tmp_name']); if($_FILES['arquivo']["type"] == "image/bmp") { if(($dimensao[0] <= 16) && ($dimensao[1] <= 12)) { if($_FILES['arquivo']["size"] <= 2000) { if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $arquivo)) { copy($arquivo,$uploaddir."b0".(2000000+$guildid).".bmp"); copy($arquivo,$uploaddir."b0".(1000000+$guildid).".bmp"); echo "O arquivo foi enviado com sucesso.<br>"; $img = "imags_guilds/b0".(3000000+$guildid).".bmp"; } else { echo "[Error]: O arquivo não foi enviado.<br>"; } } else { echo "[Error]: Imagem muito pesada.<br>"; } } else { echo "[Error]: Imagem muito grande.<br>"; } } else { echo "[Error]: Formato de imagem invalida.<br>"; } } ?> [Demonstração] [Desmonstração] Resultado **Eu não faria o PHP assim, entretanto não mexi nisso, funciona porém...
  5. Olá. Me pediram para fazer uma arte para ser utilizada em uma liança de um jogo, mas que tivesse botões para facilitar o acesso. Fiz toda a arte no Photoshop e depois joguei no Dreamweaver para mapear, só que não funcionou, voltei no PS e fatiei a imagem e gerei o html dela, assim seria mais fácil apenas linkando a imagem dos botões. A arte final deveria ser assim: O código ficou assim: <html> <head> <title>Untitled-1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> </head><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (Untitled-1) --><table id="Table_01" width="655" height="1000" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="3"><img src="[Hidden Content]" width="655" height="246" alt=""></td></tr><tr><td rowspan="4"><img src="[Hidden Content]" width="64" height="754" alt=""></td><td><a href="[Hidden Content]" target="_blank" <img src="[Hidden Content]" width="200" height="40" border="0" alt=""></a></td><td rowspan="4"> <img src="[Hidden Content]" width="391" height="754" alt=""></td></tr><tr><td><img src="[Hidden Content]" width="200" height="20" alt=""></td></tr><tr><td><a href="[Hidden Content]" target="_blank" <img src="[Hidden Content]" width="200" height="40" border="0" alt=""></a></td></tr> <tr><td><img src="[Hidden Content]" width="200" height="654" alt=""></td></tr></table> <!-- End Save for Web Slices --> </body> </html> Eu já vi outros modelos de páginas assim por lá, então funciona, o problema é que eu não consigo fazê-lo. Espero que alguém possa me auxiliar nisso. Qualquer dúvida eu respondo. Att LL
  6. Hoje vim trazer o segundo vídeo da playlist para iniciantes em HTML e CSS, na minha opinião é o melhor curso para iniciantes na área de desenvolvimento web.
  7. Ví que aqui nesta área não tem nenhum tópico sobre curso Isto é uma playlist ótima para iniciantes em HTML e CSS, na minha opinião é o melhor curso para iniciantes na área de desenvolvimento web
  8. Quero uma ajuda de vocês to procurando faz tempo um site q nao fecha tipo um virus, quando vc abre o site parece uma mulher gemando e nao fecha o site... alguem me manda o link please
  9. É um prazer! Meu Interesse aqui é de adquirir conhecimento tanto na área de programação front-end (onde tenho mais afinidade) e nas outras modalidades e em jogos (truques,macete e dicas de como ajudar a todos)!
  10. [CENTER][B][SIZE=7][COLOR=#b30000]Html5 e Css3 domine a web do futuro [IMG][Hidden Content]] [B][COLOR=rgb(179, 0, 0)][SPOILER="Sumário"][/SPOILER][/COLOR][SPOILER="Sumário"][/spoiler][/B][SPOILER="Sumário"][SIZE=4][COLOR=#000000]O desenvolvimento web hoje 1 1.1 Por quê você deve aprender HTML e CSS . . . . . . . . . . . . . . . . 2 1.2 O estado dos navegadores . . . . . . . . . . . . . . . . . . . . . . . . . 2 1.3 A complicação dos prexos proprietários . . . . . . . . . . . . . . . . 3 1.4 A longa e sinuosa estrada deste livro . . . . . . . . . . . . . . . . . . . 4 2 Os primeiros passos com o nosso site 7 2.1 Escrevendo HTML, de dentro para fora . . . . . . . . . . . . . . . . . 8 2.2 Adicionando formatações básicas . . . . . . . . . . . . . . . . . . . . . 10 2.3 Bordas e margens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.4 Um pouco de cor sempre é bom . . . . . . . . . . . . . . . . . . . . . . 14 2.5 Primeiro contato com imagens . . . . . . . . . . . . . . . . . . . . . . . 18 2.6 Adicionando elementos secundários . . . . . . . . . . . . . . . . . . . 22 2.7 Faça para sua cidade também! . . . . . . . . . . . . . . . . . . . . . . . 25 3 HTML5: o que mudou? 27 3.1 Escrevendo menos e fazendo mais . . . . . . . . . . . . . . . . . . . . . 27 3.2 Atributos personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . 29 3.3 Tags novas para elementos antigos . . . . . . . . . . . . . . . . . . . . 29 3.4 Refatoração da página de São Paulo . . . . . . . . . . . . . . . . . . . . 31 3.5 Seja pragmático . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 4 O que todo desenvolvedor precisa saber sobre CSS 35 4.1 A incompatibilidade dos browsers e a razão dos resets de CSS . . . . 35 4.2 Compreendendo o Box model . . . . . . . . . . . . . . . . . . . . . . . 38 4.3 Utilizando pseudo elementos . . . . . . . . . . . . . . . . . . . . . . . . 41 4.4 Desenhando uma faixa com “before” e “aer” . . . . . . . . . . . . . . 41 4.5 Decorando mensagens . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Sumário Casa do Código 4.6 Criando conteúdo através de CSS . . . . . . . . . . . . . . . . . . . . . 47 4.7 Arquitete o seu CSS para o futuro . . . . . . . . . . . . . . . . . . . . . 49 4.8 Gere relatórios inteligentes e simples com os estilos de impressão . . 52 5 O que você consegue fazer com CSS 3 61 5.1 A regra @Font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 5.2 Como utilizar serviços de distribuição de fontes . . . . . . . . . . . . . 63 5.3 Substituição de ícones por fontes . . . . . . . . . . . . . . . . . . . . . 64 5.4 Explore novas possibilidades com bordas . . . . . . . . . . . . . . . . 67 5.5 Manipulação de cores com rgba e gradientes . . . . . . . . . . . . . . . 71 5.6 Trabalhe com sombras e crie menus elegantes . . . . . . . . . . . . . . 79 5.7 Combinando tudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 6 Tomando controle da estrutura visual 95 6.1 A propriedade ‘display’ . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 6.2 Flutue elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 6.3 O clearx, uma classe obrigatória em seus projetos . . . . . . . . . . . 106 6.4 Compreenda o uso de position . . . . . . . . . . . . . . . . . . . . . . . 107 6.5 Crie a sua própria janela modal . . . . . . . . . . . . . . . . . . . . . . 110 6.6 Como escolher os métodos para posicionar os seus elementos . . . . 116 6.7 Grids - um padrão de estrutura para as suas páginas . . . . . . . . . . 117 6.8 Posicionando elementos com CSS 3 . . . . . . . . . . . . . . . . . . . . 118 7 Melhorando os seus formulários 123 7.1 O que temos no HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . 123 7.2 Formulários HTML 5 nos dispositivos móveis . . . . . . . . . . . . . . 124 7.3 Criação do primeiro formulário . . . . . . . . . . . . . . . . . . . . . . 125 7.4 Alinhamento e estilos visuais nos campos e formulários . . . . . . . . 127 7.5 Exibição de mensagens de ajuda . . . . . . . . . . . . . . . . . . . . . . 129 7.6 Mostre mensagens de erro . . . . . . . . . . . . . . . . . . . . . . . . . 132 7.7 Levando o usuário direto ao que importa com o autofocus . . . . . . 134 7.8 A exibilidade do atributo placeholder . . . . . . . . . . . . . . . . . . 134 7.9 Aplicando CSS3 em botões . . . . . . . . . . . . . . . . . . . . . . . . . 140 iv Casa do Código Sumário 8 Efeitos 101: Trabalhando com animações e transições 149 8.1 Transformando elementos . . . . . . . . . . . . . . . . . . . . . . . . . 150 8.2 Os efeitos rotate, scale, skew e translate em uma galeria de fotos . . . 150 8.3 Transições de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 8.4 Transições na galeria de fotos . . . . . . . . . . . . . . . . . . . . . . . 156 8.5 Um detalhe importante sobre transições e JavaScript . . . . . . . . . . 160 8.6 Transformações em 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 8.7 Girar formulários com apenas um clique . . . . . . . . . . . . . . . . . 161 8.8 Utilizando animações . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 8.9 Começando com keyframes . . . . . . . . . . . . . . . . . . . . . . . . 170 9 O universo fora dos desktops e notebooks 175 9.1 O que é “Responsive Web Design” e porquê você deve se preocupar . 176 9.2 O funcionamento dos media queries . . . . . . . . . . . . . . . . . . . 177 9.3 Não é uma questão de aparelhos . . . . . . . . . . . . . . . . . . . . . . 178 9.4 Por um futuro melhor . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 10 Ferramentas - Frameworks, Plugins e Pré-processadores 181 10.1 Twitter Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 10.2 HTML5 Boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 10.3 Plugins em JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 10.4 Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 10.5 Polylls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 10.6 Pré-processadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 10.7 É tudo CSS e HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189[/COLOR][/SIZE][/SPOILER] [B] [COLOR=#ff0000][URL='[Hidden Content] Gdrive[/URL][/COLOR] [COLOR=rgb(179, 0, 0)] [/COLOR][/B][/CENTER]
  11. Bom eu comecei esse projeto hoje, prometo trazer ele pronto até o fim do ano! Com sistemas de login/cadastro/change profile/watch/Continuar assistindo/fila Projeto no github : [Hidden Content] Imagem do ilustrando o layout: A cada alteração vou colocando logs aqui e no github! Obrigado pessoal
  12. Fiz para passar o tempo [HIDE][Hidden Content]] Créditos ao BSVS por ter criado o design, eu apenas passei pro código
  13. Olá tudo bem? espero que sim, pessoal estou a procura de pessoas capacitadas em Delphi, Python, css e html. por tanto se alguém conhecer ou for capacitado em algumas ou todas essas áreas por favor, entre em contato pois tenho uma proposta que pode ou não agradar muito, obrigado.
  14. Outro ;-; Créditos ao bsvs por ter desenhado, só programei de novo [Hidden Content]
  15. PORTAL 2CHEAT Como assim Download Portal ? , este download é do portal que quando você abre "2cheat.net" e aparece "Ir para o site" , "Ir paraa o Forum" , você quer criar um Site/Forum e quer um portal TOP? está ai :) IMAGEM 2CHEAT DOWNLOAD DIRECT (Aqui)
  16. Aprenda HTML5, CSS3 e JavaScript e programe a Web do futuro. Veja boas práticas como performance e design responsivo, e frameworks modernos como jQuery e Bootstrap. Este material gratuito é o que usamos no curso de HTML, CSS e JavaScript da Caelum e esperamos que seja útil no seu aprendizado. DOWNLOAD
  17. Uma foto do jogo feito com Python/Flask e HTML Bom, agora o bixo pega! Vamos criar uma parada mais avançada. Na aula anterior, criamos um joguinho bem besta. Agora vamos começar a brincar de verdade. Vamos construir algo mais fuck monster foda. Que tal um Joguinho de tiro? Fui pegando umas imagens da internet para ficar mais interessante o jogo, mas o ideal e voce construir algo original. Vamos trabalhar com Flask. Segue uma breve explicação do mesmo, se quiser informações a mais, pesquise e estude. E só digitar no google :) PRIMEIROS PASSOS 1 - Primeiramente, certifique-se de estar com python instalado em seu computador. 2 - Vamos instalar o Flask: Windows (Abrir CMD como administrador) pip install flask Linux/OSx sudo pip install flask 3 - Agora que voce instalou o Flask direitinho em seu computador, crie uma pasta para criarmos o jogo. Ela vai ter que ter a seguinte arquitetura de arquivos. No meu caso, eu tenho uma pasta chamada webcheats-python e dentro dela esta organizado todas essas pastas e arquivos. Nao crie o app.pyc, ele gera sozinho. Pode ignorar esse arquivo. 5 - Agora antes de criar um jogo, precisamos entender qual é a proposta do jogo e quais serão as regras. Como eu estou criando um jogo aqui, eu vou dar as regras. Mas o processo sera o mesmo nos proximos jogos que vocês forem criar. Veja abaixo: Um jogo de tiro onde um jogador (voce) vai trocar tiros com um Bot. O bot tera movimentos aleatorios. O jogador vai controlar seu boneco (bonequinho embaixo) com as teclas W,S,A,D e o ESPAÇO para atirar. O jogador e o bot terao um ESCUDO. Entao quando estiverem atras do escudo, estarao protegidos dos tiros. Para acertar o tiro, e preciso sair do escudo e o adversario estar fora do escudo tambem. Alem disso, e preciso os 2 estarem do mesmo lado, caso contrario o tiro não pega. 6 - Bom vamos então começar a criar a estrutura HTML. Jogue dentro do seu templates/game.html esse código abaixo. Não vou explicar o que cada div faz, ja existe alguns tutoriais aqui na Info Zone explicando sobre HTML CSS e Javascript. Vou apenas explicar o algoritmo que fiz. [HIDE-THANKS] <html> <head> <title>Tiro Seco</title> <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/app.css')}}"> </head> <body> <!-- Arena do Jogo--> <div class="arena"> <div class="bot"> <div class="head"><img src="{{url_for('static', filename='img/enemy.png')}}"></div> <div class="shield" style="margin-top: 120px;"><img src="{{url_for('static', filename='img/shieldenemy.png')}}"></div> </div> <div class="player"> <div class="shield"><img src="{{url_for('static', filename='img/shield.png')}}"></div> <div class="head"><img src="{{url_for('static', filename='img/player.png')}}"></div> </div> </div> <!-- Placar--> <div class="placar"> <fieldset> <legend>Você</legend> <div>HP: <span id="player_hp"></span></div> <div>ACERTOS: <span id="player_score"></span></div> </fieldset> <fieldset> <legend>Bot</legend> <div>HP: <span id="bot_hp"></span></div> <div>ACERTOS: <span id="bot_score"></span></div> </fieldset> </div> <!-- jQuery e Regras do Jogo --> <script src="[Hidden Content]" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script>var SHOT_AUDIO = "{{url_for('static', filename='sounds/tiro.mp3')}}"</script> <script src="{{url_for('static', filename='js/game.rules.js')}}"></script> </body> </html> [/HIDE-THANKS] Beleza. Nada muito complexo no HTML acima. Criei uma estrutura simples de HTML (html, head, body) e dentro do body eu adicionei 2 divs: arena e placar. Arena tem o escudo e o personagem do Player e do Bot. No final eu importo o jQuery que vamos trabalhar no arquivo static/js/game.rules.js e um script gravando na variavel SHOT_AUDIO a rota do audio de TIRO que baixei. Isso porque essas variáveis são do FLASK ({{url_for('static', filename='js/game.rules.js')}}), e só vão funcionar no html. 7 - Agora vamos adicionar um CSS bonitinho. Eu fiz algo bem porco, nada demais. Podem editar a vontade. No fundo, eu adicionei uma imagem de Mapa que catei na internet, e o unico arquivo que nao fiz download e joguei o URL mesmo. Jogue o codigo abaixo dentro do seu arquivo static/css/app.css: [HIDE-THANKS] @import url('[Hidden Content]'); body { font-family: 'Sedgwick Ave', cursive; background-image: url('[Hidden Content]') } /* Arena & Placar*/ .arena { width: 500px; height: 580px; background-color: rgba(255, 255, 255, 0.26); color: white; border-radius: 25%; position: relative; margin: auto; box-shadow: 0px 0px 20px #000; } .placar { color: white; text-shadow: 0px 0px 3px #000; margin: auto; width: 530px; position: relative; height: 90px; background-color: #0000007a; } .placar fieldset { width: 230px; position: relative; float: left; } /*Bot*/ .bot { position: absolute; top: 0; text-align: center; width: 100%; } .bot .head { position: absolute; width: 100%; } /* Player*/ .player { position: absolute; bottom: 0; text-align: center; width: 100%; } .player .head img { transform: rotate(180deg); } .player .head img { position: relative; } .player .head img.left { left: 100px; } .player .head img.right { right: 100px; } /* Both */ .player .head img, .bot .head img { width: 125px; } .player .shield img, .bot .shield img { width: 100px; } [/HIDE-THANKS] FLASK_APP=app.py flask run 8 - Bom, agora vamos ao Javascript. Agora vou ser bem detalhado, vai ser um pouco chato mas tentarei resumir o máximo possível. Não é difícil entender o código. Se você possui alguma dificuldade com sintaxe ou algumas funções, e só dar uma pesquisada. Nenhum programador sabe tudo, a maior ferramenta de todos nos é o Google. Abaixo o codigo do Javascript bem comentado e explicado, jogue tudo dentro do seu arquivo static/js/game.rules.js: [HIDE-THANKS] /* @author Cr4cko @description Estas sao as regras e funcoes do jogo. */ /* Sempre deixo variaveis que precisamos instanciar no topo do codigo. Usaremos essa aqui mais no final. Essa variavel vai guardar o audio de TIRO. Sempre que voce ver um som_tiro.play() e o que vai fazer o barulho de TIRO quando apertar ESPAÇO ou quando o BOT atirar. */ var som_tiro = null; /* Aqui eu crio 2 variaveis PLAYER e BOT com os seus atributos. Estou dando uma vida de 100 para os 2, dano de tiro de 5 e zerando o score dos 2 a principio. A variavel is_protected e um boolean (verdadeiro ou falso). Ela vai me dizer se o jogador/bot esta PROTEGIDO no escudo ou nao. Ja a variavel position, diz se o jogador/bot esta na posicao inicial (protegido) ou esquerda(left) ou direita(right). */ PLAYER = { hp: 100, maxHp: 100, damage: 5, score: 0, is_protected: true, position: "initial" } BOT = { hp: 100, maxHp: 100, damage: 5, score: 0, is_protected: true, position: "initial" } /* PLAYER SETTINGS */ /* Essa e a funcao de tiro do jogador. Vejam que eu crio um timer (timerToShotAgain), para impedir que o jogador fique atirando milhoes de vezes por segundo, se nao fica facil demais haha. Aqui e bem simples: Se o bot estiver desprotegido, e eu (player) tambem estiver desprotegido e estivermos no mesmo LADO do mapa (eu no lado esquerdo e ele no lado direito dele), quer dizer que acertei o tiro. Essa funcao e chamada no evento da tecla ESPAÇO no teclado. Voce vera onde eu crio os eventos mais abaixo. */ function player_shot() { if (timerToShotAgain) return; //Se tiver ainda rolando o tempo, impedir de atirar novamente. som_tiro.play(); if (!BOT.is_protected && !PLAYER.is_protected && BOT.position == PLAYER.position) { life = BOT.hp - PLAYER.damage; //resultado da vida do bot - dano do tiro do player if (life > 0){ //se a vida for maior que zero... BOT.hp = life; //altera vida do bot PLAYER.score += 1; //da ponto pro PLAYER //printa os resultados no html $("#bot_hp").text(BOT.hp); $("#player_score").text(PLAYER.score); //Pinta o BOT de vermelho para identificar que foi atingido e depois pinta de transparente. $(".bot .head img").css({"background-color":"red"}); setTimeout(function(){$(".bot .head img").css({"background-color":"transparent"});}, 500) } else{ //Se a vida nao for maior que zero o bot MORREU. chama a funcao de resetar o jogo. resetGame(); } } timerToShotAgain = setTimeout(delayShotAgain, timerMS); } /* Como disse acima, o delay de tiro do player. Quando voce apertar espaco voce tera que esperar 500ms (timerMS) para poder atirar novamente mesmo que clique centenas de vezes no ESPACO. */ var timerToShotAgain; //o timer var timerMS = 500; //delay pra poder atirar novamente function delayShotAgain(){ clearTimeout(timerToShotAgain); timerToShotAgain = null; } /* Aqui e a funcao que protege o jogador. Quando ele nao estiver clicando pra esquerda(A) ou direita(D), ele estara protegido atras do ESCUDO. Ativo o is_protected pra true. E coloco a posicao dele como inicial (protegido). */ function player_shield(){ $(".player .head img").removeClass("left") $(".player .head img").removeClass("right") PLAYER.is_protected = true; PLAYER.position = "initial"; } /* Aqui e o evento que define a DIRECAO do jogador. Esquerda(A) ou direita(D). Lembrando que quando ele estiver fora do escudo, ele estara desprotegido. Definimos o atributo is_protected pra false. */ function player_direction(dir){ $(".player .head img").addClass(dir); PLAYER.is_protected = false; //Aqui vou inverter a ideia de esquerda e direita, pois o jogador esta //de frente para o bot. A esquerda do jogador e a direita do BOT, visse versa. PLAYER.position = dir == "right" ? "left":"right"; //Isso e um if ternario, pesquise depois. } /* EVENTOS*/ /* Esse e o evento de CLIQUE do jogador. Veja que eu estou gravando os eventos de todo o BODY do HTML. Se o jogador clicar no A (esquerda) e o keycode 100. Se clicar no D (direita) e o keycode 97. Se clicar no espaco, keycode 32. */ $( "body" ).keypress(function(evt) { if (evt.keyCode == 32) { player_shot(); } if (evt.keyCode == 100) { //esquerda player_direction("left"); } else if (evt.keyCode == 97){ //direita player_direction("right"); } }); /* Esse e o evento de TIRAR o dedo do clique. O keypress e quando voce aciona o botao O keyup e quando voce tira o dedo. Entao aqui serve apenas para verificar se voce TIROU o dedo do A (esquerda) ou D (direita) para voltar a posicao do player no ESCUDO (initial). */ $( "body" ).keyup(function(evt) { if (evt.keyCode == 65 || evt.keyCode == 68){ player_shield(); } }); /* FIM */ /* BOT SETTINGS */ /* Aqui e a mesma pegada do Player, porem para o BOT. Escudo do BOT. */ function bot_shield(){ $(".bot .head img").css({"float": "initial"}); BOT.is_protected = true; BOT.position = "initial"; } /* Mesma pegada do player. Porem nao precisa inverter as posicoes. */ function bot_direction(direction){ $(".bot .head img").css({"float": direction}) BOT.is_protected = false; BOT.position = direction; } /* Exatamente igual o Player mas nao precisa bloquear a quantidade de cliques, pois o MEU ROBO e honesto e vai jogar bem de boas com voce. :D */ function bot_shot(){ som_tiro.play(); if (!PLAYER.is_protected && !BOT.is_protected && BOT.position == PLAYER.position) { life = PLAYER.hp - BOT.damage; //resultado da vida do player - dano do tiro do bot. if (life > 0){ //se a vida for maior que zero PLAYER.hp = life; //alterar vida player BOT.score += 1; //add pontuacao bot //printar no html os resultados $("#player_hp").text(PLAYER.hp); $("#bot_score").text(BOT.score); //Pintar em vermelho o player dizendo que ele foi atingido, dpois pintar de transparente novamente. $(".player .head img").css({"background-color":"red"}); setTimeout(function(){$(".player .head img").css({"background-color":"transparent"});}, 500) } else{ //Se a vida nao for maior que zero o player MORREU. chama a funcao de resetar o jogo. resetGame(); } } } /* Aqui e a funcao do sleep que eu crio para usar na inteligencia do robo. Só copia :) */ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } /* Aqui e a funcao que da vida ao BOT. Aqui vamos ter que criar toda a logica de acoes do mesmo. Vai ser interessante o BOT fazer movimentos aleatorios, para nao ficar manjado. */ async function startBot() { /* Aqui eu crio o primeiro movimento e segundo movimento. Ao executar o startBot, ele vai fazer uma acao, voltar para o escudo fazer outra acao e depois voltar pro escudo. Entao ele tera 2 movimentos para fazer aleatoriamente. */ var first_dir = Math.floor(Math.random() * 2) + 0; //numero entre 0 e 1 var second_dir = Math.floor(Math.random() * 2) + 0; //numero entre 0 e 1 //Aqui eu crio um tempo aleatorio entre 200ms e 500ms que o bot vai ficar escondido no ESCUDO. var time_protect = Math.floor(Math.random() * 500) + 200; //Se o movimento for 1, esquerda, se for 0, direita. first_dir = first_dir == 1 ? "left":"right"; second_dir = second_dir == 1 ? "left":"right"; /* - INTELIGENCIA DO BOT Agora vem a parte show. Vamos criar os movimentos e dizer os tempos de espera entre um e outro. */ //Iniciando com o robo escondido. await sleep(200); bot_shield(); //O bot espera 100ms vai para uma direcao e atira. await sleep(100); bot_direction(first_dir); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil bot_shot(); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil //Bot volta para escudo bot_shield(); await sleep(time_protect); //O bot espera 100ms vai para uma direcao e atira. await sleep(100); bot_direction(second_dir); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil bot_shot(); await sleep(BOT_NIVEL == "facil" ? 200:100); //200ms nivel facil, 100ms nivel dificil //Bot volta para escudo await sleep(200); bot_shield(); };/* FIM */ /* GAMEOVER: resetGame */ /* Aqui fica a funcao de reset. Se o bot te matar ou voce matar ele, essa funcao e chamada. Bem simples, vemos quem ta com a vida maior, e abre um alert dizendo quem ganhou. Em seguida, resetamos os scores para 0 e setamos a vida do bot e player para o maxHp que sempre sera a vida total. Depois jogamos os 2 para a posicao atras do escudo. */ function resetGame() { //Exibindo Ganhador if (PLAYER.hp > BOT.hp){ alert("Voce ganhou :D") } else { alert("Voce perdeu :(") } //Resetando Vida e Score $("#player_score").text(0); $("#bot_score").text(0); $("#player_hp").text(PLAYER.hp = PLAYER.maxHp); $("#bot_hp").text(BOT.hp = BOT.maxHp); //Voltando para protecao os 2 bot_shield(); player_shield(); } /* LOAD SETTINGS - Configuracao e Start do Jogo */ /* Aqui e onde configuramos as preferencias iniciais do jogo e demos start no bot. */ function loadSettings(){ //Aqui que definimos o nivel do jogo. Lembra ali em cima no delay de tiro do BOT? //Ou seja, se tiver facil, ele vai pra direcao e atira em 200ms. Se tiver no dificil, faz isso em 100ms. //Quanto menos ms, mais rapido, ou seja, mais dificil hehe :) BOT_NIVEL = "facil"; // facil, dificil //Aqui setamos a vida do player/bot e os scores. lembre-se que aqui ainda o jogo nao comecou. $("#player_hp").text(PLAYER.hp); $("#player_score").text(PLAYER.score); $("#bot_hp").text(BOT.hp); $("#bot_score").text(BOT.score); //Carregando som de tiro. Lembra da variavel la em cima? Enfim usaremos ela! som_tiro = document.createElement('audio'); som_tiro.setAttribute('src', SHOT_AUDIO); //aqui a variavel criada no HTML, arquivo do tiro.mp3 som_tiro.load(); /* Agora com a funcao de javascript setInterval, criamos um looping infinito que e executado a cada 2 segundos. Entao o startbot e chamado a cada 2 segundos. Em 2 segundos, vai acontecer todos aqueles eventos da funcao startBot que criamos. */ setInterval(function(){ startBot(); }, 2000); }; /* Quando tudo estiver carregado certinho, executamos o loadSettings para iniciar jogo. */ $(document).ready(function(){ loadSettings(); }) [/HIDE-THANKS] Eita.. bom galera a pior parte passou. Foi mais chato eu organizar todo meu codigo e comentar do que ler e entender isso kkkkkkkkk. Bom, nao fique triste se voce nao entender tudo o que ta rolando ate agora, o importante e voce entender os passos que estamos fazendo e entender um pouco a LOGICA que estou criando. Programar nao e dificil, dificil e saber identificar os mateirias e as decisoes que precisaremos tomar para alcancar certo objetivo. MAS ENFIM, vamos continuar. 9 - Agora com HTML, CSS e o Javascript prontos, esta faltando quem? FLASK! Agora e bem simples, dentro do seu app.py adicione esse codigo: [HIDE-THANKS] from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('game.html') [/HIDE-THANKS] Simples. Certo? Não precisa entender a fundo o que e esse pequeno trecho de codigo. Como estamos usando um framework (Flask), ele possui diversas complexidades e funcoes por tras. Isso e um framework, assumir todas as complexidades por tras e deixar bem facil do usuario entender. No codigo acima, chamamos a classe Flask, e criamos uma rota "/" retornando o template game.html que criamos. O metodo render_template observa a pasta templates. Entao nosso game.html precisa estar la. Se voce mudar o @app.route('/') para @app.route('/game') voce muda a rota do site. Ou seja, quando voce iniciar voce precisara acessar: [Hidden Content]. 10 - Agora so falta as imagens e o som de tiro para estar 100% antes de iniciar o jogo. Eu vou deixar no final do post o link de download de todas as imagens e arquivos. Coloque eles nas pastas de acordo com a estrutura que mostro na imagem la no passo 3 e logo em seguida vamos iniciar o jogo com esse comando digitado no TERMINAL/CMD: FLASK_APP=app.py flask run Pronto! Servidor ligado, agora acesse no teu navegador: [Hidden Content] Teclados: A,D para esquerda/direita e ESPACO para atirar. DOWNLOAD
  18. Olá boa tarde amigos programadores, preciso de uma ajuda para meu site , tem como eu por exemplo colocar um botão em uma pagina exemplo : botão "clientes" e este botão quando a pessoa clicar ser redirecionado para pagina clientes mais protegida com uma senha ? quando clicar pedir para colocar a senha no caso senha do cliente , alguém teria como me explicar ou me passar o código html ou seja la outro qual for.
  19. Eu estou criando projetos e procuro participantes, quem participar, ganha uma parte dos BitCoins! explico mais, se quiser participar!
  20. Olá! Estou desenvolvendo um aplicativo para mim e estou tendo um problema, alguém pode me ajudar? Eu tenho um módulo Module Extensions <Runtime.CompilerServices.Extension()> _ Public Function GetElementsByClassName(ByVal Source As HtmlDocument, ByVal ClassName As String) As HtmlElement() Dim output As New List(Of HtmlElement) For i As Integer = 0 To Source.All.Count - 1 Try If (Source.All(i).GetAttribute("className") = ClassName) Then output.Add(Source.All(i)) End If Catch ex As Exception End Try Next Return output.ToArray() End Function End Module Enfim, o problema é que eu preciso para obter mais de uma classe em uma única linha. Eu tenho o seguinte código plus está retornando erro Dim app As HtmlElement = WebBrowser1.Document.GetElementsByClassName("pid-1-high" & "pid-1-ask & pid-1-ask2")(0) Quero adicionar esta classe automaticamente em um listview Dim z As ListViewItem z = New ListViewItem(app.GetAttribute("InnerText")) Alguém pode me ajudar? Obrigado
  21. Fala galera tudo bem ? estou procurando algum amigo para programarmos juntos, apenas por experiência , atualmente sou desenvolvedor mobile e trabalho com o framework ionic , sei html , css e angularjs (javascript) , e o básico de php , porem aprendo facilmente outra linguagem , sei fazer sites e aplicativos complexos , gosto de praticar , caso alguém tenha interesse me mande msg privado .
  22. HTML <div id="calculator"> <!-- Screen and clear key --> <div class="top"> <span class="clear">C</span> <div class="screen"></div> </div> <div class="keys"> <!-- operators and other keys --> <span>7</span> <span>8</span> <span>9</span> <span class="operator">+</span> <span>4</span> <span>5</span> <span>6</span> <span class="operator">-</span> <span>1</span> <span>2</span> <span>3</span> <span class="operator">÷</span> <span>0</span> <span>.</span> <span class="eval">=</span> <span class="operator">x</span> </div> </div> <!-- PrefixFree --> <script src="[Hidden Content]" type="text/javascript" type="text/javascript"></script> CSS /* Basic reset */ * { margin: 0; padding: 0; box-sizing: border-box; /* Better text styling */ font: bold 14px Arial, sans-serif; } /* Finally adding some IE9 fallbacks for gradients to finish things up */ /* A nice BG gradient */ html { height: 100%; background: white; background: radial-gradient(circle, #fff 20%, #ccc); background-size: cover; } /* Using box shadows to create 3D effects */ #calculator { width: 325px; height: auto; margin: 100px auto; padding: 20px 20px 9px; background: #9dd2ea; background: linear-gradient(#9dd2ea, #8bceec); border-radius: 3px; box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2); } /* Top portion */ .top span.clear { float: left; } /* Inset shadow on the screen to create indent */ .top .screen { height: 40px; width: 212px; float: right; padding: 0 10px; background: rgba(0, 0, 0, 0.2); border-radius: 3px; box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); /* Typography */ font-size: 17px; line-height: 40px; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-align: right; letter-spacing: 1px; } /* Clear floats */ .keys, .top {overflow: hidden;} /* Applying same to the keys */ .keys span, .top span.clear { float: left; position: relative; top: 0; cursor: pointer; width: 66px; height: 36px; background: white; border-radius: 3px; box-shadow: 0px 4px rgba(0, 0, 0, 0.2); margin: 0 7px 11px 0; color: #888; line-height: 36px; text-align: center; /* prevent selection of text inside keys */ user-select: none; /* Smoothing out hover and active states using css3 transitions */ transition: all 0.2s ease; } /* Remove right margins from operator keys */ /* style different type of keys (operators/evaluate/clear) differently */ .keys span.operator { background: #FFF0F5; margin-right: 0; } .keys span.eval { background: #f1ff92; box-shadow: 0px 4px #9da853; color: #888e5f; } .top span.clear { background: #ff9fa8; box-shadow: 0px 4px #ff7c87; color: white; } /* Some hover effects */ .keys span:hover { background: #9c89f6; box-shadow: 0px 4px #6b54d3; color: white; } .keys span.eval:hover { background: #abb850; box-shadow: 0px 4px #717a33; color: #ffffff; } .top span.clear:hover { background: #f68991; box-shadow: 0px 4px #d3545d; color: white; } /* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */ .keys span:active { box-shadow: 0px 0px #6b54d3; top: 4px; } .keys span.eval:active { box-shadow: 0px 0px #717a33; top: 4px; } .top span.clear:active { top: 4px; box-shadow: 0px 0px #d3545d; } JS // Get all the keys from document var keys = document.querySelectorAll('#calculator span'); var operators = ['+', '-', 'x', '÷']; var decimalAdded = false; // Add onclick event to all the keys and perform operations for(var i = 0; i < keys.length; i++) { keys[i].onclick = function(e) { // Get the input and button values var input = document.querySelector('.screen'); var inputVal = input.innerHTML; var btnVal = this.innerHTML; // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result // If clear key is pressed, erase everything if(btnVal == 'C') { input.innerHTML = ''; decimalAdded = false; } // If eval key is pressed, calculate and display the result else if(btnVal == '=') { var equation = inputVal; var lastChar = equation[equation.length - 1]; // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring equation = equation.replace(/x/g, '*').replace(/÷/g, '/'); // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it if(operators.indexOf(lastChar) > -1 || lastChar == '.') equation = equation.replace(/.$/, ''); if(equation) input.innerHTML = eval(equation); decimalAdded = false; } // Basic functionality of the calculator is complete. But there are some problems like // 1. No two operators should be added consecutively. // 2. The equation shouldn't start from an operator except minus // 3. not more than 1 decimal should be there in a number // We'll fix these issues using some simple checks // indexOf works only in IE9+ else if(operators.indexOf(btnVal) > -1) { // Operator is clicked // Get the last character from the equation var lastChar = inputVal[inputVal.length - 1]; // Only add operator if input is not empty and there is no operator at the last if(inputVal != '' && operators.indexOf(lastChar) == -1) input.innerHTML += btnVal; // Allow minus if the string is empty else if(inputVal == '' && btnVal == '-') input.innerHTML += btnVal; // Replace the last operator (if exists) with the newly pressed operator if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) { // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator input.innerHTML = inputVal.replace(/.$/, btnVal); } decimalAdded =false; } // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed. else if(btnVal == '.') { if(!decimalAdded) { input.innerHTML += btnVal; decimalAdded = true; } } // if any other key is pressed, just append it else { input.innerHTML += btnVal; } // prevent page jumps e.preventDefault(); } } Creditos:kushsolitary
  23. Introdução ao HTML Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag <HTML>, na primeira linha do código, e terminar com </HTML> na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por: <xxx>: Este é o inicio da tag;* </xxx>: Este é o fechamento da tag para que ela possa funcionar.** * xxx é apenas uma representação de uma tag, não é uma tag HTML. ** Algumas tags não necessitam do fechamento. Neste caso você será avisado. Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer. Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE> ... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos. - A tag <BODY> O "corpo" do documento deve ser demarcado pelo par <BODY> ... </BODY>. Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags <BODY> e </BODY> é que você vai colocar todos os códigos para sua página. Um documento simples seria digitado da seguinte maneira: <HTML> <HEAD> <TITLE> Titulo que ira usar no meu Caso sera "WebCheats"</TITLE> </HEAD> <BODY> Aqui você coloca os comandos em HTML. </BODY> </HTML> Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima poderia ser escrito da seguinte forma: <HTML><HEAD><TITLE> Meu documento HTML </TITLE></HEAD><BODY>Aqui você coloca os comandos em HTML.</BODY></HTML> A vantagem é que isto economiza espaço em disco, mas é uma maneira muito confusa e relaxada de programar. Acostume-se a organizar seus programas para poder entendê-los posteriormente. - Atributos do <BODY> Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página): <BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer"> Onde: - BGCOLOR Cor de fundo (padrão: cinza ou branco) - TEXT Cor dos textos da página (padrão: preto) - LINK Cor dos links (padrão: azul) - ALINK Cor dos links, quando acionados (padrão: vermelho) - VLINK Cor dos links, depois de visitados (padrão: azul escuro ou roxo) - BACKGROUND Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui. Em "cor", você pode colocar os valores de cores em inglês como: Preto = black Branco = white Azul = blue Amarelo = yellow Vermelho = red Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor Algumas cores disponíveis RRGGBB (hexadecimal): Cor - Código HTML PRETO - #000000 BRANCO - #FFFFFF VERMELHO - #FF0000 VERDE - #00FF00 AZUL - #0000FF ROSA - #FF00FF AMARELO - #FFFF00 Agora que você já aprendeu como é o arquivo HTML básico , pode começar a ver tags. Elas ficam após o comando <BODY> , no meio do seu texto. Após <BODY> você já pode começar a escrever o que quiser. Há duas formas de formatar o seu texto: - Tags de título <H> - "Headings" Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6. <H1> Este é o primeiro nível </H1> <H2> Este é o segundo nível </H2> <H3> Este é o terceiro nível </H3> <H4> Este é o quarto nível </H4> <H5> Este é o quinto nível </H5> <H6> Este é o sexto nível </H6> - Tag <FONT> - Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes: - Atributo FACE - FACE: Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim: <FONT FACE=fonte_da_letra>Texto</FONT> Exemplo: <FONT FACE=Times>Fonte Times New Roman </FONT> Fonte Times New Roman <FONT FACE=Arial>Fonte Arial </FONT> Fonte Arial <FONT FACE=Courier>Fonte Courier New </FONT> Fonte Courier New - Atributo COLOR e SIZE - COLOR e SIZE: Atributos cor e tamanho: <font size="3"> A palavra terá o tamanho 3</font> A palavra terá o tamanho 3 <font color="red"> A palavra terá a cor vermelha </font> A palavra terá a cor vermelha. Podemos também combinar as tags acima: <font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font> O resultado final será: Palavra com tamanho 3 e em vermelho Formatando textos Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim: - Tags <B> , <U> , <I> e <CENTER> <B> Texto </B> - Texto fica em Negrito. <U> Texto </U> - Texto Sublinhado. <I> Texto </I> - Texto em Itálico. <CENTER> Texto </CENTER> Texto centralizado. Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo: <CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER> - Tag <P> - Parágrafos: Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova. Para fazer um parágrafo novo, basta colocar a tag <P>. Por exemplo, escreva no editor o seguinte, deste jeito: Parágrafo 1<P>Parágrafo 2. O resultado será este: Parágrafo 1 Parágrafo 2 - Tag <BR> - Linhas Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <BR>. Por exemplo, escreva: Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2. O resultado será este: Parágrafo 1 Linha 1 Parágrafo 2 Linha 2
  24. É possível animar alguns textos com tipos especiais de formatação, sempre diretamente no código fonte. É importante notar que recursos de animação devem ser utilizados com cuidado e parcimônia, pois em uma página que já apresenta vários motivos que chamam a atenção do leitor (figuras, cores, fontes) os efeitos animados são mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso 1 - <span style="color: rgb(255, 0, 0);"><marquee behavior=scroll>Tô nem aí!</marquee></span> Irá passar um Texto correndo , lembrando que o texto está vermelho so você mudar ! 2 - <marquee direction=up <P align="center"><center> <font color=#7B68EE>Subindo!</font></p></marquee> O Texto ficará subindo ! Créditos : UFpa
×
×
  • Create New...