Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Tutorial - Criação de site. Aula 01. Programador: Zuck Início: Vamos começar com o básico. Vamos montar a estrutura do site. Adicionando um título ao site: Usamos <title></title> para adicionarmos um nome ao site. Texto de exemplo: Em seguida coloquei um texto básico como exemplo, que mudarei e futuramente no tutorial. <!DOCTYPE html> <head> <title>Nome do seu site aqui</title> </head> <body> <div>texto de exemplo</div> </body> </html> Style: Em seguida irei adicionar um código css na própria index para editarmos o site. Background: Vamos adicionar uma cor no fundo da página do site, eu escolhi um "cinza claro" que é "#DDD". Para adicionarmos a cor usamos: "background-color: #DDD" Imagem: Se forcemos colocar uma imagem teríamos que mudar o "background-color" por apenas "background". Body: Vamos adicionar a cor no <body> que é onde fica toda a página de fundo. Usamos "body { }" <style> body { background-color: #DDD; width: 100%; margin: 0 auto } </style> Lugar do <style>: Teremos que adicionar o <style> abaixo de <head> e <title>. <!DOCTYPE html> <head> <title>Nome do seu site aqui</title> <style> body { background-color: #DDD; width: 100%; margin: 0 auto } </style> </head> <body> <div>texto de exemplo</div> </body> </html> Texto: Agora vamos editar aquele texto do ínicio do tutorial, estou falando do "texto de exemplo". Vamos centralizado, mas antes vamos criar o seu modelo. Modelo: Onde está <div>texto de exemplo</div>, vamos abrir o <div>, assim <div id="texto">texto de exemplo</div>. id="texto" é oque iremos usar no css também, para mudarmos tudo que está dentro daquela DIV. CSS da DIV texto: Vamos criar um css para a tal div, vamos apenas centralizar o texto, mudar a font, e colocar cores e etc... #texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) } Significados: text-align: é o lugar onde o texto irá ficar, no caso coloquei "center" ou seja, "centro", assim ficará centralizado. font-size: é o tamanho da fonte do texto, no meu caso coloquei 20px, ou seja a fonte ficará 20 pixels. font-family: é o estilo da fonte, eu coloquei uma bem famosa, e bem bonita, "sans-serif". font-weight: é como posso dizer, é tipo para colocar o texto com a fonte em Bolder. color: séria a cor do texto dentro da div, eu coloquei "#FFF" que é a cor "Branca". text-shadow: é a sombra que ficará no texto. Resultado da primeira aula. <!DOCTYPE html> <head> <title>Nome do seu site aqui</title> <style> body { background-color: #DDD; width: 100%; margin: 0 auto } #texto { text-align: center; font-size: 20px; font-family: sans-serif; font-weight: bolder; color: #FFF; text-shadow: 0 1px 1px rgba(0,0,0,1.5) } </style> </head> <body> <div id="texto">texto de exemplo</div> </body> </html> Gostou da "Primeira" aula? deixe o seu like, e comente oque quer que eu adicione na segunda aula. Todos os comentários serão aceitos, até mesmo as críticas, se tiver né. Atenciosamente: Zuck Link para o comentário Compartilhar em outros sites More sharing options...
Álvaro Filho Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Muito Bom Link para o comentário Compartilhar em outros sites More sharing options...
Aeffy Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Devia ter explicado melhor sobre as tags body, head e <!DOCTYPE html>, mas legal. Link para o comentário Compartilhar em outros sites More sharing options...
Guest HeyBaby Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Me ensina a criar site de jogos? Gostei muito do tutorial. Link para o comentário Compartilhar em outros sites More sharing options...
Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Devia ter explicado melhor sobre as tags body, head e <!DOCTYPE html>, mas legal. Obrigado por me lembrar, irei explicar sim no próximo tutorial, na Aula 02. Link para o comentário Compartilhar em outros sites More sharing options...
Aeffy Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Me ensina a criar site de jogos? Gostei muito do tutorial. Me ensina a criar site de jogos? Gostei muito do tutorial. https://www.youtube.com/watch?v=JPBhfrYQhuI É isso que quer? :giggle: Link para o comentário Compartilhar em outros sites More sharing options...
Guest md5 Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Devia ter explicado melhor sobre as tags body, head e <!DOCTYPE html>, mas legal. E esqueceu ";" aqui: body { background-color: #DDD; width: 100%; margin: 0 auto } Ah, e HTML não é linguagem de programação. Link para o comentário Compartilhar em outros sites More sharing options...
Guest HeyBaby Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 https://www.youtube.com/watch?v=JPBhfrYQhuI É isso que quer? :giggle: não, isso ai não é de plataforma própria. Link para o comentário Compartilhar em outros sites More sharing options...
xHiroshi Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 coloque uma imagem de como fica e.e Link para o comentário Compartilhar em outros sites More sharing options...
Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 E esqueceu ";" aqui: body { background-color: #DDD; width: 100%; margin: 0 auto } Ah, e HTML não é linguagem de programação. Não esqueci não, no final não precisa colocar e eu não falei que html é linguagem de programação amiguinho Link para o comentário Compartilhar em outros sites More sharing options...
Aeffy Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 coloque uma imagem de como fica e.e http://imgur.com/hla0t9m Link para o comentário Compartilhar em outros sites More sharing options...
Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 http://imgur.com/hla0t9m vlw por mostrar ;:) Quem sabe a gente cria um tutorial junto dps Link para o comentário Compartilhar em outros sites More sharing options...
Proyx Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 a area certa seria html eu acho, mas bom tutorial Link para o comentário Compartilhar em outros sites More sharing options...
Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Me ensina a criar site de jogos? Gostei muito do tutorial. Em breve esse so tutorial pode se tornar um site de jogos, vlw pela dica a area certa seria html eu acho, mas bom tutorial Eu irei falar de várias linguagens de programação nos tutoriais, então segui essa imagem. Se eu estiver errado me avise, que mudo de área no próximo tutorial. Muito Bom Muito obrigado :) Link para o comentário Compartilhar em outros sites More sharing options...
ViniGameer_ Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Nice, belo tutorial.. Aceito um site para meu servidor hsuashaushau Link para o comentário Compartilhar em outros sites More sharing options...
Guest MrShewdor Postado Dezembro 21, 2015 Denunciar Compartilhar Postado Dezembro 21, 2015 Nice, belo tutorial.. Aceito um site para meu servidor hsuashaushau Pode ser que eu faça, manda informações do site por mensagem Link para o comentário Compartilhar em outros sites More sharing options...
lucakiksd07 Postado Junho 29, 2019 Denunciar Compartilhar Postado Junho 29, 2019 Seu tópico foi marcado como Inativo. Para reverter esta ação, entre em contato com a equipe de Moderação. OBS: Essa mensagem é automática. Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados