Você pode não acreditar, mas tudo que você está vendo aqui, assim como tudo que você vê na internet, é fruto de programação feita usando o HTML combinado com outras linguagens e recursos como CSS, Flash, JavaScript, PHP, ASP… Clique com o botão-direito (o auxiliar) do seu mouse em qualquer área do site que não tenha imagem ou animação e escolha a opção “ver código-fonte”, ou algo similar, para entender melhor o que eu acabei de lhe dizer.
Estranho? Complicado? nada… é mais fácil do que você imagina.
HTML é sigla para HyperText Markup Language – Linguagem de Marcação de Hipertexto (Em alguns locais se encontra como Linguagem de Formatação de Hipertexto)
Como o próprio nome diz, o HTML não é uma linguagem de programação, e sim de marcação e/ou formatação de Hipertexto – Trocando em miúdos, significa que com HTML puro você só consegue criar páginas-web estáticas, contendo material estático (textos, links, figuras, sons…). É possível criar páginas atraentes? sim, é possível. Mas eu, por exemplo, teria “mil vezes” mais trabalho do que tenho hoje para “alimentar” este blog. :-)
Fazer uma marcação significa “dizer” quais ítens estão numa página e quais são seus parâmetros (configurações, opções) e formatações.
Vamos então à parte prática da coisa…
Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de marcação/formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>…</etiqueta>
Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.
Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:
<etiqueta>
Os elementos podem ter atributos, como o exemplo abaixo:
<etiqueta atributo1=valor1 atributo2=valor2>…</etiqueta>
Para você ver como HTML é “difícil”, peço que abra um software muito complicado e pesado chamado notepad, ou bloco de notas… Já ouviu falar? (rsrsrs)
Então, com o programa aberto, vamos começar a escrever nossa página.
Toda página HTML tem uma estrutura básica formado pelas seguintes tags:
<html> <head> Aqui ficam várias configurações de sua página <title>Titulo de sua página</title> </head> <body> Espaço onde fica o conteúdo de sua página. </body> </html>
Pronto! Temos uma página web! Mas ainda não há conteúdo a ser mostrado. Então vamos colocar uma frase simples e um título para a página:
<html> <head> <!-- Titulo da página. vai aparecer no topo da janela --> <title>Minha Primeira Página</title> </head> <body> <p>Minha Primeira Página WEB</p> <!-- Uma frase simples, apenas para exemplo. Escreva o que quiser ali :) --> </body> </html>
Agora sim! temos algum conteúdo! Mas precisamos salvar este arquivo com a extensão .htm ou .html para podermos ver a página num navegador.
- Vá ao menu “Arquivo” no topo da janela e escolha a opção “Salvar como…”.
- Escolha “Todos os arquivos” no box “Salvar como tipo”. Isto é muito importante – caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
- Salve seu documento com um nome de sua preferência e a extensão html. Exemplo: page1.html (a extensão “.htm” indica que se trata de um documento HTML. A extensão “.html” dá o mesmo resultado. Eu sempre uso “.htm”, mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD – esteja certo de salvar em um lugar que depois você possa achar com facilidade.
Para ver sua página num navegador, basta dar duplo-clique nela.
O que é importante:
<html></html> Marca onde começa/termina o documento html. Os navegadores “lêm” a página a partir deste ponto.
<head></head> Marca o espaço destinado às configurações da página. Quase tudo aqui não é visível.
<title></title> Marca o título de sua página. É uma das pouquíssimas “coisas” visíveis que são colocadas no cabeçalho.
<body></body> Marca o espaço que será exibido pelo navegador. Ou seja, o conteúdo de sua página.
Uma informação muito interessante, e que você já deve ter notado, é que as tags combinam entre si e que podem ser colocadas umas dentro das outras.
Veja:
<html> “Abre o documento.
<head> está dentro da tag html porque, como todos os outros ítens, faz parte do documento que vai ser lido pelo navegador.
<title> está dentro de head porque é uma configuração…
</title></head> As tags são “fechadas” nesta ordem: da mais interna para a mais externa. a tag <html> não foi fechada porque ainda vamos inserir mais “coisas” dentro do documento…
<body> Abre a sessão onde está o conteúdo (visível) do site. e obviamente fica separado do cabeçalho, mas continua dentro do html.
</body></html> A tag body foi fechada e logo em seguida a tag html pois não há mais nada para inserir ou exibir na página neste caso.
E assim damos nosso primeiro passo no HTML. Há muita coisa ainda para aprender, mas isso vai depender somente da sua (boa) vontade…
Na página a seguir há uma lista de tags comuns, e de links onde você poderá aprender muito mais sobre HTML. :-)
gostaria de saber se existe uma estrutura logica e seguencial no php assim como mostrou no html – primeiros passos.obrigado
Marcelo, o HTML 4 é uma linguagem de marcação (e exibção) e não de programação, por isso que esta é uma das poucos que tem uma estrutura (no sentido: esqueleto). O PHP e a maioria das linguagens de programação (para web) não fazem nada além de processar informações e “jogar” o resultado em forma de HTML para ser visto. O PHP tem sim uma estrutura lógica, mas é bem diferente do HTML. Visite o site php.net que fornece a documentaçao completa, e a maioria do conteúdo é também em português. :)
Comecei a estudar HTML agora,achei muito bom seu tuto. só tenho duvidas em relação a fazer o codigo no mac.
Comparado com outros tutoriais, é bem esclarecedor. Está de parabéns
Olá , Marcus achei super interessante o conteúdo posto por você a respeito de HTML , foi bastante esclarecedor .