Curso de HTML5 — Parte 1/2

Walter Nascimento

Published in

Walter Nascimento | PT-BR

7 min readSep 11, 2020

Curso rápido de HTML5, introdução e definição

[click here for English]

Clique aqui para ir para a parte 2!

O que é HTML?

HTML é o acrônimo de Linguagem de Marcação de Hipertexto (do inglês HyperText Markup Language). Isso quer dizer que usando códigos em HTML você conseguirá formatar (marcar) visualmente o conteúdo de uma página.

História do HTML

Em 1945, Vannevar Bush, propôs em um artigo a idéia para um sistema de armazenamento de informações o qual ele denominou MEMEX. Bush idealizou uma máquina que teria a capacidade de armazenar informação textual e gráfica, informações essas com a capacidade de serem relacionadas por meio de ligações dinâmicas ou seja links a quaisquer outras informações.

Até então o termo “hypertext” não existia. Foi em 1965 que Ted Nelson, em um artigo publicado no livro “Literary Machines” cunhou este termo. O primeiro sistema baseado em hipertexto foi desenvolvido em 1967 por uma equipe liderada por Andries van Dam na “Brown University”. A pesquisa foi coordenada pela IBM e a primeira implementação hipertexto, Hypertext Editing System, foi executada em um mainframe IBM/360. Em 1987 Bill Atkinson criou o Hypercard, sistema hipertexto feito para facilitar a criação de aplicações em hipertexto. Dentre suas implementações haviam os gráficos bitmaps, campos de formulário, script e pesquisa rápida de texto.

Em 1989, nos laboratórios do CERN, Tim Berners-Lee e Robert Caillau lançaram as idéias de um sistema que poderia ser acessível por diferentes plataformas de computadores, realidade existente à época no CERN. Nascia então a concepção do HTML, bem como sua utilização junto com o protocolo HTTP.

A linguagem foi definida em especificações formais na década de 1990, inspiradas nas propostas originais de Tim Berners-Lee.

A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da Internet tal como a conhecemos atualmente.

Tim Berners-Lee criou o HTML original (e outros protocolos associados como o HTTP) em uma estação NeXTcube usando o ambiente de desenvolvimento NeXTSTEP. Na época a linguagem não era uma especificação, mas uma coleção de ferramentas para resolver um problema de Tim: a comunicação e disseminação das pesquisas entre ele e seu grupo de colegas. Sua solução, combinada com a então emergente internet pública (que tornaria-se a Internet) ganhou atenção mundial.

Criando um arquivo HTML

Um site é formado basicamente por arquivos HTML. Cada página do site normalmente é uma página HTML, por exemplo se você acessar um site e clicar em algum link você será redirecionado para outro arquivo HTML, e se um site tem 10 páginas então ele tem 10 arquivos HTML.

Como criar um arquivo HTML?

É muito simples. Você pode criar um arquivo HTML usando o bloco de notas do Windows ou o TextEdit do MAC, ou do Linux. Veja o passo a passo:

Abra o bloco de notas e clique no menu superior “Arquivo”.
No menu “Arquivo”, clique na opção “Salvar Como”.
Salve seu arquivo com a extensão .html . Por exemplo: site.html

Você pode dar qualquer nome para o seu arquivo, no entanto ele deve conter no final a extensão .html.

Arquivo Index

É comum encontrar arquivos com o nome index.html, o nome index é usado para ser a primeira página do site pois a maioria dos servidores busca o arquivo index por padrão.

Em português index significa índice, ou sumário, pois normalmente na página inicial temos os links para as páginas internas. É por onde começamos a navegação pelas páginas.

Ferramentas

Para trabalhar com html é necessário duas ferramentas importante o primeiro é o browser(navegador) pois é ele que vai exibir a página que você está criando e o segundo é um editor, apesar de que podemos trabalhar com um editor de arquivo padrão(notepad e etc) quanto melhor a ferramenta mais rápido criamos nossa página.

Navegadores:

Chrome;
Firefox;
Microsoft Edge;
Opera;
Internet Explorer;
Safari;
etc…

Editores:

Notepad++;
Sublime Text;
Atom;
Brackets;
CodeAnywhere;
Visual Studio Code;
DreamWeaver;
etc…

TAG

Todo documento HTML possui marcadores (do inglês: tags), elementos entre parênteses angulares (chevron) (< e >); esses elementos são os comandos de formatação da linguagem.

A maioria das tags tem sua correspondente de fechamento:

<h1>Olá</h1>

