Emanuel Andrade

27 de outubro de 2019

Desembaraçando a Web

Entra na sala o HTML5 – Parte 1

Desembaraçando a Web é uma série que irá percorrar o básico de como sites funcionam e como começar a escrever os seus próprios. Nesse episódio, veremos o básico do HTML

Desembaraçando a Web

Netflix, Facebook, Youtube. Sites são acessados todos os dias. Para trabalho, para estudo, para lazer. Parecem de outro mundo, parecem 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 de download do site para um servidor que está guardando os arquivos do mesmo. Ao receber, o navegador abre estes arquivos e os exibe em sua tela.

Mas… Que arquivos são esses?

Existem diversos possíveis arquivos, 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. Com ela vamos explicar para nosso navegador, 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:

comecando pelo word Desembaraçando a web parte 1

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.

marcando frase no word Desembaraçando a web parte 1

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.

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á:

demarcando o site Desembaraçando a web parte 1

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 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.

primeira visualizacao desembaraçando a web parte 1

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 <> e para fechar digite a mesma coisa mas com uma barra no início, </>.

Como queremos h1, ela ficará como

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

Sabemos também que o texto abaixo é um parágrafo simples, precisamos informar isto também. 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>
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>
auteenim exercitation sint consectetur cillum. Voluptate commodo minim do mollit et occaecat reprehenderit et. Occaecat mollit nisi tempor dolore exercitation dolor occaecat.
</p>

É importante notar que esta tag tem um valor muito maior que apenas deixar em negrito, o ideal seria colocar um texto em negrito por meio de estilização, que ainda veremos nessa série. Várias outras tags entram nesse ponto e farei um post específico sobre o assunto. Por enquanto podemos manter assim mesmo.

Agora iremos fazer uma maneira 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. Neste nosso caso, usarei uma lista não ordenada.

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

Irei organizar melhor para mostrar as relações entre tags mães e tags filhas, chamamos isso de Identação. Nesta etapa de desenvolvimento, o mais importante é que você não se perca no seu código. Gaste um tempo identando seu código, irá te salvar tempo no futuro quando precisar alterar algo.

<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 = e escreva seu conteúdo entre parênteses.

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="" alt="" />

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 seu nome e o arquivo ou iniciar com um “./” que seleciona a pasta atual que o arquivo que estamos escrevendo está.

<img src="logo.jpg" alt="" />

Por fim o Alt, manterei simples durante o tutorial. Mas é bom dedicar um tempo nele.

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

Faça o mesmo para o Banner

<img src="./banner.jpg" 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áginas, 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 em src das imagens. 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:

<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.jpg" 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.jpg" 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>
resultado final desembaraçando a web parte 1

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