O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

dodatkowe boksy czyli o podstawach HTML słów kilka

W moich szablonach często opisuję dodatkowe rzeczy. Są to nie tylko oryginalne wklejki ale także własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga.

kod divu o klasie boks

Kody można wklejać bez żadnych specjalnych starań ale przy minimalnej zmianie można sprawić, że wklejki będą wyglądały dokładnie tak jak trzeba czyli tak jak ty tego chcesz. Wystarczy taki dodawany kod ubrać w klasę, np tak:

<div class="boks">
Zawartość pojedynczego boksu. Może być dowolna, mogą to być przeróżne wklejki, pojedyncze paragrafy, listy etc.
</div>

A następnie w arkuszu stylów opisać wygląd tak jak się chce, np tak:

.boks {
margin:10px 0 20px 0; /* odstęp od otaczających elementów */
border-bottom:1px solid silver; /* ramka pod elementem */
background:white; /* kolor tła */
font-size:14px; /* rozmiar czcionki */
text-align:center; /* wycentrowanie zawartości */
}

W rozwinięciu dzisiejszej notki zajmę się HTMLową stroną kodu dodatków, wszystkim co wpiszesz w dodatkowe boksy. Opiszę jakie znaczniki preferuję, jak je dodaję i jakie cechy przypisuje im przeglądarka: div, span, p, h3. Taki mały przewodnik po HTML przydatny dla użytkowników blox.pl uwzględniający dziś głównie pojemniki na treść.

Takie dodatki wstawia się na bloga poprzez pole na kod HTML:

USTAWIENIA -> BOCZNA SZPALTA -> Dodatki -> Pole na dodatkowy HTML

Potrzebujesz dokładniejszych wyjaśnień jak znaleźć miejsce na ten kod? Zapraszam do notki dla zupełnie zielonych: Dodawanie wklejek

Arkusz stylów czyli inaczej CSS można znaleźć w edycji bloga:

WYGLĄD -> EDYCJA CSS -> Edytor CSS

Potrzebujesz dokładniejszych wyjaśnień jak znaleźć miejsce edycji CSS? Zapraszam do notki dla zupełnie zielonych: Miejse wprowadzania zmian w szablonie

Tworzenie dodatku

Najlepszą metodą nauki jest poprzez działanie. Ma największą skuteczność, jest najszybsza i najmniej teoretyczna. Więc zadanie na dziś: stwórz sobie dodatek, taki prosty, tekstowo-obrazkowy. Jak to zrobisz to twoja sprawa, za kilka dni dodam wpis dla zielonych jak szczypiorek na wiosnę ale dzisiaj zakładam, że na podstawie własnej wiedzy, doświadczeń a nawet poprzednich notek z tego blogu jesteś w stanie wykombinować jakiś dodatek którym będziemy się mogli zająć.

Obejmowanie klasą

Często używam tego określenia w różnych wariantach:

  • obejmij klasą
  • obejmij kodem
  • obejmij znacznikiem
  • obejmij identyfikatorem

Wszystko to znaczy mniej więcej to samo: przed i po kodzie naszego dodatku dodajemy maleńki kod, który pomoże nam czynić magię. Ten maleńki kod to właśnie znacznik, który niemal zawsze składa się ze znacznika otwierającego i niemal identycznego znacznika zamykającego, który różni się od tego pierwszego tylko ukośnikiem. Muszą być obie te części bo jedna mówi gdzie element się zaczyna a druga, gdzie kończy.

znaczniki otwierający i zamykający

Istnieje różnica gdy powiem: przeczytaj książkę Roberta Bringhursta od strony 27 do strony 82 a gdy powiem przeczytaj od strony 27 albo jak powiem przeczytaj do strony 82. Za każdym razem łączna zawartość jest inna i twoja wiedza po przeczytaniu też będzie inna. Zawsze zamykaj otwarte znaczniki, bo jak nie... kłopoty są nieoczekiwane a chyba wszystkie maile z panicznym szablon mi się rozwalił związane są z niezamkniętym znacznikiem, czy to w polu w wąskiej czy to w notce.

dodawanie klasy

W zasadzie sam znacznik nawet mógłby wystarczyć, w bardzo określonej sytuacji. Znaczniki występują na stronie wielokrotnie, a że nie możemy przeglądarce wskazać palcem, że chodzi nam tylko o ten tu na dole, ten taki co go dodaliśmy przecież.

Do wyróżniania znaczników służą klasy. Dodajemy taką wymyśloną przez nas klasę do elementu i już możemy go wołać po imieniu. Klasy są właśnie jak imiona, które pozwalają powiedzieć w szablonie, że wszystkie zosie mają być rude a hanki mają być pisane dużymi literami i podkreślone.

Klasę dodajemy poprzez atrybut. Jeżeli widziałaś kiedyś kod np. linku czy ilustracji to wiesz, że kod nie składa się tylko z adresu URL. Mamy tam znacznik a potem jakieś atrybuty, np źródło w przypadku ilustracji. Tak samo atrybutem danego elementu może być klasa. Wyglądać to będzie tak:

dodawanie atrybutu klasy

Wartość atrybutu, czyli to wpisane w cudzysłowie, to właśnie nazwa naszej klasy. Dodajemy ją zawsze w ten sam sposób. Przed ostrym nawiasem zamykającym otwierający znacznik dodajemy spację, następnie słówko class, znak równości i cudzysłów. Teraz wpisujemy już nazwę naszej klasy, może być dowolna, może zwierać cyfry, może mieć małe i duże litery ale w tym przypadku ma to znaczenie class="boks" będzie inną klasą niż class="Boks". Nie może mieć taka nazwa spacji. Jeżeli dodamy odstęp to będziemy mieli już dwie klasy. Po wpisaniu nazwy klasy wstawiamy kolejny cudzysłów i gotowe, nasz znacznik dostał klasę.

Taką samą klasę możemy przypisać kilku różnym elementom. Przypisanie dokładnie tej samej klasy rozmaitym elementom w polu na kod spowoduje, że będzie można opisać je w identyczny sposób.

Podsumowując:

  • klasę dodajemy dowolnemu znacznikowi
  • taką sama klasę można dodać wielu znacznikom
  • klasę dodajemy poprzez atrybut class
  • wielkość liter w nazwie klasy ma znacznie

Rodzaje znaczników

Klasę możemy przypisać do dowolnego znacznika, nie ma lepszego czy gorszego znacznika ale są odpowiedniejsze. Zacytuję poradnik webmastera:

dokonując dość gruntownego przestawienia akcentów w kierunku tzw. webmasterstwa semantycznego, gdzie język HTML buduje logiczną strukturę dokumentu (zaś polecenia są stosowane zgodnie z ich naturalnym przeznaczeniem, a nie do rozmaitych sztuczek)

Najistotniejsza w tym cytacie jest informacja o tym, że znaczniki mają swoje naturalne przeznaczenie. Jeżeli trzeba to i sweter założysz na nogi ale po co? Są przecież spodnie, które lepiej będą pasowały na dolne partie ciała. Tak samo jest ze znacznikami. Podstawowym budulcem stron są znaczniki div i je polecam w pierwszej kolejności w celu zbudowania sobie właściwego dla nas kodu w polu na kod bloksowych dodatków.

div

  • Znacznik nie posiadający żadnych cech specyficznych. Jest jak przezroczyste pudełko, które może służyć niemal do wszystkiego.
  • Jedyną cechą jaką div posiada to wyświetlanie w bloku, czyli że kolejne elementy wyświetlają się jeden pod drugim.
  • Może zawierać dowolną zawartość, także kolejne div.
  • Świetnie nadaje się do budowania strony. Div to po prostu pojemnik uniwersalny.
  • Przykładowo cała treść notki jest w jednym divie, od tytułu do linku do komentarzy. Sam tytuł też jest w innym divie, i treść notki, i informacje pod nią.

przykład div

span

  • Znacznik nie posiadający cech specyficznych. Jest jak przezroczysty woreczek, do którego wrzucić możemy inne elementy.
  • Jedyną cechą jaką span posiada to wyświetlanie w linii, w wierszu czyli że kolejne elementy mogą wyświetlać się jeden obok drugiego.
  • Może zawierać dowolną zawartość, przede wszystkim inne elementy liniowe.
  • Świetnie nadaje się do wyszczególniania drobnych elementów strony. Span to coś jak nawias, obejmujemy nim wybrany fragment i dzięki temu możemy powiedzieć, że coś w tym fragmencie jest innego (nie ważniejszego i nie dziwniejszego tylko innego, np inny rodzaj czcionki).
  • Przykładowo w starym kodzie w kategoriach słowo WSZYSTKIE (czyli nazwa wybranej kategorii) jest umieszczona w span. Dzięki temu możemy choć nie musimy, opisać je inaczej, jednocześnie span nic nie zmienia w samym wyświetlaniu tego słowa.

przykład span

