Lecimy dalej ❗😁
Za nami post, w którym poznaliśmy kilka podstawowych znaczników HTML, formatowania kodu, deklaracji. Zrobiliśmy zarys prostej strony. Z każdym kolejnym postem, postaram się pokazywać jak najwięcej możliwości, które daje nam kodowanie.
Listy nienumerowane
Pamiętacie, jak w ostatnim ćwiczeniu mieliśmy od myślników wypunktować swoje hobby? Mamy jednak na to inny, lepszy sposób! Oczywiście, że odpowiednie znaczniki🙂
– znacznik listy nienumerowanej, w nim zagnieżdżamy dowolną liczbę elementów listy (punktów), używając znacznika
Poniżej spójrzmy na przykład:
See the Pen Przykładowa lista nienumerowana by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Dodaj do przykładu kolejną listę nienumerowaną, np. Kolory (tytuł dodaj do nagłówka h2).
Listy numerowane
Stworzyliśmy przed chwilą listy nienumerowane. Co jednak wtedy gdy chcemy, aby elementy listy były ponumerowane?
W tym celu język HTML udostępnia nam znacznik . Analogicznie, jak w listach nienumerowanych, w umieszczamy punkty w postaci
Efektem będzie dodanie numeracji przed punktami.
Spójrzmy na przykład:
See the Pen Przykładowa lista numerowana by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Dodaj do przykładu kolejną listę numerowaną, np. Kwiaty (tytuł dodaj do nagłówka h2).
Listy możemy zagnieżdżać…
Potrafimy tworzyć listy. Czasami zdarzyć się może, że chcielibyśmy aby jedna lista zawierała się w drugiej – podobnie jak w spisie treści. Taki przypadek nazywamy zagnieżdżaniem list.
Przykładowo, w danej liście zamiast kolejnego znacznika
umieścimy znaczniki “ol” lub “ul”, a w środku zagnieżdżamy elementy. Dozwolone jest również zagnieżdżanie elementów “ul” w “ol” i na odwrót.
Zobrazujmy zagnieżdżanie list na przykładzie:
See the Pen Zagnieżdzanie list by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Dodaj do ostatniego przykładu kolejną listę zagnieżdżoną, np. “Drzewa”, ale w odwrotnej kolejności 🙂 (zacznij po prostu od “ol”).
Tabeleczki, ale nie excelowe🙂
Wszystkich danych nie należy umieszczać w formie listy. Niektóre informacje, takie jak: wyniki sportowe, rozkład jazdy lepiej prezentują się w formie tabeli.
HTML umożliwia nam wstawienie tabeli za pomocą znaczników “table”. W ramach tabeli umieszczamy wiersze, za pomocą znaczników “tr”. Na końcu dodajemy komórki tabeli (dane) za pomocą “td”.
Przejdźmy do przykładu:
See the Pen Tabele by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Do ostatniego przykładu, dodaj kolejną tabele, z kilkoma kolejnymi miesiącami roku.
Dodajemy nagłówek i ciało tabeli
Zapewne zauważyliście w ostatnim ćwiczeniu o elementarnym braku w tabeli – nagłówku. Po ich dodaniu tabela staję się przejrzysta i czytelna dla każdego. Aby móc dodać nagłówek należy wykorzystać znaczniki “thead” i w ramach jego kolejne komórki nagłówka “th”. Nagłówek “thead” może występować tylko raz w tabeli, tzn. po znaczniku “table”.
Następnie, po dodaniu nagłówka, ciało tabeli (dane) umieszczamy w znacznikach “tbody”.
Przykład wszystko zobrazuje:
See the Pen Nagłówek i ciało tabeli by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Przećwiczmy dodawanie nagłówka oraz ciała do tabeli na wymyślonym przez siebie przykładzie.
A może czas na linka?
Strona internetowa w dzisiejszych czasach musi wręcz składać się z linków. Przekierowują one nas do własnych podstron, ale również mogą do całkiem innych podstron.
Aby dany tekst, mógł pełnić rolę odnośnika, należy użyć znacznika “a”. Dla linka używamy znacznika zamykającego.
Domyślnie, tekst znajdujący się między znacznikami linka, zostanie w podglądzie podkreślony
Aby wskazać adres, pod który dany link ma przekierować stronę, należy dodać w znaczniku otwierającym atrybut href=” “ (w znaczniku po a należy dodać spację, a następnie atrybut). Pomiędzy cudzysłowami, należy dodać adres, na jaki link ma kierować (rozpoczynając z prefiksem: http://www.przykład.pl).
Pisać można dużo – najlepiej jak to zobaczymy na przykładzie 😉
See the Pen Linki by Daniel Minschinski (@daniel-minschinski) on CodePen 1
Ćwiczenie
- Otwórz nowego pena i wykonaj deklarację strony HTML, tytuł strony “Portale informacyjne”.
- Dodaj do ciała największy nagłówek strony z zawartością: “Moje dwa najlepsze źródła informacji”.
- Utwórz listę nienumerowaną i dodaj w niej, dwa portale informacyjne jako linki zewnętrzne.
Linki do naszych podstron
Strony, które tworzymy, przeglądamy są zazwyczaj rozbudowane o podstrony. Chciałbym pokazać Wam, jak linkować do nich. W celu zalinkowania do innej podstrony, tak samo jak w linkach do zewnętrznych podstron, używamy znacznika:
Istnieją dwa sposoby zapisu – krótsza i dłuższa🙂
- Podajemy pełny adres do pliku, np.
- Podajemy tylko nazwę pliku, np.
Pierwszy sposób nazywamy ścieżką bezwzględną. Druga to ścieżka względna. Linkując w witrynie do podstron wewnętrznych prawie zawsze linkujemy po ścieżce względnej.
Codesandbox – prawie jak lokalny edytor?
Pierwszy raz na moim blogu użyje innego edytora online – Codesandbox. Edytor jest odzwierciedleniem edytora lokalnego. Moim zdaniem bardziej rozbudowany, niż codepen. Do pokazania przypadku odnośnika sprawdzi się codesandbox. Rejestracja konta prawie taka sama jak w Codepen. Dlatego już teraz pokazuję Wam przykład w nim napisany:
peaceful-haibt-4ov9j
peaceful-haibt-4ov9j by danielminschinski
Ćwiczenie
- Otwórz nowy projekt w codesandbox.
- Utwórz dwa pliki przykład_1.html oraz przykład_2.html
- W pierwszym dodaj link wewnętrznym do drugiego, a w drugim odwrotnie. Sprawdź wynik na podglądzie, porównaj z przykładem wcześniejszym. Logiki ćwiczenia nie zmieniałem, więc odpowiedzi nie dodaję🙂
Nowa karta przeglądarki, czy na starej?
Kolejnym atrybutem znacznika “a”, który poznamy jest target. Określa on czy po kliknięciu w link nowa strona otworzy się w obecnym oknie, czy przekieruje nas do nowej zakładki. Zazwyczaj, dla linków innych witryn stosuje się otwieranie w nowym oknie przeglądarki. Gdy nie dodamy tego atrybutu, nowa strona ukaże się nam w obecnej zakładce.
Pusty atrybut target nic nam nie pomoże. Musimy przypisać do niego wartość _blank.
Aby zobrazować, spójrzmy na przykład:
Gdy klikniemy na podkreślone słowa “tekst linku”, odtworzy się nam nowa zakładka przeglądarki.
Ćwiczenie
- Uruchom nowego pena.
- Wykonaj deklarację pliku HTML.
- Nadaj tytuł “Atrybut target”.
- Dodaj link, np. “http://wp.pl” z atrybutem target, dzięki czemu strona otworzy się w nowej zakładce.
Kotwica, czyli łącza obszarów strony
Podczas przeglądania stron tzw. One-Page, zauważyliście na pewno jeden zasadniczy element który wyróżnia je od innych. Klikając na odnośnik menu, strona przenosi nas jedynie do obszaru na obecnej stronie (bez przeładowywania). Przykładowo, na mojej stronie, która jest moją wizytówką, zastosowałem kotwice. Przetestujcie menu – One-Page działa jak należy.
Przejdźmy do kodowania – jak stworzyć taką kotwice? Należy w tym celu w odpowiednim znaczniku (np. nagłówku) dodać atrybut identyfikacji id=” “ z wartością indywidualną. Przykładowy nagłówek może wyglądać następująco:
Aby nagłówek mógłby być identyfikatorem obszaru, należy skierować do niego link. W nim, zamiast pełnego adresu internetowego lub samej nazwy pliku, podajemy identyfikator danego nagłówka poprzedzony znakiem #. W naszym przypadku, link mógłby wyglądać następująco: