Follow each step in order. Copy the snippet, paste it into your file, and watch the page build itself up one piece at a time.
Goal: a working newsletter page in your browserEvery HTML file starts with this. It tells the browser the document type and the language. Create a new file called newsletter.html and paste this in first.
<!DOCTYPE html>
<html lang="en">
</html>The head is invisible to visitors. It holds the page title shown in the browser tab, the character encoding, and later your CSS and tracking scripts. Paste this inside your <html> tags.
<head>
<meta charset="UTF-8" />
<title>My Newsletter</title>
</head>The body is what users see. Every visible element lives here: headings, text, images, buttons. Paste this below your closing </head> tag.
<body>
</body>Head and body together. This is the starting point for every HTML file you will build. Replace what you have so far with this complete shell and save.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Newsletter</title>
</head>
<body>
</body>
</html><h1> is the main page title. There should be only one H1 per page. Paste this inside your <body> tags.
<h1>The Weekly Scoop</h1>The <p> tag wraps body text. It creates a block of readable content with spacing above and below. Add this below your heading.
<p>Welcome to this week's issue. Here is a short update for our readers.</p>src is the file path. alt is the description read by screen readers and indexed by search engines. Both attributes are required. Add this where you want the image to appear on the page.
<img src="banner.jpg" alt="Newsletter banner image" />The href attribute holds the destination URL. The text between the opening and closing tags is what the user sees and clicks.
<a href="https://www.example.com">Read the full story</a>CSS controls how everything looks: colors, fonts, spacing, layout. Paste this block inside your <head>, after the <title> tag. Save and refresh your browser to see it take effect.
<style>
body {
font-family: Georgia, serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #1a1a18;
}
p {
font-size: 15px;
line-height: 1.7;
color: #444;
}
</style>JavaScript makes the page respond to actions. This adds a button that reveals hidden text when clicked. Paste this block anywhere inside your <body> and try it in the browser.
<button onclick="toggleNote()">Show Note</button>
<p id="note" style="display: none;">This text was hidden until you clicked.</p>
<script>
function toggleNote() {
var note = document.getElementById("note");
if (note.style.display === "none") {
note.style.display = "block";
} else {
note.style.display = "none";
}
}
</script>Copy this entire block. Delete everything in your current file. Paste and save as newsletter.html. Open it in your browser. You now have a working page built from scratch.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Newsletter</title>
<style>
body {
font-family: Georgia, serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #1a1a18;
}
p {
font-size: 15px;
line-height: 1.7;
color: #444;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="banner.jpg" alt="Newsletter banner image" />
<h1>The Weekly Scoop</h1>
<p>May 26, 2025</p>
<h2>This Week's Story</h2>
<p>Welcome to this week's issue. Here is a short update for our readers.</p>
<p>Great design starts with asking the right questions. Before you open any software, understand who you are designing for.</p>
<a href="https://www.example.com">Read the full story</a>
<hr />
<button onclick="toggleNote()">Show Editor's Note</button>
<p id="note" style="display: none;">This message was hidden until you clicked. That is JavaScript.</p>
<script>
function toggleNote() {
var note = document.getElementById("note");
if (note.style.display === "none") {
note.style.display = "block";
} else {
note.style.display = "none";
}
}
</script>
</body>
</html>