Greta Endrizzi

Software Developer at Blossom

DEVELOPMENT

Programming 101 - Hello World

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:

  1. 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.)


  2. This file needs to contain some sort of structure.


  3. Within this structure, we need to place our "Hello, World!" text.


  4. 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:

  1. File Extension: The first clue we give to the browser is through the file extension. By saving our file with a .html extension (like hello.html), we're essentially telling the browser, "Hey, this file contains HTML code!"

  2. 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:


    <


  3. 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:

Hello, World

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:

<html> Hello, World! </html>

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:

<html> <body> Hello, World! </body> </html>

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:

<html> <body> <h1>Hello, World!</h1> </body> </html>

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 :)


Greta Endrizzi

Software Developer at Blossom

Get your free consultation call

Let's discuss your project in detail via Calendly

Ready to start?

Get your free landing page redesign

English

© 2024 Blossom

All rights reserved ✿ Privacy Terms

Ready to start?

Get your free landing page redesign

English

© 2024 Blossom

All rights reserved ✿ Privacy Terms

Ready to start?

Get your free landing page redesign

English

© 2024 Blossom

All rights reserved ✿ Privacy Terms