Link types and folder structures | MTA Web Design Fundamentals | Cardiff Met

July 25, 2019 posted by

The links in the navigation on this page
are examples of relative links. Notice that we do not type the full web address
of the site because this page is stored in the same folder on the web server as
the rest of the pages. The image of the Alexandre Dock is stored on the same
server as our page, but it is in a subfolder – images. When referencing pages or assets in subfolders you need to include the folder name and a forward
slash before the file name. It is good practice to organize your assets into
folders often there will be an Images folder for images a Styles folder for
style sheets, Videos for videos and so on Sometimes you will want to organize your
HTML web pages into folders. For example if we are going to expand our site to be
a History of Wales site, we could create a folder for pages about different
cities in Wales. Let's move our History of Newport and History of Swansea pages into that folder. If we preview the History of Swansea page we can see that
the stylesheet has not been applied. This is because the stylesheet is no longer
in the same relative position as it was for the History of Cardiff page. The
stylesheet is now up a folder. To specify that in the code we need to
include dot dot slash in front of the name of the style sheet. Likewise if we
want to include an image on our History of Swansea page, we need to include dot
dot slash at the beginning of the source attribute to say to the browser to go up
a level in the folder structure and then the name of the folder "images" and then
the name of the image. For external links – those that are not
stored on the same server – such as this link to the Exchange Hotel, the full path
of the website is required. This is called an absolute link. Sometimes you
will want external links to open in a new browser tab or window, to do so
utilize the "target" attribute, giving it the value underscore blank, meaning open in a new blank tab or window. Generally speaking best practice for
links is to use relative links whenever possible and to open links in the
current window not in a new window.

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *