Basic Structure of HTML Website | Complete HTML CSS JavaScript Course in Hindi - Tutorial #3
Introduction to HTML Structure
Overview of Previous Video
- The channel welcomes viewers and references the previous video where Visual Studio Code (VS Code) was downloaded, along with extensions for customization.
- Emphasizes that VS Code will be used throughout the course, while also mentioning the option to use other editors.
Creating Project Structure
- The speaker opens an existing folder named "html4" in VS Code and creates a new subfolder called "text files."
- Discusses the importance of having multiple HTML files for a website, highlighting that the main page is typically named
index.html.
Understanding HTML Tags
Components of HTML
- Introduces the concept of HTML tags as essential components for creating web pages, such as navigation bars and footers.
- Explains heading tags, including their structure with opening and closing tags, using "Hello World" as an example.
Elements in HTML
- Defines an element as consisting of an opening tag, content, and a closing tag; specifically referring to it as a heading element.
Basic Structure of an HTML Document
Using Emmet Abbreviation
- Demonstrates how typing an exclamation mark triggers Emmet abbreviation in VS Code to generate boilerplate code quickly.
- Highlights how this feature saves time compared to manually writing out all necessary code.
Running Your First Web Page
- Describes how to run the created HTML file using the Live Server extension in VS Code by clicking on "Go Live."
HTML Document Elements
Understanding Head and Body Tags
- Clarifies that every HTML document contains two primary elements:
<head>and<body>.
- Notes that content within the head tag is not visible on the webpage except for titles; important metadata like viewport settings are included here.
Importance of Meta Tags
- Introduces meta tags which provide data about data (metadata), ensuring responsive design across devices.
Content Visibility in Web Pages
Title and Favicon Display
- Explains how changes made in the head section affect what users see in their browser's title bar or tab icon (favicon).
Body Content Presentation
Understanding Developer Tools in Web Development
Basic Structure of a Website
- The speaker introduces the basic structure of a website and highlights the importance of understanding which elements serve specific functions.
- Demonstrates how to inspect elements on a webpage, allowing users to modify text temporarily (e.g., changing "Hello World" to "My First Website").
Limitations of Inspecting Elements
- Changes made through the inspect tool are not permanent; refreshing the page reverts any modifications.
- Emphasizes that inspecting and altering elements is solely for development purposes and does not affect the actual website.
Viewing Page Source
- Introduces the concept of viewing page source, where all HTML code for a webpage can be accessed.
- Mentions that this includes code injected by tools like live server extensions, which may not be part of the original HTML written by developers.
Practical Application: Google.com Example
- The speaker demonstrates how to view source code on an established site like Google.com, reinforcing learning about developer tools.