Acesso
Aluno
Acesso
Professor
Digitação
GRÁTIS
Cursos de Informática para todo o Brasil
Telefone do Curso de Informática
WhatsApp
11
998.164.924






Tutorial de HTML 5 GRÁTIS
Desde 1988
Cursos de Informática Online para você que quer aprender
  • ≡ Mais...
    • Tudo sobre a CiaByte
    • Formas de Contato
    • Quem Somos
    • Depoimentos de Alunos e Ex-alunos
    • Todos os cursos de Informática

    • Sobre o Certificado CiaByte
    • Como Funcionam os Cursos Online
    • Pagamento Seguro e Privacidade
    • Sistema de Ensino - Licenciamento
    • F.A.Q. - Perguntas mais frequentes
    • Ouvidoria
  • Certificados
    • Certificações em Informática para Concursos
    • Certificado de Informática Urgente
    • Proficiência em Informática - certificado em 2 h
    • Concursos e progressão - Cursos Expressos

    • Digitação Profissional para Concursos (completo)

    • Verificação de Autenticidade
  • Profissionalizantes
    • Profissionalizantes|Técnicos|Supletivo
    • Curso de Instrutor de Informática

    • Curso Profissionalizante de Informática
    • Curso de Secretariado Online
    • Curso de Auxiliar Administrativo Online
    • Curso de Telemarketing Online

    • Curso de Front End Online
    • Curso de Arte e Criação Online
    • Curso de Conteúdo e Imagem Online
    • Curso de Publicidade e Propaganda Online
    • Curso de Diagramação Gráfica Online

    • Cursos Técnicos Credenciados CEE/SP
    • Supletivo Oficial - Médio e Fundamental
  • Design Gráfico e Web
    • Carreiras Design | Computação Gráfica
    • Curso de Web Design Online
    • Curso de Design Gráfico Online

    • Curso de Computação Gráfica Online
    • Curso de CorelDRAW Online
    • Curso de Photoshop Online
    • Curso de illustrator Online
    • Curso de InDesign Online

    • Curso de HTML5 com CSS3 Online
    • Curso de Paint Online
    • Como publicar um site em 4 horas
  • Informática
    • Cursos de Informática na medida certa para você
    • Curso de Informática Básica Online
    • Curso de Informática Avançada Online
    • Curso de Informática para a Terceira Idade Online
    • Curso de Informática para Crianças Online
    • Curso de Digitação Online

    • Curso de Office Online - Word + Excel + PowerPoint
    • Curso de Word + Excel Online
    • Curso de Word Online
    • Curso de Excel Online
    • Curso de PowerPoint Online

    • Curso de Imersão em Informática Online
    • Curso de Reciclagem em Informática Online
    • Curso de Informática Educativa Online
Tutorial de HTML 5 GRÁTIS

Tutorial de HTML 5 GRÁTIS

HTML 5 online em 30 minutos - Tutorial GRÁTIS para iniciantes

Artigo de acesso grátis, parte integrante do Curso de HTML 5 e CSS 3 com SEO.
Para treinamento em competências e habilidades, se você ainda não é nosso aluno, recomendamos um dos nossos cursos interativos online, com suporte e orientação de professores (não gratuitos). Os valores são acessíveis e o retorno é VOCÊ profissionalizado(a) e certificado(a).

Tutorial de HTML5

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

Tutorial de HTML 5 online grátis

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

Tutorial de HTML 5 GRÁTIS

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.

Curso de Web Design e Design Gráfico Online

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.

Professor e 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

Olá Mundo! Meu 1º código HTML 5

Executado no Navegador

Olá Mundo! Meu 1º código 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">
            <p>
                  Olá Mundo!<br>
                  ESSA JÁ É UMA PÁGINA DE INTERNET
            </p>
            <p>
                  Observe, na barra de título do Navegador
                  (faixa na parte superior da JANELA)
                  o texto "Olá Mundo..."<br>
                  Foi o programa em HTML quem mandou escrever!<br>
                  Lembre-se, no Bloco de Notas você escreve o programa,
                  e no Internet Explorer você visualiza o resultado...
            </p>
      </body>
</html>

faça, passo a passo:

  1. Copie todo o texto em azul claro, logo acima, no Bloco de Notas. O texto azul é um código na linguagem HTML 5.
  2. 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).
  3. 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.
  4. 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: <!-- xxxxxxxx -->, 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 <!-- xxxxxxxx -->.

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: <br>.
Cada vez que o browser vai escrevendo um texto na tela e encontra a tag <br>, 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.

Minha página na Internet

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">

Melhor Curso de Informática
Desde 1988, com cursos interativos, a CiaByte é pioneira no ensino de informática através do e-learning (aprendizado eletrônico).
Tempo de Mercado - 30 anos
A CiaByte acumula uma experiência de mais de 30 anos no ensino de informática a distância e tem o seu site online há mais de 20 anos.
Alunos Satisfeitos CiaByte
Clientes satisfeitos nos sites de pagamento seguro nos fazem aumentar, de 7 dias (garantia legal) para 10 dias, a garantia para devolução do seu dinheiro.
Certificado com Método Registrado no Ministério da Educação e Cultura
O Certificado CiaByte é válido em todo o Território Nacional (Decreto Federal Nº. 5154 de 23/07/2004) e é obtido através de Método de Ensino Interativo © Registrado no Ministério da Cultura.
You Tube
Melhor Curso de Informática Online

Cursos de Informática Online para você que quer aprender

Método Registrado sob o Nº 100.602 - Direitos Autorais - bn.gov.br

Copyright © CiaByte Design - J.F.V.T. Eberlin - MEC 19.206-LP - CNPJ / CPF 347.473.627-20 - Política de Privacidade

WebMaster