HTML Básico: Iniciando no desenvolvimento WEB com HTML

HTML Básico: Uma introdução ao mundo do Desenvolvimento Web HTML

Se você pretende criar um site, aprender o HTML básico é uma das melhores coisas que você pode fazer! Independentemente se pretende trabalhar com wordpress, web designer ou desenvolvimento web, conhecer o básico do HTML é essencial. Esse conhecimento permite compreender como funciona uma página web e seus elementos. Dessa forma, você pode estar criando seus próprios documentos e páginas HTML. Poderá também utilizar desses recursos para fazer alterações e manutenções em páginas já existentes.

Ao final deste artigo, você terá um conhecimento do HTML Básico. Portanto, conhecerá o suficiente para realizar as sugestões acima. Dessa forma, também será possível avançar seus estudos a um nível intermediário e avançado para começar a criar páginas profissionais.

Este artigo está dividido nos seguintes tópicos:

O que é o HTML

O HTML (HyperText Markup Language) não é uma linguagem de programação, mas sim de marcação. Portanto, isso significa que não podemos usar o HTML para criar funcionalidades dinâmicas. Entretanto, o HTML possibilita a organização e formatação de documentos, similar ao que fazemos em editores de texto, como o Microsoft Word.

O HTML é uma linguagem de marcação de HiperTexto utilizada para estruturar um documento ou página para a Web. Ou seja, ao visualizar uma página na internet, você estará vendo a renderização de uma código criado em HTML em conjunto com outras linguagens.

Ou seja, a linguagem HTML permite criarmos um código que será renderizado pelos navegadores. Portanto, será mostrado o resultado dessa renderização ao cliente. Dessa forma, todas as páginas que você acessar pela internet são códigos escritos em linguagem de máquina. Os pilar básico do desenvolvimento web Front End são as linguagens HTML, CSS e JavaScript.

O HTML é utilizado para marcar os elementos da página, ou seja, para estruturar a página. O CSS permite que possamos aplicar estilos aos elementos através de estilo em cascata. Ou seja, com o CSS, temos controle e modificamos a parte visual da página.  Já o JavaScript é uma linguagem de programação que permite adicionar interação dentro da sua página.

Portanto, se você deseja criar qualquer página da internet, saber pelo menos o HTML básico é muito importante.

Atualmente o HTML se encontra na sua versão 5, o HTML5, e é padronizada pela W3C (World Wide Web Consortium), uma organização internacional responsável por estabelecer padrões para a internet, como as linguagens XML, CSS e o SOAP.

Recomendamos também a leitura do nosso artigo sobre O que é o HTML, onde poderá compreender melhor sobre sua história, sua evolução e muito mais.

Como funciona o HTML

Um documento HTML nada mais é que um documento contendo a extensão .html ou .htm. A partir deste documento o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário final possa visualizá-lo. Portanto, os arquivos .html ou .htm podem ser visualizados em qualquer navegador (como Google Chrome, Opera, Safari, Mozilla Firefox, etc).

Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html distintos, sendo uma para cada página do website.

Dentro desse documento, são escrito diversas linhas de códigos de marcação, ou seja, elementos do HTML. Esses elementos se dividem entre as tags HTML e o seu conteúdo.

Para poder criar ou editar um documento HTML, o único recurso que você precisa é de um editor de texto, como o próprio bloco de notas. Porém, para o desenvolvimento recomenda-se utilizar editores especializados, como o Sublime Text, o Notepad++, o Visual Studio Code, entre outros. Portanto, verifique qual o editor de texto que mais se adapta ao seu gosto e utilize-o para criar seus códigos! Para fins de estudos e testes, recomendamos também o Code Pen, uma ferramenta completa para teste de códigos HTML, CSS e JavaScript diretamente do navegador.

O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.

As Tags do HTML

As tags são parte dos elementos do HTML. São usadas para informar ao navegador a estrutura do site. Ou seja: quando se escreve um código em HTML, as tags serão interpretadas pelo navegador, produzindo assim a estrutura e o conteúdo visual da página.

A principal característica das tags é estarem sempre dentro dos sinais de chevron (sinal de “maior que” e “menor que”), ou seja: < >.

As tags HTML são divididas em dois tipos: as que precisam de fechamento e as que não precisam de fechamento. As tags que precisam de fechamento possuem a sintaxe <tag></tag>, já as que não precisam de fechamento possuem como estrutura <tag/>.

