Tutorial de HTML5

Dica para que dê tudo certo...
Faça todo o tutorial, na sequência, sem pular nada. Bom estudo!

Com esse tutorial, em poucos minutos, você verá que é possível criar uma página de Internet com o Bloco de Notas do Windows. Para visualizar a página, você utilizará o navegador Internet Explorer (ou outro navegador que você domine).

1.0.Conceitos em torno do HTML 5

Antes de começar, você precisa saber...

1.1.O que é HTML

HTML, Hyper Text Markup Language (Linguagem de Programação* Baseada em Marcas) é a linguagem padrão para escrever páginas de documentos Web.

* Adotamos a visão do Professor David Brailsford (Universidade de Nottingham - Reino Unido) que entende HTML como sendo uma linguagem de programação. Mais detalhes a respeito no item 2.

1.2.Versão do HTML

Em se tratando de uma linguagem em constante atualização, a partir da versão HTML 5, a especificação HTML não teve mais um número de versão, e passou a ser conhecida apenas como HTML.

Portanto, hoje, HTML e HTML 5 querem dizer a mesma coisa.

1.3.Qual o papel do Navegador

Navegador (ou browser, em inglês) é um programa de computador que executa instruções escritas na linguagem HTML 5, permitindo com que os internautas visualizem páginas web. Sem um navegador (Internet Explorer e Chrome são exemplos) você não conseguiria visualizar os sites na Internet.

1.4.Designer x Web Designer

O designer (leia desainer) trabalha com a linguagem da forma e da cor, com o objetivo de criar mensagens visuais, tais como:

logomarcas
projetos gráficos de revistas
aberturas de programas de TV
embalagens
cartazes, entre outros

Para um designer se tornar um web designer, é necessário que adquira novos conhecimentos, como técnicas para desenhar no computador (CorelDraw, Photoshop, Conceitos de Arte, Comunicação Visual, ...) e técnicas para publicar suas páginas na Internet, inicialmente, a linguagem HTML 5 em conjunto com CSS 3.

2.0.Perguntas sobre HTML 5

2.1.É possível fazer uma página sem conhecer HTML?

A resposta é sim. Porém, as páginas ficariam limitadas, pois para ajustes finos e para manutenção será necessário que se conheça um mínimo de HTML (que é o código que vai rodar nos navegadores).

2.2.Só com HTML 5 eu conseguirei fazer minha própria página web?

Se você tiver à disposição imagens já tratadas, como o logo da empresa, por exemplo, e uma página simples de apresentação for o suficiente, a resposta é sim. À medida que você for precisando sofisticar sua página, com relação a design ou automação, você precisará estudar mais.

2.3.HTML 5 é uma Linguagem de Programação?

Muitos técnicos e programadores discutem na Internet se HTML é ou não uma linguagem de programação. Não creio que isso faça diferença no seu aprendizado de Web Design, mas, aqui na CiaByte, adotamos a visão do Professor David Brailsford, Professor Emérito John Dunford de Ciência da Computação na Universidade de Nottingham, Reino Unido:
Sim! HTML é uma linguagem de programação.
Se essa discussão for realmente importante para você, assista à defesa, pelo próprio professor, clicando aqui (vídeo em inglês).

3.0.Programador x Navegador

Atenção, essa introdução é fundamental!

O entendimento da diferença entre o programa de computador, aquele que o programador (você) escreve, daquilo que o navegador (Internet Explorer, por exemplo) apresenta na tela, é o segredo para você iniciar com pé-direito na programação de computadores. Criamos um cenário prático para ajudar você a compreender...

3.1.Se inteire do evento seguinte...

Leia o texto seguinte, fazendo uma imagem mental de uma professora fazendo um ditado para seus alunos.

A professora fala:
- Vamos iniciar o ditado. O título é um dia na praia. Como é título, um, dia e praia devem iniciar por maiúsculas. Pulem uma linha.

A professora faz uma pausa, enquanto os alunos escrevem...
e continua:
- Num sábado de Sol, com poucas nuvens, fui à praia com a família. Ponto, parágrafo.

A professora faz outra pausa ...
e prossegue com o ditado:
- Após seis horas de muita alegria, voltamos para casa. Escrevam o número seis por extenso. Ponto final.

3.2.Pense...

Como os alunos deveriam apresentar o ditado em seus cadernos, texto A ou texto B?

Texto A (as instruções, como foram faladas pela professora)

Vamos iniciar o ditado. O título é um dia na praia. Como é título, um, dia e praia devem iniciar por maiúsculas. Pulem uma linha. Num sábado de Sol, com poucas nuvens, fui à praia com a família. Ponto parágrafo. Após seis horas de muita alegria, voltamos para casa. Escreva o número seis por extenso. Ponto final.

Texto B (o texto que cada aluno escreveu no caderno)

excecutado Um Dia na Praia

Num sábado de Sol, com poucas nuvens, fui à praia com a família.
Após seis horas de muita alegria, voltamos para casa.

Se você respondeu Texto B, acertou!

3.3.Como funciona no computador

Fazendo uma comparação, a professora, que passou uma sequência de instruções aos alunos, fez o papel do programador (você), que também escreve uma sequência de instruções, só que dirigida ao navegador.
Desse modo, o texto falado pela professora, sequência de instruções aos alunos, corresponderia ao código do programa escrito pelo programador (quadro com fundo azul).

O resultado da execução das ordens passadas pela professora (sequência de instruções) aos alunos, a redação pronta (quadro com fundo amarelo), corresponderia ao resultado apresentado na tela do computador, pelo navegador (Internet Explorer, por exemplo).

Instruções da Professora

1. Vamos iniciar o ditado.
2. O título é um dia na praia. Como é título, um, dia e praia devem iniciar por maiúsculas.
3. Pulem uma linha.
4. Num sábado de Sol, com poucas nuvens, fui à praia com a família.
5. Ponto, parágrafo.
6. Após seis horas de muita alegria, voltamos para casa. Escrevam o número seis por extenso.
7. Ponto final.

Executado pelos Alunos

Um Dia na Praia

Num sábado de Sol, com poucas nuvens, fui à praia com a família.
Após seis horas de muita alegria, voltamos para casa.

3.4.Com o HTML 5...

HTML 5 é uma linguagem de marcação. Marcação é qualquer coisa que não pertença ao texto, mas diz ao computador o que fazer com o texto (como o "ponto, parágrafo", usado pela professora do exemplo).

Fazendo uma analogia, quando a professora disse aos alunos "Vamos iniciar o ditado", isso seria uma marcação. Afinal, o texto "Vamos iniciar o ditado" não pertence à carta. Serviu apenas para informar o que deveria ser feito.

HTML 5 é uma linguagem desenvolvida para a Internet, e quem faz o papel dos alunos, no exemplo, obedecendo às ordens e escrevendo o texto, é um navegador. O Internet Explorer e o Google Chrome são exemplos de navegadores.

E quem é a professora nessa história? Você, programador(a)! Portanto, é necessário que você conheça os termos que o navegador saiba executar (a "língua" que ele "entende"). Significa que você vai estudar uma linguagem de programação. No caso, o HTML 5.

A seguir, no quadro de fundo azul, você verá um programa escrito em HTML 5. No exemplo, utilizamos o Bloco de Notas do Windows para escrever o código.
No quadro de fundo amarelo, um navegador mostra o programa executado. O navegador sabe que o código é um programa em HTML por causa das marcas <html> no início e </html> no fim do programa (estas são as marcações, também chamadas de tags).

Instruções em HTML 5

Executado no Navegador

4.0.O HTML 5 na prática

Não basta entender como funciona. FAÇA, e garanta seu sucesso daqui para frente.
Abra dois programas em duas janelas do Windows: na 1ª, o Bloco de Notas e, na 2ª janela, o Internet Explorer (ou outro navegador). Faça com que fiquem abertos, mas minimizados. Desse modo, você poderá alternar a visualização de cada um deles com facilidade.

4.1.Exercício

Dado o código seguinte,

<html lang="pt-br">
 <head>
 <meta charset="utf-8">
 <title>Olá Mundo! - Minha Primeira Homepage</title>
 </head>
 <body>
 <img src="http://www.ciabyte.com.br/imagens/mundo.jpg" alt="Mundo sorrindo">
 
 Olá Mundo! 
 ESSA JÁ É UMA PÁGINA DE INTERNET
 
 
 Observe, na barra de título do Navegador
 (faixa na parte superior da JANELA)
 o texto "Olá Mundo..." 
 Foi o programa em HTML quem mandou escrever! 
 Lembre-se, no Bloco de Notas você escreve o programa,
 e no Internet Explorer você visualiza o resultado...
 
 </body>
</html>

faça, passo a passo:

Copie todo o texto em azul claro, logo acima, no Bloco de Notas. O texto azul é um código na linguagem HTML 5.
Salve o arquivo com o nome minhapagina.html. Para que o Bloco de Notas salve com a extensão .html em vez de .txt (que é o padrão dele).
Você precisará digitar o nome completo. Assim: minhapagina.html.
No campo codificação, escolha UTF-8 (para que funcionem os acentos da língua portuguesa).
Agora, no navegador Internet Explorer (ou equivalente), carregue o arquivo que acabou de salvar, minhapagina.html. Para abrir o arquivo no navegador, tecle [Ctrl]+[O] (significa manter a tecla [Ctrl] pressionada, enquanto tecla a letra ó = Control Open). Localize o arquivo minhapagina.html e clique OK.
Depois que compreender, faça experiências, trocando partes do texto azul claro (lembre-se de salvar no Bloco de Notas, a cada mudança, e recarregar a página no navegador).

