Moduł 1 - Zajęcia 1 - HTML część 1

Technologie internetowe

Strony internetowe to podstawa internetu, a wszystkie one są zbudowane z trzech podstawowych technologii.

HTML - odpowiada za wypełnienie strony internetowej treścią, za strukturę i zawartość.
CSS - jest odpowiedzialny za warstwę wizualną, za jego pomocą nadajemy warstwie html wygląd.
JavaScript - pozwala na dodanie interaktywności dla naszej strony i daje nam możliwość reagowania na akcje które wykonuje użytkownik.

Te podstawowe technologie nie wystarczą do stworzenia strony internetowej. Podczas programowania używane są edytory kodu, systemy kontroli wersji, buildery, frameworki, biblioteki, hostingi i inne koncepcje, z którymi koniecznie trzeba się zapoznać.

HTML

HyperText Markup Language (hipertekstowy język znaczników) - język znaczników dokumentów internetowych. Zestaw reguł do strukturyzowania (znaczników) informacji tekstowej, dodawania zdjęć, tworzenia tabel, formularzy, list itp.

Dokument HTML - plik tekstowy z rozszerzeniem .html. Dokument oznaczony za pomocą HTML, interpretowany przez przeglądarkę, dzięki czemu użytkownicy widzą nie kod źródłowy z elementami znaczników, ale ostateczny wynik przetwarzania - stronę internetową.

Popularność HTML i jego wykorzystanie jako podstawy kodowania stron internetowych doprowadziły do potrzeby tworzenia, utrzymywania i rozwijania standardów, za które odpowiedzialna jest grupa: Web Hypertext Application Technology Working Group (WHATWG), która pracuje nad specyfikacją HTML Living Standard.

W tej chwili czytają Państwo dokument HTML. Konspekt to strona oznaczona za pomocą HTML.

Znaczniki i atrybuty

Znacznik (tag) — element hipertekstowego języka znaczników. Jest to najmniejszy element składowy każdej strony internetowej. Każdy tag oznacza jakąś jednostkę: nagłówek, listę, akapit tekstu, obraz.

Aby zaznaczyć znaczniki w tekście dokumentu, stosowane są nawiasy ostre, w których jest określona nazwa znacznika i jego atrybuty.

            <nazwa_znacznika>...</nazwa_znacznika>

Znacznik otwierający wskazuje, gdzie zaczyna się element, a znacznik zamykający gdzie kończy się. Znacznik zamykający jest tworzony przez dodanie ukośnika (/) przed nazwą znacznika. Zawartość znacznika - treść - znajduje się między otwierającym a zamykającym znacznikiem.

Przykłady znaczników.

            <section>Sekcja</section>
            <p>Akapit</p>
            <a>Link</a>
            <button>Przycisk</button>

Komentarze

Komentarze służą do tego, żeby pozostawiać objaśnienia, uwagi w kodzie źródłowym, tymczasowo skomentować fragment kodu itp.

            <!-- To jest komentarz, jego treść nie będzie wyświetlana na stronie -->

            <p>To jest akapit tekstu, on będzie wyświetlany na stronie.</p>

            <!--
            Komentarz może być wielowierszowy. 
            Jest to wygodne w przypadku bardziej obszernych opisów.
            -->

Atrybuty

Atrybuty to dodatkowe ustawienia znaczników, za pomocą których można zmieniać właściwości i zachowanie elementu. Każdy znacznik ma obowiązkowe i nieobowiązkowe atrybuty, są opcjonalne i może ich być kilka w jednym tagu.

Atrybuty są zapisywane wewnątrz znacznika otwierającego, a ich wartości znajdują się w podwójnych cudzysłowach. Kilka atrybutów oddzielamy spacją.

            <a href="https://google.com" class="link">...</a>

            <img src="cat.jpg" alt="cute cat" />

            <input type="text" name="user_name" />

            <button type="submit">...</button>

            <p class="text">...</p>

Przyjrzyjmy się niektórym atrybutom znaczników <a>.

            <a
              href="http://google.com"
              target="_blank"
              title="Wyszukiwarka internetowa Google"
            >

Google

href - adres strony, na którą przejdzie użytkownik po kliknięciu w tekst linku.
target - wskazuje, w której zakładce strona zostanie otwarta po kliknięciu w w link.
title - dodaje podpowiedź do tekstu linku.

Przyjrzyjmy się niektórym atrybutom znaczników <img>.

            <img src="https://picsum.photos/640/480" 
            alt="Dowolny obraz z generatora" 
            />

Przejdź na poniższą stronę aby poznać dostępne atrybuty znaczników oraz ich przeznaczenie htmlreference.io.

Znaczniki sparowane

Składają się z otwierających i zamykających znaczników, które zawijają treść, umożliwiając zmianę jego właściwości lub sposobu wyświetlania, grupowanie według znaczenia. Wewnątrz sparowanych znaczników można zagnieżdżać inne znaczniki, podobnie do matrioszki.

            <!-- Artykuł z tytułem oraz akapitem -->
            <article>
              <h1>Krótko o znacznikach sparowanych</h1>
              <p>
                Większość znaczników jest sparowana. Ich zawartość znajduje się między 
            znacznikiem otwierającym a zamykającym.
              </p>
            </article>

Znaczniki pojedyncze

