Entendendo o que é HTML
A sigla HTML significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto). Tá mas o que isso quer dizer? Para entender o que ela faz é preciso primeiro entender o que é hipertexto. Basicamente falando, hipertexto é um texto, que faz referência a outros textos, através de links. Tudo que você vê num site é basicamente texto interpretado pelo seu navegador de internet.
Quando você acessa um site qualquer, nele há links para outras páginas e sites correto? Então, esse é um exemplo básico de hipertexto na prática. Quando falo que HTML é uma linguagem de marcação, é porque ela foi desenvolvida para marcar as partes de um texto ou documento para que ele seja exibido pelo seu navegador ou outro ambiente da forma adequada.
Aqui vai uma nota importante: se você possui um navegador de internet (provavelmente tem, caso contrário não estaria lendo este conteúdo) então possui o básico para começar a aprender e para colocar em prática a maioria dos conceitos que serão apresentados aqui.
Visualizando o código-fonte de uma página
Saindo da parte teórica, um documento HTML possui marcadores (afinal ela é uma linguagem de marcação), que indicam ao navegador como exibir informação ao usuário. Vamos ver isso na prática? Se você estiver em um computador ou notebook, abra uma página web qualquer e aperte a tecla F12, será aberto o modo desenvolvedor e será exibido o código-fonte da página. Caso não apareça, procure a opção "Elementos" ou clique no símbolo de tags (< />) para exibi-lo. O código-fonte é o texto marcado (neste caso), que originou a página que você está visualizando.
Como exemplo, acessei o blog da Mozilla que é a empresa responsável pelo navegador Mozilla Firefox, abaixo há uma imagem da página e o código fonte é somente um monte de texto demarcado por símbolos que o navegador compreende e traduz em elementos visuais (parágrafos, listas, fotos, vídeos etc...) e também sonoros (áudios) para nós. Aprenderemos futuramente como inserir tais elementos em nossos projetos.
 |
| Código Fonte do Blog Mozilla |
<!DOCTYPE html>
<html>
<head>
... aqui vai código que ajuda o navegador e motores de busca como o Google a exibir a nossa página, porém não é exibida como conteúdo pelo navegador
</head>
<body>
... aqui vai código que é interpretado e exibido como conteúdo pelo navegador
</body>
</html>
O que são tags?
Uma tag ou marcador serve para que o navegador ou outras ferramentas saibam como tratar o nosso texto, dando significado para ele. Em uma página html tudo é definido usando texto. No código fonte da página acima, a primeira coisa que vemos é chamada declaração DOCTYPE (tipo de documento), ela ajuda o browser (navegador) a saber qual o tipo de documento está sendo executado. Falaremos mais sobre isso futuramente, o importante é entender o motivo dessa declaração aparecer em documentos html e que precisamos lembrar de escrevê-la quando formos criar nossos projetos.
Partindo para a prática
Vamos aprender o restante na prática! Abra um editor de texto simples (por exemplo, Bloco de Notas ou NotePad++) e insira as seguintes informações:
<DOCTYPE html>
<html>
Olá Mundo!
</html>
Salve o documento em local de fácil localização, na área de trabalho, por exemplo, com qualquer nome que te agrade, o importante é que a extensão (a parte final que descreve o tipo de arquivo) seja .htm ou .html. Exemplo de nome para o arquivo: exemplo1.html
*É importante lembrar que o formato por padrão de arquivos do bloco de notas é o .txt (texto puro), portanto é necessário alterálo para .htm ou .html para que nosso navegador possa exibi-lo.
Se você salvou o documento na sua área de trabalho aparecerá um ícone do seu navegador com o nome do arquivo criado. Abra o arquivo. O seu navegador deve exibir o documento similar a isso:
Concluindo
O exemplo foi bem simples, usamos a declaração de tipo de documento antes de qualquer coisa e depois usamos as tags <html></html> que marcam o início e o fim do documento html para que o navegador saiba onde começar e onde terminar a interpretação do nosso documento. Porque escrevemos "Olá Mundo!" ? Há uma prática no meio da programação (alguns chamam de "maldição", mas é uma brincadeira), onde uma pessoa não é capaz de aprender qualquer linguagem se não conseguir escrever "Olá Mundo!" na tela.
Parabéns se você conseguiu. A página é muito simples e não está tecnicamente correta, mas o navegador é capaz de renderizá-la (exibi-la) somente com as informações que declaramos. Nas próximas postagens aprenderemos novas tags como <head> (cabeçalho) e <body> (corpo) para marcar nosso código mais corretamente. Ficou com alguma dúvida? O código não funcionou? Deixe seu comentário ou sugestão! Até a próxima!
.png "Blog Mozilla")
Comentários
Postar um comentário