Atividade 5 Objetivos: Conhecer as regras CSS “width”, “margin-left:auto” e “margin-left:right” e verificar que elas não funcionam no IE a menos que coloquemos uma tag <!DOCTYPE...> no alto da página (mesmo que não saibamos direito o que ela significa). Atividade 6 Objetivo: Brincar um pouco com as cores, antes de compreender totalmente os aspectos técnicos envolvidos. O exemplo vai consistir em mudar a propriedade “color” de <h1> e “background-color” de <body> Atividade 7 Objetivo: Montar uma barra de navegação horizontal. Conhecer as tags <ul> e <li>
Atividade 5 Partiremos do arquivo teste02.html, usado na atividade 4. Salve-o como teste03.html. A regra CSS que utilizamos era: body { font-size: 18px; } Que define que o tamanho da fonte é 18px. Vamos acrescentar uma regra a mais: font-size 18px; width: 800px; “width” em inglês significa “largura”. Estamos definindo uma largura de 800px para o corpo de nossa página web.
Teste no Internet Explorer – não vai funcionar. Teste em qualquer outro navegador – funciona. Isso é normal em desenvolvimento web. Cada empresa lança seu navegador com características próprias. Para que a propriedade width funcione no IE, adicione a seguinte tag no alto da página: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Pode copiar e colar, não é necessário digitar tudo isso. Também falaremos sobre o significado desta tag no futuro; por enquanto, basta saber que é uma tag que informa ao navegador qual versão de HTML estamos usando. Agora que nosso <body> tem uma largura, podemos centralizá-lo na tela. Acrescente mais duas linhas de CSS: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; }
margin-left signifca “margem esquerda” e margin-right significa “margem direita. “auto” siginifica “automático” Estamos dizendo ao navegador que: 1) deixe nosso <body> com uma largura de 800px 2) crie margens à esquerda e à direita de um tamanho automaticamente ajustado ao tamanho da tela. Quer entender melhor? Deixe apenas “margin-left: auto” (apague a linha “margin-right”. O navegador vai criar uma margem à esquerda de um tamanho automaticamente ajustado, de modo a jogar o <body> para a direita. Deixando apenas “margin-right:auto”, o navegador vai... ah, você já pegou a idéia.
Atividade 6 Vamos trocar a cor de fundo do <body>. Insira mais uma linha de código, de modo que nosso CSS para o body fique assim: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; background-color:darkgray; } A página (o body, o corpo da página), deve ficar cinza escuro (darkgray). Agora vamos mudar a cor de texto do título: insira uma linha a mais no CSS do <h1> para que ele fique assim: h1 { font-size:700%; text-align:center; color:white;
Se tudo deu certo até aqui, sua página deve estar com esta aparência:
Dê uma olhada nas páginas da w3schools.com: - CSS colors - CSS colors names Lá você vai encontrar listas enormes de opções de cores. Algumas representadas por números (antecedidos por “#” como #001122) e outras representadas por nomes como “black” ou “red”. Experimente trocar “darkgray” e “white” por alguns nomes ou números destas listas. Por exemplo: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; background-color:blue; } h1 { font-size:700%; text-align:center; color:#CC3300; Mais adiante falaremos mais sobre os aspectos técnicos deste tipo de código.
Atividade 7 Vamos incluir uma pequena barra de navegação no alto da página. Insira dentro da tag <body> o seguinte código: <ul> <li>Pagina inicial</li> <li>Sobre mim</li> <li>Contato</li> Verifique na apostila o significado destas tags. Elas representam uma lista. Uma lista não-ordenada. “ul” significa “unordered list”. Cada uma das tags <li> são um “list item”, um item da lista. Experimente trocar “ul” por “ol” como no exemplo abaixo: <ol> “ol” significa “ordered list”. O navegador vai colocar números na frente de cada uma das <li>.
Em nossa barra de navegação vamos usar uma lista não ordenada Em nossa barra de navegação vamos usar uma lista não ordenada. Em vez de números, o navegador coloca bolinhas na frente das <li>. Sua página deve ter ficado assim:
Agora o truque vai ser aplicar CSS para que esta lista fique com a aparência de uma barra de navegação. Vamos começar tirando as bolinhas da frente das <li>. Insira o seguinte código CSS em seu arquivo (não se esqueça que todos os códigos CSS têm de estar dentro da tag <style>). ul{ list-style:none; } Estamos dizendo que, para nossa ul, não queremos nenhum estilo (none). Agora vamos centralizar a lista na tela. Acrescente mais esta linha: text-align:center;
Sua página deve ter ficado assim:
O próximo passo é fazer as <li> ficarem uma ao lado da outra, em vez de uma em cima da outra. Vamos portanto inserir um código CSS para as li: li { display: inline; } Estamos dizendo ao navegador que exiba as <li> enfileiradas, em linha (inline). O resultado deve ser:
Finalmente vamos dar um espaço entre as <li>, usando um código CSS que já utilizamos no <body>, o margin-right. Insira mais esta linha: li { display: inline; margin-right: 50px; } E o resultado será:
Pausa!! Nosso curso está bastante focado em “faça isso, agora faça aquilo”. É porque está no começo. O melhor a fazer neste ponto é reler o primeiro slide - onde estão os objetivos de cada atividade - e avaliar o quanto você atingiu estes objetivos. Com o avançar das aulas vamos esclarecendo e detalhando mais os conceitos. Também vamos nos preparar para ferramentas mais avançadas do que o simples bloco de notas.