KARTA ĆWICZEŃ NR P3.2.3 Wstawianie grafiki w dokumencie

KARTA ĆWICZEŃ NR P3.2.3
Wstawianie grafiki w dokumencie HTML
1. Wstaw zdjęcia procesorów AMD Phenom x6 oraz Intel Core i7
Wskazówka!
Do wstawiania obrazów służy znacznik <img src=”ścieżka/do/pliku” />. Atrybut src
zawiera ścieżkę dostępu do pliku obrazka.
a) obramuj obrazki stosując podwójne krawędzie o grubości 5 px; dopasuj kolor krawędzi
Wskazówka!
Obramowanie wstawiamy za pomocą właściwości border (wszystkie krawędzie) lub
border-top, border-bottom, border-left, border-right dla poszczególnych krawędzi.
b) jeden obrazek wyrównaj do lewej a drugi do prawej
Wskazówka!
Opływanie obrazów ustawiamy poprzez właściwość float.
c) pomiędzy obrazkami wstaw tekst
Wskazówka!
Do wstawiania tekstu służy znacznik <p></p>.
d) ustaw marginesy zewnętrzne obrazków na 10px
Wskazówka!
Marginesy zewnętrzne definiuje się za pomocą właściwości margin (wszystkie
marginesy); można też definiować je wybiórczo: margin-left, margin-right, margin-top,
margin-bottom.
2. Pod obrazkami wstaw linię poziomą o grubości 2px i długości 80% strony; dopasuj kolor linii
Wskazówka!
Linię poziomą definiuje znacznik <hr />. Grubość linii ustawiamy poprzez właściwość
height; kolor linii za pomocą właściwości color; długość linii poprzez właściwość width.
Aby linia znalazła się pod obrazkami, należy zresetować opływanie. Służy do tego
właściwość clear.
3. Wstaw obrazki jeszcze raz zmniejszając ich rozmiar o połowę.
Wskazówka!
Do zmiany rozmiarów grafiki służą atrybuty width i height znacznika <img />.