Além disso, uma mesma Tag pode receber um ou mais atributos, que possuirá um valor que modifica sua estrutura ou funcionalidade. Os atributos nada mais são que propriedades capazes de modificar e personalizar a funcionalidade de uma tag. Portanto, podemos utilizar diversos atributos, como largura, altura, dentre outros. Com a versão do HTML5, boa parte dos atributos referente a estilização deixaram de ser utilizados, passando a ser estilizado através do CSS.

Você pode estar estudando mais a respeito das principais Tags do HTML através do nosso artigo sobre as tags HTML.

Estrutura básica de um documento HTML

A estrutura básica de um documento HTML, ou seja, de uma página da web, é realizada da seguinte forma:

A partir desse código, podemos desenvolver toda nossa páginas, estruturalizando como precisarmos. Mas primeiro, é bom compreender o que está sendo feito até o momento:

  • <!DOCTYPE html> — A declaração do doctype informa ao navegador que esta sendo utilizado a linguagem HTML . Hoje em dia, o doctype basicamente é necessário apenas para garantir que o documento se comporte corretamente. Caso queira saber mais a respeito, pode estar lendo nosso artigo sobre Doctype HTML.
  • <html></html> — O elemento <html> envolve todo o conteúdo da página HTML.
  • <head></head> — O elemento <head> é o local ao qual você irá incluir todos os elementos que deseja incluir na página mas que não deve ser renderizado. Dentre eles, podemos utilizar os metadados, o título, as tags <link> para adicionar folhas de estilos, entre outras.
  • <meta charset=”utf-8″> — Esse elemento de metadados, serve para definir o conjunto de caracteres que seu documento deve usar para o utf-8.
  • <title></title> — O elemento <title> serve para definir o título de sua página. Portanto, é aqui que se define o título que é mostrado na guia do navegador.
  • <body></body> — Finalmente, o elemento <body>. Aqui é onde ficará todos os elementos que serão renderizados pelo navegador, ou seja, todo o corpo da sua página HTML.

Tags importantes para o HTML Básico

Atualmente, no HTML5, já é possível encontrar mais que 140 tags HTML. Porém, boa parte dessas não são muito utilizadas, e no dia a dia do desenvolvimento, geralmente encontraremos as mesmas tags sendo utilizadas. Vejamos abaixo uma tabela contendo as tags mais utilizadas e mais importantes para dominar o HTML Básico:

Tag Descrição
<style></style> introduz um código CSS ao documento HTML.
<script></script> introduz um código de Script, como JavaScript, ao documento HTML.
<link/> possibilita fazer uma linkagem com documentos locais ou globais, como por exemplo fontes ou folhas de estilos.
<meta/> possibilita incluir metadados a página.
<h1></h1>,
<h2></h2>,
<h3></h3>,
<h4></h4>,
<h5></h5>,
<h6></h6>
Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância.
<p></p> Tag para definir um parágrafo.
<span></span> define um span.
<br/> realiza uma quebra de linha.
<a></a> Tag de link, junto ao atributo href=”…” é responsável pela principal característica da web. (veja mais aqui)
<header></header> define um cabeçalho – tag estrutural e semântica.
<section></section> define uma seção – tag estrutural e semântica.
<article></article> define um artigo – tag estrutural e semântica.
<div></div> define uma divisão – tag estrutural.
<footer></footer> define um rodapé – – tag estrutural e semântica.
<nav></nav> define uma área de navegação (como menus) – tag estrutural e semântica.
<table></table> define uma tabela (veja mais aqui)
<tr></tr> define uma linha da tabela (veja mais aqui)
<td></td> define uma célula da tabela (veja mais aqui)
<ol></ol> define uma lista ordenada.
<ul></ul> define uma lista não ordenada.
<li></li> define o item de uma lista.
<form></form> define um formulário (veja mais aqui)
<input> define os campos do formulário (veja mais aqui)
<textarea></textarea> define uma área para o usuário digitar um texto (veja mais aqui)
<button></button> define um botão.
<img/> permite inserir uma imagem no seu documento (veja mais aqui)
<iframe></iframe> define um quadro com conteúdo de outra página (veja mais aqui)
<video></video> define um campo de vídeo.

Antes de prosseguir, recomendamos que leia todos os tópicos anteriores desse artigo. Também recomendamos que já tenha lido também os nossos artigos sobre Tags HTML, O que é HTML e também sobre o HTML5.

Classes e IDs no HTML

A utilização de classes e IDs são amplamente utilizadas dentro do nossos elementos HTML. Eles definem um classe ou uma ID única a uma ou mais tags HTML. Sua maior utilidade é para manipulação dos elementos, tanto através do CSS quanto de scripts. Portanto, entender como funcionam é uma das prioridades para se entender o básico do HTML.