Quando abrimos um arquivo HTML no navegador, este nos apresenta o conteúdo inserido dentro deste arquivo. O que o navegador faz é ler o código que está escrito dentro do arquivo HTML, interpretar esse conteúdo e renderizar (mostrar o resultado visualmente) na tela. Quando se trata apenas de texto, o navegador vai simplesmente renderizar o mesmo texto na tela. Porém, em um arquivo HTML podemos passar ao navegador alguns comandos para que ele faça modificações visuais no conteúdo que colocamos lá. À estes comandos damos o nome de TAGs.

Normalmente utilizamos as TAGs em pares. A primeira TAG chamamos de TAG de abertura. A TAG de abertura é a TAG que liga o comando. A partir dela o comando começa a funcionar e só pára quando escrevemos a TAG de encerramento. Note que indicamos a TAG de encerramento com uma barra (/) após o sinal de menor (<), assim </comando>. Em outras palavras, a TAG de encerramento desliga o comando, fazendo com que ele pare de funcionar.

<iniciacomando></terminacomando><strong>Texto em negrito</strong> texto normal

Atributos

Os atributos são usados para personalizar tags. O que isso significa? De alguma maneira, algum dia você quer redimensionar uma imagem ou tabela ou mudar a cor da fonte. Tudo isso é possível com a ajuda de atributos.

A maioria das tags tem seus próprios atributos.

Ex.:

<img src="imagem.jpg" alt="Minha Figura" />

Comentários

Muitas linguagens de marcação, estilo ou programação, possuem um comando que permite que se faça comentários dentro do código, sem que o mesmo seja renderizado no navegador ou outra plataforma de renderização. e no html também é possível.

Ex.:

<!-- Seu comentário vai aqui -->

DOCTYPE

Doctype é o DTD do arquivo html, Document Type Definition (Definição do tipo de documento)

Todos os documentos HTML devem começar com uma declaração DTD. A declaração não é uma tag HTML. É uma “informação” para o navegador sobre que tipo de documento esperar.

No HTML 5, a declaração é simples:

<!DOCTYPE html>

Versões do HTML depreciadas

Versão 2.0–1995

A primeira versão que surgiu depois da criação do HTML puro, foi a 2.0. O seu objetivo era formalizar todas as características do HTML que já eram utilizadas. A sua aparição ocorreu no primeiro evento mundial sobre a Web, denominado como World Wide Web Conference.

Versão 3.2–1997

Além de corrigir problemas de compatibilidade da versão 2.0, esta versão do HTML propiciou a criação de tabelas, applets e texto flutuante ao redor de imagens.

Versão 4.01–1999

Sua característica era fornecer compatibilidade com as versões anteriores, mas também acrescentar suporte para opções multimídias, folha de estilos e melhorar as práticas de programação.

XHTML 1.0 Strict é o mesmo que HTML 4.01 Strict, mas seguindo as regras de sintaxe XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Título</title> </head> <body>  <h1> Olá Mundo </h1> </body></html>

Versão HTML 5–2014

A última versão do HTML foi desenvolvida para aperfeiçoar a experiência da World Wide Web para os desenvolvedores e usuários finais.

<html> <head>  <title>Título</title> </head> <body></body></html>

HTML

O elemento HTML <html> (ou HTML root element) representa a raiz de um HTML ou XHTML documento. Todos os outros elementos devem ser descendentes desse elemento.

HEAD

O elemento <head> oferece ao navegador informações muito úteis. Você pode introduzir outros códigos como JavaScript ou CSS, definir título e etc.

BODY

O elemento <body> é o que define o início do conteúdo da página em si (títulos, parágrafos, fotos, músicas e qualquer outro conteúdo).

Elementos Bloco e Em Linha

Todos os elementos HTML podem ser separados em dois grupos, em termos de comportamento visual CSS: elementos bloco (block) e elementos em linha (inline). Ser bloco ou em linha muda o comportamento visual do elemento, além de outras características. Apesar de podermos mudar o modo de exibição de cada elemento com CSS, cada tag por padrão pertence a um ou outro grupo.

Elementos bloco ocupam todo o espaço horizontal disponível e iniciam uma nova linha no documento. Novos elementos irão começar na próxima linha livre.

<div><hr><p>...

Elementos em linha ocupam apenas o espaço usado. Novos elementos irão começar ao lado.

<span><strong><em>...

Títulos (h1 — h6)

Existem 6 tipos diferentes de títulos em html classificados pelo tamanho da fonte e vão desde <h1> até <h6>:

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

Elemento Ancora

O elemento <a> em HTML(ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a> precisará indicar o destino do link.

<a href="https://www.mozilla.com">Mozilla</a>