Se você chegou até este artigo é provável que no mínimo saiba que o HTML é uma linguagem para construção de websites. É bem possível também que tenha interesse em descobrir sobre o processo para desenvolvimento de websites.
Pois bem. Como iniciante, começar com HTML é o caminho mais indicado, pois te trará um resultado visual mínimo em pouco tempo de estudo e porque se trata da linguagem base para estruturação de páginas web.
Tá a fim de aprender a construir páginas web? Então te convido a continuar a leitura deste artigo que vai te mostrar os princípios básicos desta linguagem que foi o ponto de partida para muitos desenvolvedores e web designers de sucesso e que pode ser o seu também.
Neste artigo você encontrará a definição de elementos, atributos, tags, termos esses comuns e relacionados ao HTML. Conhecerá alguns elementos básicos e suas estruturas de marcação. E entenderá também a estrutura de uma página web comum construída com puro HTML.
Neste artigo você verá:
- Elementos vazios
- Elementos dentro de outros elementos
- Atributos
- Estrutura básica do HTML [Montando sua primeira página web]
O que é HTML?
HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
Para que o HTML serve?
Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.
O HTML integra as linguagens que formam as camadas de desenvolvimento web
Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.
É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.
HTML – A camada que apresenta o conteúdo
Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.
O HTML é responsável por exibir o conteúdo dando-lhe significado.
CSS – A camada que dá forma aos elementos do HTML
O CSS é uma linguagem de estilização, formatação. Quando você vê um texto com determinada estilo, uma página com determinada cor de fundo ou um bloco envolto a uma borda saiba que tudo isso foi obtido com CSS.
O CSS seleciona um elemento do HTML para estilizá-lo e apresentá-lo como nova forma no navegador.
Javascript – A camada que adiciona comportamentos dinâmicos
Quando o usuário está em contato com a interface de uma página pode a qualquer momento executar uma ação que resulte em um comportamento na página. Muitos desses resultados devem-se a acionamentos de scripts criado pela linguagem Javascript.
Um exemplo bem comum de comportamento dinâmico obtido com Javascript é quando ao preencher um formulário erramos o e-mail é o sistema nos avisa.
Mas o HTML é o fundamental
O HTML é a linguagem base e a primeira que acredito que deve ser aprendida. Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.
Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.
A seguir deixo um material mais aprofundado em vídeo que ilustra bem as camadas web.
Vale a pena aprender HTML?
Se seu objetivo é mesmo construir sites, vale a pena aprender HTML. Mesmo que você tenha dúvida se é difícil ou trabalhoso, vale pelo menos começar a ter contato com a linguagem para você avaliar.
As opiniões são divididas sobre o nível de dificuldade em aprender o HTML. Lógico que a absorção de conhecimentos não é a mesma em todas pessoas, porém qualquer receio não te deve paralisar na meta de aprender.
Já nos primeiros contatos com o HTML você conseguirá visualizar resultados animadores em seu navegador com os primeiros conteúdos expostos. É isso te animará no decorrer dos estudos.
O que faz valer a pena começar a aprender esta linguagem são os fatos de você já começar a entender todo o funcionamento que envolve a confecção de páginas, a construir suas primeiras páginas, a entender e interpretar códigos para fazer a manutenção de sites e saber se comunicar com equipes de trabalho sobre detalhes que envolvem a codificação.
Sem contar que para aprender outras linguagens que envolvem a construção de sites é pré-requisito já dominar o HTML.
Requisitos para aprender HTML
Para que você aprenda HTML é suficiente ter conhecimentos básicos de informática. Também é necessário que esteja instalado em sua máquina um software que possibilite a manipulação de códigos. O bloco de notas consegue executar a tarefa e ele te força aprender por não ter nenhum recurso que autocomplete códigos.
Softwares são criados e descontinuados, por isso vou indicar dois que uso que estão ativos no momento que escrevo este artigo, e que você pode usar quando já tiver um bom domínio e quiser algo que agilize seu trabalho. São eles; o Sublime Text e o Notepad ++. Mas você é livre para pesquisar sobre editores HTML até encontrar aquele que te traga melhores benefícios.
O que são tags e o que são elementos HTML?
Quando se fala em trabalhar com códigos HTML temos em mente que existe uma forma lógica para dispor o conjunto de caracteres para construção desses códigos que mostrarão o conteúdo. Se trata da sintaxe. A forma trabalhada no HTML são através de tags.
Tags são marcas específicas, instruções que delimitam o conteúdo e informam ao navegador sobre que tipo de informação se trata (um título, um parágrafo, uma lista). Quando você enxerga um elemento visual em una página web, desde um texto, uma foto ou um vídeo, saiba que eles são inseridos através de tags.
Toda tag contém um nome (nome da marca) e este também dá designação ao elemento HTML. Elas são usadas para marcar o início e o final de um elemento. A partir daí podemos concluir que os elementos HTML são construídos por tags.
Elementos especificam como documentos HTML devem ser construídos. Através deles pode-se determinar qual tipo de conteúdo e onde ele, dentro do documento HTML, pode ser inserido e também transmitir significado semântico ao conteúdo inserido.
Vamos agora expor melhor na sintaxe HTML como as tags formam os elementos HTML.
Sintaxe HTML
Cada elemento é formado por uma tag de abertura e uma tag de fechamento. E entre essas tags é colocado o conteúdo.
Tag de abertura
A tag de abertura marca o início do elemento. Ela inicia-se com o sinal de menor <, seguindo pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.
Para exemplificar vamos usar a tag que instrui para inserção de um parágrafo (p).
Tag de fechamento
A tag de fechamento marca o fim do elemento. É similar a tag de abertura e se diferencia pelo uso de uma barra após o sinal de menor. Então, inicia-se com o sinal de menor <, seguido pelo sinal de barra ⁄, depois pelo nome da tag que representa o elemento que queremos inserir no documento HTML e finalizando com o sinal de maior >.
A seguir temos mais um vídeo que ilustra bem didática a sintaxe web. Confira!
Agora o que falta é entender como forma o elemento.
Elemento
Vamos continuar usando o parágrafo como exemplo. Para desenvolver o elemento primeiro colocamos a tag de abertura <p>, depois a informação que queremos exibir, e para encerrar a tag de fechamento </p>.
<p>Este é um parágrafo.</p>
Elementos vazios
Existem alguns elementos que possuem apenas a tag de abertura. São chamados elementos vazios ou nulos. A tag de abertura destes elementos possuem fechamento automático.
Vamos ver um exemplo com a tag usada para quebra de linha em textos:
<p>Av. Itaquera, 1000 – Itaquera<br>São Paulo - SP</p>
Neste caso vemos um parágrafo onde após o elemento <br>; a linha é quebrada e o conteúdo continua na linha seguinte.
O uso do elemento do vazio é simples assim com somente uma tag. Não existem conteúdos entre tags de abertura e fechamento como nos elementos comuns.
Em alguns casos você poderá encontrar elementos nulos com auto-fechamento. Eles geralmente são encontrados em uma versão extensível do HTML, o XHTML. O resultado das duas versões é o mesmo. Veja a seguir o resultado:
<p>Av. Itaquera, 1000 – Itaquera<br/>São Paulo - SP</p>
Elementos dentro de outros elementos (Aninhamento)
Será comum para você, quando tiver lidando com códigos HTML, ver um elemento dentro de outro. A este comportamento chamamos de aninhamento, onde se costuma também dizer que o elemento que contém, que abriga o elemento interno é o elemento “pai” (elemento ancestral) e o abrigado é o elemento “filho” (elemento descendente).
Vamos a um exemplo:
<p>O Web Designer PRO é <strong>o curso oficial de web design</strong> do Chief of Design. <strong>Não aceite imitações!</strong></p>
No exemplo acima temos um elemento pai (p) que contém dois elementos filhos (strong). Portanto strong, tag usada para enfatizar trecho de uma frase, está aninhada dentro de p.
Atributos
São instruções extras que damos a um elemento HTML para que se execute um comportamento específico. Estes atributos são inseridos nas tags de abertura.
Digamos que queremos que um texto venha a possuir uma cor vermelha. Podemos inserir na tag de abertura um atributo chamado “class”. Class se significa “classe”. Com essa classe podemos acionar a tag (que está com a determinada class) com a linguagem de formatação CSS e assim alterar a cor do texto para vermelho.
A inserção do atributo se dá da seguinte forma na tag de abertura:
- Primeiro insira o sinal de menor < seguido do nome da tag do elemento a ser inserido.
- Em seguida deixe um espaço vazio.
- Depois coloque o nome do atributo a ser usado seguido de um sinal de igual ₌.
- Logo após abra duas aspas e coloque dentro um valor para o atributo.
- Para encerrar coloque o sinal de maior >.
Um exemplo da sintaxe:
<p class="altera_Cor">Texto vermelho</p>
Nem todos os tipos de atributos são usados por todos elementos, alguns são específicos para cada tipo de elemento. Quando um atributo pode ser usado em qualquer elemento HTML ele faz parte dos atributos globais.
É importante conhecer os atributos, entretanto a princípio eu aconselho a focar em conhecer os elementos HTML para em segundo momento conhecer os atributos. Você pode consultar mais sobre atributos neste link.
Estrutura básica [Montando sua primeira página web]
Agora te explicarei em passos simples como montar sua primeira página web. Não espere nada avançado. É como aprender a dirigir: começamos pela primeira marcha. No nosso caso, uma página com conteúdo simples.
Vamos montar a estrutura mais básica usando elementos HTML estruturais comuns e fundamentais em qualquer página.
O que vamos precisar?
Você pode optar por fazer o que proponho a qualquer momento. Mas de toda forma vou te passar o processo em etapas, que no total nem leva 5 minutos para executar, e dentro das etapas explico a função de cada elemento usado.
Tudo que você precisa é abrir em sua máquina um editor de texto estilo bloco de notas ou seu editor favorito. Opcionalmente você pode até deixar preparada uma pasta para salvar este arquivo e possíveis arquivos que você venha a criar como forma de estudo.
Passo 1 – Inserção do elemento html
O elemento html é a raiz do documento. Ele é formado pela tag de abertura <html> e pela tag de fechamento </html>. Essas tags delimitam o documento.
Abra um novo documento em seu editor e digite as tags do elemento html da forma a seguir:
<html> </html>
No código acima podemos notar que iniciamos, na primeira linha com elemento raiz cuja abertura deu-se com a tag <html> e seu fechamento se concretiza na última linha com a tag </html>.
Passo 2 – Inserção do elemento head
O elemento head é responsável por abrigar elementos do cabeçalho. É comum encontras elementos para estilos, scripts e meta tags. Ele é formado pela tag de abertura <head> e pela tag de fechamento </head>. Essas tags delimitam o documento.
O elemento head é “filho” do elemento “html”.
Para esse segundo passo coloque as tags de head entre as tags de abertura e fechamento do elemento html conforme a seguir:
<html>
<head>
</head>
</html>OBSERVAÇÃO: Você pode notar que antes das tags de head existem espaços em branco. Esse comportamento é resultado da indentação. Indentação consiste em organizar seu código para que ele fique esteticamente agradável e principalmente legível.
Você pode indentar seu código usando a tecla TAB antes das tags.
Passo 3 – Inserção da meta tag que informa o formato de codificação de caracteres
Meta tags são responsáveis por fornecer informações importantes sobre o documento HTML. Com elas é possível passar informações que descrevem o conteúdo da sua página para os buscadores, informar qual o idioma usado na página, informar quem é o autor do código, entre outras funções.
Nesse passo vamos usar uma meta tag que informa o formato de codificação de caracteres. Isso para que sua página não fique com caracteres estranhos como na imagem a seguir.
Nesta meta tag usaremos o atributo charset e o valor utf-8.
Insira entre as tags de abertura e fechamento do elemento head a metag tag.
OBSERVAÇÃO: Esta meta tag é um elemento vazio.
<html>
<head>
<meta charset="utf-8">
</head>
</html>Passo 4 – Inserção do elemento title
Esse elemento é responsável pela exibição título que você vê na parte superior do seu navegador (barra de ferramentas).
Ele é formado pela tag de abertura <title> e pela tag de fechamento </title>. O conteúdo que você digitar entre essas tags será o texto que aparecerá na parte superior do navegador.
Insira entre as tags de abertura e fechamento do elemento head, e logo após a meta tag, as tags do elemento title conforme a seguir:
<html>
<head>
<meta charset="utf-8">
<title>Minha primeira página web</title>
</head>
</html>OBSERVAÇÃO: Você é livre para digitar o conteúdo que bem entender entre as tags de title. Faça o teste.
Passo 5 – Inserção do elemento body
Esse é um elemento fundamental dentro do documento HTML. Ele ilustra o corpo da página. E através dele que é possível exibir conteúdos na página. Entre as tags deste elemento é que vão ser inseridas outras tags específicas para inserção de conteúdo e divisão de seções.
O elemento body é formado pela tag de abertura <body> e pela tag de fechamento </body>.
Insira entre as tags de abertura e fechamento do elemento html, e logo após a tag de fechamento do elemento head as tags do elemento body conforme a seguir:
<html>
<head>
<meta charset="utf-8">
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>Passo 6 – Inserção do DOCTYPE
Prometi para você mostrar as tags fundamentais em uma página. Nos passos apresentados você teve contato com elas. Entretanto existem um elemento adicional importante, que não se trata de uma tag, e deve constar dentro documento HTML, Falo do DOCTYPE.
DOCTYPE é uma declaração responsável por dizer aos navegadores qual a versão do HTML que foi escrito o documento. Essa declaração deve estar posicionada no começo do documento.
A versão mais comum encontrada em sites no momento que escrevo este artigo é o HTML5. Também é a versão mais simples de declarar. Você pode conhecer os outros tipos de declaração neste link.
Aqui vou exemplificar uso do DOCTYE para o HTML5. Para declara basta que você digite o seguinte código na primeira linha de seu editor antes da tag de abertura do elemento html.
<!DOCTYPE html>
Veja a seguir como deve ficar o código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha primeira página web</title>
</head>
<body>
</body>
</html>Passo 6 – Salvar o documento HTML
Salve o arquivo no seu computador na pasta de seu escolha.
Caso use o bloco de notas, no menu selecione “Arquivo” e depois “Salvar como”.
Nomeie o arquivo “index.html”. Você pode definir até outro nome para o arquivo, porém a extensão deve ser .html.
Em tipo seleciona a opção “Todos os arquivos” e defina a codificação como “UTF-8”.
Passo 7 – Visualize a página no seu navegador
Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.
Entretanto os passos NÃO PARAM por aí, porque apesar de termos uma página HTML pronta ainda não é possível ver o conteúdo. No exemplo, você somente verá o título da página no topo do navegador.
Mas não fique decepcionado. Mostrarei mais dois elementos HTML bastante usado em páginas web que mostrarão enfim sua página com conteúdo no próximo passo.
Passo 8 – Inserção dos elementos h1 e p
O elemento h1 é responsável por exibir o título mais importante no corpo da página. Não confundir este título com o título do elemento title. Como você já sabe o title exibe o título no topo do navegador.
O elemento p é um velho conhecido. Ele é responsável por inserir parágrafos.
Esses elementos serão inseridos entre as tags de abertura e fechamento de body. Proceda conforme o código a seguir. Você pode alterar os conteúdos entre as tags dos elementos se preferir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha primeira página web</title>
</head>
<body>
<h1>Minha primeira página web</h1>
<p>Aprendi a construir minha primeira página web com o Chief of Design.</p>
</body>
</html>Salve o arquivo no mesmo local que você salvou a última vez. Seu sistema alertará se você quer substituir o arquivo. Substitua.
Após isso, vá até o arquivo e abra para visualizar no navegador. Você terá um resultado similar a este:
Lógico que é o resultado obtido foi algo simples. Ao adquirir o conhecimento sobre as outras tags existentes você pode evoluir e inserir diversos tipos de conteúdo. Com o HTML é possível inserir itens que você com certeza já interagiu navegando pela web como vídeos, imagens, listas, formulários, tabelas, áudios, entre outros.
Conclusão
Este guia só foi o pontapé inicial, mas o fundamental de uso mais constantes você já conheceu. O HTML é uma linguagem fantástica daquela que quando pegamos gosto se torna um conhecimento que sempre queremos aplica-lo e evoluir em saber mais.
Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Outras virão. Então se sinta a vontade para expor suas dúvidas na seção de comentários.
Sugiro também a leitura do artigo “18 coisas sobre HTML que eu gostaria que tivessem me dito quando comecei a criar meu primeiro site”. E que também conheça o curso do Chief of Design sobre HTML e CSS. Você pode acessar o curso de fluência em HTML e CSS clicando aqui!
Peço também que compartilhe esta artigo com amigos que também queiram se informar sobre o HTML.
Abraço!
Ed Francisco
Olá! Aqui é Ed Francisco, colaborador do Chief of Design desde suas primeiras linhas de conteúdo e de códigos.
Por falar em códigos, acredito que o HTML é a mais notável tecnologia web a qual me permitiu chegar aqui onde estou, e também escrever essas linhas sobre mim para você.
Sou formado em Tecnologia da Produção (foi aqui que conheci o HTML) e em Técnico em Produção Digital, Web e Multimídia (onde aperfeiçoei os meus conhecimentos de HTML).
Sou Paulistano da Zona Leste. Me aventuro tentando desvendar os mistérios da web desde 2008.