HTML é a base de toda página web. Entenda o que é, como funciona e por que ele é essencial.
O que e HTML? Uma explicacao simples e completa
Traduz-se a sigla em ingles (HTML) Hypertext Markup Language para o portugues como linguagem de marcacao de hipertexto.
O HTML serve para criar paginas web por meio do uso de marcadores (tags) e atributos, os quais determinam a apresentacao do conteudo em um navegador web.
Antes de explorarmos as possibilidades do HTML, vamos esclarecer um conceito fundamental: o hipertexto. Essa ideia se refere a um texto que construimos com blocos interligados, incluindo palavras, imagens, sons, tabelas e outros elementos. Esses blocos podem conter rotas que direcionam para outros hipertextos; chamamos essas rotas de hiperligacoes, hiperlinks ou simplesmente links.
Tim Berners-Lee, o inventor da World Wide Web, criou o HTML.
A ideia era criar um ambiente em que os cientistas pudessem divulgar seus trabalhos e permitir que seus colegas os analisassem. Apesar dos desafios iniciais, Berners-Lee conseguiu estabelecer o HTML como linguagem padrao para a criacao desses documentos.
O HTML evoluiu muito desde os anos 1990 e agora e fundamental para blogs, e-commerces, redes sociais e todas as paginas que visualizamos em um navegador web.
Quais sao os principais elementos do HTML?
Agora que voce entende o que e o HTML, vamos examinar os marcadores principais que determinam as funcoes dos elementos que compoem uma pagina.
Para comecar, e importante lembrar que as tags sao marcadas com um sinal de menor que (<), que e seguido pelo nome da tag e um sinal de maior que (>). A maioria das tags precisa ser fechada, o que e feito colocando uma barra (/) entre o sinal "<" e o nome da tag.
Os exemplos a seguir tornarao tudo mais claro.
Paragrafo (<p>)
Para definir um paragrafo, abrimos e fechamos a tag.
Cabecalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
As tags de cabecalho ou heading tags ajudam a organizar os segmentos do texto. A hierarquia dos cabecalhos segue uma ordem decrescente de importancia, iniciando pelo cabecalho principal e terminando nos cabecalhos de menor nivel.
Imagem (<img>)
Como o conteudo da imagem e especificado pelo atributo "src", a tag <img> e autofechada.
Ancora (<a>)
Uma tag de ancora conecta uma pessoa a uma pagina diferente. O destino desse link e determinado pelo atributo "href".
Lista ordenada (<ol>)
Uma ordered list, ou lista ordenada, mostra elementos numerados. Devemos usar a tag <li> para marcar todos os elementos.
Lista nao ordenada (<ul>)
A tag unordered list, tambem conhecida como lista nao ordenada, mostra os elementos como bulletpoints.
Tabela (<table>)
A informacao exibida na tag de tabela e apresentada em formato de linhas e colunas. Usamos as tags para representar linhas, para representar cabecalhos e para representar cada celula dentro da tag.
Comentario (<!-- -->)
Usamos esta tag para escrever comentarios que ajudarao voce a entender o codigo. O usuario nao vera nada entre os marcadores.
Como e a estrutura basica de um documento do tipo?
Agora que vimos varios elementos, vamos aprender a coloca-los dentro de um codigo HTML. A construcao desses codigos deve seguir certas regras, como todos os padroes da web.
Comecamos com a afirmacao. Um metodo para informar ao navegador web que o documento em questao e um HTML e usar o "DOCTYPE html".
Em seguida, abrimos a tag <html>. Nao esqueca de fechar a tag no final. Dentro dela, adicionamos <head>, que deve conter os metadados da pagina, ou dados sobre dados, como o titulo da aba do navegador (<title>), chamadas para arquivos externos e outras meta tags importantes para o trabalho de SEO.
Para que os caracteres que usamos em portugues, como acentos e cedilha, sejam mostrados corretamente no navegador, e fundamental incluir a tag <meta charset="utf-8">.
Finalmente, abrimos a tag <body> e inserimos a secao do documento HTML que contem os elementos que o usuario pode ver.
Como criar o seu primeiro codigo em HTML?
Para comecar a projetar a aparencia da sua pagina, inicialmente, voce so precisa de um editor de texto basico (como o Bloco de Notas) e de um navegador web. Com o tempo, ao se tornar um desenvolvedor profissional, voce tera acesso a editores de codigo mais avancados.
Para comecar, voce deve criar um novo arquivo e salva-lo com a extensao .html. Podemos nomear este tutorial como index.html.
Depois disso, cole o codigo que mostramos na secao anterior com a estrutura basica de um HTML e salve o arquivo.
Agora e so abrir o arquivo no seu browser preferido e pronto, voce acabou de criar o seu primeiro codigo HTML!
Qual e a relacao entre HTML, CSS e JavaScript?
Apos definirmos a estrutura com HTML, utilizamos o CSS para estilizar os elementos, configurando fontes, cores e outros aspectos visuais.
Apesar da possibilidade de descrever os estilos dentro do proprio codigo HTML, e aconselhavel que o HTML use pelo menos um arquivo CSS. Ao separar a estrutura do estilo, o codigo fica mais organizado.
O CSS e baseado em declaracoes e seletores com propriedades e valores. Inicialmente, escolhemos os elementos HTML que desejamos estilizar. A seguir, detalharemos as propriedades de cada elemento.
O JavaScript e uma terceira camada do desenvolvimento de paginas web que se concentra na criacao de comportamentos dinamicos. Essa linguagem de programacao — nao confundir com Java — permite uma experiencia do usuario melhor e uma pagina mais interativa.
Com ele, podemos escolher o que acontece quando um visitante clica em uma secao especifica da pagina, aperta uma tecla especifica, rola a pagina e fazer outras coisas. As aplicacoes sao extremamente variadas e dependem em grande parte da criatividade do desenvolvedor.
Devido a sua sintaxe simples, o JavaScript e uma excelente opcao para iniciantes em programacao. Uma vantagem adicional e a possibilidade de visualizar o resultado do seu codigo diretamente no navegador, permitindo testes rapidos.
Ja percebeu que o HTML e simples de entender? A partir daqui, voce pode explorar um leque maior de tags e recursos.
