HTML Guia para Iniciantes – Desenvolva em poucos minutos!

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.

 

Leia também

HTML para iniciantes: como surgiu e quais são suas versões

SQL CRUD Comandos Básicos

Você sabe qual é a diferença entre GIT e GITHUB?

Quer aprender a programar? Confira aqui 25 cursos gratuitos e com certificado!

 

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.

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.

 

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:

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

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.

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.

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

Escrevendo o tão famoso OLÁ MUNDO

Abra o Atom e escreva o seguinte código:

Depois de salvar – ctrl + s, clique no arquivo duas vezes ou atualize a página caso ele esteja aberto em seu navegador.

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:

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

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

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

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

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

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

Copie o código e atualize o navegador:

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

Copie o código e atualize o seu navegador:

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:

Depois, atualize o navegador:

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:

Agora, depois de copiado, atualize o seu navegador:

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:

Atualizando o navegador temos:

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

Depois de atualizar o navegador:

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.

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:

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.

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.

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:

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:

Eu agrupei os links em títulos <h4> para ficar mais organizado. Teste sem e vai perceber que um ficará ao lado do outro.

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 link da imagem é esse aqui:

https://www.google.com/doodles/30th-anniversary-of-the-world-wide-web

Basta copiar e colar no atributo src.

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

Atualize o navegador:

E é assim que ficou a nossa tabela.

Inserindo título na tabela

Para colocarmos um título, basta usarmos a tag <caption>.

Atualizando o navegador:

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.

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.

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.

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.

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.

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

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.

Atualizando o navegador:

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:

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

Observe como o HTML é fantástico e já formata tudo! Não escrevemos nada no botão e veja o que aparece:

Caixa de Busca

Sabe aquelas caixas que a gente costuma pesquisar uma palavra-chave nos sites e blog? Então, é assim que se faz:

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 mesmo você pode fazer para adicionar campos para e-mail, telefone e etc.

Atualizando o navegador:

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.