Wielu z was wie tylko, że istnieje coś takiego jak HTML czy CSS, jednak większość boi się nawet kliknąć w poście przycisk „HTML”. Niepotrzebnie! Ta plątanina nic wam niemówiących cyferek i literek naprawdę nie gryzie. Wystarczy, że przeznaczycie trochę czasu na poznanie tej strefy blogosfery. Poniżej objaśniam, co oznaczają poszczególnie elementy.
1. DIV, czyli zmora blogerów
<div atrybut="wartość atrybutu">ELEMENT</div>
Jest to jeden z wielu znaczników/bloków. Używamy go, kiedy chcemy sformatować większą partię tekstu.
atrybut - używa się głównie style, class i id.
wartość atrybutu - tak naprawdę sami decydujemy co się tam znajdzie.
PAMIĘTAJ! Znacznik <div ...> potrzebuje zamknięcia, czyli </div>, w miejscu gdzie chcesz, aby formatowanie przestało działać. Jeśli wszystkie nie zostaną zamknięte, mogą spowodować drobne deformacje na blogu, np.: przesunięcie kolumn.
2. WYRÓWNANIE ELEMENTÓW, czyli zaczynamy tworzyć kartę
<div style="text-align: wartość;">Elementy wyrównywane</div>Są cztery wartości, które możemy zastosować:
center - wyrównanie do środka
left - wyrównanie do lewej
right - wyrównanie do prawej
justify - wyjustowanie (wyrównanie do prawej i lewej jednocześnie)
3. ZDJĘCIE, czyli jak zmniejszyć jego wielkość
height - jest to wysokość zdjęcia bez jednostki px<img src="LINK DO ZDJĘCIA" height="WYSOKOŚĆ" width="SZEROKOŚĆ" />
width - jest to szerokość zdjęcia bez jednostki px
Do zdjęcia możemy dodać także kod: style="border: 1px solid #7e4d54; border-radius:20px;padding: 2px;" (kolejno: obramowanie, zaokrąglone rogi obrazka, stopień przylegania ramki do zdjęcia)
UWAGA! Część podkreślona na żółto nie musi znaleźć się w kodzie. Jednak jeśli chcemy niestandardowo zmienić wymiary zdjęcia, wystarczy, że wpiszemy odpowiednie jednostki i zdjęcie się zeskaluje. Co lepsze, nie musimy podać obu wartości. Jeśli chcemy zastrzec, żeby zdjęcie miało 400px wysokości, wystarczy, że po linku do zdjęcia wkleimy wyżej podany kod na height. Podobnie jeśli chcemy, żeby zdjęcie miało 500px szerokości. Wystarczy wkleić wyżej podany kod na width.
4. IMIĘ I NAZWISKO, czyli pierwsze formatowanie tekstu
<div style="font-family: "CZCIONKA"; font-size: WIELKOŚĆ CZCIONKI; font-style: STYL; color: KOLOR; text-transform: PRZEKSZTAŁCENIE;">IMIĘ I NAZWISKO</div>
CZCIONKA - np.: Times, Georgia, Calibri etc.
WIELKOŚĆ CZCIONKI - może być wyrażona w px lub słownie:
xx-small - najmniejsza | x-small - mała | normal - zwykła | large - duża | x-large - największa
STYL - normal - zwykła czcionka | italic - kursywa | oblique - łagodna kursywa
KOLOR - może być wyrażony za pomocą HEX np.: #000000, RGB np.: RGB(0,0,0) lub słownie np.: green
PRZEKSZTAŁCENIE - uppercase - same wielkie litery | lowercase - same małe litery | capitalize - każdy wyraz zaczyna się z wielkiej litery
Oczywiście możemy zrobić zdecydowanie więcej jeśli chodzi o formatowanie tekstu. Więcej opcji znajdziecie TUTAJ
5. OPIS, czyli zlitujmy się nad czytelnikiem
<div style="text-indent: WCIĘCIE TEKSTU; line-height: ODLEGŁOŚĆ MIĘDZY LINIJKAMI; margin: MARGINES;">OPIS</div>
WCIĘCIE TEKSTU - jest to wcięcie pierwszego wersu każdego akapitu, który znajdzie się w zasięgu znacznika <div ...>; może być wyrażane w px lub pt
ODLEGŁOŚĆ MIĘDZY LINIJKAMI - wyrażana w px i % (im mniejszy procent tym bardziej zbity tekst - 100% to normalna odległość)
margin - możemy również określić, który margines chcemy zmienić:
margin-left - lewy | margin-right - prawy | margin-top - górny | margin-bottom - dolny
MARGINES - margines zewnętrzny, który oddziela jeden element od drugiego; wyrażany w px
6. ODAUTORSKO, czyli jak ładnie oddzielić dopisek pod kartą
<div style="padding: DOPEŁNIENIE; border: GRUBOŚĆ RAMKI STYL KOLOR; ">ODAUTORSKO</div>
padding - możemy również określić, który margines chcemy zmienić:
padding-left - lewy | padding-right - prawy | padding-top - górny | padding-bottom - dolny
DOPEŁNIENIE - margines wewnętrzny, czyli po prostu odstęp między elementem, a otaczającą go ramką; wyrażane w px
GRUBOŚĆ RAMKI - wyrażana w px
STYL - solid - prosta linia | dotted - kropki | dashed - kreski | double - podwójna linia | grove - działa tylko przy grubości większej niż 3px - trudno opisać jak wygląda
KOLOR - może być wyrażony za pomocą HEX np.: #000000, RGB np.: RGB(0,0,0) lub słownie np.: green
Brak komentarzy:
Prześlij komentarz