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:
Taki powyższy link nazywamy kotwicą.
Ćwiczenie
- Uruchom nowego pena.
- Wykonaj deklaracje pliku HTML.
- Nadaj tytuł “Kotwice”.
- Dodaj nagłówek h1, a w nim “Przykładowe Kotwice”.
- Następnie dodaj dwa linki z atrybutami – pierwszy: href=”#one”, drugi: href=”#two”. Nazwy linków odpowiednio: One, Two.
- Dodaj nagłówek h2 z nazwą “One”, a pod nim przykładowy akapit. Ważne aby był długi, ponieważ w podglądzie masz zauważysz efekt przejścia.
- Analogicznie dodaj h2 i akapit jak w punkcie 6.
Komentarze dla ciekawych❓
Dlaczego warto komentować swój kod?
A dlatego, aby przy ponownym jego przeczytaniu, czytający mógł łatwo się zorientować o co w nim chodzi.
INFORMACJA TECHNICZNA ❕
Od tej chwili, kod który zostanie umieszczony na moim blogu w sekcji “ĆWICZENIE” zostanie objęty KOMENTARZEM❗ Tłumaczenie kodu w formie komentarza uważam za najlepszą formę zrozumienia✔
Komentarz w kodzie umieszcza się pomiędzy odpowiednimi znakami:
Przeglądarka czytając nasz kod, pomija taki fragment i nie ma wpływu na sposób wyświetlania strony. Pamiętaj o zamykaniu komentarza, ponieważ strona może zinterpretować dalszy kod jako komentarz.
Ćwiczenie
- Dodaj komentarz do ostatniego ćwiczenia, wg zdobytej wiedzy😉
Czas na obrazki! 😉
Na każdej finalnej stronie znajdziemy obrazki. Aby móc dodać plik graficzny do swojej strony, należy użyć znacznika “img” – kolejny samo zamykający element.
Głównym atrybutem znacznika img jest src=” “. W cudzysłowie dodajemy ścieżkę do pliku graficznego. Może ona wskazywać pod pełny adres URL grafiki, np:
albo wybrać ścieżkę względną (warunkiem jest jeden serwer obrazka i pliku html) :
Ćwiczenie
- Dodaj nowego pena.
- Tytuł – “Obrazek z internetu”.
- W ciele strony dodaj nagłówek drugiego stopnia i znacznik img z atrybutem src (przykładowy nagłówek i link z obrazkiem z internetu).
Kolejne atrybuty obrazka
Na wypadek usunięcia z serwera grafiki, bądź zmiany jej ścieżki mamy możliwość dodania opisu alternatywnego, dzięki kolejnemu atrybutowi alt=” “ w ramach znacznika “img”.
Kolejny atrybut znacznika img, który możemy zastosować jako opis to title=” “. Po najechaniu kursorem na obrazek, pojawi się opis, który umieściliśmy w title.
Ćwiczenie
- Utwórz nowego pena.
- W ciele dokumentu, umieść zdjęcie z internetu za pomocą atrybutu w znaczniku img.
- Następnie dodaj do niego atrybut opisu alternatywnego oraz tekstu który będzie się wyświetlał, po najechaniu na niego kursorem.
Wysokość i szerokość grafiki
Gdy chcemy edytować wymiary grafiki na stronie, mamy do dyspozycji dwa atrybuty: height=” “ (wysokość) oraz width=” “ (szerokość). Wartości wspomnianych atrybutów wyrażamy liczbami całkowitymi. Spójrzmy na przykład:
Powyższy przykład przedstawi nam grafikę w rozmiarach 500px szerokości i 400px wysokości.
Ćwiczenie
- Dodaj nowego pena.
- Umieść w ciele dokumentu obrazek o wymiarach 1200px szerokości i 600px wysokości.
Wyrównanie obrazków w poziomie
Poznajmy kolejny atrybut znacznika img – align=” “. Ma za zadanie ustawiać obrazek na odpowiedniej pozycji strony: lewej bądź prawej. Spójrzmy na przykład:
Powyższy kod spowoduje umieszczenie obrazka z lewej strony. Tekst w akapicie zostanie przeniesiony do prawej strony strony.
Ćwiczenie
- Dodaj nowego pena.
- Umieść w ciele dokumentu obrazek z internetu przesunięty do lewej strony.
- Następnie dodaj przykładowy akapit z tekstem.
Linkujemy obrazek
Na końcu mojego wpisu chciałbym pokazać, jak podlinkować obrazek. Wcześniej linkowaliśmy do zewnętrznych stron oraz podstron.
Zasada jest taka sama. Znacznik img musimy umieścić między znacznikami
Spójrzmy na przykład:
Ćwiczenie
- Przetestuj na wcześniejszych ćwiczeniach powyższe zagadnienie.
To by było na tyle😉 Post dość długi ale treściwy😉 Ponad tydzień musiałem poświęcić na stworzenie takiego materiału.
Postanowiłem, że “Plan Frontend Developera” podzielę na mniejsze moduły, aby częściej wrzucać kolejne posty💻📰
Tak więc zapraszam już niebawem do kolejnego wpisu o podstawach CSS… 😎 Zapraszam do komentowania materiału – co byście poprawili❓
PS. Dajcie znać w komentarzu, czy wolelibyście, aby po każdym ćwiczeniu, trzeba by było przechodzić na kolejną stronę? Może wpis byłby bardziej czytelny?