Od dawna wiadomo, że trening czyni mistrza. Gdy znasz już podstawy posługiwania się zarówno językiem HTML, jak i CSS, przeprowadzę Cię przez proces tworzenia strony “O mnie”. Ten rozdział jest jednym dużym zadaniem.
Projektowanie
Projekt strony WWW tworzymy między innymi na dwa poniższe sposoby:
- Projekt strony WWW tworzymy na podstawie projektu graficznego dostarczonego od grafika i na jego podstawie tworzymy szablon html/css,
- Tworzymy stronę dla siebie bez projektowania jej w Photoshopie. Najpierw powstaje ogólny zarys i na jej podstawie cała strona.
Teraz chciałbym przybliżyć Wam drugie powyższe podejście.
Przed każdym projektem należy się zastanowić, jakie elementy chcemy mieć na stronie internetowej oraz jakie treści chcemy na niej umieścić. Prawie zawsze przy tworzeniu strony używamy nagłówka i stopki. Można uznać to za standard.
Teraz zastanówmy się nad treścią. Fajnie by było się przedstawić i napisać kilka zdań na swój temat. To będzie nasza pierwsza sekcja.
W drugiej sekcji umieścimy pozostałe informacje pod kolejnymi nagłówkami wypiszemy więcej ciekawostek na swój temat. Pochwalimy się naszym hobby, dodatkowymi zajęciami czy ulubioną muzyką i filmami.
To co umieścisz na stronie jest twoje. Nie musisz się sugerować powyższymi wytycznymi. Najważniejsze, by zachować założoną strukturę HTML.
Pożądaną praktyką jest rozrysowanie sobie projektu. Do tego wystarczy kartka papieru i długopis. Taka wizualizacja ułatwia oszacowanie, jakich elementów potrzebujemy do osiągnięcia celu oraz jak rozlokować przestrzeń strony. Spora grupa developerów robi tak przed rozpoczęciem pracy z kodem.
Poniżej dodaję przykładowy szkic tego, co planujemy zrobić. W górnej części umieszczony został nagłówek, niżej podział na sekcje, a na samym dole umieściłem stopkę.
Powyższy obrazek można również nazwać makietą lub prototypem. To nic innego, jak wstępna wizualizacja układu strony. Jak już wspomniałem, do stworzenia prototypu można użyć kartki lub oprogramowania, np. Moqups. Zawiera w sobie wiele gotowych elementów, za pomocą których możesz szybko stworzyć prototyp swojej strony.
Powyższy sposób ma następującą zaletę. Zanim stworzysz kod strony, możesz zastanowić się kilka razy, czy coś zmienić. Pozwala to zaoszczędzić czas na dokonywanie takich modyfikacji na zakodowanym szablonie HTML/CSS.
HTML – struktura
Startujemy od stworzenia podstawowej struktury dokumentu zgodnej ze standardami HTML5 oraz podpięcia pliku ze stylami.
Następnie użyjmy tagów wprowadzonych w HTML5, między innymi:
- header dla nagłówka,
- section dla sekcji posiadającej tekst,
- footer dla stworzenia stopki na dole strony.
W kodzie HTML odwzorowanie struktury rozrysowanej na makiecie powinno wyglądać:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tytuł mojej strony</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header></header>
<main class="container">
<section class="section1"></section>
<section class="section2"></section>
</main>
<footer></footer>
</body>
</html>
body i nadamy mu margines wynoszący 0. Dla wartości zero nie trzeba przypisywać jednostki, np. px. Rezultat będzie taki, że nie będzie domyślnego marginesu jaki przyjmuje body. Zobacz jak to wygląda w praktyce:body {
margin: 0;
} Layout – najprostsza forma
W przypadku, gdy chcemy aby całość była wyśrodkowana w kolumnie – co należy zrobić? Tłumacząc, gdy nasze pudełka będą miały stałą szerokość a marginesy po bokach będą także o równej szerokości, która będzie ustalała automatycznie zależnie od szerokości przeglądarki.
Aby tego dokonać, należy wszystkie nasze pudełka umieścić w jednym głównym pudełku – kontenerze (tagu main o klasie container). Kolejno, w CSS dla tego kontenera (selektor dla klasy) należy użyć stylu margin: 0 auto, który dla całego kontenera zawartości po jego prawej stronie i lewej nada automatyczny margines – dzięki wartości auto. Następnie należy ustalić maksymalną szerokość (max-width) tego kontenera np. na 7200px. Gdy nie ustawimy ograniczenia, automatyczne marginesy po bokach nie zadziałają bo element będzie miał cały czas 100% domyślnej szerokości.
Można również nadać wyśrodkowanemu kontenerowi w CSS biały kolor tła (#FFF), a całej stronie między tagami body, kolor szary (#CCC). Wynikiem będzie wizualne oddzielenie kontenera od reszty.
Gdy już mamy szkielet i prosty layout strony, przyszedł czas na dokładne zajęcie się każdym elementem po kolei.
Tworzenie nagłówka
Nagłówek, czyli z ang. header, znajduje się w górnej części strony, jest pierwszym jej elementem, jaki widzi użytkownik w przeglądarce. W nagłówku umieszczamy paragraf z powitaniem – tagp, oraz nagłówek h1 z swoim imieniem. Powyższa instrukcja powinna wyglądać w kodzie HTML następująco:<header>
<p>Cześć! Mam na imię</p>
<h1>Daniel</h1>
</header> Przejdźmy do pliku CSS. W pierwszej kolejności, za pomocą selektora wybierającego nagłówek nadaj mu padding o wartości 30px. Korzystając z Google znajdź zdjęcie, które umieścisz w tle nagłówka strony za pomocą właściwości background-image: url('link do grafiki').
Kolejno stwórz selektor, za pomocą którego ostylujesz tylko nagłówek h1 będący dzieckiem elementu header i pogrub w nim tekst zawarty, spraw by wszystkie litery napisu były wielkie (text-transform).
Powiększ tekst nagłówka h1 do rozmiaru 46px. Następnie kolejny selektor niech wybiera zarówno h1, jak i p. Ustaw kolor tekstu, aby był wyróżniający na tle wybranego zdjęcia. Tekst ma zostać wyśrodkowany.
Przykładowe style wg powyższych wytycznych:
header {
padding: 30px;
background-image: url(https://i.wpimg.pl/O/1920x0/m.fotoblogia.pl/zrzut-ekranu-2016-12-08--29304a5.png);
}
header h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 46px;
}
header p, header h1 {
text-align: center;
color: white;
} Efekt w przeglądarce który uzyskamy będzie następujący:
Selektory, dziedziczenie i kaskadowość stylów
Ostateczne formatowanie strony jest zależne od wielu czynników. Istnieje hierarchia reguł CSS, która decyduje jak finalnie będzie wyglądał formatowany element. Jeżeli dany element ma przypisaną więcej niż jedną regułę, np. dla koloru tekstu, to zastosowanie będzie mieć ta, która jest wyżej w hierarchii.
Poniżej dodaję listę elementów w hierarchii od najważniejszych:
- styl lokalny (inline),
- rozciąganie stylu (span),
- wydzielone bloki (div),
- wewnętrzny arkusz stylów,
- import stylów do wewnętrznego arkusza,
- zewnętrzny arkusz stylów,
- import stylów do zewnętrznego arkusza
- atrybuty prezentacyjne HTML – np. color=”…”, width=”…”, inne)
Wyobraźmy sobie sytuacje, że w pliku style.css umieścimy:
div {
color: blue;
} a nasz HTML będzie wyglądać następująco:
<div style="color: red">zawartość</dov> Biorąc pod wzgląd kaskadowość stylów, nasz div będzie miał kolor czerwony, gdyż styl inline ma wyższy priorytet ważności i pierwszeństwo w modyfikowaniu koloru czcionki w podanym divie.
Następnym czynnikiem wpływającym na końcowy styl elementów jest dziedziczenie. Wszystkie elementy html posiadają swoich “rodziców” od których otrzymują style i “dzieci”, którym je narzuca. Skomplikowane? Spójrz na przykład:
<body>
<div>
<p>Zawartość</p>
</div>
</body> body dodamy właściwość color: red;, to tekst diva, który jest w środku body, będzie czerwony. Odziedziczy on kolor po swoim rodzicu. Spory wpływ na końcowe stylowanie strony ma stopień ważności selektorów. W kolejności od najważniejszych:- P1 – selektor identyfikatora:
#name { color: #000; }, - P2 – selektor atrybutu, klasy, pseudoklasy:
.name { color: #000; }, - P3 – selektor pseudoelementu i elementu:
p { color: #000;.
Sekcje
Przejdźmy do omówienia sekcji. Umieścimy w nich kilka zdań. W pierwszej sekcji utwórzmy nagłówekh2 informujący, o czym będzie tekst znajdujący się poniżej. Stwórzmy paragraf i umieśćmy w nim przykładowe informacje.<h2>Kim jestem?</h2>
<p>Jestem pozytywnym gościem!</p> ul) z hobby. W paragrafie napiszmy kilka słów o umiejętnościach. Lista i paragraf będą poprzedzone nagłówkami h2.<h2>Moje zainteresowania</h2>
<ul>
<li>programowanie</li>
<li>sport</li>
<li>i wiele innych...</li>
</ul> container dodajemy mu maksymalną szerokość (max-width) 700px, szerokość 100% oraz margin: 0 auto;. Gdy już mamy zawartość i kontener, to możemy napisać selektor wybierający elementy section. Nadaj im padding wynoszący po 20% z prawej i lewej strony. Ważne, aby sekcje różniły się od siebie stylistycznie. Korzystając z nadanych obu sekcjom różnych klas, możesz na przykład użyć innego koloru nagłówków h2 dla pierwszej sekcji niż dla drugiej. Aby strona dobrze wyglądała, warto użyć odpowiednich kolorów. Na wstępnym etapie wystarczy, że użyjemy “podstawowych” kolorów, przykładowo przedstawionych na stronie: Palettes | Flat UI Colors 🎨 280 handpicked colors ready for COPY & PASTE Gdy już wybierzemy zestaw kolorów, jakich chcemy użyć, stwórzmy następnie kolejne dwa selektory. Najpierw dla nagłówków h2 będących potomkiem elementu o klasie nadanej pierwszej sekcji (tutaj: about) i ustawmy w nim właściwości: margines górny 60px, rozmiar czcionki 28px i jeden z wybranych kolorów czcionki. Drugi selektor niech wybiera nagłówki h2 w drugiej sekcji. Wpiszmy w nim właściwości: margines 40px od góry i drugi z wybranych kolorów czcionki. Kody źródłowe obu sekcji powinny wyglądać tak:<section class="about">
<h2>Kim jestem</h2>
<p>Jestem pozytywnym gościem!</p>
</section>
<section class="interests">
<h2>Moje zainteresowania</h2>
<ul>
<li>programowanie</li>
<li>sport</li>
<li>i wiele innych...</li>
</ul>
<h2>Więcej o mnie</h2>
<p>Uważam, że każdy dzień jest dla nas wyzwaniem! Sami decydujmy jak żyjemy!</p>
</section> Przejdźmy do styli CSS:
.container {
max-width: 700px;
width: 100%;
margin: 0 auto;
}
section {
padding: 0 20%;
}
.about h2 {
margin-top: 60px;
font-size: 28px;
color: brown;
}
.interests h2 {
margin-top: 40px;
color: green;
} Nasze sekcje powinny wyglądaj mniej więcej tak:
Stopka
Przyjęło się, że w stopce umieszcza się dane kontaktowe, linki do profilów w mediach społecznościowych, informacje o stronie, a często także mapę jej zawartości w przypadku portali na większą skale.
Kontynuując nasz kod z poprzedniego rozdziału, dodajmy do niego paragraf ze swoim imieniem oraz swoim profilem społecznościowym.
<footer>
<p>Znajdziesz mnie jako Daniel: <a href="#">Facebook</a></p>
</footer> W pliku CSS stwórzmy selektor wybierający stopkę. Nadajmy jej właściwości: górny margines 60px – odsunięcie jej od reszty strony, padding: 30px; oraz dowolny kolor tła.
Kolejno dodajmy selektor, który będzie dotyczył paragrafu tekstu umieszczonego w stopce. Nadajmy w nim właściwości odpowiadające za wycentrowanie tekstu w poziomie i ustawienie koloru tekstu.
Ostatni selektor niech dotyczy linków umieszczonych w powyższym paragrafie. Ustawmy tak, by zniknęły podkreślenia. Do tego należy wykorzystać właściwości text-decoration, a tekst był pogrubiony i miał wyróżniający się kolor.
A więc style CSS stopki powinny wyglądać następująco:
footer {
margin-top: 60px;
padding: 30px;
background: #333333;
}
footer p {
text-align: center;
color: white;
}
footer a {
text-decoration: none;
color: yellow;
font-weight: bold;
} Po kompilacji kodu przez przeglądarkę stopka powinna wyglądać mniej więcej tak:
Czcionki
Istotnym elementem webdesignu, o który dba każdy frontendowiec jest czcionka. Na stronach można używać wiele czcionek dostępnych w serwisach typu Google Fonts. Wystarczy, że dodamy link w sekcjihead w pliku HTML. Drugą alternatywą tego rozwiązania jest umieszczenie w CSS @import. W tym przypadku czcionki ładują się wolniej i nie mamy pewności, czy zadziałają na stronie przed załadowaniem się treści. Strona Google Fonts udostępnia całą kolekcję darmowych czcionek. Znajdziemy tam także deklaracje, które należy umieścić w pliku HTML/CSS, by wykorzystać dany krój czcionek. Przykładowo zastosujmy dwie czcionki: Rubik oraz Montserrat. Znajdźmy je na stronie Google Fonts i kliknijmy ikonę plusa przy każdej z nich (wybierając w odpowiednim dla nas stylu), by dodać je do naszego zestawu. Po prawej stronie pojawił się pasek z informacją o naszych czcionkach. Przed podlinkowanymi stylami w sekcji head umieśćmy link z sekcji “Use on the web”:<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Rubik:wght@300&display=swap" rel="stylesheet"> Wagi i style czcionek
Zapewne już możesz znać najprostsze deklaracje, których możemy użyć do pogrubienia (wagi) i pochylenia czcionki. Spójrz poniżej:
p {
font-weight: bold;
font-style: italic;
} Deklaracje te wymuszają przeglądarce pogrubienie czy pochylenie fonta.
To wszystko, co chciałem przekazać Wam w tym rozdziale – “Prosta strona od zera”. Poniżej przygotuje Wam instrukcje, jak krok po kroku przygotować taką stronę.
Ćwiczenie: Projekt strony internetowej
- Poniżej dodaję instrukcję projektu strony wg powyższych podrozdziałów. Jeżeli wykonywałeś/aś po kolei kroki w jednym projekcie to ćwiczenie w sumie już wykonałeś/aś. Zachęcam jednak wszystkich do wykonania zadania i przećwiczenia standardów pisania kodu.
- Uruchom Codesandbox. Utwórz nowy projekt. Wykonaj standardową deklaracje strony.
- W ciele strony (
body) umieść nagłówek za pomocą znacznika otwierającego/zamykającegoheader. Wewnątrz nagłówka dodaj akapit z tekstem “Cześć! Mam na imię”. Pod akapitem dodaj nagłówekh1z swoim imieniem. - Pod zamknięciem nagłówka, stwórz sekcje, za pomocą znacznika otwierającego/zamykającego
sectionz klasąabout. Wewnątrz sekcji dodaj nagłówekh2z przykładową zawartością –"Kim jestem?". Pod nagłówkiem dodaj akapit, z przykładową zawartością. - Pod powyższą sekcją, dodaj kolejną sekcje z klasą
interests. Wewnątrz sekcji umieść nagłówekh2z zawartościąMoje zainteresowania. Pod nagłówkiem dodaj elementul, czyli wskazanie na listę nieuporządkowaną. Wewnątrz elementu dodaj listę za pomocą znacznikówli. Umieść w elemencie kilka punktów z zainteresowaniami. - Pod zamknięciem listy nieuporządkowanej dodaj nagłówek
h2z zawartościąWięcej o mnie. Kolejno umieść akapit z przykładowym tekstem o sobie. Zamknij akapit i całą sekcję. - Na koniec tworzenia struktury strony HTML, została nam stopka. Dodaj pod zamknięciem ostatniej sekcji znaczniki otwarcia/zamknięcia
footer. Wewnątrz dodaj następujący kod:
<p>Znajdziesz mnie jako "podaj swoje imię": <a href="#">Facebook</a></p> - Przejdźmy do stylowania naszej strony. Utwórz plik CSS w projekcie, pod nazwą
style.css. Jeżeli jeszcze nie dodałeś odwołania do pliku styli w deklaracji html, to zrób to za pomocą poniższego kodu:
<link rel="stylesheet" type="text/css" href="style.css" /> - W pliku style.css na samej górze dodaj selektor odnoszącą się do znacznika
body. Wewnątrz umieść deklaracje, dzięki której utworzyć margines zerowy na całej stronie, - Kolejnym selektorem który utworzysz, będzie
header. Wewnątrz umieść deklaracjepaddingna30px. Następnie dodaj właściwośćbackground-imagez wartościąurl(...), - Następnym selektorem który dodasz jest
header h1 {}, czyli wywołanie wszystkich elementów h1 w nagłówku. Wewnątrz dodaj następujące deklaracje:font-weight: bold;,text-transform: uppercase;,font-size: 46px;– pogrubienie czcionki, zmiana na duże litery i rozmiaru czcionki, - Ostatnim odniesieniem do nagłówka będzie następujący selektor:
header p, header h1 {}. Wewnątrz dodaj następujące deklaracje:text-align: center;,color: white;– wyśrodkowanie tekstu i zmiana koloru czcionki na biały, - Czas na stworzenie selektora odpowiadającego za kontener. Utwórz selektor klasy
.container{}. Wewnątrz dodaj następujące deklaracje:max-width: 700px;,width: 100%;,margin: 0 auto;– maksymalna szerokość, wypełnienie szerokości i margines, - Następnym selektorem który dodasz jest
section{}. Wewnątrz dodaj deklaracjępadding: 0 20%;– padding elementu, - Przejdźmy do dodania kolejnego selektora klasy –
.about h2{}. Wewnątrz dodaj następujące deklaracje:margin-top: 60px;,font-size: 28px;,color: brown;– górny margines, rozmiar i kolor czcionki, - Podobny krok jak powyżej – umieśćmy selektor
.interests h2{}. Wewnątrz dodaj następujące deklaracje:margin-top: 40px;,color: green;– górny margines i kolor czcionki, - Przejdźmy do ostatniego elementu na naszej stronie – czyli stopki. Dodajmy selektor
footer{}. Wewnątrz dodaj następujące deklaracje:margin-top: 60px;,padding: 30px;,background: #333333;– górny margines, padding i kolor elementu, - Odnieśmy się do akapitu nagłówka, czyli stwórzmy selektor
footer p{}. Wewnątrz dodaj następujące deklaracje:text-align: center;,color: white;– wyśrodkowanie i kolor tekstu, - W ostatnim selektorze na tej stronie odniesiemy się do linku w stopce. Dodaj następujący selektor:
footer a{}. Wewnątrz umieść następujące deklaracje:text-decoration: none;,color: yellow;,font-weight: bold;.
Finalny efekt strony powinien wyglądać mniej więcej tak:
Wszystkie pytania proszę kierować na mojego Messengera, lub bezpośrednio na emaila: danielminschinski@gmail.com
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA