Tworzenie strony w języku html w programie SUBLIME TEXT 3.0

1. Celem zadania jest wykonanie strony internetowej w czystym HTML 5.0 bez dodatków CSS 3.0.
2. Ćwiczenie to jest pierwszą częścią tematu: "Tworzenia stron www w technologii html5.0, css 3.0, javascript, php, mysql"
3. W tej części wykonamy stronę składającą się ze znaczników tylko kodu html 5.0
4. Pobieramy i instalujemy program sublime text 3.0 w nim bedziemy wykonywać projekt wszystkich części
5. Każda część podlegać będzie ocenie
6. link do pobrania edytora sublime https://www.sublimetext.com/3

Tworzenie strony www w HTML 5.0 - index.html

1. Tworzymy folder o nazwie imienazwisko np. na dysku c:\imienazwisko
2. Do utworzonego folderu zapisujemy nowy dokument index.html w edytorze sublime text - (ctrl+n, ctrl+s, oraz wybieramy nasz folder)
Tematem strony będzie "Serwis Rowerowy"

3. Zakładamy nową strukturę dokumentu html wpisując: "< ht" oraz enter

4. Kodujemy jak pokazano na obrazku, czyli dodajemy tytuł strony, oraz metaznaczniki do obsługi polskich znaków i języka "pl"

5. Dokładamy kilka nowych znaczników html 5.0 jak pokazano na obrazku

UWAGA !!!
Do pracy proszę dołączyć opis znaczników, napisanych ręcznie długopisem w zeszycie (robimy fotkę z opisu znaczników + podpis ucznia) : opis znaczników - header, section, article, nav, main, footer, a, form, input, figure, figcaption, img - opisy znajdziedzie na internecie jest tego sporo
6.Dodajemy do naszej strony opis dla "Serwisu rowego" oraz dodajemy tło na strone oraz kolor i styl czcionki w czystym html - opis proszę dać swój

7.Dodajemy menu na stronę za pomocą listy "ul li", które składa się z takich podstron jak: Strona Główna, Galeria, Oferta, Kontakt
Każde menu posiada link do odpowiedniej podstrony przez znacznik "a"

8.Tworzymy dokumenty do tego samego folderu co index.html takie jak: galeria.html, oferta.html, kontakt.html
9. Do sekcji "SERWIS OFERTA" dodajemy kod jak pokazano na brazku
Tutaj dodajemy zdjęcie oraz tabelę wraz z 3 wierszami, proszę tutaj dodać conajmniej 2 dodawkowe wiersze do tabeli
Zdjęcie rowera pobieramy z internetu i zapisujemy do folderu gdzie index.html, formatujemy do 200 px i nadajemy mu obramowanie

10. Powinniśmy uzyskać taką stronę

11. Dodamy kod html dla "Popularne marki rowerów" do opisu zdjęć marki posługujemy się znacznikiem "figure" oraz "figcaption"


12. Dodajemy kod html dla artykułu "Zakup nowego rowera"

13. Dodajemy kod html dla "Kiedy serwisować rower" oraz formatujemy znacznik footer

14. Dodajmy jeszcze filmik prezentacji kasku giant za "menu" naszej strony - mam nadzieje, że każdy potrafi udostępnić filmik z youtuba ;), trzeba kliknąć pod filmen który wybierzecie sobie na youtube - "udostępnij" a następnie "umieść" i całość wkleić jak pokazano poniżej

Tworzenie strony www w HTML 5.0 - kontakt.html

1. Przechodzimy do utworzonego dokumentu o nazwie kontakt.html
2. Tworzymy formularz zapytania do serwisu rowerowego oraz mapkę dojazdu, menu kopiujemy

3. Dodajemy mapkę google dojazdu do naszej firmy: ja wskazałem serwis rowerowy jakis z katowic aby nie było że kogoś promuję :), można dać swój ulubiony jesli taki macie ;)

4. Całość kontakt.html wygląda, proszę zwrócić uwagę, że link do strony głównej powinien działać poprawnie z menu i na odwrót

Tworzenie strony www w HTML 5.0 - galeria.html, oferta.html

1. Dokumenty takie jak: galeria.html, oferta.html proszę samodzielnie wykonać wzorując się na stronie index.html
Galeria.html powinna posiadać 9 różnych zdjęć rowerów, natomiast oferta.html tabelkę wraz z cenami 10 różnych rowerów

Za wszelkie uwagi i wyszukane błędy będę wdzięczny w celu poprawienia tutorialu
Dziękuję za uwagę w razie pytań proszę kontakt: informatyka@pszczyna.edu.pl