Nesse guia para iniciantes eu vou te mostrar o que você precisa saber sobre o HTML. Garanto que depois de ler, você vai conseguir esboçar os seus primeiros códigos na web.
Só lembrando que o HTML, como vimos nesse post, é uma linguagem de marcação de hipertexto criada por Tim Berners-Lee no fim da década de 80.
Sabendo disso, vamos começar a nossa leitura.
Tópicos que você vai ver
1. Diferença entre site e aplicação web
2. Elementos da internet
3. Estrutura do HTML
4. Elementos do HTML
5. Primeiros passos em HTML
6. Formatando o texto
7. Listas
8. Links
9. Imagens
10. Tabelas
11. Formulários
Qual a diferença entre um site e uma aplicação web?
Quando não há muita interatividade por parte do usuário, como a inserção de um cadastro ou o preenchimento de inúmeras informações, pode-se dizer então que a página é um site.
Um site difere de uma aplicação web em vários pontos. Geralmente o site é feito para se parecer mais com uma vitrine de loja, para atrair pessoas, enquanto que uma aplicação se parece com uma máquina que desempenha uma função.
Assim, a função da máquina não é atrair pessoas, mas sim, executar atividades. Então, um site é feito pensando em seu design, sua estrutura sob as ferramentas de SEO – que otimizam a internet – e sua atratividade.
Já a aplicação não. Apesar de que hoje em dia as aplicações possuem design intuitivo, não é o seu foco se concentrar nisso. O seu foco é a “máquina” em si.
Pense assim: as aplicações web são como os sistemas feito para desktops, só que na internet. Em vez de armazenar os dados no próprio computador ou em algum servidor da empresa, eles são armazenados em nuvens.
Isso proporciona muito mais segurança e fluidez aos dados.
Resumo:
- Site: possui menos interatividade, é como uma vitrine, todo o seu conteúdo é feito para atrair o seu público ideal. O seu foco é o design, conteúdo e SEO.
- Aplicação Web: alta interatividade com o usuário, se assemelha a um sistema de gerenciamento ou administração de uma empresa. O seu foco não é conteúdo nem SEO.
Elementos da internet
Para avançarmos no entendimento do HTML, temos de conhecer alguns elementos sobre a internet:
- Design responsivo: não se faz site pensando somente no computador. Atualmente os layouts dos sites são criados em primeiro lugar pensando no telefone e depois no computador. Portanto, um design responsivo é aquele que se adapta a qualquer tipo e tamanho de tela. Isso quer dizer que o layout não perde elementos, botões ou imagens ao “encolher” a tela.
- Web Servers: são computadores em que os sites ou aplicações web são armazenados. Também chamados de servidores.
- Protocolo HTTP: mensagens trocadas entre o navegador e o web server. Essas mensagens são as requisições feitas pelo navegador até o web server e a resposta que ele encaminha como retorno.
- Endereço IP: tudo o que se conecta à internet possui uma sequência numérica que os identifica na rede. Essa sequência de números é chamada de endereço IP.
- Domínio: como os endereços ips são complicados de memorizar, foi criado o domínio, com letras e endereços. Quando você digita o endereço de um site, isso é basicamente o seu domínio.
- DNS: o dns serve para “traduzir” um determinado domínio em endereço IP. Ou seja, ele procura descobrir qual é o endereço IP de um domínio.
- Client-side: é o usuário/navegador – front-end.
- Server-side: servidor – back-end.
Estrutura do HTML
O HTML é uma linguagem bem estruturada. Os seus elementos são hierarquicamente organizados. Assim, tudo o que você for desenvolver tem o seu determinado lugar para escrever.
O código em geral é escrito dentro de tags. Tags são palavras-chaves delimitadas pela abertura e fechamento de < > ou sinal de menor e maior.
O Manual do Freelancer
Elementos do HTML
No HTML há dois tipos de elementos: normal elements e void elements. A diferença básica entre eles é que para os normal elements, os elementos são abertos e fechados com uma tag.
Ex: <head> </head>, <body> </body>
Já nos void elements, não há fechamento de tag. Geralmente eles não possuem conteúdo em si.
Assim eles são abertos e fechados com apenas uma tag.
Ex: <br />
<!Doctype>
Define o tipo do documento que vai ser acessado. Nesse caso, o Doctype html indica que a versão do HTML é a última, a 5.
<head>
A principal função do elemento <head> é agrupar informações sobre o documento HTML. Aqui também ficam definidas todas as informações que o navegador precisa saber sobre o site, como o título, autor, linguagem, etc.
<body>
Todo o conteúdo e códigos da página ficam dentro da tag <body>.
Comentários
São feitos dentro das tags:
<!-- escreva seu comentário aqui -->
Títulos
No HTML, os títulos são hierarquizados. São definidos pelas tags: <h1>, <h2>, <h3>… etc.
Sendo que o <h1> é o título principal e maior em comparação aos outros.
O Manual do Freelancer
O Manual do Freelancer
Primeiros Passos em HTML
Para começar, vamos baixar o Atom. Ele é um excelente programa para desenvolvimento web.
Você também pode escrever os seus códigos no bloco de notas, mas além de ser mais complicado, você não consegue ver onde errou ou onde está o problema.
Depois de acessar o site, baixe o programa onde está escrito download:
O Manual do Freelancer
Depois de instalado, abra o Atom e crie um novo arquivo.
O Manual do Freelancer
Depois de criado o arquivo, salve-o com um nome qualquer seguido por .html.
É importante para que o arquivo html abra no seu navegador, que a sua extensão seja salva com .html.
O Manual do Freelancer
Mesmo que você faça os seus códigos no bloco de nota, ainda assim você precisa salvar com essa extensão, senão ele não abre no navegador.
O Manual do Freelancer
Pronto. Agora o seu arquivo poderá ser aberto pelo navegador. É só clicar duas vezes.
O Manual do Freelancer
Escrevendo o tão famoso OLÁ MUNDO
Abra o Atom e escreva o seguinte código:
O Manual do Freelancer
Depois de salvar – ctrl + s, clique no arquivo duas vezes ou atualize a página caso ele esteja aberto em seu navegador.
O Manual do Freelancer
Se na sua página também apareceu o que está escrito ali em cima, parabéns, você conseguiu escrever o seu primeiro código.
Caso não tenha aparecido, volte com calma e verifique o seu código.
Pode ser que você tenha se esquecido de fechar ou abrir alguma tag ou ter digitado alguma palavra errada.
Formatando o texto
Para continuarmos, vou te mostrar as principais tags do html e como você pode estruturar o seu conteúdo a partir delas.
Parágrafo <p>
Muito utilizada, a tag <p> abre e fecha parágrafos em seu conteúdo. Vamos praticar. Abra o Atom e escreva em dois parágrafos:
O Manual do Freelancer
Depois, atualize a sua página e veja o resultado:
O Manual do Freelancer
Percebeu a diferença entre esse código e aquele dos títulos?
Quando a gente usa as tags de título, há a formatação em blocos que além de dar espaçamento automático, deixa o texto em negrito.
Aqui, a tag <p> apenas cria um novo parágrafo.
Usamos a tag <p> porque o HTML não consegue criar um parágrafo quando apertamos um enter.
É preciso dizer a ele que será criado um parágrafo.
Quebra de linha <br>
Do mesmo modo que você tem que dizer ao HTML que é preciso criar um parágrafo, quando você quiser quebrar uma linha, você tem de usar a tag <br>.
O Manual do Freelancer
Veja que eu não coloquei a quebra de linha no primeiro parágrafo para analisarmos.
O Manual do Freelancer
Percebeu a diferença entre o parágrafo com <br> e o <p>. A tag <p> cria um parágrafo, mas ela não faz a quebra de linhas. Já a tag <br> é especialmente para isso.
Ênfase em itálico <em>
Não é utilizado a tag <i> para deixar um elemento em itálico. Para deixar em itálico coloca-se o elemento dentro da tag <em>.
O Manual do Freelancer
Escreva o código acima e atualize a página:
O Manual do Freelancer
Ênfase em negrito <strong>
Para dar ênfase em negrito não usamos os atalhos que utilizamos no word. A tag para dar ênfase em negrito é <strong>.
O Manual do Freelancer
Copie o código e atualize o navegador:
O Manual do Freelancer
Desse jeito nós temos um texto já formatado com quebra de linha, ênfase em itálico e negrito.
Não é coisa de outro mundo dar os primeiros passos em HTML. Por isso que muitas pessoas a escolhem para ingressar na programação.
Só lembrando que o HTML não é uma linguagem de programação, mas sim de marcação de texto.
Texto Sobrescrito <sub>
Para escrevermos uma palavra, frase ou texto sobrescrito, usamos a tag <sub>.
O Manual do Freelancer
Copie o código e atualize o seu navegador:
O Manual do Freelancer
Como você pode perceber, o texto sobrescrito é bem menor quando comparado com os outros.
Texto Grifado <mark>
A tag que grifa o texto é a <mark>. Copie o código abaixo:
O Manual do Freelancer
Depois, atualize o navegador:
O Manual do Freelancer
Listas
Vamos agora aprender a criar listas. Existem 3 tipos de listas no HTML:
- lista de descrições
- lista com ordem
- lista sem ordem
Lista de descrições
Na lista de descrições, temos um termo, palavra ou frase e logo abaixo a sua descrição. Para se criar uma lista, utilizamos a tag <dl>. Assim, o termo escrevemos dentro da tag <dt> e a sua descrição escrevemos dentro da tag <dd>.
Observe o código:
O Manual do Freelancer
Agora, depois de copiado, atualize o seu navegador:
O Manual do Freelancer
Você percebe como há um recuo na descrição e como o bloco do parágrafo já é formatado automaticamente?
Lista com ordem
Na lista com ordem temos os itens enfileirados a partir de uma sequência. São parecidas com aquelas listas do word ou do Google Docs, os famosos bullets points.
Para criar uma lista com ordem numerada, utilizamos a tag <ol> e dentro dela, para escrever os itens, utilizamos a tag <li>. Observe:
O Manual do Freelancer
Atualizando o navegador temos:
O Manual do Freelancer
Lista sem ordem
Segue basicamente o mesmo procedimento da lista anterior, só que em vez de abrir a lista com a tag <ol>, abrimos com a tag <ul>. Os itens são descritos dentro da tag <li>.
O Manual do Freelancer
Depois de atualizar o navegador:
O Manual do Freelancer
Veja que a lista sem ordem é a debaixo. É legal comparar as duas e perceber o que a gente pode criar apenas com o básico de HTML, não é?
Links
O grande trunfo do HTML quando foi criado, foi exatamente a possibilidade de “linkar” páginas por meio de links.
Os links promovem a ligação com o conteúdo que vemos hoje na internet.
Sem contar que é um dos grandes fatores para o alto ranqueamento de um site nas pesquisas dos motores de buscas.
Inserimos um link por meio da tag <a>. Essa tag possui o atributo href que indica o caminho exato de uma outra página, arquivo ou multimídia.
O Manual do Freelancer
Perceba que quando queremos escrever uma palavra para receber o link, o fazemos entre o link e o fechamento da tag <a>.
Atualize o seu navegador e veja:
O Manual do Freelancer
Você obviamente percebeu que o link abriu na mesma página. O atributo href também possui outros atributos que delimitam se o link vai abrir ou não na mesma página, em outra página ou em outra aba.
Blank
Esse atributo abre o seu link em outra aba/janela.
O Manual do Freelancer
Depois das aspas do seu link, você escreve o atributo target e então escolhe como quer que o link abra o seu destino.
Self
O self abre o link na mesma janela.
O Manual do Freelancer
Vou deixar para você testar o top e o parent.
Ancoragem de links (Sumário)
A ancoragem de links é basicamente como um sumário que criamos em um editor de texto. Ele consegue pegar um bloco de uma mesma página e linkar.
Contudo, para fazer a ancoragem temos de identificar os elementos com um id e sua referência: #.
Primeiro, temos de criar um id para os tópicos que receberão a ancoragem:
O Manual do Freelancer
Perceba que dentro dos <h2> há um id com uma identificação.
Na hora em que formos ancorar, temos de chamar esse id juntamente com o símbolo #. Veja:
O Manual do Freelancer
Eu agrupei os links em títulos <h4> para ficar mais organizado. Teste sem e vai perceber que um ficará ao lado do outro.
O Manual do Freelancer
Imagens
A tag <img> insere imagens em sua página web.
Ela possui o atributo src, que serve para indicar o caminho de onde está a imagem.
A tag <img> também possui outro atributo muito importante, o alt, um texto alternativo que serve para dizer ao Google sobre o que é a imagem caso ela não consiga carregar.
O Manual do Freelancer
O link da imagem é esse aqui:
https://www.google.com/doodles/30th-anniversary-of-the-world-wide-web
Basta copiar e colar no atributo src.
O Manual do Freelancer
E é assim que a imagem deve aparecer em seu navegador. Se não deu certo, volte e analise o seu código.
Tabelas
Criamos as tabelas dentro do elemento <table>. A tag <table> possui ainda mais três elementos:
- <tr>: representa as linhas da tabela
- <th>: representa os títulos da tabela
- <td>: representa os dados da tabela
Para cada linha que formos criar, temos que abrir e fechar a tag <tr>.
O Manual do Freelancer
Atualize o navegador:
O Manual do Freelancer
E é assim que ficou a nossa tabela.
Inserindo título na tabela
Para colocarmos um título, basta usarmos a tag <caption>.
O Manual do Freelancer
Atualizando o navegador:
O Manual do Freelancer
Formulários
Se você planeja estudar para desenvolver sites, saiba que chegará o momento em que precisará criar os tão famosos formulários.
Só que aqui nesse guia, eu vou te mostrar apenas o básico de como fazê-los em HTML.
Nós criamos formulários com a tag <form>.
Essa tag possui o atributo <action> que delimita para onde os dados capturados serão enviados.
Lembrando que os formulários contêm as caixas de textos, checkbox, radio buttons e etc.
Caixa de Texto
As caixas de textos são adicionadas por meio da tag <input>. Essa tag possui o atributo type. Para criar então uma caixa de texto, devemos dizer ao atributo type que ele receberá o valor do tipo text.
O Manual do Freelancer
Para criarmos qualquer tipo de formulário, precisamos abrir primeiro a tag <form>. Sobre o action já falamos ali em cima e sobre o method, vamos falar no tópico seguinte.
O Manual do Freelancer
Se você está se perguntando o porquê de o “nome” não ter aparecido em algum lugar nesse formulário, você é um bom observador.
Quando colocamos o nome no atributo name, estamos apenas identificando o elemento.
Veremos como colocar um label mais adiante para dizer ao usuário o que ele terá de escrever.
Parâmetros GET e POST
Quando a gente adiciona alguma dado nos formulários, estes aparecem na URL da página. Isso é complicado, pois eles ficam expostos. Imagine inserir o login com a senha e eles aparecerem na URL?
Por isso, o parâmetro post oculta os dados da URL e o get os mostra na URL.
Label
Os labels são aqueles textos que aparecem ao lado da caixa de texto, dizendo ao usuário o que ele precisa digitar.
Os labels precisam estar agrupados às suas caixas de textos e para isso, deve-se atribuir a identificação a eles.
O Manual do Freelancer
Perceba que os dados vão por padrão para a página index.html no atributo action. Já na tag <label>, o for recebe como parâmetro o id da caixa de texto.
O Manual do Freelancer
E assim foi criado o nosso primeiro formulário.
Dicas (Placeholders)
Sabe quando a gente vai digitar alguma coisa na caixa de texto e dentro dela já tem uma dica sobre o que temos que escrever?
Então, o nome disso é placeholder.
O Manual do Freelancer
É fácil incluir um placeholder. Basta adicioná-lo após o nome, dentro da tag <input>.
O Manual do Freelancer
Botões de Submissão – submit
São esses botões que enviam os dados do formulário para o servidor.
Eles também utilizam a tag <input>, porém o tipo é igual a submit.
Para adicionar o nome ao botão, basta escrevê-lo no atributo value.
O Manual do Freelancer
Atualizando o navegador:
O Manual do Freelancer
Botão com Imagem
O botão acima não possui a funcionalidade de adicionar uma imagem. No entanto, caso você queira anexar uma imagem, observe:
O Manual do Freelancer
Em vez do type receber o atributo submit, ele vai receber o button.
Escolha uma imagem de sua preferência e teste para ver se vai dar certo.
Botão de Upload
Esse botão permite o envio de arquivos.
Por isso, o tipo dele é igual a file. Perceba que para esse botão funcionar, é preciso adicionar um trecho de código no formulário: enctype = “multipart/form-data”.
O Manual do Freelancer
Observe como o HTML é fantástico e já formata tudo! Não escrevemos nada no botão e veja o que aparece:
O Manual do Freelancer
Caixa de Busca
Sabe aquelas caixas que a gente costuma pesquisar uma palavra-chave nos sites e blog? Então, é assim que se faz:
O Manual do Freelancer
Repare na oitava e nona linha do código.
O tipo da caixa de input da caixa de busca tem que ser search.
Agora veja como o navegador nos apresenta:
O Manual do Freelancer
O mesmo você pode fazer para adicionar campos para e-mail, telefone e etc.
O Manual do Freelancer
Atualizando o navegador:
O Manual do Freelancer
Gostou do guia? Tem alguma dúvida ou quer saber sobre algo que eu não coloquei aqui? Comente abaixo que eu certamente vou adicionar ao guia.
Ah, e ele sempre será atualizado viu? Se quiser saber algo mais, não deixe de consultá-lo.
Bons estudos.
Fonte: Apostila K19 – Desenvolvimento Web com HTML, CSS e JAVASCRIPT.
Redatora especialista em Inbound Marketing e futura Desenvolvedora Web. Apaixonada por LOTR, HP e Douglas Adams. Estudante do curso de Análise e Desenvolvimento de Sistemas.