html e css

Aula 01

A. Breve história da internet

B. Código HTML e o designer de web

O problema inicial endereçado pelo HTML foi o de formatar conteúdo para ser mostrado na web, fazendo links entre trechos de conteúdo. Com o passar do tempo, o HTML foi se tornando mais complexo e hoje passa por algumas mudanças interessantes.

O designer voltado para a produção de peças digitais não tem muita escolha quanto se trata de tecnologia: deve conhecer, pelo menos, duas delas: Flash (com ActionScript) e HTML (com CSS). São duas tecnologias muito diferentes e que tem se desenvolvido muito nos últimos anos.

Algumas razões para o designer ser também um 'coder', isto é, um desenvolvedor de código HTML:

  1. Web stardards: um código XHTML melhor, mais próximo dos standards do que qualquer gerador de código automatizado (como o SiteGrinder, por exemplo).
  2. SEO: código otimizado para os mecanismos de busca: o famigerado Search Engine Optimization.
  3. Acessibilidade: ora, se você gera um código mais próximo dos stadards e mais otimizado para busca, logo, você deve gerar um código mais acessível. Lembre-se: não há um mecanismo automático que consiga pensar por você em termos de: quem é seu público alvo, qual o cenário de uso que estou considerando, etc.
  4. Os dois lados do cérebro: a atividade de gerar código é um bom complemetar à do 'designer criador de interfaces'. Se o criador gráfico usa o lado direito do cérebro, o programador usa o esquerdo, e isso é bom! Afinal, quem não quer usar todo o cérebro, certo? Se você pensa que programação é uma atividade chata, repetitiva e cansativa, se enganou: há poucas atividades mais criativas que a de gerar código a partir da descrição que um cliente faz da interação que imaginou para seu site. Sempre existe mais de uma solução para o mesmo problema, e várias maneiras de abordá-las. Assim, ser um bom 'coder' é um desafio e tanto, assim como ser um bom designer de interface.
  5. Cuidado, você pode gostar: não é raro assistir à conversões. Você pode começar reclamando mas, depois de montar o seu primeiro site em HTML com CSS se espantar com a engenhosidade da aplicação destas linguagens para formar uma interface instigante.
  6. O instrumentista e o maestro. Se quer ser um bom instrumentista basta dominar um instrumento. Mas se quer ser maestro, criar, compor, coordenar o trabalho de outros, domine vários! Se você quiser ser um bom designer digital, deve dominar tanto Flash quanto HTML. Poderá mesmo ser um diretor de criação mais completo pois saberá pedir exatamente o que quer de seu 'coder'. Assim poderá escolher e mesclar técnicas.Você vai perceber que, na mairoria das vezes a solução híbrida, que mistura HTML e Flash é a mais adequada.

* Esta lista foi inspirada (não adaptada ou traduzida) na lista do WebdesignerDepot.

C. Os próximos 5000 dias da web, segundo Kevin Kelly

D. Elementos da linguagem HTML

Embora este curso não se aprofunde demais na linguagem HTML (pois vamos dar mais ênfase à criação de sites do que ao conhecimento específico da linguagem), vamos ver qual a estrutura de uma página HTML.

A linguagem HTML, como toda linguagem (mesmo a falada...) está sempre em constante evolução.
A linguagem é regulamentada por um consórcio de universidades e entidades, o W3C, sigla o World Wide Web Consortium, cujo endereço na internet é http://www.w3c.org/ Eles estão na 4a versão atualmente (estamos em fevereiro de 2003), por isso, quando falarem em HTML4, você já sabe o porquê do 4... Aliás, HTML significa Hyper Text Markup Language, ou seja, linguagem de marcação de hiper texto.

O código

Relembro que não seremos especialistas em código HTML, mas vamos dar uma olhada em como ele se parece.

Vejamos o código de uma página básica em HTML

<html> 
  <head> 
     <title>
      Este é o título
     </title>
  </head>
  <body>
     <p>Este é o primeiro parágrafo</p>
  </body>
</html>

Deste modo, pode-se ver que existem sempre objetos (cada tag é um objeto) dentro de outros objetos. A tag TITLE, por exemplo, está dentro da tag HEAD.

Esta página, bem básica, pode ser vista clicando aqui.

Algumas tags do HTML

Dica: o melhor tutorial sobre HTML e CSS em língua portuguesa é o do Maujor. Em caso de dúvida sobre o significado de alguma tag, não pense duas vezes em consulta-lo.