O Guia do Iniciante para HTML e CSS

Embora você possa encontrar muitas tecnologias diferentes que alimentam nossos sites hoje, os dois arquivos mais importantes de toda a Internet são HTML e CSS. Sim, se você precisar de algo complexo, também precisará de mais tecnologias para acompanhá-los. Mas se tudo o que você quer é criar uma página pessoal simples, HTML e CSS são tudo o que você precisa.

Introdução aos fundamentos

Este é um guia para iniciantes em HTML e CSS que mostrará como criar um site simples o mais rápido possível. Os resultados não serão necessariamente “compatíveis com os padrões”. E você terá que fazer algumas leituras por conta própria se quiser ajustá-lo e expandi-lo ainda mais. Mas será um site e funcionará “como deveria” na maioria dos navegadores.

Como o espaço é limitado, não vamos nos aprofundar em todos os aspectos do desenvolvimento e design web. Em vez disso, vamos guiá-lo pelos passos para ir de zero a uma página web totalmente funcional, explicando o que cada coisa faz no processo.

Os dois arquivos necessários

Um site moderno consiste em muitos arquivos, mas dois são os mais essenciais: um arquivo HTML e um arquivo CSS. O arquivo HTML define os elementos e a estrutura de uma página. O arquivo CSS define a aparência desses elementos.

Ambos são essencialmente arquivos de texto típicos, contendo texto especificamente estruturado. Você não precisa de nenhum tipo especial de programa para criá-los ou ajustá-los: qualquer editor de texto “simples” servirá. Por “simples”, queremos dizer seu típico aplicativo de bloco de notas, não algo como o editor do LibreOffice ou o Microsoft Word que poderia “enriquecer” o texto de qualquer forma.

O primeiro passo é criar uma nova pasta na sua área de trabalho com dois arquivos de texto vazios dentro dela. Nomeie um deles como “index.html” e o segundo como “style.css.”

Configure seu espaço de trabalho

Execute seu navegador favorito e carregue o arquivo HTML nele, seja selecionando “Arquivo -> Abrir” ou arrastando e soltando o arquivo em sua janela.

Abra tanto o arquivo HTML quanto o arquivo CSS em seu editor de texto do tipo bloco de notas favorito.

Poder visualizar todas as três janelas ao mesmo tempo é a maneira mais conveniente de trabalhar. Se você não tiver duas telas para distribuí-las, recomendamos organizar as janelas como na nossa imagem abaixo.

“Cole” a janela do seu navegador em um lado da tela para ocupar metade dela (verticalmente) e coloque as duas janelas do bloco de notas do outro lado, uma embaixo da outra.

Blocos de Construção

Escreva algo no bloco de notas com o arquivo HTML e salve as alterações. Em seguida, atualize a janela do seu navegador pressionando F5. Você verá imediatamente o texto que você escreveu aparecer na janela do seu navegador.

Parabéns por ter acabado de configurar seu primeiro site! E não estamos brincando, já que os primeiros sites da Internet não diferiam muito em sua aparência em comparação com o que você acabou de criar. O importante, naquela época, era o conteúdo em si.

HTML permite que você “marque o que cada pedaço de conteúdo é”, usando um conjunto específico de “códigos.” Alguns dos mais importantes são:

• html: Denota um documento html. Deve estar no início de cada arquivo html.
• body: Todo o conteúdo que você vê em um navegador está contido nesta tag body. Ela representa o aspecto visual de um documento html.
• p: Parágrafo de texto
• img: Imagens
• a href: Links para endereços web
• div: Define uma “caixa” ao redor de qualquer pedaço de conteúdo que você pode então “estilizar” com CSS.

Para “definir” um pedaço de conteúdo, geralmente ele precisa estar contido pelo mesmo código com uma leve diferenciação no início e no final. Por exemplo, um parágrafo de texto é definido como:

Parágrafo de Texto Padrão

“

” indica que “o que segue é um parágrafo” e “

Note que há exceções: elementos como imagens (img) e linhas divisórias (hr) não requerem um “código de fechamento.”

Mude e atualize

Substitua tudo no seu arquivo HTML pelo seguinte:

  
  
HEADER
  
CONTENT
  
FOOTER
  
  

Atualize seu navegador (F5), e você verá as palavras HEADER, CONTENT e FOOTER aparecerem uma abaixo da outra. Acabamos de criar três “divs” invisíveis e autônomas. Cada uma delas contém uma das palavras.

Para poder definir sua aparência através do CSS, atribuímos uma palavra-chave a cada uma, uma “identidade” (o “id=name” no código), correspondente ao seu conteúdo: header, content e footer. Todos os elementos em uma página web podem ter tal alias, configurado como uma “classe” ou um “id.” Classes definem aliases para itens que aparecem várias vezes na mesma página web, como parágrafos, links, etc. IDs definem aliases para elementos que aparecem apenas uma vez em cada página, como o nome ou logotipo de um site.

Conteúdo real

Delete a palavra “HEADER” entre os códigos div – sem mudar sua estrutura – e em vez disso, insira o nome que você gostaria para seu site.

Faça o mesmo para seu “CONTENT,” mas em vez de apenas inserir texto, também certifique-se de “marcar” o início e o fim de cada parágrafo como vimos anteriormente. Substitua o “CONTENT” por dois ou três parágrafos de texto.

Agora é hora de também falar sobre links. Para converter qualquer frase em seu texto em um link, estruture-a como:

TEXTO

Você pode copiar e colar isso e substituir “ENDEREÇO” por “o que você quer que seu link aponte” e o “TEXTO” pela frase que aparecerá em seu site. Nós vinculamos uma frase em nosso rodapé ao nosso site com o seguinte:

Faça a Tecnologia Mais Fácil

Finalmente, substitua a palavra “FOOTER” pelo seu nome, uma pequena frase indicando quem projetou ou possui o site ou qualquer outra coisa que você gostaria.

Salve as alterações e atualize seu navegador para vê-las lá.

Você Tem Estilo (.CSS)

O primeiro elemento de qualquer página web é o head. Nele, geralmente encontramos código que define a identidade do site, seu nome, criador e idioma, bem como quaisquer tecnologias – além do HTML – usadas nele. É onde a maioria dos links para quaisquer arquivos externos de JavaScript e CSS reside. Adicione um ao seu site inserindo o seguinte no topo do seu arquivo HTML, logo após a tag html:

Para poder estilizar os elementos de uma página web com CSS, você precisará carregar o arquivo CSS de dentro do HTML. E isso significa incluí-lo em seu “head.” O seguinte indica que a página HTML “vinculará” a um arquivo “stylesheet”, do tipo “text/css,” chamado “style.css”:

Copie e cole nosso código, exatamente como você o vê, “dentro” do head – ou seja, abaixo de “” e acima de “”. Salve as alterações e volte sua atenção para o arquivo CSS. Lá, insira o seguinte:

body {}  
#header, #content, #footer{}  
#header, #footer{}  
#header{}  
#content{}  
#footer{}  
img {}

Site real

CSS, ou Folhas de Estilo em Cascata, são simplesmente conjuntos de regras de exibição que correspondem a elementos específicos de uma página web. Com CSS, podemos estilizar tanto “onde” quanto “como” tudo aparecerá em uma página web.

No passo anterior, introduzimos um conjunto de regras em branco para todos os elementos em nossa página. Agora, vamos ver como podemos adicionar parâmetros a eles que definirão sua aparência.

Comece com o body, que inclui tudo em seu site. Modifique-o da seguinte forma:

body {  
  width:100%;  
  position:relative;  
  margin:0;  
  padding:0;  
}

As regras acima afirmam que queremos que nosso site ocupe toda a largura da janela do navegador (width: 100%), que não queremos que ele tenha nenhuma distância das bordas da janela do navegador (margin: 0), e não queremos nenhum espaço em branco ao redor dele (padding: 0).

Todas as regras para um elemento devem estar contidas entre chaves, e cada regra deve terminar com um “;” como o seguinte:

#Element_ID{  
  REGRA 1;  
  REGRA 2;  
  REGRA 3;  
}

Continue atualizando seu CSS “#header, #content, #footer” para o seguinte:

#header, #content, #footer{  
  float:left;  
  position:relative;  
}

Com isso, você está dizendo que a posição de todos os três elementos deve seguir algumas regras comuns: cada um deve ser “relativo” ao anterior e “seguir” ( float: left). Não importa seu tamanho, forma, aparência ou qualquer outro fator, cada um deles “empurrará” o próximo elemento, e eles nunca se sobreporão.

Atualize #header, #footer com o seguinte para fazer sua página web parecer mais com um site real:

#header, #footer{  
  width:100%;  
  height:100px;  
  background:rgba(0,0,0,0.9);  
  color:rgba(255,255,255,0.9);  
  text-align:center;  
  font-size:12px;  
}

O acima define que queremos que tanto o cabeçalho quanto o rodapé de nosso site sejam 100% largos, 100 pixels de altura, e que o texto exibido neles seja de 3em de tamanho e centralizado.

As regras de fundo e cor especificam, respectivamente, qual cor toda a “caixa div” do cabeçalho e rodapé terá e a cor de qualquer texto contido neles. “RGBA” define a cor com base no padrão de mistura de cores Vermelho – Verde – Azul. Cada cor pode ter um valor de 0 a 255, com combinações de diferentes valores de Vermelho, Verde e Azul permitindo a exibição de qualquer cor. O último número corresponde à transparência. Portanto, RGBA(255,0,0,0.5) nos daria um vermelho translúcido, enquanto RGBA(50,50,255,1) daria um azul brilhante e “sólido”.

Finalize focando no conteúdo básico do site. Defina sua aparência como:

#content{  
  width:80%;  
  background:rgba(255,255,255,0.9);  
  color:rgba(0,0,0,0.9);  
  margin:0 10%;  
}

Salve todas as alterações novamente e atualize a janela do seu navegador para vê-las.

Estilizando Imagens

Para adicionar imagens ao seu site, você precisa voltar ao arquivo HTML. Lá, “dentro” do conteúdo, mas antes do primeiro parágrafo, insira o seguinte:

Onde “CAMINHO” e “ARQUIVO.JPG” são a “localização” e o nome do arquivo de qualquer imagem, disponível online ou localmente, e “TEXTO” uma descrição do que ela representa para fins de acessibilidade.

Se você tentar salvar e verificar as alterações após essa adição, descobrirá que seu site está deformado. O problema será corrigido assim que você criar regras CSS sobre como as imagens devem ser exibidas em seu site.

Volte ao arquivo CSS e declare como você deseja que todas as imagens (img) sejam alinhadas à esquerda, seguindo o fluxo de outros elementos (float: left e position: relative).

Para não exceder os limites da página, especifique como você deseja que sua largura seja o máximo da própria página (width: 100%). Para evitar que as imagens toquem seu texto, adicione alguma margem vertical na parte superior e inferior. O resultado deve ser assim:

img {  
  float:left;  
  position:relative;  
  width:100%;  
  margin:5px 0;  
  padding:0;  
}

Complete adicionando outra imagem, desta vez alinhada à esquerda ou à direita. Como antes, você deve primeiro voltar ao código HTML e colar um link para sua imagem lá, como vimos anteriormente. A diferença é que você precisará adicionar uma “classe”, um identificador ao elemento. Então você especificará via regras de exibição CSS sobre ele e quaisquer outros elementos onde a mesma classe está “anexada.”

Nomeamos nossa classe como “alignright” já que queremos que qualquer objeto, onde ela está anexada, seja exibido no lado direito da página.

Tente criar o código você mesmo. Adicione uma classe .alignright {} em seu “style.css,” e então crie regras que devem estilizar isso. O código CSS deve especificar que queremos que os elementos flutuem para o lado direito da página e sejam 46% largos (width: 46%). Não queremos que as imagens toquem o texto, então também devemos adicionar um espaço de 2% ao redor delas, dividido como 1% de margem (a distância de qualquer outro elemento) e 1% de preenchimento (um “espaço em branco extra ao redor do elemento”).

Assim, nossas regras devem definir que qualquer imagem com uma classe .alignright anexada ocupará 46% da largura da página, mais 1% de margem de cada lado, mais 1% de preenchimento de cada lado. Tudo isso soma 50% – exatamente metade da largura da página. O resultado deve ser algo assim:

img.alignright{  
  float:right;  
  width:46%;  
  margin:1%;  
  padding:1%;  
}

Próxima página

Sua primeira página web está pronta e totalmente operacional. Ao aprender mais sobre HTML e CSS, você pode enriquecer ainda mais seu conteúdo, adicionar novos elementos e melhorar sua aparência. Como próximo passo, tente copiar e renomear o arquivo HTML, modificando seu conteúdo e vinculando cada nova página às outras.

Não parece muito difícil, não é? Bem-vindo ao desenvolvimento web: ao copiar, modificar e vincular diferentes páginas através de links, você terá criado seu primeiro site completo, “adequado,” de várias páginas!

Crédito da imagem: Gatinhos Pluks, Gatinhos Pluks, IMG_20171124_142629