Parzychedu

Tryb nocny

Do góry
Na tej stronie

Szkielet strony internetowej. Plik HTML

Tytuł tego artykułu może być trochę przerażający. Szkielet strony internetowej? Plik HTML? Czym właściwie jest strona internetowa? Zacznijmy od początku.

Wiemy, że aby wyświetlić jakąś stronę internetową, potrzebujemy odpowiedniej przeglądarki internetowej. Na przykład, aby otworzyć tą stronę, musieliśmy uruchomić przeglądarkę i przejść do adresu parzychedu.pl. W międzyczasie wydarzyło się sporo rzeczy.

Załóżmy, że poinstruowaliśmy przeglądarkę internetową, aby ta wyświetliła stronę pod adresem parzychedu.pl/community. Przeglądarka wykona następujące czynności:

  1. Odszukanie lokalizacji parzychedu.pl.
  2. Pobranie pliku https://parzychedu.pl/community
  3. Jeżeli plik jest plikiem HTML, wyświetl treść zgodnie z instrukcją wewnątrz tego pliku.

Okazuje się, że strona internetowa jest plikiem tekstowym, dostępnym w internecie.

Informacja

Strona internetowa jest plikiem tekstowym napisanym w języku HTML. Dzięki temu językowi możemy utworzyć elementy strony i poinformować przeglądarkę o dodatkowych właściwościach, stylach i skryptach.

Przygotowania

Upewnijmy się, że na naszym komputerze, na którym będziemy projektować nową stronę, jest zainstalowany edytor tekstu. Warto jest wyposażyć się w lepszy edytor od podstawowego "Notatnika".

Instalacja VSCode

Ta część strony została oznaczona, jakoby była w trakcie konstrukcji. To oznacza, że treść w miejscu tego komunikatu zostanie uzupełniona w najbliższym czasie.

Tworzymy pierwszą stronę

Tworzenie naszej pierwszej strony internetowej rozpoczniemy od utworzenia prostego pliku HTML.

Do edytora tekstu wkleimy poniższą zawartość. Plik zapiszemy z nazwą index.html.

html
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>
  </body>
</html>
Zrzut ekranu przedstawiający okno edytora tekstu oraz okno przeglądarki internetowej z przykładową stroną
Po lewej stronie edytujemy naszą stronę. Po prawej otworzyliśmy plik index.html w przeglądarce internetowej.

Pomimo tego, że w przeglądarce widzimy sam prosty, surowy tekst, nasz kod jest nieco bardziej rozbudowany, aby podać przeglądarce internetowej wszystkie potrzebne informacje.

Jak działa kod HTML? Zaawansowane

Każdy kod HTML zaczyna się informacją o tym, że nasz plik jest typu HTML.

html
<!DOCTYPE html> 
<html lang="pl"> 
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tytuł strony</title>
  </head>

  <body>
    Treść i elementy strony...
  </body>
</html> 

<!DOCTYPE html> 
<html lang="pl"> 
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tytuł strony</title>
  </head>

  <body>
    Treść i elementy strony...
  </body>
</html>

Pierwsza linia informuje naszą przeglądarkę, że nasza strona wykorzystuje najnowsze możliwości języka HTML i HTML5 (najnowszy standard języka HTML).

Kod naszej strony jest zawarty wewnątrz znaczników <html> i </html>. Możemy również podać język naszej strony. pl oznacza język polski. en oznaczałby język angielski.

Czym są znaczniki w języku HTML?

Znacznikiem jest zapis <nazwa> i </nazwa>. Znaczniki wydzielają elementy strony.

Więcej o znacznikach niżej.

Ciało strony

Ciałem strony nazywamy część wydzieloną znacznikami <body> i zamykającym </body>. Wszystkie elementy strony, które mają być widoczne w oknie przeglądarki, będziemy zapisywać w tej części kodu strony.

W prostych słowach treść strony zapisujemy wewnątrz elementu <body>, który jest wewnątrz elementu <html>.

Część informacyjna

