Lesson 4: Links and Images
🔗 Lesson 4: Links and Images
Links take you places. Images make things look good. Together? They're the backbone of web content that’s both useful and beautiful.
1. Anchor Tags: <a>
Use the <a> tag to create hyperlinks. You can link to another website, another page on your site, or even a different section on the same page.
<a href="https://example.com">Visit Example</a>To link within the same page, you need an ID to jump to:
<a href="#about">Go to About Section</a>2. Open Links in a New Tab
Add target="_blank" to open a link in a new browser tab.
<a href="https://openai.com" target="_blank">Visit OpenAI</a>3. Image Tags: <img>
Use <img> to display images. It must include a src and an alt attribute for accessibility:
<img src="cat.jpg" alt="A cute cat" />If the image can’t load, the alt text shows up instead.
4. Common Image Formats
- JPG/JPEG – great for photos, small file size
- PNG – supports transparency, great for logos
- GIF – for simple animations
- SVG – scalable vector graphics for icons and UI
5. Linking Images
Wrap an image inside an anchor tag to make it clickable:
<a href="https://example.com">
<img src="logo.png" alt="Click to visit site" />
</a>6. Best Practices
- Always write clear and descriptive
alttext. - Compress large images for faster load time.
- Use relative paths for local files and assets.
- Use the
titleattribute for hover-tooltips (optional).
✅ Recap
<a>for linking pages or sections<img>to display images with optional clickable functionality- Use target="_blank" when needed
- Always optimize and describe your images
You’re getting good at this. Up next, Let's explore Css and How it can make our webpages beautiful.