Curso de HTML a Distância com Certificado

Conheça nossas escolas

Curso de Informática OnLine com Certificado CiaByte

Para quem não tem tempo de ir à escola. Com certificado válido em todo o Brasil. Visite, temos vários cursos e um método de ensino que fará você ter vontade de estudar e aprender!
CURSO DE INFORMÁTICA COM CERTIFICADO

Cursos de Design e Computação Gráfica OnLine com Certificado CiaByte

Aprenda sem sair de casa, nos horários da sua escolha! HTML é só um comecinho... Nossos Cursos têm o foco na criatividade. Suporte, Acompanhamento aulas a Distância e Certificado CiaByte, válido em todo o Território Nacional.
CURSO DE WEB DESIGN COM CERTIFICADO

Curso de HTML online

Mini-Tutorial HTML

Introdução

Claro, você não vai produzir "a página", mas "uma página".
Em poucos minutos, você que é leigo em páginas de internet, verá que é possível fazer uma página com o Bloco de Notas do Windows. Para visualizar sua página, você utilizará o Internet Explorer. O mais interessante, é que estes dois programas já vem instalados com o Windows.

Nosso objetivo com este tutorial, é MOSTRAR O CAMINHO para a confecção de páginas de Internet, provando que pode ser muito mais simples do que você imagina. Bom estudo!

Antes do "mini-treinamento" em HTML entenda alguns conceitos.

Conceitos

HTML

HTML, Hyper Text Markup Language (Linguagem de Programação Baseada em Marcas).
É a linguagem padrão para escrever páginas de documentos Web. Provém da SGML (Standard Generalized Markup Language) e é mais fácil de aprender e usar.

Versão do HTML

Até se usou, durante muito tempo, um número de versão do HTML. No entato, em se tratando de uma linguagem em CONSTANTE ATUALIZAÇÃO, a partir da versão HTML 5.0, a especificação HTML não teve mais um número de versão, e passou a ser conhecida apenas como HTML.

Design/Designer

O designer (leia desainer) trabalha com a linguagem da forma e da cor com o objetivo de criar mensagens visuais.
Significa que o designer trabalha criando logomarcas, projetos gráficos de revistas, aberturas de programas de TV, embalagens e cartazes, entre outros.
Para um designer se tornar um webdesigner, é necessário que adquira novos conhecimentos, como técnicas para desenhar no computador (CorelDraw, Photoshop, ...) e técnicas para publicar suas páginas na Internet, em particular, a linguagem HTML.

Web Design

Web Design é muito mais que a linguagem de marcação HTML ou qualquer aplicativo do tipo FrontPage, Flash, Dreamweaver ou Golive. Estes, são meras ferramentas! A Internet, hoje, é tão poderosa, que até conhecimentos musicais para desenvolver jingles e pequenos filmes são bem-vindos!

Ambientes de trabalho

O Bloco de Notas do Windows é um editor sem formatação (negrito, itálico, cor de fonte, etc.). Por este motivo, é um dos ambientes onde podemos escrever códigos em HTML.
Além do Bloco de Notas, você usará o Internet Explorer. Como você já deve saber, ele é um browser ou seja, um programa que permite a visualização das páginas de internet.

Portanto, você estará, durante este minicurso, alternando entre as janelas do Bloco de Notas e do Internet Explorer.
No primeiro, você escreverá seu código HTML. No segundo, você visualizará a sua página de Internet.

PRESTE MUITA ATENÇÃO NAS ORIENTAÇÕES, DE QUANDO USAR UM OU O OUTRO SOFTWARE.

Perguntas e respostas mais frequentes

P- Por que aprender HTML e não o FrontPage ou o Dreamweaver,...?
R- Os softwares citados são ferramentas de produtividade. Em outras palavras, são programas que aumentam a produtividade de quem faz uma página de Internet, enquanto o HTML é a base de tudo.

P- Como estes programas aumentam a produtividade?
R- Você praticamente "desenha" sua página em qualquer um deles e eles (os programas) é que vão criar o código em HTML necessário para que os browsers visualizem as páginas.

P- Então, é possível alguém fazer uma página inteira sem conhecer absolutamente nada de HTML?
R- A resposta é sim. Porém, as páginas ficam 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 browsers).

P- É verdade que para fazer uma página de Internet são necessários conceitos profundos de programação?
R- Depende do grau de envolvimento que você quer ter com o assunto. A maioria não estuda lógica programação e cria boas páginas de internet.
Os códigos em HTML permitem chamadas para programas externos (criados em outras linguagens, como Java, por exemplo) que podem dar toques mais profissionais às páginas.
É comum, trabalhos em parceria: um designer + um programador.

P- Convém conhecer alguma ferramenta de desenho?
R- Se você desejar criar uma página mais sofisticada e não quiser ficar restrito a desenhos pré-existentes ou criados por terceiros, a resposta é sim. O conhecimento de ferramentas como Illustrator e Photoshop já será de grande ajuda para você fazer trabalhos bem criativos.

P- Só com HTML eu conseguirei fazer a página da minha empresa?
R- Se você tiver, à disposição, imagens já prontas, como o logo da empresa, por exemplo, e uma página simples, de apresentação for o suficiente, a resposta é sim.

HTML OnLine, agora!

Leia e faça uma imagem mental da SEGUINTE situação.

Um gerente ditando uma carta para sua secretária redigir:

Ele fala:

- Vamos iniciar. Prezados Senhores, dois pontos.

Ele faz uma pausa e a secretária redige...

