Foto: Reprodução.

Agora com o conceito básico sobre o que é HTML podemos avançar para a parte prática.

Antes, precisamos lhe introduzir alguns itens fundamentais:

Criação e manipulação de documentos HTML:
  • Todos os arquivos que você irá escrever usando HTML devem ser manipulados por algum editor de texto de sua preferencia, recomendo o Sublime 3 que é gratuito e possui algumas funções especiais para HTML como abreviação de tags e visualização mais fluída do código, além disso também necessitam de algum navegador para que sejam interpretados e exibidos, como Chrome, Opera, Safari, entre vários outros. Vale ressaltar que alguns navegadores possuem diferentes formatações e podem exibir de forma diferente o seu documento HTML, por isso veja sempre que possível como está sendo exibido o seu documento em diferentes navegadores, essa é uma pratica saudável e que previne possíveis problemas futuros caso você venha a operar em projetos maiores que envolvem o desenvolvimento web.
  • Arquivos HTML devem ser salvos com a extensão ".html", sem aspas.
  • É recomendado a criação e organização de pastas durante a criação de seu site, com pastas destinadas a uma mídia especifica e exportando essas mídias através de linhas de código. Uma pasta maior que contem todos os arquivos com subpastas cada uma com uma mídia especifica, imagens ou videos por exemplo. Durante a pratica desse tutorial esse conceito será melhor introduzido.
TAGS:
  • Tags em HTML: As tags são marcações dentro do código HTML que fornecem especificações para aquele trecho entre a abertura e o fechamento da tag. 
  • As tags são estruturadas da seguinte forma: "<NomeDaTag>Conteúdo entre as tags</NomeDaTag>. A maioria das tags obedecem essa estrutura mas existem exceções que veremos no decorrer desse tutorial. 
  • Exemplo prático: <p>Isso é um paragrafo com quebra de linha</p>. A tag <p> delimita parágrafos dentro do seu documento, com quebras de linhas automáticas.
Primeiro código em HTML: 
  • Primeiramente, abra seu editor de texto, crie um novo arquivo e nomeio da forma que preferir, recomendo que o nomeie como "index" pois é um padrão para os arquivos de paginas inicias em sites web, o arquivo index é aquele que o servidor do seu site abrirá primeiro quando alguém solicitar acesso ao seu site, é um conceito mais avançado por enquanto então não se preocupe tanto com a nomeação de seus arquivos por agora. Não esqueça da extensão ".html" logo após o nome do arquivo. 
  • Nesse momento seu arquivo de texto deve estar vazio, vamos então criar as tags iniciais que todo documento HTML de respeito deve ter. Veja a imagem a seguir e copie o que está escrito nela no seu arquivo.

Código base.

  • "<!DOCTYPE html>" é uma tag sem fechamento como pode ser visto que não tem função visual mas utilitária, informando ao navegador que o tipo de linguagem e versão usada na construção do documento. O uso mais frequente dessa tag é como está na imagem, que mantem sempre o documento na versão mais recente do HTML. 
  • "<html></html>" perceba que essa tag possui diversas tags dentro dela, justamente por ser a tag principal, o inicio do arquivo, onde tudo será posto. É dentro dessa tag que todas as outras tags fundamentais ficarão com exceções de algumas tags especiais como a tag <!DOCTYPE>. Dentro da abertura dessa tag podemos fornecer algumas informações ao navegador como a língua que esta sendo usada nos textos presentes no documento, no nosso caso o português do Brasil. Essa informação ajuda os dispositivos de busca como o Google a selecionar conteúdos mais relevantes aos usuários. 
  • "<head></head>" A tag head não tem função visual porém carrega tags com diversas funções fundamentais do site em questão. Nela iremos por tags de estilo e formatação integrada de CSS, por exemplo. É como uma tag orientadora para a tag body que veremos mais a frente. 
  • "<meta>" Novamente uma tag sem fechamento que não possui função visual mas muito importante, pois essa tag carrega os meta dados do seu site, como qual coleção de caracteres será usada. No nosso caso selecionamos a UTF-8 que possui todos os caracteres especiais que usaremos, como os acentos ortográficos. Se não informássemos qual coleção de caracteres vamos usar, nossos textos seriam apresentados de forma errada e com diversos caracteres estranhos. Além de disso os meta dados também carregam informações como autor, descrição do site, etc. Veremos como adicionar essas outras informações em tópicos futuros. 
  • "<title></title>" Essa tag como você já pode ter interpretado possui o titulo do site, com ela podemos mudar o titulo da aba do site que aparecerá no navegador. 
  • "<body></body>" Essa é talvez a tag mais significativa dentro do seu documento HTML, é nela que são colocados todas as coisas visuais do seu site, desde textos a videos. Dentro dessa tag são encontrados os elementos mais importantes de um site, seu conteúdo.

Olá mundo: 

Agora iremos colocar um texto que será exibido no seu navegador através do código HTML. Entre a tag <body> escreva "Olá mundo", sem aspas. Após isso salve seu arquivo e o abra usando um navegador. Provavelmente se você o salvou no formato ".html" corretamente o arquivo terá o ícone do seu navegador padrão, neste caso, basta apenas um clique duplo em cima do arquivo para abri-lo. O resultado obtido dentro do navegador deve ser semelhante ao mostrado na imagem abaixo:

Hello World!

Esse é o resultado do seu primeiro código em HTML, um simples texto ainda não formatado. Neste tópico você aprendeu sobre o mais básico do HTML, vendo uma estrutura base e criando um primeiro conteúdo. Durante os tópicos futuros muito mais funções serão aprendidas, encerrarei esse tópico por aqui para não criar uma experiência tediosa. Recomendo que explore as funções do HTML por enquanto em sites como o W3schools que possuem ótimo conteúdo introdutório sobre HTML.