Co to jest link?
Linki, czyli inaczej mówiąc odsyłacze służą do szybkiego i łatwego poruszania się po różnych
stronach oraz podstronach tego samego serwisu. Dzięki linkom można także błyskawicznie pobierać różne pliki.
W bardziej zaawansowanych stronach istnieje możliwość przesyłania danych z formularzy, wybierania opcji jak np.
zmiana języka, wyświetlanie / usuwanie powiadomień itp. Na tym etapie skupimy się na podstawowych zastosowaniach
znacznika <a>
Znacznik a - należy do grupy dwuelementowych, co łatwo zauważyć w punktach 1
oraz 2. Znacznik ten został wzbogacony o atrybut href
3. Ten atrybut wskazuje na element docelowy pliku.
Kliknięcie w napis 4
spowoduje automatyczne przejście do wskazanego wcześniej pliku (jeśli ścieżka dostępu jest prawidłowa).
Przez skrótowiec href rozumiemy hyperlink references - odnośnik linku.
Ścieżka dostępu.
Podobnie jak w przypadku osadzania obrazów, istnieje kilka możliwości podania ścieżki
dostępu do obiektu docelowego.
<img src="nazwa_pliku.gif" />
Obraz jest w folderze podrzędnym.
To sytuacja najczęściej występująca w praktyce. Jest tak dlatego, ponieważ foldery pozwalają
na uporządkowanie danych. Strony internetowe zazwyczaj posiadają wiele różnych plików css, js oraz obrazów. Foldery
podobnie jak na dysku ułatwiają organizację danych, ale jak "powiedzieć kodem", że plik znajduje się w folderze,
który jakby leży obok pliku html? To bardzo proste:
<img src="nazwa_folderu/nazwa_pliku.jpg" />
Jeżeli jest taka potrzeba, można stworzyć strukturę bardziej złożoną i w folderze ze obrazami, stworzyć kolejne.
Wtedy ścieżka będzie po prostu dłuższa, np.:
<img src="nazwa_folderu/nazwa_podfolderu/nazwa_pliku.jpg" />
Z takimi sytuacjami spotkasz się najczęściej. Dokłądnie taka sama zasada dotyczy adresowania
innych plików takich jak js - javaScript, css - pliki stylów i inne.
Obraz jest w folderze nadrzędnym.
Czasami zdarza się, że pliki html znajdują się na serwerze w folderze równoległym.
Aby móc wskazać taki plik, najpierw należy wyjść z folderu głównego. Pracując na komputerze intuicyjnie
kliknęlibyśmy wstecz, a następnie weszlibyśmy w równolegle położony
folder.:
Aby zrobić to kodem, należy zacząć pisać ścieżkę dostępu od dwóch kropek: ../
<img src="../nazwa_folderu/nazwa_pliku.png" />
Jeśli struktura folderów jest głębsza, wystarczy zastosować ten sam kod dwa lub więcej razy:
<img src="../../nazwa_folderu/nazwa_pliku.png" />
Bezpośredni adres do pliku.
To adresowanie nazywane jest też adresowaniem bezwzględnym. Jest to metoda bezpieczna pod
warunkiem, że podajesz adres pliku na serwerze, tak jak poniżej:
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" />
ZAPAMIĘTAJ!
Znacznik
<a>sam w sobie nie działa. Bez atrybutuhrefjest to zwyczajny tag, któremu można nadać jakieś cechy za pomocą stylów. Nie zmieni to faktu, że tan znacznik nie będzie działał tak jakbyśmy tego oczekiwali.
NIGDY NIE PODAWAJ ŚCIEŻKI LOKALNEJ:
<a href="C:\Users\user\pulpit\nazwa_pliku.html" />Taki zapis oznacza, że link będzie działał tylko w obecnej lokalizacji. Jeśli strona internetowa zostanie przeniesiona, linki przestaną działać. Stanie się tak dlatego, ponieważ adres wskazuje dysk lokalny i wskazuje plik na dysku a nie na serwerze.
What is a link?
Links, or in other words referrers are used for quick and easy navigation on different
pages and subpages of the same website. Using links, you can also download various files instantly.
In more advanced pages it is possible to submit data from forms, select options such as changing language,
displaying / deleting notifications, etc.. At this stage we will focus on the basic uses of the
<a> tag.
Tag a - belongs to the two-element group, which can be easily noticed in the following points
1 ans 2. This tag has been enhanced with the href
attribute3. This attribute indicates the target element of the file.
Clicking on the word
4 will automatically navigate to the previously specified file (if the path is correct).
By the acronym href we understand hyperlink references.
File path.
As with image embedding, there are several ways to specify the path to the target object.
<img src="file_name.gif" />
The image is in the subfolder.
This is the situation most often in practice. This is because folders allow you to
to organize data. Websites usually have many different css, js and image files. Folders like on a disk make it
easier to organize data, but how to "tell the code" that a file is in a folder which seems to be located next to
the html file? It is very simple:
<img src="folder_name/file_name.jpg" />
If necessary, you can create a more complex structure and, in the folder with images, create another.
Then the path will simply be longer, e.g.:
<img src="folder_name/subfolder_name/file_name.jpg" />
This is the situation you will most often experience. Exactly the same rule for addressing
other files, such as js - javaScript, css - style files and more.
The image is in the parent folder.
Sometimes it happens that html files are located on the server in a parallel folder.
To be able to point to such a file, you must first exit the current folder. Working on a computer, we would
intuitively click back, and then we would go into a parallel folder.
To do this with code, start writing the path with two dots: ../
If the folder structure is deeper, just apply the same code two or more times:
<img src="../../folder_name/file_name.png" />
Direct address to file.
This addressing is also called absolute addressing. It is a safe method as long as
provided that you specify the address of the file on the server, as below:
<img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" />
REMEMBER!
The tag
<a>does not work by itself. Withouthrefattribute is a simple tag that can be given some properties by using styles. It won't change the fact that this tag won't work the way we expect it to.
NEVER SPECIFY A LOCAL PATH:
<a href="C:\Users\user\desktop\file_name.html" />Such a provision means that the link will work only in the current location and only on this device. If the website is moved, the links will no longer work. This will happen because the address points to the local disk and references the file on the disk and not on the server.