Infografika
Polecenie 1
Zapoznaj się z infografiką. Co jeszcze można na niej umieścić?
- Infografika o tytule: Język HTML i podstawy css, podstawowe znaczniki i atrybuty HTML oraz selektory i właściwości CSS.
- Czerwone koło z napisem HTML.
Od koła tego wchodzą proste do znaczników: mniejsze p id='"czerwony_akapit" większe mniejsze ukośnik p większe.
Następna prosta dąży do: Język opisowy oparty na znacznikach (pojedynczych albo podwójnych).
mniejsze znacznik atrybut="wartosc" większe.
Obraz na stornie internetowe- wymagane atrybuty: src, alt: mniejsze img srt="logo.jpg" alt="opis" większe.
Hiperłącza (linki)- znacznik podwójnych: mniejsze a href="https: ukośnik ukośnik google.com" mniejsze Google mniejsze ukośnik a większe, może ewentualnie posiadać atrybut target.
Stosuj akapity mniejsze p większe mniejsze ukośnik p większe zamiast podwójnego złamania linii mniejsze br większe mniejsze b większe.
Zielony znak okej: mniejsze p większe Pierwszy akapit mniejsze ukośnik p większe. <br/ mniejsze p większe Drugi akapit mniejsze ukośnik p wieksze.
Czerwony znak z krzyżykiem: Pierwszy akapit mniejsze br większe mniejsze br większe drugi akapit.
Nagłówki od mniejsze h1 większe do mniejsze h6 większe, mniejsze h1 większe jest największy oraz powinien wystąpić jeden raz.
Mniejsze h1 większe Nagłówek mniejsze ukośnik h1 większe. - Niebieskie koło z napisem CSS.
Od koła tego wychodzi prosta do:
Język opisowy służący do opisania wyglądu elementów dokumentu, używa selektorów i właściwości: selektor { właściwość: wartość; }.
Uchwycenie wybranego elementu na stronie z użyciem identyfikatora: #czerwony_akapit { color: red;} w selektorze CSS używamy dodatkowego operatora #.
Uchwycenie wybranego elementu w witrynie z użyciem klasy.
.zielony_akapit { color: green;}
W selektorze CSS używamy dodatkowego operatora: kropka.
Z koła z napisem CSS wychodzą jeszcze dwie linie.
Pierwsza: krój czcionki: font-family.
Rozmiar czcionki: font-size.
Waga czcionki: font-weight.
Styl zapisu czcionki: font-style.
Wyrównanie tekstu: tekst-align.
Zmień wielkość liter: tekst-transform.
Dekoracja tekstu: text-decoration.
Odstępy literowe: letter-spacing.
Wysokość linii tekstu: line-height.
Druga prosta: Nadanie odstępów.
Odstęp zewnętrzny: margin.
Odstęp wewnętrzny: padding.
Źródło: Contentplus.pl sp. z o.o., licencja: CC BY-SA 3.0.
Polecenie 2