Tutorial CSS parte de 1 ate 4

Este breve tutorial destina-se àqueles que ainda não escreveram sua primeira folha de estilos e desejam começar a projetar com CSS.

Aqui você não encontrará explicações avançadas sobre CSS. Este tutoriaI explica como criar um arquivo HTML, um arquivo CSS e como integrá-los de maneira a que funcionem juntos. Após estas noções básicas você poderá ler outros tutoriais e então incrementar os arquivos HTML e CSS aqui criados. Ou ainda, poderá passar a usar um editor adequado para HTML ou CSS, que vai auxiliá-lo a construir sites mais complexos.

Abaixo uma visão da página web que construiremos ao longo deste tutorial:

COMO FICARA A PAGINA NO FINAL

Reconheço que não se trata de uma bela página. ☺
Adotei como convenção ao longo do tutorial um sinal de "perigo" como este ao lado esquerdo e uma fonte menor, para indicar um texto opcional contendo uma explicação extra sobre os códigos HTML e CSS do exemplo. O sinal de "perigo" indica um texto contendo técnicas mais avançadas.

Passo 1: Escrevendo o HTML

Para acompanhar os passos deste tutorial sugiro que você use a mais simples das ferramentas disponíveis isto é, o Notepad (Windows), TextEdit ( Mac) ou KEdit (KDE) pois servirão perfeitamente aos nossos propósitos. Depois que você tiver dominado os fundamentos básicos, talvez queira utilizar ferramentas mais avançadas ou mesmo programas comerciais tais como, Style Master, Dreamweaver ou GoLive. Mas, para seus primeiros passos com CSS não será interessante utilizar-se de ferramentas com recursos mais sofisticados e avançados sobre os quais você não tenha total conhecimento e domínio.
Não use processadores de textos tais como Microsoft Word ou OpenOffice. Eles geram arquivos que os web browsers não conseguem interpretar. Para códigos HTML e CSS, precisamos de arquivos de texto simples.
O passo 1 consiste em abrir seu editor de texto (Notepad, TextEdit, KEdit, ou outro de sua preferência), e digitar o código mostrado abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Minha primeira página CSS</title>
</head>

<body>

<!-- Menu de navegacao do site -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="pensamentos.html">Pensamentos</a>
  <li><a href="cidade.html">Minha cidade</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Conteudo -->
<h1>Minha primeira página CSS</h1>

<p>Bem vindos à minha página estilizada!

<p>Minha página não contém imagens, mas pelo
menos está estilizada.
Ela contém links, ainda que eles não levem
a lugar algum…

<p>Deveria haver mais textos aqui porém eu
ainda não decidi o que escrever.

<!-- Date e assine sua página, isto é educado! -->
<address>Construida em 15 de dezembro de 2004<br>
  por mim mesmo.</address>

</body>
</html>

Passo 2: Adicionando cores

Você muito provavelmente viu algum texto na cor preta sobre um fundo branco, mas isto vai depender de como seu browser está configurado. Uma maneira bem fácil de acresentar estilização à página é adicionar algumas cores a ela. (Mantenha seu browser aberto, vamos usá-lo novamente mais adiante.)

Comecemos com uma folha de estilos incorporada ao arquivo HTML. Mais a frente, separaremos os arquivos HTML e CSS. Separar os arquivos é uma boa técnica, pois isto permite usar a mesma folha de estilos para vários arquivos HTML: você precisará escrever uma só folha de estilos. Por ora vamos colocar nossa CSS no mesmo arquivo HTML.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Minha primeira página CSS</title>
  <style type="text/css">
  body {   
 color: purple;    background-color: #d8da3d } 
 </style>
</head>
<body>
[etc.]
 
Passo 3: Adicionando fontes 
 
 Outra coisa bem fácil de se estilizar são as fontes para os elementos da página. 
Vamos escolher fonte “Georgia” para os textos, exceto para o cabeçalho h1 ao qual 
atribuiremos a fonte “Helvetica.”
Você nunca terá como saber quais são as fontes que os visitantes do seu site têm 
instaladas em suas máquinas, por isso é de boa técnica sempre especificarmos 
fontes alternativas nas folhas de estilos: se a fonte Georgia não estiver disponível
 as fontes Times New Roman ou Times irá substituí-la sem grandes prejuízos e ainda
 mais, se ambas também estiverem indisponíveis o browser do visitante usará uma 
fonte (with serif) com serifas. Se a fonte Helvetica não estiver instalada, as 
fontes Geneva, Arial e SunSans-Regular são similares e se nenhuma delas estiver 
disponível o browser usará uma fonte sem serifas.
No seu editor de textos acresente mais estas linhas: 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Minha primeira página CSS</title>
  <style type="text/css">
  body {    
 font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>
<body>
[etc.]
 
Salve o arquivo, abra novamente o browser e dê um "Reload" (Atualizar) na página 
para visualizar as fontes diferentes para o cabeçalho h1 e o restante do texto.
 
Passo 4: Adicionando o menu de navegaÇÃo 
 
A lista no topo da página destina-se a se constituir no menu de navegação. Web sites em geral tem 
uma barra de navegação disposta horizontalmente no topo ou um menu na lateral da página e
 nossa página também terá seu menu de navegação. Usaremos um menu na lateral esquerda, por
 considerarmos mais interessante que uma barra no topo...
Nosso menu já esta no código HTML da página. Ele é a lista 
 no topo. Os links ali inseridos
 não levam a lugar algum pois nosso “Web site” tem uma só página, mas isto não é importante
 agora. Em um Web site real, é óbvio, não devemos ter nenhum link "quebrado".
Agora precisamos mover a lista para a esquerda e o restante do texto para a direita com a finalidade
 de abrir espaço para a lista. As propriedades CSS que usaremos para isto são 'padding-left'
 (para mover o texto para a direita) e 'position', 'left' e 'top' (para posicionar o menu).
Existem outras maneiras de se fazer isto. Se você der uma olhada em “column” ou “layout” na página
 Aprendendo CSS , vai encontrar vários templates para layout. Mas para o nosso exemplo as
 propriedades citadas acima são adequadas.
No editor de texto adicione mais estas linhas no arquivo HTML:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Minha primeira página CSS</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>
<body>
[etc.]

sfarinas

quarta-feira, 19 de novembro de 2008

Tutorial CSS parte de 1 ate 4

Nenhum comentário:

Postar um comentário

Cadastrados

Conteudo Blog

Parceiros