O szablonach, ich projektowaniu i moich z tym zmaganiach...

podręcznik HTML

środa, 29 lutego 2012

HTML podręcznikZnaczniki budują strony internetowe. Oczywiście strona nie musi być napisana w języku HTML, są liczne inne sposoby ale z punku widzenia tego blogu nieistotne. Tak się składa, że bloksowe blogi posługują się językiem XHTML. Wystarczy zajrzeć do źródła strony i tam zaraz na początku będą informacje o typie dokumentu. Bloksy to XHTML.

Znaczniki układają treść w odpowiednie formy, mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania. Najprościej wyjaśnić to na podstawie ilustracji czy linku. Kontynuując temat z poprzedniej podręcznikowej notki dzisiaj przejdę do bardziej konkretnego przykładu i opiszę co nieco jeden ze znaczników: odnośnik.

Znacznik linku, budowa, atrybuty, możliwości opisu wyglądu

Linki to okna naszego HTMLowego domku. Pozwalają one zobaczyć coś więcej, rozszerzyć nieco temat i powiązać go z innymi elementami w sieci. Odpowiednikiem linków w wersji papierowej są przypisy. W najlepszym razie są one na tej samej stronie co treść do której są przypisane i od razu można podejrzeć ogólny kierunek w którym przypis ma nas prowadzić. Zazwyczaj jednak nie zawierają rozszerzającej treści tylko informują, że ona istnieje i znajduje się w określonej pozycji książkowej. Jeżeli chcesz się dowiedzieć czegoś więcej musisz zacząć od znalezienia następnej książki. W Internecie jest dużo łatwiej wystarczy kliknąć. I na tym właśnie moim zdaniem polega cała magia użyteczności linków.

W dzisiejszej notce opiszę budowę znacznika linku, które jego części są niezbędne, które mile widziane i całkiem przydatne a które to raczej osobliwość. Te części to oczywiście atrybuty ale o tym wiesz już z poprzedniej notki.

niedziela, 22 stycznia 2012

HTML podręcznikZnaczniki to podstawowy budulec stron internetowych. Zastanawiam się czy lepiej porównać je do cegieł czy do zaprawy i chyba zdecyduję się na zaprawę bo cegłami w tym porównaniu będzie treść strony. Bez odpowiedniego spoiwa treść może nadal być dostępna ale raczej trudna do odczytania. To właśnie znaczniki układają treść w odpowiednie formy. Mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania.

Czasami można spotkać się z określeniem tag HTML. Znaczy to mniej więcej to samo więc można tych słów używać jak synonimów.

TAG = ZNACZNIK

Oczywiście innym znaczeniem tag jest słowo-klucz i związane jest ze sposobem opisu treści notki (patrz chmurka tagów). Te dwa znaczenia są niezależne i nie są ze sobą powiązanie. To trochę jak ze słowem zamek, z kontekstu trzeba wywnioskować o który zamek/tag chodzi. Ja określenia tag html używam raczej rzadko i zazwyczaj wprowadzam go tak jak przed chwilą, wraz ze skrótem HTML.

W dzisiejszej notce opiszę budowę znacznika, sposób zagnieżdżania znaczników, sposób zapisu informacji dodatkowych w postaci atrybutów a także na koniec omówię atrybuty standardowe: id, class, style, title, lang, dir.

wtorek, 29 listopada 2011

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ść.

sobota, 26 lipca 2008

Liczba elementów bloksowych jest z góry określona. Mamy tytuł bloga, notki i boczną szpaltę, każdą z tych rzeczy edytujesz i zmieniasz jej zawartość w nieco innym miejscu. Każdą z tych rzeczy możesz wykorzystać na swój własny sposób i do wybranego przez siebie celu. Potrzeba tylko choć odrobinę pomyśleć nieszablonowo. Najwięcej możliwości oczywiście dają notki ale drugim takim fajnym miejsce są pola na dodatki: jedno wyświetla się tylko na stronach z pojedynczą notką ale to drugie, to podstawowe pole na dodatkowy kod HTML wyświetla się na blogu zawsze co daje bardzo wiele różnych możliwości. Na przykład stworzenia własnego zestawu elementów w wąskiej kolumnie.

W zasadzie mniej istotne jest to co potem z tym zestawem elementów zostanie zrobione ale głównym powodem do napisania tego wpisu była tzw. trzecia szpalta. Można ją zrobić na kilka sposobów i może zawierać różne elementy więc nie ma jednej uniwersalnej rady ale jeżeli chcesz aby ta trzecia kolumna zawierała rzeczy, które nie są w bloksowym standardzie (dodatki wklejone przez pole na kod HTML) to w zasadzie musisz zacząć od odpowiedniego przygotowania kodu tych dodatków.

element dodatkowy #Trzecia

Szablony z trzecią szpaltą podzieliłam wg. kilku cech (zobacz w chmurce tagów pod hasłem trzecia). Jedyne szablony dla których ta notka nie jest potrzebna do wizualnego powstania trzeciej kolumny to szablony z samoistną trzecią szpaltą (bo przesunięta do trzeciej kolumny jest cała bloksowa wąska szpalta albo wybrana jej część). Nie znaczy to jednak, że ta notka i przy tych szablonach się nie przyda.

 

Tworzenie dodatkowego elementu Trzecia

Samo stworzenie tego elementu jest banalnie wprost proste. Wybieramy te elementy które mają się znaleźć w takim specjalnym kontenerze i obejmujemy je divem o unikalnym identyfikatorze. Ja wybrałam Trzecia (choć nie zawsze zawartość tego elementu wyświetla się w trzeciej kolumnie, to już kwestia CSS). Jeżeli korzystasz z jednego z moich szablonów na starym kodzie to proponuję wybrać tą sama nazwę dla identyfikatora. Jeżeli jednak chcesz dodać trzecią kolumnę do własnego szablonu (którego ja nie robiłam) to nie ma to większego znaczenia, równie dobrze może to być zosia, C-3PO czy TrzeciaKolumnaZeSpisemTresci. Pamiętaj tylko, że każda literka ma znaczenie, jeżeli piszesz dużą to potem w CSS pamiętaj o tym, nie używaj spacji i nie używaj polskich znaków.

O co chodzi z tym obejmowaniem divem o identyfikatorze? Bardzo prosta sprawa. Na początku kodu wpisujesz , następnie przechodzisz na koniec kodu i wklejasz tam znacznik zamykający . I po sprawie. Oba są niezbędne, wszystko co zostało otwarte powinno zostać zamknięte.

identyfikator trzeciej szpalty

zobacz przykładowy kod w wersji tekstowej »

Podpowiedź dla zielonych jak szczypiorek na wiosnę: Jeżeli niepewnie czujesz się z wprowadzaniem zmian w kodzie i boisz się, że popełnisz błąd to umieść w elemencie Trzecia wszystkie dodatki, całą zawartość pola na kod HTML. Czyli w polu na dodatki wklej znacznik otwierający na początku kodu a zamykający na końcu nie przejmując się zawartością.

na początek pola

na koniec pola

Koniec. Trzecia szpalta zrobiona.


Podstawowe uwagi o HTML

  1. Tagi HTML umieszczamy zawsze w ostrych nawiasach
  2. Każdy element musi mieć opisany osobno zarówno początek jak i koniec. Zamykający element różni się od otwierającego tym, że poprzedzony jest ukośnikiem.
    Otwarcie: <div id="Trzecia">
    Zamknięcie: </div>
    (jest kilka wyjątków od tej reguły ale są one nieliczne i łatwo je zapamiętać - <img />, <hr />, <br />)
  3. Nie mieszaj znaczników. Elementy mogą się w sobie zawierać ale pamiętaj o kolejności (zamykasz w odwrotnej kolejności do otwierania: abc – cba).

Te trzy uwagi na początek wystarczą. Można zacząć grzebać w kodzie. Jeżeli po zapisaniu zmian okaże się, że strona się sypie to na 90% jedna z powyższych trzech zasad została złamana.

Co można dodać w HTML

Wszystko co planujesz umieścić w trzeciej kolumnie musi się znaleźć w przestrzeni pomiędzy otwarciem a zamknięciem znacznika o identyfikatorze Trzecia. Polecam kategorię: pomocnik do tworzenia dodatkowego kodu na blox.pl, znajdują się tam notki wyjaśniające co dodawać i jak to działa. W skrócie najprzydatniejsze elementy to:

  • tekst umieszczaj w znacznikach akapitu <p>Przykładowy tekst</p>
    • akapity najczęściej oddzielone są zwiększonym pionowym odstępem co może być przydatne w wizualnym porządkowaniu treści
  • jeżeli nie chcesz kończyć akapitu a jedynie przejść do następnej linijki to używaj znacznika złamania wiersza <br /> – to jest przykład znacznika składającego się tylko z jednej części; 

Przykład wykorzystujący oba znaczniki:

<p>Przykładowy tekst<br />
Drugi wiersz tekstu<br />
Trzeci wiesz i koniec akapitu</p>

  • Innym przykładem wyjątku od reguły zamykania znaczników jest znacznik obrazu
    <img src="http://adres-obrazu.jpg" alt="nazwa alternatywna" />
  • Aby umieścić aktywny odnośnik musisz skorzystać ze znacznika linku
    <a href="http://adres-linku">linkujące słowo</a>