- Temos o prazer de anunciar o lançamento de nosso mais novo produto, ponto parágrafo.

Ele faz outra pausa para dar tempo à secretária...

- Você, vírgula, nosso cliente especial, vírgula, receberá um brinde inteiramente grátis. Escreva esse grátis com letras maiúsculas.

... e assim, ele vai ditando toda a carta.

Consegue imaginar como ficará a carta? Será que a secretária redigiu o texto tal qual foi ditado (escrevendo dois pontos por extenso) ou será que ela compreendeu que deveria usar dois pontos (:) ao final do texto "Prezados Senhores"?

Veja o resultado desejado:

"Prezados senhores:
Temos o prazer de anunciar o lançamento de nosso mais novo produto. Você, nosso cliente especial, receberá um brinde inteiramente GRÁTIS."

Claro que o resultado desejado, não seria como o seguinte:

"Vamos iniciar prezados senhores dois pontos temos o prazer de anunciar o lançamento de nosso mais novo produto ponto parágrafo você vírgula nosso cliente especial vírgula receberá um brinde inteiramente grátis escreva esse grátis com letras maiúsculas."

... o que seria motivo de demissão sem justa causa! Bom, imagino que você ainda se lembre dos tempos em que tinha ditado nas aulas de português.

Quando você escreve um programa de computador, é a mesma coisa. Você "dita", escrevendo um programa, ao computador, o que você deseja que ele faça. Portanto, o programa corresponde ao texto que o gerente do exemplo ditou à secretária. O resultado (que aparece na tela do computador), corresponde ao resultado da execução do programa (carta redigida pela secretária).

HTML é 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 pelo nosso gerente).

Fazendo uma analogia, quando o executivo disse à secretária "vamos iniciar", isto seria uma marcação. Afinal, o texto "vamos iniciar" não pertence à carta. Serviu apenas para "ligar" a secretária!

HTML é uma linguagem desenvolvida para a internet e quem faz o papel da secretária (obedece às ordens e escreve o texto) é um browser (ou navegador), como o Internet Explorer, por exemplo.

E quem é o gerente nessa história? Você, programador(a)! Portanto, é necessário que você conheça os termos que o browser sabe executar (aqueles que ele "entende").

Abaixo, você verá um programa em HTML. O browser (e agora você) saberá que é um programa em HTML por causa das marcas <html> no início e </html> ao fim do programa (estas são as marcações, chamadas tags).
O programa (texto que o executivo ditou à secretária) você está vendo agora, logo abaixo. Porém, o resultado do que o programa manda o browser fazer (a carta), você verá quando carregar no browser este mesmo arquivo.

Exercício

Abra dois programas: o Bloco de Notas e o Internet Explorer, deixe-os ativos (minimizados)!
Assim, você poderá alternar entre eles, com facilidade.

Faça passo a passo

Copie todo o texto logo abaixo, em vermelho (exatamente como está), na janela do Bloco de Notas.
Salve o arquivo com o nome minhapagina.html (use a extensão .html).
Agora, no Internet Explorer, abra o arquivo minhapagina.html. No Internet Explorer, tecle [Alt] para aparecer a barra de menus e comande Arquivo > Abrir. Localize o arquivo minhapagina.html e clique OK.
Depois, faça experiências, trocando partes do texto vermelho.

<html>
<head>
<title> MINHA PRIMEIRA HOME PAGE </title>
</head>
<body>
ISTO JÁ É UMA PÁGINA DE INTERNET 
Observe na barra de título do Internet Explorer
(faixa na parte superior da JANELA)
o texto "MINHA PRIMEIRA..."
 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>

Tags

A cada uma destas marcações entre os sinais < e >, nós chamaremos de TAG. Observe o programa acima, em vermelho, e veja que lá existem outras tags (sempre entre os sinais de < e >).

Todo programa HTML tem, obrigatoriamente, as seguintes tags:

<html> e </html> que indicam início e o fim do programa.
<head> e </head> que indicam o início e o fim do cabeçalho do programa. Na seção de cabeçalho são colocados, quando necessário, código de caracteres que será usado pelo browser (japonês, árabe, ...), título da página e outras características.
<title> e </title> que indicam o início e o fim do texto que aparecerá na barra de títulos do browser.
<body> e </body> que indicam o início e o fim do corpo do programa, ou seja, o programa propriamente dito.

Além destas, existem muitas outras tags. As que apresentamos são obrigatórias e, além disto, devem seguir uma certa estrutura. Tudo que o browser 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 sendo, toda vez que você for escrever uma página, você terá a seguinte estrutura:

<html>
<head>
<title> AQUI VOCÊ ESCREVE O TÍTULO </title>
</head>
<body>
..............................
AQUI VOCÊ ESCREVE A SUA PÁGINA
..............................
..............................

</body>
</html>

Na maioria das vezes você terá uma tag de início como <body> e uma de finalização como </body>. Repare 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 browser: aqui você começa a fazer algo. A de finalização diz ao browser que é para parar de fazer isto!

Existem tags que não tem a de finalização (não faria sentido), como a que manda o browser 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 debaixo.

Uma outra tag interessante é a de comentário. Muitas vezes você quer escrever algo dentro do programa que não deve aparecer na página. Pode ser um comentário relativo ao programa, para que, no futuro, você possa lembrar-se do que fez. A tag de comentário é a seguinte: , onde xxxxxxx é um comentário qualquer. Resumindo: o xxxxxxx não aparecerá na sua página (o browser irá ignorar tudo que estiver entre ).