Let’s Dive into HTML - Your Ticket to Web Wonderland! - Scratch My Dev

Before we start, I strongly advise you follow the CSS series along with this one as the two are intertwined. Begin here the CSS series.

Welcome to the “Mastering HTML” adventure series, where we’ll embark on an exciting journey into the magical world of web development. In this first installment, we’re handing out your golden ticket, and we’re about to board the HTML express that’ll take you to incredible web destinations. 🚀

Meet the Star of the Show: HTML!

Hold on to your hats, because you’re about to meet the star of the show - HTML, short for Hypertext Markup Language! Think of HTML as the architect and interior designer of the internet. It’s what makes web pages not only functional but also look fantastic (although he needs his buddy CSS to truly enhance the web!).

But first a bit of history…

Yeah I know why do you need to know about HTML history, you didn’t come here for that right? Well just bear with me, I am a just a tad sentimental as the Web is as old as me (ish), and frankly it’s not that old! The Web (don’t confuse the Web for the Internet 😉) was born between 1989 and 1992 and we owe it to Tim Berners-Lee. Can you imagine back then? Using one of the first browsers to surf on the Web, what a revolution that was. Anyway, I don’t want to bore you with all the details, just know that with time came several versions of HTML, each bringing something new to the table. The last version that most websites use (that you will use) is number 5, yes like Chanel…

Unveiling Your Web Toolkit

Before we hit the road, let’s make sure you’re equipped with the essentials. You’ll need a trusty text editor - like Notepad (for the Windows explorers), TextEdit (for the Apple aficionados), or if you’re a pro, something like Visual Studio Code or Sublime Text. It’s like your map and compass for this journey. Just remember that HTML files are text based, you will only ever need a text editor to write them.

Now, fire up your text editor and create a brand new file. What you create next is your very own masterpiece - an HTML document. Give it a name, but don’t forget to add the secret sauce: the .html extension. For example, name it “index.html” - this is where the magic will happen.

The HTML Alchemy Begins: Your First HTML Document

Open your newly minted “index.html” file, and get ready for some HTML alchemy. An HTML document has its secrets, and here’s the key to unlock them:

<!DOCTYPE> declaration: This line declares the type of HTML you’re using. For modern web pages, the magic words are <!DOCTYPE html>. It’s like saying, “Hey, browser, get ready for some awesome HTML5!“. Consider yourself lucky, the doctype for HTML4 was way more…exotic, to stay polite.
<html> element: This is the grand entrance of your page. Everything on your web adventure starts and ends here.
<head> element: This is like your web backpack, where you store important information about your adventure. It includes things like the page title and links to your stylish outfits (CSS stylesheets). Every HTML tag written here should not be content for users who will be viewing your website, only browsers and search engine will really need to get information from here.
<body> element: This is where the heart of your adventure lies. It’s where the fun stuff goes - text, images, and more!

Take a peek at this snippet:

<!-- This is a comment, only for you to see, not the user visiting your page -->
<!doctype html>
<!-- Doctype for telling the browser our page uses HTML5 -->
<html>
  <head>
    <!-- Lots on information about your page that browsers
					and search engines will need -->
    <meta charset="UTF-8" />
    <title>My First Web Page</title>
  </head>
  <body>
    <!-- This where the content of your page goes -->
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple web page created using HTML. 🎉</p>
  </body>
</html>

Lights, Camera, Action! Let’s See Your Web Page!

Now, for the most exciting part: seeing your web page come to life! Double-click your “index.html” file, and like magic, your default web browser will whisk you away to a land of web wonders. You’ll be greeted by a bold “Welcome to My Web Page” heading and a welcoming message. 🎈

Congrats, web adventurer! You’ve just taken your first step on this incredible HTML journey. In the next episode of our adventure series, we’ll explore HTML elements and tags - the building blocks of the web. Get ready for some serious fun and learning!

Don’t worry if you are a bit lost for now, there are more episodes to come in this series, and by the end you will be a master adventurer in the HTML wonderland 😉

Photo of freestocks from Unsplash