Day 1: The Skeleton (Structure & Syntax)
Day 1: The Backbone of the Web
Every website you have ever visited, from Google to Facebook to this blog, is built on HTML (HyperText Markup Language). It provides the structure.
The Basic Template
Every HTML file follows this exact structure. Memorize it (or just use a snippet!).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>Breaking It Down
1. <!DOCTYPE html>
This tells the browser: “Hey, I am using HTML5 (the modern version).” Without this, browsers might behave strangely (Quirks Mode).
2. <html>
The root element. Everything else lives inside here. lang="en" helps screen readers and search engines know the language.
3. <head>
The “brain” of the page. Information here is NOT shown to the user (mostly).
- Meta tags: Character encoding, viewport settings.
- Title: What appears in the browser tab.
- Links: Connections to CSS (styles) or Favicons.
4. <body>
The “body” of the page. This is what the user SEES.
- Headings, Text, Images, Buttons.
Tags and Elements
HTML uses tags wrapped in angle brackets < >.
Most tags come in pairs: an Opening Tag and a Closing Tag.
<p>I am content.</p>
<!-- <p> = Start -->
<!-- </p> = End (Notice the slash) -->Some tags are Self-Closing (void elements) because they don’t hold content:
<img>(Image)<br>(Line Break)<input>(Input field)
Homework for Day 1:
- Create a file named
index.html. - Type out the boilerplate code (try not to copy-paste!).
- Change the
<title>to your name. - Add a heading
<h1>inside the body with a welcome message. - Open the file in your browser.
See you in Day 2 where we learn to Format Text!