Składają się tylko z znacznika otwierającego, nie zawierają treści tekstowej i otrzymują treść lub zachowanie na podstawie atrybutów. Służą do zmiany właściwości dokumentu, połączenia plików itp.

            <!-- Kodowanie metainformacji -->
            <meta charset="utf-8" />

            <!-- Pole tekstowe -->
            <input type="text" />

            <!-- Obrazek -->
            <img src="cat.jpg" alt="cool cat" />

W poprzednich standardach HTML pojedyncze znaczniki były koniecznie zapisywane z odwrotnym ukośnikiem / przed nawiasem zamykającym. Na przykład <img /> albo <input />. W nowoczesnym standardzie jest to opcjonalne i na nic nie wpływa.

Zagnieżdżanie znaczników

Zgodnie z pewnymi zasadami znaczniki można zagnieżdżać w sobie. Podczas zagnieżdżania kolejność ich zamykania należy zachować zgodnie z zasadą matrioszki.

            <znacznik1>
              <znacznik2>
                <znacznik4>...</znacznik4>
                <znacznik5>...</znacznik5>
              </znacznik2>
              <znacznik3>
                <znacznik6>...</znacznik6>
              </znacznik3>
            </znacznik1>

Oto są ważne znaczniki akapitu z linkiem i zaznaczonym tekstem, a także lista zalet wraz z opisem.

            <p>
              <a href="squoosh.app">Squoosh</a> - serwis <em>optymalizacja</em> obrazków.
            </p>

            <p>Zalety</p>
            <ul>
              <li>Działa w przeglądarce</li>
              <li>Nie ładuje systemu</li>
              <li>Wygodny interfejs</li>
            </ul>

Ale te fragmenty mają błędy w zapisie (wiersze są podświetlone).

            <!-- Kolejność zamykania znaczników nie jest przestrzegana -->
            <p><a href="squoosh.app">Squoosh</a> - serwis <em></a>optymalizacja</p> obrazków.</em>

            <!-- Nie są przestrzegane szczegółowe zasady dotyczące zagnieżdżania znaczników -->
            <ul>
              <p>Zalety</p>
              <li>Działa w przeglądarce</li>
              <li>Nie ładuje systemu</li>
              <li>Wygodny interfejs</li>
            </ul>

Specyfikacja HTML

Specyfikacja HTML Living Standard - główny dokument opisujący standardy, możliwości i przyszły rozwój języka HTML.

Aby przestudiować layout, przede wszystkim są ważne sekcje opisujące jakie są rodzaje elementów, co oznacza każdy z nich, oraz rozumienie tego, jak można je zagnieżdżać w sobie.

Element HTML - jest to termin opisujący pewną semantyczną całość w standardzie HTML. Na przykład akapit, nagłówek, listę lub link. W dokumencie HTML element jest reprezentowany przez znacznik (sparowany lub pojedynczy) - składnię języka HTML.

Zagnieżdżanie znaczników

Algorytm określania czy znacznik można zagnieżdżać jest dość prosty.

Sięgamy po specyfikację i znajdujemy potrzebny element.
Sprawdzamy model treści elementu(Content model), do którego zagnieżdżamy.
Sprawdzamy kategorie elementu (Categories), który zagnieżdżamy.
Jeśli kategoria jest odpowiednia, a ograniczenia nie zabraniają, można zagnieżdżać, inaczej jest niemożliwe.

Po kilku dniach używania HTML przyzwyczaicie się do prawidłowego zagnieżdżania elementów w sobie, ponieważ zasady zagnieżdżania będą intuicyjnie zrozumiałe po zapoznaniu się z głównymi znacznikami.

Przewodniki

Oprócz specyfikacji warto mieć pod ręką przewodniki i ściągawki. Zapamiętywać wszystko na pamięć nie jest konieczne, rzeczy bardziej specyficzne lub rzadko używane zawsze można podpatrzeć.

Szkielet dokumentu HTML

Dokument HTML składa się z "drzewa" znaczników. Poniżej przedstawiony jest wymagany minimalny zestaw znaczników, który służy jako podstawa dla dowolnego dokumentu HTML, podobnie do fundamentu dla domu.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <!-- Informacje serwisowe -->
              </head>
              <body>
                <!-- Zawartość -->
              </body>
            </html>

Deklaracja typu dokumentu

<!DOCTYPE > - to nie jest znacznik, ale obowiązkowa deklaracja typu dokumentu. Jest potrzebna, aby poinformować przeglądarkę, w której wersji HTML jest napisany dokument.

Na podstawie DOCTYPE przeglądarka określa wersję HTML i poprawnie wyświetla stronę. Deklaracja typu dokumentu powinna być pierwszą rzeczą, którą przeglądarka widzi podczas przetwarzania dokumentu HTML.

<!DOCTYPE html>

Wcześniej HTML miał wersje, najnowsza to HTML5. Teraz HTML Living Standard jest to jedyna specyfikacja HTML, w której wersje zostały porzucone, ona po prostu aktualizuje się. Jeśli mówią o HTML5, oznacza to to samo, co „nowoczesny HTML" lub HTML Living Standard, tylko krócej.

Elementy najwyższego poziomu

Mają one na celu stworzenie podstawowej struktury strony internetowej oraz określenie sekcji nagłówka i ciała dokumentu.

Znacznik <html>

Główny element dokumentu jest jako kontener, który zawiera całą zawartość strony. Nic poza nim nie jest postrzegane przez przeglądarkę jako kod HTML i nie jest przetwarzane.

            <!DOCTYPE html>
            <html lang="pl"></html>

Atrybut lang wskazuje na to, w jakim języku napisany jest tekst strony. Jest to wymagane w przypadku technologii asystujących, takich jak czytniki ekranu itp.

Znacznik <body>

Zawiera treść przyszłej strony internetowej. Treść, która ma być wyświetlana na stronie, powinna znajdować się wewnątrz tego znacznika.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <!-- Informacje serwisowe -->
              </head>
              <body>
                <!-- Zawartość -->
              </body>
            </html>

Znaczniki nagłówków dokumentów

Grupa znaczników serwisowych, które znajdują się w nagłówku dokumentu. Większość z nich nie jest wyświetlana bezpośrednio w oknie przeglądarki.

Nagłówek strony

Tekst umieszczony wewnątrz znacznika <title> jest wyświetlany w zakładce przeglądarki. Długość nagłówka nie powinna przekraczać 60 znaków, aby całkowicie zmieścić się w nagłówku. Tekst nagłówka powinien zawierać krótki opis treści strony internetowej.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <title>HTML5 to proste!</title>
              </head>
              <body>
                <!-- Zawartość -->
              </body>
            </html>

Metadane

Znacznik <meta> służy do przechowywania informacji przeznaczonych dla przeglądarki i wyszukiwarek: ustawienia kodowania dokumentu, przesyłania informacji do wyszukiwarek i wiele innych. Może istnieć kilka meta znaczników, ponieważ w zależności od użytych atrybutów niosą one różne informacje

Aby przeglądarka poprawnie wyświetlała tekst, należy wskazać kodowanie strony. Jeśli nie zostanie to zrobione lub podać nieprawidłowe kodowanie, zamiast znaków przeglądarka może wyświetlać hieroglify.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <!-- utf-8 - najbardziej rozpowszechnione kodowanie -->
                <meta charset="utf-8" />
                <title>HTML5 to proste!</title>
              </head>
              <body>
                <!-- Zawartość -->
              </body>
            </html>

Krótki opis zawartości pomaga wyszukiwarkom lepiej indeksować stronę.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <meta charset="utf-8" />
                <meta name="description" content="Nauka podstaw HTML5 dla początkujących" />
                <title>HTML5 to proste!</title>
              </head>
              <body>
                <!-- Zawartość -->
              </body>
            </html>

Meta znaczniki, które rozumie Google

Układ dokumentów

Układ to pionowa i pozioma kolejność wyświetlania elementów na stronie. Układ przebiega pionowo od góry do dołu i domyślnie elementy są wyświetlane na stronie w takiej kolejności, w jakiej są one wskazane w dokumencie HTML. Poziomo układ przebiega od strony lewej do prawej (lub od prawej do lewej dla krajów wschodnich).

Wszystkie elementy bez wyjątku to prostokątne obszary, które zajmują określone miejsce w tak zwanych „liniach", jak słowa zdania na kartce w linie. Są dwa główne typy elementów - blokowe i liniowe.

            <!-- Akapit jest elementem blokowym -->
            <p>Element blokowy 1</p>
            <p>Element blokowy 2</p>
            <p>Element blokowy 3</p>

            <!-- Link to element liniowy -->
            <a href="">Element liniowy 1</a>
            <a href="">Element liniowy 2</a>
            <a href="">Element liniowy 3</a>

Element blokowy (block-level element) - zajmuje całą linię, niezależnie od rozmiaru jej zawartości, dlatego kilka elementów blokowych układa się zawsze jeden pod drugim.

Element liniowy (inline element) - zajmuje miejsce zgodnie z zawartością, dlatego kilka elementów liniowych może znajdować się w tej samej linii. Jeśli w linii nie ma wystarczającej ilości miejsca, aby zmieścić element liniowy, jest on przenoszony do nowej.

Semantyka

Znaczniki przyszłej strony internetowej powinny mieć sens, jak strona gazety lub magazynu. Strona zawiera sekcje, nagłówki, listy, obrazki, akapity tekstu itd. Aby opisać całe bogactwo gatunkowe treści, są odpowiednie znaczniki. Oznacza to, że semantyka jest pierwotnie częścią kodu HTML, ale ona jest bezużyteczna, jeśli jest nieprawidłowo zrealizowana.

Znaczniki semantyczne - podejście do tworzenia znaczników HTML na podstawie używania znaczników zgodnie z ich przeznaczeniem w oparciu o specyfikację oraz odpowiednie typy oznaczanych treści.

W większości przypadków znaczniki semantyczne to po prostu użycie zdrowego rozsądku. Zaznaczając akapit tekstu, używamy znacznika <p>, żeby oznaczyć link jest znacznik <a>, obraz z treścią jest reprezentowany przez tag <img> itp.

Czyli znaczniki semantyczne oznaczają, że znaczniki nie są wybierane na podstawie tego, w jaki sposób one są wyświetlane w przeglądarce, one są dobierane na podstawie rodzaju i struktury zaznaczanych treści.

Znaczniki tekstowe

Akapit

Znacznik <p> - uniwersalny tag do grupowania małych elementów frazowych, oddzielania ich od siebie i dalszej stylizacji. Domyślnie akapit jest elementem blokowym, to znaczy, że zaczyna się w nowej linii, domyślne zachowanie można zmienić za pomocą CSS.

            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
              eaque, esse itaque porro non exercitationem odio earum quos perferendis!
            </p>

            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
              asperiores non temporibus ut nisi minima?
            </p>

Często konieczne jest wypełnienie znacznika pustym tekstem, w przypadku, gdy sam tekst, który zostanie umieszczony w serwisie, nie będzie jeszcze dostępny. Aby to zrobić, używa się specjalnego symbolu zastępczego.

