HTML E CSS - PARTE III
“Se você tem uma maçã, e eu tenho uma maçã e nós trocarmos as maçãs, cada um de nós terá uma maçã. Mas se eu tenho uma idéia e você tem uma idéia e nós trocarmos as idéias, cada um terá agora duas idéias.”
Olá caros amigos perseguidores do conhecimento o qual a vossa curiosidade os motiva. É bom saber que não esqueceram dos meus posts e estão de certa forma interessados em que eu continue escrevendo. Pois bem, aqui mais uma vez vou tentar contribuir com o pouco conhecimento que me foi passado pelos meus mestres.
Continuando com o nosso adiantamento de conhecimento a respeito de desenvolvimento web, vamos agora entender como funciona as estilizações, ou seja, como seria ou como funcionaria o “estilo” em uma página web. Vale ressaltar aqui que esse post é direcionado para quem nunca, mas nunca mesmo sequer digitou uma linha de alguma coisa pra formatar ou criar uma página pra internet, então, vou ter que detalhar o máximo possível de forma a não restar dúvidas. Perceba que quando me refiro ou cito a palavra “estilo” ou “estilização”, estou me referindo ao layout da página como um todo, ou seja, tamanho da fonte, tipo de fonte, cor da fonte, onde e como colocar imagens, tamanho das imagens, bordas, cor das bordas... etc.
Como vocês puderam perceber, estilização server para isso: formatar a página como um todo. Essa é a parte do designer. É comum existir uma pessoa numa empresa ou fábrica de software só pra isso, que por sinal existem poucos bons no mercado e as oportunidades são muitas. Paga-se muito, mas muito bem mesmo para o inquilino que domina e sabe manipular de forma prática as tags html para estiliza-las. Continuando, já que agora sabemos o que significa estilização e sabemos a estrutura básica de todo site na internet postado no texto anterior, já podemos entender e ver como é a estrutura de código para estilizar uma página na enternet. Vamos revisar e ver de novo a estrutura básica de todo site.
Ex:
<html>
<head>
<title>Aqui fica o título do site</title>
</head>
<body>
<p>Hello wolrd!</p>
</body>
</html>
Como segue o código acima, essa é a estrutura básico e inicial que precisamos aprender por enquanto. Todas as palavras que estão entre os sinais “<” e “>” são chamados de tags, e essas tags sempre possuem uma igual com a “/” fechando a palavra que a iniciou sem o “/”.
Para criar a sua primeira página, basta digitar o código anterior no bloco de notas ou em qualquer editor de texto e salvar com a extensão “.html”. Pelo amor de Deus, isso eu não vou ensinar aqui tá, =). Mas se quiserem me mandem um twitter pra @pr0th1mu5 que eu ensino como é na boa =).
Bem, e como é que eu coloco o estilo no site?
Usando a tag “style”. Porém você tem que especificar que a tag é do tipo texto e de estilização em cascata, ou seja, pode ter um estilo aplicado dentro de outro estilo e por aí vai. Exemplo:
<html>
<head>
<style type="text/css"></style>
<title>Aqui fica o título do site</title>
</head>
<body>
<p>Hello wolrd!</p>
</body>
</html>
Observe bem que no código acima, a tag style está sendo finalizada com outra tag style, só que com o barra antes. Não esqueça disso, pelo amor do nosso Pai celeste. Pronto, agora temos como escrever nosso código de estilização dentro da nossa página. Vale ressaltar aqui que futuramente trabalharemos com o css externo, ou seja, num arquivo que será usado para estilizar nossa página. Por enquanto usaremos a estilização na própria página.
Continuando, agora iremos conhecer como faremos no próprio código pra começar a estilizar. Ex:
<html>
<head>
<style type="text/css">
body{
width:800;
height:600;
color:blue;
margin:auto;
}
</style>
<title>Aqui fica o título do site</title>
</head>
<body>
<p>Hello wolrd!</p>
</body>
</html>
No código acima, estou dizendo ao browser que a tag “body” tem as especificações que eu estou dando a cada atributo: largura 800, altura 600, cor da letra azul e fazendo as margens (esquerda e direita) automática. Já chega... o sono me pegou... até o próximo post.
Abraço,
