Temat 42. Tworzenie stron WWW – podstawowe informacje
Poniżej znajduje się fragment tematu. Z pełną wersją zapoznasz się w podręczniku Informatyka 1-3.
Wszelkie prawa zastrzeżone. Wszystkie treści na stronie dlaucznia.migra.pl chronione są prawami autorskimi. Dowiedz się więcej.
- Przypomnij pojęcia: strona WWW, witryna internetowa, adres WWW.
- Za pomocą jakich narzędzi można tworzyć strony internetowe?
1. Jak zapisana jest strona WWW?
Zaznacz narzędzia, które mogą posłużyć do utworzenia prostej strony WWW:
Ćwiczenie 1. Porównujemy wygląd witryn
Ćwiczenie 2. Oglądamy źródło strony
2. Blogi
Blog jest rodzajem strony internetowej. Podstawową zaletą takiej metody publikowania treści w Internecie jest łatwość korzystania z niej. Do prowadzenia blogu nie jest wymagana znajomość protokołów sieciowych, języków programowania, nie trzeba też mieć odpowiednich programów narzędziowych – wystarczy przeglądarka internetowa, w której na odpowiedniej stronie WWW, wpisuje się i formatuje teksty notatek.
Jest wiele serwisów oferujących możliwość darmowego prowadzenia blogów, np. https://pl.wordpress.org/, https://www.blogi.pl/, https://www.blogger.com/about/, https://pl.wix.com/start/jak-zalozyc-bloga.
Ćwiczenie 3. Szukamy w Internecie blogów o wybranej tematyce
3. Systemy zarządzania treścią
Bardziej rozbudowane w stosunku do blogów są systemy zarządzania treścią (CMS – z ang. Content Management System). Systemy zarządzania treścią to zarówno programy komercyjne, jak i dostępne bezpłatnie, np. Joomla!, Drupal, WordPress – rozpowszechniane na licencji GNU GPL. Niektóre programy mogą być przeznaczone do konkretnych zastosowań, np. MediaWiki – do tworzenia encyklopedii.Ćwiczenie 4. Szukamy wybranych serwisów internetowych
4. Szablony do tworzenia stron
Szablon jest pewnego rodzaju szkieletem składającym się z zaprojektowanych stron i podstron. Szablony są często tak przygotowane, żeby można je było łatwo dopasować do potrzeb klienta, np. do różnych rodzajów działalności. W Internecie są dostępne szablony stron internetowych – zarówno wersje darmowe, jak i odpłatne: https://pl.webnode.com/szablony/, https://pl.wix.com/website/templates, https://www.squarespace.com/templates, https://www.canva.com/websites/templates/
5. Stosowanie podstawowych znaczników języka HTML
Przykład 1. Stosowanie atrybutu align
<p align="center">Wyrównanie akapitu do środka strony</p>
<h1>Tytuł pierwszego poziomu</h1>
<h2>Tytuł drugiego poziomu</h2>
<h3>Tytuł trzeciego poziomu</h3>
<h4>Tytuł czwartego poziomu</h4>
<h5>Tytuł piątego poziomu</h5>
<h6>Tytuł szóstego poziomu</h6> Wyrównanie akapitu do środka strony
Tytuł pierwszego poziomu
Tytuł drugiego poziomu
Tytuł trzeciego poziomu
Tytuł czwartego poziomu
Tytuł piątego poziomu
Tytuł szóstego poziomu
<h1 align="center">Tytuł</h1> spowoduje wyśrodkowanie tytułu względem szerokości strony.
Uwagi:
• Domyślnie (jeżeli nie użyjemy atrybutu align) akapity i tytuły wyrównywane są do lewej strony.
• W języku HTML wartości atrybutów wpisuje się w znakach cudzysłowu.
Ćwiczenie 5. Zapisujemy kod źródłowy strony w programie Notepad++
- Utwórz folder o nazwie Strona, w którym zapiszesz swoją stronę WWW.
- Uruchom program Notepad++ i przepisz kod strony podany na rysunku 2a w podręczniku lub pobierz i uzupełnij plik:
Pobierz index.html - Wyjaśnij znaczenie znaczników umieszczonych w kodzie, wykorzystując wiadomości z lekcji informatyki ze szkoły podstawowej.
- Zapisz kod strony w pliku o nazwie index.html w folderze Strona i otwórz go w przeglądarce internetowej.
Lista uporządkowana ma postać:
<ol>
<li>Element listy uporządkowanej</li>
<li>Element listy uporządkowanej</li>
...
</ol> - Element listy uporządkowanej
- Element listy uporządkowanej
Lista nieuporządkowana ma postać:
<ul>
<li>Element listy nieuporządkowanej</li>
<li>Element listy nieuporządkowanej </li>
...
</ul> - Element listy nieuporządkowanej
- Element listy nieuporządkowanej
Ćwiczenie 6. Dodajemy do strony listę nieuporządkowaną, listę uporządkowaną i poziomą linię
Przydatne linki
Program Notepad++
https://notepad-plus-plus.org/downloads/
Przykładowe serwisy do tworzenia stron WWW (wersje darmowe i odpłatne):
https://pl.wordpress.org/
https://www.joomla.pl/
https://www.drupal.org/
https://pl.webnode.com/
https://pl.wix.com/explore/websites
https://app.site123.com/?aff=370034&sid=PL-843909&l=pl&landingSystem=1#
https://www.squarespace.com/
https://www.jimdo.com/examples/
Podziel się swoimi sugestiami do tego tematu
Cały czas się rozwijamy i zależy nam, aby treści dostosować do oczekiwań nauczycieli i uczniów. Masz sugestię do tego tematu? Napisz do nas:
