Dzień dobry!
Mam nadzieję, że Was wszystko w porządku.
Nie jest łatwo każdemu z nas. Nadal mamy taką sytuację, że musimy pracować zdalnie.
Podczas wysyłania załączników pamiętajcie, żeby podpisać się i napisać, z której jesteście klasy (część o tym pamięta – co mnie bardzo cieszy). Ta sama zasada obowiązuje, gdy wysyłacie prace innym nauczycielom .
Dziękuję, że staracie się pracować systematycznie i wykonywać moje wskazówki, aby prace były doskonalsze. Jednak są tacy na których musimy dłużej czekać – dlatego materiał może pojawiać się z małym opóźnieniem. Kontakt ze mną przez e-mail: ba13@wp.pl.
Dzisiaj dostajecie kolejną dawkę materiału i zadań do wykonania.
CZYTAJCIE UWAŻNIE WSZYSTKO I PO KOLEI – niczego nie omijajcie bo nie dacie rady wykonać zadań.
Czas na wykonanie zadań to 28 kwietnia 2020 r. (2 godziny lekcyjne) Proszę, żebyście dobrze zarządzali swoim czasem przy komputerze.
Temat: Tworzenie strony internetowej ciąg dalszy (lista, tabela, kolorystyka)
Po pierwsze musimy zrobić bardzo ważną rzecz o której nie powiedziałam w poprzednim materiale.
Pokazanie rozszerzeń plików w naszym systemie (i folderze Strona):
FILM INSTRUKTAŻOWY
Jak to zrobić w innym systemie Windows:
Otwieramy Eksploratora plików Organizuj Opcje folderów i wyszukiwania Zakładka Widok szukamy Ukryj rozszerzenia znanych typów plików (odznaczamy, jeśli mieliśmy v to go klikamy żeby znikł) Zastosuj OK
Poniżej kolejne kroki:
Jeśli macie to wszystko wcześniej zrobione to dobrze –
sprawdźcie tylko czy macie tak jak ja w swoim folderze Strona, jeśli tak to OK.
SPRAWDZENIE WYKONANIA POWYŻSZEGO POLECENIA
Proszę żebyście weszli do swojego folderu Strona i zobaczyli czy macie jak ja poniżej:
Otwieramy zapisany już nasz plik index.html w Notepad++ (prawym i Otwórz za pomocą wybieramy Notepad++ albo otwieramy Notepad++ Plik Otwórz szukamy folderu i klikamy index.html a może jak otworzycie Notepad++ to będzie ten plik otwarty jeśli go nie zamknęliście małym, białym krzyżykiem na czerwonym tle przy nazwie pliku).
Krótkie przypomnienie:
<!DOCTYPE HTML> - deklaracja typu dokumentu (Document Type Declaration), aby
przeglądarka wiedziała, że strona jest pisana w HTML 5
<title>Podróże po Polsce</title> Tytuł strony pojawia się na pasku strony (u góry)
5 krok 3 krok
4 krok 1 krok
2 krok
<meta charset=”UTF-8”> Ustawienie języka strony (UTF-8 obsługuje polskie znaki)
<p>Jakiś tekst</p> znacznik akapitu – paragrafu (czyli użycie ENTERA) 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.
Nagłówki: <h1> </h1>, <h2> </h2>, …, <h6> </h6>
Czcionka: <b> </b> - pogrubienie (działa też <strong> </strong>), <i> </i> (działa też
<em> </em>) - pochylenie (kursywa), <u> </u> - podkreślenie, <s> </s> - przekreślenie
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"> NIE MA ZNACZNIKA KOŃCOWEGO
UWAGA! Wielkość liter jest ważna w nazwach plików i w stosowaniu w kodzie.
rozmiar obrazka (wystarczy podać jeden: width (szerokość) lub height (wysokość))
<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)
Tyle mieliśmy ostatnio:
POPRAWCIE WSZYSTKIE BŁĘDY JEŚLI MIELIŚCIE NA TAMTEJ STRONIE!
Nowe informacje:
Poznamy nowe znaczniki:
lista uporządkowana (numeracja) <ol> </ol>
możemy też zmienić styl numeracji <ol type=”styl numeracji”> </ol>
style numeracji: 1, I, i, A, a, czy np. <ol type=”A”> </ol>
lista nieuporządkowana (wypunktowanie) <ul> </ul>
elementy w liście umieszczamy w znacznikach <li> </li>
Przykład listy
tabela – składa się z kolumn (pion – od góry do dołu) i wierszy (poziom – od prawej do lewej) <table> </table> (bez obramowań)
Przykład tabeli mającej 2 kolumny (znacznik pojedynczej komórki <td> </td>) i 4 wiersze (znacznik wiersza <tr> </tr>)
<table border=”1”> </table> (z obramowaniem = 1)
hiperłącze (odnośnik do innej stron, czy obrazka) <a href=”adres strony”> tekst (lub obrazek), na który klikamy</a>
Ta strona otworzy nam się w tej samej karcie co nasza strona, ale lepiej byłoby gdyby otworzyła się w nowej karcie – wystarczy atrybut target=”_blank” , natomiast atrybut
title=”kliknij a przejdziesz na stronę Sopotu” powoduje, że po wskazaniu odnośnika myszką, wyświetli się w "dymku" narzędziowym tekst pomocniczy.
EFEKT – FILMIK
Co musicie zrobić z tą stroną:
Na samym początku strony ma być wykonana tabelka, wyśrodkowana na stronie:
w której mamy w pierwszym wierszu pogrubione tytuły kolumn oraz mamy hiperłącze do strony danego miasta, które otwiera się w nowej karcie i jak najedziemy na miasto to pojawia się dymek z napisem strona np. Warszawy itp. (linki do stron kopiujemy z górnego paska przeglądarki)
Następny krok to:
Zapisać w folderze Strona jeszcze po jednym zdjęciu do każdego miasta.
Do Piotrkowa Trybunalskiego użyłam zdjęcia z linku poniżej zapisując go pod nazwą oltarz1:
https://s3.tvp.pl/images2/3/2/c/uid_32cc477b30961144adb83485cedd8c181542042006994_width_900_play_0_po s_0_gs_0_height_506.png
Teraz mój folder wygląda tak:
Gdy zapiszecie jeszcze po jednym zdjęciu do pozostałych miast, to będziecie mieli 9 wszystkich plików.
Podobnie jak ja uzupełniłam i poprawiłam kod w Piotrkowie Trybunalskim proszę, abyście uzupełnili pozostałe miasta (Piotrków też )
Kod o Piotrkowie Trybunalskim:
Natomiast strona wygląda tak:
Co zostało zmienione – przeanalizujcie sami (porównać i poprawić kod).
Na pewno:
dodany wykaz - co możemy zwiedzić w Piotrkowie Trybunalskim (użyta lista a nawet dwa rodzaje) – podobnie zróbcie w innych miastach
dodane hiperłącze na Klasztor oo. Bernardynów (otwiera się strona Klasztoru w nowej karcie) – też zróbcie to w pozostałych miastach
dodane drugie zdjęcie obok tego co było i wyśrodkowane oba zdjęcia (zwróćcie uwagę, że zmieniłam rozmiar zdjęcia – tylko określiłam wysokość na 250 pkt – same się dopasują szerokością) – podobnie zróbcie w pozostałych miastach.
Jeśli chodzi o kolor strony (wybieracie go sami – jaki chcecie, ale ma nie popsuć czytelności strony) to musicie w znaczniku <body> użyć atrybutu style:
, czyli może to wyglądać np.
lub
KOLORY w HTML - LINK (kody)
Aby wysłać, powinniście 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).
Plik Strona.zip odsyłacie na mojego e-maila ba13@wp.pl.
