Ostatnio edytowany:

Język świata wirtualnego

Autor: Virtual Patriot

Załóżmy, że w naszym świecie realnym posiadamy jakieś przykładowe zdjęcie. Na przykład zdjęcie jakiegoś zwierzęcia. Wspomniane zdjęcie chcemy dołączyć do treści, którą tworzymy w naszym świecie realnym. Na przykład do treści tworzonej na kartce papieru.

W jaki sposób wspomniane zdjęcie możemy dołączyć do kartki papieru?

Możemy przypiąć je do kartki papieru za pomocą zszywacza, jak również możemy przykleić je do kartki papieru za pomocą kleju.

Załóżmy teraz, że w naszym świecie wirtualnym posiadamy jakieś przykładowe zdjęcie. Na przykład zdjęcie jakiegoś zwierzęcia. Wspomniane zdjęcie chcemy dołączyć do treści, którą tworzymy w naszym świecie wirtualnym. Na przykład do treści tworzonej w zawartości pliku nasz-plik.

W jaki sposób wspomniane zdjęcie możemy dołączyć do pliku nasz-plik?

Tutaj pojawia się pewien problem, ponieważ zawartością pliku nasz-plik może być tylko i wyłącznie ciąg znaków. Jednak wspomniany ciąg znaków może również być rozwiązaniem naszego problemu.

Przyjrzyjmy się następującemu ciągowi znaków:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>

  <body>

    Zdjęcie przykładowego zwierzęcia:
    <img src="http://webkod.pl/files/html/zwierze-01.png" alt="lew">

  </body>
</html>

Zaprezentowany ciąg znaków jest kodem języka HTML. Za pomocą kodu języka HTML możemy między innymi dołączyć interesujące nas zdjęcie do tworzonej przez nas treści znajdującej się w zawartości pliku.

Spróbujmy skopiować zaprezentowany kod języka HTML do zawartości pliku nasz-plik.

przykładowy kod języka HTML w pliku txt

Po zapisaniu zmian w pliku nasz-plik spróbujmy sprawdzić jak zareaguje przeglądarka internetowa na nową zawartość pliku nasz-plik.

otwieranie pliku txt

Rezultat:

zawartość pliku txt w oknie przeglądarki internetowej - przykładowy kod html

Naszym oczom nie ukazało się zdjęcie zwierzęcia, lecz naszym oczom ukazała się po prostu zawartość pliku nasz-plik, czyli ciąg znaków, który przed chwilą umieściliśmy w pliku nasz-plik. Dzieje się tak, ponieważ w momencie gdy tworzyliśmy plik nasz-plik nie zmieniliśmy jego typu na typ HTML, dlatego wspomniany plik nasz-plik jest zwykłym plikiem tekstowym, czyli plikiem posiadającym rozszerzenie .txt.

Przeglądarka internetowa widząc, że chcemy dowiedzieć się co jest zawartością pliku nasz-plik.txt, wspomniana przeglądarka internetowa po prostu interpretuje ten plik jako plik zawierający zwykłą zawartość tekstową, czyli zwykły ciąg znaków, a nie ciąg znaków, który jest kodem języka HTML. Dlatego sytuację tę musimy zmienić.

Naszym celem jest zmiana typu pliku nasz-plik z tekstowego na typ HTML. Możemy to uczynić w dość prosty sposób.

Wybieramy znaną nam opcję Zapisz jako.

opcja zapisz jako pliku txt

Następnie do nazwy pliku nasz-plik dodajemy interesujące nas rozszerzenie, czyli ciąg znaków .html (kropkę na początku również).

zmiana rozszerzenia pliku

Następnie klikamy na opcję zapisz.

Jeżeli nadal masz problem z utworzeniem powyższych rzeczy możesz pobrać cały przykład klikając na następujący odnośnik: Przykładowy folder wraz z plikiem HTML.

W ten sposób udało się nam zmienić typ pliku nasz-plik na typ HTML.

Zobaczmy teraz jak zareaguje przeglądarka internetowa na zawartość pliku nasz-plik.html.

otwieranie pliku html

Rezultat:

zawartość pliku html w oknie przeglądarki internetowej - przykładowy kod html

Tym razem naszym oczom ukazał się ciąg znaków Zdjęcie przykładowego zwierzęcia: oraz co najważniejsze rzeczywiście zdjęcie przykładowego zwierzęcia.

Jednak dlaczego tak się stało?

Ponieważ tym razem przeglądarka internetowa zauważyła, że plik nasz-plik jest plikiem typu HTML, dlatego przeglądarka internetowa potraktowała zawartość pliku nasz-plik.html jako kod języka HTML, dlatego naszym oczom ukazał się wspomniany rezultat w postaci ciągu znaków Zdjęcie przykładowego zwierzęcia: oraz w postaci rzeczywistego zdjęcia przykładowego zwierzęcia.

Jednak co takiego szczególnego zawiera w sobie ciąg znaków, który został zaprezentowany na początku tej części kursu języka HTML?

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>

  <body>

    Zdjęcie przykładowego zwierzęcia:
    <img src="http://webkod.pl/files/html/zwierze-01.png" alt="lew">

  </body>
</html>

Na to pytanie oraz wiele innych pytań odpowie nam kurs języka HTML, który tak na prawdę rozpoczyna się dopiero w tym momencie!