Identyfikatory i klasy pozwalają na odróżnienie od siebie poszczególnych elementów html i nadanie im stylów. Atrybut id może być użyty tylko raz na stronie, ale już taką samą klasę może mieć kilka elementów.
Przykład użycia identyfikatorów i klas:
Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus section4 minus minus zamknij nawias ostrokątny.
Linia 2. otwórz nawias ostrokątny div class znak równości cudzysłów wrapper wrapper minus minus wide cudzysłów zamknij nawias ostrokątny.
Linia 3. otwórz nawias ostrokątny div id znak równości cudzysłów part1 cudzysłów zamknij nawias ostrokątny.
Linia 4. otwórz nawias ostrokątny div class znak równości cudzysłów inside center cudzysłów zamknij nawias ostrokątny.
Linia 5. otwórz nawias ostrokątny p zamknij nawias ostrokątny.
Linia 6. Lorem ipsum dolor sit amet przecinek consectetur adipiscing elit kropka Vivamus ut dignissim tortor przecinek in efficitur risus kropka Praesent.
Linia 7. ultrices felis mauris przecinek ac sagittis ante condimentum id kropka Sed venenatis non eros un molestine kropka Nam placerat dui urna przecinek non.
Linia 8. consectetur tellus ullamcorper eu kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny Nullam tempor massa non massa consequat przecinek ut mattis ex maximus kropka Maecenas bibendum erat.
Linia 9. in est semper condimentum kropka Vestibulum id ligula arcu kropka Morbi placerat przecinek ante in interdum dictum przecinek est sem aliquam augue przecinek.
Linia 10. vel congue metus metus nec urna kropka Proin venenatis cursus ornare kropka.
Linia 11. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.
Linia 12. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 13. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 14. otwórz nawias ostrokątny div id znak równości cudzysłów part2 cudzysłów zamknij nawias ostrokątny.
Linia 15. otwórz nawias ostrokątny div class znak równości cudzysłów inside right minus side cudzysłów zamknij nawias ostrokątny.
Linia 16. otwórz nawias ostrokątny p zamknij nawias ostrokątny.
Linia 17. Donec suscipit elit blandit cursus convallis kropka Morbi fringilla massa sed nuc gravida iaculis kropka Praesent eget nisl a lorem luctus.
Linia 18. sollicitudin kropka Phasellus ac metus dui kropka Etiam sit amet rhoncus sapien kropka Ut id augue id nisi blandit accumsan kropka Fusce aliquet urna nec.
Linia 19. rhoncus pretium kropka Praesent tristique ante eget ipsum bibendum przecinek a pharatera dui elementum kropka Mauris eget pulvinar sapien kropka Suspendisse.
Linia 20. eget quam est kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny In fringilla porttitor erat ec imperdiet kropka Cras consequat vel mauris non aliquam kropka Proin nec massa tristique neque.
Linia 21. ornare porttitor ut et augue kropka Sed enim lacus przecinek dictum a sapien vitae przecinek imperdiet semper nunc kropka Curabitur retrum faucibus falis eu.
Linia 22. luctus kropka Quisque libero dui przecinek feugiat eget rhoncus sit amet przecinek ornare ac nibh kropka.
Linia 23. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.
Linia 24. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 25. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 26. otwórz nawias ostrokątny div id znak równości cudzysłów part3 cudzysłów zamknij nawias ostrokątny.
Linia 27. otwórz nawias ostrokątny div class znak równości cudzysłów inside left minus side cudzysłów zamknij nawias ostrokątny.
Linia 28. otwórz nawias ostrokątny p zamknij nawias ostrokątny.
Linia 29. Proin vestibulum velit venenatis congue tincidunt kropka Proin dapibus condimentum hendrarit kropka Vivamus rhoncus vestibulum.
Linia 30. sodales kropka Donec odio eros przecinek ultricies sed tortor non przecinek faucibus cursus dolor kropka Duis ac cursus urna przecinek id varius dui kropka Nulla et.
Linia 31. facilisis orci kropka Suspendisse consectetur est id facilisis feugiat kropka Cras finibus magna in neque pretium hendrerit ac quis.
Linia 32. elite kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny Cras lacinia purus ut lorem dignissim tincidunt kropka Ut non arcu quis nulla consequat lobortis kropka Fusce egestas quis.
Linia 33. tortor et scelerisque kropka Integer fermentum lectus eu sodales consectetur kropka Phasellus sit amet nisl non lorem pelentesque.
Linia 34. pretium ut eu enim kropka Integer vestibulum urna magna przecinek ac consequat dui pretium ac kropka Nam nulla nulla przecinek rhoncus a mollis a przecinek.
Linia 35. condimentum vel lectus kropka.
Linia 36. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.
Linia 37. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 38. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
Linia 39. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.
<!-- section4 -->
<div class="wrapper wrapper--wide">
<div id="part1">
<div class="inside center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut dignissim tortor, in efficitur risus. Praesent
ultrices felis mauris, ac sagittis ante condimentum id. Sed venenatis non eros un molestine. Nam placerat dui urna, non
consectetur tellus ullamcorper eu. <br><br> Nullam tempor massa non massa consequat, ut mattis ex maximus. Maecenas bibendum erat
in est semper condimentum. Vestibulum id ligula arcu. Morbi placerat, ante in interdum dictum, est sem aliquam augue,
vel congue metus metus nec urna. Proin venenatis cursus ornare.
</p>
</div>
</div>
<div id="part2">
<div class="inside right-side">
<p>
Donec suscipit elit blandit cursus convallis. Morbi fringilla massa sed nuc gravida iaculis. Praesent eget nisl a lorem luctus
sollicitudin. Phasellus ac metus dui. Etiam sit amet rhoncus sapien. Ut id augue id nisi blandit accumsan. Fusce aliquet urna nec
rhoncus pretium. Praesent tristique ante eget ipsum bibendum, a pharatera dui elementum. Mauris eget pulvinar sapien. Suspendisse
eget quam est. <br><br> In fringilla porttitor erat ec imperdiet. Cras consequat vel mauris non aliquam. Proin nec massa tristique neque
ornare porttitor ut et augue. Sed enim lacus, dictum a sapien vitae, imperdiet semper nunc. Curabitur retrum faucibus falis eu
luctus. Quisque libero dui, feugiat eget rhoncus sit amet, ornare ac nibh.
</p>
</div>
</div>
<div id="part3">
<div class="inside left-side">
<p>
Proin vestibulum velit venenatis congue tincidunt. Proin dapibus condimentum hendrarit. Vivamus rhoncus vestibulum
sodales. Donec odio eros, ultricies sed tortor non, faucibus cursus dolor. Duis ac cursus urna, id varius dui. Nulla et
facilisis orci. Suspendisse consectetur est id facilisis feugiat. Cras finibus magna in neque pretium hendrerit ac quis
elite. <br><br> Cras lacinia purus ut lorem dignissim tincidunt. Ut non arcu quis nulla consequat lobortis. Fusce egestas quis
tortor et scelerisque. Integer fermentum lectus eu sodales consectetur. Phasellus sit amet nisl non lorem pelentesque
pretium ut eu enim. Integer vestibulum urna magna, ac consequat dui pretium ac. Nam nulla nulla, rhoncus a mollis a,
condimentum vel lectus.
</p>
</div>
</div>
</div>
W celu nadania stylów elementom mającym atrybut id i class w pliku cssCSScss stosujemy odnośniki. Dla atrybutu id będzie to hash (#), a dla class – kropka (.).
Linia 1. kratka part1 otwórz nawias klamrowy.
Linia 2. background dwukropek url otwórz nawias okrągły cudzysłów kropka kropka prawy ukośnik assets prawy ukośnik image1 kropka jpg cudzysłów zamknij nawias okrągły center 0 no minus repeat fixed średnik.
Linia 3. border minus radius dwukropek 6px średnik.
Linia 4. zamknij nawias klamrowy.
Linia 1. kropka inside otwórz nawias klamrowy.
Linia 2. text minus align dwukropek justify średnik.
Linia 3. max minus width dwukropek 500px średnik.
Linia 4. padding dwukropek 50px 0 średnik.
Linia 5. height dwukropek 1200px średnik.
Linia 6. zamknij nawias klamrowy.
Przyjrzyjmy się od razu elementom i ich stylom. W pierwszym mamy zdefiniowane własności background i border. Zdjęcia na stronie możemy załączać na różne sposoby. Jednym z nich jest umieszczenie tagu <img> w kodzie html.
Linia 1. otwórz nawias ostrokątny a href znak równości cudzysłów kratka cudzysłów zamknij nawias ostrokątny.
Linia 2. otwórz nawias ostrokątny img src znak równości cudzysłów assets prawy ukośnik image2 kropka jpg cudzysłów zamknij nawias ostrokątny.
Linia 3. otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny.
<a href="#">
<img src="assets/image2.jpg">
</a>
Ważne!
Dobrą praktyką jest umieszczanie tekstu alternatywnego, który w tagu <img> jest zawarty w atrybucie alt. Więcej na ten temat przeczytasz w e‑materiale WCAG, dostępność, treści alternatywnePctfW8BvZWCAG, dostępność, treści alternatywne.
Innym sposobem jest określenie źródła zdjęcia w pliku css. Korzystając z właściwości css, możemy definiować różne elementy związane z tłem i kolorami na stronie poprzez wybranie odpowiednich atrybutów.
Przykładowe elementy:
background‑color – najszybsze i najprostsze wypełnienie tła kolorem,
background‑image – wskazanie adresu obrazka,
background‑position – ustawienie pozycji tła,
background‑size – określenie wielkości tła.
Wszystkie te elementy możesz też zdefiniować w jednej linii.
Style drugiego elementu (klasy .inside) określają wysokość i szerokość.
Efekt Parallax
Parallax Scrolling to efekt płynnego przewijania strony. Jak go wykorzystać w swoim projekcie?
Pierwszym krokiem jest stworzenie sekcji div, która ma określony identyfikator. Ustanawiamy w niej wybrane tło. W tej sekcji umieszczamy kolejną (również div), która określa szerokość oraz wysokość tła.
Na końcu umieszczamy paragraf zawierający opisy. Załóżmy, że przy każdym zdjęciu powinny wyświetlać się one w innym miejscu.
Style na przykładzie pierwszego elementu w pliku css wyglądają następująco:
Linia 1. kratka part1 otwórz nawias klamrowy.
Linia 2. background dwukropek url otwórz nawias okrągły cudzysłów kropka kropka prawy ukośnik assets prawy ukośnik image1 kropka jpg cudzysłów zamknij nawias okrągły center 0 no minus repeat fixed średnik.
Linia 3. border minus radius dwukropek 6px średnik.
Linia 4. zamknij nawias klamrowy.
Linia 1. kropka inside otwórz nawias klamrowy.
Linia 2. text minus align dwukropek justify średnik.
Linia 3. max minus width dwukropek 500px średnik.
Linia 4. padding dwukropek 50px 0 średnik.
Linia 5. height dwukropek 1200px średnik.
Linia 6. zamknij nawias klamrowy.
Linia 7. kropka inside kropka center otwórz nawias klamrowy.
Linia 8. margin dwukropek 0 auto średnik.
Linia 9. padding minus top dwukropek 4rem średnik.
Linia 10. zamknij nawias klamrowy.
W zaprezentowanym projekcie zamieszczona została również animacja. Bazuje ona na stylach zdefiniowanych w pliku css.
Linia 1. kropka fa minus hamburger otwórz nawias klamrowy.
Linia 2. color dwukropek kratka dfcec4 średnik.
Linia 3. animation dwukropek myanimation 2s infinite średnik.
Linia 4. padding minus bottom dwukropek 1rem średnik.
Linia 5. zamknij nawias klamrowy.
Linia 1. at keyframes myanimation otwórz nawias klamrowy.
Linia 2. 0 procent otwórz nawias klamrowy.
Linia 3. color dwukropek kratka 293462.
Linia 4. zamknij nawias klamrowy.
Linia 5. 50 procent otwórz nawias klamrowy.
Linia 6. color dwukropek kratka dfcec4 średnik.
Linia 7. zamknij nawias klamrowy.
Linia 8. zamknij nawias klamrowy.
Animujemy zmieniający się w określonym rytmie kolor. W @keyframe zawarta została nazwa animacji, połączonej później z elementem, na którym chcemy ją wywołać oraz animowanym atrybutem (color). Przy implementacji animacji możemy również określać różne atrybuty, m.in.:
animation‑name: myanimation,
animation‑duration – określa, ile trwa animacja,
animation‑delay – opóźnienie rozpoczęcia się animacji,
animation‑iteration‑count – liczba wywołań animacji.
Możemy zdefiniować wszystkie wartości w jednej linii.
Stosowanie zmiennych w pliku css
Elementy stylowanej strony zmieniamy w dowolny sposób. Możemy edytować kolorystykę, jednak zmiana wielu tak prostych atrybutów może być czasochłonna. Jak rozwiązać ten problem?
Można zdefiniować podstawowe wartości i przypisać je do zmiennych. Zobaczmy to na przykładzie.
W sekcji body mamy zdefiniowane dwa główne kolory.
Linia 1. html przecinek body otwórz nawias klamrowy.
Linia 2. background minus color dwukropek kratka dfcec4 średnik.
Linia 3. color dwukropek kratka 293462 średnik.
Linia 4. font minus family dwukropek apostrof Nunito apostrof przecinek sans minus serif średnik.
Linia 5. font minus size dwukropek 16px średnik.
Linia 6. zamknij nawias klamrowy.
Możemy jednak zdefiniować je jako zmienne w poniższy sposób.
Linia 1. dwukropek root otwórz nawias klamrowy.
Linia 2. minus minus primary minus color dwukropek kratka dfcec4 średnik.
Linia 3. minus minus secondary minus color dwukropek kratka 293462 średnik.
Linia 4. zamknij nawias klamrowy.
Linia 1. html przecinek body otwórz nawias klamrowy.
Linia 2. background minus color dwukropek var otwórz nawias okrągły minus minus primary minus color zamknij nawias okrągły średnik.
Linia 3. color dwukropek var otwórz nawias okrągły minus minus secondary minus color zamknij nawias okrągły średnik.
Linia 4. font minus family dwukropek apostrof Nunito apostrof przecinek sans minus serif średnik.
Linia 5. font minus size dwukropek 16px średnik.
Linia 6. zamknij nawias klamrowy.
Kolejnym krokiem jest wprowadzenie tej zmiennej. Jeśli chcemy zmienić kolorystykę, stosujemy ją tylko w jednym miejscu.
Stosowanie kolorów w css
Kolory w pliku ze stylami opisujemy na kilka różnych sposobów:
nazwa,
rgb lub rgba,
hsl lub hsla,
hex.
Jeśli decydujemy się na pierwszy sposób, zazwyczaj IDE podpowiada propozycje. Pełna lista jest dostępna w specyfikacji CSS.
Informacje na temat modelów barw znajdziesz w e‑materiale Modele barwPkKvUsd4IModele barw.
Warto pamiętać, że choć mamy wiele dróg do osiągnięcia danego celu, warto w ramach jednego projektu konsekwentnie trzymać się jednej ścieżki.
CSS reset
CSS reset likwiduje domyślne style niektórych elementów, np. marginesu, który pojawia się domyślnie przy elemencie <body>.
Przykład prostego resetu:
Linia 1. asterysk otwórz nawias klamrowy.
Linia 2. box minus sizing dwukropek border minus box średnik.
Linia 3. margin dwukropek 0 średnik.
Linia 4. padding dwukropek 0 średnik.
Linia 5. zamknij nawias klamrowy.
usługa pozwalająca publikowanie treści (stron, witryn, serwisów) w sieci internet
certyfikat SSL
certyfikat SSL
szyfrowanie, które zabezpiecza dane pozostawiane na stronie www, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność
CMS
CMS
oprogramowanie do zarządzania treścią strony (ang. Content Management System)
CSS
CSS
język opisujący formy wyświetlania strony www
dokument HTML
dokument HTML
dokument (strona www) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach
domena
domena
adres strony internetowej, np. www.zlompol.pl
home page (strona główna)
home page (strona główna)
strona, na którą kieruje domyślnie adres witryny internetowej
hosting
hosting
przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony
kreator stron www
kreator stron www
narzędzie to tworzenia stron internetowych; znajdują się tam gotowe szablony
link
link
zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy
post
post
wpis na stronie
responsywność
responsywność
automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach
urządzenia do obsługi technicznej stron www (przechowywanie plików strony WWW, poczty, multimediów itp.)
strona internetowa
strona internetowa
zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)
witryna internetowa/serwis internetowy
witryna internetowa/serwis internetowy
zbiór połączonych ze sobą pojedynczych stron internetowych