Część kodu strony między znacznikami <head> i </head> zaraz po rozpoczynającym nasz kod <html> jest częścią informacyjną naszej strony. W tym miejscu ustawiamy tytuł naszej strony i kilka innych, tak samo ważnych rzeczy, które umożliwiają to, że nasza strona działa w sposób standardowy.

html
<!DOCTYPE html>
<html lang="pl">
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Tytuł strony</title> 
  </head> 

  <body>
    Treść i elementy strony...
  </body>
</html>

<!DOCTYPE html>
<html lang="pl">
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Tytuł strony</title> 
  </head> 

  <body>
    Treść i elementy strony...
  </body>
</html>

Czym są znaczniki i elementy strony?

Tekst, który widzimy w przeglądarce, jest naszym pierwszym elementem! Zauważmy, że ten tekst w kodzie HTML sąsiaduje z <p> i </p>. Są to znaczniki.

Grafika przedstawiająca tag p
Element tekstowy, zawierający przykładowy tekst...
  • <p> jest znacznikiem, który oznacza początek elementu tekstowego.
  • </p> jest znacznikiem, który oznacza koniec elementu tekstowego.

Cały ten zapis jest elementem tekstowym.

Znaczniki można też nazwać tagami. Te pojęcia są zamienne.

Dodajemy tekst do strony

Wiemy już, że tekst na stronie zapisujemy między tagami <p> i </p>.

Aby dodać tekst do strony, wstawimy kolejny element tekstowy wewnątrz elementu body, tak jak to zrobiliśmy w poniższym kodzie.

html
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>
    <p>
      Zip jest prostym formatem archiwizacji plików obsługiwanym przez większość
      systemów operacyjnych. Aby rozpakować plik zip należy użyć odpowiedniego
      narzędzia systemu operacyjnego.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>
    <p>
      Zip jest prostym formatem archiwizacji plików obsługiwanym przez większość
      systemów operacyjnych. Aby rozpakować plik zip należy użyć odpowiedniego
      narzędzia systemu operacyjnego.
    </p>
  </body>
</html>

Dodaliśmy kolejny akapit tekstu.

Sprostowanie

Nie wstawiamy elementu p wewnątrz elementu p. Taki zapis nie miałby sensu.

html
...
  <p>
    To jest fragment tekstu
    <p> 
      Ten element p jest wewnątrz innego elementu p. W TEN SPOSÓB NIE ROBIMY. 
    </p> 
  </p>

  <p> 
    Ten element p nie jest wewnątrz innego elementu p. TAK ROBIMY. 
  </p> 
...

...
  <p>
    To jest fragment tekstu
    <p> 
      Ten element p jest wewnątrz innego elementu p. W TEN SPOSÓB NIE ROBIMY. 
    </p> 
  </p>

  <p> 
    Ten element p nie jest wewnątrz innego elementu p. TAK ROBIMY. 
  </p> 
...

Element p (skrót od angielskiego paragraph) posiada odstęp od góry i dołu, co oddziela kolejne akapity tekstu.

Dodajemy nagłówki do strony

Nasz tekst na razie wygląda w sposób jednolity. Możemy go urozmaicić, przez dodanie nagłówków.

html
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <h1>Moja strona internetowa</h1> 
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>

    <h2>Czym jest ZIP?</h2> 
    <p>
      Zip jest prostym formatem archiwizacji plików obsługiwanym przez większość
      systemów operacyjnych. Aby rozpakować plik zip należy użyć odpowiedniego
      narzędzia systemu operacyjnego.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Moja strona internetowa</title>
  </head>

  <body>
    <h1>Moja strona internetowa</h1> 
    <p>
      Witaj świecie! To jest moja pierwsza strona internetowa. W tym miejscu
      mogę wstawić dowolny tekst, który wyświetli się w przeglądarce
      internetowej.
    </p>

    <h2>Czym jest ZIP?</h2> 
    <p>
      Zip jest prostym formatem archiwizacji plików obsługiwanym przez większość
      systemów operacyjnych. Aby rozpakować plik zip należy użyć odpowiedniego
      narzędzia systemu operacyjnego.
    </p>
  </body>
