temat: tworzenie stron internetowych · 4. pozycjonowanie stron www wyszukiwarki internetowe...
TRANSCRIPT
![Page 1: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/1.jpg)
Temat:
Tworzenie stron internetowych
(3 lekcja)
![Page 2: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/2.jpg)
Podstawowe znaczniki:- nagłówki
- akapity
- linia pozioma
- grafika
- hiperłącza
- tabele
- komentarze
- listy (uporządkowane i nieuporządkowane)
Z ostatnich zajęć…
![Page 3: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/3.jpg)
4. Pozycjonowanie stron WWW
Proces analizowania treści
strony nazywa się
indeksowaniem
Wyszukiwarka w krótszym czasie
pokaże wynik wyszukiwania
(szeregują strony od najtrafniejszych)
![Page 4: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/4.jpg)
4. Pozycjonowanie stron WWW
Pozycjonowanie wszelkie
działania prowadzące do tego, aby
zdobyć i utrzymać możliwie jak
najwyższe miejsce w wynikach
wyszukiwania
![Page 5: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/5.jpg)
4. Pozycjonowanie stron WWW
Ważne?
T A K – z uwagi na
wyszukiwarki internetowe
![Page 6: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/6.jpg)
4. Pozycjonowanie stron WWW
Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-
nie, które przeszukują strony interne-
towe m.in. pod względem charakteru,
jakości, treści, bezpieczeństwa itp.
Proces bardzo złożony i trwający wiele miesięcy.
Sztuką jest to, aby strona wysokie pozycjonowa-
nie!
![Page 7: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/7.jpg)
4. Pozycjonowanie stron WWW
np. pozycjonowanie Google (darmowe i płatne)
![Page 8: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/8.jpg)
4. Pozycjonowanie stron WWW
Znaczniki mające wpływ na indeksowanie
(treść i strukturę):
Nagłówki <h1> ….. <h6>
Tytuł strony <title> ….</title>
Grafika <img> atrybut alt
![Page 9: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/9.jpg)
4. Pozycjonowanie stron WWW
Opis strony <meta>
oraz atrybut description
![Page 10: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/10.jpg)
5. Kolory na stronach WWW
Zmiana kolorów na stronie
internetowej tekst, linie w tabeli,
obramowania, wypełnienia, tła.
RGB (ang. Red, Green, Blue
czerwony, zielony, niebieski)
![Page 11: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/11.jpg)
5. Kolory na stronach WWW
Model RGB (ang. Red, Green, Blue
czerwony, zielony, niebieski)
Kolor w modelu RGB można opisać
na 2 sposoby:
- tryb RGB, np. rgb (124, 252, 0)
- tryb szesnastkowy np. #7cfc00
![Page 12: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/12.jpg)
5. Kolory na stronach WWW
Przykład:
![Page 13: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/13.jpg)
5. Kolory na stronach WWW
https://www.w3schools.com/colors/colors_picker.asp
![Page 14: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/14.jpg)
5. Kolory na stronach WWW
Wyszukiwarka Google fraza ”color picker”
![Page 15: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/15.jpg)
5. Kolory na stronach WWW
![Page 16: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/16.jpg)
6. Style CSS
CSS (ang. Cascading Style Sheets) –
kaskadowe arkusze stylów
Najpopularniejszy sposób tworzenia
stron internetowych.
![Page 17: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/17.jpg)
6. Style CSS
link do
zewnętrznego
pliku style.css
![Page 18: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/18.jpg)
Źródło strony plik
index.html
Zewnętrzny plik
style.css
![Page 19: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/19.jpg)
Źródło przykładowej strony:
link do
zewnętrznego
pliku style.css
![Page 20: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/20.jpg)
style.css zewnętrzny plik
tworzony np. w notatniku
![Page 21: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/21.jpg)
6. Style CSS
![Page 22: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/22.jpg)
Ćwiczenie
PLIKI:
index.html (edytuj plik i dopisz link w sekcji HEAD
zapisz stronę i zobacz efekt końcowy)
style.css
![Page 23: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/23.jpg)
Ćwiczenie - Wygląd strony bez CSS
![Page 24: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/24.jpg)
Ćwiczenie - Wygląd strony z CSS
![Page 25: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/25.jpg)
![Page 26: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/26.jpg)
Rodzaje selektorów
![Page 27: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/27.jpg)
Rodzaje selektorów
![Page 28: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/28.jpg)
7. Responsywność stron WWW
Strony internetowe, które zoptymalizowano pod kątem
wyświetlenia na różnych urządzeniach, nazywamy
responsywnymi
![Page 29: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/29.jpg)
7. Responsywność stron WWWSkalowanie obrazu i ekranu
Rozmiar czcionki
Skalowanie obrazu i ekranu
![Page 31: Temat: Tworzenie stron internetowych · 4. Pozycjonowanie stron WWW Wyszukiwarki internetowe wykorzystują specjalne oprogramowa-nie, które przeszukują strony interne-towe m.in](https://reader033.vdocuments.net/reader033/viewer/2022050513/5f9d5ae39bcbd47faa63b7f3/html5/thumbnails/31.jpg)
Sprawdzenie kodu HTML