Getting Started with HTML: Create Your First Web Page in 10 Minutes
Mike Codeur
Dreaming of creating your own website but don’t know where to start?
Good news: with HTML, the foundation of the web, you can create a simple first page in no time. No need to be an expert—follow this guide and get started!
What is HTML?
HTML, or HyperText Markup Language, is the basic structure of all web pages. Think of HTML as the skeleton that gives shape to your online content. Using tags, you can structure text, add images, insert links, and much more.
Your Starting Toolkit
Before you begin, here’s what you’ll need:
- A text editor: Visual Studio Code or even Notepad will work.
- A web browser: Chrome, Firefox, or Edge.
- 10 minutes of your time.
Step 1: Create the HTML File
- Open your text editor.
- Save a new file with the
.html
extension, for example:index.html
.
Step 2: Basic Structure of an HTML Page
Copy and paste the following code into your file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to my first web page!</h1>
<p>This is a paragraph of text. Creating a web page is simpler than you think.</p>
</body>
</html>
Quick Explanation:
<!DOCTYPE html>
: Specifies that we’re using HTML5.<html>
: The root of your document.<head>
: Contains information about the page (like the title displayed in the browser tab).<body>
: Contains everything your visitors will see.
Step 3: View Your Page
- Open the
index.html
file in your browser (just double-click it). - Congratulations! You’ve created your first web page!
Step 4: Add More Elements
Experiment by adding more content to your page.
Add an Image:
<img src="https://via.placeholder.com/150" alt="Example image">
Add a Link:
<a href="https://www.google.com" target="_blank">Visit Google</a>
Step 5: Customize with a Bit of Style
To make your page more appealing, add a basic CSS file.
- Create a file named
style.css
in the same folder. - Add this code:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
text-align: center;
}
- Link the CSS file to your HTML by adding this line in the
<head>
:
<link rel="stylesheet" href="style.css">
Refresh your page to see the result!
Conclusion
In just a few minutes, you’ve created a functional web page and started exploring the basics of web development. This is the beginning of an exciting journey. Keep experimenting, and most importantly, have fun! 🚀