Curso de HTML Completo: Aula 02 - Estrutura Básica
Creating Basic HTML Structure
Introduction to HTML Basics
- The lesson focuses on creating a basic HTML document, which serves as the foundation for any website. Understanding this structure is essential for beginners.
Understanding Tags in HTML
- HTML operates with opening and closing tags, using "<" and ">" symbols. Visual Studio Code (VS Code) assists by automatically closing tags when they are opened.
Keyboard Shortcuts for Symbols
- Some students struggle with typing the "<" symbol. It can be typed by holding SHIFT + COMMA on most keyboards.
Advantages of Using VS Code
- VS Code offers features like content suggestions and automatic tag completion, enhancing productivity while coding in HTML.
Document Type Declaration
- The first tag to declare is
<!DOCTYPE html>, informing the browser that the document is an HTML type. Following this, the<html>tag encompasses all content within the document.
Structuring Content with Head and Body Tags
Head Tag Usage
- The
<head>tag contains metadata not displayed to users but read by browsers. Inside it, you can include a<title>tag to define your site's title.
Body Tag Importance
- The
<body>tag holds all visible content for users accessing the site. This includes headings and paragraphs that will appear on the webpage.
Creating Headings and Paragraphs
- An example of adding a heading (
<h1>) titled "Meu primeiro site" is provided, along with a paragraph demonstrating how to format text within these tags.
Saving Your Work in VS Code
Saving Documents Effectively
- To save changes in VS Code, use CTRL + S. A white dot indicates unsaved changes; once saved, it disappears.
Alternative Save Methods
How to Use Live Server in VS Code
Saving Your Work
- It's important to frequently save your document using CTRL+S to avoid losing changes, especially when working with a live server.
Running the Live Server
- To view your site in real-time, you can click the "Go Live" button or right-click on the document and select "Open with Live Server."
- The first time you run the live server, Windows Firewall may prompt for permission; ensure you allow it for proper functionality.
Viewing Changes in Real-Time
- Once activated, the live server displays your website immediately upon saving changes, enhancing development efficiency.
- You can modify content (e.g., changing titles), and see updates reflected instantly on the browser without needing to refresh manually.
Organizing Your Workspace
- Utilize Windows key shortcuts to arrange your workspace effectively by splitting screens between VS Code and your browser for simultaneous viewing.
- Use CTRL+B to toggle visibility of file explorer in VS Code, allowing more space for code editing while still monitoring live changes.
HTML Structure Basics
- Understanding basic HTML structure is crucial; start with DOCTYPE declaration followed by essential tags like
<html>,<head>, and<body>.
- In VS Code, typing "html" prompts suggestions that auto-generate a basic HTML template including necessary meta tags.