W edytorze VSCode, w dokumencie HTML można wpisać kod lorem10, następnie nacisnąć klawisz Tab. Stworzy to tablicę tekstową składającą się z 10 słów. Zamiast 10 można wpisać dowolną liczbę.

Nagłówki

Grupa znaczników<h1>...<h6> - definiuje nagłówki tekstowe sekcji semantycznych różnych poziomów, które wskazują znaczenie sekcji treści znajdującej się po nich. Jest to narzędzie do strukturyzacji treści tekstowych.

Przykład H1

Przykład H2

Przykład H3

Przykład H4

Przykład H5

Przykład H6

Znacznik <h1> jest najczęściej używany tylko raz, jako nagłówek strony głównej. Reszta nagłówków może być używana wiele razy ale z uwzględnieniem hierarchii.

Wyszukiwarki zwracają szczególną uwagę na nagłówki, więc prawidłowe użycie tej grupy znaczników jest niezwykle ważne. Nie określajcie poziomu nagłówka na podstawie rozmiaru tekstu w układzie. Nie każdy duży tekst zawiera nagłówki. Nagłówek jest tym, co w znaczeniu jest nagłówkiem sekcji treści.

Listy

Listy pozwalają uporządkować kolekcje i zaprezentować je w sposób wizualny i wygodny dla użytkownika. Lista to kontener, którego elementami podrzędnymi mogą być tylko elementy listy, znaczniki <li>.

Znacznik <ol> - tworzy listę numerowaną (uporządkowaną), to znaczy każdy element listy jest numerowany. Przeglądarka automatycznie numeruje elementy w kolejności, a jeśli usunąć jeden lub więcej elementów takiej listy, pozostałe numery zostaną automatycznie przeliczone. Numerację elementów można kontrolować za pomocą specjalnych atrybutów listy.

Dobrym przykładem użycia listy numerowanej jest przepis kulinarny.

            <h1>Jak zaparzyć herbatę</h1>
            <p>
              Szczegółowe instrukcje dla opornych, po prostu powtórz, a odniesiesz sukces!
            </p>

            <ol>
              <li>Zagotować wodę</li>
              <li>Wsypać herbatę do kubka</li>
              <li>Wlać wrzątek do kubka</li>
              <li>Czekać 10 minut, po czym można pić</li>
            </ol>

Znacznik <ul> - tworzy listę wypunktowaną (nieuporządkowaną), której każdy element zaczyna się od małego znaku (punktora). Dzięki CSS punktor można usunąć lub zastąpić.

Dobrym przykładem użycia listy nieuporządkowanej jest lista kurortów.

            <h1>Najgorętsze kurorty</h1>
            <p>Eksperci zalecają odwiedzenie w tym roku następujących lokalizacji.</p>

            <ul>
              <li>Tunezja</li>
              <li>Turcja</li>
              <li>Grecja</li>
              <li>Egipt</li>
            </ul>

Zgodnie ze specyfikacją w znacznikach <ul> i <ol> można zagnieżdżać tylko elementy listy - znaczniki <li>. Przy tym wewnątrz znaczników<li> mogą być zagnieżdżone inne dowolne znaczniki.

Listy zagnieżdżone

Tworzenie listy wielopoziomowej jest proste - umieszczamy jeszcze jedną listę w tagu element listy <li>. Jest to często używana praktyka do tworzenia menu wielopoziomowych.

           <ul>
             <li>
                Komputery i akcesoria
               <ul>
                 <li>Procesory</li>
                 <li>Monitory</li>
                 <li>Karty graficzne</li>
               </ul>
             </li>
             <li>
                Artykuły gospodarstwa domowego
               <ul>
                 <li>Lodówki</li>
                 <li>Telewizory</li>
                 <li>Pralki</li>
               </ul>
             </li>
             <li>
                Sprzęty gospodarstwa domowego
               <ul>
                 <li>Fotele</li>
                 <li>Materace</li>
                 <li>Kominki elektryczne</li>
               </ul>
             </li>
           </ul>

Link

Znacznik <a> - służy do tworzenia linków, tekstu, po kliknięciu którego przechodzimy do innej strony, ściągamy plik itp. Tekst linku jest wyświetlany w przeglądarce z podkreśleniem, kolor czcionki jest niebieski, po najechaniu na link kursor myszy zmienia widok.

Adres linku jest określony w wymaganym atrybuciehref="adres". Adres to URL, który może wskazywać stronę, plik, dowolny zasób.

            <a href="https://google.com">Link do strony głównej Google</a>

Atrybuty target i rel

Domyślnie link otwiera się w bieżącej zakładce przeglądarki. Atrybut target="wartość" określa, w której zakładce ma zostać otwarty dokument, do którego prowadzi link. Jeśli wartość _blank, to strona otworzy się na nowej karcie przeglądarki.

Atrybut rel uzupełnia atrybut href o informacje o relacji między bieżącym dokumentem a połączonym, i jest używany w połączeniu z atrybutem target="_blank".

            <!-- Link do zasobu zewnętrznego otwiera się w bieżącej karcie -->
            <a href="https://www.facebook.com/">Facebook</a>

            <!-- Link do zasobu wewnętrznego otwiera się w nowej karcie -->
            <a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener">
              Facebook
            </a>

Atrybut download

