Como Criar Site
Criar um site é uma coisa simples, mas além de saber as tags e suas funcionalidades, você precisa ainda, seguir alguns padrões para que seu código fique “limpo”. Vamos ver nesse artigo como criar site a partir do entendimento das principais tags html, repare que este post é voltado pra quem está começando, então antes que me atirem pedras do tipo, isso todo mundo já sabe, tenha em mente que assim como nós um dia não sabíamos nada sobre html, muitas pessoas estão exatamente nesse ponto, portanto o código a seguir:
<html> <head> <title></title> <style></style> <script></script> </head> <body></body> </html>
No código acima, entenda o seguinte, as tags de início e fim são o <html></html> essas tags indicam o início e o fim da página, bom, vamos organizar isso melhor, veja:
- <html></html> – início e fim da página
- <head></head> – início e fim do cabeçado da página, repare que dentro dessas tags existem outras tags que veremos a seguir.
- <title></title> – início e fim do título da página
- <style></style> – início e fim do estilo da página
- <script></script> – início e fim do script da página
- <body></body> – início e fim do corpo da página
Não se assuste, sei que pra quem está começando, as definições não ajudam tanto assim, mas o melhor pra se apriender a função de cada tag é exatamente a prática. Caso você seja um iniciante, repare que para você criar uma página você só precisa de algum editor de texto como o notepad, mas é claro que se você tiver um Dreamweaver é bem melhor. Então para você testar uma página em html, pode criar um arquivo de texto e inserir os códigos dentro dele, no final salve com a extensão .html, feito isso você só precisa dar dois cliques sobre o arquivo que você criou, repare que o mesmo vai ser aberto em seu navegador padrão, caso queira abrir em um navegador específico basta arrastar esse arquivo para cima do atalha do navegador web desejado.
Vamos supor agora que você seja um desenvolvedor web (webmaster) e esteja criando um site, então as tags acima descritas poderiam ser preenchidas com os seguintes valores:
<html>
<head>
<title>Criação de Sites</title>
<style>
*{
margin:0px;
padding:0px;
border:0px;
}
body{
background-color:#CCC;
color:#333;
}
.blue-bold{
font-weight:bold;
color:#069;
}
#fale-conosco{
color:#063;
}
#fale-conosco p ol li{
color:#000;
}
#fale-conosco li.fax{
color:#FF9;
}
</style>
<script>
window.onload = function(){
alert("Bem vindo");
}
</script>
</head>
<body>
<h1>Site do melhor desenvolvedor da web (EU) </h1>
<p class="blue-bold">
Crio WebSites para empresas que pagam bem, o valor final vai depender do tempo do serviço<br />
Interessados enviar um breefing para xxx@xxx.com
</p>
<div id="fale-conosco">
<h2>Formas de contato:</h2>
<p>
<ol>
<li>Fone: xxx-xxxxxx</li>
<li class="fax">Fax: xxx-xxxxxx</li>
</ol>
</p>
</div>
</body>
</html>
No código acima, veja que dentro das tags <title></title> coloquei uma frase sugestiva para o suposto serviço que eu ofereço, isso é importante para que os buscadores web indexem seu site corretamente, ajudando ao usuários a encontrar seu site com facilidade. Dentro das tags <style></style> definimos uma série de estilos, para você entender o que foi feito ali, entenda isso:
a)
*{
margin:0px;
padding:0px;
border:0px;
}
Quando você utiliza um asterisco, você define um estilo geral, que será aplicado para todos os elementos da página, no nosso exemplo, utilizei esse recurso para configurar a margem, espaçamento e borda para 0px.
b)
body{
background-color:#CCC;
color:#333;
}
Aqui utilizei o nome de um elemento da página. Quando você utiliza o nome de um elemento no estilo, o mesmo será aplicado para o elemento respectivo, no nosso caso estou configurando a cor de fundo do corpo da página e a cor do texto do mesmo.
c)
.blue-bold{
font-weight:bold;
color:#069;
}
Quando você utiliza um ponto seguido de um nome, você está declarando uma classe que poderá ser utilizada em qualquer elemento, para você definir essa classe para algum elemento basta inserir dentro do elemento o seguinte class=”blue-bold”. Nesse caso, eu defini o texto como bold e alterei a cor.
d)
#fale-conosco{
color:#063;
}
Quando você utiliza o sinal # seguido de um nome, você está definindo um estilo para um identificador. Essa classe, no nosso exemplo, está definindo uma cor para o identificador fale-conosco. No elemento você define um identificador através do sinalizador id, ex: id=”fale-conosco”, repare que um identificador é único e não deveria ser repetido. Caso precise de um estilo para ser aplicado para vários elementos utilize uma classe como vimos anteriormente.
e)
#fale-conosco li{
color:#000;
}
Aqui estamos aplicando um estilo específico para elementos li que estejam dentro do elemento fale-conosco. Este tipo de definição agrupada permite-nos definir estilos específicos para um determinado elemento, classe ou ordem de elementos ou classes. Nesse caso a cor do texto foi alterada.
f)
#fale-conosco li.fax{
color:#FF9;
}
Aqui estamos utilizando mais uma forma de agrupamento de definição de estilo, ou seja, o estilo acima só será válido para elementos li da classe fax e que estejam inseridos dentro de um elemento chamado fale-conosco. Um detalhe é que não há um limite para agrupamentos, o que é bem interessante para qualquer desenvolvedor web.
Agora vamos dar uma olhada no Script:
<script>
window.onload = function(){
alert("Bem vindo");
}
</script>
Esse é um script unicamente ilustrativo, visto que não faz nada realmente útil para nós, mas ele nos ensina uma coisa essencial que é o método onload, esse método só é invocado quando a página estiver totalmente carregada, isso é bem útil caso você precise acessar elementos do documento em seu script, o que geraria um erro se executado antes do elemento ter sido carregado. O alert vai apenas exibir um alerta quando a página carregar.
Para você ver essa página em ação, copie o código completo que foi exposto no início desse post, cole em algum editor de texto – o bloco de notas serve – e salve com a extensão .html ou .htm, depois é só abrir em seu navegador web preferido. Para nosso primeiro post sobre html é isso, caso tenham gostado desse post postem seus comentários que crio mais artigos com dicas de como criar um site
| Anderson Maki |  |
|
 |
Anderson Makiyama é formando em sistemas para a internet pela faculdade Anhanguera, dedica seu tempo criando soluções para a internet e escrevendo sobre o assunto. Possui alguns blogs onde frequentemente disponibiliza dicas sobre os temas: wordpress, programação PHP, dinheiro na internet, otimização de sites (SEO), etc. |
© 2011 / 2012 - TODOS OS DIREITOS RESERVADOS
Gostava de saber como se faz um site desde do inicio.
02/12Como devo começar.
Agradecia vossa ajuda.
Ob.
02/12Pela ajuda que me possam dar.