diff options
| author | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2021-04-22 14:07:59 +0200 |
|---|---|---|
| committer | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2021-04-22 14:07:59 +0200 |
| commit | b44f29d35ddbdd4207b0fe3f077fc490c0fdd87b (patch) | |
| tree | 897790b1d395e15adbcaf5e52d91eae3395d8a1a | |
| download | www-master.tar.gz www-master.zip | |
| -rw-r--r-- | README.md | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..4dc1ead --- /dev/null +++ b/README.md @@ -0,0 +1,110 @@ +# www + +> WIP, moje wypociny odnośnie robienia stron internetowych na sprawność + +Drogi druhu! + +Jeżeli dostałeś od swojego drużynowego tę książeczkę to znaczy, że czeka cię przygoda z tworzeniem lub prowadzeniem strony drużyny, zastępu lub może jeszcze coś innego. W każdym bądź razie w tym "podręczniku" zebrałem informacje, które pomogą tobie rozpocząć tą przygodę. + +Ta książka to zbiór informacji, które uznałem za przydatne po wielu latach doświadczeń w szkole i pracy. Nie należy jej czytać od deski do deski, a raczej chodzi o to, abyś szukał w niej tego co akurat potrzebujesz, albo co uważasz za ciekawe. + +## Od czego zacząć? + +Na początku musisz ustalić tematykę strony - o czym będziesz pisać, jakie informacje powinny być na stronie. Jest to ważne, ponieważ aby zaprojektować stronę musimy wiedzieć, co będzie zawierała i jak "użytkownik" będzie z niej korzystał np. strona drużyny powinna zawierać ogólne info o drużynie i dane kontaktowe z drużynowym, aby rodzice mogli z łatwością się z nim skontaktować. Przeciwnie, strona zastępu raczej będzie opisywać zwyczaje i akcje zastępu ze zbiórek, aby pokazać jak zastęp jest super. + +### Projektowanie + +Jak już wiemy o czym będziemy tworzyć stronę to teraz musimy mniej więcej zaprojektować jak będzie wyglądać. Jest wiele szkół projektowania stron i trendy zmieniają się szybciej niż cośtam. To jest twoja strona więc jedyne co cię ogranicza to twoja wyobraźnia (no i pewnie jeszcze czas, który możesz poświęcić :P) + +Pamiętaj jednak, że im prościej tym łatwiej i czytelniej. Wielu "web-designerów" (czyt. łebdizajnerów) stara się wymyślać koło na nowo przez co strony co raz mniej przypominają strony, a czasami nawet bardziej złożone gry [1](https://bruno-simon.com/). Nie mówię, że to źle, bo piękno wolności polega na tym, że każdy może robić strony według własnych widzimisie, ale jest to przerost formy nad treścią i jest to zabieg mało praktyczny. + +Przypomnij sobie z poprzedniego rozdziału, jaka jest tematyka twojej strony. To właśnie historie ze zbiórek czy zdjęcia z akcji drużyny powinny treścią i najważniejszą częścią twojej strony. + +Najprościej zacząć projektowanie strony od kartki papieru. Rozrysuj jak ma wyglądać strona, gdzie będzie menu, jakich kolorów użyjesz, jakie zdjęcia wstawisz, gdzie będą relacje ze zbiórek. Do inspiracji możesz posłużyć się stroną naszej drużyny albo innymi stronami z internetu. Jest jednak kilka zasad które warto przestrzegać, albo przynajmniej być świadomymy, że się je łamie. + +#### 1. Kontrast + + + +## Jak stworzyć stronę internetową + +Zrobienie własnej strony internetowej jest banalnie proste i nie potrzebujesz wiedzieć jak działają sieci komputerowe. Wystarczy, że potrafisz obsługiwać swój komputer i tworzyć nowe pliki. + +Strona internetowa jest plikiem. Prawdopodobnie w szkole na lekcji informatyki już mieliście zajęcia o "HTMLu", więc część będziesz już kojarzył. + +## Teoria + +Żeby uruchomić swoją własną stronę internetową potrzebujemy zapoznać się trochę z teorią. W tym rozdziale dowiesz się jak w skrócie działa internet, czym tak naprawdę są strony internetowe i jakie błędy najczęściej są popełniane przy tworzeniu stron internetowych. + +### Internet + +Internet to niesamowita inicjatywa łączenia świata i ludzi + +### Czym jest strona internetowa? + +Strona internetowa to dokument, który ma konkretną treść + +### HTML + +``` +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Przykład</title> + </head> + <body> + <h1>Przykład</h1> + </body> +</html> +``` + +## Publikowanie + +Gdy już stworzymy naszą stronę, czas pokazać ją całemu światu. Fenomen internetu polega właśnie na tym, że każdy może dołożyć swoją cegiełkę. Strona internetowa żyje na serwerze, czyli na komputerze, który działa 24h na dobę. Obecnie jest wiele sposobów na postawienie swojej własnej strony internetowej, od uruchamiania własnego serwera gdzieś w narożniku piwnicy, po zakup ("wypożyczenie") instancji w profesjonalnej serwerowni. Są też rozwiązania "darmowe", ale najlepsze oferty zmieniają się z roku na rok i nie chcę się na ten temat tutaj rozpisywać (na rok 2021 mogę polecić https://pages.github.com/ i https://www.netlify.com/). + +## Ściąga + +W tej ściądze znajdziesz wszystkie przydatne tagi HTML i jak ich używać + +* `<b>` - pogrubiona czcionka (z ang. *bold*) + + To jest tekst <b>przykładowy</b>. + +* `<i>` - kursywa (z ang. *italics*) + + To jest <i>inny</i> tekst. + +* `<a>` - link (z ang. *anchor*), link jest przekazywany za pomocą atrybutu `href` + + Przykładowy link do <a href="https://puszcza.netlify.app">strony Puszczy</a> + +* `<img>` - zdjęcie (z ang. *img*), w `src` wstawiamy ścieżkę do zdjęcia, a w `alt` tekst który ma się pojawić w razie problemów z wyświetleniem zdjęcia + + <img src="fota.jpg" alt="Tekst alternatywny"> + + <img src="naszywka-19pdh-puszcza.jpg" alt="Zdjęcie naszywki drużyny"> + +### Listy + +Istnieją dwa rodzaje list: numerowane i nieuporządkowane. Elementy listy zawierają się w tagu `<li>` (z ang. *list item*) + +#### Lista numerowana - `<ol>`, z ang. *ordered list* + +``` +<ol> + <li>Pierwszy element</li> + <li>Drugi element</li> + <li>Ostatni element</li> +</ol> +``` + +#### Lista nieuporządkowane - `<ul>`, z ang. *unordered list* + +``` +<ul> + <li>Pierwszy element</li> + <li>Drugi element</li> + <li>Ostatni element</li> +</ul> +``` |