Tutorial Intermediário de HTML: Exercícios

22 04 2008

Logo do +web em tom verde escuro

Antes de irmos pro próximo assunto, vamos praticar um pouco o que vimos por aqui.

Primeiro, dê uma incrementada no projeto que você começou lá atrás. Use as tags novas que você aprendeu, retire as tags más. Atualiza o seu servidor e envie o resultado pra meu email.

O segundo exercício é esse:

Exercício

Como você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra apresentação.

No código abaixo temos conteúdo e apresentação misturados no HTML – muito feio. Sua missão é limpar esse código. Substituir tudo que for relativo a apresentação por CSS, acrescentar o que estiver faltando, usar a tag certa pra cada elemento – p para parágrafos, h# para cabeçalhos, etc.

<html>
  <head>
    <title>Minha Página Misturada</title>
  </head>

  <body bgcolor="#00FFFF">
  <p align="center"><b><font size="6" face="Verdana">Um Cabeçalho</font></b></p>
  <p align="center"></p>
  <hr>
  <p><font face="Verdana" size="2">Esse texto que você está lendo foi retiradao de um <b> curso</b> de html.
  Desse mesmo jeito. <b> Só estou mudando os textos</b>, pro autor não ficar com raiva de mim</b>.</font></p>
  <p><font face="Verdana" size="2">E eu vou continuar escrevendo <b>qualquer coisa</b>, <b>qualquer coisa mesmo</b>,
  <b>sem ter nada pra falar</b>, <b>enrolando</b>, mais um pouco.</font></p>
  <p><font face="Verdana" size="2">E não ligue se isso não fizer sentido</font></p>
  <p align="center"><font face="Verdana" size="2">
  <img border="0" src="imagem.jpg" width="400" height="300"></font></p>
  <p><font face="Verdana" size="2"><b>Correio Electrónico:</b><a href="mailto:htmlvelhinho@algumauniversidade.pt">htmlvelhinho@algumauniversidade.pt</a></font></p>
  <p> </p><p><a href="um-link.html"><font face="Verdana" size="1">código HTML desta página</font></a></p>
  <p><a href="diario.html"><font face="Verdana" size="1">Um texto bem pequeninho.</font></a></p>
  </body>
</html>

O que é importante aqui: Compare o tamanho do arquivo antes de depois de ser limpado e você vai perceber que o arquivo limpo é bem menor. Um arquivo menor significa uma página que carrega mais rápido e que ocupa menos espaço.

Quem não quer uma página carregando mais rápido?

Quando estiver pronto, sigara para a próxima parte: CSS Intermediário.

Páginas Relacionadas

Anúncios




Tutorial Intermediário de HTML: Tags Más

13 03 2008

Código

Essa página analisa algumas tags HTML dos mundos de contos de fada e tempos pré-históricos. Más, fedorentas, ou simples coisinhas feias que pertenceram a padrões HTML ultrapassados, tolices proprietárias aleatórias que só quase-funcionam numa sub-versão de algum navegador ou tags que simplesmente foram suplantadas por tags mais novas.

A abordagem do HTML Dog de ensinar HTML e CSS baseado nos padrões web sem fazer barulho nenhum sobre os próprios padrões é uma boa mas, ao fazer isso, usuários (principalmente iniciantes) podem encontrar abordagens diferentes e más-práticas em outros lugares e não saber o que há de errado com elas. Pensando nisso foi criado esse guia sobre o que Não usar.

HTML tentou se mover da apresentação para o significado, conduzindo uma filosofia de separar o conteúdo e significado (HTML) da apresentação (CSS). Essa abordagem geral torna as páginas muito mais enxutas, porque um único conjunto de instruções relativas à apresentação (em um arquivo CSS externo) pode ser aplicado a muitas páginas. Isso também faz com que a manutenção do site se torne muito mais fácil, já que mudanças globais podem ser feitas a partir de uma única origem.

Algumas das “tags más” são apenas tags relativas à apresentação (como small) que devem ser substituídas por alguma coisa com significado ou simplesmente CSS. Outras podem ser não apenas relativas à apresentação, mas desnecessariamente volumosas (como a tag font) ou horrivelmente prejudiciais à usabilidade (como o blink).