classes

Para atribuir uma ou mais classes ao elemento basta incluir o atributo class=”…”.

Por exemplo, se temos diversos elementos de parágrafo, e queremos que os dois primeiros recebam a classe “blue” e os dois últimos a classe “red”, podemos fazer conforme o código abaixo:

Digamos também que eu queira que o primeiro elemento das classes acima receba também uma classe chamada “primeiro”. Para isto, basta eu estar acrescentando a classe primeiro, separadas apenas com um espaçamento entre ela e as demais classes:

Portanto, podemos incluir uma ou mais classe a qualquer elemento, e além disso, vários elementos podem estar recebendo uma mesma classe.

No CSS, JavaScript e outros, para poder estar reconhecendo e selecionando uma classe, utiliza um “.” e o nome da classe. Ou seja, nos casos acima, utilizaríamos “.blue“, “.red” e “.primeiro“.

IDs

Já os ID são parecidos com as classes, porém eles são únicos. Só podem ser utilizadas em um único elemento, portanto não podem ser repetidos. Para declarar a id, basta chamar o atributo id=”…”. Portanto, digamos que eu tenha 3 <div> e desejo que a primeira receba o ID do “primeira_div“, para isso basta usar o código abaixo:

Portanto, ao declarar a id “primeira_div” à primeira <div>,  nenhum outro elemento do meu HTML, mesmo que referente a outra TAG, deverá receber esta ID. Ela é única e exclusiva deste elemento.

Diferentemente das classes, uma ID é reconhecida e seleciona no CSS, JavaScript e outros através do “#“. Ou seja, no exemplo acima, a id seria reconhecida no CSS por “#primeira_div“.

Um elemento pode receber mais que um ID, porém recomenda-se utilizar apenas um único ID em um mesmo elemento.

Mesclando Classes e ID

Apesar de terem utilidades parecidas, porém diferentes, as Classes e os IDs são atributos que podem ser utilizados em conjunto. Um elemento que receba uma ID também pode receber uma ou mais classes. Além disso, uma classe pode receber o mesmo nome que uma id, e vice-versa, sem que isso afete sua funcionalidade. Porém, para melhor organização, é recomendado evitar essa prática e manter os nomes sempre diferentes entre ids e classes.

Vejamos então os exemplo abaixo:

Criando uma página com elementos do HTML Básico

Neste momento, se você leu e acompanhou os tópicos anteriores, já pode-se dizer que compreende o Básico do HTML. Porém, assim como qualquer linguagem de computação, seja de marcação ou programação, uma das coisas mais importantes a se fazer é praticar. Portanto, vamos agora colocar em prática nossos estudos.

Vamos criar uma página utilizando o básico do HTML passo a passo. Observe que não vamos utilizar o CSS e nem o JavaScript. Porém, com essa estrutura nossa página já estará pronta para depois receber uma estilização e interações, através do CSS e do JavaScript.

HTML Básico: 1º passo – Criando uma página

Inicialmente vamos criar um documento com a extensão .html. Vamos utilizar como exemplo o arquivo index.html. Posteriormente vamos iniciar criando uma estrutura básica do HTML e inclui um título. Observe que vamos incluir um atributo lang com o valor pt-br a nossa tag <html>. Dessa forma, o nosso navegador e os mecanismos de busca entenderão que nosso documento HTML se trata de um documento no idioma Português do Brasil (pt-br). Portanto, vejamos o código da nossa página abaixo:

HTML Básico: 2º passo – Criando nosso Cabeçalho

Agora que já criamos nossa estrutura básica, vamos criar nossa primeira divisão da página HTML. Inicialmente vamos criar um Header básico no html, contendo apenas um título com uma descrição e um menu, em forma de lista não ordenada. Porém, por enquanto, vamos manter nosso menu a lista contendo apenas itens sem descrição. Ao finalizar nosso projeto, voltamos a mexer nessa parte.

Dessa forma, nosso código agora será:

Portanto, nossa página já começa a ganhar vida. Se abrir o arquivo no nosso navegador, já podemos visualizar a página como na imagem abaixo:

Exemplo 01 de HTML Básico

HTML Básico: 3º passo – Criando nossa primeira sessão com artigos

Agora que já criamos nosso cabeçalho, vamos continuar a formatação da nossa página inserindo elementos de texto. Inicialmente vamos incluir uma divisão <main> pois conterá nosso conteúdo principal da página. Posteriormente vamos criar uma sessão e dentro dela, vamos incluir dois artigos, onde um deles conterá também a imagem abaixo, que deverá ser salva na mesma pasta do nosso documento HTML.:

