WiredWest

Tutorial de HTML

O que é o HTML?

HTML é uma abreviação de HyperText Markup Language. É a linguagem de marcação utilizada para descrever a estrutura do conteúdo de webpáginas.

O HTML é composto por uma série de elementos que servem para descrever ao navegador como mostrar o conteúdo da webpágina.

Cada elemento possui um propósito específico e tem uma função diferente dentro da página.

Esses elementos são definidos por tags, que são delimitadas pelos caracteres < e >.

Um elemento é definido por sua tag de início, o conteúdo, e sua tag de fechamento (que é iniciada com um /). O conteúdo que estiver entre essas tags é o que receberá a função específica dessa tag. Nunca esqueça de "fechar" as suas tags. Exemplo: <tag>Conteúdo</tag>.

Alguns elementos não possuem conteúdo interno (são tags vazias), pois são tags puramente declarativas, como é o caso das tags <br/>, <hr/> e <img/>. Nesse caso, a tag deve terminar com um /. Exemplo: <tag/>.

As tags também podem possuir atributos. Esses atributos são utilizados para modificar o comportamento do conteúdo, ou para fornecer informações adicionais sobre o conteúdo.

• Os atributos sempre são fornecidos na tag de abertura, e são escritos no padrão nome = "valor". Exemplo: <tag nome = "valor">Conteúdo</tag>.
• É possível utilizar tanto aspas simples quanto aspas duplas em um atributo. É recomendado utilizar aspas duplas sempre que possível.
• Se for necessário utilizar aspas simples dentro do conteúdo de um atributo, utilize aspas duplas no atributo. Exemplo: <tag nome = "Conteúdo do atributo com 'aspas' simples">Conteúdo</tag>.
• Se for necessário utilizar aspas duplas dentro do conteúdo de um atributo, utilize aspas simples no atributo. Exemplo: <tag nome = 'Conteúdo do atributo com "aspas" duplas'>Conteúdo</tag>.

Os elementos em HTML podem ser utilizados dentro de outros elementos (tags dentro de tags), e existem alguns elementos que possuem o propósito específico de ser usado apenas dentro de certo elemento.

A linguagem HTML não é case sensitive, o que significa que não faz diferença escrever as tags e seus atributos utilizando letras minúsculas ou maiúsculas. Porém é recomendado utilizar sempre letras minúsculas.

O papel do seu navegador é ler esse arquivo ".html" que você escreveu, interpretar o conteúdo do arquivo e gerar a webpágina.

Organização de arquivos

A página inicial do website deve sempre possuir o nome "index.html". Por padrão, essa é webpágina que vai ser exibida quando o usuário acessar o link principal do seu website. Demais webpáginas podem possuir outros nomes que você escolher.

É recomendado manter todos os arquivos de um website no mesmo diretório, ao invés de tentar separar os arquivos em vários sub-diretórios. Isso evita problemas futuros: em uma webpágina com sub-diretórios, é necessário modificar o endereço do arquivo no código-fonte toda vez que algum arquivo for migrado para outro sub-diretório. Ao esquecer de modificar o endereço do arquivo no código-fonte, o arquivo não será encontrado, e o usuário irá perder acesso ao conteúdo do arquivo.

O mesmo é válido para o nome dos arquivos. Se o nome de um arquivo for modificado, é necessário modificar o nome no endereço do código-fonte em todas as webpáginas que encaminham para esse arquivo. Por isso é importante que os arquivos possuam nomes simples, fáceis de lembrar e que sigam um padrão. O ideal é que nunca seja necessário modificar o nome de um arquivo. O recomendado é sempre usar a convenção de nomenclatura "snake_case". Eis as regras dessa convenção:

• Os nomes dos seus arquivos devem ser compostos apenas de letras minúsculas, números e underscores/underlines (_).
• Não utilizar espaços no nome dos seus arquivos. Substituir os espaços pelo underscore/underline (_).
• Letras maiúsculas e caracteres especiais são proibidos.

Exemplo: nome_de_arquivo123.txt.

Em HTML também é necessário ter cuidado com a nomenclatura das id's das suas tags, caso a tag esteja sendo utilizada como bookmark. Se você modificar o nome de uma id, será preciso modificar todos os links que apontam para essa id. Portanto, fique atento.

Editor de texto

Um editor de textos simples é tudo o que é necessário para criar um documento HTML.

Usuários mais avançados editam o código utilizando editores de texto mais avançados, como o Vis. Mas ensinar a mexer nessas ferramentas não é o objetivo desse tutorial. Para quem estiver começando, até mesmo o editor de texto padrão do sistema operacional pode ser utilizado.

