Jak osadzić obraz w pliku html?
Aby wstawić obraz, wystarczy użyć znacznika <img>:
Znacznik img - należy do grupy jednoelementowych, co łątwo zauważyć w punktach 1
oraz 2. Znacznik ten został wzbogacony o atrybut src - źródło
3.
Przez źródło rozumiemy ścieżkę dostępu do pliku. W zależności od tego gdzie w strukturze folderów znajduje się
plik graficzny, a gdzie plik strony internetowej, ścieżka dostępu do pliku graficznego będzie wyglądać inaczej.
Obraz jest tam gdzie plik html.
Taka sytuacja w zasadzie nie zdarza się, ale gdyby ktoś chciał tak zrobić, ścieżka dostępu
do pliku będzie bardzo prosta: Wystarczy w cudzusłowie wpisać nazwę pliku wraz z jego rozszerzeniem.
<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 podfolderze. Aby móc wskazać
obraz znajdujący się w folderze równoległym najpierw należy z niego wyjść fo 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!
Pamiętaj, aby nie linkować plików z serwerów które nie są Twoje. Powyższy link służy jedynie za przykłąd wykorzystania metody linku bezpośredniego.
NIGDY NIE PODAWAJ ŚCIEŻKI LOKALNEJ:
<img src="C:\Users\user\pulpit\nazwa_pliku.png" />Taki zapis oznacza, że odwołujesz się do pliku, który znajduje się na Twoim dysku Twardym komputera. Kiedy opublikujesz swoją stronę w sieci, ten obrazek nie wyświetli się, ponieważ strona internetowa nie ma dostępu do Twojego dysku.
Zawsze korzystaj z jednej z trzech poznanych wcześniej metod.
How to insert an image in an html file?
To insert an image, just use the the <img> tag:
The img tag - belongs to the group of one-element tags, which can easily be seen in the points
1 and 2. This tag has been enhanced with the src attribute
- source 3.
By source we mean the path to the file. Depending on where in the folder structure there is
graphic file and where the web page file is located in the folder structure, the path to the graphic file will
look different.
The image is where the html file is.
This situation actually doesn't happen, but if someone wanted to do this, the file path
would be very simple: Just put the file name in quotes along with its extension.
<img src="file_name.gif" />
The image is in the subfolder.
This is the situation most often seen 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 sit next to the html file? It's very simple:
<img src="folder_name/file_name.jpg" />
If there is a need, you can create a more complex structure and in the folder with images, create another one.
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 encounter. Exactly the same principle applies to 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 subfolder. In order to be able to point to
image located in the parallel folder you first need to leave the parallel folder to the root. Working on a
computer we would intuitively click back, and then we would go into the parallel
folder.
To do this with code, start writing the path with two dots: ../
<img src="../folder_name/file_name.png" />
If the folder structure is deeper, just apply the same code two or more times:
<img src="../../folder_name/file_name.png" />
Direct link 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!
Remember not to link to files from servers that are not yours. The link above serves only as an example of using the direct link method.
NEVER SPECIFY A LOCAL PATH:
<img src="C:\Users\user\desktop\file_name.png" />This notation means that you are referring to a file that is located on your Hard Drive of your computer. When you publish your page on the web, this image will not display because the website website does not have access to your disk.
Always use one of the three methods you learned earlier methods.