Entra na sala o HTML5 – Parte 1

Entra na sala o HTML5 – Parte 1

Netflix, Facebook, Wikipedia, Youtube. Sites são acessados todos os dias. Para trabalho, para estudo, para lazer. Podem parecer de outro mundo ou inalcançáveis.

Nesta séries de postagens você vai começar a entender o que está por trás de uma página da internet depois que você clicou em seu link e começar a escrever suas próprias. Para isso, entra na sala o HTML. Veremos em breve o básico para que você crie seu primeiro site em HTML

Entendendo a Internet

A Rede Mundial de Computadores ou internet, é literalmente isso. Uma rede de computadores. No mundo todo.

Ao clicar em um link, o seu computador faz um pedido para um servidor que está guardando os arquivos do site e os envia para o navegador. Ao receber, o navegador abre estes arquivos e os exibe em sua tela. E existem diversos possíveis arquivos que você pode receber, irei abordar os mais fundamentais para um site ser exibido em sua tela.

O primeiro de todos é: O HTML, os tijolos da internet!

Apesar do nome clichê proposital, estou o chamando desse jeito em alusão a uma casa. O HTML é responsável pelos ‘blocos’ que irão estruturar seu conteúdo. Esse nome quer dizer Linguagem de Marcação de HyperTexto.

Ou seja, HTML não é uma linguagem de programação propriamente dita. Com ela vamos identificar qual parte do conteúdo é um parágrafo, qual parte é um título, um cabeçalho, etc…

Vamos começar pelo… Word?

Veja o que está nesta tela:

Antes de entregar esse trabalho você irá precisar explicar o que cada coisa é nesse contexto. Por exemplo, ‘Trabalho de Português’ é um título, ele poderia estar numa fonte maior e em negrito e para isso é só marcar a frase e aplicar as mudanças.

Estou falando em marcar, pois essencialmente, é isso que uma linguagem de marcação fará. O porém é que, por padrão, não haverá uma interface com botões e será necessário escrever na mão cada instrução para o texto marcado (e pode ficar tranquilo, nada de ABNT por aqui).

Ok, vamos pro HTML de verdade

Agora é hora de abandonar o word, já que ele insere formatação nos textos. Precisamos de um programa como o bloco de notas, que é apenas texto puro.

Vamos usá-lo para delinear o conteúdo que nosso site terá:

Nesse arquivo estamos dizendo que nosso site terá um logo, um menu de navegação, um banner, um título e por fim um parágrafo de texto.

Mas o arquivo está em .txt e precisamos de um em .html. Pra fazer isso, basta ir em "salvar como" no menu Arquivo e na hora de salvar, trocar .txt por .html no nome do arquivo. Seu site está começando a surgir.

Se abrirmos o arquivo em um navegador (clicando nele ou indo em Abrir com e escolher o seu navegador, no caso do Windows).

Podemos ver que tudo está jogado numa linha só. Nenhum daqueles espaços que existiam no bloco de notas estão aparecendo.

Está na hora de escrever html de verdade: Começando pelo texto, sabemos que “Nossos Produtos” é um título, para isso usaremos a tag h1. Que significa Heading 1 ou seja Título 1. Essa tag vai do h1 ao h6, sendo o h1 o título de maior importância e o h6 o de menor.

Uma tag se escreve usando sinais de maior que (>) e menor que (<) entre o nome da mesma, ela precisa ser aberta e fechada. Para abrir, digite <NOME_DA_TAG> e para fechar digite a mesma coisa mas com uma barra no início, </NOME_DA_TAG>.

Como queremos h1, ela ficará como

<h1>Título Escrito Aqui</h1>

Para ver a alterção no seu navegador, recarregue a página após salvar o arquivo.

Sabemos também que o texto abaixo é um parágrafo simples e precisamos informar isto. A tag da vez é a p, de parágrafo.

Precisamos inserir as quebras de linhas no texto, para isso usaremos outra tag chamada br, de Break Line ou Quebra de Linha.

E se eu quiser colocar algo em negrito? Escolha uma parte do texto e coloque dentro de uma tag chamado strong. Não tem problema em colocar uma tag dentro de outra tag.

<p>
  Primeiro parágrafo de um texto muito importante que você quer escrever
  <br /> 
  Este ainda é o primeiro parágrafo, apenas na linha abaixo.
  E para colocar em negrito <strong>Basta englobar a parte entre a tag Strong</strong>


  Perceba que mesmo eu quebreando linhas aqui no código (dentro da mesma tag "p"), no site o texto continua em apenas uma linha
</p>

É importante notar que esta tag tem um valor muito maior que apenas deixar em negrito. Ela tem um valor especial de dar maior ênfase ao trecho de texto para o html. Várias outras tags (como a h1, que não só aumentam o tamanho da letra) carregam semântica maior do que seus efeitos visuais (que podem ser sobrescritos com CSS, veremos em breve, sem perder esse significado). Farei um post específico sobre o assunto, mas por enquanto podemos manter assim mesmo.

Passando para o menu, precisamos que o navegador entenda que o hifen que colocamos antes de cada item do menu seja entendido como itens de uma lista

Existem 2 tipos de listas, as ordenadas e as não ordenadas suas tags são <ol> e <ul> de Ordered e de Unordered List, respectivamente. E cada item da lista precisa estar entre as tags <li> de List Item ou Item da Lista.

Usando <ol>, automaticamente os itens da lista estarão ordenados por números crescentes. Já com a <ul>, os itens apenas terão bolinhas (assim como é possível fazer no Word). Neste nosso caso, usarei uma lista não ordenada.

<ul>
<li>Página Inicial</li>
<li>Sobre Nós</li>
<li>Contato</li>
</ul>

Como disse mais cedo, não tem problema nenhum colocar tags dentro de outras tags. Na verdade, é o mais comum na maioria dos casos. Essas tags passam a ter certas relações entre si (principalmente quando estivermos vendo sobre Estilos). Para ajudar a visualizarmos melhor essas relações, é importante organizarmos nosso código. Chamamos isso de Identação.

Basicamente significa dar mais espaço entre o primeiro caractér de uma linha e a borda do arquivo. Por padrão podemos no basear na tecla Tab. O primeiro nível de tags você não precisa apertar tab, o segundo nível você aperta uma ver tab, no terceiro nível você aperta duas vezes tab e por aí vai. No caso da lista, o código ficaria assim:

<ul>
  <li>Página Inicial</li>
  <li>Sobre Nós</li>
  <li>Contato</li>
</ul>

Mais coisa pra escrever… Mas calma, é por um bom motivo

Agora iremos para algo mais complexo, a inserção de imagens. Para isso precisamos da tag <img> de Image ou Imagem mesmo. As coisas ficam mais complexas pois agora temos atributos para serem colocados e não temos uma tag </img> fechando. Img é uma tag que se fecha nela mesma, ficando assim: <img />.

Mas antes de fechar precisamos colocar os atributos, o primeiro é o src, de source, ou seja, origem. Nele você irá escrever o local do seu computador ou url de um site em que a imagem está. Para escrever um atributo, digite seu nome, no caso src, coloque um símbolo de igual = e escreva seu conteúdo entre parênteses duplos.

A tag img tem também o atributo Alt, que é um texto Alternativo que aparecerá quando a imagem não for carregada corretamente. Além disso, é esse o texto que Leitores de Tela utilizados por pessoas cegas tem acesso, é importante que esse texto seja descritivo o suficiente para quem não ver a imagem, ainda possa entender o seu site.

uma tag final de img fica:

<img src="/caminho/até/a/foto.jpg" alt="Texto descritivo sobre a imagem" />

Vamos colocar a imagem em si, ela precisa vir de um arquivo de imagem que está no seu computador ou servidor que estiver colocando os arquivos .html. É interessante que as imagens estejam na mesma pasta que o HTML ou colocar uma pasta ‘imagens’ dentro da pasta onde estão os html.

Se a imagem estiver na mesma pasta que o arquivo html, você pode apenas digitar o nome do arquivo. Caso esteja dentro de uma pasta, primeiro coloque o nome da mesta, seguido de uma barra /.

<!-- Imagem na mesma pasta -->
<img src="logo.png" alt="" />

<!-- Imagem em uma pasta "imagens" -->
<img src="imagens/logo.png" alt="" />

Isso que fiz acima das tags img se chama comentário e tem esse formato: Se inicia com <!-- e finaliza com -->. Tudo o que estiver dentro será ignorado pelo navegador e serve apenas para que você ou quem mais estiver trabalhando no projeto possa se organizar ou comunicar alguma coisa.

Nossas tags de logo e banner ficariam assim:

<img src="logo.png" alt="Logo da Empresa X" />

<img src="banner.png" alt="Banner do Produto Y" />

Abra novamente o arquivo ou recarregue a página já aberta. Veja que como estes arquivos de imagem ainda não existem, neste caso o texto do Alt aparecerá em seu lugar.

Agora que sabemos da existência de atributos, voltaremos no menu. Cada item da lista eventualmente deveria levar para outra página e podemos fazer isso com a tag <a>. Tudo que está dentro de uma tag a se torna um link para algum site ou página

Se passarmos o atributo href nela, podemos colocar qualquer url da internet ou nome de arquivo, como no atributo src das imagens. Para funcionar essas outras páginas precisam ter seu próprio arquivo HTML, por exemplo sobre.html e contato.html

Uma tag a poderia ser

<a href="contato.html">Contato</a>

Atualizando o Menu ficaria assim:

<!-- Perceba os níveis de identação das tags -->
<ul>
  <li>
    <a href="tutorial.html">Página Inicial</a>
  </li>
  <li>
    <a href="sobre.html">Sobre Nós</a>
  </li>
  <li>
    <a href="contato.html">Contato</a>
  </li>
</ul>

Você pode chamar seus arquivos html como preferir, como estou usando tutorial.html para a página inicial, mas o mais comum é vermos esta página inicial com o nome index.html.

E este é o resultado até o momento:

<img src="logo.png" alt="Logo da Empresa X" />

<ul>
  <li><a href="tutorial.html">Página Inicial</a></li>
  <li><a href="sobre.html">Sobre Nós</a></li>
  <li><a href="contato.html">Contato</a></li>
</ul>

<img src="banner.png" alt="Banner da Empresa X" />

<h1>Nossos Produtos:</h1>

<p>
  Ipsum laborum ullamco proident ut dolor magna eu cupidatat pariatur Lorem
  deserunt tempor amet. Irure sint occaecat elit eu. Ut anim laboris ut
  nostrud do duis nulla mollit ea occaecat labore aliqua.
  <br />
  <strong>Nisi culpa incididunt non proident enim proident</strong> aute
  enim exercitation sint consectetur cillum. Voluptate commodo minim do
  mollit et occaecat reprehenderit et. Occaecat mollit nisi tempor dolore
  exercitation dolor occaecat.
</p>

Por mais que nossa página esteja abrindo, esse código ainda não é suficiente. Existem diversas tags que não tem efeito visual, mas que são extremamente necessárias.

Continuaremos o assunto no próxmo post desta série: Desembaraçando a Web: Avançando no HTML.