img_exemplo para utilizar em nossa página

Portanto, vamos acrescentar ao nosso código:

Agora nossa página já começa a ganhar uma complexidade maior. Vejamos na imagem abaixo como deve ficar nossa página com os exemplos do código:

Exemplo 02 de Html Básico

HTML Básico: 4º passo – Criando nossa segunda sessão com iframes e uma tabela

Agora que já criamos o conteúdo principal, vamos criar uma segunda sessão utilizando os recursos de iframes e também contendo uma tabela contendo as tags de título. Portanto, vejamos abaixo a continuação do nosso código:

Dessa forma, esta sessão da nossa página ficará como no exemplo da imagem abaixo:

Exemplo da sessão da nossa pagina

HTML Básico: 5º passo – Criando nossa terceira sessão com um formulário de “contato”

Anteriormente criamos sessões contendo textos, imagem e até mesmo iframe. Nesta sessão, vamos atribuir um id contato. Portanto, vamos incluir nela um formulário de contato.

Neste artigo, por se tratar de HTML Básico, não vamos explicar muito a respeito de como enviar um formulário. Porém, posteriormente você você pode estar se estudando no nosso artigo sobre Formulários HTML. Desta forma você estará apto a incluir formulários com envio para e-mail.

Vamos continuar com a nossa página de HTML Básico, criando agora a seguinte sessão contendo formulário:

Com esse código, agora vamos verificar que ao abrir nossa página ela conterá um formulário ao final. O resultado será como na imagem de exemplo abaixo:

Criando um formulário de contato ao nossa página HTML

HTML Básico: 6º passo – Criando o rodapé da página

Agora que já criamos toda a estrutura da nossa página, vamos finalizar incluindo nela um rodapé. Este rodapé conterá apenas uma mensagem. Portanto, vejamos o código do nosso rodapé abaixo:

Com isso, logo abaixo do nossa sessão contato, temos então o rodapé conforme a imagem abaixo:

Criando um rodapé para nossa Pagina HTML Básico

HTML Básico: 7º passo – Ajustes finais

Ao chegar até aqui, significa que já concluímos toda nossa página. Porém lembra-se que criamos em nosso cabeçalho um menu que modificaríamos depois?

Pois bem, você deve ter percebido que incluímos um ID a todas nossas sessões. Dessa forma, vamos agora modificar nosso menu, incluindo um link que ao ser clicado redirecione diretamente a nossas sessões. Portanto, nosso cabeçalho da pagina HTML agora será como no código do exemplo abaixo:

Portanto, nosso cabeçalho conterá agora um menu conforme o da imagem abaixo:

Finalizando nossa página de HTML Básico

Observe que agora, ao clicar em qualquer um dos itens da nossa lista, nossa página será direcionada diretamente para a posição dos ids referenciados no link.

Finalizamos então a nossa páginas contendo elementos de HTML Básico.

Dessa forma, você pode estar utilizando o nosso código final para estudar e modificar. O mesmo se encontra no exemplo abaixo:

Dicas para avançar seus estudos em HTML Básico e desenvolvimento Web

Neste artigo, você já pode aprender bastante a respeito do HTML. Iniciamos com explicações teóricas, e posteriormente aliando com exemplos práticos. Portanto, passamos por todo o conteúdo básico do HTML. Dessa forma, concluímos então nosso artigo deixando algumas recomendações de estudo, assim como dicas e sugestões.

Utilizando todo este artigo, você já estará apto a compreender bem um código HTML. Portanto, você também poderá dar inicio a criação de páginas HTML simples. A partir desse momento, recomendamos que se aperfeiçoe compreendendo mais sobre cada tag HTML. Também é recomendado que você pratique todos os códigos que estudou até agora.

Contudo, deixamos algumas sugestões de publicações do nosso blog que podem lhe auxiliar:

Além dos artigos acima você ainda pode encontrar diversos outros artigos que podem lhe auxiliar a avançar nos estudos sobre HTML. Portanto, também recomendamos os sites abaixo para avançar nos estudos sobre desenvolvimento Web:

Mas não deixe de ficar atento ao nosso blog. Sempre publicamos novos artigos com conteúdo atualizado e inovador! Também recomendamos que você adquira um nome de domínio e um plano de hospedagem, para poder praticar e colocar suas páginas online! A HomeHost oferece diversos planos de qualidade, segurança e velocidade!

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat