HTML Básico

Fabiano Ter Out 20, 2009 1:26 pm

O que é HTML?
A sigla HTML significa HyperText Markup Language. Traduzindo, Linguagem de Marcação de Hipertexto. HTML Básico Icon_rabbit

Mas o que é um hipertexto?
Hipertexto são textos ( HTML Básico Icon_tongue

) aos quais agregam-se conteúdos relacionados. Esses "conteúdos relacionados" podem ser outros textos (links), imagens, vídeos, sons etc.

HTML Básico Icon_scratch

E pra que serve o HTML?
O HTML é interpretado por navegadores e é utilizado pra produzir páginas Web ( HTML Básico Icon_tongue

). O navegador interpreta as marcações HTML e exibe o resultado na tela...

HTML Básico Icon_cheers

Exemplo! Exemplo! Exemplo!
Seguinte...
1. Abre aí o bloco de notas, copia e cola o texto a seguir:

<html>
Hello world!
</html>

2. Agora salva o arquivo como teste.html (mas não fecha o bloco de notas, pq vamos precisar dele mais na frente)
3. Já salvou? Então Vai até o arquivo e dá dois cliques nele... o arquivo vai ser aberto pelo navegador

Observa que o texto "Hello world!" apareceu na tela.
Esse é um exemplo simples de uma página HTML.

HTML Básico Icon_scratch

Mas cadê o <html> e o </html> que eu escrevi?
Bom, <html> e o </html> não aparecem por que não são texto, mas sim códigos HTML que são interpretados pelo teu navegador. Esses cógidos são chamados de tags HTML.
De forma geral, as tags são palavras chaves usadas para fazer a marcação de texto. Essas tags não são exibidas no teu navegador, porém o navegador as utiliza para saber como ele deve exibir a página.

Algumas observações sobre tags:
1. Sempre que você abrir uma tag, você deve fecha-la. No nosso exemplo <html> é a tag de abertura e </html> é a tag de fechamento (note que foi incluída uma barra).
2. Tags sã oescritas em letras minísculas... você vai encontroar códigos HTML com tags em letras maísculas, mas o correto é escrever em minúsculas...

HTML Básico Icon_scratch

Hum... explica melhor isso aí...

Vamos fazer outro teste.
Aquele arquivo que você criou no bloco de notas ainda está aberto? Se não tiver (eu avisei!) abre ele novamente pelo bloco de notas...

1. Vamos fazer uma pequena modificação. Olha só:

<html>
<h1>
Hello world!
</h1>
</html>

2. Eu inclui novas tags html <h1> e </h1>

3. Salva o arquivo outra vez e abre ele no navegador.

Viu como mudou?

HTML Básico Icon_scratch

O que aconteceu?
Quando você colocou o texto "Hello world!" entre as tags <h1> e </h1> você marcou esse texto como um título/cabeçalho. A tag h1 significa header1 (traduzindo, cabeçalho de nível 1).
Se você quiser fazer um novo teste, é só subistituit o h1 por i. Você vai notar que o texto será apresentado em itálico já que você usou a tag de marcação adequada para isso. Utilize também a tag b para o texto ser exibido em negrito.

HTML Básico Icon_scratch

Por que as tags <html> e </html> modificaram o texto?
Essas tags apenas informam ao navegador onde começa (<html>) e onde termina (</html>) a sua página.
Não esquece que o HTML vai ser usado para marcar a estrutura do texto e não para formatar o texto... a formatação ficará a cargo do CSS, o que é uma outra história, vamos focar no HTML.

continua...

Fabiano Ter Out 20, 2009 1:44 pm

Talvez vocês identifiquem alguns erros no texto acima.
Eu tive um pouco de dificuldade pra inserir códigos na postagem e o texto ficou quebrado...

**PauloBruzaca** Qua Out 21, 2009 10:30 am

Muito bom esse POST, espero contar com mais contribuições.

**Andrezinho** Qui Out 22, 2009 11:59 pm

Ow fabiano tá me ouvindo? What a Face

Brincadeiras a parte, excelente post, bem simples e fácil de ser entendido. Assim esse fórum vai longe minha gente! Começou como brincadeira mas virou algo sério e já tá superando todas as expectativas.

Fabiano Sex Out 23, 2009 12:05 am

Valeu!
Espero que mais pessoas leiam e se interessem, pois quero dar continuidade ao assunto. HTML Básico Icon_wink

Conteúdo patrocinado

HTML Básico

HTML Básico

Erros

Re: HTML Básico

Re: HTML Básico

Re: HTML Básico

Re: HTML Básico