Curso de Html5 | Aula 01 - Introdução ao Curso e a Linguagem Html

Inscreva-se no canal!

Se você tem interesse no conteúdo falado no vídeo e aqui neste artigo, clique no botão abaixo e se inscreva no canal.

Conteúdo complementar a Vídeo Aula!

Se você está dando seus primeiros passos no área de tecnologia da informação e desenvolvimento web, essa aula inaugural do curso de HTML5 é recomendada para você.

Nesta vídeo aula apresento uma visão introdutória do que é HTML, como funciona a estrutura básica de uma página html e por que aprender essa linguagem é importante para quem deseja criar projetos para a web.

O que é HTML5?

HyperText Markup Language versão 5 (HTML5) é a versão mais recente da linguagem de marcação de conteúdo conhecida como HTML.

O html é uma linguagem de desenvolvimento usada para estruturar conteúdo na web.

Quando acessa um site você vê imagens, vídeos, menus, formulários e muitos outros elementos visuais.

Porém, por trás de tudo isso, o que está realmente operando é uma estrutura de código baseada em HTML, Css (Cascading Style Sheet), Javascript entre outras linguagens de programação e desenvolvimento web.

Se ao acessar um site pressionar as teclas Ctrl + U verá o código-fonte da página, com isso vendo a estrutura html, css e javascript inicialmente apresentada para o navegador.

Ou seja, todas as imagens bonitas e interfaces que vemos no navegador são, na verdade, renderizações de linhas de texto que são códigos feitos em linguagens de desenvolvimento, como o HTML.

Para quem é este curso?

Este curso é voltado para iniciantes completos, especialmente para quem:

• Nunca programou antes;
• Deseja criar sites próprios;
• Pretende seguir carreira como web designer ou desenvolvedor front-end ou back-end;
• Quer aprender de forma prática e didática.

A importância de um bom editor de código

Anos atrás, muitos professores ensinavam os estudantes de desenvolvimento de sites a começarem usando o bloco de notas (notepad) do windows.

Embora possível, essa prática não é recomendada, devido ao fato do bloco de notas não oferecem recursos como: destaque de síntaxe, sugestões de código ou auto fechamento de tags.

E, tais recursos ajudam em muito, tanto o estudo de programação, quando o programador profissional na hora de escrever seus códigos html.

Por isso, o recomendo utilizar editores de código especializados, que ajudam a melhorar a produtividade e organização do código, veja as sugestões mais abaixo.

Por que evitar o Bloco de Notas?

• Não possui diferenciação visual entre código e texto;
• Não oferece sugestões ou autocompletar;
• Não ajuda na detecção de erros;
• Pode confundir iniciantes e até profissionais durante o desenvolvimento do código nas linguagens de programação.

Recomendações de Editores de Código para HTML5

Aqui estão os editores recomendados para quem quer começar com o pé direito:

1. Brackets

• Editor gratuito e open source.
• Simples, leve e com foco em desenvolvimento web.
• Interface amigável para iniciantes.
• Suporte a live preview (visualização em tempo real do código no navegador).

2. Visual Studio Code (VS Code)

• Extremamente popular na comunidade de desenvolvedores.
• Desenvolvido pela Microsoft.
• Suporte a HTML, CSS, JavaScript, C#, Php, TypeScript, Java e outras linguagens.
• Possui milhares de extensões (como Emmet, Prettier, Live Server, entre outras).
• Ideal tanto para iniciantes quanto para profissionais avançados.

3. Sublime Text

• Editor leve e muito rápido.
• Interface limpa e personalizável.
• Embora seja pago, oferece uma versão gratuita com funcionalidades completas.
• Excelente para quem deseja algo minimalista.

4. Notepad++

• Mais avançado que o Bloco de Notas tradicional.
• Interface simples e bom para quem quer algo básico, mas com cores e diferenciação de código.
• Suporte a diversas linguagens.

Dica sobre Editores de Código!

Não se prenda a apenas um editor de código. Experimente vários e escolha aquele que você se adapta melhor.

Evite depender de recursos muito específicos de um único programa para que, se necessário, você possa migrar de um editor de código para outro sem dificuldades.

Criando seu primeiro arquivo HTML

Como criar um arquivo HTML simples usando o Brackets. Veja os passos principais:

1. Abra o Brackets ou outros Editor de Código de sua preferência;
2. Clique em “Open Folder” e escolha a pasta onde deseja salvar seus projetos;
3. Crie um novo arquivo (New File);
4. Dê um nome ao arquivo como aula_01_introducao.html (sem acentos ou espaços);
5. Escreva o seguinte código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Minha Primeira Página</title>
</head>
<body>
    <h1>Olá, mundo!</h1>
    <p>Este é meu primeiro parágrafo em HTML5.</p>
</body>
</html>

6. Salve o arquivo e abra no navegador para visualizar o resultado.

Boas práticas para nomear arquivos

Uma parte muito importante é a nomenclatura de arquivos e pastas, principalmente ao trabalhar com projetos para a web. Aqui estão algumas dicas fundamentais:

• Evite espaços: use _ (underscore) ou - (hífen);
• Não use acentos ou cedilha ou caracteres especiais;
• Mantenha os nomes curtos e objetivos;
• Use letras minúsculas para evitar conflitos em sistemas case-sensitive (como Linux).
• Exemplo de nome sugerido: aula_01_introducao.html

Vantagens de um bom ambiente de desenvolvimento

Ao utilizar um editor como o Brackets ou VS Code, você obtém benefícios como:

• Destaque de sintaxe: tags em cores diferentes;
• Autocompletar: o programa sugere e completa comandos;
• Organização visual: mais clareza ao ler o código;
• Live preview: veja as mudanças em tempo real no navegador;
• Extensões úteis: como formatadores de código, servidores locais e muito mais.

Esses recursos ajudam principalmente os iniciantes a entenderem melhor a estrutura do HTML e evitarem erros comuns.

Conclusão

Esta primeira aula é para muitos uma porta de entrada para a área de tecnologia da informação e criação de sites com HTML5.

Quer Ser um Desenvolvedor Front-End e Back-End?

Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 40 Horas de Aulas em Vídeo e mais de 118 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!