doc5. Listy i tabele
download 
Reklamacja Transkrypt
5. Listy i tabele
Zajęcia nr 5
Strony internetowe - HTML
Listy i tabele
W swoim folderze utwórz folder o nazwie HTML, wszystkie dzisiejsze
zadania wykonuj w tym folderze.
Przechodzimy do zadań na dziś:
Miłej zabawy i POWODZENIA!!
LISTY
Zad 1.
1.
2.
3.
4.
Utwórz folder o nazwie LISTY.
W folderze LISTY stwórz kolejny folder o nazwie STANDARDOWA.
Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
W części <body> zapisz poniższy kod: (staraj się robić podobne wcięcia)
Lista numerowana (standardowa)
<OL>
<LI> Pierwszy element listy</LI>
<LI> Drugi element listy</LI>
<LI> Trzeci element listy</LI>
</OL>
Lista wypunktowana (standardowa)
<UL>
<LI> Pierwszy element listy</LI>
<LI> Drugi element listy</LI>
<LI> Trzeci element listy</LI>
</UL>
5.
Zapisz plik pod nazwą lista1.html i otwórz w przeglądarce.
Wszystkie elementy <ol>, <ul> i <li> możesz wyklikać z menu SZABLONY,
zakładka XHTML rozdział LISTY.
<ol> </ol> - oznacza rozpoczęcie/zakończenie listy wynumerowanej
<ul> </ul> - oznacza rozpoczęcie/zakończenie listy wypunktowanej
<li> </li> - oznacza kolejny punkt w liście
Zad 2.
1.
2.
3.
4.
W folderze LISTY stwórz kolejny folder o nazwie OPCJE.
Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
Skopiuj z poprzedniego zadania kod z listami wypunktowanymi
Dodaj style zewnętrzne o nazwie style2.css :
i. Pod linijką zaczynającą się od słów <meta …>
ii. Wstaw kursor wciśnij klawisze Ctr+B i Z a następnie mi „ ” wpisz nazwę pliku: style2.css
5. Zapisz plik pod nazwą lista2.html
Tworzymy style!!
6. Otwórz pusty plik (biała karteczka)
7. Zapisz go w tym samym folderze co lista2.html pod nazwą style2.css i pozmieniaj odpowiednio ustawienia:
a. Z okna SZABLONY z zakładki CSS:
i. wybierz rozdział SELEKTORY -> LISTY -> selektor UL: następnie wstaw kursor między {}
ii. wybierz rozdział LISTY -> LIST-STYLE-TYPE a następnie: list-style-type: lower-roman;
iii. Postaw kursor na samym końcu strony (poza nawiasami {} )
iv. wybierz rozdział SELEKTORY -> LISTY -> selektor OL: następnie wstaw kursor między {}
v. wybierz rozdział LISTY -> LIST-STYLE-TYPE a następnie: list-style-type: square;
vi. Postaw kursor na samym końcu strony (poza nawiasami {} )
b. Zapisz plik i zobacz co zmieniło się w stronie (Otwórz lista2.html za pomocą przeglądarki)
Zad 3.
1.
2.
3.
W folderze LISTY stwórz kolejny folder o nazwie ZAGNIEZDZONA.
Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
W części <body> zapisz poniższy kod: (staraj się robić podobne wcięcia)
<OL>
<LI> Pierwszy element listy</LI>
<UL>
<LI> Pierwszy element listy</LI>
<LI> Drugi element listy</LI>
<LI> Trzeci element listy</LI>
</UL>
<LI> Drugi element listy</LI>
<UL>
<LI> Pierwszy element listy</LI>
<LI> Drugi element listy</LI>
</UL>
<LI> Trzeci element listy</LI>
</OL>
4.
Zapisz plik pod nazwą lista2.html i otwórz w przeglądarce.
Tabele
Zad 4.
1.
2.
3.
4.
Utwórz folder o nazwie TABELE.
W folderze TABELE stwórz kolejny folder o nazwie DANE.
Otwórz Noth’a i stwórz pustą stronę ctr+ B i 1
W części <body> zapisz poniższy kod: (staraj się robić podobne wcięcia)
<table>
<tr>
<th>imie</th><th>nazwisko</th><th>wiek</th>
</tr><tr>
<td>Wojtek</td><td>Kowalski</td><td>13</td>
</tr><tr>
<td>Anna</td><td>Nowak</td><td>14</td>
</tr><tr>
<td>Michał</td><td>Rodak</td><td>14</td>
</tr>
</table>
5.
6.
Zapisz plik pod nazwą tabela.html i otwórz w przeglądarce.
Dodaj style zewnętrzne do tabela.html
i. Pod linijką zaczynającą się od słów <meta …>
ii. Wstaw kursor wciśnij klawisze Ctr+B i Z a następnie mi „ ” wpisz nazwę pliku: style.css
Tworzymy style!!
8. Otwórz pusty plik (biała karteczka)
9. Zapisz go w tym samym folderze co tabela.html pod nazwą style.css i pozmieniaj odpowiednio ustawienia:
a. Z okna SZABLONY z zakładki CSS:
i. wybierz rozdział TABELA -> TABELA. Zapisz i zobacz efekt za pomocą przeglądarki
ii. Zmieńmy jeszcze kolory i wielkość tabeli: w części td i th dopiszmy dwie linijki:
background-color: wybierz kolor;
padding: 10px;
10. I z części table usuńmy linijkę: border-collapse: collapse;
11. Zapisz i obejrzyj zmiany.
