Como programar em HTML
Programar em HTML é possível? Entenda na prática o tipo de linguagem que é HTML e sua função na criação de páginas para web e criação de sites.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
Se você é iniciante com programação web ou webdesign, provavelmente escolheu HTML como primeira linguagem para dedicar o tempo de estudo, e está correto, pois ela é a base para a criação de páginas web. E como programar HTML?
Como ponto inicial de estudo, é importante destacar que HTML não é uma linguagem de programação, mas sim de marcação de elementos, então não é possível programar em HTML.
Mas o que é programar então? E o que é marcar elementos? Uma linguagem de programação permite que você execute tarefas, com base ou não em testes lógicos, adicionando comportamento aos elementos de uma página web ou software. Já uma linguagem de marcação como HTML é usada para definir os elementos de uma página e a organização desses elementos.
Imagine uma página da web com um título visível igual a "Esse é o título original" e um botão que ao receber o clique do usuário, altera o texto do título para "Esse é o novo título". Vamos fazer!
O código a seguir é uma estrutura HTML básica de uma página web. Repare que temos marcações, conhecidas também como tags HTML, sempre entre < e >.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<h1>Esse é o título original</h1>
<button id="mybtn">Alterar título</button>
</body>
</html>
A grande maioria das tags pode ter elementos filhos, por isso devem ser abertas e fechadas. Por exemplo, a tag <body> marca o começo do corpo visível da página, e tudo que estiver dentro dela faz parte desse corpo (é uma boa prática deixar os filhos um nível pra frente), até o fechamento em </body>.
Você pode colar esse código em um editor de texto como o Bloco de Notas e salvar o arquivo como index.html. Depois abra o arquivo no navegador e terá sua primeira página web.
Sobre como programar em HTML, temos a resposta no código apresentado, mostrando que não é possível, pois com essa linguagem apenas definimos os elementos da página.
Programação com JavaScript
Se você deseja adicionar comportamento para a página web criada, executando tarefas com base ou não em condições, terá que programar, mas não com HTML, e sim com JavaScript, que é uma linguagem de programação e roda no navegador, assim como o HTML roda, então é possível usar as duas juntas.
Adicione o código a seguir antes de fechar a tag body, no seu arquivo HTML. Isso mesmo, código HTML junto com código JavaScript. Também é possível criar um arquivo JavaScript separado e apenas linkar com o HTML, mas isso é assunto para outro post.
<script>
document.getElementById("mybtn").addEventListener("click", alterarTitulo);
function alterarTitulo() {
document.getElementsByTagName("h1")[0].innerHTML = "Esse é o novo título";
}
</script>
Salve o arquivo e abra novamente no navegador ou atualize a página com F5. Depois clique no botão da página e o texto do título será alterado, pois fizemos uma programação para isso acontecer. Sem o código JavaScript, o botão não serve para nada, pois não foi feita programação.
Vale lembrar que alguns elementos HTML já possuem comportamento padrão, pois o navegador faz a leitura é já
possui regras internas. Um exemplo disso é um botão que envia um formulário preenchido, definido com HTML
com <input type="submit">.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!