Hi! I'm Roberto Celano, a web developer with a somewhat unusual background: I spent over 12 years as a chef before diving into the world of programming. If you're here, you're probably curious about learning HTML, the foundation upon which the entire web is built. Let me guide you through the first steps of creating your own web page, just as I did when I started.
WHAT IS HTML?
HTML, which stands for HyperText Markup Language, is the language we use to structure and present content on the Internet. Think of HTML as the foundation of a house: it’s the framework that holds everything else in place.Basic Structure of an HTML Document: Every HTML web page follows a simple but powerful structure.
Here’s a basic skeleton of an HTML page:
<!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>Welcome to My Site</h1>
<p>This is an example of a simple web page written in HTML.</p>
</body>
</html>
What does this mean?
<!DOCTYPE html>
This declares that we’re using HTML5
<html lang="en">
Indicates that the content of the page is in English.
<head>
Contains meta-information about the document, such as the page title and character encoding.
<body>
This is where you put all the visible content of your web page.
CREATE YOUR FIRST PAGE
Now that you know the structure, let’s get to work! I’ll guide you through creating a simple web page for a cooking blog (I can’t ignore my chef background, right?).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cooking Blog</title>
</head>
<body>
<header>
<h1>My Cooking Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#recipes">Recipes</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Welcome to My Blog</h2>
<p>Here, I share my favorite recipes and cooking secrets.</p>
<img src="kitchen.jpg" alt="A beautiful kitchen image">
</section>
<section id="recipes">
<h2>Latest Recipes</h2>
<ul>
<li><a href="#">Pasta Carbonara</a></li>
<li><a href="#">Classic Tiramisu</a></li>
<li><a href="#">Margherita Pizza</a></li>
</ul>
</section>
<footer>
<p>Contact me at <a href="mailto:email@example.com">email@example.com</a></p>
</footer>
</body>
</html>
Let’s Talk About
Some Important Tags:
<h1> - <h6>
Headings of various sizes, where <h1> is the most important.
<p>
Defines a paragraph of text.
<a href="url">
Creates a hyperlink.
<img src="kitchen.jpg" alt="description">
Inserts an image into the page.
Visual Example:
Here’s how the final result should look in your browser. If you’ve followed along, you’ve just created your first mini-website! (You can replace this image with a real one from your project)
A FEW PRATICAL TIPS
Image Optimization: When adding images, use optimized formats like .jpg or .png and ensure they’re properly resized to keep the site fast.
Accessibility: Always use the alt attribute on images to improve the accessibility of your site.
CONCLUSION
You’ve just taken your first steps into the world of HTML, but this is just the beginning. HTML is a solid foundation on which you can build increasingly complex projects, integrating CSS for style and JavaScript for interactivity. If you’re curious to learn more, I recommend exploring the additional resources listed below.Additional Resources:Complete Guide to HTML5 on MDNHTML Tutorial on W3SchoolsHTML Cheat Sheet for BeginnersCall to Action:Did you create your first website with this guide? Share it in the comments, I’d love to see what you’ve made! If you have any questions or want to explore HTML further, feel free to ask. Happy coding!
Top comments (0)