Removendo as margens da página

Postado por: Pedro Rogério em

Muitas pessoas, quando estão iniciando em desenvolvimento para a Web, encontram algumas dificuldades para problemas simples, e um deles é como remover a margem de nossa página, ou seja, queremos que nosso documento fique sem aquelas margens indesejadas em nossos documentos. Para vocês entenderem melhor, veja uma screenshot do problema abaixo:

Screenshot da página com margem

Como você pode notar existe uma área em branco entre a área do documento e a janela do browser, mas nós não queremos que nosso documento fique assim. A solução é a seguinte, em nosso CSS, devemos definir para o body que a margem seja 0:


<style  type="text/css">
body {
   margin:0;
}
</style>

Agora veja como ficaria o documento:

Screenshot da página sem margem

Viram como é fácil, isso diz ao browser que não deve haver nenhum espaço entre elementos estruturais e a janela do browser.

Uso correto de Alt e Title

Postado por: Pedro Rogério em

Muita gente acredtita que usando a tag alt para imagens ela assume o papel de Tooltip. Esse método foi adotado a anos atrás, tudo começou com o Netscape, usando alt para indicar um tooltip, e o Internet Explorer foi lá e seguiu a mesma linha.

A tag alt serve para, por exemplo, se a imagem por algum motivo não for carregada, mostrar uma descrição prévia da imagem, seu uso também é recomendando para browsers que não suportam imagens. Agora o uso de title é para quando o usuário repousar o mouse sobre a imagem, ou o link, aparacer uma descrição definida pelo usuário sobre o mesmo.

A maneira errada de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Maneira errada" />

Maneira correta de indicar um tooltip:


<img src="http://sua_imagem.gif" alt="Texto alternativo caso a imagem não seja carregada" title="Essa é a maneira correta de indicar um tooltip em uma imagem" />

Pintou dúvidas: Listas de discussão

Postado por: Pedro Rogério em

Você precisa entregar aquele trabalho para o cliente urgente, o prazo está estourando, e o cliente é muito chato, e você, de forma alguma encontra uma solução para o seu problema, seja nos buscadores, ou seus rascunhos, eu aconselho você a participar de listas de discussão, a melhor forma de adquirir conhecimento. Eu particularmente aprendi muita coisa com elas, vou deixar aqui algumas listas que particularmente considero ótimas:

WebStandards-br
Grupo de discussão em português sobre os recomendações do W3C para a construção de websites: metodologia ‘tableless’, validação de código, XHTML, CSS, XML, XSLT, navegadores e dispositivos, semântica, acessibilidade, SEO, portabilidade.
ArqHP
Lista de discussão em torno de produção de home pages, abordando HTML, XHTML, XML, tableless, CSS, semântica, validação de documentos, separação de informação da formatação, DOM e demais tecnologias recomendadas pelo W3C.
CSS-D
Lista internacional de discussão sobre CSS

Trocando a roupa

Postado por: Pedro Rogério em

Aqueles que trabalham com XHTML e CSS sabem as possibilidades que essas tecnologias lhe proporcionam, e uma delas é você fazer alterações no layout de sua página sem nem sequer tocar no código HTML, uma prova viva disso é o meu outro site: http://www.pinceladasdaweb.com.br/, acabei de mudar o layout, se lembram do antigo? Não, então dêem uma olhada na seção portifólio que ele está lá, e sintam a diferença.

Doctype pra que te quero

Postado por: Pedro Rogério em

Você acabou de construir o seu site inteirinho no bloco de notas, o código está todo uma beleza, lindo de se ver, as tags estão todas aninhadas corretamente, mas você vai fazer um teste no seu browser e a página não fica como você queria, e agora? Meu deus, não precisa sair arrancando os cabelos ou enviando e-mails desesperadamente para aquele seu amigo me manja bastante de HTML, você pode ter simplesmente esquecido de colocar um DOCTYPE válido na sua página.

Mas a troco de que eu vou usar isso na minha página?

De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versã do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página. Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.

Continuar lendo »

XHTML: Primeiros passos

Postado por: Pedro Rogério em

O XHTML, ou seja, Extensible HyperText Markup Language, é a evolução do HTML, e foi criado dentro do conceito do XML, linguagem de marcação onde você cria suas tags e atributos para criar um documento Web, e nada mais é do que eu um HTML mais claro e limpo. Veja abaixo algumas diferenças entre o HTML e o XHTML:

  • Todas as tags e atributos devem ser escritas em letras minúsculas
  • Todas as tags devem ser aninhadas corretamente
  • Todas as tags devem ser fechadas, por exemplo o <br> e o <hr>, agora elas ficam assim: <br /> e <hr />
  • Todos os atributos devem ter aspas
  • Agora ao invés de “name” você deve usar “id”
  • Ao invés de usar, por exemplo: “input checked”, deve-se usar, “input checked=”checked”

Quais são as vantagens?

  • Compatibilidade com futuras aplicações
  • Código consistente
  • Tempo de carregamente da página extremamente menor
  • Compatível com todos os navegadores

Blogueiros brasileiros querem publicar livro

Postado por: Pedro Rogério em

Pra quem não sabe, o Henrique do Revolução e o Diego do Tableless estão com um projeto de publicar um livro sobre Webstandards, eu particularmente achei muito boa a iniciativa deles, por que falta conteúdo em Português para quem quer começar a aprender sobre o assunto e não sabe nada de inglês. Caso alguma editora ou alguma entidade queira estar patrocinando esse projeto eu peço que entre em contato com eles por favor.

Páginas:«1234567