link&image.md

🔗🖼️ HTML Link & Image – Exercises

👨‍🏫 Instructor: Mr. Khem Puthea

📧 Email: [email protected] 💬 Telegram: t.me/iamputhea

---

📘 Part 1: HTML Links

1. Create a Basic Link

Create an HTML file that includes a paragraph with a link to Google:

<a href="https://www.google.com">Go to Google</a>

2. Email Link

Create a link that opens the mail client to send an email to [email protected]:

<a href="mailto:[email protected]">Email Us</a>

3. Open in New Tab

Link to https://cadt.edu.kh that opens in a new tab:

<a href="https://cadt.edu.kh" target="_blank">Visit CADT</a>

4. Relative URL

Create two files: index.html and about.html. In index.html, add:

<a href="about.html">About Us</a>

5. Folder Structure Practice

Folder structure:

project/
├── index.html
└── pages/
    └── contact.html

In index.html:

<a href="pages/contact.html">Contact Page</a>

---

🖼️ Part 2: HTML Images

6. Add Local Image

Add an image logo.jpg in your folder and show it:

<img src="logo.jpg" alt="Company Logo">

7. Add Remote Image

Display an image hosted online:

<img src="https://cadt.edu.kh/wp-content/uploads/2024/04/CADT10-LOGO-anniversary-04.png" alt="NIPTICT Logo">

8. Resize Image

a. Using style:

<img src="image.jpg" alt="Example Image" style="width:300px;height:200px;">

b. Using attributes:

<img src="image.jpg" alt="Example Image" width="300" height="200">

9. Image as a Link

Make the image a clickable link:

<a href="https://cadt.edu.kh">
  <img src="logo.jpg" alt="CADT Logo" width="100">
</a>

📚 References

• HTML Links - W3Schools
• HTML Images - W3Schools