Wydawca: Psychoskok Kategoria: Edukacja Język: polski Rok wydania: 2018

Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, Wordpress ebook

Krzysztof Wołk  

1 (1)

Uzyskaj dostęp do tej
i ponad 25000 książek
od 6,99 zł miesięcznie.

Wypróbuj przez
7 dni za darmo

Ebooka przeczytasz w aplikacjach Legimi na:

e-czytniku kup za 1 zł
tablecie  
smartfonie  
komputerze  
Czytaj w chmurze®
w aplikacjach Legimi.
Dlaczego warto?
Czytaj i słuchaj w chmurze®
w aplikacjach Legimi.
Dlaczego warto?
Liczba stron: 88 Przeczytaj fragment ebooka

Odsłuch ebooka (TTS) dostępny w abonamencie „ebooki+audiobooki bez limitu” w aplikacji Legimi na:

Androida
iOS
Czytaj i słuchaj w chmurze®
w aplikacjach Legimi.
Dlaczego warto?

Ebooka przeczytasz na:

Kindlu MOBI
e-czytniku EPUB kup za 1 zł
tablecie EPUB
smartfonie EPUB
komputerze PDF
Czytaj w chmurze®
w aplikacjach Legimi.
Dlaczego warto?
Czytaj i słuchaj w chmurze®
w aplikacjach Legimi.
Dlaczego warto?
Zabezpieczenie: watermark Przeczytaj fragment ebooka

Opis ebooka Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, Wordpress - Krzysztof Wołk


"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ć.

Dopełnieniem tego podręcznika jest druga książka Krzysztofa Wołka – "Rzeczywistość wirtualna dla każdego", która zawiera sporą część informacji z Nowoczesnych stron, stanowiących podstawę i wprowadzenie do „wyższego wtajemniczenia”, jakim jest niewątpliwie kreowanie VR i korzystanie z urządzeń VR.

Warto więc wobec zainteresowania tematem obie pozycje wziąć pod uwagę.

Opinie o ebooku Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, Wordpress - Krzysztof Wołk

Fragment ebooka Nowoczesne strony WWW. HTML 5, CSS3, Adobe Muse, Wordpress - Krzysztof Wołk

WERSJA DEMONSTRACYJNA
Wydawnictwo Psychoskok Konin 2018

Krzysztof Wołk „Nowoczesne strony WWW. 

HTML 5, CSS3, Adobe Muse, Wordpress”

Copyright © by Krzysztof Wołk, 2018

Copyright © by Wydawnictwo Psychoskok Sp. z o.o. 2018

Wszelkie prawa zastrzeżone. Żadna część niniejszej publikacji nie

 może być reprodukowana, powielana i udostępniana w 

jakiejkolwiek formie bez pisemnej zgody wydawcy.

Projekt okładki: Krzysztof Wołk

Korekta: Bogusław Jusiak

Skład epub, mobi i pdf: Kamil Skitek

Krzysztof Wołk - www.wolk.pl

ISBN: 978-83-8119-294-1

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:wydawnictwo@psychoskok.pl

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 aplikacje Adobe Dreamweaver oraz Adobe Muse.

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://goo.gl/8aBNQ2.

1. Struktura HTML

1.1. Definiowanie struktury strony

1. Utwórz na dysku katalog „wypasionastrona”.

2. Otwórz program Adobe Dreamweaver CS6 i z menu Site wybierz New Site.

3. W wyświetlonym okienku wpisz nazwę witryny oraz wskaż miejsce położenia wcześniej utworzonego folderu „wypasionastrona”. 

4. Kliknij w „Save”.

5. Zlokalizuj panel Files w Adobe Dreamweaver. Będzie on pokazywał wszystkie pliki i katalogi, które umieścisz w folderze „wypasionastrona”, lecz pliki i foldery możesz tworzyć bezpośrednio w środowisku Dreamweavera. Będą one zapisywane właśnie w tym katalogu.

6. Utwórz pierwszą czystą stronę HTML o nazwie „index.html”. Z menu File wybierz New. W wyświetlonym okienku zaznacz opcje jak niżej. 

7. Zauważ, że w panelu Files pojawił się plik „index.html”. Będzie to nasza strona główna. Zawsze pierwszą stronę należy nazwać „index.html”.

8. Stwórz dodatkowe foldery na przyszłe dodatkowe pliki. Klikając w panelu Files prawym przyciskiem myszy w nazwę witryny, wybierz New folder. Stwórz cztery foldery o następujących nazwach:

