HTML e CSS - Criando a primeira página Web
Anderson Irias - 13/05/2021
No artigo de hoje veremos um tutorial básico de HTML e CSS. Vamos criar uma página Web simples, para exibir uma lista de Notas. O HTML (HyperText Markup Language), é uma linguagem de marcação onde é possível criar documentos para serem exibidos em um navegador da Web. Ele é fundamental no desenvolvimento Web, pois com ele criamos interfaces para nossos usuários.
Junto com o HTML temos o CSS (Cascading Style Sheets), que é uma linguagem de folha de estilo. O CSS é utilizado para descrever a apresentação de um documento escrito em uma linguagem de marcação como o HTML. Assim o CSS faz toda a estilização da página Web escrita em HTML.
Padrão do HTML
O HTML segue um padrão de tags que identificam os elementos da página. Assim, para adicionar um elemento em nossa página Web, adicionamos uma nova tag específica para aquele elemento.
O documento HTML é escrito em um padrão de árvore de tags. Assim temos uma tag dentro da outra, e dentro das tags podemos ter elementos. A maioria das tags tem a sua parte de abertura que se inicia com < e a parte de fechamento que se inicia com </.
Estrutura básica do HTML
Vamos começar criando a estrutura padrão de um documento HTML. Crie o arquivo index.html e cole o seguinte conteúdo nele.
<!DOCTYPE HTML>
Primeira página HTML
No início temos o DOCTYPE, que é uma instrução para que o navegador Web saiba sobre qual versão de código o documento foi criado. Depois temos nossa primeira tag que é a html. Em nossa tag html temos o atributo lang que utilizamos para indicar qual é o idioma que predomina no documento. A tag html é a raiz da marcação, assim ela é a primeira a ser aberta e a última a ser fechada. Todas as outras tags ficam dentro dela.
Depois temos nossa tag head que indica o cabeçalho do documento. No head ficam todas as informações da página. Neste exemplo temos as seguintes informações em nosso head:
- meta charset - Identifica qual a tabela de caracteres a página web está utilizando.
- style - O CSS utilizado para estilizar a página Web.
- title - O título que é utilizado para identificar a página.
Ao finalizar o head, temos nosso body que é a tag que identifica o corpo do documento. Dentro dele vamos colocar as demais tags que irão compor nossa página Web. Neste exemplo só temos a tag h1 em nosso body. A tag h1 é utilizada para definir um título dentro da página. Essa tag vai do h1 ao h6 sendo o h1 o maior deles. Nosso exemplo ficará com a seguinte aparência.
Primeira página HTML
Esta foi uma pequena introdução sobre HTML, com essa base podemos compreender o funcionamento da linguagem de marcação. Agora vou apresentar um exemplo de uma página Web HTML completa que faz uma simples listagem de Notas. Ela utiliza o mesmo cabeçalho da página inicial do site.
<!DOCTYPE html>