HTML & CSS 1 Tell a Story Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy (ang.) co trzeba zrobić, by to zmienić. Wstęp W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz. Zadania do wykonania Przetestuj swój projekt Zapisz swój projekt Wykonaj te POLECENIA krok po kroku Kliknij na zieloną flagę, aby PRZETESTOWAĆ swój kod Teraz ZAPISZ swój projekt 1
Krok 1: Wybierz historyjkę Zanim zaczniesz kodować, potrzebna Ci będzie historyjka, którą można opowiedzieć. Zadania do wykonania 1. Zastanów się nad historyjką, którą chcesz opowiedzieć. Może to być na przykład: znana opowieść, wymyślona historia, historia, która przytrafiła się Tobie albo Twojemu znajomemu. To nawet nie musi być historia. Równie dobrze sprawdzi się żart, wiersz lub cokolwiek, na co masz ochotę! Krok 2: Edytowanie historii Zacznijmy od edycji treści HTML i stylów CSS na stronie z historyjką. Zadania do wykonania 1. Otwórz edytor: jumpto.cc/html-historyjka. Jeśli pracujesz online, możesz również posłużyć się wersją wyświetloną poniżej. 1. Może pamiętasz z projektu Happy Birthday, że zawartość strony internetowej zawiera się w <body> dokumentu HTML. Przejdź do 7. linii kodu, gdzie znajdziesz treść strony, która jest pomiędzy tagami <body>. 2
2. Czy potrafisz wskazać, które tagi użyte są do stworzenia poszczególnych części strony? <h1> to heading (nagłówek). Możesz użyć cyfr od 1 do 6, by stworzyć nagłówki różnych rozmiarów; <div> to skrót od division (sekcja) - służy grupowaniu treści razem. Na tej stronie użyjesz tego taga do grupowania treści w każdej części Twojej historyjki; <img> to image (obraz); <p> to paragraph (akapit) tekstu. 3
Wyzwanie: Wprowadź zmiany Wyedytuj kod HTML i CSS, by dostosować swoją stronę do swoich potrzeb. Możesz modyfikować kolorystykę i używać czcionek takich jak Arial, Comic Sans MS, Impact oraz Tahoma. Jeśli potrzebujesz pomocy, możesz skorzystać z projektu Happy Birthday. Zapisz swój projekt Krok 3: Opowiadanie historii Dodajmy do Twojej historii część drugą. Zadania do wykonania 1. Przejdź do 17. linii kodu i dodaj jeszcze jeden zestaw tagów <div> jako początek i koniec. W ten sposób powstanie wydzielona przestrzeń do następnej części 4
Twojej historii. 2. Dodaj akapit tekstu pomiędzy tagami <div>. 3. Możesz dodać obraz poprzez wprowadzenie poniższego kodu pomiędzy tagami <div> : <img src=""> Zauważ, ze tagi <img> nieco różnią się od pozostałych, ponieważ nie posiadają zakończenia. 4. Dla obrazów HTML niezbędne będzie dodanie source (źródła) obrazu pomiędzy cudzysłowami. Znajdźmy obraz do dodania do historii. Przejdź do: jumpto.cc/html-obrazki i znajdź obraz, który chciałbyś zamieścić w historii. 5. Kliknij prawym przyciskiem myszy na obraz, a następnie 5
wybierz skopiuj adres obrazu. 6. Wklej adres pomiędzy cudzysłowami w tagu <img>. Powinieneś móc zobaczyć swój obraz! 7. Jeśli masz konto w serwisie Trinket, możesz również załadować Twoje własne zdjęcia na swoją stronę internetową! By to zrobić, kliknij na ikonę obrazu na górze edytora, a następnie kliknij upload. 8. Znajdź na komputerze wybrane zdjęcie i przeciągnij je do edytora. 6
9. Później możesz po prostu dodać nazwę swojego nowego obrazu pomiędzy cudzysłowami w tagu <img>, tak jak poniżej: <img src="buildings.png"> Zapisz swój projekt 7
Wyzwanie: Nie zatrzymuj się! Wykorzystaj to, czego się nauczyłeś, by zakończyć opowiadanie swojej historii! Poniżej znajdziesz przykład: Zapisz swój projekt 8