E-učilnice: Oblikovanje

5. Oblikovanje s kodami

Spodaj opisanim trikom je skupno to, da pomagajo obogatiti besedila s preprostimi kodami. Ni potrebno znati kodirati, da te kode uporabljamo. Samo kliknemo na ikono <>, na želeno mesto vnesemo kode in shrnimo. Tako preprosto dodamo besedilu vodoravno črto, barvne oznake ali barvno polje, gumbe in podobno. Barvne kode ne delujejo v vseh temah enako, zato je potrebno njihovo delovanje preveriti.

Kako oblikujemo vodoravno črto?

Odpremo urejanje HTML (klik na ikono <>) in na mesto, kjer želimo imeti črto, vpišemo <hr>. To lahko naredimo povsod, kjer urejevalnik omogoča rejanje HTML (stran, forum, oznako, navodila ...) Nastane črta kot ta spodaj. Najpogosteje jo uporabimo za ločevanje vsebin na straneh ali v oznakah.

Kako dodamo barvno ozadje opozorilom?

Obarvana polja so primerna npr. za novice ali vsebine, ki jih želimo še posebej izpostaviti. Priporočljivo je, da je njihova uporaba le občasna in da upošteva simbolni pomen barv. Tako naj bi bilo npr. rdeče polje uporabljeno le za resna opozorila.

Zeleno ozadje smo oblikovali s kodo <p><div class="alert alert-success">Besedilo</div></p>

Modro ozadje smo oblikovali s kodo <p><div class="alert alert-info">Besedilo</div></p>

Oranžno ozadje smo oblikovali s kodo <p><div class="alert alert-warning">Besedilo</div></p>

Rdeče ozadje smo oblikovali s kodo <p><div class="alert alert-danger">Besedilo</div></p>

Kako dodamo gumbe?

S preprosto kodo lahko oblikujemo tudi gumbe, ki popeljejo obiskovalce naprej.

Gumb smo obilkovali s kodo <button>Oddaja nalog</button>, seveda mu je potrebno dodati še povezavo. (Označimo gumb in mu po običajni poti dodamo povezavo.)

Poleg spreminjanja besedila na gumbu, lahko spremenimo tudi barvo gumba. To storimo z naslednjimi kodami:

<p><a class="btn btn-primary" href="#link">Gumb, obarvan s primarno barvo
e-učilnic</a></p>
<p><a class="btn btn-success" href="#link">Opravljeno</a></p>
<p><a class="btn btn-info" href="#link">Informacije</a></p>
<p><a class="btn btn-warning" href="#link">Opozorilo</a></p>
<p><a class="btn btn-danger" href="#link">Prepoved</a></p>

Gumb, obarvan s primarno barvo e-učilnic

Gumbom lahko dodamo tudi ikone z brezplačnega nabora https://fontawesome.com/.

a class="btn btn-success" href="#link"><i class="fa fa-check-circle"></i>
Opravljeno</a></p>
<p><a class="btn btn-info" href="#link"><i class="fa fa-info-circle"></i>
Informacije</a></p>
<p><a class="btn btn-warning" href="#link"><i class="fa fa-warning"></i>
Opozorilo</a></p>
<p><a class="btn btn-danger" href="#link"><i
class="fa fa-exclamation-circle"></i> Prepoved</a></p>