Ali ste vedeli, da lahko v spletni učilnici Moodle poljubno oblikujete vsebino kar preko privzetega urejevalnika besedila? V današnjem petkovem namigu si bomo ogledali, kako deluje urejanje HTML kode v spletni učilnici Moodle. Ta možnost nam pride prav z več vidikov. Po eni strani lahko pripravimo vizualno bolj zanimive dele vsebine, po drugi strani pa lahko besedilo v spletni učilnici prilagodimo tako, da je primerno tudi za študente s posebnimi potrebami (npr. drugačna barva ozadja besedila, drugačna barva ali velikost besedila ipd.).

V današnjem namigu si lahko ogledate nekaj splošnih značilnosti urejanja HTML kode. V naslednjih dneh pa si bomo pogledali tudi bolj kompleksne primere – urejanje HTML kode v primeru uporabe tabel, slik ipd.

Osredotočili se bomo na ti. Atto HTML urejevalnik, ki je že nekaj časa privzeti urejevalnik v Moodlu. Ena izmed njegovih glavnih prednosti je, da se vse aktivnosti uporabnika sproti shranjujejo. Zato je postal med uporabniki spletne učilnice precej priljubljen. Tisti, ki pa so navajeni dela z orodno vrstico, se lahko odločijo za uporabo starejše različice urejevalnika, poimenovane TinyHTML.

Najprej si poglejmo, kaj vse nam Atto HTML urejevalnik omogoča:

Z modro so na sliki označene funkcionalnosti, ki smo jih vajeni tudi iz običajnih urejevalnikov besedila (npr. velikost pisave, krepka pisava, označevanje in oštevilčenje besedila, dodajanje povezav in izbris le-teh, dodajanje slik, videoposnetkov, takojšnje ustvarjanje zvočnih- in video posnetkov, dodajanje H5P aktivnosti, pod- in prečrtavanje besedila, uporaba nadpisanega in podpisanega besedila, poravnava besedila, urejanje zamika besedila, dodajanje matematičnih formul, tabel, preverjanje dostopnosti ustvarjene vsebine).

Če še niste vajeni uporabe urejevalnika, je dobro vedeti, da se nam privzeto prikaže samo prva vrstica urejevalnika (zajema funkcionalnosti, ki so najbolj pogosto uporabljene). Da si prikažemo vse funkcionalnosti, ki jih urejevalnik ponuja, moramo klikniti na prvo ikono v prvi vrstici orodne vrstice. Po kliku se nam orodna vrstica razširi in tako vidimo tudi drugi sklop funkcionalnosti.

Ikona, ki pa ponazarja možnost urejanja HTML kode ustvarjenega besedila, se nahaja na skrajni desni strani druge vrstice v orodni vrstici urejevalnika (označena kot </>).

Oglejmo si primer enostavnega besedila, ki smo ga pripravili brez uporabe HTML kode:

Vidimo, da imamo na sliki v prvi vrstici obarvano in krepko označeno besedilo. Druga vrstica je prazna. V tretji vrstici smo dodali navadno besedilo. Četrta vrstica je zopet prazna, v zadnji, peti vrstici, pa se nahaja besedilo, ki je v dveh delih obogateno s povezavo do zunanjega vira – prvič do e-poštnega naslova, drugič do spletnega vira. Zdaj si oglejmo, kako besedilo izgleda po prikazu HTML kode (torej takrat, ko v orodni vrstici kliknemo na ikono za ogled HTML kode – </>).

Kaj lahko opazimo? Vidimo lahko različne ti. značke ( in ), ki označujejo oz. definirajo posamezen element oz vsebino:

<p> … </p> –> značka, ki označuje navadno besedilo (ang. paragraph, od tod črka »p«) – tako bo vse, kar imamo navedeno med začetno in končno značko »p«, definirano kot navadno besedilo oz. odstavek.

