As the first article about programming in this blog, I thought to begin with something basic, to better understand how programming works and it's structure. Let's dive into HTML and create our first "Hello, World!" webpage. But before we start throwing tags around like confetti, let's approach this like a true developer.
Deconstructing the Problem
First things first, when beginning any project you must ask yourself, what are we trying to achieve here? In this case, we want to display "Hello, World!" in a web browser. Sounds simple, right? Let's break it down further:
We need a file that a web browser can understand. (Imagine you're trying to have a conversation with someone who only speaks French, but you only know English. Not very effective, right? Well, web browsers have their own "language" too. They're fluent in HTML, CSS, and JavaScript.)
This file needs to contain some sort of structure.
Within this structure, we need to place our "Hello, World!" text.
We need to save this file in a way that tells the browser it's HTML.
Creating a Browser-Friendly File
So, how do we create a file that speaks the browser's language? Let's break it down:
File Extension: The first clue we give to the browser is through the file extension. By saving our file with a
.htmlextension (likehello.html), we're essentially telling the browser, "Hey, this file contains HTML code!"Document Type Declaration: While not strictly necessary for a simple "Hello, World!", it's good practice to start your HTML file with a doctype declaration. It's like a formal introduction to the browser:
HTML Structure: Browsers expect HTML content to be structured in a specific way. At minimum, we need an
<html>tag that contains everything else.
We can now dive into creating your first hello world file.
Hello World
Create the HTML file
Let's start with the bare minimum. Open your favorite text editor and type:
Save this as "hello.html" and open it in your browser. What's your hypothesis?
If you're thinking, "It'll just show 'Hello, World!' on the page," you're on the right track.
Add some structure
Now, let's form a new hypothesis. What if we add some HTML tags? Try this:
What do you think will happen? Will it look any different? Run it and see!
Introduce the body
Let's get a bit more structured. In HTML, visible content usually goes in the "body". Let's try:
Predict what will change, then test it out. Surprised? Maybe not, but you're thinking like a programmer now :)
Add a header
Final touch – let's wrap our text in a header tag:
Now you know how to make your first html file! Have fun and subscribe to our newsletter to stay up to date with our new articles :)
