5,99 €
Mehr erfahren.
- Herausgeber: Wydawnictwo Psychoskok
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Polnisch
"Nowoczesne strony WWW" Krzysztofa Wołka to podręcznik do samodzielnego tworzenia własnej wizytówki w Internecie, a nawet czegoś więcej – kreowania swojej obecności w sieci. Koniec ze zlecaniem tego typu prac. Koniec z „czarną magią”, która – jak każda magia – okazała się do perfekcji doprowadzoną umiejętnością jak każda inna.
Projektowanie własnej strony, które jeszcze nie tak dawno wydawało się przedsięwzięciem zarezerwowanym dla wtajemniczonych (programistów) stało się teraz dziecinnie proste, intuicyjne jak obsługa smartfona. Wystarczy skorzystać z istniejących szablonów, tzn. wybrać sobie taki, który najbardziej się spodoba, i dopasować go do swoich potrzeb. Nie znaczy to wcale, że strona ma wyglądać jak miliony czy miliardy innych (jak w Facebooku). Inwencja zawsze pozostanie w cenie, a chęć wyróżnienia się z tłumu chyba jest wpisana w ludzkie DNA.
Już na podstawie spisu treści przewodnika ułożonego w stylu „krok po kroku” łatwo się zorientować w tematyce, której wcale nie trzeba ogarniać (tzn. rozumieć), a wystarczy ją po prostu zastosować zgodnie z instrukcją.
Autor nie poprzestaje na przekazaniu podstawowych wiadomości, jak to ma miejsce zwykle w podręcznikach, ale przedstawia czytelnikom narzędzia, dzięki którym – jeśli tylko chcą – mogą wspiąć się na sam szczyt.
Kiedyś mówiono, że co niezapisane, nie istnieje. Później, że nie istnieje ten, kto nie ma własnej strony WWW albo konta na Facebooku. Nie wszyscy jednak chcą być znalezieni. Ci mogą sobie darować lekturę książki Wołka. Ci natomiast, którym zależy na własnym wizerunku, a tym bardziej ci, którzy wykorzystują Internet jako narzędzie pracy – sposób na życie, środek do realizacji swoich pragnień, poznawania świata czy nawet zarabiania – powinni sięgnąć po "Nowoczesne strony WWW", by posiąść wiedzę oraz umiejętności umożliwiające realizację zamierzeń.
Tym bardziej że autor nie poprzestał na standardowych stronach internetowych, ale część swojej pracy poświęcił na przedstawienie ich dopełnienia, jakim z pewnością są blogi umożliwiające przekazywanie opinii, poglądów, a także szybkie interakcje z czytelnikami/użytkownikami. Skupił się przede wszystkim na darmowym systemie blogowym WordPress, ale nie pominął opcji płatnych, ekskluzywnych, stwarzających użytkownikom więcej możliwości.
Jeśli nawet nie ma się wrażenia, że świat tradycyjnych mediów (prasy, radia, telewizji) przeminął, Internet – który jeszcze ich nie zastąpił – zmienił i wciąż zmienia ten świat. A nade wszystko jest bardziej egalitarny. Jak w Hyde Parku każdy może siebie wyrazić, jeśli chce i potrafi. A jeśli ma co wyrazić (coś ciekawego), ktoś może się tym zainteresować.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Veröffentlichungsjahr: 2021
Ähnliche
Krzysztof Wołk „Nowoczesne strony WWW. HTML5, CSS3, Wordpress. Wydanie II”
Copyright © by Krzysztof Wołk, 2021
Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2021
Wszelkie prawa zastrzeżone.
Żadna część niniejszej publikacji nie
może być reprodukowana, powielana i udostępniana
w jakiejkolwiek formie bez pisemnej zgody wydawcy.
Redaktor prowadząca: Renata Grześkowiak
Projekt okładki: Krzysztof Wołk
Skład epub, mobi i pdf: Kamil Skitek
ISBN: 978-83-8119-785-4
Wydawnictwo Psychoskok Sp. z o.o.
ul. Spółdzielców 3, pok. 325, 62-510 Konin
tel. (63) 242 02 02, kom. 695-943-706
http://www.psychoskok.pl/http://wydawnictwo.psychoskok.pl/ e-mail:[email protected]
Część 1. HTML5 + CSS3
Wstęp
Z lektury niniejszej publikacji dowiesz się w sposób bardzo praktyczny, oparty na ciekawych przykładach prosto z życia wziętych jak możesz stworzyć od podstaw swoją pierwszą stronę internetową, korzystając z najnowszych technologii. Będzie to HTML 5, CSS 3, Wordpress oraz aplikacja Adobe Dreamweaver.
Aplikacja Dreamweaver nie jest wymagana, wystarczy dowolny edytor tekstowy np. Notepad++, który posiada kolorowanie składni.
Dzięki lekturze stworzysz strony www, które będą responsywne oraz będą posiadały efekt paralaksy. Nauczysz się ręcznie z poziomu kodu modyfikować strony tworzone w generatorach.
Materiały znajdziesz pod adresem:
https://drive.google.com/drive/folders/1QgT3rvFb723WtAE-XqoJefJ0pALYzb6j?usp=sharing
Rozdział 01 – Wstęp, elementy blokowe i liniowe
1. Interfejs użytkownika
Na początek otwieramy Adobe Dreamweaver i wybieramy opcję File > New (Plik > Nowy).
Wybieramy typ pliku i dajemy mu tytuł, który oczywiście potem można zmienić, klikamy przycisk Create (Utwórz).
Po włączeniu programu prawdopodobnie zobaczymy tylko okno z kodem. Dlatego też będziemy musieli włączyć kilka różnych opcji, aby widzieć zachodzące na przykład na stronie zmiany.
Na początek włączamy View > Split > Code-Live(Widok > Podziel > Kod - Aktywny).
Okno powinno zostać podzielone na pół. Górna połowa będzie przedstawiała rezultat kodu napisanego w dolnej połowie.
Włączamy jeszcze opcję DOM. Window > DOM (Okno > DOM).
Opcja ta pozwala na późniejsze sprawniejsze poruszanie się po kodzie.
Przydatne może również okazać się okienko FILES, pozwalające na sprawne poruszanie się po plikach znajdujących się na komputerze. Zwłaszcza, jeśli pracujemy na własnym sprzęcie.
Obydwa te okienka możemy sprawnie przypiąć do prawej krawędzi programu przytrzymując je za górną krawędź i przeciągając je w odpowiednie miejsce.
Następnie warto włączyć paski narzędziowe Window > Toolbars > Standard (Okno > Paski narzędziowe > Standardowy).
Włączy się pasek jak na obrazku poniżej:
Pasek ten również można przypiąć do okna programu, przeciągając go w odpowiednie miejsce.
Po przypięciu wygląda następująco:
Następnie włączamy pozostałe paski narzędzi ( Window > Toolbars > Common, a także Document) ( Okno > Paski narzędziowe > Wspólny oraz Dokument).
Tak jak poprzednie elementy należy je przypiąć do interfejsu.
Fajne jest też okienko Insert które można włączyć klikając Window > Insert (Okno > Wstaw).
Pozwala ono wstawiać elementy HTML w sposób uproszczony, po prostu przeciągając element, bez pisania odpowiedniego kodu.
2. Zapisywanie pliku
Na początek konieczne będzie stworzenie folderu dla strony internetowej, nazwij go po prostu STRONA. W folderze STRONA zrób jeszcze dwa foldery: css oraz jpg. Nowy plik zapisz w folderze STRONA, klikając na File > Save As.
Otwiera się okno zapisywania pliku. Wybierz w nim swój wcześniej stworzony folder, a plikowi nadaj nazwę index.html, tak nazywa się stronę główną.
3. Podstawowa struktura strony internetowej
Podstawowa struktura strony tak naprawdę została wczytana w momencie utworzenia nowego pliku HTML w Dreamweaverze.
Wszystkie elementy, które są widoczne na stronie zawsze dodajemy pomiędzy znacznikami <body> </body>. Zatem wszystko, co zostanie dodane pomiędzy znacznikami body, będzie widoczne później w oknie przeglądarki. Sekcja <head> służy tylko do umieszczania dodatkowych meta-informacji np. dla wyszukiwarek internetowych. Stronę można podejrzeć w przeglądarce (widoczne są tu tylko przeglądarki zainstalowane na danym komputerze), klikając na ikonce Preview w dolnym pasku programu. Poleca się używanie Google Chrome.
Dokument HTML składa się z zagnieżdżanych znaczników HTML. Każdy taki znacznik ma swoją nazwę i jest mieści się pomiędzy znakami „<” i „>”. Np. znacznik <body> lub <html>. Zazwyczaj znacznik jest otwierający i zamykający. Znacznik zamykający oznacza miejsce, w którym działanie danego znacznika wygasa. W znaczniku zamykającym zazwyczaj po znaku < znajduje się ukośnik / a następnie kolejny znak >. Większość znaczników ma określone informacje, które obejmuje. Dla przykładu znacznik otwierający <body> posiada swój znacznik zamykający </body>. Wszystko co znajdzie się pomiędzy tymi dwoma znacznikami będzie należało do sekcji „body”. Przykładowo wpiszmy dowolne zdalnie pomiędzy znacznikami <body>.
Zarówno w podzielonym ekranie aplikacji, jak i w oknie przeglądarki przy wybraniu opcji Podgląd, powinno zostać wyświetlone napisane przez nas zdanie.
Jeszcze odnośnie kodu. Skoro niektóre elementy są w sobie zagnieżdżane, to dla porządku i ułatwienia sobie pracy warto stosować odpowiednie wcięcia w kodzie. Wcięcia można zrobić zaznaczając blok kodu i wciskając na klawiaturze TABULATOR. Usuwanie wcięć to zaznaczenie kodu i wciśnięcie kombinacji klawiszy SHIFT + TABULATOR.
Zatem zrób wcięcia w kodzie tak, aby było widać które elementy w jakich są zagnieżdżone.
Powinno to wyglądać mniej więcej tak:
Pomiędzy „<” a „>”, oprócz nazwy znacznika mogą znaleźć się dodatkowe PARAMETRY tego znacznika. Jak np. powyżej znacznik <meta> ma dodatkowy parametr
o wartości
Zapisuje się to tak
a więc nazwy znaczników oraz nazwy parametrów piszemy bez cudzysłowów. Natomiast wartości parametrów zawsze starajmy się umieszczać w cudzysłowach.
Nie wszystkie jednak znaczniki mają swoje znaczniki zamykające. Na przykład znacznik
nie ma znacznika
, głównie dlatego, że wszystkie niezbędne informacje zostały już przekazane w samym znaczniku w postaci odpowiednich parametrów.
W tym konkretnym przypadku zostało przekazane w jakim standardzie jest zakodowana strona, czyli
Zmodyfikuj teraz znacznik
, który definiuje to, co wyświetlane jest w górnym pasku przeglądarki internetowej.
4. Podstawowe elementy blokowe
Elementy blokowe, to są takie, które zajmują całą szerokość elementu nadrzędnego, czyli w tym przypadku całą szerokość okna przeglądarki. Wszystko, co jest po elementach blokowych, jest wyświetlane pod nimi.
Znaczniki <h1> , <h2> itp. Posiadają również znacznik zamknięcia np. </h1> , </h2> i definiują one nagłówki strony, np. nagłówek artykułu. <h1> jest najważniejszym elementem, a co za tym idzie wyświetlany jest największą czcionką.
Element <p> to paragraf tekstu.
Korzystając ze strony https://pl.lipsum.com/ można wygenerować przykładowy tekst tzw. Lorem ipsum, po to, aby wstawić go na stronę.
Element <img>, czyli wstawianie obrazka musi zawsze posiadać następujące elementy:
1) src=”ścieżka do obrazka najczęściej w formacie JPG, PNG lub GIF”
2) alt=”napis, który wyświetlany jest w momencie ładowania obrazka lub po przytrzymaniu kursora myszy nad nim”. Parametr alt jest też pewnego rodzaju udogodnieniem dla osób niewidomych, korzystających z interfejsu głosowego. Wtedy mają możliwość choć w pewnym stopniu domyślić się co było na obrazku, po jego opisie.
Przykładowe wstawienie obrazka może wyglądać tak:
<img src=”img/foto.jpg” alt=”to ja i mój pies”>
Ważne jest to, aby wszystkie obrazki znajdowały się w odpowiednich folderach należących do strony.
Element listy jak na przykład wypunktowanie, numeracja definiuje się przy użyciu znacznika <ul> , a pojedyncze elementy listy przy pomocy znacznika <li>. Przykładowy kod listy może wyglądać następująco:
A rezultat tak:
5. Podstawowe elementy liniowe
Elementy blokowe jak już wcześniej wspomniano układane są jeden pod drugim, jednak czasem istnieje potrzeba wyróżnienie fragmentu tekstu albo wstawienie odnośnika do jakiejś strony i nie chcemy by elementy spadały niżej, a wyświetlane były dalej w tej samej linii.
Element <a> to odnośnik do innej strony, czy innego miejsca na naszej stronie i może przyjmować następujące parametry:
- link zostanie otwarty w nowej karcie przeglądarki. Jeśli ten parametr nie zostanie wstawiony, to strona zostanie domyślnie otwarta w tym samym oknie.
Przykładowy odnośnik może wyglądać następująco:
A w przeglądarce rezultat będzie następujący:
