HTML e CSS: Guia Básico para Iniciantes

Antes de começar a falar de HTML e CSS, você precisa saber alguns detalhes sobre criação de websites.

Nunca foi tão fácil desenvolver para web como é hoje. A criação de websites hoje ocorre devido a uma série de movimentos entre os navegadores e de alguns profissionais da área que quebraram barreiras importantes.

Antes a preocupação dos programadores, girava em torno dos navegadores Internet Explorer 3+ e o Netscape. Estes dois navegadores apresentavam vários problemas de compatibilidade do que os navegadores atuais no mercado.

 Antes a criação de websites era feita por tabelas, imagina só TABELAS, na época isso era considerado um verdadeiro avanço, hoje é considerado uma tragédia, pois a quantidade de conteúdo fazia com que o carregamento da página demorasse bastante, mesmo com a utilização do CSS.

Este método de criação de websites era feito de maneira errada, onde existiam várias linhas de códigos que pareciam nunca acabar. Problemas de compatibilidade de código entre os dois navegadores eram tão terríveis que forçavam o desenvolvedor a criar duas versões de websites para abranger os usuários dos dois navegadores.

Se você é um iniciante na área da programação e quer entender um pouco mais de HTML, recomendo que você clique com o botão direito do mouse sobre qualquer canto da tela em uma página web aberta e selecionar a opção “Exibir código fonte da página” para experimentar conhecer de perto esta linguagem de marcação.

Conforme for aprofundando seus conhecimentos em HTML, saberá identificar os seus elementos e atributos fundamentais, assim como distinguir quais linhas são instruções ou comentários e qual a real necessidade de cada uma.

Mas antes de entrarmos em detalhes, vejamos basicamente o que é necessário para se compreender o HTML e como personalizá-lo a partir do uso de CSS.

O que é HTML?

HTML é uma abreviação de Hypertext Markup Language, que traduzindo para o português significa Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc).

Para web é uma das linguagens utilizadas para o desenvolvimento de websites, mas para compreender as demais, basicamente, é necessário estar afiado em como o HiperText Markup Language funciona e qual a importância dele estar bem estruturado. Vou dar um focada nessas duas palavras que são bastante importante Markup (marcação) e Hypertext (hipertexto).

Hypertex (Hipertexto)

O conceito de Hipertexto, é uma forma de organizar conteúdo de forma não linear. Hipertexto são conjuntos de elementos ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação.

Markup (Marcação)

Quando você ler um livro ou um artigo, você consegue diferenciar títulos de parágrafos, certo? Você entender que títulos são compostos por letras maiores e com poucas palavras, já o parágrafo, são compostos por letras menores e muitas palavras.

A Web não acessada somente por pessoas. As informações são publicadas e reaproveitadas pelos meios de acesso que consuma o seu conteúdo. Pode ser os sistemas de busca, seu navegador, um leitor de tela, seu smartphone, ou qualquer outro sistema ou dispositivo utilizado pelos usuários ou robôs.

Estes meios de acesso não conseguem distinguir visualmente os elementos exibidos na tela. É por isso que o HTML é baseado em marcação. A informação é marcada, dando significado a estes objetos, tornando-os legíveis para os meios de acesso.

Assim, quando marcamos um título com h1, h2 ou h3, indicamos para os meios de acesso que determinado bloco de texto é um título, com uma determinada importância e assim por diante com os outros elementos. Daí vem a importância da semântica no código HTML.

Se você marca um título com um elemento que não é da família de títulos, os meios de acesso tratarão essa informação de maneira errada. Não importa se você formate esse elemento de maneira que ele se pareça com um título visualmente. O que importa mesmo é o que está escrito no código.

O HTML é uma linguagem de marcação fundamental e muito simples de aprender. Para quem é autodidata existem livros muito bons de desenvolvimento web, mas até mesmo um iniciante é capaz de aprender através de tutoriais e cursos online.

Tudo que é exibido em uma página web como imagens, links, textos, etc. são elementos marcados por tags que irão aparecer em ordem de acordo com a estrutura do HTML.

Estrutura Básica, DOCTYPE e Charsets

<!DOCTYPE html>
<html lang="pt-br">
<head> 
      <meta charset="UTF-8">
           <title></title>
</head>
<body>
Corpo do site
</body>
</html>

O Doctype

O Doctype não é uma tag do HTML, mas uma instrução para que o navegador tenha informações sobre qual versão de código a marcação foi escrita. Ele sempre vem sempre a primeira linha de código do documento antes da tag HTML.

<!DOCTYPE html>

O elemento HTML

É como se fosse uma árvore com seus galhos, o elemento principal dessa grande árvore é sempre a tag HTML.

<html lang="pt-br">

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. Metadados são informações sobre a página e o conteúdo ali publicado.

HEAD

A Tag HEAD é onde fica toda a parte inteligente da página. Metadados são informações sobre a página e o conteúdo ali publicado.

Metatag Charset

Essa metatag e reponsável por linguagens, onde foi criada uma tabela que suprisse as necessidades impostas pelas linguagens do mundo todo, essa tabela chama-se Unicode. A tabela Unicode suporta em torno de 1 milhão de caractéres.

<meta charset="utf-8">

Os Elementos de Uma Linha de Instrução de HTML

A partir das linhas de instruções indicamos para o navegador o tipo de arquivo carregado, o que é um link, o que é uma imagem, um botão, um formulário, etc.

