Filters

Other

Lesson 3Images and Links

Knox badge
  • How file paths work and their importance in HTML
  • To use several tags to create a webpage
  • I will be able to use file paths in HTML
  • I will be able to use the image and anchor tags in HTML

In the last lesson, you created your own profile page. In this lesson we are going to expand this and add more to it.

For each of the following, enter the opening tag.

The largest heading
Paragraph
Break
Unordered list
Ordered list
List item

In this lesson, you will build your profile page using HTML. You are going to add a gallery of photos to the site as well.

Types of paths

A file path represents the location of a file or folder within a file system. Every file or folder has its own file path. 

There are two types of paths, relative paths and absolute paths

Relative paths

Imagine your computer is like a big tree with folders as branches and files as leaves. Relative file paths are like giving directions to find a file or folder based on where you currently are in the tree.

Let's say you are in the "Documents" folder, and you want to find a file called "myphoto.jpg" in a folder named "Pictures" located inside the "Documents" folder.

To find it, you can say, "Go to the 'Pictures' folder inside the folder we are in right now (which is 'Documents'), and look for a file called myphoto.jpg."

So, the relative file path to "myphoto.jpg" would be: Pictures/myphoto.jpg.

You can think of the folder names in the relative file path as instructions to navigate through the tree structure and find the desired file or folder from your current location. It's like giving directions using landmarks that are close to you instead of mentioning the whole address.

Absolute paths

Now imagine your computer is like a big map, and each file and folder has its unique address. An absolute file path is like giving the complete address of a file or folder on the map.

Let's say you want to find a file called "myphoto.jpg" in the "Pictures" folder. To do this using an absolute file path, you would give the full address starting from the very top of the map.

For example, on a Windows computer, the absolute file path could be: C:\Users\YourName\Documents\Pictures\myphoto.jpg

The absolute file path includes the specific names of each folder in the hierarchy, starting from the root (C:\) or the main location on the map, and ending with the target file or folder.

More tags

In this lesson, you are going to learn how to use the following tags that you can use to improve your profile.

  • Images
  • Anchors

Using these tags, you are going to be able to expand your profile page. Both of these tags rely on an understanding of file paths to work correctly.

Images

The <img> tag in HTML is used to insert and display images on a webpage. The <img> tag has a simple syntax. The image tag is another example of a self-closing or empty tag in HTML.

HTML
<img src="image.jpg" alt="Description of the image">
Description of the image

The previous image assumes that the image.jpg file is found in the same folder as the .html file.

Folder structure

The folder structure where this image is stored is shown previously. Notice that the webpage is stored in the same folder. Now let's say the user moves the image file (image.jpg)  to the images folder, the relative path from the webpage is now images/image.jpg. The code would now need to be changed to the following:

HTML
<img src="images/image.jpg" alt="Description of the image">

Anchors

The anchor tag (sometimes incorrectly known as a link tag) in HTML is used to create links (hyperlinks). It is represented by the <a> tag. The anchor tag requires a mandatory href attribute, which specifies the destination or the location of the linked page or file. When a user clicks on an anchor tag, it navigates them to the specified page or file.

An anchor can have a link to another website (external website) as shown below:

HTML
<a href="https://www.google.com">Click here for Google</a>

But it is more often the case that the link needs to go to a page on the same website. Assume we have two pages, profile.html and more.html as shown below.

Folder structure

To link to more.html, simply put the name of the HTML file:

HTML
<a href="more.html">More information</a>
The same rules apply to links as to images. If a file is moved to another folder, the path in the link needs to represent this. E.g. if there was a folder called page2 and the more.html file moved there, the path would now be page2/more.html.
  1. Add 5 images to your webpage. If you have any on Google Drive, you can add those in.
  2. Add another page to your website (hint: copy your template.html page and modify it)
  3. Add a link between each of the pages

Paste your code here when you are finished

Once you have answered each of the questions, remember to save this worksheet by pressing the button at the bottom.

S2 Web Development Lessons
Provide Feedback

What did you think of this document?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number