Adding Links Images and Page Navigation

Connect pages and add efficient images with useful alternatives.

What you will learn

• Create internal and external links
• Use dependable file paths
• Add images with appropriate alternative text

Before you begin

Create a separate practice folder and use non-sensitive sample content. Keep backup copies before restructuring files. Browser interfaces vary, so use the browser developer tools available on your computer.

Create links

The anchor element uses href to identify a destination. Link wording should describe the destination instead of repeating vague phrases such as click here.

Use relative paths for pages within the site and complete HTTPS addresses for external destinations. Test links after moving or renaming files.

Organise files

Keep HTML, styles, scripts and images in predictable folders with lowercase names and no unnecessary spaces. A consistent structure prevents broken paths.

Use index.html as the common entry page. Do not link to files outside the website folder because they will not exist on the server.

Use images responsibly

Choose an image that supports the content, resize it appropriately and use modern compression. Width and height attributes can reserve space before the image loads.

Write concise alt text for meaningful images. Use an empty alt value for a purely decorative image so it does not create noise for screen-reader users.

Guided practice

1. Create About and Contact pages and link all pages together.
2. Add one meaningful image with alt, width and height.
3. Test every link from each page.

Knowledge check

1. When should a relative path be used?
2. What makes link text useful?
3. What alt value suits a decorative image?

Completion standard

Continue when you can complete the guided practice and explain the knowledge-check answers in your own words.