Navigation
Learn how the internet works and how HTML provides the skeleton for every website you visit.
Have you ever wondered what's happening behind the scenes when you click a link? It's like ordering a pizza, but instead of dough and cheese, you're requesting a digital skeleton that builds itself in milliseconds.
Every time you visit a website, a conversation happens. Your computer (the client) uses a web browser to send a request across the internet. On the other end is a web server, a powerful computer that stores website files. Think of the browser as a customer at a restaurant and the server as the chef. The customer asks for a specific dish (a URL), and the chef sends back the ingredients (HTML files). Your browser then 'renders' or translates that code into the text and images you see on your screen. Without this handshake, the internet would just be a silent network of disconnected computers.
Quick Check
If you are using Chrome on a laptop to look at a cat video, is your laptop acting as the 'client' or the 'server'?
Answer
The laptop is the client.
HTML stands for HyperText Markup Language. It isn't a programming language that performs logic; instead, it is a markup language that provides the structure or 'skeleton' for a page. HTML uses tags to identify different parts of the document. Most tags come in pairs: an opening tag like `<html>` and a closing tag like `</html>`. The closing tag always includes a forward slash `/`. There are three main parts to every HTML file: the `<!DOCTYPE html>` declaration, the `<head>` which contains invisible information like the page title, and the `<body>` which contains everything you actually see.
Follow these steps to see the minimum code required for a valid webpage: 1. Start with `<!DOCTYPE html>` to tell the browser you are using modern HTML. 2. Wrap everything in `<html>` tags. 3. Add a `<head>` section for metadata. 4. Add a `<body>` section for your content.
```html <!DOCTYPE html> <html> <head> </head> <body> </body> </html> ```
Quick Check
What specific character is added to a tag to turn it into a 'closing tag'?
Answer
A forward slash /
To make text appear on the screen, we place elements inside the `<body>` tags. One of the most common elements is the heading tag, written as `<h1>`. The number represents the highest level of importance (and usually the largest size). If you wanted a smaller sub-heading, you might use `<h2>` or `<h3>`. When the browser sees `<h1>Hello World</h1>`, it knows to display that text prominently. This process of taking code and turning it into a visual layout is called rendering. Even the most complex websites in the world, like Google or YouTube, are built using these same fundamental building blocks.
Let's combine everything to create a functional page: 1. Create the skeleton (doctype, html, head, body). 2. Inside the `<head>`, add a `<title>My First Page</title>`. 3. Inside the `<body>`, add `<h1>Hello World!</h1>`. 4. Save the file as `index.html` and open it in a browser.
In HTML, we often put tags inside other tags. This is called nesting. 1. Inside your `<body>`, add a paragraph tag `<p>`. 2. Inside that paragraph, use the `<b>` tag to make one word bold. 3. Example: `<p>This is <b>really</b> cool!</p>`. 4. Ensure you close the tags in the reverse order you opened them!
Which of the following is responsible for 'rendering' HTML into a visual webpage?
Where should you place the code for a visible 'Hello World' heading?
The <title> tag displays text directly on the main white area of the webpage.
Review Tomorrow
In 24 hours, try to list the four essential tags needed to create a basic HTML skeleton from memory.
Practice Activity
Try creating an HTML file with six different headings, from <h1> to <h6>, to see how the browser changes the text size for each.