a. „_assets”,

b. „_css”,

c. „_images”,

d. „_scripts”.

9. W tym momencie panel Files powinien wyglądać podobnie do tego poniżej. 

10. Sprawdź na dysku folder „wypasionastrona” – struktura odpowiada tej stworzonej w programie Dreamweaver.

11. Do poszczególnych folderów przekopiuj pliki znajdujące się w materiałach.

12. Po przekopiowaniu kliknij prawym przyciskiem myszy w nazwę witryny i wybierz Refresh. Powinieneś zobaczyć wszystkie pliki w panelu Files w odpowiednich katalogach.

1.2. Stworzenie podstawowej struktury strony

1. Kliknij dwukrotnie w „index.html”, aby otworzyć go do edycji.

2. W Dreamweaverze pracuj póki co w trybie Split z podglądem Live. 

3. Zobaczysz podstawową strukturę swojej strony HTML:  

4. Napisz coś pomiędzy znacznikiem otwierającym <body> a znacznikiem zamykającym </body>.

5. Po napisaniu fragmentu tekstu kliknij w okno podglądu po prawej stronie. Powinieneś zobaczyć swój tekst na stronie internetowej. Wszystko, co napiszesz w znacznikach <body>, jest widoczne w oknie przeglądarki. Sekcja <head> służy do umieszczania dodatkowych metainformacji, np. dla wyszukiwarek internetowych. Stronę można podejrzeć, otwierając ją w przeglądarce internetowej, rozwijając ikonkę i wybierając Preview in Firefox. Mogą tam pojawić się inne nazwy przeglądarek, w zależności od konfiguracji komputera, lecz rekomendowanymi przeglądarkami do pracy nad stronami są Firefox lub Google Chrome.

6. Dokument HTML składa się z zagnieżdżonych znaczników HTML. Każdy znacznik ma swoją nazwę i jest umieszczony pomiędzy znakami „<” oraz „>”, np. znacznik <body> lub <html>. Większość znaczników określa pewien zakres informacji, które są objęte tymi znacznikami. Z tego powodu większość znaczników posiada znaczniki otwierające i zamykające. Znaczniki zamykające są tak samo zbudowane jak otwierające, z tą różnicą że wstawiany jest znak „/” zaraz po „<”, czyli np. 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 „body” – tak jak wcześniej napisany przykładowy tekst.

7. Skoro pewne elementy są zagnieżdżone w sobie, warto tę strukturę wizualizować w postaci wcięć w kodzie. Pamiętaj, że jest to istotne z punktu widzenia przyszłego rozbudowywania serwisu. Wcięcia możesz robić, zaznaczając jakiś blok kodu i wciskając klawisz Tab (tabulator). Jeśli wciśniesz go wraz z klawiszem Shift, wcięcia będą się robiły w odwrotną stronę (usuwasz wcięcia).

8. Zrób wcięcia tak, aby było widać, które elementy i w jakich są zagnieżdżone. 

Powinno to wyglądać mniej więcej tak:

9. Strukturę takiej prostej strony można przedstawić następująco:

10. Oczywiście jest to najbardziej podstawowa struktura, jednak każdy, nawet najbardziej rozbudowany, serwis internetowy można przedstawić w ten sposób.

11. Pomiędzy „<” a „>”, oprócz nazwy znacznika, mogą znaleźć się dodatkowe parametry tego znacznika, np. powyżej znacznik <meta> ma dodatkowy parametr charset o wartości utf-8. Zapisuje się to tak: <meta charset=”utf-8”>, 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łowie.

12.  Da się zauważyć, że nie wszystkie znaczniki mają znaczniki zamykające. W powyższym przykładzie znacznik <meta> nie ma znacznika </meta>. Chodzi o to, że wszystkie niezbędne informacje zostały przekazane bezpośrednio w samym znaczniku w postaci parametrów. W tym przypadku chodziło o przekazanie, w jakim standardzie strona jest zakodowana – charset=utf-8.

13.  Ciekawostka: znaczniki, które nie wymagają domknięcia, w HTML 4 trzeba było domykać same w sobie, czyli np. dodając znak „/” na samym końcu: 

<meta charset=”utf-8” />. HTML 5 jest tolerancyjny – jeśli tego nie dodamy, nie będzie błędu.

14. Na koniec zmodyfikuj znacznik <title>. Definiuje on to, co pokazuje się w górnym pasku przeglądarki. Sprawdź, wciskając klawisz F12. Twoja strona powinna wyświetlić się w domyślnej przeglądarce internetowej.