Tags

Essas são algumas das tags mais comuns por aí que têm alternativas melhores:

  • b pode ser usado pra deixar um elemento em negrito. Usar strong (que quer dizer ênfase forte) em seu lugar adiciona significado. Para adicionar apenas negrito, sem significado especial, a regra CSS font-weight: bold faz o serviço.
  • i pode ser usado para deixar um elemento em itálico. Usar em (significa ênfase) em seu lugar adiciona também significado. font-style: italic também pode ser usado pra ajustar apenas a apresentação.
  • big pode ser usado pra criar um texto grande. Usar, ao invés disso, cabeçalhos (h1, h2, etc., quando o texto for um cabeçalho genuíno) adiciona significado, ou simplesmente usar a propriedade font-size no CSS te dá mais controle sobre a apresentação.
  • small pode ser usado pra criar texto pequeno. CSS (font-size) mais uma vez te dá mais controle.
  • hr pode ser usado pra mostrar uma linha na horizontal. De qualquer forma, é raro usar hr numa página feita com CSS; propriedades como border-top e border-bottom ou até mesmo simples imagens fazem o trabalho bem melhor.

Todas as tags mencionadas acima são compatíveis com os últimos padrões HTML, mas elas não aplicam nenhum significado ao conteúdo, coisa que todas as “tags boas” devem fazer. Elas poderiam ser mais úteis, mas elas não são muito prejudiciais, e facilmente poderiam ser confundidas com pequenas criancinhas inocentes e cheias de bondade perto dessas tags imundas abaixo:

  • u pode ser usado pra sublinhar elementos. Só que a maioria das pessoas associa texto sublinhado com links (se tá sublinhado, é pra clicar). Por isso essa tag morreu muito tempo atrás – você realmente não quer sublinhar texto que não seja link.
  • center pode ser usada pra centralizar um elemento dentro de outro. A propriedade CSS permite os valores não apenas de center, mas também left (esquerda), right (direita) e justify (justificado).
  • menu pode ser usado pra criar um menu. Ela faz exatamente o que ul faz, mas como uma “lista não-ordenada” é mais geral, ul permanece de pé sobre o cadáver de menu.
  • layer é similar ao elemento div posicionado com CSS. Ela só funciona em versões velhas do navegador Netscape, o que a torna meio inútil.
  • blink faz o texto piscar e marquee faz o texto ficar atravessando a página. Apenas digam “NÃO!”, crianças. Elas tem um suporte muito limitado e com certeza foram criadas só pra fazer brincadeiras muito, muito doentes.
  • font, que podia ser usada pra definir o nome da fonte, tamanho e cor de um elemento ganhou uma merecida reputação de ser o notoriamente perverso Lord dos Duendes diabólicos da Taglândia. Velhos sites (e até mesmo alguns novos) tem tags font espalhadas por todas as suas páginas como uma praga de cupim. Muita de sua proliferação começou com os softwares de autoria web colocando a tag font ao redor de cada elemento em que o autor aplicava cor ou tamanho. Enquanto a tag font precisa ser aplicada em cada ocorrência de um elemento (digamos, sempre que você usa uma tag p), com CSS você pode aplicar propriedades a todas as ocorrências de um elemento com apenas uma linha de código para todo o seu site. Usando esse método, a página fica bem mais leve que uma página equivalente infestada de tags font. Além disso, mudanças podem ser feitas mais facilmente porque tudo que você precisa fazer é mudar uma linha de CSS ao invés de cada instância da tag font. Isso também aumenta suas chances de manter um design consistente em todo o site. tags font e o uso inapropriado de tabelas são as causas mais comuns de páginas desnecessariamente inchadas.

Atributos

