Nowoczesne strony WWW. HTML5, CSS3, Wordpress. Wydanie IITekst

0
Recenzje
Przeczytaj fragment
Oznacz jako przeczytane
Jak czytać książkę po zakupie
Czcionka:Mniejsze АаWiększe Aa

Krzysztof Wołk

Nowoczesne strony WWW. HTML5, CSS3, Wordpress.

Wydanie II


Wydawnictwo Psychoskok

Konin 2021

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

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:


Wszystko co zostanie umieszczone pomiędzy elementami <a> </a> będzie klikalne i będzie prowadziło do elementu umieszczonego w parametrze href.

Element <b> odpowiada za pogrubienie tekstu, a element <i> kursywę, czyli pochylenie tekstu.

Zadanie

Przyjrzyj się podglądowi całego ćwiczenia na obrazku, który znajduje się stronę niżej. Na czerwono zostały zaznaczone typy znaczników, za pomocą których zbudowane są dane elementy. Skonstruuj więc samodzielnie te wszystkie znaczniki. Tekst Lorem Ipsum weź ze strony http://pl.lipsum.com/, nie przepisuj go. W odpowiednich miejscach zdefiniuj paragrafy, wstaw odnośniki i jako adres odnośnika wpisz na razie #, adresy uzupełnimy już w trakcie wykonywania kolejnych ćwiczeń, gdy strona będzie się rozrastać np. <a href=”#”></a>. W odpowiednim miejscu wstaw obrazek. Pamiętaj o odpowiednich ścieżkach i katalogach. Gdzie potrzeba stwórz listy, a następnie spraw by wszystkie ich elementy były odnośnikami.

Nie zapomnij zapisać rezultatu prac. Będzie niezbędny w kolejnych ćwiczeniach.


Rozdział 02 – Znaczniki semantyczne

UWAGA!

Nagłówki w kodzie mogą się różnić względem poprzedniego zadania, należy zatem odpowiednio je dostosować aby otrzymać odpowiedni outline strony.

1. Wstęp

Otwórz plik startowy strony (index.html) w programie Adobe Dreamweaver, jest to poprawnie wykonane ćwiczenie z poprzednich zajęć. Dodatkowo chcielibyśmy, aby na stronie pojawił się malutki formularz wyszukiwania. Do tworzenia formularzy służy znacznik <form> . To co znajdzie się pomiędzy znacznikami <form> oraz </form> definiuje zawartość danego formularza. Może się tam znaleźć znacznik <input> , który definiuje pole do wprowadzania danych. Przepisz zatem następujący kod, który definiuje strukturę wyszukiwarki. Nie zapomnij o dodaniu atrybutu alt przy ikonie wyszukiwarki.


Rezultat powinien być następujący:


2. Znaczniki semantyczne – czym są?

Są to znaczniki, które są ważne zarówno dla ludzi jak i dla przeglądarek internetowych. Służą zatem do nadawania konkretnego znaczenia poszczególnym elementom strony. Przykład jest bardzo prosty, mianowicie weźmy pod uwagę tagi dla nagłówków, których jest w sumie 6: <h1> - <h6>. Nagłówek z najmniejszą cyfrą (1) ma największą czcionkę, z największą cyfrą (6) ma najmniejszą.


Co za tym idzie nagłówek <h1> jest ważniejszy od nagłówka, który ma większą wartość, np. nagłówka <h4>. Oczywiście bez problemu da się sprawić, że znacznik <h3> będzie większy od znacznika <h1>. Jednak z perspektywy człowieka, który spojrzy na kod strony, może to być mylące, gdyż element <h3> nie powinien być większy od elementu <h1>

3. Znaczniki w HTML5

Znaczniki w HTML5 można podzielić na następujące kategorie:

1) Meta data kontent

2) Flow kontent

3) Sectioning kontent

4) Heading kontent

5) Phrasing kontent

6) Embedded kontent

7) Interactive kontent

Meta data kontent

Stanowi ją zawartość, która ustala zachowanie całej strony, czyli między innymi połączenie dokumentu z arkuszami styli (CSS), czy skryptami (JS). Elementy te mieszczą się w sekcji <head> strony internetowej.

Sectioning kontent

Mieszczą się w niej elementy takie jak:

<article> - element podobny do znacznika <section>, zawierać może np. cały artykuł, a także znaczniki <header> oraz <footer>

<aside> - znacznik ten można zastosować np. dp grupy reklam czy elementów, które odnoszą się do stron zewnętrznych.

 

<nav> - nawigacja, czyli taka główna struktura linków na stronie, która powinna zostać stworzona za pomocą listy. Główna nawigacja na stronie, gdyż przy pozycjonowaniu strony, traktowana jest jako ta główna nawigacja na całej stronie.

<section> - taki element grupuje podobne do siebie elementy, zazwyczaj z nagłówkiem. Można więc zgrupować na przykład wpisy, newsy itp. Należy go stosować przede wszystkim wtedy, gdy dana sekcja dokumentu ma się pojawić w spisie treści pod konkretną nazwą (outline strony). Może zawierać znaczniki <header> oraz <footer>.

