Understanding Your File Structure
The Importance of Understanding Your File Structure
You may recall from the reading from Module 1, adhering to your file structure is very important – particularly in regard to hyperlinks and images. If you do not correctly refer to images based on your file structure, your images won’t display on your web page. Let's explore that topic further.
Previously we learned that the below code only works if the HTML document and the image to be displayed are listed in the same folder.
While having your web pages and your images in the same folder is "technically" okay, it is not a procedure that professional web authors / web designers practice. Instead, web authors / web designers typically create a file structure that includes:
- A main folder that contains all the HTML documents of the site.
- Subfolders within the main folder for the different file types that exist in the structure (e.g., images, videos, documents, Cascading Style Sheets, etc.)
 Stop and Think
Imagine that you have created a file structure similar to the file structure specified above. In your file structure you have a main folder where you store all of your site's HTML documents, to include your DreamVacation.html file. Within the main folder you have created a subfolder, named Images, where you store all of your site images, to include the amazon.jpg image. After considering this scenario, ask yourself the following question:.
- If you viewed your DreamVacation.html web page in a web browser, do you think the amazon.jpg image would be visible?
The answer is no, the amazon.jpg image would not be visible. A web page with the HTML <img> code listed above would only dispaly the amazon.jpg image if the web page and the image file were saved in the same folder. Since the amazon.jpg image has been saved to the Images folder, the image would not be displayed using the HTML <img> code shown above.
Stop and Think...Again
Here is another scenario (a kind of weird scenario): imagine for a second that you are the HTML document, DreamVacation.html, which is housed in the main site folder. Next, imagine that you need to reference, or get to, the amazon.jpg image that is stored in the Images folder. What steps would you need to take, as the HTML document, to get to the amazon.jpg image?
- From the main folder, you would enter the subfolder titled Images.
- Once in the Images subfolder, you would access/refer to the amazon.jpg file listed there.
To replicate the steps above you need to modify the scr="" attribute of the <img> tag in the DreamVacation.html file. Let's consider each step above and determine how each step/action can be replaced with the appropriate HTML code in order to access the amazon.jpg photo. Tip: review the information presented in Module 1 regarding File Structures to help refresh your memory on this process.
- To enter a folder (in this instance the Images folder) use the name of the folder followed by a forward slash: Images/
- Once in the Images folder, use the file name (in this instance amazon.jpg) to access the appropriate file.
 Let's See it in Action : Accessing Images in Your File Structure
So using the information above, you would create a new src="" value that tells the web browser to find the amazon.jpg file inside the Images subfolder. The HTML <img> code listed below demonstrates the appropriate code to be added to the body of the DreamVacation.html in order for the amazon.jpg image to be displayed when viewing the web page in a web browser.
Tip: Take a moment to really understand the structure of the src="" attribute in the above code to understand how it works.
Next
|
