5 Ready-Made HTML Coding Examples for Beginners
Here are five examples of finished, ready-to-use HTML code. You can copy this code directly into a text editor (such as Notepad, VS Code, or Notepad++) and save it with the .html extension (e.g., index.html) to view the results in your browser.
1. Basic HTML Structure (Your First Page)
This is the essential framework for every website page. It includes a page title (heading) and a paragraph.
HTML
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph created using HTML. Pretty easy, right?</p>
</body>
</html>
2. Formatting Text (Bold, Italics, Underline)
HTML provides special tags for changing text styles without the need for CSS (a design language).
HTML
<!DOCTYPE html>
<html lang=”id”>
<head>
<title>Format Teks HTML</title>
</head>
<body>
<h2>Belajar Memformat Teks</h2>
<p>Ini adalah teks biasa.</p>
<p>Ini adalah teks <b>tebal (bold)</b>.</p>
<p>Ini adalah teks <i>miring (italic)</i>.</p>
<p>Ini adalah teks <u>bergaris bawah (underline)</u>.</p>
<p>Kita juga bisa <b><i>menggabungkannya</i></b> sekaligus.</p>
</body>
</html>
3. Creating Lists (Ordered and Unordered Lists)
There are two types of lists in HTML: ordered lists and unordered lists.
HTML
<!DOCTYPE html>
<html lang=”id”>
<head>
<title>Creating a List in HTML</title>
</head>
<body>
<h2>Shopping List (Without Numbering)</h2>
<ul>
<li>Ground Coffee</li>
<li>Liquid Milk</li>
<li>Granulated Sugar</li>
</ul>
<h2>Steps for Making Coffee (With Numbering)</h2>
<ol>
<li>Put a spoonful of coffee into a glass.</li>
<li>Pour in enough hot water.</li>
<li>Stir until well combined and ready to enjoy.</li>
</ol>
</body>
</html>
4. Displaying Images and Links
The web wouldn’t be fun without images and links. This example shows how to direct users to other sites and display images from the internet.
HTML
<!DOCTYPE html>
<html lang=”id”>
<head>
<title>Links and Images</title>
</head>
<body>
<h2>Showing Links</h2>
<p>Visit <a href=”https://www.google.com” target=”_blank”>Google here</a>.</p>
<h2>Showing Images</h2>
<img src=”https://picsum.photos/300/200″ alt=”Sample Images from Picsum” width=”300″>
<p><i>Note: Make sure you are connected to the internet to view the images above.</i></p>
</body>
</html>
5. Creating a Simple Contact Form
This example is often used for contact pages. Users can enter their name, email address, and message.
HTML
<!DOCTYPE html>
<html lang=”id”>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action=”#”>
<label for=”name”>Full Name:</label><br>
<input type=”text” id=”name” name=”name” placeholder=”Enter your name” required><br><br>
<label for=”email”>Email Address:</label><br>
<input type=”email” id=”email” name=”email” placeholder=”example@email.com” required><br><br>
<label for=”message”>Message:</label><br>
<textarea id=”message” name=”message” rows=”4″ cols=”30″ placeholder=”Write your message in Here…”></textarea><br><br>
<input type=”submit” value=”Send Message”>
</form>
</body>
</html>
💡 Tips for Beginners: > Try changing the text inside tags (like between <h1>…</h1> or <p>…</p>) to see how the changes immediately affect the appearance of your web page!
What to do?
- Keep in mind that Google algorithm updates in recent years have been difficult to predict. Since the implementation of the helpful content policy, search results have been filled with pages that users did not expect.
- This happened because some website owners saw that the helpful content update did not fully occur. In fact, it can be said that websites with parasitic SEO practices are becoming more common.
Why choose Mitra IT?
• Expert Team: We have a team of experienced and creative technology experts.
• Comprehensive Solutions: We not only provide technology but also offer full support to ensure your business success.
• Focused on Results: We are committed to helping you achieve your business goals.
Don’t miss the opportunity to maximize your business potential!
Contact us now for a free consultation.
