Curso de HTML Completo: Aula 01 - Criando novo projeto

Introdução ao Curso de HTML

Boas-vindas e Objetivos do Curso

• O curso gratuito de HTML é apresentado como uma oportunidade para aprender a linguagem fundamental da internet, aplicável em diversos sistemas.

• A programação web pode ser utilizada para criar programas para diferentes sistemas operacionais, como Windows, Linux e MacOS.

• O conteúdo do curso é comparado a material pago, prometendo aprendizado significativo que pode beneficiar a vida profissional dos alunos.

Estrutura do Conteúdo

• O vídeo menciona que o método de edição de códigos não será mostrado neste momento, mas há referências a um vídeo anterior sobre o melhor programa para aprender a programar.

• A introdução termina com um convite para continuar assistindo à playlist relacionada ao curso.

O Que é HTML?

Definição e Importância

• HTML significa Hyper Text Markup Language (Linguagem de Marcação de Hipertexto), essencial para estruturar conteúdos na web, incluindo textos, imagens e vídeos.

• Os arquivos HTML geralmente têm as extensões ".html" ou ".htm", sendo recomendado usar sempre ".html".

Funcionamento das Tags

• As tags são elementos fundamentais no HTML, representadas por sinais menores (<>) e podem ter uma abertura e fechamento. Um exemplo dado é a tag <title>, que define o título da página no navegador.

• Existem atualmente 140 tags HTML disponíveis; elas informam ao navegador qual tipo de conteúdo deve ser exibido.

Exemplos Práticos de Tags

Identificação das Tags

• Exemplos práticos incluem tags que indicam imagens (<img>), vídeos (<video>) e áudio (<audio>), facilitando a compreensão do seu uso pelo navegador.

• Algumas tags têm nomes intuitivos em português, enquanto outras são abreviações em inglês. Por exemplo: <ul> representa uma lista não ordenada.

Aplicação das Tags na Criação de Sites

• As tags ajudam na organização correta do site para que o navegador interprete adequadamente as intenções do desenvolvedor.

• O módulo promete ensinar todas as tags necessárias com calma antes de passar à parte prática da criação de um arquivo HTML.

Criando o Primeiro Projeto em HTML

Configuração Inicial

• O instrutor inicia criando um projeto no Windows dentro da pasta "sites", explicando sua escolha pela localização independente do usuário atual.

Nomeação das Pastas

• É importante nomear pastas sem espaços; recomenda-se usar traços ou sublinhados (ex.: "meu-primeiro-site" ou "meu_primeiro_site").

Abrindo o Editor Visual Studio Code

Introdução ao VS Code e Criação de Projetos HTML

Abertura de Pastas no VS Code

• O usuário inicia o programa e abre uma pasta específica através da opção "Open Folder" ou "Abrir Pasta".

• Navega até a pasta "aula-html", que foi criada anteriormente, para visualizar os arquivos do projeto.

Navegação e Atalhos

• O painel "Explorer" mostra a localização atual da pasta. É possível ocultar ou mostrar esse painel usando o atalho "CTRL + B".

• Para criar um novo arquivo, utiliza-se a opção "New File". O padrão para a página inicial é sempre nomear o arquivo como "index.html".

Criação do Arquivo HTML

• Ao criar um arquivo chamado "index.html", o VS Code reconhece automaticamente o tipo de arquivo, facilitando a inserção das tags HTML.

• Reitera-se a importância de seguir o padrão de nomenclatura para arquivos iniciais em projetos web.

Fechamento e Reinício do Projeto

• O usuário fecha o arquivo e a pasta aberta, retornando à tela inicial do VS Code.

• Ao fechar completamente o programa, observa-se que o arquivo "index.html" permanece vazio até ser reaberto.

Estruturação de Pastas para Projetos

• O usuário cria uma nova pasta chamada "sites" no disco local C para organizar futuros projetos web.

• Dentro da pasta "aula-html", é necessário criar um novo arquivo novamente utilizando as opções disponíveis no VS Code.

Abrindo Pastas com Comandos

• Alternativamente, pode-se abrir pastas diretamente pelo terminal usando comandos como code . após navegar até a pasta desejada.

• Este comando permite abrir rapidamente um projeto no VS Code sem precisar passar pela interface gráfica.

Conclusão da Aula

• A aula termina com uma introdução à estrutura básica do HTML prevista para a próxima sessão.