Week 1: Getting Started with HTML

Your first steps into the world of web page structure.

Explore Chapter 1

Chapter 1: Introduction to HTML and Your Development Environment

Welcome to the world of HTML! This week, we'll cover the basics of HTML, its role in web development, and how to set up your environment to start creating web pages.

What is HTML?

HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure of a web page, defining the content and layout.

HTML consists of a series of elements, which tell the browser how to display the content. Elements are represented by tags, like for paragraphs, <h1> for headings, and so on.

Key Concepts

Elements: A part of a web page. Made of tags.
Tags: Used to create elements (e.g., , <h1>, <a>). Most have an opening and closing tag.
Attributes: Provide additional information about an element (e.g., <a href="https://www.example.com">).

Basic HTML Document Structure

Every HTML document has a basic structure. Here's the breakdown:


<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

<!DOCTYPE html>: The document type declaration. It tells the browser that this is an HTML5 document.
<html>: The root element of the page.
<head>: Contains meta-information about the HTML document (like the title, character set, links to stylesheets).
<title>: Specifies a title for the HTML document, which is shown in the browser's title bar or tab.
<body>: Contains the visible page content.

Setting up your Development Environment

For HTML, you really only need two things:

A Text Editor: Where you'll write your HTML code. VS Code is recommended, but others work too (Sublime Text, Atom, Notepad++).
A Web Browser: To view your HTML pages. Any modern browser will do (Chrome, Firefox, Edge, Safari).

That's it! No special server setup is needed for basic HTML.

Your First HTML Page: Hello, World!

Let's create your first HTML page.

Open your text editor.
Create a new file named "index.html".
Paste in the following code:


<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to HTML!</p>
</body>
</html>

Save the file.
Open the "index.html" file in your web browser (double-click it).
You should see "Hello, World!" in big letters, and "Welcome to HTML!" below it.

Basic HTML Syntax

Here are some HTML syntax fundamentals:

Tags: Keywords in angle brackets. Most come in pairs: (opening tag) and (closing tag).
Elements: An HTML element is everything from the start tag to the end tag: This is a paragraph.
Attributes: Provide extra info about elements. Written in the start tag: <a href="https://www.example.com">Example Link</a>
Nesting: Elements can be nested (put inside other elements): Important! This is a paragraph.
Empty Elements: Some elements have no closing tag: (line break), <img> (image).