O que é HTML? Quais as vantagens? Para que serve? Por que devemos saber HTML, CSS e JavaScript? | Dev Lawliet Maverick
Seja muito bem-vindo ao primeiro artigo do blog, eu sou L.Maverick e é um prazer explicar para você o que é HTML e pra que ele serve, vamos começar!
Mas afinal...
O que é HTML?
HTML faz parte de quase todos os site que vemos na internet, significa HiperText Markup Language (Em português fica Linguagem de Marcação de HiperTexto), praticamente é o componente básico de todo website considerados por muito o "esqueleto" do site, por isso que hoje em dia o HTML vem quase sempre acompanhado de 2 parceiros, o famoso CSS e o JavaScript. Mais a frente explico com detalhes o que cada um é.
Pra esse site por exemplo que você está vendo, o HTML é o conteúdo geral que você pode ver, como o texto e a imagem, mas não se restringe só a isso, tem também vídeos, sons, músicas, botões e etc. Pra facilitar pense em HTML como tudo que contém conteúdo.
Já o CSS é o embelezamento do seu site, como a cor de fundo, a fonte do texto, tamanho da imagem, efeitos visuais (pode ser animado também), literalmente a estética do site.
O JavaScript é uma linguagem de programação que em conjunto com os dois acima torna o site mais dinâmico e dar um aspecto mais vivo para o site, por exemplo o Youtube, se você entrar pelo computador e passar o mouse por cima de um vídeo, ele vai mostrar um pequeno trecho, isso é feito por JS(Abreviação de JavaScript), ou quando você pesquisa algo e aparece algumas opções abaixo, também é JS.
Onde posso desenvolver em HTML?
HTML é tão simples que você pode usar até o bloco de notas, há outras ferramentas que te permite testar o código em tempo real como o Visual Studio Code criado pela Microsoft que é um dos mais usados. Caso não queira o VS Code você pode usar o Atom, Notepad++ e Eclipse ( Alguns estão disponíveis para Windows, Mac e Linux).
É importante falar que HTML não é considerado linguagem de programação, e sim linguagem de marcação, então para não fazer feio não fale "Eu programo eu HTML" diga "Eu desenvolvo em HTML", isso pode evitar momentos vergonhosos com pessoas que prestam atenção nisso.
Para desenvolver em HTML você precisará conhecer as principais tags (podem ser chamadas de elementos também), ela cria hierarquia, organiza e estrutura o conteúdo do seu site, como se fosse gavetas de um armário, em que cada gaveta você coloca uma coisa como a logo do seu site, o texto do artigo e as imagens ilustrativas. Cada um em um canto e organizando todos entre seções, parágrafos e títulos.
O que são TAGS?
Tags são comandos que define a estrutura da página, define se será parágrafo, título, imagem, se terá quebra de linha ou não, todas as tags tem uma abertura e quase todas tem fechamento, a abertura consiste em "<(tag que você quer)>" e o fechamento em "</(tag que você quer)>", um exemplo que usarei é a tag de parágrafo (p), eu quero que apareça a seguinte frase "Isso é um parágrafo", para isso, usarei o código <p> Isso é um parágrafo </p>, ela fica assim:
Isso é um parágrafo
Porém se você testar esse código nesse exato momento não irá dar certo por 2 motivos, 1 deles é que você tem que salvar o arquivo na extensão certa, que é .html e o segundo motivo é que você não colocou a principal tag e a mais importante de todas, veja mais abaixo.
Estrutura básica
Para qualquer código HTML funcionar, ela deve ter a declaração DOCTYPE, que no caso da versão mais atual, o HTML 5 basta colocar <!DOCTYPE html>, depois disso devemos abrir a principal tag do html, a própria tag <html> que deve ter o fechamento no final do código.
Agora vamos colocar mais 2 tags que não podem faltar, a tag <head> (traduzindo fica cabeça) que receberá metadados, links externos, título do site, e também pode receber o arquivo de CSS. Depois do head tem a tag <body> (traduzindo fica corpo), ela é literalmente o corpo do site, onde você coloca todas as informações que serão visíveis e renderizados pelo navegador como o parágrafo, os artigos, as imagens e etc.
Um adendo é que para você colocar o título do seu site que aparecerá ao lado do icon, você tem que usar a tag <title>, veja o exemplo abaixo de uma estrutura básica de HTML:
<!DOCTYPE html>
<html>
<head>
<title> (título) </title>
(você pode colocar o CSS aqui)
</head>
<body>
(código geral fica aqui)
</body>
</html>
Mas tem uma coisinha faltando, que é mais notável para os brasileiros e a América Latina, o site desse jeito não leria caracteres especiais, como "ç", "ã" e "é", e para resolver isso é bem simples, colocamos a tag de metadado (<meta>) e colocamos o charset (basicamente diz qual padrão de linguagem usaremos) como UTF-8, que consegue ler "Ç" que tem aqui no Brasil.
Agora o código começa a tomar forma, adicionando isso para resolver muitos problemas o código fica assim:
<!DOCTYPE html>
<html>
<head>
<title> (título) </title>
<meta charset="utf-8"/>
(você pode colocar o CSS aqui)
</head>
<body>
(código geral fica aqui)
</body>
</html>Assim temos o código base necessário em todo site, mas você não saberá só isso, no site você poderá encontrar explicação de novas tags e pra que elas servem, mas não se preocupe, eu mostrarei algumas para vocês.
Tags que não pode faltar no HTML
Tem muito mais de 140 tags dentro do HTML, mas nem todas são utilizadas, mas as tags mais usadas e que não pode faltar são:
- <head> = como mencionei lá em cima, o head você pode colocar títulos e metadados da sua página;
- <title> = define o título da sua página;
- <body> = o corpo da sua página, onde você estrutura seu conteúdo;
- <h1>,<h2>,<h3>,<h4>,<h5 >e <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, isso é de importância para SEO, os mecanismos de buscas leem os títulos e definem ele como principais pontos sobre o que você escreve;
- <p> = Tag de parágrafo;
- <a> = Tag de link, junto ao atributo href=”” você pode criar links tanto externo quanto interno;
- <header> = uma divisão especifica para cabeçalho;
- <section> = define uma seção da sua página;
- <article> = uma divisão especifica para o artigo;
- <div> = define uma divisão;
- <footer> = uma divisão especifica para o rodapé;
- <nav> = define uma área de navegação como por exemplo um menu;
- <table> = cria uma tabela;
- <ol> = define uma lista ordenada de números ou letras;
- <ul> = define uma lista não ordenada com símbolos;
- <li> = é cada opção das lista, os item dela em si;
- <form> = define um formulário;
- <input> = define os campos do formulário;
- <textarea> = define uma área para o usuário digitar um texto;
- <button> = cria um botão;
<img> = tag que permite colocar imagens em seu projeto.
Como surgiu o HTML
Agora um pouquinho da história do HTML, inicialmente o HTML era um projeto chamado ENQUIRE iniciado em 1980 pelo Físico Britânico Tim Berners-Lee. No começo ele usou a linguagem de programação Pascal, porém anos mais tarde com ajuda de Robert Cailliau eles conseguiram implementar uma comunicação entre usuário e servidor usando o protocolo HTTP, resultando na coisa mais importante da web hoje em dia, a tão famosa World Wide Web, ou para os mais íntimos o www.
Tinha outras linguagens de marcação na época que competiam com o HTML, até o próprio HTML herdou algumas tags de outras linguagens como a SGML que era utilizada para estruturação de documentos, mas com o tempo e com a facilidade para criar redes públicas o HTML cresceu e se tornou a linguagem padrão para web.
Okay, agora qual que é a relação entre...
HTML, CSS e JavaScript
Por mais que o HTML evoluiu ele ainda é apenas uma linguagem de marcação web, limitado a essa função, porém o site deve ter mais camadas, e pra isso o CSS e o JavaScript estão presentes.
CSS
Começando com o CSS que é o responsável para dar forma visual ao nosso documento, ele pode fazer bastante coisa como aplicar espaços em áreas, mudar cor de fundo, colocar gradiente com diversas cores, mudar fonte dos textos, e vários outros efeitos visuais, alguns podem ser animados também. Quando você usa CSS em um determinado texto, div ou qualquer outro elemento as pessoas costumam dizer que estão estilizando, então se você precisar dizer que vai alterar cor ou algo assim, simplesmente diga "irei estilizar".
JavaScript
Entre os 3 que são essenciais para desenvolvimento web, o JavaScript é o único que é linguagem de programação, o JS pode deixa o site mais dinâmico, e resolve muitas das coisas que pode ser impossíveis no HTML e CSS. Como já mencionei se você entrar no Youtube e tentar visualizar uma prévia do vídeo sem clicar nele, é só colocar o mouse em cima do vídeo que a mágica acontece, essa prévia é JavaScript, muitas das coisas interativas que aparecem na página o JS está envolvido. Uma dica, pense no HTML como o conteúdo, o CSS como embelezamento e o JS como interatividade.
Quais as Vantagens e Desvantagens de saber HTML?
Se ainda não se interessou por HTML te direi alguns motivos para usar, começando com as vantagens:
- Fácil de aprender;
- Fácil de usar;
- Tem muito tutorial no Youtube e artigos na web;
- HTML é fácil de desenvolver;
- Desenvolvimento rápido
- Tem modelos que podem simplificar seu tempo de desenvolvimento;
- É gratuito;
- Amplamente utilizado;
- Suportado em quase todos os navegadores, se não todos;
- Fácil para desenvolvedores iniciantes aprender.
Agora um pouco das desvantagens de usar HTML:
- Não mostra erros então fica mais difícil de identificar dependendo do erro;
- A estruturação do HTML pode ser confusa;
- Precisa escrever muito código para coisas um pouco simples;
- Tem que se atualizar caso tags obsoletas parem de ter suporte, se não atualizar seu site pode parar de funcionar em alguns pontos (bem raro de acontecer mas é possível);
- A segurança oferecida pelo HTML é bem limitada;
- HTML pode criar páginas mais estáticas e simples, para páginas que necessita ter muita dinâmica pode dar trabalho e o HTML pode ser bem limitado.
Muito obrigado e até a próxima!
Tem interesse em livros? Jogos? Animes ou mangás? Então visite nosso parceiro, a Mistérios Nerd, eles tem diversos assuntos interessantes que são do seu interesse, visite clicando aqui, é de graça!
Postar um comentário
0 Comentários