Curso de HTML Completo: Aula 02 - Estrutura Básica

Name: Curso de HTML Completo: Aula 02 - Estrutura Básica
Uploaded: 2021-11-08T15:35:38.000Z
Duration: 26 min 9 s

Criando a Estrutura Básica de um Documento HTML

Visão Geral da Seção: Nesta seção, aprenderemos a criar a estrutura básica de um documento HTML, que é a base de qualquer site. Veremos como funcionam as tags de abertura e fechamento no HTML e como utilizar o Visual Studio Code para facilitar o processo.

Tags de Abertura e Fechamento no HTML

As tags no HTML são representadas pelo sinal de menor "<" seguido do nome da tag e pelo sinal de maior ">". Exemplo: <tag>.

Para fazer o símbolo "<", pressione SHIFT+VÍRGULA no teclado.

O Visual Studio Code sugere automaticamente as tags enquanto digitamos, facilitando o processo de codificação.

Para declarar que o documento é do tipo HTML, podemos usar a tag <!DOCTYPE html>.

A tag <html> é utilizada como a base para todo o conteúdo do site.

A tag <head> contém informações sobre o documento que não são mostradas aos usuários.

Podemos incluir dentro dessa tag a tag <title> para definir o título do site.

A tag <body> é onde colocamos todo o conteúdo visível aos usuários.

Exemplo Prático

Vamos criar um exemplo prático com as seguintes tags:

<!DOCTYPE html>

<html>

<head>

<title>Meu primeiro site</title>

</head>

<body>

<h1>Meu primeiro site</h1>

<p>Meu primeiro parágrafo</p>

</body>

</html>

Utilizando o Visual Studio Code para Facilitar a Codificação

Visão Geral da Seção: Nesta seção, veremos como o Visual Studio Code pode nos ajudar a codificar de forma mais eficiente, sugerindo tags e preenchendo automaticamente partes do código.

Sugestões Automáticas no Visual Studio Code

O Visual Studio Code sugere automaticamente as tags enquanto digitamos.

Podemos aceitar as sugestões pressionando ENTER.

Isso economiza tempo e aumenta a produtividade durante a codificação.

Exemplo Prático

Ao digitar <!, o Visual Studio Code sugere automaticamente completar com <!DOCTYPE html>.

Ao digitar <ht, o Visual Studio Code sugere completar com <html></html>.

Ao digitar <he, o Visual Studio Code sugere completar com <head></head>.

Ao digitar <ti, o Visual Studio Code sugere completar com <title></title>.

Salvando e Organizando o Código no Visual Studio Code

Visão Geral da Seção: Nesta seção, aprenderemos como salvar nosso código no Visual Studio Code e utilizar recursos para organizar automaticamente o código.

Salvando o Código

Para salvar nosso código, podemos pressionar CTRL+S no teclado.

No Virtual Keyboard, a tecla CTRL está localizada no canto inferior esquerdo.

Organizando Automaticamente o Código

O Visual Studio Code possui recursos para organizar automaticamente nosso código após salvá-lo.

Após salvar, ele ajusta a formatação e organiza as linhas adequadamente.

Salvando o documento

Visão geral da seção: Nesta seção, o instrutor explica como salvar um documento no VS Code.

Formas de salvar o documento

Uma forma de salvar o documento é pressionar "CTRL+S" para salvar automaticamente.

Outra forma é ir em "File" e selecionar "Save".

É importante sempre lembrar de salvar as alterações feitas no documento para evitar a perda de trabalho.

Rodando o site em tempo real

Visão geral da seção: Nesta seção, o instrutor demonstra como rodar o site em tempo real usando a extensão do live-server.

Rodando o site com live-server

Para rodar o site em tempo real, pode-se clicar no botão "Go To Live" ou clicar com o botão direito no documento e selecionar "Open with Live Server".

Ao clicar pela primeira vez em "Go To Live", pode ser necessário permitir a execução do servidor pelo Firewall do Windows.

Com o live-server ativado, as alterações feitas no código serão refletidas instantaneamente no navegador.

Visualizando código e site simultaneamente

Visão geral da seção: Nesta seção, o instrutor mostra como visualizar tanto o código quanto o site ao mesmo tempo.

Organizando a visualização

Arrastando e redimensionando as janelas do navegador e do VS Code, é possível ter uma visualização dividida entre código e site.

Utilizando a tecla "Windows" + seta para o lado, é possível dividir a tela entre o VS Code e outro documento aberto.

Pressionando "CTRL+B" no VS Code, é possível ocultar a barra lateral e ter uma visualização mais ampla do código.

Atualização em tempo real

Visão geral da seção: Nesta seção, o instrutor destaca a vantagem de utilizar o live-server para visualizar as alterações no site em tempo real.

Visualizando alterações em tempo real

Com o live-server ativado, ao salvar as alterações no código (por exemplo, mudando o título do site), essas alterações são refletidas instantaneamente no navegador.

Essa funcionalidade permite que os desenvolvedores acompanhem e testem suas modificações de forma rápida e eficiente.

Dicas adicionais

Visão geral da seção: Nesta seção final, o instrutor compartilha algumas dicas extras para facilitar a programação no VS Code.

Dicas para melhorar a experiência de programação

Utilize "ALT+Z" para ajustar automaticamente a largura do código dentro da janela do VS Code.

Ao utilizar o live-server, é possível realizar ajustes na visualização das janelas do navegador e do editor para otimizar a produtividade.

Acompanhar as alterações em tempo real ajuda na identificação de erros e na melhoria contínua do código.

Utilizando sugestões de código no VS Code

Visão geral da seção: Nesta seção, o instrutor demonstra como utilizar as sugestões de código disponíveis no VS Code para agilizar o desenvolvimento de um arquivo HTML.

Sugestões de código no VS Code

Ao digitar "html" em um arquivo HTML no VS Code, o editor oferece uma sugestão automática "html : 5".

Ao selecionar essa sugestão, o editor preenche automaticamente a estrutura básica do documento HTML.

Isso inclui a tag DOCTYPE e outras meta tags úteis que serão exploradas nas próximas aulas.

Essa funcionalidade evita a necessidade de escrever manualmente toda a estrutura inicial do documento HTML.

Estrutura básica do HTML

Visão geral da seção: Nesta seção, o instrutor destaca como o VS Code facilita a criação da estrutura básica de um documento HTML.

Estrutura básica gerada pelo VS Code

Ao utilizar a sugestão "html : 5", o editor preenche automaticamente a estrutura básica do documento HTML.

Isso inclui as tags necessárias, como DOCTYPE e html.

O preenchimento automático também adiciona algumas meta tags úteis que serão abordadas em futuras aulas.

Simplificando a criação do documento HTML

Visão geral da seção: Nesta seção, o instrutor destaca como utilizar as sugestões de código no VS Code simplifica a criação do documento HTML.

Utilizando a sugestão "html : 5"

Ao digitar "html : 5", o editor preenche automaticamente toda a estrutura básica do documento HTML.

Isso inclui as tags DOCTYPE, html, head e body.

Essa funcionalidade evita a necessidade de escrever manualmente cada uma dessas tags.

Conclusão

Visão geral da seção: Nesta seção final, o instrutor conclui a demonstração das sugestões de código no VS Code.

Utilizar as sugestões de código no VS Code agiliza o processo de criação do documento HTML.

A funcionalidade "html : 5" preenche automaticamente a estrutura básica do documento, economizando tempo e esforço.

Nas próximas aulas, serão exploradas as meta tags adicionadas pelo preenchimento automático.