p

  • Znacznik akapitu czyli to co się robi w edytorze gdy klikniesz enter.
  • Akapit p ma kilka cech.
    • Przede wszystkim wyświetla się blokowo (tak jak wyżej wspomniany div), czyli jeden akapit będzie wyświetlał się pod drugim a nie obok niego, całkiem logiczne.
    • I internecie akapitów nie wyróżnia się tak jak w książkach, poprzez wcięcie akapitowe tylko poprzez dodatkowy odstęp przed i po akapicie. Odstęp ten zazwyczaj ma wysokość czcionki (1em).
  • Może zawierać dowolną zawartość, przede wszystkim elementy liniowe.
  • Znacznik ten powinien zawierać podstawową treść czyli głównie tekst, może jakieś ilustracje. Akapit (z angielskiego paragraph) p to bardzo przydatny znacznik i świetnie nada się też do wykorzystania w dodatkach, nawet bez dodatkowej klasy. W notkach możemy dodawać klasę wybranym akapitom aby je wyróżnić, np. kilku pierwszym aby podkreślić wstęp albo ostatniemu aby zaznaczyć, że są już tam tylko dopowiedzenia, przypisy.
  • W kodzie bloga p możemy znaleźć w notkach. Przy każdym kliknięciu w enter dodajemy parę znaczników akapitu do kodu.

przykład p

h3

  • Znacznik etykiety/nagłówka trzeciego rzędu. Lubię go wykorzystywać w notkach jako śródtytuł i zazwyczaj w szablonach opisuje dodatkowo.
  • Etykieta trzeciego rzędu h3 posiada cechy specyficzne dla śródtytułu.
    • nieco większy rozmiar tekstu, zazwyczaj 117% wielkości tekstu podstawowego
    • często pogrubienie
    • odstęp analogiczny do odstępu w akapicie, o wysokości tekstu zarówno przed jak i po śródtytule
  • Może zawierać elementy liniowe.
  • Świetnie nadaje się do zatytułowania części tekstu. H3 to coś jak śródtytuł, generalnie jest ich sześć. Pierwszego rzędu to zazwyczaj tytuł strony, potem może być tytuł działu albo tytuł notki i wtedy trzeci stopień przypadnie po prostu śródtytułom. Analogicznie jak w jakimś podręczniku.
  • Przykładowo w starym kodzie bloksów h3 są przypisane etykiecie wybranej kategorii. Tytuł bloga to h1, tytuł notki to h2 więc śródtytuł w notce albo właśnie etykietę boksu w bocznej szpalcie można umieścić w znaczniku h3.

przykład h3


To jest w zasadzie tylko część pierwsza o dodawaniu boksów bo dzisiaj opisałam tylko kod jakim je dodaję, zostaje jeszcze kod jakim je opisuję. Podobnie jest to tylko część przydatnych informacji o znacznikach HTML. Wymieniłam tu tylko cztery, te które moim zdaniem najbardziej przydadzą się przy budowaniu dodatków pod wąską szpaltą. Zapewne chciałabym jeszcze wrócić do tematu div i span. Wydaje mi się, że warto też napisać o wzmocnieniu i emfazie, które mają znaczenie w przeciwieństwie do pogrubienia czy pochylenia a domyślnie wyglądają tak samo. Są jeszcze listy, które również lubię używać w dodatkach, oczywiście link, ilustracja, może cytat albo blok cytatu, a na deser kod...

wtorek, 29 listopada 2011, szablonykatemac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
madamfanaberia
2011/11/30 16:55:29
Jest mi niezmiernie miło poinformować Cię, że Twój blog został nominowany do konkursu na "najładniejszy design blogów Bloxa'. Po szczegóły zapraszam na Co kryje Blox?
pozdrawiam
-
kate_mac
2011/12/05 14:36:32
@madamfanaberia
Dziękuję za wyróżnienie jakim jest zgłoszenie udziału mojego bloga. Ciekawa inicjatywa, zamierzałam nawet o niej wspomnieć na blogu ale działasz znacznie szybciej niż ja. Moje żółwie tempo doprowadziło do odpowiedzi na komentarz dopiero w momencie gdy zgłoszenia konkursowe się zakończyły.
Na bloksie jest sporo atrakcyjnych "wyglądów" Niektóre osiągnięte są bardzo prostymi metodami. Wystarczy z subtelnością podejść do wyboru kolorów i rozwiązań aby otrzymać bardzo atrakcyjny efekt:
banana.blox.pl
cebrita.blox.pl
Z drugiej strony niezwykle istotną częścią designu jest sposób pisania, przestrzeganie zasad edytowania tekstu, pewna spójność i konsekwencja związana z wyglądem tekstu w notkach.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...