Jeśli w href linku ścieżka do pliku jest określona, przeglądarka spróbuje go otworzyć w bieżącym oknie, jeśli potrafi przetwarzać pliki tego typu. Zwykle dzieje się tak w przypadku obrazków i plików PDF.

Atrybut download="nazwa pliku" informuje przeglądarkę, że określony zasób nie powinien być otwierany, ale ładowany w momencie kliknięcia linku przez użytkownika. Wartość atrybutu określa nazwę wczytywanego pliku, czyli można zmienić nazwę podczas pobierania. Atrybutu można użyć bez określania wartości, wtedy będzie użyta nazwa oryginalnego pliku.

            <!-- Link do pobrania pliku -->
            <a href="/ścieżka/к/cv.pdf" download>Pobierz CV</a>

Wartości specjalne href

Linki umożliwiają nie tylko przejście do innych stron i pobieranie plików, ale także wykonywanie połączeń telefonicznych, wysyłanie wiadomości czy wykonywanie połączeń przez Skype.

            <!-- Link do numeru telefonu -->
            <a href="tel:+14251234563">+1 (425) 123-45-63</a>

            <!-- Link do adresu e-mail  -->
            <a href="mailto:example@mail.ru">example@mail.ru</a>

Link do zakotwiczenia

Link do zakotwiczenia służy do tworzenia nawigacji na bieżącej stronie. Na przykład, aby szybko przejść do jakiejś sekcji (jak w tych materiałach). Po kliknięciu takiego linku przeglądarka przewinie stronę do zakotwiczenia, bez jej ponownego ładowania.

Aby utworzyć link do zakotwiczenia, trzeba dodać do znacznika, do którego chcemy przewinąć stronę, atrybut id - unikalny identyfikator. Natomiast atrybutowi href w linku ustawić wartość zaczynającą się od znaku #, po którym jest wskazany identyfikator elementu.

            <h1>Dental clinic website</h1>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#features">Features</a></li>
              <li><a href="#team">Team</a></li>
              <li><a href="#reviews">Testimonials</a></li>
            </ul>
            <section>
              <h2 id="about">About</h2>
              <h2 id="features">Features</h2>
              </section>

Przycisk

Element interaktywny obsługiwany za pomocą JavaScript. Na przykład przycisk do otwierania i zamykania wyskakującego okienka, przełączania menu mobilnego lub przesyłania formularza. Musi być wyraźnie określony atrybut type. Jego wartość domyślna to - submit, ale najczęściej potrzebujemy wartości button.

            <button type="button">Otwórz okno modalne</button>

Ważne jest, aby nie mylić linku i przycisku. Jeśli po kliknięciu na element interfejsu przejdziesz do jakiegoś adresu, to znaczy znajduje się tam „href", to jest link. Jeśli po kliknięciu coś się dzieje bez ponownego ładowania lub przekierowywania strony, to na pewno jest przycisk.

Atrybut lang

Jeśli strona zawiera tekst w różnych językach, aby zrobić go bardziej dostępnym dla technologii asystujących, można ustawić atrybut lang nie tylko dla całego dokumentu, ale także dla poszczególnych znaczników.

            <!DOCTYPE html>
            <html lang="pl">
              <head>
                <meta charset="utf-8" />
                <meta name="description" content="Instrukcja obsługi ciasteczek" />
                <title>Ciasteczka są smaczne!</title>
              </head>
              <body>
                <p>Instrukcja obsługi</p>
                <p lang="en">Operating instructions</p>
                <p lang="fr">Manuel d'utilisation</p>
              </body>
            </html>

To jest możliwość, zalecenie, a nie wymaganie. Układ zgodnie z pomocą technologii asystujących wykonywany jest tylko na życzenie klienta.

Obrazki

Zastosowanie grafiki sprawia, że strony internetowe są bardziej atrakcyjne wizualnie. Obrazki pomagają lepiej przekazać istotę i treść dokumentu. Znacznik <img> jest przeznaczony do oznaczania obrazków w różnych formatach graficznych.

            <img
              src="https://images.pexels.com/photos/67112/pexels-photo-67112.jpeg"
              alt="Macbook Air na szarym drewnianym stole"
              width="400"
            />

src="ścieżka" - obowiązkowy atrybut, który wskazuje adres obrazka. Ścieżka dostępu do obrazka może być bezwzględna lub względna.
alt="opis" - obowiązkowy atrybut, alternatywny opis.
width="wartość" i height="wartość" - ustawiają wymiary obrazu w pikselach. Bez zmiany rozmiaru obraz jest wyświetlany na stronie w oryginalnym rozmiarze. Jeśli ustawić tylko jedną wartość, przeglądarka automatycznie obliczy drugą, aby zachować proporcje.

Atrybut alt

Jest potrzebny do dostarczania istotnych informacji użytkownikom, którzy nie widzą obrazu (niedowidzący) lub jeśli obraz nie został załadowany. Tekst alternatywny musi znajdować się w każdym znaczniku <img>.

Opis powinien zawierać pełne, sformułowane zdanie.
Tekst alternatywny powinien odpowiadać na pytanie „Co jest pokazane na obrazku?" -Opis powinien być unikalny i nie powinien powtarzać tego, co już jest w tekście tego obrazu.
W opisie nie musisz używać słów „obraz" czy „ilustracja", jest to oczywiste.

Jeśli treść strony opisuje historię tych kociąt, wystarczy poniższy opis.

            <img src="kittens.jpg" alt="Kocięta" />

