Layout #1

Agora que já sabemos como escrever um XHTML e temos uma referência de CSS, vamos fazer o nosso primeiro layout.

Primeiro temos que analisar o que queremos, ou que teremos de, exibir na página. Se vai ter um menu horizontal ou vertical, se vai ter rodapé, quantas colunas, etc.

Depois de feito isso é hora de estruturar o “esqueleto” da página no XHTML. Nesse primeiro exemplo vamos ver uma página com duas coluna, topo e rodapé. No qual a coluna do lado esquerdo vai conter o menu e do lado direito o conteúdo da página.

XHTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
    <head>
        <title> Título </title>
        <meta name="Generator" content="" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <meta name="language" content="pt-br" />
        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- Style -->
        <link rel="stylesheet" href="style.css" type="text/css"/>_
    </head>
    <body>
        <div id="geral">
            <div id="topo">
                <h2>Título da Página</h2>
            </div>
            <div id="meio">
                <div id="esquerda">
                    <ul>
                        <li><a href="#" alt="Página Inicial">Home</a></li>
                        <li><a href="#" alt="Quem Sou">Sobre</a></li>
                        <li><a href="#" alt="Contato">Contato</a></li>
                    </ul>
                </div>
                <div id="direita">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nulla. Mauris sollicitudin ante sed orci. Vivamus vitae sapien id felis lobortis aliquam. Suspendisse potenti. Integer pellentesque. Nulla vehicula, nisl a lacinia egestas, justo dolor semper justo, sed faucibus nibh orci eu magna. Curabitur vel nisi vulputate est vehicula rhoncus. Curabitur est ligula, vehicula ornare, suscipit vitae, ornare varius, justo. Suspendisse lacus. Sed pulvinar vehicula lectus. Curabitur quis augue. Nullam gravida tortor at felis. Aliquam neque massa, scelerisque at, auctor lobortis, placerat ut, erat. Fusce adipiscing. Phasellus imperdiet blandit quam. Maecenas posuere.</p>
                </div>
            </div>
            <div id="rodape">
                <h3>Minha Página - 2006</h3>
            </div>
        </div>
    </body>
</html>

Foram colocadas seis camadas, DIVs, uma chamada geral que engloba todo o site para ter um maior controle, a topo - aonde vem a imagem de topo e título da página -, a meio que dentro tem duas, esquerda - menu - e direita - conteúdo - e rodapé - aonde tem os créditos -.

No topo foi colocado o título da página dentro da tag hn, realmente utilizada para isso.

Para fazer o menu foi usada uma lista indefinida (ul - undefined list) com apenas três links.

Na parte de conteúdo foi colocado o famoso “Lorem Lipsum” para não ter que colocar aqueles “bla bla bla” ou “non non non”.

E por fim um crédito no rodapé dentro de ourta tag hn.

CSS:

Agora é a vez do estilo. Como no XHTML o link do CSS está apontando para um arquivo chamado style.css, salve-o com esse nome. Caso deseje colocar outro, mude na página o destino.

#geral {
  width: 726px;
}

#topo {
  width: 720px;
  height: 100px;
  border: 3px solid #999999;
  background: #FFFFFF;
}

#meio {
  width: 720px;
  border: 3px solid #999999;
  background: #FFFFFF;
}

#esquerda, #direita {
  padding: 15px;
}

#esquerda {
  width: 150px;
  float: left;
}

#direita {
  width: 490px;
  float: right;
}

#rodape {
  width: 720px;
  height: 50px;
  border: 3px solid #999999;
  background: #FFFFFF;
  clear: both;
}

Neste caso a página vai ter 720 pixeis de largura e as camadas uma borda de 3 pixeis, totalizando 726px (720+3+3) de largura para a camada geral. Então as camadas topo, meio e rodape terão 720px de largura.

O topo com altura de 100px e o rodapé com 50px. Para as camadas esquerda e direita terem um espaçamento entre o topo e o rodapé, tem um padding de 15px.

Para colocar as duas camadas, esquerda e direita, uma do lado da outro, atribui-se a propriedade float, com valor left para esquerda e right para direita. Fazendo com que ambas flutuem para o lado desejado. No rodapé foi colocado o clear como both para ele ficar abaixo do meio, devido que as camadas esquerda e direita estão flutuando.

Alguns exemplos aqui.

mais sobre:

Maujor.com - Layout CSS sem tabelas

Maujor.com - Layout CSS 3 colunas

Little Boxes - Examples

CSS Reference #1

Primeira referência de CSS vai ser sobre:

Background & Border

Background

background-color: define a cor de fundo (ex: hexa/rgb/nome/transparent);

background-image: imagem do fundo (ex: url(img/fundo.gif) );

background-repeat: se a imagem de fundo repete ou não. (ex: repeat/repeat-x/repeat-y/no-repeat);

background-attachment: define se a imagem de fundo fica fixa ou rola junto com a página (ex: fixed/scroll);

background-position: aonde começa a imagem de fundo, por padrão top e left. (ex: top/center/bottom/x-pos/x-% left/center/right/y-pos/y-%);

background: forma resumida de utilizar tudo, mas não é necessário declarar tudo. Qual não for declarado assumirá o valor padrão. (ex: #FF00FF url(fundo.gif) no-repeat);

Border

border-width: largura da borda. (ex: thin/medium/thick/valor);

border-style: estilo da borda. (ex: solid/dotted/dashed/groove/ridge/inset/outset);

border-color: a cor da borda (ex: hexa/rgb/nome/none);

border: forma resumida (ex: 1px solid black);

border-top: definido do mesmo modo que o border porém só para cima.

border-right: borda da direita (ex: 2px dotted yellow);

border-bottom: borda de baixo;

border-left: borda da esquerda;

Por enquanto é só isso, adiante veremos mais.

mais sobre:

W3Schools.com - CSS Reference

Cultured Code - CSS Reference

Escrevendo O Primeiro XHTML

Mãos à obra, vamos agora escrever nosso primeiro código XHTML. Abaixo o código já pronto e comentado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
    <head>
        <title> Título </title>
        <meta name="Generator" content="" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <meta name="language" content="pt-br" />
        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico" />
        <!-- Style -->
        <link rel="stylesheet" href="style.css" type="text/css"/></em>
    </head>
    <body>
    </body>
</html>

Antes de iniciar a tag html é declarado o tipo da página, o Doctype, se você não sabe o que é: leia aqui e/ou aqui.

Nesse caso foi definido como Strict, caso você ainda não esteje preparado pode utilizar como Transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Você deve estar se perguntando: Por que aquele “xmlns” dentro da tag html ?

É chamado de namespace e serve para mostrar para o browser quais elementos pertencem a qual linguagem no documento. Dúvida? Mais? Mais!

As tags meta servem para colocar informações adicionais, tais como, autor, idioma, palavras-chave e etc. - essas tags são utilizadas por mecanismos de buscas, como o Google por exemplo, para localizar os sites. Um site bem estruturado e definido tem chance maior de aparecer primeiro na busca.

Logo abaixo aparece a tag link referenciando um arquivo externo, ícone. Chamado Favicon - ícone do favoritos - que é nada mais nada menos do que aquele íconezinho que fica aparecendo no browser ao lado do endereço do seu site e nos favoritos também é claro. Caso ainda tenha dúvida veja aqui.

Depois como já vimos aparece novamente a tag link para “puxar” o arquivo de estilo da página - CSS.

Fecha-se a tag head, abre e fecha a body e fecha a html, e pronto. O seu XHTML já está pronto.

Na próxima veremos o um layout já pronto com o CSS.

Extensões Firefox

Aqui vão algumas dicas de extensões para deixar seu Firefox muito mais robusto e personalizado.

Extensão e uma breve descrição.

FireFTP - que tal conectar ao ftp pelo Firefox. Rápido e seguro.

IE View Lite - para você poder visualizar como está ficando seu código no Internet Explorer sem sair do Firefox.

IE Tab - também para visualizar pelo Firefox como está ficando no Internet Explorer (acho melhor).

JSView - embora os browsers têm a opção para ver o código-fonte, eles não abrem os arquivos externos, o que acontece essa extensão permite.

Image zoom - dê um close nas imagens.

ImageBot - faça upload de suas imagens para um host grátis de forma bem rápida.

View Source Chart - veja o código da página de forma bem ilustrativa e legível.

MR Tech Disable XPI Install Delay - retire aquele delay, tempo de espera, na instalação das Extensões.

HTML Validator - após abrir a página já demonstra os erros e os alertas da página (muito bom).

Online W3C HTML Validator - verifique se seu código está validado pela W3C.

Extension Manager Extended - gerencie melhor suas extensões com essa extensão.

Web Developer - menu com algumas ferramentas para o desenvolvedores Web.

MeasureIt - uma régua para medir as imagens, ou qualquer coisa na página, excelente para definir os tamanhos e margens.

ColorZilla - quer saber o número da cor daquela imagem? Use esse colorpicker.

CSS Validator - verifique se seu CSS está validado pela W3C.

Dummy Lipsum - gerador do famoso Lorem Lipsum.

LoremIpsum Content Generator - gerador do Lorem Lipsum também, só que sem a opção de mostrar tag (

) igual ao Dummy Lipsum.

Stylish - fácil gerenciador de estilos (CSS).

CSS Viewer - com essa extensão você pode visualizar o estilo aplicado só aonde desejar (muito bom).

EditCSS - modifique seu CSS na Sidebar.

Server Spy - espie qual servidor e a sua versão, no qual o site está rodando.

Tab Mix Plus - permite adicionar abas de por exemplo: download em execução ou extensões.

Fast Fox - melhore a perfomance e velocidade do navegador.

VideoDownloader - baixe os videos dos sites como: YouTube e Google.

DownThemAll! - gerenciador de download.

Foxmarks - agora nunca mais você vai perder seus favoritos, armazena-os online.

Google Pagerank - veja o rank da página que está acessando, definido pelo Google Pagerank.

Translation Panel - tradutor em vários idiomas.

GeoURL - veja as coordenadas do site. Mostrando no mapa sua localização.

ChatSum - converse com os demais visitandes da mesma página que você.

Pong! Multiplayer - esse é para descontrair, clássico joguinho pong.

mais:

Para mais Extensões só acessar o site da Mozilla/Firefox na parte de addons.

Editores HTML - Qual Usar?

Uma coisa muito discutida por quem trabalha com Web é qual editor usar. Mas antes de ficar testando editor por editor a procura de um que mais lhe agrade é bom procurar saber mesmo o que você espera que um bom editor tenha.

O primeiro editor de HTML que usei foi o Dreamweaver na época em sua versão 4, de lá pra cá muita coisa mudou nele e hoje em dia com certeza é um dos editores mais completos, senão o mais completo. Porém não é freeware. Mas depois que passei a escrever todo o HTML “na mão”, comecei a ver que muitas de suas ferramentas eram dispensáveis e que ele era muito pesado só para eu ficar digitando, além de ter os códigos gerados automaticamente muito “sujo”. Procurei então por um editor mais leve. Usei durante um tempo o próprio bloco de notas do windows, mas quando o código começa a ficar muito grande aquele monte de letra da mesma cor passava a ser desagradável.

Quando encontrei o EditPlus realmente era o que eu queria, simples, leve e só com as ferramentas que eu espera que um editor tivesse - como por exemplo paleta de cor e FTP - além de pintar todo o código facilitando a legibilidade. Foi amor a primeira vista e até hoje utilizo ele tanto para construir um documento XHTML quanto para CSS. Mas esse também é shareware.

Esses dias quis procurar por novidades na internet, ver se talvez pudesse ter um editor que me agradace mais, sem fugir da mesma simplicidade do EditPlus, e melhor, um editor freeware.

Encontrei dois editores que me agradaram muito:

Primeiro o PSPad com interface muito parecida com a do EditPlus só que mais robusto. Possui uma paleta de cor mais abrangente com mais opções na hora de escolher a cor, outra coisa que me agradou muito também foi o indentador automático - apesar do custume de utilizar a tecla tab para alinhar - e vem também com uma opção autocompletar, teclando CTRL+J abre uma caixa com as opções para você escolher, ideal para pessoas como eu que do nada esquecem os nomes de alguns atributos -, isso além de fechar automáticamente as chaves, parênteses e aspas (ainda vou ter que me acostumar com isso).

O segundo foi o Araneae 5 excelente editor para aqueles que não abrem mão do velho bloco de notas. Tão leve quanto, mas com funcionalidade de colorir o código, paleta de cor e tem no canto direito uma aba com algumas tag e atributos, bastando só clicar para adicionar ao documento. Tem uma interface parecida com os programas da Macromedia, versão MX.

mais sobre:

Revolucao.etc.br - Web Standards e as Ferramentas de desenvolvimento

[ editado ]

O EditPlus também tem a opção de fechar as tags automaticamente, só que vem desabilitada.

[ /editado ]

CSS - O Que é?

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

_Pra que servem? _

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag

tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
    font: 12px Verdana;
    color: blue;
}

E assim todas as tag

terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag

, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
    font: 12px Verdana;
    color: blue;
}

repare que para definir uma classe é necessário começar com um ponto.

e na tag:

<p class="minhaclasse"> Meu parágrafo aqui </p>

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#”.

Ex.:

body {
    background: black;
}

_**.minhaclasse** {
    color: #FF0000;
}

#meuDiv {
    width: 100px;
    height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez - por uma

por exempo - pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag

Rogério Lino

Web development and tips