4.2.Compreendendo as Tags do HTML 5

A cada uma dessas marcações entre os sinais < e >, nós chamaremos de TAG. Observe o código acima e veja que lá existem diversas tags (sempre entre os sinais de < e >).

Todo programa HTML 5 tem, obrigatoriamente, as seguintes tags:

<html> e </html> que indicam início e o fim do programa (faça analogia com <vamos iniciar o ditado> e <ponto final>).
<head> e </head> que indicam o início e o fim do cabeçalho do programa. Não tem nada a ver com o cabeçalho que aparece na tela. É uma seção do código onde são colocadas instruções que afetarão todo o programa, como:

código de caracteres que será usado pelo browser (japonês, árabe, ...)
título da página
outras características opcionais.

<title> e </title> que indicam o início e o fim do texto que aparecerá na barra de títulos do navegador.
<body> e </body> que indicam o início e o fim do corpo da página, ou seja, o conteúdo.

Além dessas, existem muitas outras tags. As que apresentamos são obrigatórias e, além disso, devem seguir uma certa estrutura:

Tudo que o navegador tiver que interpretar deverá estar entre <html> e </html>.
As tags <head> e </head> devem ficar no início do programa.
<title> e </title> devem estar entre <head> e </head>.
<body> e </body> devem ficar após a sequência <head> ... </head>.
Finalmente, entre <body> e </body> você poderá escrever sua página!

Assim, toda vez que você for escrever uma página, você terá a seguinte estrutura:

<html lang="pt-br">
 <head>
 <title> AQUI VOCÊ ESCREVE O TÍTULO </title>
 </head>
 <body>
 ..............................
 AQUI VOCÊ ESCREVE A SUA PÁGINA
 ..............................
 ..............................
 </body>
</html>

Obs.: os espaços que colocamos antes das tags não têm nenhum efeito sobre o programa, mas dão um aspecto visual estruturado, facilitando o entendimento do código pelo programador.

4.3.Outros tipos de tag do HTML 5

Tag de comentário

Caso queira escrever algo dentro do programa que não deve aparecer no navegador, como um comentário para que, no futuro, você possa lembrar-se do que fez, utilize a tag de comentário: , onde xxxxxxx seria seu comentário.
Resumindo: o xxxxxxx não aparecerá na sua página, pois o navegador irá ignorar tudo que estiver entre .

Tags sem finalização

Na maioria das vezes você terá uma tag de início como <body> e uma de finalização como </body>. Note que a de finalização sempre tem o nome da de início, acrescentada de uma barra (/) à esquerda dela.
A de início diz ao navegador: aqui você começa a fazer algo. A de finalização diz ao navegador que é para parar de fazer!
Mas, atenção! Existem tags que não têm a tag de finalização (simplesmente porque não faria sentido). Veja os exemplos:

a) Tag que manda o browser (navegador) mudar de linha:  .
Cada vez que o browser vai escrevendo um texto na tela e encontra a tag  , ele quebra a linha, ou seja, ele continua escrevendo na linha de baixo.
b) Tag para inserir imagem, <img>.

Utilize da forma seguinte: <img src="http://www.ciabyte.com.br/imagens/mundo.jpg" alt="Descrição da Imagem">

src e alt são atributos, cujos valores você define;
src indica a URL da imagem;
alt é uma descrição da imagem.

Obs.: a descrição da imagem só aparece quando o navegador não apresenta imagens. Também pode ser ouvida por deficientes visuais.

Muito importante!
No Bloco de Notas não aparecerá nenhuma imagem, pois no Bloco de Notas você digita o código HTML. Na hora de o navegador interpretar esse código, ou seja obedecer o código, o navegador buscará a imagem pela URL informada e apresentará a imagem na tela.

5.0.Trabalho

Crie uma página HTML de apresentação pessoal. Um mini-currículo, contendo um texto sobre você e uma foto sua (se não tiver, use a imagem do exercício anterior).
Escreva o código no Bloco de Notas e salve como curriculo.html (sem acento na palavra currículo).
Lembre-se de, ao salvar no Bloco de Notas, digitar a extensão .html.

O resultado visualizado no navegador deverá ser algo como exemplificado na figura.

Obs.: se for usar uma imagem sua, certifique-se de que ela esteja na mesma pasta do código HTML. Nesse caso, use apenas o nome da imagem para URL (sem especificar o caminho).
Exemplo: <img src="minhaimagem.jpg" alt="Descrição da Imagem">