O código HTML - Como fazer um site #4

Oi gente, tudo bem?
Bom, hoje começa o que pra alguns é considerada a parte mais difícil... Mas acredite, não é tão difícil quanto parece, isso porque há muitos sites e exemplos que vão te ajudar na árdua tarefa de fazer seu site, e com o tempo, a prática, assim como em qualquer outra coisa que se aprende, você irá decorar como se faz certas coisas e não terá que ficar quebrando a cabeça mais...
Bom, antes de começar a falar do código é importante que você tenha noção sobre acesso à diretórios...
Diretórios, não são nada mais do que pastas, iguais a que você tem no seu computador mesmo... Só que quando você está programando seu site, você não acessará estas pastas com o mouse, mas sim pelo endereço delas... Mas calma, não é nenhuma coisa de hacker não...rs
Vamos à um exemplo para facilitar a explicação...
Se você já estiver seguindo meu tutorial todo dia, provavelmente criou uma pasta para guardar todos os arquivos do primeiro site que você está tentando fazer, certo?
Esta pasta será considerada a pasta raiz, pois nela estará a página inicial do seu site...
As imagens que foram recortadas para serem usadas na página que será programada podem ser colocadas em pastas, ou seja, você pode criar uma pasta pra guardar as imagens do layout, outra pasta pra guardar fotos dos seus produtos, enfim...
Neste caso, quando você precisar carregar uma dessas imagens que está dentro do seu diretório raiz(ou dentro de alguma pasta que está nele), é considerado um carregamento local, isso significa que você não precisa inserir a o endereço completo para se achar uma imagem, basta colocar o nome da imagem, caso ela esteja no diretório raiz, ou o nome da pasta seguido por / e o nome da imagem... Não se esqueça de colocar a extensão da imagem...
Vou dar um exemplo com o site que estou fazendo agora...

• Eu criei uma pasta chamada eric corsets;
• Dentro dela criei um arquivo chamado index.htm(index é o nome padrão de página inicial dos sites, e o htm é a linguagem que vamos utilizar);
• Dentro dessa pasta eu criei uma pasta chamada assets, nela coloquei as imagens que recortei do layout;
• Quando ou for exibir alguma imagem dessa pasta no meu arquivo index.htm, o endereço pra imagem será: "assets/imagem.jpg";
• Esta regra vale também para endereços de links, ou seja, se o link vai levar pra um arquivo que está na mesma pasta do arquivo atual(index.htm),  o endereço será: "outro_arquivo.htm";
• Você também pode acessar arquivos de pastas superiores às pastas raiz, ou seja, a pasta eric corsets foi criada dentro da pasta meus documentos, na pasta meus documentos há uma imagem que eu quero utilizar no meu site(é claro que você poderia mover a imagem de uma pasta pra outra, mas suponhamos que você não queira), o comando "../" equivale ao comando "Acima" do windows explorer, se você não sabe esse comando nos manda para a pasta onde está a pasta que estávamos vendo... Sendo assim o endereço para uma imagem de uma pasta anterior à pasta raiz é: "../imagem.jpg";
• Sim, você pode usar quantas vezes quiser o código acima, ou seja, é possível fazer isso: "../../../../imagem.jpg";
• Também é possível voltar por algumas pastas e depois avançar para outras "../Minhas Imagens/brasil.jpg";
• Por fim, também podemos inserir os endereços completos sempre... Um exemplo de endereço completo é: "http://www.umsite.com.br/imagens/exemplo.jpg", o lado ruim de usar essa técnica é que você terá que ter hospedado seu site antes de testar, já o jeito anterior funciona tanto com o site hospedado, quanto com o site no seu computador...

Bom a segunda coisa que vocês tem que entender antes de falarmos de html é como funcionam as tags..

Tag significa etiqueta se não me engano, e no código html são elas que identificam cada elemento da página...

As tags são representadas da seguinte forma: <tag>conteúdo</tag>

1. As tags começam com o sinal de menor;
2. Depois do sinal de menor vem a identificação da tag;
3. Depois da identificação da tag podem vir atributos;
4. Depois dos atributos vem um sinal de maior;
5. Depois do sinal de maior é inserido o conteúdo da tag;
6. Após isso é inserido o sinal de menor acompanhado pela barra( / ), esta barra que fará o navegador entender que a tag iniciada anteriormente terminará aqui, caso não haja barra, o navegador interpretará que uma nova tag foi criada dentro de uma existente;
7. Depois da sinalização de final da tag é inserido novamente a identificação dela e o sinal de maior;
8. Quando uma tag é inserida dentro da outra, a tag exterior é considerada pai da tag interior. Se houver uma tag dentro da tag interior a tag interior será filha da exterior e pai da tag dentro dela...(Não há tag neta, bisneta, etc...rsrs)