W przypadku, gdy mamy tylko galerię zdjęć, bez żadnego opisu tekstowego, konieczne jest doprecyzowanie, co dokładnie jest pokazane na obrazku.

            <img
              src="kittens.jpg"
              alt="Troje kociąt bawi się na słomie. Dwoje szarych i jedno czarne."
            />

Odsyłacz obrazkowy

Link nie obowiązkowo musi zawierać treść tekstową. Bardzo często, szczególnie w sklepach internetowych, kliknięcie zdjęcia produktu na liście produktów przekierowuje użytkownika na stronę tego produktu.

Aby utworzyć odsyłacz obrazkowy, trzeba zmienić znacznik <img> na link.

            <a href="https://www.pexels.com/photo/animals-sweet-cat-kitty-57416/">
              <img
                src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?w=640"
                alt="Rudy kot"
                width="640"
              />
            </a>

Obraz z podpisem

Takie zadanie jest często spotykane w artykułach, w których znajduje się wiele obrazków z objaśnieniami pod lub nad obrazkiem, na przykład ilustracje, wykresy lub diagramy. Jeśli trzeba oznaczyć znacznikami obraz z podpisem, można użyć znaczników <img> i akapit <p>. Ale właśnie dla takich zadań istnieją znaczniki semantyczne <figure> i <figcaption>.

Wewnątrz <figure> umieszczamy znaczniki obrazu i opisu. Znacznik <figcaption> musi być pierwszym lub ostatnim elementem dzieckiem elementu <figure>.

            <figure>
              <!-- Dowolna treść graficzna: zdjęcie, wykres, diagram itp. -->
              <img src="adres obrazu" alt="tekst alternatywny" />
              <figcaption>
                Tekst wyjaśnienia, który będzie znajdował się pod obrazem
              </figcaption>
            </figure>

Ścieżki bezwzględne i względne

Strony internetowe zawierają wiele plików umieszczonych w oddzielnych folderach, aby ułatwić zarządzanie nimi. Aby utworzyć połączenie między różnymi plikami, na przykład w dokumencie HTML w celu dołączenia obrazu lub pliku stylu, używane są ścieżki bezwzględne lub względne, które opisują lokalizację dołączonego pliku.

Ścieżka bezwzględna

Określa dokładną lokalizację pliku w strukturze folderów na serwerze. Bezwzględna ścieżka umożliwia dostęp do pliku z zasobów zewnętrznych.

            https://images.pexels.com/photos/583842/pexels-photo-583842.jpeg

Adresy bezwzględne składają się z co najmniej trzech części: protokołu, nazwy serwera i ścieżki pliku.

https:// - protokół.
images.pexels.com - nazwa serwera.
/photos/583842/pexels-photo-583842.jpeg — ścieżka do pliku obrazu, gdzie «photos» i «583842» nazwy folderów. Folder «583842» zagnieżdżony w «photos».

Na przykład po kliknięciu w link z tym adresem, przeglądarka otworzy kartę z obrazem, który znajduje się gdzieś na serwerze w Internecie.

Ścieżka względna

Opisuje ścieżkę do zasobu odnośnie bieżącego pliku. Służy do tworzenia ścieżek do obrazów, plików stylów lub tworzenia nawigacji do innych stron internetowych, które stwarzacie.

Weźmiemy standardową strukturę plików i folderów projektu.

Żeby w index.html dotrzeć do obrazu logo z folderu images, w atrybucie src należy określić ścieżkę względną, czyli względną do dokumentu HTML.

            <a href="">
              <img src="images/logo.png" alt="Logo strony" />
            </a>

Znak / oznacza przejście o jeden poziom niżej. Taką ścieżkę przeglądarka dosłownie rozumie, jak: „W folderze images, na jednym poziomie z bieżącym plikiem index.html, wziąć plik logo.png».

W przyszłości konieczne będzie dołączenie obrazów do pliku stylów. Aby w pliku styles.css dotrzeć do obrazu logo z folderu images, trzeba określić ścieżkę względną (względem pliku stylów).

            background-image: url('../images/logo.png');

Ciąg znaków ../ wskazuje na przejście o jeden folder (poziom) wyżej. Przeglądarka dosłownie rozumie tę ścieżkę jako: „Przejdź o jeden folder wyżej (wstecz), wejdź do folderu images i weź w nim plik logo.png».

Formaty plików graficznych

Grafika wektorowa będzie się wyświetlać równie dobrze na normalnych ekranach, jak i na ekranach o dużej gęstości pikseli. Grafika rastrowa, zwłaszcza skompresowana z utratą jakości będzie wyglądać na zamazaną.

Grafika rastrowa

Grafika rastrowa (raster, bitmap) - opis pliku graficznego w postaci tablicy ze współrzędnymi każdego piksela oraz opisem koloru tego piksela. Jak paleta kolorów o stałym rozmiarze.

Najpopularniejsze rastowe formaty obrazów to:

JPEG - duże pliki, które nie wymagają przezroczystego tła ani animacji. Ten format jest idealny do żywych, fotorealistycznych zdjęć, ponieważ mogą one zawierać miliony kolorów.
PNG - w przeciwieństwie do JPEG ma dodatkowy parametr do opisu przezroczystość (kanał alfa). Odpowiedni dla obrazów z przezroczystym lub monochromatycznym tłem. Używany do ikonek i przedmiotów dekoracyjnych. Używany również do obrazów o wysokiej precyzji - zrzutów ekranu, rysunków, wykresów itp.
webP - format zastępujący PNG i JPEG, ale nadal z niepełną obsługą w przeglądarkach. Przy tej samej jakości obrazu skompresowane pliki będą mniejsze niż PNG i JPEG średnio o 25%.

