Cele lekcji:
1. Ogólne zasady projektowania stron
2. Podstawy języka html
3. Stworzenie prostej strony w języku html
-------------------------------------------------
Odszukaj swój folder Moja pierwsza strona w html. W folderze powinny znajdować się trzy pliki strona1.html, strona2.html, strona3.html. (Jeśli nie masz trzech plików to wróć do lekcji poprzedniej)
1. Zmień nazwę strony strona1.html na index.html
Uwaga! Pierwsza strona witryny powinna nazywać się index.html. Przeczytaj dlaczego?>>
2. Otwórz swoje pliki index.html, strona2.html, strona3.html za pomocą notatnika.
W tym celu kliknij prawy klawisz myszy na pliku i wybierz otwórz za pomocą... następnie z listy wybierz Notatnik (jeśli na liście nie ma Notatnika poproś o pomoc nauczyciela)
3. W każdym pliku zmień kolor tła.
W tym celu w kodzie htlm w sekcji body musisz wpisać:
<body bgcolor="red">
Wypróbuj różne kolory: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, cyjan, lub kolor w notacji szesnastkowej np. #8C007B (tabela kolorów w notacji heksadecymalnej czyli szesnastkowej >>)
4. W sekcji body umieść linię.
W miejscu, w którym chcesz, aby się pojawiła wpisz
<hr size=4 width=80% align=center>
5. Pod linią wstaw obrazek.
Skopiuj z Internetu do swojego folderu Moja pierwsza strona w html dowolne trzy obrazki i nazwij je: obrazek1.jpg, obrazek2.jpg, obrazek3.jpg.
W sekcji body wpisz:
<img src="obrazek1.jpg" width=600 height=480> lub <img src="obrazek1.jpg" width=448 height=336>
6. Wstaw hiperłącza czyli odnośniki lub linki:
na stronie 1 do strony 2 i 3
na stronie 2 do strony 1 i 3
na stronie 3 do strony 1 i 2
W tym celu w sekcji body wpisz:
Na stronie 1:
<a href="strona2.html">Idź do strony 2</a><a href="strona3.html">Idź do strony 3</a>
Na stronie 2:
<a href="index.html">Wróć do strony 1</a><a href="strona3.html">Idź do strony 3</a>
A co wpiszesz na stronie 3?
Zadanie dodatkowe:
Jeśli wykonałeś/łaś powyższe zadania możesz przejść do zadania dodatkowego:
Korzystając z samouczka >> wprowadź dowolne elementy na swoją stronę.
Brak komentarzy:
Prześlij komentarz