Bom, acho que a estrutura das tags é mais fácil de ser entendida olhando do que pela explicação que acabei de fazer né?rs

Bom, entendido isto, vamos ao HTML...

Antes de tudo você vai ir na pasta onde está guardando os arquivos do seu site, e vai apertar com o botão direito, depois vai em novo>documento de texto, daí você vai nomeá-lo de index.html(ou .htm, no final da na mesma...rs).

Depois disso você vai clicar com o botão direito sobre ele, clica em abrir com e escolher bloco de notas...

Se você quiser também pode usar um editor de sites, como o notepad++ que é gratuito ou o Dreamweaver que é pago... Como no caso você é iniciante e como eu acho que o programa que você vai usar não faz tanto diferença, pode usar o bloco de notas mesmo... ^^

Bom, nesse arquivo em branco você vai colar as linhas abaixo:

<html>

<head>

<title>Meu primeiro site</title>

</head>

<body>

Exemplo de texto

</body>

</html>

Bom, veja que a primeira tag a aparecer é html, logo ela é pai das tags interiores à ela... Ela é a que mostra ao navegador que esta página está no formato de html(é importante colocar isso, pois há outros formatos)...

A primeira tag que está dentro da tag html é head, bom se você sabe de inglês sabe que isso quer dizer cabeça, ou seja, isso é uma espécie de cabeçalho para sua página, apesar de ser um cabeçalho, ela não será visível aos visitantes, ao menos não aos leigos que não sabem ver os códigos do seu site...rs

Exceto a tag title, que será o título da sua página(aparecerá nas abas do navegador), as outras tags inseridas na tag head geralmente servem pra ajudar seu site a ser encontrado por buscadores, ou para carregar alguns códigos, antes que comece a carregar o conteúdo que realmente aparecerá pro visitante...

Bom, a tag body é a que realmente nos interessa... rs

É nela que será feita toda a estrutura do seu site...

Pra criar as estruturas corretamente você precisará conhecer as tags e saber pra quê cada um delas serve...

Irei apresentar um exemplo agora, nele você poderá ver um pouco do potencial das tags mais utilizadas, mas caso elas não atendam as suas necessidades, não deixe de pesquisar por outras, ou comentar esse post para eu tentar te ajudar...

Bom, lembram do site que estou fazendo né? Agora vou começar a criar o código dele, tudo que eu disse agora será inserido dentro da tag body... Irei falando o código aos poucos para conseguir explicar pra vocês...

<a href="index.htm">

<img src="assets/logo.jpg">

</a>

Bom, vamos começar a explicação... No código acima há duas tags, a tag "a" que é usada pra identificar objetos clicáveis que levam a algum link, e a tag "img" que é para você carregar uma imagem...

Eu só havia comentado acima que as tags podem ter atributos, mas não tinha comentado como eles são criados, pois bem, a tag "a" tem o atributo href, nele você colocará o endereço do arquivo destino, ou seja, quando clicarem nessa imagem, irão pra o endereço que você colocou nesse atributo href... Os atributos são feitos da seguinte forma: abreviação="conteudo"... Sim, as aspas e o sinal de igual não estão aí por acaso, essa é a forma de se escrever um atributo na linguagem html, essa forma de se escrever determinada coisa leva o nome de sintaxe... Se você não colocar as aspas o navegador poderá apontar erros de sintaxe no console de erros...

Bom como já foi falado anteriormente, se a tag "a" tem o atributo a tag img também tem que ter, afinal o navegador não conseguirá adivinhar qual imagem exibir só de falarmos que queremos colocar uma imagem naquele local do código né...rsrs O endereço da imagem a ser carregada é colocado no atributo src(abreviação de search, que é busca em inglês).

Bom agora você já consegue colocar imagens em seu site e fazer com que quando cliquem nelas as pessoas sejam levadas para outros arquivos... Isso é o básico à se saber...

Supondo que você não queira colocar uma imagem, é claro que ao invés da tag você pode escrever clique aqui, ou sei lá...rs Por exemplo: <a href="http://google.com">Clique aqui para acessar o google</a> .

É importante relembrar que quando o arquivo destino não está na pasta raiz do arquivo atual(index.htm), você tem que colocar http:// e o endereço completo para conseguir acessar corretamente...

Vamos a segunda parte:

<div>

<a href="https://www.facebook.com/eric.corsets">

<div class="social face">&nbsp;</div>

</a>

<a href="https://www.youtube.com/channel/UC20xGpu-avv516EpB6EA_DQ">

<div class="social youtube">&nbsp;</div>

</a>

<a href="https://twitter.com/ericcorsets">

<div class="social twitter">&nbsp;</div>

</a>

<a href="#">

<div class="social insta">&nbsp;</div>

</a>

</div>

Agora começamos com a tag div, esta tag pode ser utilizada de várias formas, você verá...

Depois da primeira tag div há várias tags "a", esse código é referente aos botões de redes sociais, então tem quatro links... Poderiam haver imagens de cada botão dentro de cada link, mas lembram-se que havia falado da técnica de sprites? Pois bem, esses botões serão feitos com essa técnica, por isso dentro de cada tag "a", há uma tag div... A tag div tem o atributo class, ele é usado pra estilizar determinados elementos, perceba que em todos os botões de redes sociais, há a classe social, depois disso há um espaço e um identificador da rede social... Isso faz com que cada elemento tenha duas classes, a primeira é social, e a segunda depende... Dentro de cada div de botão social há "&nbsp;", em código isso é interpretado como espaço, é interessante colocar isso, pois nem sempre o navegador exibe de maneira correta os elementos div que não tem conteúdo, então pra não deixar sem conteúdo é melhor colocar espaço... Bom e porque não colocar um espaço normal? Porque o navegador também ignora às vezes...rsrs

Bom, acho que já deu pra vocês entenderem essa estrutura que vai ir na parte do body certo?

Mas ao contrário da primeira parte do código, essa parte precisará ser estilizada para ser exibida corretamente...

Para fazer isso você deve criar um elemento style na tag head do seu html...

Dentro desta tag style você colocará o seguinte:

/* 

Para estilizar um elemento por classe, você coloca .(ponto) e depois o nome da classe, após isso abre-se uma chave( { ), escreve-se os atributos separando-os por ponto e vírgula e no final da estilização do elemento, fechamos a chave ( } ) .

*/

.social{

display:inline-block; /* Os elementos div por padrão são exibidos um por linha, isso faz com que sejam exibidos lado a lado */

vertical-align:top; /* Vai definir o topo como referência de alinhamento vertical para os itens, para que fiquem todos na mesma altura */

width:30px; /* Define a largura em pixels */

height:30px; /* Define a altura em pixels */

border:5px solid #fff; /* Cria uma borda para o elemento, no caso essa borda é só para dar um espaçamento entre os botões */

background-image:url(assets/social.jpg); /* Carrega a imagem que tem todos os botões de redes sociais como imagem de fundo para o elemento */

background-repeat:no-repeat; /* Faz com que o fundo não se repita */

}

/*

O código acima fará com que todos os botões tenham o tamanho de 30 pixels, sejam exibidos lado à lado e na mesma altura, e tenham uma borda branca(mesmo cor de fundo do site) pra não ficarem encostados um no outro... Além disso já configuramos para que seja carregada a imagem de fundo com todas as redes sociais neles, agora basta posicionar essa imagem dentro do seu elemento...

Repare que os elementos abaixo tem uma referência um pouco diferente, com dois pontos...

Quando há separação entre o .social e o .face, a estilização vai acontecer em todos os elementos com classe face que estiverem dentro do elemento com classe social... Já colocando tudo junto(como está), esta estilização só será aplicada a elementos que tem as duas classes juntas... Lembra que os elementos tinham class="social face" ? Então...

*/

.social.face{

background-position:0px 0px; /* Como o ícone do face é o primeiro, a imagem não tem que ser arrastada nem pra esquerda, nem pra cima... */

}

.social.youtube{

background-position:-30px 0px; /* Já no caso do youtube a imagem tem que ser arrastada 30px para direita, para fazer isso coloca-se -30px , não esqueça de colocar o menos, pois se você não colocar a imagem será arrastada para a esquerda e nada será visto */

}

.social.insta{

background-position:-60px 0px; /* Caso ainda não tenha ficado claro este atributo tem duas posições separadas por espaço, a primeira é referente à horizontal(pros lados) e a segunda à vertical(pra cima e pra baixo) */

}

.social.twitter{

background-position:-90px 0px;

}

Você pode colocar esse código exatamente como está(com os comentários) na sua tag style, isso porque estes comentários serão ignorados pelo navegador pois estão entre /*  */ , ou seja, se por algum motivo você precisar fazer um comentário durante as estilizações, seja pra lembrar o que um trecho do código faz, seja pra não esquecer onde parou pra continuar outro dia, é assim que se faz...

Se você quiser fazer um comentário durante o código html você faz da seguinte forma:

<!-- Este é um exemplo de comentário !-->

