Vamos à prática: criando a página e como estruturo um projeto HTML
Agora, estamos na parte da criação de um documento, uma página HTML. Acredito que você já tenha conferido na W3Schools um tutorial iniciante de HTML. Pois bem, é deste tutorial que estarei resumindo à vocês e criando este passo a passo mais completo sobre o tema para quem está começando. Vamos lá:
Como eu consigo criar meu projeto de HTML?
Abaixo, mostra-se como podemos criar, através dos Meus Documentos (Windows) ou Finder (macOS), um diretório onde possamos configurar nosso projeto no VSCode.
Atenção que este vídeo também mostra opções de compactar a pasta em um arquivo para você enviar para seus amigos. Anota com caneta rosa choque essa imagem abaixo.
A professora
Após a confecção da nossa pasta, basta abrirmos um editor de código (no caso, é o Visual Studio Code que utilizamos no laboratório), navegar em Arquivo > Nova Janela > Abrir Pasta (Open Folder) e selecionar a pasta de seu projeto HTML para visualizar ela. Note que ela pode estar vazia, ou seja, precisamos criar o documento html nela.
Onde posso criar uma página HTML?
Para criar uma página HTML, você pode usar qualquer editor de texto simples, como o Bloco de Notas no Windows, o TextEdit no macOS ou editores de código mais avançados, como o Visual Studio Code ou o Sublime Text. Também é recomendado o Notepad++.
Basta criar um novo arquivo de texto em um destes editores e salvá-lo com a extensão “.html”. Por exemplo, “index.html“. Em seguida, você pode começar a escrever seu código HTML dentro deste arquivo.
E como posso acessá-lo?
Para acessar uma página HTML localmente, basta abrir o arquivo HTML em qualquer navegador da web. Você pode fazer isso de duas formas:
- Navegando até o local onde o arquivo está armazenado em seu computador e clicando duas vezes no arquivo HTML; ou
- Usar um plugin, dentro do VSCode, para abrir a página.
Se você quiser compartilhar sua página na web, você pode hospedá-la em um servidor web e acessá-la através de um navegador digitando o URL correspondente. Mas, esta parte, fica pra próxima.
Referencias
- MDN Web Docs – HTML: https://developer.mozilla.org/pt-BR/docs/Web/HTML
- Documentação oficial e tutoriais sobre HTML.
- W3Schools – HTML Tutorial: https://www.w3schools.com/html/
- Tutoriais interativos e exemplos práticos.
- HTML5 Specification (W3C): https://www.w3.org/TR/html5/
- Especificação oficial do HTML5.
- Livro: “HTML and CSS: Design and Build Websites” por Jon Duckett.
- Um guia visual e prático para aprender HTML e CSS.
Apprendendo 