Para criar um documento HTML, abra um arquivo de texto no editor e salve o arquivo com a extensão ".html". Dessa forma, o arquivo será interpretado como uma webpágina ao ser executado pelo navegador.

Código-fonte

É possível inspecionar o código-fonte de qualquer webpágina HTML no navegador.

Para isso, digite view-source: antes do link da webpágina. Exemplo: view-source:https://wiredwest.neocities.org/ mostra o código-fonte da página inicial deste website.

Estudar o código escrito por outros é uma ótima forma de aprendizado.

Estrutura da webpágina

Existem algumas tags que possuem a função de identificar as partes da estrutura do documento HTML. Todas essas tags são obrigatórias.

<!DOCTYPE html>

<html lang = "pt-BR">

<head>
<title>Título da Webpágina</title>
</head>

<body>
</body>
</html>

!DOCTYPE

<!DOCTYPE> é a tag inicial de todo o documento html.

Ela não possui conteúdo interno, é apenas uma tag declarativa.

A tag <!DOCTYPE> não é uma tag HTML. Ela é uma tag que informa ao navegador que documento está sendo apresentado.

Para indicar ao navegador que ele deve renderizar a página utilizando a última versão do HTML, utilize o atributo html dentro da tag <!DOCTYPE>: <!DOCTYPE html>.

Ao contrário das outras tags de um documento HTML, esta tag não pode ser "fechada".

html

A tag <html> é a tag principal de maior nível hierárquico, que engloba todas as outras tags de uma página html.

Ela possui o atributo lang, que é usado para especificar a linguagem utilizada na página. As duas primeiras letras em minúsculo indicam a linguagem e as duas últimas em maiúsculo indicam o país. Isso auxilia os navegadores e os buscadores.

Dentro da tag <html> existem duas tags principais: a <head> e a <body>.

head

<head> é uma tag de metadados. Ela fornece informações importantes sobre a webpágina ao navegador.

title

<title> indica o título da página. É o que irá aparecer na aba do navegador.

body

<body> é a tag visual, contém tudo o que será mostrado ao usuário na página do navegador. A tag <body> possui tags para especificar o layout da webpágina, e tags para definir o conteúdo da webpágina.

A tag head

<head> é uma tag de metadados (dados sobre outros dados). Ela fornece informações importantes sobre a webpágina para os navegadores, buscadores e outros softwares utilizados para escanear webpáginas. Ela deve ser colocada dentro da tag <html>, e antes da tag <body>. É uma tag obrigatória.

Funciona da seguinte forma:

• A tag <body> contém todo o conteúdo visual da sua webpágina, aquilo que será consumido pelo usuário que acessar a sua webpágina.
• A tag <head> contém as informações sobre esse conteúdo, essas informações não serão consumidas pelo seu usuário, mas são importantes para os softwares que vão exibir ou escanear a sua webpágina.

Dentro da tag <head> é colocada a tag <title>, que é obrigatória. Existem outras tags dentro da tag <head>:

meta

Como o próprio nome sugere, a tag <meta/> serve para fornecer metadados. Ela possui as seguintes funções:

• Com o atributo charset, a tag indica o encoding da página. Deve ser utilizado sempre o UTF-8 (<meta charset = "UTF-8"/>). Essa deve ser sempre a primeira tag dentro de <head>, pois o navegador precisa dessa informação para renderizar os caracteres da webpágina.
• Com o atributo viewport, a tag indica como o navegador deve rearranjar o conteúdo em dispositivos de telas de tamanhos diferentes. É importante que a webpágina seja responsiva, que o conteúdo dela se adapte ao tamanho da tela em que ela for exibida, do contrário o seu website não vai ser facilmente consumido em telas menores como a de dispositivos móveis. É recomendado utilizar a tag <meta/> com os seguintes atributos e valores: <meta name = "viewport" content = "width = device-width, initial-scale = 1"/>. Isso informa que o navegador deve adaptar a sua webpágina a largura da tela do usuário.
• Com o atributo author, a tag indica o autor da webpágina. Pode ser colocado o nome/pseudônimo de um indivíduo ou grupo, o nome da webpágina, ou de uma organização. Isso facilita o trabalho dos buscadores de encontrar o conteúdo de um determinado autor, e servir aos usuários interessados. Exemplo: <meta name = "author" content = "Wired West"/>.
• Com o atributo description, a tag indica a descrição da webpágina. Exemplo: <meta name = "description" content = "Tutorial de HTML"/>.
• Com o atributo keywords, a tag indica palavras-chaves. Isso auxilia os buscadores, que irão utilizar essas palavras-chaves para entregar a sua webpágina aos usuários que as digitarem na barra de pesquisa. Exemplo: <meta name = "keywords" content = "html, tutorial"/>.

link

<link> é utilizado para chamar arquivos externos.

• Fornecer o arquivo do favicon (a imagem que aparece na aba do navegador). Exemplo: <link rel = "icon" type = "image/x-icon" href = "favicon.gif"/>.
• Fornecer o arquivo de formatação CSS da webpágina. Exemplo: <link rel = "stylesheet" href = "style.css"/>.
• Fornecer o endereço da licença de "copyright" do conteúdo da webpágina. Exemplo: <link rel = "license" href = "https://creativecommons.org/publicdomain/zero/1.0/legalcode"/>.

Conteúdo

Existem algumas tags que possuem a função de identificar o tipo de conteúdo que irá ser exibido no documento HTML. Todas essas tags funcionam apenas dentro da tag <body>.

Título

Para inserir títulos (headings) na página, se utiliza as tags <h1> até <h6>.

Títulos utilizam a tag <h1>, subtítulos utilizam a tag <h2>, e assim por diante até <h6>.

Headings são importantes, o buscador irá utilizar essas tags para separar o conteúdo da sua página, então é importante utilizar essas tags corretamente. Utilize essas tags sempre na ordem correta e apenas para títulos (nunca utilize para deixar o texto maior ou menor).

Exemplo:

<!DOCTYPE html>

<html>

<head>
<title>Títulos</title>
</head>

<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>

</html>

Parágrafo

Parágrafos em HTML são definidos utilizando a tag <p>.

Isso é um novo parágrafo.

Isso é outro parágrafo.

A tag <p> adiciona automaticamente uma quebra de linha antes e depois de cada parágrafo.

Exemplo:

<!DOCTYPE html>

<html>

<head>
<title>Parágrafos</title>
</head>

<body>
<p>Primeiro parágrafo.</p>

<p>Segundo parágrafo.</p>

<p>Terceiro parágrafo.</p>
</body>

</html>

Quebra de linha

A função da tag <br/> é adicionar uma quebra de linha. É utilizada para adicionar uma nova linha sem precisar adicionar um novo parágrafo no texto.

É uma tag útil para digitar poesias ou endereços na webpágina.

A tag <br/> é uma tag vazia, portanto não possui conteúdo interno ou tag de fechamento.

É importante utilizar essa tag apenas dentro de outras tags de texto.

Utilizar a tag <br/> para gerar espaçamento vertical na sua página não é uma prática recomendada, visto que atrapalha o trabalho dos buscadores e outros softwares utilizados para escanear webpáginas, além de tornar a leitura do seu código menos agradável para terceiros.

Se houver necessidade de aumentar algum espaçamento vertical na sua página, o método recomendado é utilizar de formatação com funções do CSS.

Exemplo da tag <br/> sendo utilizada para gerar quebras de linha em uma poesia:

<!DOCTYPE html>

<html>

<head>
<title>Quebra de linha</title>
</head>

<body>
<p>Versos Íntimos (Augusto dos Anjos)</p>

<p>Vês! Ninguém assistiu ao formidável<br/>Enterro de tua última quimera.<br/>Somente a Ingratidão – esta pantera –<br/>Foi tua companheira inseparável!</p>

<p>Acostuma-te à lama que te espera!<br/>O Homem, que, nesta terra miserável,<br/>Mora entre feras, sente inevitável<br/>Necessidade de também ser fera.</p>

<p>Toma um fósforo. Acende teu cigarro!<br/>O beijo, amigo, é a véspera do escarro,<br/>A mão que afaga é a mesma que apedreja.</p>

<p>Se a alguém causa inda pena a tua chaga,<br/>Apedreja essa mão vil que te afaga,<br/>Escarra nessa boca que te beija!</p>
</body>

</html>

BDO

BDO é uma sigla para Bi-Directional Override.

A tag serve para alterar a direção do texto.

Ao invés de escrever um texto ao contrário manualmente, é possível utilizar essa tag.

Essa tag é geralmente utilizada para acrescentar um texto em uma linguagem estrangeira que possui o padrão de escrita na direção oposta. Por exemplo: se você estiver criando uma webpágina em inglês, mas necessite colocar trechos de texto em japonês (ou vice-versa).

Esse texto vai ser escrito da direita para a esquerda (ao contrário).

Linhas horizontais

A tag <hr/> adiciona uma linha horizontal na página, e é utilizada para quebra de temática na página.

A tag <hr/> é uma tag vazia, portanto não possui conteúdo interno ou tag de fechamento.

Exemplos de linhas horizontais são as linhas que separam o cabeçalho e o rodapé de todas as páginas deste website.

Formatação

O HTML possui diversas tags para formatar o texto:

<strong> formata o texto para negrito. Essa tag denota para o navegador que o texto é importante.

<em> formata o texto para itálico. Leitores de tela vão ler o texto nessa tag com ênfase.

<mark> formata o texto com um marca-texto.

<small> diminui o tamanho da fonte.

<del> risca o texto. Essa tag denota para o navegador que o texto havia sido deletado do documento.

<ins> sublinha o texto. Essa tag denota para o navegador que o texto foi recentemente inserido no documento.

<sup> coloca o texto em um ^{nível superior}. Pode ser utilizado para cálculos matemáticos: (2² = 4).

<sub> coloca o texto em um _{nível inferior}. Pode ser utilizado para fórmulas químicas: (H₂0).

Links

Links em HTML são chamados de hyperlinks. Ao clicar em um link, você é redirecionado para outro endereço na web.

O link não precisa ser um texto, pode ser qualquer elemento HTML.

Links são definidos pela tag <a>. Essa tag possui os seguintes atributos:

• href define o destino do link, e é um atributo obrigatório. Pode ser uma página da web ou um arquivo html. Você também pode utilizar o "mailto:adress@domain" dentro de href para abrir o serviço de e-mail do usuário e permitir que ele envie uma mensagem para o endereço de e-mail fornecido.
• target especifica onde o documento linkado será aberto. Possui os seguintes valores:
  • "_self" é o padrão, abre o documento na mesma página.
  • "_blank" abre o documento em uma nova janela ou tab.

Bookmarks

Bookmarks são úteis quando a webpágina se torna muito extensa.

Com as bookmarks, é possível criar um link para uma tag da página que se encontra acima ou abaixo do campo de visão do usuário, ou uma tag em outra página.

Para criar uma bookmark, primeiro é utilizado o atributo id em uma tag, onde é nomeado a bookmark.