Rozróżnienie obrazu rastrowego jest dość łatwe, wystarczy zwiększyć jego skalę. W pewnym momencie obraz zacznie się rozmywać i pojawią się kwadraty (pikselacja).

Grafika wektorowa

Grafika wektorowa (SVG, Scalable Vector Graphics) - jest opisywana za pomocą reguł lub równań definiujących linie, a także dodatkowych właściwości, koloru linii i tła kształtów.

Grafika wektorowa jest idealna do prostych obrazów, które można skalować i zajmują bardzo mało miejsca. Jednak wraz ze wzrostem złożoności obrazu rozmiar pliku sprawia, że użycie formatu SVG jest nieopłacalne. Grafika wektorowa zastępuje PNG i służy do tworzenia ikonek, logo, wykresów, grafiki abstrakcyjnej i elementów dekoracyjnych.

Formaty plików graficznych

Obrazy stanowią około 90% całkowitej masy zasobów strony, dlatego należy je najpierw zoptymalizować. W przyszłości do optymalizacji zasobów projektu zostaną zaangażowane specjalne narzędzia, które będą to robić automatycznie. Ale teraz trzeba myśleć o optymalizacji wagi strony i używać specjalnych usług online do kompresowania obrazów.

Trzeba pamiętać, że optymalizacja pliku JPEG prowadzi do utraty jakości obrazu. Dlatego wraz ze zmniejszeniem wagi obrazu jego wygląd ulegnie pogorszeniu. Optymalizacja formatu JPEG sprowadza się do znalezienia równowagi między jakością obrazu a wagą.

Optymalizacja obrazu jest wykonywana jeden raz. Obraz wyeksportowany z układu jest optymalizowany i dopiero potem dodaje się do projektu.

Progresywny JPEG

Progresywne obrazy JPEG - są to pliki graficzne w formacie JPEG, które zostały zakodowane w taki sposób, że podczas wyświetlania są ładowane w postaci warstw. Progresywny JPEG wygląda dokładnie tak, jak zwykłe obrazy JPEG. Różnica polega na sposobie ich wyświetlania podczas uruchamiania.

Zwykłe pliki JPEG są ładowane i renderowane w postaci pasków (linia po linii) od góry do dołu. Dla użytkownika stwarza to efekt słabej szybkości ładowania strony. Jest to szczególnie widoczne w przypadku dużych obrazów lub na urządzeniach mobilnych o słabej jakości połączenia sieciowego.

Progresywny JPEG ładowany jest w taki sposób, że cały obraz jest wyświetlany od razu, ale w słabej jakości, a w trakcie wczytywania jakość stopniowo poprawia się do maksimum.

Z punktu widzenia użytkownika progresywny JPEG zapewnia znacznie przyjemniejsze przeglądanie. Użytkownik natychmiast otrzymuje pełny obraz zawartości strony.

Tworzenie

Aby zrobić progresywny obraz JPEG, wystarczy użyć specjalnych narzędzi, w tym online. Na przykład podczas optymalizacji obrazów JPEG w Squoosh, one domyślnie (automatycznie) stają się progresywne.

Waga pliku progresywnego obrazu JPEG jest zwykle nieco mniejsza niż jego podstawowego odpowiednika JPEG.

Znaczniki strukturalne

Istnieje cały zestaw znaczników semantycznych do oznaczania dużych sekcji logicznych i ulepszania semantyki strukturalnej strony. Każdy z nich może być użyty pod pewnymi warunkami. Wpływa to na działanie technologii asystujących, indeksowanie strony i jej ranking w wynikach wyszukiwania.

Przesyłanie strumieniowe treści

Znacznik <header>

Nagłówek (header) podkreśla wprowadzającą część całej strony, złożoną sekcje lub artykuł. Zwykle zawiera logo, nawigację, tekst wprowadzający, złożony nagłówek. Na stronie może być ich kilka.

            <body>
              <!-- Nagłówek -->
              <header>
                <a href="/">Logo strony</a>

                <ul>
                  Menu nawigacyjne do innych stron
                </ul>
              </header>
            </body>

Link do specyfikacji

Znacznik <footer>

Stopka (footer) to ostatnia część całej strony, sekcji lub artykułu. Często zawiera prawa autorskie, listę linków do sieci społecznościowych, dane kontaktowe i tak dalej. Na stronie może ich być kilka.

            <body>
              <!-- Nagłówek -->
              <header>
                <a href="/">Logo strony</a>

                <ul>
                  Menu nawigacyjne do innych stron
                </ul>
              </header>

              <!-- Stopka strony -->
              <footer>
                <!-- Prawa autorskie -->
                <p>Wszelkie prawa zastrzeżone ©lpj.dev</p>

                <!-- Linki do sieci społecznościowych-->
                <ul>
                  <li><a href="">Facebook</a></li>
                  <li><a href="">Twitter</a></li>
                  <li><a href="">Instagram</a></li>
                </ul>
              </footer>
            </body>

Link do specyfikacji

Znacznik <main>

Główna (unikalna) treść, która nie powtarza się. Na stronie może być tylko jeden.

            <body>
              <!-- Nagłówek -->
              <header></header>

              <!-- Unikalna zawartość strony -->
              <main></main>

              <!-- Stopka strony -->
              <footer></footer>
            </body>

Link do specyfikacji

Sekcje semantyczne

Znacznik <nav>

Definiuje główną nawigację z linkami do innych sekcji lub stron. Używany tylko do nawigacji głównej, a nie do dowolnej grupy linków w dokumencie.

            <body>
              <!-- Nagłówek -->
              <header>
                <a href="/">Logo strony</a>

                <nav>
                  <!-- Nawigacja do innych stron -->
                  <ul>
                    <li><a href="/portfolio">Portfolio</a></li>
                    <li><a href="/contact">Contact</a></li>
                    <li><a href="/about">About</a></li>
                  </ul>
                </nav>
              </header>

              <!-- Unikalna zawartość strony -->
              <main></main>

              <!-- Stopka strony -->
              <footer>
                <!-- ⚠️ Linki do sieci społecznościowych, nie nav -->
                <ul>
                  <li><a href="">Facebook</a></li>
                  <li><a href="">Twitter</a></li>
                  <li><a href="">Instagram</a></li>
                </ul>
              </footer>
            </body>

Link do specyfikacji

Znacznik <article>

Niezależna, odłączalna i znacząca część dokumentu. Na przykład post na forum, tweet, artykuł na blogu, widżet reklamowy, historia na Instagramie, karta produktu w sklepie.

            <article>
              <h1>Słodkie ciasteczko</h1>
              <img src="link do obrazu ciasteczka" alt="ciasteczko" />
              <p>
                Pyszne pieczone ciasteczka z różnymi nadzieniami: wiśniowym, śliwkowym,
                brzoskwiniowym lub truskawkowym.
              </p>
              <p>Cena: 50 kredytów</p>
            </article>

Jeśli sekcja dokumentu ma swój nagłówek i po przeniesieniu całej sekcji nadal nie traci ona swojego sensu - to jest <article> (<article> z definicji jest odłączalny tzn. możemy go używać poza stroną w przeciwieństwie do <section>). Nagłówek jest wymagany.

Link do specyfikacji

Znacznik <section>

Duża sekcja, która łączy treści według znaczenia. Nierozłączna z głównym dokumentem. Na przykład sekcja listy produktów, blok danych osobowych w profilu użytkownika, sekcja danych kontaktowych. (W przeciwieństwie do <article> jest mocno powiązany ze stroną na której występuje)

            <section>
              <h1>Najpopularniejsze ciasteczka w tym tygodniu</h1>

              <!-- Każdy <li> może zawierać karteczkę z ciasteczkiem z sekcji «Znacznik <article>» -->
              <ul>
                <li>Smażone z grzybami</li>
                <li>Smażone z mięsem</li>
                <li>Smażone z jabłkami</li>
                <li>Pieczone z twarogiem</li>
              </ul>
            </section>

Jeśli sekcja dokumentu może mieć nazwę, ale nie ma to sensu poza stroną, to jest <section>. Nagłówek jest wymagany.

Link do specyfikacji

Znacznik <div>

Uniwersalny kontener bez znaczenia semantycznego. Używany jako blok opakowujący do dalszej stylizacji treści.

Jeśli nie udaje się nadać grupie treści rozsądnej nazwy (nie „prawej kolumny", ale mającej sens) - jest to <div> i najprawdopodobniej jest potrzebny po prostu wspólny kontener do stylizacji.

Link do specyfikacji

Algorytm wyboru znacznika

Nie tylko początkujący mogą mieć trudności z podjęciem decyzji, którego znacznika użyć do oznaczania bloku treści w oparciu o jego znaczenie semantyczne. Użyj tego algorytmu, aby wybrać odpowiedni znacznik.

Walidacja

W kodzie każdy przecinek, cudzysłów i nawias, nazwa atrybutu i znacznika, znacznik otwierający i zamykający są ważne, ciężko szczególnie na początku za tym wszystkim podążać dlatego został wymyślony walidator.

Walidacja jest potrzebna do wykrywania błędów w składni znaczników dokumentu HTML i rozbieżności ze specyfikacją HTML określoną w <!DOCTYPE >. Program do tego sprawdzenia nazywany jest walidatorem. W wyniku walidacji dokument przechodzi walidację lub otrzymuje listę zalecanych poprawek.

Walidatory sprawdzają tylko składnię i specyfikację HTML, a nie semantykę.

Jest specjalna usługa online (walidator) która sprawdza, czy kod dokumentu HTML spełnia standardy aby to sprawdzić, musimy wysłać kod źródłowy do walidatora i kliknąć przycisk odpowiedzialny za sprawdzenie kodu strony. Można przesłać kod do walidacji, pobierając plik HTML, przesyłając link do działającej strony internetowej lub kopiując i wklejając cały kod.

Walidator sprawdza następujące punkty.

Poprawna pisownia znaczników.
Trafność znaczników i możliwość ich zastosowania w tej wersji HTML.
Poprawność zamykania i zagnieżdżania znaczników.
Prawidłowe użycie atrybutów.

Formatowanie kodu

Podczas tworzenia stron internetowych zawsze trzeba wracać do kodu, który już został napisany, aby wprowadzić zmiany. Zdecydowana większość projektów ma więcej niż jednego dewelopera. Jeśli kod nie jest sformatowany zgodnie ze standardami traci czytelność a w rezultacie szybkość projektowania spada.

Używaj tego przewodnika od @mdo podczas pisania kodu w miarę jak uczysz się technologii.

Filmy

Wprowadzenie do HTML

Wprowadzenie do HTML 2