Já viu varias páginas da web legais e ficou curioso para saber como elas são construídas? Saiba que todas as páginas da web tem em sua estrutura o HTML, mas o que é HTML? Descubra agora neste guia básico e descomplicado para iniciantes.
Conteúdo
O que é HTML?
O HTML significa HiperText Markup Language, traduzindo ao português: linguagem de Marcação de Hipertexto. (Um hipertexto faz referência a outros textos, já linguagem de marcação diz qual a estrutura que deve seguir nesta categoria de documento).
Sendo mais específico está linguagem é utilizada para construir paginas na web, sendo o padrão oficial da internet.
Primeiramente veio de Tim Berners-Lee o criador da World Wide Web, a ideia de criar um sistema para que facilitasse o acesso a informações cientificas divulgados por seus colegas, de uma forma clara e organizada.
Como Funciona a Linguagem?
Os documentos são arquivos .html, os navegadores podem entender esse conteúdo e transformar no visual para que usuários comuns possam entender.
O código pode ser escrito em editores de textos mais profissionais como o notepade++ ou sublime text, mas ate mesmo no seu bloco de notas.
Em resumo o documento HTML consiste em um conjunto de tags e atributos, as tags especificam para o navegador onde começa e termina um elemento do conteúdo, e os atributos descrevem as características deste elemento. Geralmente segue a estrutura: tag de abertura, conteúdo e tag de fechamento.
<!-- tag para paragrafo
tag de abertura <p> e tag de fechamento </p> -->
<p>Hello World!</p>
<!-- Com Atributo style
que definira a cor e fonte do paragrafo -->
<p style="color:purple;font-family:verdana;">Hello World!</p>
Tags mais Utilizadas
- <head> – local para declarar informações como título e metadados da sua página;
- <title> – define o título;
- <body> – local para declarar todos os elementos que irão compor o corpo da página;
- <h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos;
- <p> – Tag para definir um parágrafo;
- <a> – Tag de link;
- <header> – define um cabeçalho;
- <section> – define uma seção;
- <article> – define um artigo;
- <div> – define uma divisão;
- <footer> – define um rodapé;
- <nav> – define uma área de navegação;
- <table> – define uma tabela;
- <ol> – define uma lista ordenada;
- <ul> – define uma lista não ordenada;
- <li> – define o item de uma lista;
- <form> – define um formulário;
- <input> – define os campos do formulário;
- <textarea> – define uma área para o usuário digitar um texto;
- <button> – define um botão;
- <img> – permite inserir uma imagem no seu documento.
Estrutura de um código HTML
Aprenda como criar um arquivo HTML. Em primeiro lugar temos o <!DOCTYPE html> para informar ao navegador que é um documento HTML.
Então seguimos com a tag <html>, em seguida <head> com os metadados da página (<meta charset=”utf-8″> para o navegador saber qual é o formato de codificação de caracteres utilizado no documento, isso ira exibir corretamente os acentos e caracteres especiais que temos na nossa língua portuguesa. <title> ira exibir o título da página na aba do navegador).
E por fim a tag <body> que exibira todo o conteúdo na tela do usuário.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minha primeira página</title>
</head>
<body>
<h1>Minha primeira página</h1>
<p>Meu primeiro parágrafo!</p>
</body>
</html>
Surgimento do HTML
Em 1980 o Britânico Tim Berners-Lee começou um projeto baseado na marcação de hiperTexto o ENQUIRE. Depois de vários estudos ele com a ajuda de Robert Cailliau conseguiram implementar a primeira comunicação com o protocolo HTTP. Surgia assim a web como conhecemos hoje em dia.
Após essa descoberta veio a necessidade de facilitar o acesso e disseminação a informação entre os pesquisadores, assim em 1991 Tim Lança a primeira versão do HTML inicialmente baseado em outra linguagem de marcação a SGML.
Mas não para por ai, depois disso veio varias evoluções a seguir:
Versão 2.0
Foi lançada em 1995 na primeira conferência sobre a web, com a finalidade de formalizar as características já usadas da linguagem.
Versão 3.2
Logo em seguida foi lançada em 1997 uma nova versão, principalmente para correção de falhas da versão anterior e novas funcionalidades.
Versão 4.0.1
Foi construído pensando em aprimorar as práticas de desenvolvimento. Criada em 1999 teve novas funcionalidades como a adição de folhas de estilo.
Versão XHTML 1.0
Lançado no ano 2000 veio para combinar as vantagens do HTML e XML.
Novo HTML 5
Em 2004 foi criado uma fundação entre grandes empresas (Mozilla, Apple, Opera, etc.) para trabalharem em uma nova versão.
Mas somente em 2014 veio a nova versão. O HTML 5 trouxe suporte a áudio e vídeo em alto nível, além de uma nova forma de padronização em uma linguagem mais semântica, viabilizando assim novas oportunidades sem várias extensões, deixando mais leve e rápido.
Relação entre o HTML, CSS e JavaScript
Em suma o HTML por si só é como o esqueleto da página, mas para ele tornar uma página mais atraente inserimos o CSS e JavaScript. Ele é todo o conteúdo apresentado, o CSS é toda a parte de estilo da página o que tornará ela mais bonita visualmente falando, e o JavaScript que adicionara todo o conteúdo dinâmico de uma página.
Continue sua jornada aprendendo o que é CSS
Após ter descoberto o que é HTML, deve ter ficado curioso para saber como deixamos páginas bem estilizadas com o CSS. Por isso agora vamos abordar o seu surgimento, como funciona e como integrar o CSS ao HTML, com um guia descomplicado de fácil entendimento!
Começou aprender HTML e já quer começar a treinar e desenvolver as suas habilidades? Saiba que desenvolvemos um editor HTML online para você! Focado em iniciantes e pessoas que queiram fazer testes rápidos, tudo isso de graça!
Como se tornar um Programador da Web?
Sei que deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