1.3. Podstawowe elementy blokowe

1. Elementy blokowe to takie, które „rozpychają” się na całą szerokość elementu nadrzędnego – w naszym przypadku na całą szerokość okna przeglądarki. Wszystko, co jest po elementach blokowych, wyświetlane jest pod nimi.

2. Znaczniki <h1>, <h2>… </h6> definiują nagłówki strony (np. nagłówek artykułu). <h1> jest elementem najważniejszym, a co za tym idzie – wyświetlany jest największą czcionką.

3. Otwórz z FTP plik „cw01 – podglad.jpg”. Jest to podgląd całego ćwiczenia – jak powinno ono wyglądać na koniec tej lekcji. W podglądzie na czerwono zaznaczone są na czerwono typy znaczników, którymi zostały wykonane dane elementy.

4. Skonstruuj wszystkie znaczniki nagłówkowe (<h1>, <h2>, <h3>) znajdujące się w dokumencie.

5.  Element <p> definiuje paragraf tekstu. Na stronie http://pl.lipsum.com/ możesz wygenerować przykładowy tekst „lorem ipsum”, aby wstawić go na stronę.

6. Zdefiniuj w odpowiednich miejscach paragrafy tekstu, posługując się przykładowym „lorem ipsum”.

7.  Element <img> musi zawsze posiadać następujące parametry:

• src=”ścieżka dostępu do obrazka JPG, GIF lub PNG”;

• alt=”napis który pojawia się w momencie ładowania obrazka lub po przytrzymaniu kursora myszy nad obrazkiem”.

Przykład wstawienia obrazka może wyglądać tak:

<img src=”_images/foto.jpg” alt=”obrazek z wakacji”>.

8. Wstaw w dokumencie w odpowiednich miejscach obrazki – tak jak pokazano na podglądzie. 

9.  Podczas pisania znacznika img w Dreamweaverze program podpowiada fragmenty kodu. Gdy postawisz pierwszy cudzysłów po src=, możesz wybrać 

  i wskazać element w dowolnym katalogu w strukturze strony. Ważne, aby to był katalog należący do witryny!

10. Takie elementy listy, jak np.:

• pierwszy,

• drugi,

• trzeci,

definiuje się przy pomocy znacznika <ul>, a następnie poszczególne elementy przy pomocy znacznika <li>. Taka przykładowa lista mogłaby wyglądać następująco:

<ul>

<li>pierwszy</li>

<li>drugi</li>

<li>trzeci</li>

</ul>.

11. Stwórz listy w odpowiednim miejscu – tak jak na podglądzie.

12.  Na podglądzie elementy listy są w kolorze fioletowym i podkreślone. Ponadto w podglądzie występuje napis „więcej” i również jest podkreślony. Są to linki odsyłające do innych stron, lecz w tym przypadku są to już elementy liniowe, o których mowa w następnym rozdziale.

1.4. Podstawowe elementy liniowe

1. Elementy blokowe układają się jeden na drugim. Czasami jednak chcemy np. wyróżnić fragment tekstu lub wstawić w tekście odnośnik i nie chcemy, aby elementy spadały niżej, lecz były wyświetlane w tej samej linii.

2. Element <a> jest odnośnikiem do innej strony, innej witryny bądź innego miejsca na tej samej stronie. Może przyjmować takie parametry:

a. href=”adres strony lub witryny do, której linkujemy”;

b. target=”_blank” – link otworzy się w nowej karcie przeglądarki. Jeśli nie wstawisz tego parametru, link otworzy się domyślnie w tym samym oknie;

c. Przykład odnośnika linkującego do strony wp.pl może wyglądać następująco:

<a href=http://www.wp.pl target=”_blank”>kliknij tutaj aby przejść do wp.pl</a>;

d. Czy to, co wpiszesz lub umieścisz pomiędzy elementami <a> i </a>, będzie klikalne i odnosiło do tego, co napiszesz w parametrze href.

