temat: tworzenie stron internetowychdarmowe narzędzia ułatwiające tworzenie stron internetowych:...
TRANSCRIPT
![Page 1: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/1.jpg)
Temat:
Tworzenie stron internetowych
![Page 2: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/2.jpg)
1. Jak stworzyć stronę internetową
Język HTML
(ang. HyperText Markup
Language)- najstarszy język budowy strony
internetowej - 1991 rok
![Page 3: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/3.jpg)
Język HTML
(ang. HyperText Markup
Language) – to język, który za
pomocą znaczników lub inaczej
tagów opisuje strukturę strony
i jej zawartość.
![Page 4: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/4.jpg)
STRONA INTERNETOWA – wygląd w przeglądarce
![Page 5: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/5.jpg)
ŹRÓDŁO STRONY INTERNETOWEJ – język HTML
![Page 6: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/6.jpg)
Plik strony internetowej zapisany
w języku HTML może posiadać
rozszerzenie:
html np. index.html
htm np. index.htm
![Page 7: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/7.jpg)
Narzędzia twórców stron
internetowych:
- edytor tekstu
- przeglądarka internetowa
- znajomość języka HTML
![Page 8: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/8.jpg)
Darmowe narzędzia ułatwiające
tworzenie stron internetowych:- Notatnik (system Windows)
- Notepad++
- Atom
- Brackets
- Gedit
Inne…
Systemy zarządzania treścią CMS:- Joomla
- Wordpress
- Drupal
Inne..
Dla bardziej zaawansowanych:
![Page 9: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/9.jpg)
Notatnik – system Windows
Program znany dla uczniów z tworzenia
stron internetowych w szkole
podstawowej
Przykładowy
kod języka HTML
WADA:
brak przejrzystości
(znaczniki i ich składnie
zlewają się!)
![Page 10: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/10.jpg)
Notepad++(darmowy program licencja GNU)
Przykładowy
kod języka HTML
ZALETA:
przejrzystość
znaczników i ich składni
![Page 11: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/11.jpg)
![Page 12: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/12.jpg)
2. Poznajemy język HTML
Budowa znaczników w języku HTML
<a> znacznik otwierający
…… kod html
</a> znacznik zamykający
PRZYKŁAD:<p>Ten wyraz jest <b> pogrubiony</b></p>
lub<p>Ten wyraz jest <strong> pogrubiony</strong></p>
<p>Ten wyraz jest <strong>pogrubiony</strong></p> <p>Ten wyraz jest <b>pogrubiony</b></p>
![Page 13: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/13.jpg)
Kod tworzenia hiperłącza do strony
www.nowaera.pl
![Page 14: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/14.jpg)
Przypomnienie ze SP..
<H1> … </H1> .. <H6> … </H6>
<B> … </B>
<I> … </I>
<U> … </U>
<HR> …</HR>
<TABLE>…</TABLE>
<TR>…</TR>
<TD>…</TD>
<A HREF=„………”> … </A>
<IMG SRC=„……..”>
![Page 15: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/15.jpg)
Struktura kodu strony
internetowej
Zawartość strony WWW
Pomiędzy znacznikami
<html> i </html>
![Page 16: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/16.jpg)
CZEŚĆ (SEKCJA)
HEAD pomiędzy
znacznikami
<head> i </head>
Zawartość strony WWW
Pomiędzy znacznikami
<html> i </html>
Struktura kodu strony
internetowej
![Page 17: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/17.jpg)
CZEŚĆ (SEKCJA)
HEAD pomiędzy
znacznikami
<head> i </head>
CZEŚĆ (SEKCJA)
BODY pomiędzy
znacznikami
<body> i </body>
Zawartość strony WWW
Pomiędzy znacznikami
<html> i </html>
Struktura kodu strony
internetowej
![Page 18: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/18.jpg)
Struktura kodu strony internetowej
CZĘŚĆ (SEKCJA) HEAD:- tytuł strony
- słowa kluczowe dla wyszukiwarek
- informacje o sposobie kodowania
znaków
- linki do zewnętrznych linków
- style
- skrypty
![Page 19: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/19.jpg)
Tytuł strony pokazywany w przeglądarce
internetowej po uruchomieniu strony
<TITLE>Tytuł strony</TITLE>
CZĘŚĆ (SEKCJA) HEAD:
![Page 20: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/20.jpg)
<Meta>
Tzw. Metadane strony internetowej informacje opisujące dokument HTML
CZĘŚĆ (SEKCJA) HEAD:
![Page 21: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/21.jpg)
Struktura kodu strony internetowej
CZĘŚĆ (SEKCJA) BODY (to co użytkownik widzi w przeglądarce):
- tekst
- zdjęcia
- tabele
- filmy
- linki
- itp.
![Page 22: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/22.jpg)
Podstawowa struktura
strony internetowej
![Page 23: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/23.jpg)
Podstawowa struktura strony internetowej
![Page 24: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/24.jpg)
Ćwiczenie 1
- Na pulpicie załóż folder StronaWWW
- W dowolnym edytorze tekstu utwórz nowy plik
i zapisz go pod nazwą index.html w katalogu
StronaWWW
- Sprawdź czy rozszerzenie zapisanego pliku jest
poprawne
![Page 25: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/25.jpg)
Ćwiczenie 2
- W pliku index.html utworzonym w Ćwiczeniu 1
wpisz kod podstawowej struktury strony
internetowej
- W części BODY wpisz wybrany przez siebie tekst
- Zapisz plik i uruchom go w przeglądarce
![Page 26: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/26.jpg)
Pobierz i zainstaluj Notepad++(darmowy program licencja GNU)
Pobierz i zainstaluj program Notepad++
Link1 - TUTAJ
Link2 - TUTAJUWAGA: Przy pobieraniu i instalowaniu programu nie instaluj dodatkowo,
niepotrzebnych 2 programów! Czytaj co pobierasz i instalujesz.
![Page 27: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/27.jpg)
Notepad++
Menu górne
Składnia
HTML
Wszystkie znaczniki
oraz ich składnie będą
oznaczone kolorami
![Page 28: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/28.jpg)
Ćwiczenie 3
- W programie Notepad++ utwórz nowy plik
i zapisz go pod nazwą index1.html w katalogu
StronaWWW
- Sprawdź czy rozszerzenie zapisanego pliku jest
poprawne
![Page 29: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/29.jpg)
Notepad++
Zapisz plik html:
Menu górne
Plik
Zapisz jako
Zapisz jako typ
![Page 30: Temat: Tworzenie stron internetowychDarmowe narzędzia ułatwiające tworzenie stron internetowych: - Notatnik (system Windows) - Notepad++ - Atom - Brackets - Gedit Inne… Systemy](https://reader035.vdocuments.site/reader035/viewer/2022062610/611728504a76ac4baf2bd747/html5/thumbnails/30.jpg)
Ćwiczenie 4
- W pliku index1.html utworzonym wpisz kod
podstawowej struktury strony internetowej
- W części BODY wpisz wybrany przez siebie tekst
- Zapisz plik i uruchom go w przeglądarce