The image above shows how folders and files flow in a large website. Each folder (except obviously the images folder) contains an image folder, and an index.html file. After you create a folder, you might as well create the index.html file and image folder for it.
Remember that I have a large website. The simplest website would be of the form www.yourdomainname.com with a single index.html file. The domain name for the simple website above would be www.thesurfdragon.com . The domain name for the complex website above would be www.thesurfdragon.com/Html-CSS .
I suggest you create a map of the website, like we did above. I also strongly suggest using the File Explorer window to create all the folders, images, and index.html files at the same time. Here are some detailed instructions, even though the process is transparent. Start by creating a folder with the name of your website. Create a new folder inside it called Html-CSS. Inside Html-CSS create images folder and index.html file. Also inside the Html-CSS folder you will create the Html folder and the CSS folder. Within the Html folder you create the images folder, index.html, page1.html, and page2.html. Within the CSS folder you create the images folder, index.html, and page1.html. That completes our example.
We will start by describing an absolute pathway or link.This is the web address you type into your browser when you visit a webpage. Simple. In the previous examples we used the absolute pathway for Google, https://www.google.com .
Now for relative pathways or links. Relative pathways do not include the domain address. Relative pathways are used within a webpage to link to other pages in your website or to images in your website. For links to pages outside your website you must use the absolute pathway with the domain address. For example, if you want to place a picture in the index.html file page of the CSS folder. You need the relative address to the picture. The relative address would be images/picture.jpg. A more difficult example follows. Suppose you want to link to a page in a different folder in your website. Say we want to link to page2.html in the the Html folder. The relative pathway would be /Html-CSS/Html/page2.html. Notice we use a / in front of the pathway. This lets the browser know that the folder Html-CSS is at the top of the path.
You may wonder why we bother with relative addresses at all. After all we can always use an absolute address. For example http://thesurfdragon.com/Html-CSS/Html/page2.html gets us to the same place as /Html-CSS/Html/page2.html inside the website. The answer is portability. What if we move the Html-CSS folder to a website with another name. We would have to change every link in the website if we used absolute addresses.
You may be wondering why we don't type the absolute path as https://www.google.com/index.html . We can, but index.html file is a special case. The browser automatically takes us to index.html when we type www.google.com .
Home Page
Visual Studio Code
Simple Webpage
Website Structure
Webpage Layout
HTML Escape
Web Hosting
FTP
Using Paint 3D
Printer Friendly
