Dzień dobry!
Mam nadzieję, że czujecie się dobrze.
Nie jest to łatwy okres dla każdego z nas. Niestety zaistniała taka sytuacja, że musimy pracować zdalnie, ale jest tego plus – doświadczacie, że założone przez nas e-maile są potrzebne. Wykazujecie się umiejętnością wysyłania załączników. Pamiętajcie, że zawsze należy się podpisać i napisać, z której jesteście klasy (część o tym pamięta – co mnie bardzo cieszy). Ta sama zasada będzie obowiązywała, gdy będziecie wysyłali prace innym nauczycielom
Dziękuję, że pracujecie systematycznie i wykonujecie moje wskazówki, aby prace były doskonalsze. Kontakt ze mną przez e-mail: ba13@wp.pl.
Dzisiaj dostajecie kolejną dawkę materiału i zadań do wykonania.
Czas na wykonanie zadań to 8 kwietnia 2020 r. (2 godziny lekcyjne) Proszę, żebyście dobrze zarządzali swoim czasem przy komputerze.
Temat: Tworzenie strony internetowej z wykorzystaniem znaczników HTML
Po pierwsze musicie sobie zainstalować Notepad++, jeśli ktoś nie ma (instalacja lub dla 64-bit). Można też to pisać w zwykłym Notatniku, ale nie ma w nim kolorowania kodu (znaczników HTML), dlatego wybiera się różne programy, gdzie to kolorowanie występuje.
Po drugie jak uruchomicie program (pierwszy raz po zainstalowaniu) trzeba zamknąć kartę, która się pojawiła (mały krzyżyk) i pojawi się nowa karta .
PAMIĘTAJCIE! Każdorazowo jak będziecie zaczynali pisać stronę trzeba ustawić:
Format Koduj w UTF-8 oraz Składnia H HTML. FILMIK
Powyżej wspomniałam o znacznikach HTML – to ciąg znaków zapisany w nawiasach kątowych, np. <img src=”rysunek.png”>. Występują one zwykle parami znacznik początkowy
<znacznik> i końcowy </znacznik>. Jednak są znaczniki, które nie mają znacznika końcowego.
Zacznijmy pisać stronę w naszym programie.
Wpisujemy: znaczniki początkowy <html>, ENTER, ENTER i końcowy </html>, stajemy między nimi (w tym pustym miejscu) robimy wcięcie TABULATOREM i znowu znacznik początkowy <head>, ENTER, ENTER i końcowy </head>, ENTER, znacznik początkowy
<body>, ENTER, ENTER i końcowy </body>. Mamy szkielet naszej strony.
Jeszcze jedna rzecz, którą wpiszemy przed wszystkim – na samym początku.
<!DOCTYPE HTML> - deklaracja typu dokumentu (Document Type Declaration), aby przeglądarka wiedziała, że strona jest pisana w HTML 5
Zapiszemy sobie ten szkielet strony. Dobrze będzie jeśli wcześniej założycie sobie folder Strona w Dokumentach. W filmiku macie przykład zapisu pliku i założenia folderu.
Plik Zapisz jako… Wybieramy folder (lub go teraz zakładamy) Wpisujemy nazwę index.html (może też być index.htm) Zapisz
FILMIK
Teraz możecie zobaczyć jak wygląda strona. Wchodzicie w swój folder Strona i klikacie dwukrotnie index.html. Może pojawić się okno do wyboru programu w którym chcecie ją pokazać. Pamiętajcie, że musi to być przeglądarka (Edge, Chrome, Firefox, Opera itp.).
Oczywiście mamy piękną stronę, ale… pustą .
Trochę ją uzupełnimy. Teraz musimy wiedzieć o czym ma być strona. Jej tematem będą
„Podróże po Polsce”. Będziemy potrzebowali czterech zdjęć, które zapisujemy w naszym folderze Strona. Pamiętajcie o tym, że w kodzie ważne jest jak zapiszecie te zdjęcia, dlatego podaję nazwy (będzie łatwiej).
Warszawa – Złote tarasy (pod nazwą Warszawa)
https://live.staticflickr.com/1468/25473737036_49001ba06b_b.jpg
Piotrków Trybunalski – Klasztor oo. Bernardynów (pod nazwą Piotrkow)
https://upload.wikimedia.org/wikipedia/commons/3/3f/Piotrk%C3%B3w_Trybunalsk i_-_Klasztor_Bernardyn%C3%B3w.JPG
Kraków – Sukiennice widok z lotu ptaka (pod nazwą krakow)
https://upload.wikimedia.org/wikipedia/commons/1/18/Sukiennice_and_Main_Mar ket_Square_Krakow_Poland.JPG
Sopot – Krzywy domek (sopot)
https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Krzywy_Domek_w_S opocie.jpg/1200px-Krzywy_Domek_w_Sopocie.jpg
To teraz jeszcze kilka ciekawostek o niektórych znacznikach i ich atrybutach.
<p>Jakiś tekst</p> - znacznik akapitu (czyli użycie ENTERA) (robi odstęp między akapitami)
Stosujemy atrybut align, który może mieć kilka wartości (piszemy je w cudzysłowiu) np.
center – wyśrodkowanie, justify - wyrównanie do obu marginesów jednocześnie, left - wyrównanie do lewe, right - wyrównanie do prawej.
<br> - znacznik przejścia do nowej linijki (miękki ENTER, SHIFT+ENTER), to nie jest akapit (nie ma odstępu między nową linijką). Nie ma znacznika końcowego.
Zobaczmy jak to działa: FILMIK
Nagłówki
<h1> </h1> - nagłówek pierwszego poziomu
<h2> </h2> - nagłówek drugiego poziomu
…
<h6> </h6> - nagłówek szóstego poziomu Spróbujmy jak to działa FILMIK
Czcionka
<b> </b> - pogrubienie
<i> </i> - pochylenie (kursywa)
<u> </u> - podkreślenie
<s> </s> - przekreślenie
POĆWICZMY
Indeksy
<sup> </sup> - indeks górny (zapis czasu, potęg itp.)
<sub> </sub> - indeks dolny (np. A1, Pc itp.)
obrazek
<img src="Tu podajemy ścieżkę dostępu do zapisanego obrazka" alt="Tu podaj tekst alternatywny (gdyby nie wczytał obrazka)">
NIE MA ZNACZNIKA KOŃCOWEGO
Jak to będzie u nas? Obrazki/zdjęcia mamy w tym samym folderze co plik uruchamiający stronę więc:
<img src="Warszawa.jpg" alt="Zdjęcie Złotych tarasów">
<img src="Piotrkow.jpg" alt="Zdjęcie Klasztoru oo. Bernardynów">
<img src="krakow.jpg" alt="Zdjęcie z lotu ptaka">
<img src="………" alt="Zdjęcie ………..">
UWAGA! Wielkość liter jest ważna.
Wstawcie na stronie zdjęcia pod opisem FILMIK
Zdjęcia są bardzo duże, potrzebujemy ustawień rozmiaru
<img src="ścieżka do zdjęcia" alt="alternatywny tekst" width="x" height="y">
(x, y konkretny rozmiar w pikselach)
<img src="ścieżka do zdjęcia" alt="alternatywny tekst" width="x%" height="y%">
(x, y liczba procent)
Poprawmy nasze zdjęcia: FILMIK
Poprawiamy stronę, uzupełniamy no i zapisujemy (wszystkie wskazówki macie w filmie).
FILMIK
UZUPEŁNIENIE znacznika <head>
W pustym miejscu u góry (pomiędzy <head> i </head>) musicie wpisać dwie linijki:
<title>Podróże po Polsce</title>
<meta charset=”UTF-8”>
Tytuł strony pojawia się na pasku strony (u góry)
Ustawienie języka strony (UTF-8 obsługuje polskie znaki) Aby wysłać, musicie mieć całość w jednym pliku (folderu się nie wyśle), czyli musicie:
kliknąć prawym na folder Strona wybieracie Wyślij do Folder skompresowany (zip) Można zmienić nazwę lub ją zostawić (Strona.zip) no i ENTER (ten plik mi odsyłacie jako załącznik).
Ostateczny efekt:
Plik Strona.zip odsyłacie na mojego e-maila ba13@wp.pl.
