Hoje, com a chegada do HTML5, o Javacript ganhou ainda mais poder, além da vantagem de rodar em qualquer navegador, qualquer sistema operacional, e mesmo em smartphones e outros dispositivos móveis. Por isso, este curso visa ensinar desde os fundamentos do Javascript até alguns exemplos mais elaborados.
Como o Javascript é executado dentro de uma página HTML, é preciso iniciarmos com os fundamentos dessa linguagem.
HTML significa HyperText Markup Language, ou Linguagem de Marcação de HiperTexto (o que, francamente, não ajudou muito, né?). Hipertexto significa um texto enriquecido, com fotos, vídeos, etc. Exatamente o que vemos na maioria das páginas da Internet. A linguagem de marcação marca as diferentes partes da página: onde o texto começa e onde termina, como deve ser formatado, onde se inserem as figuras e como devem aparecer (reduzidas, ampliadas, alinhadas à direita, à esquerda ou centralizadas, etc).
Essa marcação é feita com tags ou identificadores que sempre aparecem entre os sinais de menor que (<) e maior que (>). Assim: <tag1> <outra tag> <etc>
Uma página HTML bem simples é apresentada abaixo:
<html lang='BR'>
<head>
<meta charset='UTF-8'>
<title>Nome da página</title>
</head>
<body>
<p style='text-align:center'>Texto no meio da página</p>
</body>
</html>
As tags usadas, em ordem, são:
<html> marca a página toda.
<head> marca o cabeçalho.
<meta> e <title> estão dentro do cabeçalho.
<body> vem após <head>
<p> está dentro de <body>
Repare que a maioria das tags aparece duas vezes, uma vez com o nome da tag (indicando seu início), e depois com uma barra / antes do nome (indicando seu término).
<html> e </html> indicam o início e o fim da página. Tudo o que estiver entre essas tags será interpretado pelo navegador como uma página HTML.
<head> e </head> indicam o cabeçalho. Aqui entram informações como o título da página (tudo que está entre <title> e </title>) e o conjunto de caracteres mostrado (charset = UTF-8, é o que permite que acentos do português (ã, â, à, á, é, ó, ô, ç...) e símbolos de outros idiomas (Щ ɖ Ə Ɛ Ą ą Δ δ א ب ਠੱ ଐ ଠୗ ⬄ ⬍ ⶆ あ 가 館) apareçam corretamente na maioria das máquinas. (Se você não conheceu a época antes do UTF-8, nem queira!)
Isso pros caracteres. O idioma é especificado na própria tag <html>, sendo usado por leitores automáticos e ferramentas de busca, entre outros.
<body> e </body> indicam o corpo do texto, ou seja, a parte principal da página, que aparece dentro da janela do navegador.
<p> e </p> indicam um parágrafo, que aqui está formatado para aparecer centralizado na tela (text-align: center).
Algumas tags aparecem sozinhas, como <hr>, que cria uma linha horizontal (Horizontal Row) separando seções da página. Não é necessário (nem permitido) usar </hr> depois dessa tag.
Exercícios
1. Copie o código acima (desde <html...> até </html>) e cole num arquivo texto. Arquivos texto são arquivos feitos não no Word, mas em processadores de texto mais simples, como o Bloco de Notas (Notepad) ou Notepad++. Salve o seu arquivo como aula0.html. O número zero após aula indica que esta é a aula antes da primeira aula, pois ainda não inserimos nenhum Javascript.
É uma boa ideia baixar o Notepad++, um programa leve e gratuito que, além de colorir o código à medida que o escrevemos, facilitando a leitura, também permite um maior controle sobre a codificação - o UTF-8 (acima) que permite que acentos e caracteres especiais sejam reconhecidos em qualquer máquina. Isso se você estiver usando Windows. No Linux, há várias opções disponíveis, como Geany e BlueFish.
2. Utilize um ou mais navegadores de Internet (Firefox, Chrome, Internet Explorer...) para abrir a página recém-criada. Se você enxergar o "Texto no meio da página" solitário centralizado no alto da tela, parabéns! Está tudo funcionando. Você pode deixar o Notepad++ aberto para fazer modificações no código fonte (o código HTML), salvando e depois, no navegador, apertando a tecla F5 para observar as mudanças. Experimente inserir outros parágrafos <p> e </p> depois do parágrafo inicial, e colocar alguns <hr> entre eles. Por exemplo:
<p style='text-align:center'>Texto no meio da página</p>
<hr>
<p style='text-align:left'>Segundo parágrafo</p>
<hr>
<p style='text-align:right'>Conclusão</p>
Repare que o alinhamento dos parágrafos também foi modificado. Fique à vontade para mudar o texto, o título da página, a formatação. Experimente também eliminar alguns elementos (como a formatação, o charset, o título...) para ver o que acontece.
Qualquer dúvida, é só deixar um comentário. Responderemos assim que possível. Bom experimento!
Nenhum comentário:
Postar um comentário