HTML Básico

Objeto: conceitos fundamentais de HTML

Principais termos técnicos abordados: HTML, marca/tag, propriedade

Requisitos para as instruções funcionarem: editor de texto e navegador instalados

Requisitos para compreensão das instruções: nenhum

Como ler essa receita: instruções, dentro dos passos da receita e que requerem ação sua no computador, estarão escritas em cor azul. Comentários sobre os passos estarão em fonte normal, cor preta. Comandos, código-fonte, termos técnicos ou configuração explícita, estarão com fonte diferenciada.

Introdução

Crianças, um arquivo HTML é o que vamos fazer nessa receita.

E um arquivo HTML nada mais é que um arquivo de texto - um texto estruturado de forma a estabelecer uma hierarquia entre as diversas partes que o compõem.

Se pensarmos bem, quase todo texto convencional já é estruturado hierarquicamente.

Eu sei que vocês nunca pegaram num negócio desse, mas passem aí na biblioteca do campus, perguntem por um negócio chamado livro e tentem abrir um. Folheando as páginas, vocês provavelmente compreenderão que um determinado texto que vêem está dentro de um parágrafo, que por sua vez deve estar dentro de uma seção, que por sua vez está dentro de um capítulo que por sua vez está dentro do livro. Se forem um pouco espertos, verão que o livro pode ter vários capítulos que pode ter vários parágrafos e seções, e que estas podem ter também vários parágrafos e outras seções dento de si. O único cara que não se repete nessa brincadeira e que não está subordinado a ninguém e que não tem ninguém ao seu lado e que tem todo o conteúdo, direta ou indiretamente, subordinado a si é o tal do livro.

Ou seja, tudo começa no livro.

Parece com Jesus, Alá ou com o Big Bang.

Mas, para a gente da computação, parece mesmo uma estrutura hierárquica chamada árvore.

O livro seria a raiz.

Pois bem, é basicamente isso que um arquivo HTML é. Um texto estruturado, um texto que descreve uma hierarquia. Não uma hierarquia meramente de capítulos, seções, parágrafos e outros elementos textuais.

Uma hierarquia mais ampla, uma hierarquia de, essencialmente, elementos de interface gráfica - imagens, vídeos, tabelas e, claro, parágrafos, seções e tudo o mais.

Estes diversos elementos da hierarquia são descritos pelo que chamamos de marcas. Ou, no inglês, tags.

As marcas são escritas entre os sinais <>, como as marcas <html> ou <img>, e elas precisam de uma marca complementar para "fechá-las". As marcas complementares se escrevem replicando a marca de abertura, mas com uma / antes do nome da marca, por exemplo </html> e </img>.

Assim, tudo o que estiver dentro das marcas <html> e </html> estará subordinado à marca, e isso valerá para todas outras marcas dentro da marca <hmtl>. Isso nos dará nossa hierarquia de componentes gráficos que será exibida para nós no navegador.

- Sim, professor, mas eu mermo nunca vi esses bicho com < e > não, e eu vivo na Internet usando o nevegador...

Correto. É que a gente realmente não vê, mas o navegador vê. Essencialmente, o que o navegador recebe quando você acessa cotidianamente o xvideos é um texto HTML descrevendo essa hierarquia de componentes. Mas é realmente um texto, e não os componentes gráficos a que você passa o dia assistindo. Sendo que o navegador processa esse texto, interpretando as diversas marcas, criando os elementos gráficos correspondentes de interface com o usuário e exibindo esses componentes gráficos, para a sua alegria.

- Ah, sim. Viva o navegador, então.

E se você quiser conferir o texto HTML que o navegador recebeu e cujo processamento gerou a página que você vê, você pode clicar com o botão direito sobre a página e selecionar alguma opção parecida com "Exibir o código-fonte da página". A gente vai precisar aprender a fazer programas que geram esse tipo de código HTML, porque é o que o navegador compreende. Mas, para isso, é interessante aprender o básico do HTML em si.

É o que vamos fazer, inicialmente. Vamos escrever um texto HTML num editor de texto, salvá-lo, abri-lo com o navegador e tentar entendê-lo.

Passo 1

Num editor de texto de sua preferência (pode ser o Bloco de Notas, mas tente usar um ambiente de programação), escreva o conteúdo a seguir e salve o arquivo como intex.html (ou qualquer outro nome, desde que a extensão seja .html):

