Let’s begin with Lecture 7 of the HTML5 & CSS3 series. Adding Line Breaks and Images in HTML. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Know how to add line breaks using the
<br>tag - Be able to insert images on your webpage using the
<img>tag - Understand how to use image attributes like
src,alt,width, andheight - Create a fun page with text and images together
💬 The <br> Tag – Add Line Breaks
Sometimes, you want to start a new line without starting a whole new paragraph.
Think of it like this:
If paragraphs are like sentences in a storybook, then
<br>is like pressing “Enter” to go to the next line!
Example:
<p>This is line one.<br>This is line two!</p>🎯 Output:
This is line one.
This is line two!
⚠️ Note: <br> It is a self-closing tag, so you don’t need </br>.
🖼️ The <img> Tag – Insert Images
Images make your website more interesting and colorful!
To show an image, we use the <img> tag with some special instructions:
Basic Syntax:
<img src="image.jpg" alt="Description of image">Let’s break it down:
| Attribute | What It Does |
|---|---|
src | Tells the browser where the image is (file name or URL) |
alt | Describes the image if it doesn’t load |
width | Sets how wide the image should be |
height | Sets how tall the image should be |
🔍 Example: Inserting an Image
<img src="cat.jpg" alt="A cute cat" width="200" height="150">If you have a file named cat.jpg In your project folder, this code will show that image.
If not, you can also use an image from the internet:
<img src="https://example.com/images/cat.jpg" alt="Online Cat Image">
💻 Try This: Make a Fun Page with Text and Images
Let’s create a new HTML file that shows off line breaks and images.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
my-fun-page.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>Fun Page</title>
</head>
<body>
<h1>Welcome to My Fun Page!</h1>
<p>This is my favorite joke:<br>Why don't skeletons fight each other?<br>Because they don't have the guts!</p>
<h2>My Favorite Animal</h2>
<p>I love dogs because they are loyal, friendly, and always happy to see you.</p>
<img src="dog.jpg" alt="A happy dog" width="300" height="200">
<h2>My Avatar</h2>
<img src="avatar.jpg" alt="My Profile Picture" width="150" height="150">
</body>
</html>💡 Tip: You can replace "dog.jpg" and "avatar.jpg" With any image files you have saved in the same folder, or use online image URLs instead.
Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve just made a colorful, fun page with text and images!
🧪 Try It Yourself!
- Add a
<br>Inside your joke, to make it easier to read. - Replace the image paths with ones from the internet (like from https://picsum.photos/ ).
- Add another section about your favorite food with an image beside it.
- Try resizing the images by changing the
widthheight.
🚀 Next Lecture Preview:
In Lecture 8, we’ll learn how to make clickable links using the <a> tag, just like the buttons you click in games or apps!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
HTML5 and CSS3 Compleate Series
