Links, Images, Favicon & File Paths
Links use the <a> (anchor) tag with href="URL". Clicking opens another page, file, or section on the same page.
HTML Links
Links use the <a> (anchor) tag with href="URL". Clicking opens another page, file, or section on the same page.
Use target="_blank" to open in a new tab. Add rel="noopener" for security when linking outside your site.
Real-life example: A link is like a phone number in your diary — tap it and you go to that person (page).
<a href="https://rishtaara.com">Rishtaara Home</a>
<a href="about.html">About Page</a>
<a href="#contact">Jump to Contact section</a>
<a href="https://example.com" target="_blank" rel="noopener">External site</a>HTML Images
Images use <img src="path" alt="description" />. src is the file path or URL. alt text helps blind users and shows when the image fails to load.
Always write meaningful alt text. Use width and height to avoid layout jump while loading.
Real-life example: An image tag is like sticking a photo in your album — src is which photo, alt is the caption written underneath.
<img src="images/logo.png" alt="Rishtaara logo" width="120" />
<img src="https://picsum.photos/400/200" alt="Sample banner" />Favicon
A favicon is the small icon in the browser tab. Add it in <head> with <link rel="icon" href="favicon.ico" />.
Use .ico, .png, or .svg. Size 32×32 or 64×64 works well.
Real-life example: Favicon is like the small school emblem on your ID card — tiny, but people recognize you quickly.
<head>
<link rel="icon" type="image/png" href="favicon.png" />
<title>My Site</title>
</head>Page Title
The <title> tag goes in <head>. It shows in the browser tab, bookmarks, and Google search results.
Make it short and clear — describe the page, not the whole website.
Real-life example: Title is like the name written on the cover of your notebook — "Math Notes" not "Notebook page 1 section A".
<head>
<title>Contact Us — Rishtaara</title>
</head>File Paths
Absolute path starts from the root: /images/photo.jpg. Relative path goes from the current file: images/photo.jpg or ../images/photo.jpg (one folder up).
Keep images in an images folder and CSS in a css folder for a clean project.
Real-life example: File path is like giving directions — "in my room, on the shelf, blue folder" (relative) vs "House 12, Block B, shelf 3" (absolute from root).
<!-- Same folder -->
<img src="photo.jpg" alt="Photo" />
<!-- Inside images folder -->
<img src="images/photo.jpg" alt="Photo" />
<!-- One folder up, then css -->
<link rel="stylesheet" href="../css/style.css" />Small HTML project tip
Build a one-page "About Me" site: your photo, three links (social or favorite sites), a short bio, and a favicon.
Use one folder: index.html, images/, and favicon.png. Open index.html in the browser after each change.
Real-life example: This mini project is like your first cooking dish — simple ingredients (h1, p, img, a) but you made something real you can show family.