<!DOCTYPE html>

<html>

</html>

Aqui temos um html vazio. Note que a marca <!DOCTYPE html> foge um pouco do padrão, pois não tem marca de fechamento correspondente e não está abaixo da marca <html>. Digamos que seja uma marca especial, que provê ao programa que for interpretar o que vem em seguida a informação de que o texto segue o padrão HTML5. Nossa hierarquia, propriamente dita, se inicia mesmo com a marca <html>, devidamente fechada por </html>.

Mas não há nada dentro de nossa marca html. Vamos mudar isso.

Passo 2

Acrescente as seguintes marcas dentro da marca <html>:

<!DOCTYPE html>

<html>

<body>

<h1>Uma trova...</h1>

<p>

Eu só preciso de hoje

</p>

</body>

</html>

Salve o arquivo, abra-o dando 2 cliques sobre ele no gereniador de arquivos (ou na forma que seu ambiente de codificação permitir).

Você deve ver algo mais ou menos assim:

Essa marca <body> é o corpo da página. Dentro desta marca, arranjamos nossos elementos visuais, nossas outras marcas. Há elementos não visuais também, mas isso fica pra outro momento. Dentro do <body> temos duas marcas - a marca <h1> representa um cabeçalho textual e a marca <p> um parágrafo. Perceba que o texto exibido a partir do processamento do <p> tem fonte menor e sem negrito.

Mas faltam 3 versos para completar uma trova, que é uma estrofe de 4 versos, cada um deles com 7 sílabas poéticas...

Passo 3

Edite o arquivo html e deixe-o com o seguinte conteúdo:

<!DOCTYPE html>

<html>

<body>

<h1>Uma trova...</h1>

<p>

Eu só preciso de hoje

Pra viver e ser feliz

O passado já me foge

E o futuro nada diz!

</p>

</body>

</html>

Salve o arquivo e recarregue a página no navegador.

O resultado talvez não seja o que a gente espera...

Como podemos ver, o navegador exibiu as linhas uma atrás da outra e não uma abaixo da outra como a gente escreveu no código html e como a gente espera ler em versos.

Acontece que, se a gente olhar o código html, a gente indicou que existe apenas um parágrafo. Porque só há uma marca <p> lá. O navegador vai ignorar nossas "puladas de linha" dentro da marca <p> e montar todas as linhas num só parágrafo.

A solução mais óbvia é escrever 4 marcas <p>, uma para cada verso.

Passo 4

Edite o arquivo html para que fique com o seguinte conteúdo...

<!DOCTYPE html>

<html>

<body>

<h1>Uma trova...</h1>

<p>

Eu só preciso de hoje

</p>

<p>

Pra viver e ser feliz

</p>

<p>

O passado já me foge

</p>

<p>

E o futuro nada diz!

</p>

<br/>

<p>

Autor: Francisco Borges

</p>

</body>

</html>

Agora teremos algo mais apresentável...

Note que, para o navegador, são 4 "parágrafos" e não 4 versos, mas a forma do navegador processar e exibir parágrafos serve a nosso propósito. Note também que há um espaço maior entre o último verso e o nome do autor, que acrescentamos agora. Isso se deve à marca <br/>, que indica para o navegador saltar uma linha. Perceba que poderíamos escrever <br></br>, mas é comum, em marcas que não têm conteúdo dentro de si, que escrevamos abreviadamente a marca de abertura e a marca de fechamento numa só, como é o caso de <br/>. A gente pode usar o <br/> em outros lugares. Dentro de um <p>, por exemplo, para forçar uma linha dentro do parágrafo. Assim, o verso que escrevemos com 4 marcas <p> poderia efetivamente ser escrito com uma marca <p> contendo várias marcas <br/> dentro de si...

<p>

Eu só preciso de hoje<br/>

Pra viver e ser feliz<br/>

O passado já me foge<br/>

E o futuro nada diz!<br/>

</p>

- E qual é a opção melhor, professor?

A que quem pediu para você fazer a página achar mais bonita. No caso de versos, eu, particularmente, prefiro o uso de <br/> dentro do <p>, pois os versos ficariam mais próximos uns dos outros. Eu usaria um <p> para cada estrofe, e não para cada verso (claro, aqui temos apenas uma estrofe). Mas isso, como diz o matuto, varêia. Se quiser, teste essa segunda opção e decida por si.

