Curso de HTML Completo: Aula 01 - Criando novo projeto

Welcome to the Free HTML Course

Introduction to HTML

• The course introduces HTML as a foundational programming language for the internet and various systems, emphasizing its versatility in web development.

• The instructor encourages engagement by asking viewers to like the video, highlighting that the course content is comparable to paid materials and beneficial for professional growth.

Understanding HTML Basics

• A brief overview of how to work with HTML is provided, including editing codes not shown in this video. Viewers are directed to continue watching the playlist for comprehensive learning.

• HTML stands for Hyper Text Markup Language, which structures web content such as text, images, and videos. Files typically have extensions ".html" or ".htm".

File Formats and Tags

• The recommended file format is ".html", which is widely accepted in web development.

• HTML uses tags (or labels), represented by angle brackets (< >), forming elements that define content types on a webpage.

Commonly Used Tags

• The <title> tag specifies the website's title displayed in browser tabs.

• There are currently 140 HTML tags; they inform browsers about content types like images (<img>), videos (<video>), and audio (<audio>).

Tag Identification and Usage

• Some tags are intuitive based on their names (e.g., image, video). Others may require understanding abbreviations from English (e.g., li for list item).

• Proper use of tags ensures browsers interpret website structure correctly; this module will cover essential tags thoroughly.

Creating Your First Project

Setting Up Your Project Environment

• The instructor begins creating a project folder on Windows at C:/ drive for independence from user-specific directories.

Folder Organization Best Practices

• A new folder named "sites" is created within C:/ to organize projects effectively without user dependency issues.

• Inside "sites," another folder called "site1" is created. It's advised not to use spaces in folder names; alternatives include hyphens or camel case.

Naming Conventions

• Suggested naming conventions include using hyphens (e.g., "meu-primeiro-site") or underscores (e.g., "meu_primeiro_site") for clarity when working with links later on.

Launching Visual Studio Code

How to Create and Manage HTML Projects in VS Code

Opening a Specific Folder in VS Code

• The process begins with opening the program and selecting "Open Folder" to access a specific project directory.

• Navigate to the desired folder, such as "aula-html," which contains your project files. The "Explorer" tab shows the current directory.

Creating New Files and Folders

• To create new files, use the "New File" option within the Explorer tab. This allows for easy organization of project components.

• Always name your main file as "index.html," which is a standard practice for initial web pages.

Understanding File Types and Structure

• Upon creating an HTML file, Visual Studio Code recognizes it as an HTML document, facilitating tag insertion and coding efficiency.

• A recap on how to create a new project and open it in VS Code emphasizes understanding these foundational steps.

Closing Projects and Returning to Zero State

• Closing files or folders can be done through the menu options; this resets your workspace back to its default state.

• After closing VS Code, you can reopen it without any active projects or files displayed.

Organizing Project Directories

• Create a structured directory on your local disk (e.g., C:sites), where all future projects will reside for better organization.

• Within the created folder ("aula-html"), initiate new files directly from VS Code by using the appropriate commands.

Advanced Techniques for Opening Folders

• You can also open folders via keyboard shortcuts (CTRL+O), streamlining workflow when accessing different directories.

• Dragging and dropping folders into VS Code is another method of importing projects directly into the workspace.

Using Command Line for Project Management

• For advanced users familiar with command line operations, opening a folder in VS Code can be achieved using CMD commands like code ..

Conclusion: Next Steps in Learning HTML Structure