Tworzenie strony w języku html w programie SUBLIME TEXT 3.0 - dokładamy arkusz styli CSS 3.0

1. Celem zadania jest wykonanie strony internetowej w HTML 5.0 wraz z arkuszem CSS 3.0.
2. Ćwiczenie to jest drugą częścią tematu: "Tworzenia stron www w technologii html5.0, css 3.0, javascript, php, mysql"
3. W tej części wykonamy stronę dodając do kodu html 5.0 arkusz styli css
4. Całość zadania wykonujemy w programie sublime text 3.0 jak poprzednio, w nim bedziemy wykonywać projekt wszystkich części
5. Każda część podlegać będzie ocenie
6. link do pobrania edytora sublime jeśli ktoś jeszcze nie ma ;)https://www.sublimetext.com/3

Tworzenie arkusza styli css 3.0 o nazwie: style.css

1. Tworzymy nowy dokument "style.css" do tego samego folderu co mamy zapisany index.html z pierwszej części projektu "Serwis Rowerowy"
2. Kodujemy dokument "style.css", usuwamy: marginesy i marginesy wewnętrzne znaczników html oraz body. Strona rozpoczyna się od punktu x=0, y=0, czyli lewy górny punkt okna przegladarki bez żadnych marginesów.

3. Łączymy index.html z arkuszem style.css w części "head" pliku index.html

4. Kodujemy w arkuszu styli: style.css "< h1>" Serwis Rowerowy "< /h1>". Uwaga ! usuwam znacznik "< center>" z kodu oraz znacznik zamykający "< /center>" z pliku index.html

5. Uzyskujemy wygląd strony

6. Kodujemy w style.css menu
w pierwszej kolejności z index.html usuwam: "< h3>Menu< /h3>"

7.teraz koduje znacznik "nav" następnie "ul" i "li" w pliku style.css



8. dalej zmieniamy kod w index.html

9. dodajemy teraz kod dla "header p" do style.css

10. Uzyskujemy następujący efekt

11. Zmieniamy wygląd środka w index.html

12. Dodajemy kod do style.css

13. Widok dla tych zmian

Zadanie do samodzielnego wykonania

1. Jak zauważyliście resztę kodu zostawiamy bez zmian w index.html
2. Zadanie polega ta tym aby utworzyć pozostałe dokumenty html: galeria, kontakt, oferta tak samo jak stronę główną - menu i baner ( czyli wszystkie podstrony mają to samo menu i baner ;) )
Dodaj swój kod css arkusza styli aby również formatował pozostałe elementy (zdjęcia, formularz, mapka itd..) które posiada galeria.html, kontakt.html, oferta.html
3. Wszystkie dokumenty z menu odwołują się do tego samego pliku: style.css
4. Poniżej podaję kurs CSS Pana Mirosława Zelenta zanim wykonacie ćwiczenie
LINK do kursu CSS Pana Mirosława Zelenta

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