(Graças ao pessoal da PredialNet não pude postar o conteúdo de ontem, por isso estou lançando um post único com o tutorial ontem e de hoje simultaneamente)
Olá Pessoal,
Estamos iniciando nosso minicurso de HTML, onde abordaremos os principais tópicos dessa linguagem essencial para quem trabalha com internet. Hoje em dia todo mundo que trabalha na nossa área precisa aprender um pouco de HTML: redatores, jornalistas, designers, publicitários, profissionais de marketing, programadores, gerentes de projeto etc. Não importa se você precisa aprender o básico para montar o layout de um texto, ou ter noções avançadas para dominar uma ferramenta web do seu trabalho, configurar newsletters, desenvolver sites, hotsites, portais e todo e qualquer tipo de sistema web, esse tutorial irá introduzí-lo no fantástico mundo do desenvolvimento web.
Se você é aluno de algum curso técnico (WebDesigner, Programador Web etc.), ou está estudando para trabalhar nesse ramo, enfim, se você é um iniciante e não sabe por onde começar, me permita ajudá-lo: comece por aqui! Acompanhe o be-a-bá do HTML e a partir desse minicurso avance para outras áreas. Programação, PHP, banco de dados, JavaScript, CSS tudo isso vem depois. Vamos começar aqui uma jornada rumo ao desenvolvimento de sites completos e funcionais.
Lembrando que essa é o conteúdo que ministro em minhas turmas de WebDesigner e Programador Web, no SENAC e outros cursos. Portanto, o conteúdo tende ser o mais atualizado possível, assim como didaticamente separado e estruturado.
O que é HTML, afinal de contas?
HTML ou HyperText Markup Language é uma linguagem de marcação, utilizada para construir a camada visual de páginas web. Sua função é dar um valor semântico e estruturar todo o conteúdo de um documento. Toda vez que você abre o seu navegador e acessa algum site, o que você está vendo na verdade é um punhado de código HTML interpretado pelo browser, e convertido em formas, cores, gráficos e vídeos. Podemos dizer que o HTML é a linguagem por detrás de um site, é o que define o conteúdo visualizado na tela. Com HTML podemos definir o que é um conteúdo: parágrafos, listas, links, imagens, vídeos, tabelas, colunas etc. Toda linguagem de programação web interage com HTML, por esses motivos todo profissional que se preza (redatores, designers, programadores etc.) conhece bem a sua sintaxe. Não é exagero dizer que o HTML é a base de tudo, o ponto inicial da sua carreira futura.
Ok, entendi que HTML é importante demais! Mas… como funciona?
Trabalhar com HTML é bem simples, como vocês verão nos próximos dias. Essa linguagem de marcação baseia-se em etiquetas com valor semântica, englobando trechos de conteúdo dotando-os de sentido e valor. Essas etiquetas são chamadas <strong>tags</strong>. Uma tag nada mais é do que um comando HTML com um ponto inicial (abertura) e um ponto final (fechamento). Quando digitamos um texto no Word, por exemplo, para criar um parágrafo, simplesmente apertamos a tecla ENTER. Em HTML não é tão simples assim, é preciso especificar via código que queremos um parágrafo em dado lugar; precisamos também dizer onde começa e onde termina esse parágrafo. Veja abaixo como funciona:
<paragrafo>Conteúdo do parágrafo 1…</paragrafo>
Conteúdo fora do parágrafo…
Perceberam que um pedaço do texto está entre <paragrafo></paragrafo>? Esse texto formará um parágrafo, enquanto todo o resto do conteúdo ficará de fora. Tá, mas por que os símbolos <> e </>. É o seguinte: toda tag possui a seguinte sintaxe – <nome_da_tag>… Conteúdo a ser etiquetado…</nome_da_tag>, onde delimitamos um início para tag (<>) e um fim (</>). Chamamos isso de tag de abertura e tag de fechamento. O HTML possui dezenas de tags com nomes diferentes. A nomenclatura das tags é algo bem fácil de lidar, pois os nomes sempre tem a ver com a funcionalidade do comando. Por exemplo: <p></p>são tags de parágrafo; <table></table> correspondem a tabelas; <form></form> corresponde a formulários, e por aí vai.
Eu ouvi falar de um tal XHMTL… Que raios é isso? É HTML também?
No princípio era o caos… Desenvolver um site há uns 10 ou 15 anos era um inferno. Não tínhamos padronização, folhas de estilo em cascata (vamos estudar isso), cada navegador interpretava o mundo do seu jeito, são tempos ruins que devemos esquecer. Naquele período não havia regulamentação e padronização de desenvolvimento, e por conseqüência o próprio HTML era meio zoneado. Usava-se HTML para tudo: marcação de conteúdo (sua finalidade real), estilização, diagramação etc. E conforme a web foi evoluindo, novas tecnologias surgiram e o HTML velho de guerra apresentou uma série de limitações frente às novas necessidades. Por esse motivo refizeram o HTML de acordo com o padrão XML, uma linguagem de marcação rígida, compatível com qualquer sistema: surgiu então o XHTML (XML + HTML). O novo formato apresentava a rigidez sintática do XML, assim como sua compatibilidade, e a linguagem ganhava novos horizontes. XHTML então é uma versão reformulado do velho HTML, dentro do padrão XML de marcação. É uma melhoria. Outra vantagem a ser assinalada: marcações XHTML são compatíveis com aplicações XML (usadas a torto e direito nos sistemas web modernos).
Não se preocupem: aqui aprenderemos marcação XHTML, que é muito parecido com o velho e bom HTML de guerra.
Ainda não estou satisfeito… Quais são as reais diferenças entre HTML e XHTML?
Ok, caro estudante… Você tem que perguntar mesmo! O HTML por não ser padronizado, admitia uma série de falhas e inconsistências. O XHTML é muito rígido, e não deixa passar nenhum erro. Por esse motivo somos obrigados a ter atenção com algumas regrinhas básicas:
Documentos em XHTML devem ser bem formatados
Os navegadores tentam resolver erros e inconsistências em páginas HTML, e cada um faz alterações conforme sua lógica interna. Nem é preciso dizer que isso não pode dar certo… Em XHTML não são permitidos erros de sintaxe, tags sem fechamento, aninhamento inconsistente etc.
Tags devem ser escritas em letras minúsculas
XHTML é o que chamamos de linguagem case-sensitive, ou seja: diferencia letras maiúsculas de minúsculas. Em uma linguagem case-sensitive “BRASIL” é diferente de “brasil”, apesar da grafia ser a mesma, pois o tipo de caixa (alta e baixa) varia. Todas as tags e atributos XHTML usam letras minúsculas, em resumo: nada de escrever <P></P>…
As tags devem ser aninhadas corretamente
Uma coisa importante sobre o uso de tags em HTML: se você usa várias tags aninhadas (uma dentro da outra) na sua marcação, é importante respeitar a ordem de abertura e fechamento de tags – a primeira tag a ser aberta é a última a ser fechada, a segunda tag é a penúltima e por aí vai…
OK – <p><strong>Texto</strong></p>
ERRADO – <p><strong>Texto</p></strong>
É obrigatório o uso de tags de fechamento
No HTML algumas tags como <p>, <br> e <li> dispensam o uso da tag de fechamento. Legal, mas isso no HTML. O padrão XML (do qual o XHTML é derivado) diz claramente: TODA TAG OBRIGATORIAMENTE DEVE SER FECHADA. Como diz aquele comentarista esportivo: “a regra é clara”… Existem algumas tags que não possuem par de fechamento, são o que chamamos de elementos vazios. Esse tipo de elemento precisa ser fechado na própria tag de abertura, e sua estrutura é a seguinte: <nome_da_tag />
Veja algumas tags que podem ser fechadas no comando de abertura:
<br /> – Força quebra de linha
<img /> – Insere uma imagem
<input /> – Coloca um campo de formulário (entrada de dados)
Tá… Você me convenceu: quando começamos a brincar com HTML?
Bom, chega de papo introdutório e vamos por a mão na massa. Todo mundo aqui já entendeu o que são tags, como elas funcionam e para o que servem. Para fechar esse post vamos conhecer as primeiras tags HTML, formando o que chamamos de estrutura básica de uma página web. O browser/navegador (Internet Explorer, Firefox, Opera, Safari etc.) é um dispositivo que usamos para acessar a internet e navegar pela web a fora, ele é capaz de interpretar código HTML, CSS, JavaScript, applets Java, XML e mais algumas coisas. Os códigos são interpretados e juntos geram as páginas web que visitamos. Mas precisamos ajudar o navegador a diferenciar código HTML de CSS ou qualquer outra linguagem. Por isso temos tags específicas para marcar cada tipo de código. Por exemplo, para criar uma página web precisamos dizer ao browser qual é a linguagem usada, e se for um documento HTML/XHTML iremos utilizar a tag <html></html>. Toda a página deve ficar entre essas tags, e o navegador não irá considerar qualquer código fora dessas etiquetas. A idéia é mais ou menos essa:
<html>
Aqui entra todo o conteúdo da página web…
</html>
Todo documento HTML é dividido em duas partes: cabeçalho e corpo. No cabeçalho colocamos todas as informações referentes a página, mas que não serão exibidas na tela do usuário; no corpo colocamos o site propriamente dito, ou seja todo o conteúdo a ser visualizado no navegador do usuário. Essa divisão entre cabeçalho e corpo é efetivada pelo uso das tags <head></head> e <body></body>. Nossa página ficará da seguinte forma:
<html>
<head>
Aqui entram informações sobre o documento, mas que não serão visualizadas pelo usuário
</head>
<body>
Aqui entra todo o conteúdo do documento, ou seja a página propriamente dita…
</body>
</html>
O corpo da página é a parte mais fácil de compreender. Todos já perceberam que os parágrafos, imagens, tabelas, listas, vídeos, formulários e qualquer outro tipo de conteúdo do site, ficarão dentro das tags <body></body>. Mas e o cabeçalho?
“Informações sobre o documento que não serão visualizadas pelo usuário” é um tanto vago e abstrato para a maioria de vocês. Na verdade não adianta me prolongar em explicações sobre o tipo de conteúdo do cabeçalho, pois vocês precisam pegar alguma experiência primeiro. Só para exemplificar: dentro do cabeçalho colocamos o título da página, aquele texto no topo do seu navegador (na barra de títulos); meta-tags – informações gerais sobre o documento como o autor, idioma, padrão de codificação, palavras-chave (termos que indiquem do que trata o conteúdo, por muito tempo foram o ponto alto da indexação de conteúdo no Google, sendo hoje ainda um fator relevante) etc.; links para outros documentos (arquivos com programação JavaScript, comandos de diagramação e estilização CSS etc.) etc. Prometo que conforme você prosseguir em seus estudos, tudo isso fará mais sentido e será mais fácil de entender.
Por enquanto vejamos como colocar um título no documento. Para inserir um título em sua página web, basta adicionar dentro cabeçalho (<head></head>) a tag TITLE (<title></title>). O conteúdo entre as tags aparecerá na barra de títulos (barra azul no topo do navegador) do seu browser. Veja como fica a nossa página:
1
2
3
4
5
6
7
8
| <html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
Conteúdo da minha primeira página web...
</body>
</html> |
Para visualizar esse arquivo faça o seguinte: abra o bloco de notas; escreva a estrutura HTML acima (sinta-se à vontade para fazer suas modificações livremente); salve o arquivo com o nome minhaPrimeiraPagina, e ao invés da extensão .txt, troque por .html (isso é undamental, pois se você não alterar a extensão para .html, a página não será visualizada); agora dê um duplo clique em cima do arquivo que você acabou de salvar e… voi lá, você está visualizando sua primeira página HTML.
Bem pessoal, por hoje é só. No próximo post vamos conhecer novas tags, e aprender a criar títulos, parágrafos, quebras de linha e a formatar texto (negrito, itálico, sublinhado etc.). Até breve.
Forte abraço,
Diego.
PS: Já que o blog tem ajudado muita gente e tudo mais, eu me comprometi a atualizá-lo diariamente (ou quase). Mas, como eu tenho uma produtora web pra cuidar e dou aulas no SENAC, fica meio complicado encontrar tempo. Então vamos oficializar: eu vou sempre postar os artigos e tutoriais à noite ou de madrugada. Durante o dia não dá mesmo.