Você pode fazer uma coisa parecida para desativar uma parte do seu código... Às vezes uma parte do seu código não vai funcionar, ou você vai querer experimentar fazê-lo de um outro jeito, daí é só você colocar <!--> antes dele começar e repetir depois que ele tiver acabado, assim o navegador irá ignorar aquela parte do código... Por exempo:

<!--><div>Vou ser ignorado</div><div>O usuário não vai me ver</div><!-->

Bom, esses códigos de comentário servem mais para organizar o pensamento mesmo, então vamos voltar aos códigos que realmente fazem diferença...

Agora é hora de fazer o menu, veja o código da terceira parte do meu site:

<div id="menu">

<a class="atual" href="index.htm">Início</a>

<a href="http://comofazercerto.blogspot.com.br/search/label/corset">Blog</a>

<a href="loja.htm">Loja Virtual</a>

<a href="mailto:ericcorsets@hotmail.com">Contato</a>

</div>

Bom, espero que você já esteja pegando o jeito e já esteja conseguindo imaginar o que eu acabei de fazer...rsrs

Vocês notaram que agora eu coloquei um novo atributo na tag div? O atributo id serve para identificar o elemento, a diferença é que esse tipo de identificação é única, ou seja, ao contrário das classes que uma mesma classe pode ser usada em vários elementos, o id é único, se houverem dois elementos com o mesmo id, um deles não funcionará corretamente...

O id também pode ser usado como link em tags "a", para isso você coloca hashtag( # ) seguido pelo id... Isso fará com que o navegador rode a barra de rolagem, até que o elemento fique no topo da página ou que apareça para o usuário... Esse método é usado naqueles sites que tem todas páginas em uma só, e que a pessoa quando clica em uma ao invés de ir pra outro link o site só roda pra baixo... 

Mas em nosso caso a id não tem essa função, tem apenas a função de ser um identificador único mesmo...

Outra coisa que merece destaque no código que acabei de postar é o último link, vejam que ele começa com mailto: isso aponta ao navegador que o que vem depois é um email, e fará com que se abra o outlook express(ou outro programa de emails), preenchendo como destinatário o email escrito... 

O resto dos códigos você já deve entender como funciona, se ainda não entendeu, releia o post...rsrs

Bom, esse código também não vai ficar como em nosso layout se nós não estilizarmos, então vamos à estilização... Você pode colocar esses estilos dentro da mesma tag style que colocamos os botões de redes sociais...

#menu{ /* Viram como agora fiz uma referência diferente ao elemento? Quando você vai estilizar elementos por classe você coloca ponto ( . ), quando vai estilizar por id coloca hashtag ( # ) */

height:50px;

margin-bottom:6px; /* Esta parte é auto explicativa, você tá falando que embaixo do menu haverá uma margem de 6px, pra não ficar encostando no que vier depois */

}

/*

Na próxima parte você vai ver uma referência diferente, novamente...

Lembram-se sobre aquela história de tag pai, tag filho? Pois bem, a tag com id menu é pai de outras tags que são os links... O sinal de maior( > ) seguido pelo asterisco( * ), fará com que todos elementos que sejam filhos do elemento com id menu, sejam estilizados, apenas os que são diretamente filhos, caso hajam, os filhos dos filhos não serão afetados... Ao invés de usar o asterisco ( * ) você também pode usar outra referência, como tag ou classe...

*/

#menu>*{

display:inline-block;

font:bold 17px Arial; /* Personalizando fonte, bold faz com que ela fique em negrito, 17px é o tamanho e arial é o nome da fonte */

padding: 15px 10px; /* Cria uma margem interna, dentro do elemento, o primeiro valor é a margem superior e inferior e os 10px são da esquerda e direita */

color:#fff; /* Define cor da fonte com código RGB */

}

#menu .atual{

/* Ao invés de carregar a imagem de fundo usando vários códigos, você pode fazer isso em uma só linha, veja abaixo */

background: url(assets/seta_menu.png) no-repeat center top; /* Primeiro é carregado a imagem de plano de fundo, depois é configurado a não repetição do plano de fundo, por fim a imagem é posicionada, no centro da horizontal e no topo da vertical  */

}

Bom gente, ainda não terminei de fazer todo o site, mas como já tá ficando muito grande o post, vou deixar o resto pra outro post...rs

O resto do código html não vai mostrar nada que vocês não tenham visto hoje, porém, vocês ainda verão muita coisa sobre CSS, e um pouco de javascript, aguardem meus próximos posts, e não se esqueçam de treinar o que acabei de ensinar, pra assimilar bem e conseguir lembrar quando precisar! ^^

Se tiverem alguma dúvida, não deixem de enviar comentários, que tentarei ajudar vocês!

Valeu!