Escrevendo sua primeira página web

Possivelmente se você está querendo começar a construir um website é porque tem alguma ideia e quer tirar isso do papel. Todo mundo que está começando precisa compreender basicamente que uma página web é escrita em sua forma mais básica em HTML e CSS.

HTML é uma linguagem de marcação que foi criada exclusivamente para fazer páginas web, ou seja, você não pode falar que é um “programador HTML”, pois como destaquei, a linguagem serve apenas para “marcar”, ou seja, dar vida ao que foi programado (aí sim em alguma linguagem de programação, como por exemplo PHP) pelo desenvolvedor.

Posso fazer um site inteiro usando só HTML e CSS? Claro que sim, principalmente se for um site mais simples, institucional, que tem como objetivo apenas mostrar algo, sem interações com o cliente. Este na verdade é o começo para quem está aprendendo, mas claro, é ainda mais interessante quando conseguimos juntar todas as tecnologias e fazer uma aplicação bem robusta que possa gerar um resultado financeiro ao desenvolvedor.

Vamos então a um pequeno exemplo.

html e css
Página com HTML e CSS

 

html
Somente HTML

Vamos agora analisar os códigos dessas duas páginas:

Se observarmos, temos exatamente o mesmo HTML nos dois códigos. Mesmo sendo um exemplo bem simples, já dá para ver o poder do CSS nas páginas web e como ele é importante para dar a cara que precisamos no site.

Entendendo este código

Toda página HTML deve obrigatoriamente começar com <!DOCTYPE html>. É ela que define que o documento está escrito em HTML e também indica qual a versão do HTML. Atualmente estamos na versão 5 do HTML e para se declarar esta versão, basta seguir o código de exemplo.

<html> é o elemento principal de uma página HTML. Tudo estará dentro deste elemento.

<head> (cabeça/cabeçalho) é uma parte importante do código onde inserimos informações relevantes à página em questão, como título, descrição, links para arquivos CSS e JS, favicon, etc. No nosso exemplo, portanto, <head> está dentro de <html>. Entender essa hierarquia é importante e para chegar nisso é preciso implementar a indentação no código.

<meta> veremos isso mais futuramente.

<title> é um dos principais elementos “filhos” de <head>. É ele que determina o título da página, que é aquele texto que vemos nas abas do navegador e também o texto das páginas quando fazemos uma busca no Google. É muito importante não ignorar o <title> das páginas.

<style> foi o elemento usado para escrevermos código CSS, que também pode ser escrito em um arquivo externo (mais recomendado), e linkado no HTML. Vamos entender isso futuramente com páginas mais complexas.

<body> (corpo/conteúdo principal) é a parte principal do site, ou seja, tudo aquilo que o usuário final vai ver está dentro do <body>. Se analisarmos o código, veremos que <body> é “filho” de <html>.

<div> define uma divisão no HTML e é também usada para formatar blocos de código usando o CSS. No nosso exemplo, a classe “principal” foi relacionada com a <div> e teve seus estilos atribuídos.

<h1> (heading/título) é o principal elemento do <body>. É ele que passa o título da página em questão, aquilo que o usuário final vai ver. Por exemplo, se for uma página de e-commerce que está vendendo uma “TV X”, então o <h1> seria exatamente “TV X”.

<h2> é um segundo nível do elemento de título. Utilizamos ele quando quisermos utilizar um segundo título da página, porém com menos importância do que o <h1>. Os “headings” vão até o nível 6 <h1><h2><h3><h4><h5><h6>.

<ul> elemento que inicia uma lista.

<li> itens de uma lista.

Os itens do nosso exemplo foram esses. Temos muitos outros ainda para estudar. Só para reforçar, a maioria dos elementos precisa ser fechada, ou seja, eu “abro” o <h1> e preciso fechar ele, e para isso, usamos uma barra “/”: </h1>.

Onde escrever meu código?

Existem vários aplicativos dedicados a escrita de código. O mais básico de todos é o bloco de notas dos sistemas operacionais. Você pode escrever seu código usando o bloco de notas (notepad) do Windows, por exemplo, e alterar a extensão de .txt para .html, aí você terá uma página em HTML que poderá ser lida pelo navegador.

É claro que o notepad não é o aplicativo ideal para desenvolver código. Precisamos de mais recursos que alguns outros aplicativos possuem. Recursos importantíssimos e que agilizam e muito o desenvolvimento como, por exemplo, duplicar linhas, indentação automática, fechamento automático de tags, link para outros arquivos e funções, e mais uma infinidade de coisas que são particulares de cada linguagem e que ajudam no dia-a-dia do desenvolvedor.

Os aplicativos que eu mais tenho familiaridade são:

Com uma rápida busca no Google você encontrará uma série de outros aplicativos, para Linux, Windows e macOS.

Observação: NÃO UTILIZE Adobe Dreamweaver! Qualquer ferramenta que trabalhe com geração automática de código atrapalha e muito o aprendizado de quem está começando. Deixe para usar este tipo de aplicativo quando estiver familiarizado com os códigos e possa usá-lo para agilizar seu trabalho.

Conclusões

Confuso? Não se preocupe! Em breve vamos estudar HTML e CSS com mais detalhes. Esses códigos podem parecer complicados agora mas estão sendo expostos justamente para que você possa começar a entender como tudo funciona.

Dúvidas, reclamações, sugestões ou qualquer outro tipo de contato, por favor, me escreva: contato@rodrigofavaro.com. Até a próxima.