Depois, adicione o link para a bookmark, utilizando a tag <a> e fornecendo o nome da bookmark no atributo href antecedido de uma hashtag (#).

Primeiro exemplo - Bookmark para o título da página: Tutorial de HTML.

Segundo exemplo - Bookmark para uma tag em outra página: Construindo websites.

Quote

O HTML possui diversas formas de quotar um texto:

blockquote

Define um quote de um outro website.

O conteúdo do quote é identado no texto.

Possui o atribute cite, onde você coloca o endereço do website que serviu de fonte.

É importante utilizar o atributo para ajudar os navegadores e buscadores.

Quote do website da EFF:

The Electronic Frontier Foundation is the leading nonprofit organization defending civil liberties in the digital world. Founded in 1990, EFF champions user privacy, free expression, and innovation through impact litigation, policy analysis, grassroots activism, and technology development. EFF's mission is to ensure that technology supports freedom, justice, and innovation for all people of the world.

abbr

Define uma abreviação.

Possui o atributo title, nele você escreve o significado da abreviação.

Ao passar o mouse na abreviação, aparece o conteúdo de title.

Por ser dependente do mouse, essa tag não vai ter muita utilidade para usuários de dispositivos móveis.

É importante utilizar essa tag para ajudar os navegadores e buscadores, e para auxiliar os usuários que não souberem o significado da abreviação.

The EFF was founded in July of 1990 in response to a basic threat to speech and privacy.

address

Define as informações de contato do autor do website.

O conteúdo aparece em itálico.

O conteúdo é automaticamente exibido entre duas quebras de linha, uma antes do parágrafo e outra depois do parágrafo.

cite

Define o título do trabalho artístico que você publicou na página.

É importante utilizar essa tag para ajudar os navegadores e buscadores.

O título é formatado em itálico.

The Scream by Edvard Munch. Painted in 1893.

Imagens

img

A tag <img/> é utilizada para inserir imagens na webpágina.

Imagens em HTML são links para um arquivo de imagem em outra página, ou para um diretório onde esta imagem se encontre.

A tag <img/> é vazia. Ela contém apenas atributos, e não necessita ser fechada com outra tag.

src especifica o caminho até a imagem. Quando a página é carregada, o navegador busca a imagem no endereço fornecido e insere na página. Por isso, é importante que a imagem continue no mesmo endereço que você forneceu inicialmente, do contrário o navegador não irá conseguir encontrar a imagem, e ela não será exibida na webpágina.

• O caminho pode ser apenas o nome do arquivo de imagem, desde que a imagem esteja localizada no mesmo diretório que a webpágina.
• Caso o arquivo esteja localizado em outro diretório, é necessário fornecer o endereço completo do arquivo. É importante que você evite isso, simplificando a organização dos arquivos. De preferência, os arquivos de um website devem ser todos localizados em um único diretório principal, sem qualquer sub-diretório.

alt especifica um texto alternativo para a imagem, caso ela não apareça para o usuário. A imagem pode não aparecer por problemas de conexão lenta ou caminho quebrado. Também indica o que será lido em um screen reader para o usuário que ativar essa opção de acessibilidade, portanto é importante que esse atributo esteja presente e contenha uma explicação da imagem.

Favicon

O favicon é uma pequena imagem mostrada na esquerda do título da página na aba do navegador.

Você pode utilizar qualquer imagem como favicon.

Porém o favicon é uma imagem pequena, portanto deve ser utilizado uma imagem simples com alto contraste.

Você também pode fazer favicons animados utilizando os formatos ICO ou GIF.

Existem sites para criar favicons, como o favicon.cc.

Para adicionar o favicon no seu website, salve a imagem no mesmo local do arquivo index.html, ou coloque na pasta de imagens que você utiliza para o seu website.

Um nome comum para o favicon é favicon.ico.

Depois adicione a tag <link> dentro da tag <head>, como nessa webpágina: <link rel = "icon" type = "image/x-icon" href = "favicon.ico">.

Os navegadores geralmente aceitam os seguintes formatos para favicon: ICO, JPEG, PNG, GIF e SVG.

Listas

O HTML permite criar diferentes tipos de listas. Uma lista pode conter qualquer elemento HTML: links, imagens, tabelas e outras listas.

Lista Desordenada

Uma Lista Desordenada começa com a tag <ul>.

Cada item da lista começa com a tag <li>.

Exemplo:

• Item A
• Item B
• Item C

Lista Ordenada

Uma Lista Ordenada começa com a tag <ol>.

Cada item da lista começa com a tag <li>.

Exemplo:

1. Item A.
2. Item B.
3. Item C.

Por padrão, as Listas Ordenadas começam no número 1.

Para mudar isso, utilize o atributo start da tag <ol>.

Exemplo: Lista Ordenada que começa no número 42:

42. Item A
43. Item B
44. Item C
45. Item D
46. Item E

Lista Descritiva

Uma lista descritiva começa com a tag <dl>.

Cada item da lista começa com a tag <dt>.

A descrição de um item começa com a tag <dd>.

Exemplo:

Casa

Construção em alvenaria usada para morar, com distintos formatos ou tamanhos, normalmente térrea ou com dois andares.

Lâmpada

Dispositivo que atua como suporte de uma ou mais luzes artificiais e que serve para iluminar.

Livro

Conjunto de folhas de papel ou de qualquer outro material semelhante que, uma vez encadernadas, formam um volume.

Tabelas

Para criar tabelas em um documento HTML, se utiliza a tag <table>.

Cada linha (row) da tabela é definida pela tag <tr> (table row), cada título (header) da tabela é definida pela tag <th> (table header) e cada dado/célula (data/cell) da tabela é definida pela tag <td> (table data).

A tag <td> pode conter qualquer dado: textos, imagens, listas, outras tabelas, etc.

Por padrão, o texto na tag <th> é negrito e centralizado, e o texto na tag <td> é regular e alinhado à esquerda. É possível formatar o estilo com propriedades do CSS.

Exemplo de uma tabela simples:

As tabelas podem ter cabeçalhos (headers) tanto nas colunas quanto nas linhas da tabela.

Para utilizar cabeçalhos nas linhas, é só utilizar a tag <th> ao invés de <td> ao iniciar uma nova linha da tabela.

caption

Você pode adicionar um título na tabela utilizando a tag <caption>. Essa tag deve ser colocada logo abaixo da tag <table>, e antes da primeira linha (tag <tr>).

colspan / rowspan

As tabelas podem possuir células que compreendem mais de uma coluna ou linha.

Para fazer uma célula compreender mais de uma coluna, utilize a propriedade colspan das tags <th> e <td>.

Para fazer uma célula compreender mais de uma linha, utilize a propriedade rowspan das tags <th> e <td>.

W3 Validator

Para saber se a sua webpágina html está dentro dos padrões, utilize o W3 Validator. Ele vai lhe apontar os erros no seu código. Você aprende muito utilizando essa ferramenta, recomendo que você utilize ela para todo documento html que você escrever. Muitas vezes a sua página pode até funcionar no navegador, mas isso não significa que ela está seguindo os padrões e normas recomendados pela W3C.