Tutorial Âncoras e Imagens | HTML & CSS é Difícil

No capítulo anterior cobrimos alguns elementos da HTML bem importantes, mas nós só construímos uma única página web. Os links e imagens são fundamentalmente diferentes daqueles elementos porque eles tratam de recursos (imagens e outras páginas web) externos.

Diagrama: imagem apontando para elemento <img> em uma página web e ligação HTML apontando de uma página para outra

Para usar links e imagens, também precisamos aprender sobre outro componente da sintaxe da HTML: os atributos. Os atributos vão apresentar um mundo completamente novo de possibilidade para as nossas páginas web.

Neste capítulo, vamos criar uma página web composta de várias outras páginas em HTML com documentos e arquivos de imagens. Vamos chamar de Links e Imagens, mas o tema central deste capítulo gira em torno da organização de pastas e arquivos que compõem uma página web. Assim que começarmos a trabalhar com vários arquivos, vamos descobrir a importância de ser um desenvolvedor web organizado.

Configuração

Este capítulo é todo sobre a ligação entre páginas web, desta forma vamos precisar criar alguns arquivos HTML antes de iniciar o desenvolvimento de qualquer coisa. Vamos trabalhar com três páginas web separadas neste capítulo, juntamente com alguns arquivos de imagem em diferentes formatos:

Diagrama: os 7 arquivos para este projeto (3 arquivos HTML, 4 arquivos de imagens)

Para começar, vamos criar uma nova pasta chamada links-and-images para armazenar todos os nossos arquivos. Você consegue fazer isso pelo Atom usando o mesmo processo que utilizamos para criar a pasta e o arquivo no capítulo anterior, Introduction.

Página Links

Depois de criar uma nova pasta, vamos criar um arquivo chamado links.html dentro dela e usaremos o seguinte código HTML. Isso já deve ser familiar para você do capítulo anterior.

<!DOCTYPE html>
<html>
  <head>
    <title>Links</title>
  </head>
  <body>
    <h1>Links</h1>
  </body>
</html>

Página Imagens

Na mesma pasta, crie outro arquivo chamado images.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Imagens</title>
  </head>
  <body>
    <h1>Imagens</h1>
  </body>
</html>

Páginas Extras

Nossa última página nos ajudará a demonstrar ligações relativas. Crie uma nova página em links-and-images chamada misc, e então adicione um novo arquivo chamado extras.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Extras</title>
  </head>
  <body>
    <h1>Extras</h1>
  </body>
</html>

Você pode criar um nova pasta no Atom clicando com o botão direito no painel do navegador de arquivos e selecionar Nova pasta no menu de contexto. A vida fica melhor quando você não precisa deixar seu editor de texto para abrir o gerenciador de arquivos.

Baixar as Imagens

Iremos inserir chamadas das imagens no nosso arquivo images.html, então tenha certeza de que baixou essas também imagens de mochi de exemplo. Descompacte-as na sua pasta links-and-images, mantenha a pasta images do arquivo compactado. Seu projeto deve parecer como a seguir:

Captura de tela: Navegador de arquivos do Atom depois de criar os arquivos de exemplo

Âncoras

Links são criadas com o elemento <a>, que significa “âncora”. Funciona como todos os outros elementos do capítulo anterior: quando delimita algum texto na etiqueta (tag) <a>, ele muda o significado do conteúdo. Vamos dar uma olhada adicionando no seguinte parágrafo do elemento <body> do links.html:

<p>Este exemplo é sobre links e <a>imagens</a>.</p>

Se você carregar a página no navegador irá notar que o elemento <a> não parece como um link, afinal. Sim, infelizmente, o elemento <a>sozinho não faz muita coisa.

Ligações

Da mesma forma que um elemento adiciona significado a conteúdo que o contém, um atributo HTML adiciona significado ao elemento ligado a ele.

Diagrama: Atributo HTML junto a um elemento HTML, que é definido ao conteúdo puro

