Seu primeiro código HTML - @Curso em Vídeo HTML5 e CSS3
Criando o Primeiro Projeto
Visão Geral da Seção: Nesta seção, vamos começar a criar nosso primeiro projeto de HTML5 e CSS3. É importante praticar em conjunto com os vídeos para obter um melhor aprendizado.
Criando uma Pasta de Estudos
- Crie uma pasta chamada "estudos" dentro da pasta "Documentos".
- Dentro da pasta "estudos", crie uma subpasta chamada "HTML_CSS".
- Abra a pasta "HTML_CSS".
Configurando o Visual Studio Code
- No Visual Studio Code, clique com o botão direito na pasta "HTML_CSS".
- Selecione a opção "Abrir com Code" para abrir a pasta no editor.
- Clique em "Novo Arquivo" para criar um novo arquivo.
- Nomeie o arquivo como "index.html" (em letras minúsculas e sem espaços).
Iniciando o Exercício 001
- Dentro do arquivo "index.html", comece a escrever seu código HTML e CSS.
- Utilize as ferramentas disponíveis no Visual Studio Code para facilitar sua produtividade.
Criando Pastas e Organizando os Exercícios
Visão Geral da Seção: Nesta seção, vamos aprender a criar pastas e organizar nossos exercícios de forma adequada.
Criando Pastas para os Exercícios
- Dentro da pasta "HTML_CSS", crie uma nova subpasta chamada "exercicios".
- Abra a pasta recém criada.
- Crie uma nova subpasta dentro de "exercicios" com o nome do próximo exercício que você irá realizar.
Acessando os Exercícios no Visual Studio Code
- No Visual Studio Code, clique com o botão direito na pasta do exercício desejado.
- Selecione a opção "Abrir com Code" para abrir a pasta do exercício no editor.
- Crie um novo arquivo dentro da pasta do exercício e comece a escrever seu código.
Utilizando Recursos do Visual Studio Code
Visão Geral da Seção: Nesta seção, vamos explorar alguns recursos úteis do Visual Studio Code para melhorar nossa produtividade durante o desenvolvimento.
Abrindo Pastas e Arquivos Rapidamente
- No Visual Studio Code, utilize o atalho de teclado "Ctrl + P".
- Digite o nome da pasta ou arquivo que deseja abrir e pressione Enter.
Criando Novos Arquivos e Pastas
- Dentro da pasta de um projeto, clique com o botão direito e selecione "Novo Arquivo" para criar um novo arquivo.
- Para criar uma nova subpasta, clique com o botão direito e selecione "Nova Pasta".
Utilizando Comandos Rápidos
- No Visual Studio Code, clique com o botão direito em uma pasta ou arquivo.
- Utilize os comandos rápidos disponíveis para executar ações específicas.
Nomeando Arquivos HTML
Visão Geral da Seção: Nesta seção, vamos aprender como nomear corretamente os arquivos HTML para garantir seu funcionamento adequado.
Nomeando Arquivos HTML
- Ao criar um novo arquivo HTML, certifique-se de utilizar letras minúsculas e não incluir espaços no nome.
- O nome do arquivo deve terminar com a extensão ".html" para que seja reconhecido corretamente.
Conclusão
Visão Geral da Seção: Nesta seção, concluímos a criação do primeiro projeto e aprendemos algumas dicas úteis para organizar nossos arquivos e utilizar recursos do Visual Studio Code.
Próximos Passos
- Continue praticando e explorando os recursos do Visual Studio Code.
- Avance para os próximos exercícios e continue desenvolvendo suas habilidades em HTML5 e CSS3.
Criação do código base do documento HTML
Visão geral da seção: Nesta seção, o instrutor explica como criar o código base de um documento HTML automaticamente usando uma dica útil.
Criação automática do código base do documento HTML
- Digite uma exclamação e aguarde alguns segundos.
- O código base do documento HTML será criado automaticamente.
- O arquivo index indica que é um documento em HTML5.
- A tag head contém configurações para o site.
- As tags possuem abertura e fechamento.
- A tag HTML possui um parâmetro chamado "lang" para definir o idioma do site.
- O conjunto de caracteres deve ser configurado como UTF-8 para suportar acentuação.
Estrutura básica do arquivo HTML
Visão geral da seção: Nesta seção, o instrutor explica a estrutura básica de um arquivo HTML, incluindo as áreas de cabeça e corpo.
Estrutura básica do arquivo HTML
- O arquivo HTML possui duas áreas principais: cabeça (head) e corpo (body).
- A área de cabeça contém configurações e metadados do site.
- A área de corpo contém o conteúdo visível no site.
Tags importantes no arquivo HTML
Visão geral da seção: Nesta seção, são apresentadas algumas tags importantes no arquivo HTML, como a tag H1 e a tag P.
Tags importantes no arquivo HTML
- A tag H1 é usada para criar um título ou cabeçalho no site.
- Exemplo:
<h1>Olá, Mundo</h1>
- A tag P é usada para criar um parágrafo de texto.
- Exemplo:
<p>Esse é o meu primeiro documento HTML.</p>
Configuração do conjunto de caracteres e viewport
Visão geral da seção: Nesta seção, o instrutor explica como configurar o conjunto de caracteres e a visualização do site.
Configuração do conjunto de caracteres e viewport
- O conjunto de caracteres deve ser configurado como UTF-8 para suportar acentuação.
- A linha
<meta charset="utf-8">define o conjunto de caracteres.
- A linha
<meta name="viewport" content="width=device-width, initial-scale=1.0">define a visualização do site em dispositivos móveis.
Utilizando atalhos no Visual Studio Code
Visão geral da seção: Nesta seção, o instrutor mostra como utilizar atalhos no Visual Studio Code para agilizar a escrita do código HTML.
Utilizando atalhos no Visual Studio Code
- Atalhos podem ser utilizados para criar tags rapidamente.
- Exemplo: Digitar
h1e pressionar Enter cria automaticamente a tag H1.
- O Visual Studio Code facilita a escrita do código HTML com seus recursos visuais.
Salvando e visualizando o documento HTML
Visão geral da seção: Nesta seção, o instrutor explica como salvar e visualizar o documento HTML criado.
Salvando e visualizando o documento HTML
- O arquivo index.html é automaticamente salvo na pasta correta.
- É possível abrir o arquivo index.html para visualizá-lo em um navegador web.
Visão Geral da Área de Cabeçalho e Corpo
Visão Geral da Seção: Nesta parte do vídeo, o instrutor mostra a área de cabeçalho e corpo do site, explicando a diferença entre elas e como são marcadas no HTML.
Área de Cabeçalho
- A área de cabeçalho é destacada como a parte superior do site.
- É onde o título principal e outros elementos importantes podem ser colocados.
- É marcada usando a tag
<header>.
Área de Corpo
- A área de corpo é onde o conteúdo principal do site é exibido.
- Pode conter parágrafos, títulos, imagens e outros elementos.
- É marcada usando a tag
<body>.
Organizando as Janelas do Navegador e Editor
- O instrutor dá uma dica para organizar as janelas do navegador e editor lado a lado para facilitar o trabalho.
- Arrastar o navegador para um dos lados até que se torne uma caixa grande ao encostar no canto.
- Isso permite ter o navegador em uma metade da tela e o editor na outra metade.
Editando Código sem Fechar o Navegador
Visão Geral da Seção: O instrutor ensina como editar código sem precisar fechar o navegador, permitindo visualizar as alterações em tempo real.
Dica para Edição Simultânea
- Abrir tanto o navegador quanto o editor lado a lado na tela.
- Arrastar o navegador até que se torne uma caixa grande ao encostar no canto.
- Isso permite ter o navegador e o editor visíveis simultaneamente.
Ganhar Espaço na Tela
Visão Geral da Seção: O instrutor compartilha dicas para ganhar espaço na tela durante a edição do código.
Diminuir Área do Navegador
- É possível diminuir a área ocupada pelo navegador arrastando a barra lateral para encolher.
- Clicar novamente na barra lateral recupera o tamanho original.
Ocultar Barra Lateral
- Para ganhar mais espaço, é possível ocultar a barra lateral clicando em um ícone específico.
- Clicar novamente no mesmo ícone faz com que a barra lateral seja exibida novamente.
Inserindo Elementos HTML
Visão Geral da Seção: O instrutor demonstra como inserir elementos HTML, como parágrafos e linhas horizontais, no código do site.
Inserindo Parágrafo
- Utilizar a tag
<p>para criar um novo parágrafo.
- Digitar o conteúdo desejado dentro das tags de abertura e fechamento do parágrafo.
Inserindo Linha Horizontal
- Utilizar a tag
<hr>para criar uma linha horizontal.
- A linha horizontal será exibida no local onde for inserida no código.
Importância das Marcas (Tags) HTML
Visão Geral da Seção: O instrutor explica a importância das marcas (tags) HTML e como elas são usadas para marcar elementos no documento.
Significado de "Marca" ou "Tag"
- No HTML, as marcas (tags) são usadas para marcar elementos no documento.
- As marcas são identificadas por meio de tags de abertura e fechamento.
- O HTML significa Hypertext Markup Language, onde "markup" se refere à marcação dos elementos.
Dicas Finais e Pedido do Instrutor
Visão Geral da Seção: O instrutor compartilha dicas finais e faz um pedido aos espectadores.
Organização dos Arquivos
- É recomendado organizar os arquivos em pastas para facilitar o acesso posteriormente.
- Evitar salvar todos os arquivos na área de trabalho e criar uma estrutura organizada.
Anotações e Caderno
- Fazer anotações das marcas (tags) explicadas durante o vídeo.
- Utilizar um caderno como ferramenta de estudo para registrar informações importantes.
Acompanhamento nas Redes Sociais
- O instrutor convida os espectadores a seguirem suas redes sociais, como Instagram.
- Seguir o instrutor ajuda a fortalecer a comunidade e divulgar seu trabalho com carinho.
Conclusão
O vídeo abordou conceitos básicos sobre a estrutura do site, incluindo as áreas de cabeçalho e corpo. Também foram apresentadas dicas úteis para organizar as janelas do navegador e editor, ganhar espaço na tela durante a edição do código, inserir elementos HTML e entender a importância das marcas (tags). O instrutor encerrou com dicas finais sobre organização dos arquivos e incentivo ao acompanhamento nas redes sociais.
Cumprimento inicial
Visão geral da seção: Nesta parte do vídeo, há um cumprimento inicial.
Cumprimento
- E aí
- E aí