Por enquanto vamos testar outras marcas.

Passo 5

Que tal acrescentar à página uma imagem que tenha alguma coisa a ver com versos?

Modifique o código html...

<!DOCTYPE html>

<html>

<body>

<h1>Uma trova...</h1>

<p>

Eu só preciso de hoje<br/>

Pra viver e ser feliz<br/>

O passado já me foge<br/>

E o futuro nada diz!<br/>

</p>

<br/>

<p>

Autor: Francisco Borges

</p>

</body>

</html>

Note que acrecentamos uma marca <img>. Claro que essa marca vai ser processada e exibida como uma imagem na página, o nome diz tudo. Sobre a forma de escrever a marca, em si, há uma coisa que já sabemos e outra que ainda não sabemos.

A que já sabemos é que, como não tem nada "dentro" da marca, podemos abrir e fechar a marca de uma lapada só, como fizemos com a marca br. Assim, aquela / logo na marca de abertura indica que estamos abrindo e fechando a marca ali entre aqueles sinais <>, e que não haverá, claro, nenhuma outra marca ou texto dentro dela.

- Ah, professor, e essa ruma de coisa que tá escrita aí, não tá dentro da marca img não.

Na verdade, não, e essa é a coisa que ainda não sabemos..

Essas informações ali descritas são chamadas de propriedades da marca e não devem ser confundidas com o conteúdo da marca, que é o que vem após uma marca de abertura e antes de uma marca de fechamento - a marca <img>, por exemplo, está contida no <body>, assim como a marca <h1> e as marcas <p>. Mas a marca <img> não tem conteúdo, não tem filho, não tem nada hierarquicamente abaixo de si.

Tem, entretanto, propriedades, e ainda que as propriedades não sejam conteúdo elas afetam o processamento da marca pelo navegador. A propriedade src, por exemplo, é essencial. Ela indica onde o navegador deve ir buscar o arquivo da imagem a ser renderizada. Isso pode ser um caminho para um arquivo local, mas pode ser também uma URL, como foi no nosso caso.

Salvando e recarregando a página, teremos algo como...

As proporções dos elementos, nitidamente, não estão boas. A imagem está grande demais em relação ao texto.

Você pode resolver isso, claro, modificando a imagem para uma resolução menor.

Ou pode ser mais esperto e descobrir se há mais alguma propriedade na marca img que possa redimensional a largura da imagem.

Vamos modificar o código...

<!DOCTYPE html>

<html>

<body>

<h1>Uma trova...</h1>

<p>

Eu só preciso de hoje<br/>

Pra viver e ser feliz<br/>

O passado já me foge<br/>

E o futuro nada diz!<br/>

</p>

<br/>

<p>

Autor: Francisco Borges

</p>

</body>

</html>

Adicionamos a propriedade width à marca img, atribuindo-lhe o valor de 200. Em pixels, nesse caso pois omitimos a unidade da largura. Há outras unidades possíveis, no entanto. Definida a largura dessa forma, sem uma altura fixa, o navegador processa a altura proporcionalmente à largura estabelecida, evitando distorções na imagem.

Agora teremos algo mais agradável aos olhos...

Há uma propriedade para definir a altura também, claro, e muitas outras propriedades, e propriedades diferentes para marcas diferentes significando coisas diferentes. Todas essas marcas e respectivas propriedades estão documentadas, evidentemente, e a gente não pode depender de um professor ou quem quer que seja para achar a documentação de uma marca qualquer. Nesse caso, pesquisando html img tag você deve encontrar a documentação da marca img. Procedimento de pesquisa análogo pode ser utilizado para qualquer outra marca.

Para saber mais

Introdução ao html.

Documentação de tudo quanto é marca html.

Exercícios

Ponha um título na sua página. Pesquise por html page title tag
Escreva, após os versos, uma tablela html com ao menos 2 colunas, uma coluna sendo um nome de bebida, outra sendo o preço. Pesquise html table tag
Tente 'bonitificar' sua tabela. Pesquise por html fancy tables
Escreva duas tabelas, uma ao lado da outra. Pesquise por html side by side tables
Faça links para outras páginas. Pesquise html links howto.
Faça com que os links abram numa aba diferente da aba que exibe a página. Pesquise html a tag new window

Google Sites

Report abuse