:: CSS desde o início ::
Autor: Joe Gillespie
URL do original: https://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor
Nota do tradutor
Esta é a tradução para o português de um valioso tutorial composto de 15 (quinze) documentos em uma sequência lógica de apresentação e aprendizado, visando a orientar iniciantes, nas técnicas de construção e estilização de páginas Web. Iniciei as traduções no dia 06 de abril de 2005 e publico inicialmente os três primeiros documentos.
À medida em que for traduzindo os documentos irei publicando até completar os quinze. Não há um prazo fixo para terminar, mas acredito que no máximo em fins de maio o trabalho estará completo. Ao final de cada documento há um menu de navegação por suas partes componentes.
Introdução
Você não tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e é isto que eu vou fazer nesta série de tutoriais. Uma etapa de cada vez.
Quer você seja usuário de um editor WYSIWYG e conhecedor do código por ele gerado ou mesmo não tenha sequer criado uma página Web, este tutorial vai orientá-lo na direção certa.
O tutorial pressupõe um pequeno ou nenhum conhecimento de produção de uma página Web. Ele trata o assunto realmente ' do seu início'
O que vai ser preciso?
Nada especial. Se você tem acesso a um editor de página Web, ótimo. Se não, você pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se você é usuário do DreamWeaver ou GoLive, iremos usar o modo de 'código'.
Não se apavore!Um editor de imagens não será essencial, pois a princípio não irei me preocupar muito com criação de imagens.
Oh, você irá precisar de um navegador, mas isto eu não precisava dizer. De fato, eu recomendo que você tenha alguns diferentes navegadores. Se você só possui o Explorer, deveria instalar o Mozilla e alguns outros que você poderá obter consultando qualquer listagem Browsers Atuais.
Se você desejar fazer upload de suas páginas para um servidor Web, vai precisar de um programa FTP, mas não se preocupe com isto agora, pois poderá fazer tudo ensinado no tutorial, no seu próprio computador.
Etapa número 1 - Uma página básica
Antes de fazer qualquer coisa iremos precisar de uma página Web. E a seguir você tem uma página, a mais básica possível.
<html> <head> </head> <body> Esta é a minha página Web </body> </html>
Temos aqui três conjuntos de 'tags' - as tags, normalmente são aos pares, mas nem sempre é assim. Englobando toda a página temos o par de tags <html>...</html>. A primeira <html> é a 'tag de abertura' e a 'tag' de fechamento é a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html.
Dentro da tag <html> existem mais dois pares de tags.
<head>...</head> contém informações que não foram ainda colocadas no nosso exemplo, a mais importante destas informações é o título da página que aparece na barra de títulos do navegador. Você dá um título a sua página, escrevendo-o dentro da tag title, como mostrado a seguir...
<html> <head> <title>Minha Página</title> </head> <body> Este é o conteúdo da minha página Web! </body> </html>
O par de tags <body>...</body> engloba todo o conteúdo da sua página Web, texto, imagens, filmes Flash - e tudo mais. Você poderá digitar no seu editor de texto, na janela de código do seu editor WYSIWYG - ou mesmo copiar colar o código da página básica mostrado acima.
Este é meu HTMLfante. Sim concordo, ele não é tão original, mas pelo menos você não irá esquecê-lo!
Bem, agora temos uma página Web que é bem renderizada em qualquer navegador - depois que você tiver 'salvado' ela. Dê a ela o nome de 'index.html' pois este é o nome apropriado para a primeira página de qualquer Web site. Você poderá salvar o arquivo em qualquer lugar no hard disk do seu computador, mas para tornar as coisas claras e em ordem, crie um novo diretório para salvar sua página Web.
O caminho normal para abrir sua página em um navegador é usar a opção 'Abrir' ('Open') no menu 'Arquivos' ('File') mas há um modo mais rápido. Crie um 'shortcut' do seu arquivo no desktop. Dali você poderá arrastar o ícone do 'shortcut' direto para a janela do navegador e sua página será carregada e mostrada!
Sua página deverá se parecer com esta »
Ainda que seja uma maravilha, sua página Web não possui um ingrediente vital - o conteúdo. Não há sentido em uma página Web se ela não diz nada (ou outra coisa senão "Este é o conteúdo da minha página Web!") mas isto eu vou deixar por sua conta.
Qualquer conteúdo deve ser colocado entre o par de tags<body>...</body> para que o navegador possa renderizá-lo.
Encher de textos a página, assim como ela está, não dá uma estrutura e nem estiliza os textos. Por não dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita, de cima para baixo, que as palavras não tem outra ênfase particular que não seja a ordem natural em que são escritas. Faria muito mais sentido grupar palavras e sentenças em parágrafos, títulos, sub-títulos - bem, você deve saber, aquelas coisas básicas de estruturação de textos que se aprende na escola.
Browsers ignoram qualquer pulo de linha ou parágrafos que você insira em uma porção de texto. Eles ignoram também tabulações e até múltiplos espaços entre palavras que são interpretados como um espaço único.
É útil em qualquer porção de texto marcar títulos, sub-títulos, alguns parágrafos e talvez até uma assinatura final.
Em HTML, existem diferentes tags de marcação que se constituem no mecanismo apropriado para estruturar os textos.
Cria-se um parágrafo, colocando texto entre o par de tags <p>...</p>. Em HTML, um parágrafo é um bloco constituido de uma ou mais sentenças separado do próximo bloco por um espaço - tal como este paragráfo que você vê aqui.
Para títulos, existem seis níveis distintos de ênfase, indo desde o mais alto nível <h1>...</h1> até o mais baixo <h6>...</h6>. Eles são como mostrados a seguir...
Como você pode notar diminui o tamanho quando cresce o número que indica o nível sendo que o h4 equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). h5 e h6 são 'smaller' (menor) ,mas em negrito.
Existem outros truques que podemos usar para dar ênfase a palavras ou frases. Antes de considerar como eles devem ser apresentados (como deve se parecer), considere acima de tudo sua função.
Bold (negrito) é uma variante mais destacada que o texto normal e marcada com o par de tags <b>...</b> contudo, trata-se de um estilo de apresentação para impressão e na Web é preferível usar-se strong <strong>...</strong>. Embora elas (tags bold e strong) se pareçam iguais quando renderizadas na tela de um monitor, o HTML deverá servir a outros dispositivos também. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para visão, entenderão perfeitamente <strong> e lerão com a devida ênfase.
Você deve saber que itálico é conseguido com a tag <i>...</i>. E aqui também, é melhor você não se utilizar de estilização visual, mas usar <em>...</em>. Este par de tags dá a funcionalidade do itálico ao texto independentemente do dispositivo em uso.
Sublinhado pode ser conseguido com o par de tags <u>...</u> , mas sublinhados na Web tem um significado especial. Usualmente indica um link. É melhor não usar sublinhado para enfatizar, pois esta prática poderá confundir o visitante do site.
Uma importante tag é a de quebra de linha <br>. Ao contrário de outras tags, esta não requer uma tag de fechamento, aliás tag de fechamento neste caso não faria qualquer sentido, não é mesmo?
Usando estas tags básicas de marcação, o texto começa a tomar forma. Ele se assemelhará a um texto produzido em um processador de texto.
Esta página básica provavelmente se parecerá um pouco diferente quando visualizada em diferentes navegadores e computadores. Cada navegador tem o seu próprio estilo padrão e a menos que você configure seu navegador ele usará os estilos padrão. Para sobrescrever os estilos padrão dos navegadores, nós criaremos nossos próprios estilos que serão agrupados em uma 'folha de estilos'.
Navegação pelo tutorial
- » Introdução - página básica
- » Folha de estilos
- » Estilizando texto
- » Mais texto
- » As listas
- » Os links
- » Boxes CSS
- » DIV's
- » Juntando tudo
- » DOCTYPE
- » Estilos externos
- » Estilizando tabelas
- » Estilizando formulários
- » Browsers
- » O futuro
Criado em: 2005-04-06
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
