Sprawdź się

Pokaż ćwiczenia:

Ćwiczenie 1

R49FWKSPxzvS7

Zdecyduj czy zdanie jest prawdziwe.
Ten sam identyfikator możemy nadać kilku różnym elementom. Możliwe odpowiedzi: 1. prawda, 2. fałsz

Ćwiczenie 2

RdpJ8xp4Y2oQY

Połącz w pary atrybuty z odnośnikami. id Możliwe odpowiedzi: 1. ., 2. # class Możliwe odpowiedzi: 1. ., 2. #

Ćwiczenie 3

RCaLHYSPGRKGj

Uzupełnij tekst. Za pomocą CSS możemy manipulować elementami strony związanymi z tłem i kolorem. Używamy do tego odpowiednich atrybutów:

1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – wypełnimy tło kolorem;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – ustawimy wielkość tła;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – wskażemy pozycję tła;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – oznaczymy adres obrazu.

Uzupełnij tekst. Za pomocą CSS możemy manipulować elementami strony związanymi z tłem i kolorem. Używamy do tego odpowiednich atrybutów:

1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – wypełnimy tło kolorem;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – ustawimy wielkość tła;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – wskażemy pozycję tła;
1. background-picture, 2. back-img, 3. back-pos, 4. background‑image, 5. back-size, 6. background‑position, 7. background‑color, 8. background‑size, 9. back-color – oznaczymy adres obrazu.

Ćwiczenie 4

Zapoznaj się ze źródłem i wykonaj ćwiczenie.

Linia 1. otwórz nawias ostrokątny p zamknij nawias ostrokątny 1 kropka Element listy 1 kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny p zamknij nawias ostrokątny 2 kropka Element listy 2 kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny p zamknij nawias ostrokątny 3 kropka Element listy 3 kropka otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny.

<p>1. Element listy 1.</p>
<p>2. Element listy 2.</p>
<p>3. Element listy 3.</p>

RUwk1CIgejCdJ

Wyjaśnij, jaki jest problem z kodem. (Uzupełnij).

Kod nie jest semantyczny.

Ćwiczenie 5

R838svy9bZ4aA

Wymyśl pytanie na kartkówkę związane z tematem materiału.

Linia 1. otwórz nawias ostrokątny ol zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny li zamknij nawias ostrokątny Element listy 1 kropka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny li zamknij nawias ostrokątny Element listy 2 kropka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny li zamknij nawias ostrokątny Element listy 3 kropka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny.

<ol>
	<li>Element listy 1.</li>
	<li>Element listy 2.</li>
	<li>Element listy 3.</li>
</ol>

Ćwiczenie 6

Zapoznaj się ze źródłami i wykonaj ćwiczenie.

Linia 1. margin minus top dwukropek 10px średnik margin minus bottom dwukropek 10px średnik margin minus left dwukropek 10px średnik margin minus right dwukropek 10px średnik.

margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;

Linia 1. margin dwukropek 10px średnik.

margin: 10px;

R6LfNU6hw2eXh

Oba zapisy są poprawne i dają taki sam efekt. Wskaż, którego należy użyć. Uzasadnij swoją decyzję. (Uzupełnij).

Należy użyć drugiego zapisu. Jest krótszy i bardziej przejrzysty.

Ćwiczenie 7

Zdecyduj, jakie identyfikatory oraz klasy wykorzystasz na swojej stronie.

Ćwiczenie 8

Ostyluj swój kod.

Film edukacyjny

Dla nauczyciela

Sprawdź się