Você pode pensar que, agora que já conhece as tag más e só vai usar as boazinhas, seu HTML está limpo e seguro. Mas existem alguns atributos na estreita esperando pra estragar suas “tags boas”.

  • name pode ser usada pra dar um nome a um elemento, o que é perfeitamente aceitável em elementos em formulários como o input, mas em qualquer outro lugar name foi substituído pelo atributo id.
  • text e bgcolor podem ser usadas pra especificar a cor base do texto e a cor do background de uma página dentro da tag body de abertura. As propriedades CSS color e background-color podem fazer isso quando aplicadas ao seletor body.
  • background pode ser usado dentro da tag body pra especificar uma imagem para o background de uma página. CSS cuida de imagens de background bem melhor com propriedades como background-image.
  • link, alink e vlink podem ser usadas na tag body pra especificar a cor dos links (não-visitado, ativo e visitado). CSS, baby – :link, :active e :visited fazem todo o trabalho.
  • align pode ser usada pra alinhar o conteúdo de um elemento (como em <div align="center">Stuff</div>), mas, como acontece com a tag center, a propriedade CSS text-align é a nova chefe.
  • target pode ser usada pra abrir um link em vários estados, geralmente em uma nova janela (como

<a href="qualquerlugar.html" target="_blank">Ajude me</a>

). Parece legal, mas não está fazendo nenhum favor ao seu site. Usuários não querem que coisas (como novas janelas) apareçam como mágica e a ferramenta de navegação mais usada em um site é o botão “Voltar”, que não vai funcionar se você abrir o link em uma nova janela. target é inválido e inacessível.

Atributos relativos a apresentação como width e height para imagens e cellpading e cellspacing para células ainda tem que ser usados devido a frequência com que diferentes valores precisam ser aplicados a diferentes elementos. Eles não são a solução perfeita, mas se você tem uma página com um grande número de imagens ou tabelas, você pode não ter nenhuma outra escolha sensata.

Os mais desconcertantes atributos relativos a apresentação pertencem a tag textarea, onde os atributos cols (número de colunas) e rows (número de linhas) são não apenas válidos, mas obrigatórios segundo o último padrão HTML.

Tags boas, mau uso

Pra entrar na sua casa você até pode se ajoelhar e se espremer por aquela pequena portinhola de cachorro mas espere! Tem uma porta humana bem grande enfeitada com um aparelho chamado fechadura! Wow! Olhe – a porta, tipo, é do tamanho certo pra um humano passar.

A coleção de tags HTML (as boas) foi feita pra uma razão específica e acredite ou não (acredite), quando você as usa pelos motivos certos, você consegue resultados melhores.

Páginas web são muito mais acessíveis para pessoas com deficiências quando o HTML é semântico (as tags são usadas pelos motivos certos), por que, por exemplo, leitores de tela vão geralmente enfatizar uma lista quando encontram uma tag ul ou ol e um cabeçalho quando encontram um h1 ou h2.

A tag HTML mais usada inapropriadamente é a table. Tabelas são muitas vezes usadas pra fazer o layout, mas elas devem ser usadas apenas pra mostrar dados tabulares, como sempre foi sua intenção. O método de layout sem tabelas não é nenhum tipo de desafio Zen Budista para a iluminação de um verdadeito geek, existe um benefício prático real de não apenas reduzir drasticamente o peso da página, mas também facilitar a manutenção e o redesign. Um bom exemplo disso é o Zen Garden (versão brasileira – Zen Garden do Maujor). Mudando apenas o CSS, você muda o visual do site inteiro. Legal, não é?

Algumas vezes designers usam algumas das tags e atributos mencionados aqui (especialmente tabelas para layout) pra conseguir um design que suporta tanto navegadores antigos (em especial o Netscape 4) quanto os modernos. Tabelas vão efetivamente permitir um controle melhor sobre a apresentação em navegadores que não suportam o CSS, como o Netscape 4, mas existem pouquíssimos usuários desses navegadores e cada vez menos, enquanto o número de usuários onde um layout feito com tabelas é uma grande desvantagem – usuários de dispositivos móveis – cresce. As vantagens de um design livre de tabelas mencionadas acima de longe superam as desvantagens e o resultado são páginas que, embora percam o estilo pra uma minoria, permanecem com todas as suas funcionalidades em todos os navegadores.

Frames (Quadros)

Cachinhos Dourados achou que seria uma ótima idéia comer aquelas tigelas de mingau, mas três mamíferos grandes e carnívoros apareceram e a jogaram pela janela. Frames são tigelas de mingau que pertencem a ursos. Podem parecer legais, mas é bem perigoso andar em algum lugar perto deles.

A maioria dos sites não usa frames e no geral usuários da web estão acostumados com um único documento compondo uma página.

Mas se, por alguma razão, você quer:

  • prevenir os usuários de adicionar uma página específica aos seus favoritos;
  • prevení-los de recomendar uma página por email ou mensageiro instantâneo;
  • adicionar um outro nível de complexidade pra usuários que usam leitores de tela, que vão ter que navegar entre frames ao invés de navegar por uma página
  • confundir mecanismos de busca,

vá em frente, use frames.

No geral, frames não fazem nada além de adicionar complexidadade e subtrair usabilidade.

Se você seguir essas receitas de bolo, você não vai errar muito:

  1. Se o nome da tag ou atributo pelo menos sussura alguma coisa sugerindo apresentação, não use. Isso é trabalho do CSS. E CSS faz o trabalho bem melhor.
  2. Usa a tag pra fazer o que o nome indica. Tabelas são pra dados tabulares. Cabeçalhos pra cabeçalhos. Etcetera etcetera.
  3. Quando você tiver algum conteúdo específico, use as tags apropriadas. Listas pra listas, cabeçalhos pra cabeçalho, yada yada yada.

E já que falamos muito de usabilidade e acessibilidade, alguns links pra você ficar mais por dentro do assunto:

Páginas Relacionadas

Referência

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Listas de Definição

10 03 2008

Lista de definição

O Tutorial Iniciante de HTML analisou só as listas ordenadas e não-ordenadas. Assim como a série “Jennie é um Gênio”, listas de definição são muito frequentemente esquecidas. Isso acontece talvez porque elas são bem mais específicas que listas ordenadas e não-ordenadas e até menos úteis, mas onde existir uma lista de termos e descrições (como um glossário), uma lista de definição deve ser usada.

O elemento dl põe a bola em jogo, similar aos elementos ul e ol, iniciando a lista. Ao invés de elementos li, listas de definição tem um elemento dt, que é o termo da definição (definition term), seguido de um elemento dd, que é a descrição da definição (definition description) associada ao elemento dt.

Não é necessário haver um elemento dt seguido por um elemento dd, pode haver qualquer número dos dois. Por exemplo, se existem várias palavras com o mesmo significado, devem existir várias dt‘s seguidas por um dd. Se você tiver uma palavra que significa várias coisas diferentes, deve existir um dt seguido por vários dd‘s.

<h1>Um glossário qualquer</h1>
<dl>
	<dt>HTML</dt>
	<dd>Abreviação de HyperText Markup Language (Linguagem de Marcação de Hipertexto) - uma linguagem usada para construir páginas web.</dd>

	<dt>Canino</dt>
	<dd>Qualquer mamífero carnívoro pertencente a família Canidae.</dd>
	<dd>Um tipo de dente humano.</dd>

	<dt>Suco de Vaca</dt>
	<dt>Cerveja de Gato</dt>
	<dt>Leite</dt>
	<dd>Um líquido branco produzido por vacas e usado pra consumo humano.</dd>
</dl>

Páginas Relacionadas

  • Próxima Página: Tags Más
  • Página Anterior: Tabelas II
  • Listas – Listas Ordenadas e Não-Ordenadas (Tutorial Iniciante de HTML)
Exemplos
Referência

BlogBlogs Tags: tutorial, minicurso, html

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Tags Meta

9 03 2008

Exemplo de tag

Muitas eras atrás, quanto a Internet era apenas um pequeno número de caixas de papelão unidos uns aos outros através de barbante, tags meta eram os guias turísticos da… erm… Cidade Internet.

Tags Meta não fazem nada com o conteúdo apresentado na janela do navegador, mas são usadas por mecanismos, como os de busca, para catalogar informação sobre a página web.

A tag meta pode ser usada quantas vezes você quiser e pode conter os atributos content (obrigatório), http-equiv e name.

O atributo content é o próprio meta-dado (dado sobre o próprio dado), que está ligado ao atributo name ou http-equiv. Esses meta-dados servem para dar informação extra sobre a página.

O atributo name pode ser qualquer coisa que você queira. Nomes comumente usados incluem author (autor), keywords (palavras-chave) e description (descrição).

O atributo description geralmente é usado por mecanismos de busca (como o Google) para exibir uma descrição da página em seus resultados de busca, e essa é a maior utilidade na aplicação da tag meta.

O atributo http-equiv pode ser usado no lugar de name para fazer um cabeçalho HTTP, que é informação enviada ao servidor aonde a aplicação está. O atributo content (conteúdo) pode ser content-type (tipo do conteúdo), expires (expira), refresh (com que frequência a página automaticamente se atualiza – péssimo pra acessibilidade), ou set-cookie.

<html>

<head>

	<title>Título</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="Essa é minha página super excitante sobre condicionadores de ar." />

	...

A razão pela qual as tags meta costumavam ser tão importantes é que mecanismos de busca as utilizavam para construir um perfil da página web. O meta-dado keywords, por exemplo, era usado extensivamente. Hoje em dia, no entanto, a maior parte dos mecanismos de busca usam o conteúdo real da página para definir seus resultados, tornando a maior parte das tags meta sem utilidade nenhuma além de levar informação a alguém que está lendo o próprio HTML.

Pra se aprofundar no assunto, leia o artigo sobre tags meta no Tableless.

Páginas Relacionadas

Referência
BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML: Span e Div

9 03 2008

Código HTML com as tahs <div> e <span>

A principal função do HTML é dar significado ao conteúdo. Enquanto a maioria das tags HTML aplicam algum significado (p quer dizer parágrafo, h1 quer dizer cabeçalho, etc.), as tags span e div não têm significado algum. Isso pode parecer quase tão útil quanto um martelo sem cabeça, mas essas tags são usadas extensivamente com CSS.

Elas são usadas para agrupar um bloco de HTML e aplicar alguma informação a esse bloco, na maioria das vezes usando os atributos class e id para associar o elemento com um seletor de classe ou id CSS.

id é um atributo que identifica um elemento, e é único (dois elementos não podem ter o mesmo id). class identifica um grupo de elementos, e vários elementos podem ter a mesma class. No Tutorial Intermediário de CSS class e id são explicados mais detalhadamente.

A diferença entre span e div é que span é um elemento inline e geralmente é usado para um pequeno bloco de HTML, e div é um elemento de bloco (o que basicamente é equivalente a ter uma quebra de linha antes e depois do elemento) e é usado para agrupar blocos maiores de código (geralmente divisões da página como menu, cabeçalho, etc.). Este artigo explica melhor as diferenças entre elementos inline e de bloco.

<div id="tesouras">
	<p>Isso é <strong><span class="papel">louco!</span></strong></p>
</div>

div e principalmente span não devem ser usados com muita frequência. Sempre que houver uma outra alternativa que faça mais sentido, ela deve ser usada. Por exemplo, se você quer enfatizar a palavra “louco!” e aplicar nela a classe “papel”, o código pode ficar assim:

<div id="tesouras">
	<p>Isso é <strong class="papel">louco!</strong></p>
</div>

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.





Tutorial Intermediário de HTML

9 03 2008

Trecho de código HTML

Enquanto o objetivo do Tutorial Iniciante de HTML era te ensinar só o essencial, o que você precisava pra começar a fazer suas páginas, esse guia vai um pouco mais além, acrescentando alguns detalhes práticos que vão melhorar a sua compreensão de HTML e permitir que você faça mais coisas. E esse tutorial ainda é mais fácil que o iniciante.

Conteúdos

  • Span e Div – Os elementos “sem significado”, que são usados com CSS.
  • Tags Meta – Adicionando informação extra sobre sua página.
  • Tabelas II – Expandindo o que você viu na página sobre tabelas do Tutorial Iniciante de HTML, conhecendo células-cabeçalho e mesclando células.
  • Listas de Definição – As listas esquecidas.
  • Tags Más – Os elementos e atributos HTML que você não deve usar.
  • Exercícios

Páginas Relacionadas

BlogBlogs Tags: , , ,

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.