</html>
Ta część strony została oznaczona, jakoby była w trakcie konstrukcji. To oznacza, że treść w miejscu tego komunikatu zostanie uzupełniona w najbliższym czasie.

Sprostowanie

Nie wstawiamy nagłówków wewnątrz elementu p.

html
...
  <p>
    <h2> 
      Ten nagłówek jest wewnątrz elementu p. W TEN SPOSÓB NIE ROBIMY. 
    </h2> 
    To jest fragment tekstu
  </p>

  <h2> 
    Ten nagłówek nie jest wewnątrz elementu p. TAK ROBIMY. 
  </h2> 
  <p>
    To jest fragment tekstu
  </p>
...

...
  <p>
    <h2> 
      Ten nagłówek jest wewnątrz elementu p. W TEN SPOSÓB NIE ROBIMY. 
    </h2> 
    To jest fragment tekstu
  </p>

  <h2> 
    Ten nagłówek nie jest wewnątrz elementu p. TAK ROBIMY. 
  </h2> 
  <p>
    To jest fragment tekstu
  </p>
...

Wskazówka 😃

Dobrą praktyką jest to, aby nagłówek <h1> był podobny do tytułu strony wewnątrz części <head> naszej strony.

Pogrubienie, podkreślenie tekstu

Pogrubiamy tekst, przez opakowanie go w element b. Jest to skrót od angielskiego wyrazu bold.

To oznacza, że kiedy chcemy, aby dany tekst był wyświetlany w sposób pogrubiony, poprzedzimy go znacznikiem <b> i zakończymy </b>.

Które fragmenty tekstu zostaną pogrubione w poniższym wycinku kodu HTML?

html
...
<p>
  Zanim usuniemy plik, <b>powinniśmy sprawdzić</b>, czy mamy jego
  <b>kopię zapasową</b>.
</p>
...

...
<p>
  Zanim usuniemy plik, <b>powinniśmy sprawdzić</b>, czy mamy jego
  <b>kopię zapasową</b>.
</p>
...
Ta część strony została oznaczona, jakoby była w trakcie konstrukcji. To oznacza, że treść w miejscu tego komunikatu zostanie uzupełniona w najbliższym czasie.

Dodajemy multimedia

Strona z samym tekstem może być sucha. Dodajmy multimedia.

Wstawienie zdjęcia wewnątrz strony HTML

Ta część strony została oznaczona, jakoby była w trakcie konstrukcji. To oznacza, że treść w miejscu tego komunikatu zostanie uzupełniona w najbliższym czasie.
html
...
  <img src="zdjecie.jpg" /> 
...

...
  <img src="zdjecie.jpg" /> 
...

((DO NAPISANIA O IMG: ścieżki, atrybuty, tekst zastępczy, dostępność.))

Element <img> jest w stanie wstawić tylko zdjęcie albo GIF'a. Aby wstawić film, muzykę i inne media, użyjemy innych elementów.

Uwagi dodatkowe

Część informacyjna strony, czyli element <head>, może zawierać w sobie więcej metadanych, takich jak opis, nazwa autora, a nawet ikonę i zdjęcie z artykułu. Warto je dodać przed upublicznieniem strony do Internetu, ponieważ te informacje z nagłówka <head> są wyświetlane w wynikach wyszukiwarek internetowych.

Element nagłówka X-UA-Compatible Zaawansowane

W internecie można spotkać linię, dodającą element nagłówka HTTP o nazwie X-UA-Compatible. Jest to pozostałość po czasach, kiedy przeglądarka Internet Explorer wprowadzała nową funkcjonalność swojego "trybu kompatybilności". Obecnie sam Internet Explorer ani żadna z przeglądarek nie wspiera tego tagu.

html
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Powyższa linia kodu nie jest potrzebna.

Podsumowanie

Utworzyliśmy naszą pierwszą stronę, wykorzystując przy tym możliwości języka HTML. W kolejnej części kursu zmienimy to, w jaki sposób prezentuje się nasza strona. Dodamy kolory, zmienimy wygląd i dodamy prosty styl, dzięki któremu nasza strona będzie czytelna i przyjazna.