<h1> - <h6> - nagłówki

Powyższe elementy tworzą one osobne sekcje na stronie.

Heading kontent

Zawiera opisane już wcześniej znaczniki nagłówków oraz znacznik <hgroup> służący do grupowania więcej niż jednego znacznika nagłówka. Znacznik <hgroup> jest bardzo rzadko używany.

Embedded kontent

Zawiera elementy importujące różne zasoby na stronę, np.obrazki, wideo itp.

Interactive kontent

Zawiera wszystkie elementy interaktywne, czyli na przykład znacznik <a>, albo <textarea> czy <input>.

Znacznik <div> służy do dzielenia strony na sekcje po to, aby dało się potem łatwo formatować ich wygląd poprzez arkusz styli.

4. Elementy, które nie tworzą sekcji – nie są widoczne na outline

W tej grupie zawierają się elementy takie jak:

<header> - jest to element, który wprowadza do elementu tworzącego sekcję, np. nagłówki

<h1> itp.

<footer> - reprezentuje stopkę

Zadanie

Spójrz teraz na poniższy layout strony, tak może wyglądać docelowo, jak już przejdziemy przez wszystkie ćwiczenia.


Zastanów się, w jaki sposób można by go pociąć ze względu znaczenie, czyli semantykę.

Oczywiście nie biorąc pod uwagę wyglądu strony, tylko znaczenia poszczególnych jej części jak np. nagłówek, menu, stopka itp.

Następnie korzystając ze znaczników:

<section>

<article>

<nav>

<aside>

<header>

<footer>

Obuduj odpowiednie części wcześniej napisanego kodu w odpowiednie znaczniki. Spójrz na poniższy podział strony.


5. OUTLINE

Outline przedstawia ważność elementów na stronie internetowej, ale także zależność pomiędzy nimi – czyli taki jakby spis treści.

Outline tworzą elementy, które należą do sectioning kontent. Obecnie outline jest bardzo ważny dla osób, które są niewidome i korzystają z tak zwanych screen readerów. Na przykład reader nie musi takiej osobie za każdym razem czytać tego, co znajduje się w znaczniku <nav> po przejściu do kolejnej podstrony.

Poniżej przykładowy outline dla bardzo prostego kodu:

<body>

<header>

<h1>Witaj na stronie</h1>

<p>Jest to przykładowa strona! </p>

</header>

<nav>

<h2>Menu strony</h2>

</nav>

<section>

<h2>News</h2>

<h3>Dzisiejsze ćwiczenie z HTML wydaje się być bardzo proste</h3>

</section>

</body>

Outline tej strony wyglądałby następująco:

1. Witaj na stronie

1. Menu strony

2. News

1. Dzisiejsze ćwiczenie z HTML wydaje się być bardzo proste

W przykładzie jak wyżej znaczniki <nav> oraz <section> tworzą nowe sekcje w outline, a nazwy ich pochodzą z nagłówków znajdujących się w tych sekcjach, a co za tym idzie nagłówki nabierają większego znaczenia na stronie. HTML5 pozwala na dodawanie nagłówków do każdej utworzonej sekcji na stronie, zatem różne sekcje mogą mieć różną hierarchię dla nagłówków. Co się stanie z outline jak sekcja nie będzie posiadała nagłówka? Poniżej przykład:

<body>

<header>

<h1>Witaj na stronie</h1>

<p>Jest to przykładowa strona! </p>

</header>

<nav>

</nav>

<section>

<h2>News</h2>

<h3>Dzisiejsze ćwiczenie z HTML wydaje się być bardzo proste</h3>

</section>

</body>

Outline tej strony wyglądałby następująco:

1. Witaj na stronie

1. Untitled NAV

2. News

1. Dzisiejsze ćwiczenie z HTML wydaje się być bardzo proste

W tym przykładzie nawigacja została nienazwana, co może stanowić problem głównie dla osób korzystających ze screen readerów.

Zadanie

W ramach ćwiczenia stwórz outline jak poniżej i przetestuj go na stronie http://gsnedders.html5.org/outliner/


Teraz, skoro już wiemy w jaki sposób działa outline strony, musimy zadbać o odpowiedni outline dla naszej Zielonej strony. Skopiuj zatem kod strony do http://gsnedders.html5.org/outliner/ i sprawdź, jak wygląda outline strony. Popraw odpowiednie elementy tak, aby wyświetlał się poprawnie. Oczywiste jest, że dla każdej sekcji muszą zostać zdefiniowane odpowiednie nagłówki. Outline dla Zielonej strony powinien wyglądać w sposób następujący:


Jeśli Twój outline jest poprawny, wygląda tak jak powyżej. Oczywiście elementy outline są widoczne w podglądzie strony. Jak sprawić by stały się niewidoczne dowiemy się innym razem.

Wygląd strony, po prawidłowym wykonaniu zadania:





Бесплатный фрагмент закончился. Хотите читать дальше?