<strong> … </strong> –> značka, ki definira ali gre za krepko pisavo ali ne (ang. strong, kar nam je poznano tudi pod izrazom »bold« oz. krepko) – tako bo vse besedilo, ki bo zapisano med začetno in končno značko »strong«, zapisano s krepko pisavo.

<span> … </span> –> značka, ki definira poseben del vsebine oz. besedila, ki ga lahko potem poljubno oblikujemo. V našem primeru na sliki je značka span uporabljena, ker smo del besedila (tj. prvo vrstico) obarvali z rdečo barvo.

Znotraj značke »span« lahko opazite nekaj dodatnih izrazov, ki jih lahko prepoznamo že po drugačni obarvanosti. Gre za atribute, ki nam o izbrani elementu, ki smo ga predstavili z značko, povedo več informacij. Atributi so vedno zapisani v začetni znački posameznega elementa:

• Class= »…« –> predstavlja atribut, ki definira razred elementa. Zanimiv je iz več vidikov, v Moodlu pa določa razred, ki lahko vsebuje specifične oblikovne nastavitve (definirane v ozadju in uporabnikom niso na voljo za spreminjanje). Tega atributa vam ni potrebno spreminjati.
• Style= »…« –> atribut, ki definira obliko elementa, nad katero pa imamo nadzor. Med dvojnima narekovajema lahko definiramo različne oblikovne lastnosti, ki potem veljajo za izbrani element. Tako je v našem primeru na sliki definirana barva, ki je nastavljena na rdečo barvo. Tako lahko na sliki vidimo, da je vse besedilo, ki je zapisano med značkama in , obarvano rdeče.
  • Color: rgb (…); ali Color: red; ali Color: #cb333b; –> izraz s katerim definiramo barvo pisave. Pisavo lahko v »računalniškem« svetu zapišemo na več različnih načinov:
    • Najbolj tipične oz. osnovne barve lahko zapišemo tudi z uporabniku prijaznim imenom (npr. red).
    • Druga možnost pa je določitev RGB formata barve. Sama kratica izhaja iz angleščine ter pomeni »red, green, blue«, ki so pa tudi osnovne barve omenjenega RGB modela. Vsaka od barv se lahko pojavi v 256 odtenkih. V zapisu v RGB formatu barvo definiramo s trojčkom, ki tako vsebuje tri vrednosti med 0 in 255, od katerih vsaka posamezna vrednost ponazarja osnovno barvo (npr. rgb(255, 0, 0) predstavlja rdečo barvo). Zapisa barve v RGB formatu vam ni potrebno poznati »na pamet«. Uporabite lahko kakšno spletno orodje in hitro odkrijete ustrezno oz. želeno barvo (npr. https://www.w3schools.com/colors/colors_picker.asp).
    • Tretja možnost je zapis barve v HEX formatu, ki nam zopet omogoča zapis treh osnovnih barv na način #RRGGBB, kjer so RR, GG, BB rdeča, zelena in modra barva, predstavljene v šestnajstiškem zapisu (npr. #ff0000 predstavlja rdečo barvo). Tudi v tem primeru vam HEX zapisa ni potrebno vedeti na pamet, ampak ga lahko poiščete s pomočjo različnih spletnih orodij (https://www.w3schools.com/colors/colors_picker.asp).

• Href= »…« –> atribut, znotraj katerega zapišemo povezavo do (spletnega) vira, za katerega želimo, da se ob kliku odpre.
• Target= »_blank« –> atribut, ki definira, na kakšen način se bo naša povezava odprla. V kolikor boste v opis atributa dodali izraz »_blank«, bo to pomenilo, da se bo povezava ob kliku odprla v novem zavihku.

S tem zaključujemo osnovno predstavitev funkcionalnosti vpogleda v HTML kodo. V naslednjih tednih bomo nadaljevali s predstavitvijo specifičnih možnosti, ki nam jih ponuja HTML urejevalnik besedila.

Do takrat pa vam želimo veselo raziskovanje!