DoGGi > Pozostałe > Klub Kynologiczny

~Zaprojektuj swój temat!~ Poradnik odnośnie znaczników html

May 11th 2016, 02:38

Chibyusa

Tematów: 12
Postów: 178




Nie wiedziałam, gdzie moge napisać taki temat, więc piszę tutaj. Najwyżej moderator mnie opierdzieli i go przeniesie :P Poradnik stworzony z myślą o użytkownikach, którzy zakładają wątki w Hodowlach, Sprzedażach, Kryciach, czy nawet Domowych Schroniskach, a nie potrafią sami zaprojektować grafiki do tematów, nie chce im się czekać, aż ktoś zrobi to za nich lub też zwyczajnie nie maja pieniędzy na usługi takiego grafika.

Nasze kochane Doggi poza zwyczajowym bbcode w postach pozwala nam na uzywanie niektórych znaczników html, które działają w identyczny sposób, ale sa trochę bardziej rozbudowane, oferują nam więcej możliwości podczas "upiększania" naszych forumowych wypocin.




Więc, zaczynamy...

I. Pomocna strona
Forumowe Doggi niestety nie pozwala nam na podejrzenie wątku przed jego publikacją. Jest to bardzo uciążliwe i czasami powoduje, że musimy kilka razy edytować treśc, by wyszło dokładnie tak, jak my chcemy. Na szczęście mamy internet oraz strony, które ułatwiają nam życie.

Wchodzimy na stronę:
https://html-online.com/editor/

Jest to typowy edytor html online. Po prawej stronie wrzucamy nasze kody html. Po lewej zauwazymy, jak wygląda nasz wątek w pełnej okazałości. Mamy tam również typowy panel opcji, który możemy wykorzystać np. podczas podmiany linków, obrazków, czy ozdabianiu tekstu (kolor, pogrubienie, kursywa etc.).

II.Obrazki

Zamiast typowego znacznika [img] możemy stosować kod html, który ułatwi nam edycję i upiekszanie obrazka.

a) Rozmiar obrazka

Dzieki html możemy okreslić, jaki nasz obrazek będzie miał rozmiar. (Uwaga! Powinno się zmieniać rozmiar proporcjonalnie. Jednym słowem odejmować/dodawać tyle samo pikseli zarówno w szerokości, jak i wysokości).

<img src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




b) Ozdobniki obrazka

Mamy również kody umożliwiające nam ozdobienie obrazka, np poprzez dodanie cienia, czy też obrysu.

Cień:
<img class="shadow" src="LINK DO OBRAZKA PSA" alt="" height="150" />




Na edytorze go nie widać, dopiero po wrzuceniu na doggi jest widoczny.


 


c) Pozycja obrazka


<img style="margin: PIONpx POZIOMpx;" src="link do obrazka" alt="" width="szerokośc obrazka" height="wysokośc obrazka" />


Na przykład:


<img style="margin: 10px 100px;" src="http://doggi-game.pl/img/dogs/810000-820000/814397/main.jpg" alt="" width="200" height="150" />


 






Obrys:

Możemy również dodawać różnego rodzaju obrysy do obrazka.

<img style="border: 1px solid #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />


border-width: 2px - tutaj wpisujemy grubość obrysu.
#1a7eb4 - to jest kolor obrysu (tzw wartość HEX).
solid- rodzaj obrysu (prosta linia)



Istnieją rowniez inne rodzaje obrysu, nie tylko proste, liniowe.

Linia kreskowa (dashed):
<img style="border: 1px dashed #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




Linia kropkowa (dotted):
<img style="border: 1px dotted #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




Linia ciągła podwójna (double):
<img style="border: 1px double #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




Przycisk (outset):
<img style="border: 1px outset #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




Możemy oczywiście połączyć efekt obrysu z efektem cienia.

<img class="shadow" style="border: 1px solid #1a7eb4; border-width: 2px;" src="LINK DO OBRAZKA" alt="" width="SZEROKOŚĆ" height="WYSOKOŚĆ" />




III. Tekst

Teraz przyjrzymy się tekstom. W prosty sposób możemy zmienić wygląd czcionki, jak i jej rozmiar.

a) Rodzaj czcionki:

<span style="font-family: rodzaj;">Tu wpisz tekst</span>


Tam gdzie jest rodzaj wpisujemy pełną nazwę fontu. (Uwaga! Korzystamy tylko z tak zwanych czcionek systemowych, które sa wgrane do przeglądarek i systemów operacyjnych (windows, linux, mac). Np.:
Times New Roman
Georgia
Tahoma
Trebuchet MS
Tahoma
Raavi
MS Gothic
Trebuchet MS

b) Rozmiar czcionki

]<font size="n">Tu wpisz tekst</font>

"n"- Tutaj wpisujemy wartość od 1 (najmniejsza) do np. 10 (dośc spora). etc.


Tu wpisz tekst

Tu wpisz tekst

Tu wpisz tekst

Tu wpisz tekst

Tu wpisz tekst

c) Kolor tekstu

<font color="kolor">Tu wpisz tekst</font>

kolor- tutaj wpisujemy wartośc koloru w w kodzie HEX (np. #fffff). Stronka do palety kolorów znajduje się na dole tematu.

Tu wpisz tekst
Tu wpisz tekst
Tu wpisz tekst
Tu wpisz tekst

d) Cień tekstu:

<span style="text-shadow: 0px 0px 2px;">Tu wpisz tekst</span>


Tu wpisz tekst

Ok, a co jeśli chcemy połączyć wszystkie z powyższych kodów, dotyczących tekstów w jeden, spólny?

