HTML Guia para Iniciantes – Desenvolva em poucos minutos!

html: guia para iniciantes

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.

html: guia para iniciantes

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.

html: guia para iniciantes

O Manual do Freelancer

html: guia para iniciantes

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:

html: guia para iniciantes

O Manual do Freelancer

Depois de instalado, abra o Atom e crie um novo arquivo.

html: guia para iniciantes

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.

html: guia para iniciantes

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.

html_guia_para_iniciantes

O Manual do Freelancer

Pronto. Agora o seu arquivo poderá ser aberto pelo navegador. É só clicar duas vezes.

html_guia_para_iniciantes

O Manual do Freelancer

Escrevendo o tão famoso OLÁ MUNDO

Abra o Atom e escreva o seguinte código:

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

O Manual do Freelancer

Depois, atualize a sua página e veja o resultado:

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Veja que eu não coloquei a quebra de linha no primeiro parágrafo para analisarmos.

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Escreva o código acima e atualize a página:

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Copie o código e atualize o navegador:

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Copie o código e atualize o seu navegador:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

O Manual do Freelancer

Depois, atualize o navegador:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

O Manual do Freelancer

Agora, depois de copiado, atualize o seu navegador:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

O Manual do Freelancer

Atualizando o navegador temos:

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Depois de atualizar o navegador:

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Atualize o navegador:

html_guia_para_iniciantes

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>.

html_guia_para_iniciantes

O Manual do Freelancer

Atualizando o navegador:

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

O Manual do Freelancer

É fácil incluir um placeholder. Basta adicioná-lo após o nome, dentro da tag <input>.

html_guia_para_iniciantes

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.

html_guia_para_iniciantes

O Manual do Freelancer

Atualizando o navegador:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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”.

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

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:

html_guia_para_iniciantes

O Manual do Freelancer

O mesmo você pode fazer para adicionar campos para e-mail, telefone e etc.

html_guia_para_iniciantes

O Manual do Freelancer

Atualizando o navegador:

html_guia_para_iniciantes

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.

Qual é a sua opinião?