3. Spraw, aby wszystkie elementy w listach były odnośnikami. Póki nie mamy gotowej witryny, w miejsce href wstawiaj hash (znak „#”).

4. Następnie zaraz po elemencie <p> w odpowiednim miejscu (według podglądu) wstaw odnośnik „więcej”.

5. Element <b> pogrubia tekst, a element <i> robi z niego kursywę, choć tak naprawdę wygląd elementów, jak np. pogrubienie czy kursywa, powinno się uzyskiwać za pomocą arkuszy stylów, o których będzie mowa w następnych zajęciach. W HTML 5 często stosuje się dodatkowe znaczniki semantyczne, a więc takie, które nie mówią nic o tym, jak element ma wyglądać, ale o tym, co on oznacza. W HTML 5 substytutami <b> oraz <i> są elementy <strong> oraz <em>. Oznaczają one, że pewien fragment jest „istotny”. Większość przeglądarek wyświetla takie „istotne” fragmenty jako pogrubienie i kursywę, jednak nie musi tak być. Standard się rozwija i w przyszłości <strong> nie musi być pisany boldem, tylko np. większą czcionką w innym kolorze.

6. Zastosuj do wybranych fragmentów tekstu elementy <strong>, <em> i <a>.

2. Znaczniki semantyczne

1. Zanim przejdziemy do omawiania znaczników semantycznych, uzupełnijmy stronę o pozostałe elementy, aby kontent „wypasionej” strony był adekwatny do tego, co widać na screenie „opisana struktura.jpg” w katalogu „_assets”.

2. Otwórz w Dreamweaverze witrynę „cw 03 – start”. W tym katalogu znajduje się poprawnie wykonane ćwiczenie z poprzednich zajęć. 

3. Na naszej stronie brakuje sekcji „Dołącz do nas” widocznej na screenie. Napisz ją zaraz pod nagłówkiem <h1>Wypasiona strona</h1>:

a. Napis „Dołącz do nas!” powinien być nagłówkiem <h2>.

b. Napis „jesteśmy na:” powinien być paragrafem <p>.

c. Ikonki social media powinny być odnośnikami.

4. Jeśli porównasz to, co zrobiliśmy na poprzednich zajęciach, z tym, co jest na screenie, zauważysz, że brakuje jeszcze pola wyszukiwarki. Wyszukiwarka jest bardzo prostym formularzem. W HTML formularze definiuje się przy pomocy znacznika <form>. To, co jest pomiędzy znacznikami <form>, definiuje zawartość tego formularza. W szczególności może to być pole do wprowadzania danych – znacznik <input>. Przepisz zaraz za elementem </ul> definiującym strukturę menu poniższy kod dla wyszukiwarki:

Znaczniki semantyczne to takie, które nadają znaczenie zarówno ludziom, jak i maszynom (przeglądarkom internetowym). Znaczniki semantyczne służą właśnie do nadawania znaczenia poszczególnym elementom strony. Na początku wybór odpowiednich znaczników może być dość trudny. Weźmy dla przykładu nagłówki, których jest sześć: <h1>, <h2>… <h6>. W przeglądarce <h1> jest największy, a <h6> najmniejszy.

Zawartość <h1> powinna być bardziej istotna niż np. zawartość <h3>. Z drugiej strony istnieje możliwość zmiany ich wielkości wyświetlania. Bez problemu można uczynić znacznik <h3> większym od <h1>. Z perspektywy przeglądarki internetowej nie stanowi to różnicy, ale jeśli człowiek spojrzy na kod, za pierwszym razem może być zaskoczony i zmylony – element <h3> nie powinien być większy niż <h1>.

Po lewej stronie jest zaprezentowana symbolicznie strona w XHTML, a po prawej w HTML 5.

2.1. Wstęp do znaczników HTML 5

Możesz myśleć o znacznikach HTML 5, że są zorganizowane według takich kategorii:

• Metadata kontent

• Flow kontent

• Sectioning kontent

• Heading kontent

• Phrasing kontent

• Embedded kontent

• Interactive kontent

Metadata kontent

Zawartość, która ustanawia zachowanie całej zawartości strony. Używa się jej do połączenia dokumentu HTML z innymi dokumentami, np. CSS. Np. element <meta> lub elementy <style> lub <scripts>. Elementy metadata kontent są zlokalizowane w sekcji <head>.

Sectioning kontent

Ta kategoria jest nowa w HTML 5 i zawiera takie elementy, jak: <article>, <aside>, <nav> czy <section>. W3C wyjaśnia sectioning kontent jako „defining the scope of headings and footers”, czyli że mogą zawierać nagłówki i stopki (może być ich więcej na stronie).

KONIEC WERSJI DEMONSTRACYJNEJ
Dziękujemy za skorzystanie z oferty naszego wydawnictwa i życzymy miło spędzonych chwil przy kolejnych naszych publikacjach.