Introduction to HTML

Welcome to the exciting world of HTML! In this course, you will learn about the fundamentals of Hypertext Markup Language (HTML), the backbone of every website you visit on the internet. HTML is a simple yet powerful language that allows us to create structured and interactive web pages. Let's dive in and explore its history, purpose, and how it works alongside other technologies like CSS and JavaScript to bring websites to life!

A Brief History of HTML

HTML was created by Tim Berners-Lee in the late 1980s while he was working at CERN, the European Organization for Nuclear Research. The goal was to create a system for sharing and distributing information among researchers easily. HTML became the standard markup language for creating web pages and has evolved over the years with various versions, such as HTML+, HTML 2.0, and the current HTML5.

What is HTML?

HTML is the standard markup language for creating web pages and web applications. It uses a set of tags and attributes to define the structure and content of a web page. HTML tells the web browser what to display and how to interpret the content, such as headings, paragraphs, images, videos, and links.

How HTML Works with CSS and JavaScript

HTML is often used alongside two other essential web technologies: CSS (Cascading Style Sheets) and JavaScript. CSS is responsible for the styling and layout of the HTML content, making it visually appealing. JavaScript, on the other hand, adds interactivity to the web page, enabling dynamic behavior and responsive user interfaces. Together, HTML, CSS, and JavaScript form the foundation of modern web development.

The Power of HTML: What Can It Do?

HTML is everywhere on the web! It helps us display text, images, videos, forms, tables, and much more. With HTML, you can create informative web pages, build interactive forms for user input, embed multimedia content, and structure your website's content logically. Companies and organizations of all sizes rely on HTML to build their websites, from small startups to large enterprises like Google, Facebook, and Amazon.

Your HTML Workspace: Setting Up Your Environment

For PC Users

To start your HTML journey, you'll need a code editor - a special program designed for writing and editing code. There are many code editors available, but for this course, we recommend using Visual Studio Code (also known as VSCode). It's a free, powerful, and user-friendly editor that will make your coding experience enjoyable.

Download VSCode: Head over to the VSCode website(visit to download) and download the installer for your operating system. Install VSCode on your computer by following the installation wizard.
Create a New Folder: Open Windows Explorer or Finder (on Mac) and create a new folder for your HTML projects. You can name it anything you like, or simply leave it as it is.
Open VSCode: Launch VSCode and drag and drop your new folder into the VSCode window. This will set the folder as your workspace.
Create Your First HTML File: In VSCode, navigate to the "Explorer" tab on the left sidebar. Click on the "New File" icon (or press Ctrl+N on Windows or Cmd+N on Mac) to create a new file. Name it "index.html" (the ".html" extension is important!). Save the file by pressing Ctrl+S (Windows) or Cmd+S (Mac) or clicking the "Save" icon.

View Your HTML in the Browser: Now, let's write some basic HTML code! Copy and paste the following code into your "index.html" file:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first HTML code!</p>
  </body>
</html>

Save the file again. To view your handiwork, open the folder you created in your file explorer, find the "index.html" file, and drag and drop it into your web browser. Congratulations! You've just created and viewed your first website! Don't worry about memorizing the code; we'll break down each part in the upcoming lessons.

For Mobile Users

If you're using a mobile device, there are several code editors available on iOS and Android that you can use. We recommend editors with built-in browsers for convenience. Here are the steps to get started:

Download a Mobile Code Editor: Search for "code editor" on your device's app store and download one with good reviews and a built-in browser (e.g., "Dcoder," "Code Editor," or "Coding Studio").
Create a New File: Open the app and create a new file. Name it "index.html" and make sure to save it.
Write Your First HTML Code:Copy and paste the same HTML code provided earlier into your "index.html" file. Save your changes.
View Your HTML in the Browser:Most mobile code editors will have a "Run" or "Preview" button. Tap that button to view your HTML code in the built-in browser. If your editor doesn't have a built-in browser, you may need to copy the file to a cloud storage service (like Dropbox) and open it from there in a mobile browser.

Understanding the ".html" Extension

You might be wondering why we use the ".html" extension for our HTML files. This extension is essential because it tells the web browser that the file contains HTML code and should be interpreted as such. Other programming and markup languages have their own extensions, like ".css" for CSS files and ".js" for JavaScript files. This helps both humans and computers quickly identify the type of content in a file.

Remember, this is just an introduction to what your appetite! In the upcoming lessons, we'll dive deeper into each aspect of HTML, exploring tags, attributes, and more. So, get ready to embark on an exciting journey as we unlock the secrets of HTML together!