Estas linhas começam com a tag aberta e finalizam com a tag fechada. As tags também podem carregar blocos de instruções como <head> </head> e <body> </body>, por exemplo.

Observe este simples código a seguir para acompanhar a estrutura básica da linguagem HTML:

<!doctype html>
<html lang="pt-br">
<head>
   <meta charset="utf-8">
   <title> Digite o título de seu website </title>
</head>
<body>
    <h1> Digite alguma chamada para o texto <h1>
<p> Digite o texto </p>
<!--isto é um comentário, e ele não irá aparecer/-->
</body>
</html>

Na primeira linha informamos ao browser o tipo de documento que ele irá carregar, a seguir indicamos a língua da página e digitamos o charset padrão que irá representar qualquer caractere de qualquer língua.

As demais tags apenas separam o código entre o cabeçalho e o “corpo” onde você pode desenvolver tudo que irá compor a página. Ao finalizar, digite </html>.

Para visualizar como este código se comporta acesse sites que permitem o teste de códigos em HTML, opções de aplicativos online ou baixe programas como o Notepad++.

O que é CSS?

O Cascading Style Sheets (Folhas de estilo) é responsável por estilizar a página web. A partir do CSS é possível personalizar todo esqueleto HTML, por exemplo, ele funciona como uma camada visual para a apresentação da página.

O CSS pode ser adicionado à página a partir de uma referência ao link do arquivo ou dentro das tags <style> </style> direto do próprio código HTML. É o CSS que agregará cor às palavras ou no plano de fundo da página, sublinhado, negrito, variados estilos de fontes gráficas, espaçamentos, etc.

A Sintaxe do CSS

A sintaxe do CSS é bem fácil: basicamente é esta a linguagem de folha de estilo que irá deixar o seu código web carregado como gostaria.

Como exemplo, acompanhe a seguir o código style.css como arquivo linkado e um outro exemplo com ele direto no código:

!doctype html>
<html lang="pt-br">
<head>
<link href="styles/style.css" rel="stylesheet">
     <title> Digite o título de seu website </title>
</head>
<body>
     <h1> Digite alguma chamada para o texto </h1>
     <p> Digite o texto </p>
     <!--isto é um comentário, e ele não irá aparecer/-->
</body>
</html>

Neste exemplo simples o código em CSS irá carregar apenas a característica especial de um seletor (p) com apenas uma declaração (alterar a cor de preto para roxo do texto entre as tags <p> </p>) contendo a propriedade (color) e o valor desta propriedade (purple):

<style>
p{
 color: purple;
}
</style>

Verifique este exemplo diretamente no código HTML:

<!doctype html>
<html lang="pt-br">
<head>
     <meta charset="utf-8">
              <style>
p {
     color: purple;
}
              </style>
     <title>Digite o título de seu website</title>
</head>
<body>
     <h1> Digite alguma chamada para o texto </h1>
     <p> Digite o texto </p>
     <!-- este comentário não irá aparecer/-->
</body>
</html>

Como Aprender HTML e CSS de modo simples e prático

Após esta breve introdução sobre o HTML e CSS, é possível compreender a importância destas duas linguagens na programação web, elas são importantes para a estrutura e funcionalidades de um website. São através delas que bilhões de páginas web são disponibilizadas no mundo todo.

Existem diversos materiais gratuitos na internet que te possibilita aprender mais a fundo o HTML e o CSS. Pesquise também por livros e cursos online sobre programação web para aprofundar seus conhecimentos.

Para te ajudar no seu processo de aprendizagem vou citar 3 sites que considero excelentes para iniciar o aprendizado, mas deixo claro que apenas com seu esforço de dedicação, você vai conseguir colher bons frutos.

W3Schools

W3Schools é um site educacional voltado ao aprendizado de tecnologias web. Seu conteúdo inclui tutoriais e referências relacionadas a HTML, CSS, JavaScript, JSON, PHP, Python, AngularJS, SQL, Bootstrap, Node.js, jQuery, XQuery, AJAX, XML, e Java.

Khan Academy

No Khan Academy você vai aprender em poucos minutos a criar um site utilizando HTML e CSS. E ainda vai poder praticar exercícios.

Scripbrasil

No ScriptBrasil vai encontrar várias apostilas de HTML e CSS, o melhor é que vai achar muitas apostilas atualizadas para 2020.

Ficou Alguma Dúvida?

Portanto, espero que tenha gostado do artigo, porém não fique apenas na teoria, mas comece a estudar hoje mesmo e aprenda essa tecnologia que faz parte da internet. Posso garantir que isso pode ser um grande ponto relevante no seu currículo ao se candidatar para uma vaga.

Se você quiser aprender com mais detalhes sobre HTML e CSS o curso que eu indico é esse aqui, esse é o treinamento que vem ajudando milhares de pessoas.

Lá tem vários módulos completos sobre a estrutura de site, ensinando com muito mais detalhes o que eu abordei nesse artigo.

Você irá aprender também a desenvolver sistemas, Web Sites e Aplicativos totalmente do zero de forma prática e direta.

Enfim, espero ter te ajudado de alguma forma com as dicas desse artigo.

Se você gostou, compartilhe esse artigo nas redes sociais ou deixe um comentário aqui, adorarei saber a sua opinião.

Forte abraço!

Robson

______________________________

Referência:

Eis D. e Ferrira E. HTML e CSS com farinha e pimenta. Edição e Design – Angela Yonamine. Disponível em: https://bit.ly/3b8R3gy Acessado em 04/05/2020.