How to Make Your First Webpage with HTML in 10 Minutes
Do you want to build your own website but don't know where to start? Good news: your first webpage takes only 10 minutes, you don't need to pay for anything, and you can do it on a phone or a laptop. In this guide you will write real HTML code, see it work, and understand what every line does.
WHAT YOU NEED
- A phone or laptop
- A simple text editor (Notepad on Windows, or any notes or code editor app on your phone)
- A browser such as Chrome
STEP 1: CREATE YOUR FILE
Open your text editor and create a new file. Save it with the name index.html. The ending .html is what tells the browser that this is a webpage.
STEP 2: PASTE THE STARTER CODE
Copy this code into your file and save it:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
STEP 3: OPEN IT IN YOUR BROWSER
Open the index.html file with Chrome. You should now see a big "Hello, World!" with a line of text under it. Congratulations, you just built a webpage!
WHAT EACH PART MEANS
- <!DOCTYPE html> tells the browser this is a modern HTML page.
- <html> wraps the whole page.
- <head> holds information about the page, like its title in the browser tab.
- <body> holds everything people see on the page.
- <h1> is the main heading. Smaller headings are h2, h3 and so on.
- <p> is a paragraph of text.
STEP 4: ADD A LINK AND A PICTURE
Put these lines inside the body, under your paragraph:
<a href="https://www.google.com">Visit Google</a>
<br>
<img src="https://via.placeholder.com/300x150" alt="My picture">
The <a> tag makes a clickable link. The <img> tag shows a picture. Replace the address with a link to your own photo later.
STEP 5: MAKE IT LOOK GOOD WITH CSS
HTML builds the page, and CSS decorates it. Add this inside the <head>, under the title line:
<style>
body { font-family: Arial; text-align: center; background: #f4f4f4; }
h1 { color: #0d47a1; }
p { font-size: 18px; }
</style>
Save and refresh your browser. Your page now has a new font, a centered layout, a grey background and a blue heading. Try changing the colors and see what happens. Playing with it is the fastest way to learn.
COMMON MISTAKES TO AVOID
- Forgetting to close a tag. If you open <p>, you must close it with </p>.
- Saving the file as index.html.txt. Make sure it ends with only .html.
- Forgetting to save before you refresh the browser.
WHAT TO LEARN NEXT
1. More HTML: lists, tables and forms
2. CSS: layouts, colors and mobile-friendly design
3. JavaScript: make your page interactive with buttons and menus
4. Free hosting, so the whole world can open your website
Follow this link for more blogs and useful tips:
https://allarbaa.cloud
Follow this blog for the next lessons. If you have a question, or you want a professional website built for you or your business, contact me on WhatsApp at +234 706 944 4260 or by email at [email protected].
Comments