Linkiem nie musi być tylko słowo, linkować może obrazek wtedy zapiszesz to tak:

<a href="http://adres-linku.pl"><img src="adres-grafiki.jpg" alt="opis" /></a>

  • Istnieją specjalne tagi tworzące listy, bardzo przydatne gdy chcesz np. zrobić spis treści. Najbardziej przydatna wydaje się lista nieuporządkowana (czyli wypunktowana choć najczęściej samo wypunktowanie ukrywam w wąskich kolumnach). Listę linków tworzymy przy pomocy polecenia <ul> </ul>. W ramach listy znajdą się poszczególne punkty wykazu czyli nasze elementy z linkami, które wprowadzamy za pomocą polecenia <li> </li>. Należy pamiętać o zagnieżdżeniu w pojedynczym punkcie listy znacznika linku.

Przykładowo:

<ul>
<li><a href="http://adres.pl">linkujące słowo</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>

To są najprostsze, najczęściej używane znaczniki. Po bardziej szczegółowe informacje o znacznikach i dodawaniu im różnych atrybutów zapraszam do kategorii pomocnik HTML.

W zasadzie mogłabym już na tym zakończyć bo element istnieje, ma nazwę i można go pozycjonować w CSS. Sam wiesz najlepiej co znajdzie się w twojej trzeciej szpalcie. Ze względu jednak na estetykę podam jeszcze kilka przykładowych klas, które ja opisuję w swoich szablonach na wzór bloksowych elementów z wąskiej szpalty.

Specjalne klasy dla dodatkowych boksów

W moich szablonach często opisuję dodatkowe rzeczy. Często są to własne fragmenty kodu, które mają ułatwiać dodawanie różnych rzeczy i funkcjonalności do bloga. Takim czymś jest właśnie element o identyfikatorze Trzecia. Są też zupełnie niezależne od niego uStopka czy menuTop. To są jednak elementy, które mogą się pojawić na stronie tylko raz bo używam ich do przeniesienia części kodu w inne miejsce na blogu.

W szablonach jednak dodaje kilka stylów, które można wykorzystywać wielokrotnie, niczego nie przenoszą w jakieś dziwne inne miejsce tylko edytują wygląd danego elementu: a to dodają podkreślenie, a to zwiększają odstęp pomiędzy elementami, zmieniają kolor etykiety tytułowej, etc. Takie style wielokrotnego użytku dodaje się poprzez przypisanie elementowi określonej klasy.

  • Przede wszystkim pojedynczy zbiór elementów ujmuję w divy o klasach boks:
    <div class"boks">Zawartość pojedynczego kontenera</div>
    Taki kontener to coś analogicznego jak element z linkami do dziesięciu ostatnich notek czy pojedynczy folder z linkami, tylko tutaj samodzielnie decydujesz o treści.
  • Aby upodobnić nową szpaltę do istniejącej wąskiej tworzę klasę dla tytułów:
    <div class="tyt">Przykładowy tytuł</div>

Wykorzystując te specjalnie stworzone w moich szablonach klasy i zwyczajne znaczniki HTML można przykładowo stworzyć listę spisu treści:

<div class="boks">
<div class="tyt">
Spis treści</div>
<ul>
<li><a href="http://adres.pl">pierwszy element</a></li>
<li><a href="http://adres.pl">drugi link</a></li>
<li><a href="http://adres.pl">trzeci</a></li>
</ul>
</div>


To są wszystko dodatki. Nie są one niezbędną częścią trzeciej szpalty, to co sobie do niej wstawisz to twoja sprawa. Powyższe informacje mają ci jedynie pomóc podjąć decyzję i ewentualnie uporządkować elementy. Jeżeli sobie zupełnie z tym nie radzisz to polecam szablony z samoistna trzecią szpaltą (należą do nich m.in. te z przeniesionymi zakładkami).

Ta notka opisuje tylko podstawy tworzenia własnej zawartości trzeciej kolumny o ustawianiu jej we właściwym miejscu polecam przede wszystkim CSSowe notki z tagów: trzecia bezwzględnie położona i trzecia pływająca. To są dwa podstawowe sposoby umiejscawiania stworzonej dzisiaj treści jako trzeciej kolumny. Zasadniczo nie różnią się wyglądem: pierwszy jest bardziej na chama więc może tworzyć problemy ale pozwala przenieść element w zupełnie dowolne miejsce, drugi jest bardziej naturalny i idealnie współgra z resztą bloga.


Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...