Elementos diferentes permitem o uso de diferentes atributos, e você pode verificar na MDN para detalhes sobre quais elementos aceitam quais atributos. Neste momento, estamos preocupados com o atributo href porque ele determina para onde o usuário vai quando ele clicar em um elemento <a>. Atualize seu link para parecer como o seguinte: element. Update your link to match the following:

<p>Este exemplo é sobre links e <a href='images.html'>imagens</a>.</p>

Note como os atributos estão dentro da etiqueta de abertura. O nome do atributo vem primeiro, depois um sinal de igual, e entre aspas simples o “valor” do atributo. Essa sintaxe distingue atributos de conteúdos (que vão entre as etiquetas).

O parte da informação provida pelo atributos href diz ao navegador que esse elemento <a> é na verdade um link, e deve renderizar o conteúdo em seu texto padrão azul:

Página web com um link <a href> azul nele

Ligações Absolutas, Relativas, e Raiz-Relativa

Agora que estamos trabalhando com ligações, precisamos entender como uma página web é estruturada. Para os nossos propósitos, uma página web é um amontoado de arquivos HTML organizados em pastas. Para referenciar esses arquivos dentro de outros arquivos, a Internet utiliza os “Localizadores de Recursos Uniformes” (URLs). Dependendo do que você está se referindo, as URLs podem assumir diferentes formas. Os três tipos de URLs quais iremos trabalhar estão listados abaixo:

Diagram: absolute links (pointing to other website), relative links (pointing to other page in same website), and root-relative links (pointing to other page in same site via its domain)

Ligações absolutas, relativas, e raiz-relativas se referem aos valores que o atributo href pode conter. As próximas seções irão explicar como e quando devemos usar cada um deles. Mas primeiro, vamos adicionar o conteúdo a seguir ao nosso arquivo links.html:

<p>This particular page is about links! There are three kinds of links:</p>

<ul>
  <!-- Add <li> elements here -->
</ul>

Ligações Absolutas

Ligações “absolutas” são a forma mais detalhada que você pode usar para se referir a um recurso na web. Elas começam com o “esquema” (scheme) (tipicamente http:// ou https://), seguidos pelo nome do domínio da página web, e por fim o caminho do alvo na página.

Diagram: scheme (https://), domain (developer.mozilla.org), path (/en-us/docs/web/html)

Por exemplo, tente criar um link de referência para o elemento HTML da Mozilla Developer Network:

<li>Links absolutos, como o da
    <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla
    Developer Network</a>, que é uma boa referência para desenvolvedores web.
    </li>

É possível utilizar ligações absolutas para referenciar páginas no seu próprio site, mas usar o nome do domínio em todos os lugares pode trazer problemas em algumas situações. Usualmente utilizamos ligações absolutas quando queremos redirecionar o usuário para uma página web diferente, fora do seu domínio.

Diagram: absolute link pointing from our web page to another website

Ligações Relativas

Ligações “relativas” apontam para outro arquivo dentro da sua página web com a vantagem de apontar para o arquivo que você está editando. Está implícito que o esquema e o nome de domínio são os mesmos como os da página atual, então a única coisa que você precisa é providenciar o caminho.

Aqui está como nós podemos ligar nosso arquivo extras.html de dentro de links.html:

<li>Ligações relativas, como na nossa <a href='misc/extras.html'>página extras
    </a>.</li>

Neste caso, o atributo href representa o caminho do arquivo extras.html a partir do arquivo links.html. Como o extras.html não está na mesma pasta de links.html, precisamos incluir a pasta misc na URL.

Diagram: relative link pointing from one page in our website to another one

Cada pasta e arquivo no caminho é separado por uma barra (/). Então, se quisermos tentar acessar um arquivo que está duas pastas abaixo da arquitetura de pastas, precisamos de um caminho na URL como esse:

misc/other-folder/extras.html

Pastas mães

Isso funciona para referências a arquivos que estão na mesma pasta ou em níveis abaixo da pasta mãe de onde o arquivo original está. E como fazemos ligações com páginas que estão em níveis de diretório acima do arquivo original? Vamos tentar criar ligações relativas de links.html e images.html a partir do nosso arquivo extras.html. Adicione isso ao extras.html:

<p>This page is about miscellaneous HTML things, but you may
   also be interested in <a href='links.html'>links</a> or
   <a href='images.html'>images</a>.</p>

Quando você clica em qualquer uma dessas ligações em um navegador web, ele vai reclamar que a página não existe. Examinando bem a barra de navegação, você irá descobrir que o navegador está tentando acessar misc/links.html e misc/links.html— ele está olhando na pasta errada! Isso acontece porque nossas ligações são relativas a localização do arquivo extras.html, que está na pasta misc.

Diagram: attempting to link to the wrong HTML page due to a missing parent reference

Para corrigir isso, precisamos usar a sintaxe de dois pontos consecutivos (..) no caminho de um arquivo que representa o apontamento para uma pasta mãe, ou seja, uma pasta acima da posição do arquivo original que está sendo editado:

<p>This page is about miscellaneous HTML things, but you may also be
   interested in <a href='../links.html'>links</a> or <a
   href='../images.html'>images</a>.</p>

Isso é como dizer “Eu sei que o extras.html está na pasta misc. Suba um nível nas pastas e procure por links.html e images.html lá.”

Diagram: linking to the correct HTML page after adding parent reference

Para navegador em múltiplos níveis acima, use múltiplas referências com os .., como a seguir:

../../elsewhere.html

Ligações relativas são bacanas, porque elas permitem que você se mova entre as diferentes pastas sem que seja necessário atualizar todos os atributos href nos elementos <a> das suas páginas, mas eles podem ser um pouco confusos quando todas as ligações começam com muitos pontos. Elas são boas para referenciar recursos na mesma pasta ou em uma seção específica da sua página web.

Por exemplo, todas as imagens de HTML & CSS é Difícil são carregadas com ligações relativas (já vamos aprender a como usar imagens). Isso nos permite renomear qualquer um dos nossos capítulos sem precisar atualizar todos os caminhos das imagens.

Ligações Raiz-Relativa

Ligações “raiz-relativa” são similares as ligações relativas da seção anterior, mas ao invés de serem relativas a página atual, elas são relativas a base da página web, ou seja, normalmente do index.html. Exemplo, se sua página web está hospedada no domínio our-site.com, todas as URLs raiz-relativas serão relativas a our-site.com.

Diagram: a link from one web page in our site traveling through our domain, then to another page in our site

Infelizmente, tem um problema nessa nossa discussão de ligações raiz-relativa: tudo que iremos fazer nesse momento utiliza arquivos HTML locais ao invés de páginas web hospedadas em um servidor web. Isso significa que nós não conseguiremos experimentar ligações de raiz-relativa. Mas, se nós tivéssemos um servidor real, a ligação para a nossa página se pareceria como isso:

<!-- Isso não irá funcionar para nossos arquivos HTML locais -->
<li>Root-relative links, like to the <a href='/'>home page</a> of our website,
    but those aren't useful to us right now.</li>

A única diferença entre uma ligação raiz-relativa e uma ligação relativa é que a referência inicia com uma barra. Essa barra inicial representa a raiz da nossa página web. Você pode adicionar mais pastas e arquivos ao caminho depois dessa barra inicial, assim como ligações relativas. O caminho a seguir irá funcionar corretamente não importa onde a atual página estiver localizada (mesmo se estivesse em misc/extras.html):

/images.html

Ligações raiz-relativa são os tipos de ligações mais úteis. Elas são explícitas o suficiente para evitar uma potencial confusão de ligações relativas, mas não são tão explícitas quando ligações absolutas. Você verá muitas delas na sua carreira de desenvolvedor web, especialmente em grandes páginas web onde é difícil manter a localização de referências relativas.

Alvos de Ligações

Atributos alteram o significado de elementos HTML, e algumas vezes você precisa modificar mais de um aspecto de um elemento. Por exemplo, elementos <a> também aceitam o atributo target que define onde a página será exibida quando um usuário clicar sobre a ligação. Por padrão, a maioria dos navegadores carregam a página destino na mesma janela da página atual. Nós podemos utilizar o atributo target para pedir que o navegador abra a ligação em uma nova janela/aba.

Tente alterar nossa ligação absoluta no arquivo links.html para ficar como o seguinte. Preste atenção em como o segundo atributo se parece como o primeiro, mas eles são separados um do outro por um espaço (ou uma nova linha):

<li>Absolute links, like to
    <a href='https://developer.mozilla.org/en-US/docs/Web/HTML'
       target='_blank'>Mozilla Developer Network</a>, which is a very good
       resource for web developers.</li>

O atributo target tem alguns valores já pré-definidos que tem um significado especial para os navegadores, mas o mais comum é o _blank, que representa uma nova aba ou janela. Você pode ler mais sobre na MDN. The target attribute has a few pre-defined values that carry special meaning for web browsers, but the most common one is _blank, which specifies a new tab or window. You can read about the rest on MDN.

Convenção de Nomes

Você deve ter notado que nenhum dos nossos arquivos ou pastas tem espaços no seus nomes. Isso é de propósito. Espaços em URLs requerem de um tratamento especial e devem ser evitados a todo custo. Para ver o que estamos falando, tente criar um novo arquivo na pasta links-and-images do projeto, chamada spaces are bad.html. Adicione um pequeno texto a ela, depois abra-o em seu navegador de preferência (o Firefox trapaceia e preserva o espaço).

links-and-images/spaces%20are%20bad.html

Na barra de endereço, você verá que os espaços foram substituídos por %20, como mostrado acima. Espaços não são permitidos em URLs, e essa é a codificação especial utilizada para representá-los. Ao invés de espaço, você deve sempre utilizar um hífen, como temos feito em todo esse tutorial. É também uma boa ideia sempre usar caracteres em minúsculo, para manter a consistência.

Note como tem uma conexão direta entre os nomes de pastas/arquivos e a URL para a página que ela representa. Os nomes das nossas pastas e arquivos determinam o caminho para nossa página web. Eles são visíveis para o usuário, o que significa que você deve se esforçar para nomear seus arquivos assim como você se esforça para criar o conteúdo que o contém.

Essas convenções de nomes são aplicadas a todos os arquivos na sua página—não só nos arquivos HTML. Arquivos CSS, de JavaScript, e imagens devem evitar espaços e devem manter consistências na sua capitalização, ou seja, uso de maiúsculas.

Imagens

Diferentemente de todos os elementos HTML que encontramos até agora, as imagens são conteúdos definidos fora da página web que a renderiza. Felizmente para nós, já temos uma forma de referenciar conteúdos externos ao nosso documento HTML: URLs absoluta, relativa e raiz-relativa.

Imagens são incluídas nas páginas web através do elemento <img/> e seu atributo src, que apontam para um arquivo de imagem que você deseja apresentar. Note que ele é um elemento vazio, assim como <br/> e <hr/> do capítulo anterior (Não adicione isso ao nosso projeto ainda. Vamos tratar primeiro de exemplos concretos na próxima seção).

<img src='alguma-imagem.jpg'/>

Telas do tipo FullHD e de dispositivos móveis fazem o tratamento de imagens um pouco mais complicado do que a velha e boa etiqueta <img/>. Nós vamos deixar essas complexidades para o capítulo de Imagens Responsivas desse tutorial. Tenha certeza de verificar os elementos <figure> e <figcaption> no capítulo de Semântica HTML.

Nesse momento, vamos focar nos vários formatos de imagens que temos na Internet.

Formatos de Imagens

Existem 4 principais formatos de imagens em uso na web, e todos são desenvolvidos para coisas diferentes. Entender seus propósitos ajuda a melhorar a qualidade de páginas web.

Diagram: JPG, GIF, PNG, and SVG example images

Nas próximas seções vamos caminhar através dos casos de usos para cada tipo de formato de imagens. Garanta que você descompactou essas imagens de mochi na sua pasta links-and-images do projeto antes de seguir adiante.

Imagens JPG

Imagens JPG foram desenvolvidas para tratar uma grande paleta de cores sem aumentar muito o tamanho do arquivo. Isto torna esse tipo de imagem perfeita para fotografias e imagens com uma grande quantidade de gradientes nelas. Mas em outros casos, JPGs não permitem pixels transparentes, que você pode ver na borda branca da imagem abaixo se você prestar bastante atenção:

a mochi in a transparent bubble that has a gradient on it

Insira essa imagem mochi.jpg na nossa página images.html com o trecho de código abaixo (isso também irá incluir um pouco de navegação para as nossas outras páginas):

<p>Esta página trata dos formatos comuns de imagens utilizadas na Web, mas você também pode estar procurando por <a
   href='links.html'>links</a> e <a href='misc/extras.html'>
   extras</a>.</p>

<h2>JPGs</h2>

<p>Imagens JPG são boas para fotos.</p>

<img src='images/mochi.jpg'/>

Imagens GIF

GIFs são boas opções para simples animações, mas a troca é que são limitadas de alguma forma em termos de cores—nunca use-os para fotos. Pixels transparentes são opções binárias para GIFs, isso significa que você não pode ter pixels opacos. Isso torna difícil obter altos níveis de detalhamento em fundos transparentes. Por essa razão, é normalmente uma opção melhor usar imagens PNG se você não precisar de animação.

Você pode adicionar esse carinha ao nosso arquivo images.html com o trecho de código abaixo:

<h2>GIFs</h2>

<p>GIFs são bons para animações.</p>

<img src='images/mochi.gif'/>

Imagens PNG

PNGs são ótimas para qualquer coisa que não seja uma foto ou animação. Para fotografias, um arquivo PNG com a mesma qualidade (perceptível ao olho humano) geralmente será muito maior que um arquivo JPG equivalente . No entanto, elas trabalham bem com opacidade, e não tem limitações de paletas de cor. Isso torna elas perfeitas para ícones, diagramas técnicos, logotipos, etc.

Vamos adicionar essa imagem PNG ao nosso projeto exemplo:

<h2>PNGs</h2>

<p>PNGs são bons para diagramas e ícones.</p>

<img src='images/mochi.png'/>

Imagens SVG

Diferente das imagens baseadas em pixel, apresentadas anteriormente, o SVG é um formato gráfico baseado em vetor, isso significa que você pode redimensionar para qualquer tamanho sem perder qualidade. Essa propriedade torna a imagem SVG perfeita para um design responsivo. Elas são boas opções para praticamente todos os casos onde são usadas PNGs, e você deve utilizá-las em qualquer situação que você possa.

SVG image with crisp edges compared to a pixelated PNG image

Essas imagens com dimensões de 300x300 pixels, são imagens com dimensões de 100x100 originalmente, mas ao dimensionar elas se diferenciam muito entre si. Note as linhas nítidas e limpas da imagem SVG à esquerda, enquanto a imagem PNG na direita está agora muito pixelada.

Mesmo sendo um formato de vetor, as imagens SVGs podem ser utilizadas exatamente como suas concorrentes. Vamos lá, adicione mochi.svg na nossa página images.html:

<h2>SVGs</h2>

<p>SVGs are <em>amazing</em>. Use them wherever you can.</p>

<img src='images/mochi.svg'/>

Tem um problema em potencial com o SVG: para que eles sejam apresentados consistentemente em todos os navegadores, você precisa converter qualquer campo de texto para contornos usando um editor de imagem (ex. Adobe Illustrator ou Sketch). Se suas imagens contém muito texto (como as capturas de telas chiques deste tutorial), isso pode ter um grande impacto no tamanho do arquivo. Por essa razão iremos usar PNGs ao invés de SVGs, mesmo sabendo que SVGs são os melhores!

Dimensões de Imagens

Por padrão, o elemento <img/> usa as dimensões herdadas do arquivo de imagem. Os arquivos JPG, PNG, e GIF usados nesse tutorial tem atualmente 150×150 pixels, enquanto nosso mochi SVG tem somente 75×75 pixels.

Web page after embedding JPG, GIF, PNG, and SVG <img> elements

Como veremos adiante em Imagens Responsivas, formatos de imagens baseados em pixel precisam ser duas vezes maiores se você quiser que elas apareçam em monitores do tipo retina. Para deixar nossas imagens baseadas em pixel com o tamanho pretendido (75×75) nós podemos usar o atributo width do elemento <img/>. No arquivo images.html, atualize todas as nossas imagens baseadas em pixel para serem como descrito abaixo:

<!-- Na seção de JPGs -->
<img src='images/mochi.jpg' width='75'/>

<!-- Na seção de GIFs -->
<img src='images/mochi.gif' width='75'/>

<!-- Na seção de PNGs -->
<img src='images/mochi.png' width='75'/>

O atributo width define uma dimensão explícita para a imagem. Existe um atributo height correspondente. Definindo somente um deles vai fazer com que a imagem seja dimensionada de forma proporcional, enquanto se definirmos os dois fará com que a imagem seja esticada. Os valores de dimensões são especificados em pixel, e você nunca deve incluir a unidade (ex. width='75px', não faça isso!).

O atributo width e height podem ser úteis, mas é sempre melhor definir a dimensão da imagem através da CSS assim você pode alterá-las através de requisições de mídia. Nós discutiremos melhor isso quando chegarmos a design responsivo.

Textos Alternativos

Adicionar o atributo alt ao elemento <img/> é uma boa prática. Isso define um “texto alternativo” à imagem exibida. Isso tem um impacto em mecanismos de pesquisa e para usuários que usam navegadores que exibem somente texto (ex. pessoas que usam softwares leitores de tela devido a deficiência visual).

Atualize todas as suas imagens para incluir uma descrição através do atributo alt:

<!-- Na seção de JPGs -->
<img src='images/mochi.jpg' width='75' alt='A mochi ball in a bubble'/>

<!-- Na seção de GIFs -->
<img src='images/mochi.gif' width='75' alt='A dancing mochi ball'/>

<!-- Na seção de PNGs -->
<img src='images/mochi.png' width='75' alt='A mochi ball'/>

<!-- Na seção de SVGs -->
<img src='images/mochi.svg' alt='A mochi ball with Bézier handles'/>

Para mais exemplo de como utilizar o atributo alt, por favor veja a ridiculamente detalhada especificação oficial.

Mais Atributos HTML

Agora que já estamos mais confortáveis com a sintaxe de atributos HTML, podemos adicionar alguns toques finais ao nosso caldeirão de código HTML. Toda página web que você criar deve definir o idioma qual foi escrito e seu conjunto de caracteres.

Idioma do Documento

O idioma padrão de uma página web é definido pelo atributo lang, no nível mais alto do elemento <html>. Nosso documento é em Português do Brasil, então nós usaremos o código de país pt-br como valor do atributo (sempre faça isso para todas as páginas que você criar):

<html lang='pt-BR'>

Se você não tiver certeza de qual o código de país deve utilizar para o seu idioma, ou se for fazer uma página para outro idioma, você pode olhar o campo da Subtag aqui.

Conjunto de Caracteres

Um “conjunto de caracteres” é como um alfabeto, só que digital, para o seu navegador. Isso é diferente do idioma definido no seu documento, de forma que ele só afeta como as letras são renderizadas, e exibidas na tela, não o idioma do conteúdo. Vamos copiar e colar alguns caracteres internacionais para dentro da nossa página web misc/extras.html e ver o que acontece.

<h2>Conjunto de Caracteres</h2>

<p>Você pode usar UTF-8 para contar em Turco:</p>

<ol>
  <li>bir</li>
  <li>iki</li>
  <li>üç</li>
  <li>dört</li>
  <li>beş</li>
</ol>

Quando você atualizar o navegador para visualizar a página, você verá algumas coisas muito estranhas no lugar dos caracteres ü, ç, ö, e ş, devem aparecer como:

Web page rendering gibberish for international characters

Isso acontece porque o conjunto de caracteres padrões a serem exibidos nos navegador não suporta esses caracteres “especiais”. Para corrigir isso, vamos usar a codificação de caracteres UTF-8, adicionando um elemento <meta> com o atributo charset ao <head> do nosso arquivo misc/extras.html:

<meta charset='UTF-8'/>

Os caracteres especiais agora devem ser exibidos corretamente. Atualmente, o UTF-8 é algo que se tornou o alfabeto universal para a Internet. Toda página que você criar deve conter essa linha no seu <head>.

Entidades HTML

Certo, essa última seção não tem nada a ver com âncoras ou imagens, mas nós precisamos discutir uma última coisa antes de iniciar as engrenagens da CSS. Uma “entidade HTML” é um caracter especial que não pode ser representado como um texto puro e um documento HTML. Isso tipicamente significa que é uma palavra reservada, no nosso caso um caractere reservado, ou que você não tem uma tecla para esse caracter no seu teclado.

Caracteres Reservados

Os caracteres <, >, e & são chamados de “caracteres reservados” porque eles não são permitidos dentro de um documento HTML sem que seja codificado. Isso porque eles significam alguma coisa na sintaxe HTML: o < inicia uma etiqueta, o > fecha uma etiqueta, e como vamos aprender, o & define uma entidade HTML.

No misc/extras.html, adicione o seguinte:

<h2>Entidades HTML</h2>
<p>Existem três caracaterese reservados na HTML: &lt; &gt; e &amp;. Você
   deve sempre usar entidades HTML para esses três caracteres.</p>

Entidades sempre iniciam com um e-comercial (&) e terminam com um ponto-vírgula (;). Entre eles você consegue colocar um código especial que seu navegador irá interpretar como um símbolo. Neste caso, irá representar lt, gt, e amp como o sinal de menor, sinal de maior, e e-comercial, respectivamente.

Tem um monte de entidades HTML. Vou deixar para que você explore a maioria deles por si só.

Aspas

Aspas são sem dúvidas necessárias, mas se você se importa com tipografia elas serão algumas das entidades mais comuns utilizadas na HTML. Existem quatro tipos diferentes de aspas (aspas de abertura e fechamento simples e aspas duplas):

“
”
‘
’

Você pode usá-los no lugar de ' simples e " duplas, como mostrado abaixo (neste caso vou deixar o texto em inglês para mostrar o resultado):

<p> If you&rsquo;re into &ldquo;web typography,&rdquo; you&rsquo;ll also find
   yourself using curly quotes quite a bit.</p>

Diferente das aspas simples, essas entidades de aspas duplas devem envolver o texto.

Entidades HTML e UTF-8

Nos primórdios da Web, os arquivos HTML não podiam ter caracteres especiais, tornando as entidades muito mais úteis. Mas, desde que começamos a usar o conjunto de caracter UTF-8, podemos inserir qualquer caracter diretamente dentro do documento HTML. Com isso as entidades se tornam úteis primeiramente como caracteres reservados ou para conveniência quando está criando HTML direto.

Resumo

Uma página web é basicamente um monte de HTML, imagens e (como aprendemos um pouco) arquivos CSS ligados em conjunto. Você deve iniciar pensando uma página como uma forma bonita para usuários navegarem por pastas e arquivos que criamos como parte do nosso processo de desenvolvimento web. Por essa perspectiva, deve ser mais claro que manter um sistema de arquivo bem organizado é um aspecto tão crítico quanto criar uma página web.

Também aprendemos sobre alguns atributos importantes (lang e charset) que nos dão o leioute básico que você deve usar no começo de toda página web que você criar:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Alguma Página Web</title>
  </head>
  <body>
    <h1>Alguma Página Web</h1>
    <!-- O resto do conteúdo da página vai aqui -->
  </body>
</html>

No entanto, ainda precisamos de uma parte muito importante: CSS. No próximo capítulo, vamos descobrir mais elementos e atributos HTML para juntar uma folha de estilo CSS para nossa página inteira. A habilidade de trabalhar com diversos arquivos e conectá-los de formas inteligentes será ainda mais importante do que foi mostrado nesse capítulo.

Próximo Capítulo >