<span style="font-family: Trebuchet MS; color: #0049cf; text-shadow: #cf0000 0px 0px 2px; font-size: 20px;">Tutaj wpisz tekst</span>

Tutaj używamy tylko znacznika "span":
"font-family: Nazwa czcionki;- Nazwa czcionki
"color: #0049cf; - kolor czcionki
"text-shadow: #cf0000 0px 0px 2px; - cień, kolor cienia i "grubość" cienia
"font-size: 20px; -Wielkośc czcionki (w tym wypadku podajemy już w pixelach)

Jeśli nie potrzebujemy któregoś efektu, po prostu go usuwamy, pamiętając by usunąc również znak " , który go poprzedza oraz ; , który go kończy. Kolejność efektów w kodzie nie ma znaczenia.

IV. Przydatne materiały i strony

Symbole. Mozna skopiowac bezpośrednio z tematu:













Strona z mnóstwem kolorów w wersji HEX:
http://fonty.pl/kolory.htm#generator

Ciekawa stroka, gdzie możemy używać symboli, jako ozdobnego tekstu:
http://fancytext.blogspot.com

𝔠𝔥𝔦𝔟𝔷𝔲𝔰𝔞
𝓒𝓱𝓲𝓫𝔂𝓾𝓼𝓪
ℂ𝕙𝕚𝕓𝕪𝕦𝕤𝕒
🅲🅷🅸🅱🆈🆄🆂🅰

Strona do ozdobników w formie symboli (można wykorzystać, jako linie oddzielające w temacie).


KLIK

•._.••´¯``•.¸¸.•``•.¸¸.•´´¯`••._.•

(¯`·.¸¸.·´¯`·.¸¸.-><-.¸¸.·´¯`·.¸¸.·´¯)

I chyba najfajniejsza. Stronka do robienia animacji naszych obrazków:
KLIK



Nie nalezy z tymi animacjami przesadzać. Są dość szybkie, osoby odwiedzające nasz temat mogą czuć przez to dyskomfort.

V. Kilka słów na koniec

Czasami wrzucając nasz wygenerowany kod do postu może on nam po prostu "nie wejść". Nie wiem do końca od czego to jest zależne. Jednak na 99,99% wchodzi bez problemu podczas edycji posta. Dlatego jeśli macie taki problem, najlepiej byście napisali posta o byle jakiej treśći , a nastepnie edytowali go wrzucając kod html.

Temat będe aktualizowac, jak odkryje, które jeszcze znaczniki html działają na Doggi :P

May 19th 2016, 03:29

Chibyusa

Tematów: 12
Postów: 178
VI. Tabelki

Dzięki tabelkom możemy bardzo ułatwić sobie życie oraz ładnie ogarnąć nasz temat. Bywa, że musimy wrzucić kilkanaście obrazków (np. szczeniaków do tematu z hodowlą) i nie chcemy, by post został przesadnie, pionowo wydłużony. Dzięki tabelkom będziemy mieli wszystko równo, jak przy linijce i z łatwością będziemy mogli zarówno wstawić kilka obrazków w poziomie, jak i dodać do nich np. opisy.

<table style="height: 23px; margin-left: auto; margin-right: auto;" width="427"><tbody><tr>
<td style="text-align: center; vertical-align: middle;">Treść tabelki</td>
<td style="text-align: center; vertical-align: middle;">Treść tabelki</td>
<td style="text-align: center; vertical-align: middle;">Treść tabelki</td>
</tr></tbody></table>


height- wysokośc tabelki
text-align: center/left/right - ułożenie obrazka bądź tekstu (po środku, do lewej, do prawej)
vertical-align: middle/top/botton - ułożenie obrazka bądź tekstu (wyśrodkowany względem wysokości tabelki, na górze, na dole).
margin-left: auto; margin-right: auto- wyśrodkowanie tabelki
float: left; -do lewej
float: right; -do prawej


Treść tabelki
Treść tabelki
Treść tabelki


Jeśli chcemy dodać więcej tabelek w pionie, wystarczy, że dodamy znacznik:
<td style="text-align: center; vertical-align: middle;">Treść tabelki</td>

w tabelce.

W miejscu "treść tabelki" możemy spokojnie wstawiać obrazki i stosować efekty, o których zostało wspomniane w pierwszym poście.

VII. Filmy

Html umożliwia nam również osadzanie filmów w postach, np. kiedy chcemy dodać takowe multimedia do tematu z hodowlą, ukazujący daną rasę.
<iframe src="//LINK DO FILMU" width="SZEROKOŚĆ" height="WYSOKOŚĆ"></iframe>




Do filmu możemy dodać wcześniej wspomniane obrysy, by dodatkowo ozdobić nasz temat:

<iframe style="border: 1px dotted #1a7eb4; border-width: 4px;" src="//LINK DO FILMU" width="SZEROKOŚĆ" height="WYSOKOŚĆ">


Wartość dodajemy zaraz po znaczniku iframe.



VIII. Emotki

Niestety, nasze forumowe doggi nie umożliwia wstawiania nam ikonek graficznych, poza zwykłymi emoji tekstowymi.
Poniżej można zobaczyć kilka przykładów, które można wykorzystać w postach. Wystarczy, że skopiujesz się link do obrazka i wstawi za pomocą kodu:
[img]LINK DO OBRAZKA[/img]




Jun 1st 2016, 16:40

Chibyusa

Tematów: 12
Postów: 178
Aktualizacja
Dodano: Tabelki, multimedia i kilka ikonek.

Pokemony
Poezja