Przeczytaj

Fonty

Przy przygotowaniu projektów możesz skorzystać z trzech rodzajów fontów:

bezpiecznych, które są dostępne na każdym urządzeniu, dotyczy to fontów takich jak: Arial, Tahoma, Times New Roman, Verdana;
hostowanych, które są trzymane na własnym serwerze;
hostowanych zewnętrznie, które są utrzymane przez serwery zewnętrzne.

Pierwsza opcja to skorzystanie ze standardowych fontów. Pomińmy ją jednak, nie wymaga od nas żadnych dodatkowych działań.

Spróbujmy się wyróżnić, a równocześnie nie polegać na działaniu serwerów zewnętrznych czy na działaniach innych osób (np. administrator stronystrona internetowastrony, która hostuje wybrany przez ciebie font może zdecydować o jego usunięciu). Wykorzystamy zatem drugą opcję.

Skorzystajmy z witryny Google Fonts – jest darmowa i oferuje szeroki wybór.

Wybraliśmy odpowiedni font. Co dalej?

Zaznaczamy zestaw znaków oraz style i kopiujemy do pliku .css wygenerowany kod.
Pobieramy źródło plików (skompresowane w formacie .zip).
Przygotowujemy folder fonts i tam rozpakowujemy pobrany plik.

Ważne!

Możesz zmienić nazwę folderu, jednak powinna być zgodna z adresem, który jest wskazany w pliku .css.

url('../fonts/nunit-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunit-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunit-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunit-v14-latin-regular.ttf') format('truetype'), /*Safari, Android, iOS */
url('../fonts/nunit-v14-latin-regular.svg#Nunito') format('svg'); /*Legacy iOS */

Ważne jest sprawdzenie, czy ta ścieżka odpowiada realnemu umieszczeniu plików, inaczej w konsoli deweloperskiej będzie pokazana informacja o tym, że nie znaleziono plików z fontami.

Wskazujemy w pliku .css font‑family (rodzaj pobranego fontu) – poszczególnym elementom lub całej sekcji body.

html, body {
	background-color: #dfcec4;
    color: #293462;
    font-family: 'Nunito', sans-serif;
    font-size: 16px; }

Jeśli jednak decydujesz się na hosting zewnętrzny, wystarczy jedynie uzupełnienie źródła w sekcji head. Link jest generowany na stronie Google Fonts po wybraniu fonta i wskazaniu odpowiednich opcji (standardowy rozmiar, wersja bold, lighter itd.).

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap" rel="stylesheet">

Ikony

Wizualna komunikacja jest istotnym elementem na stronie internetowej. Poprawnie użyte ikony mogą zastąpić słowa i są od razu wychwytywane przez ludzkie oko, niemal automatycznie.

W przygotowywanym projekcie ikon możemy użyć np. w formularzu kontaktowym. W konsekwencji poszczególne pola nie potrzebują pełnych podpisów – jak uzyskać taki efekt?

Jedną z popularnych bibliotek jest Font Awesome, która ma darmową wersję.

Biblioteki oferują kod, który od razu możesz skopiować do swojego pliku html.

W formularzu możesz zobaczyć, jak w kodzie są zaimplementowane inne ikony:

Linia 1. otwórz nawias ostrokątny div class znak równości cudzysłów inputContainer cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny label for znak równości cudzysłów userName cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny i class znak równości cudzysłów fa fa minus lg fa minus fw fa minus user cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny input name znak równości cudzysłów name cudzysłów id znak równości cudzysłów userName cudzysłów type znak równości cudzysłów text cudzysłów placeholder znak równości cudzysłów Podaj swoje imię cudzysłów zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny div class znak równości cudzysłów inputContainer cudzysłów zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny label for znak równości cudzysłów userEmail cudzysłów zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny i class znak równości cudzysłów fa fa minus lg fa minus fw fa minus envelope cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny input name znak równości cudzysłów email cudzysłów id znak równości cudzysłów userEmail cudzysłów type znak równości cudzysłów email cudzysłów placeholder znak równości cudzysłów Podaj swój email cudzysłów 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 div class znak równości cudzysłów inputContainer cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny label for znak równości cudzysłów country cudzysłów zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny i class znak równości cudzysłów fas fa minus city cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny prawy ukośnik label zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny select id znak równości cudzysłów country cudzysłów name znak równości cudzysłów city cudzysłów zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny option value znak równości cudzysłów wroclaw cudzysłów zamknij nawias ostrokątny Wrocław otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny option value znak równości cudzysłów warszawa cudzysłów zamknij nawias ostrokątny Warszawa otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny option value znak równości cudzysłów krakow cudzysłów zamknij nawias ostrokątny Kraków otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny option value znak równości cudzysłów other cudzysłów zamknij nawias ostrokątny Inna lokalizacja otwórz nawias ostrokątny prawy ukośnik option zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik select zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.

<div class="inputContainer">
	<label for="userName">
    	<i class="fa fa-lg fa-fw fa-user"></i>
	</label>
    <input name="name" id="userName" type="text" placeholder="Podaj swoje imię">
</div>
<div class="inputContainer">
	<label for="userEmail">
    	<i class="fa fa-lg fa-fw fa-envelope"></i>
	</label>
    <input name="email" id="userEmail" type="email" placeholder="Podaj swój email">
</div>
<div class="inputContainer">
 	<label for="country">
    	<i class="fas fa-city"></i>
    </label>
    <select id="country" name="city">
    	<option value="wroclaw">Wrocław</option>
        <option value="warszawa">Warszawa</option>
        <option value="krakow">Kraków</option>
        <option value="other">Inna lokalizacja</option>
    </select>
</div>

Po zapoznaniu się z dokumentacją możesz zobaczyć, że ikony można modyfikować z poziomu kodu html. Możesz zmieniać kolorystykę czy wielkość, choć z punktu widzenia responsywności strony korzystniejsze byłoby wprowadzenie zmian za pomocą arkusza stylów. Nie zawsze chcemy, aby ikony były na przykład tak samo duże na komputerze, jak i na telefonie.

Słownik

adres URL

usługa pozwalająca publikowanie treści (stron, witryn, serwisów) w sieci internet

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

oprogramowanie do zarządzania treścią strony (ang. Content Management System)

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

adres strony internetowej, np. www.zlompol.pl

home page (strona główna)

strona, na którą kieruje domyślnie adres witryny internetowej

hosting

przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony

kreator stron WWW

narzędzie do tworzenia stron internetowych; znajdziesz tam gotowe szablony

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

wpis na stronie

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

serwer internetowy

urządzenia do obsługi technicznej stron WWW (przechowywanie plików strony WWW, poczty, multimediów itp.)

single page (podstrona lub pojedyncza strona)

unikalna strona internetowa stanowiąca odrębny dokument zawierający treść

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

zbiór połączonych ze sobą pojedynczych stron internetowych

Wprowadzenie

Film edukacyjny

Fonty

Ikony

Słownik