HTML osnove
WordPress je tako napravljen, da ne morate da znate HTML. Kompletan dizajn je povezan sa temom koju ste izabrali. Međutim, ako želite da nešto promenite ili da pojedine delove dodatno istaknete, poželjno je da se upoznate sa HTML jezikom.
Evo i jednostavnog primera. Želim da istaknem definiciju HTML-a, da je uokvirim, da povećam slova koja će biti bela na crvenoj pozadini.
HTML je skraćenica od engleskih reči HyperText Markup Language, što u prevodu znači jezik za označavanje hipertekstova, odnosno tekstova sa linkovima, slikama, audio i video zapisima. Pomoću ovog jezika se u stvari definiše izgled stranica i sajtova na internetu.
Da bih dobio ovako oblikovan tekst, potrebno je da se napiše jednostavan HTML kod (crvena i plava slova) kao na slici dole. Morate da priznate da je jednostavno.
U drugom primeru želim da blok teksta bude sa crnom pozadinom i belim slovima. Naslov treba da bude crvene boje i trostruko uvećan.
Zašto je važno da upoznate HTML
HTML osnove može da nauči bilo ko. Programski kod se unosi u bilo kom tekst editoru bez formatiranja (npr. Notepad). U slučaju da vam se svidi neka stranica na internetu, uvek možete da pogledate njen kod (View page source) i primenite slično. Evo još nekoliko činjenica za učenje HTML-a.
- Nije potrebno nikakvo predznanje.
- HTML osnove možete da naučite za mesec dana.
- Kasnije će te lako savladati napredne tehnike.
- Poznavanje HTML-a je preduslov za učenje CSS-a i JavaScript-a koji su danas veoma popularni.
Ovakav izgled se takođe postiže na veoma jednostavan način, i prikazan je na slici dole.
HTML kod, koji ste videli na slikama gore, u WordPress-u se unosi klikom na Text u gornjem desnom uglu, koji se vidi prilikom kreiranja posta ili strane.
Prethodna dva primera su tu samo da bi videli da nije teško da dodate HTML kod na vašu stranicu i napravite dizajn kakav želite. Početak je ovde.
HTML elementi i atributi
HTML komande se pišu pomoću tagova i ukazuju browseru kako da prikaže sadržaj na internet stranici (da li je to naslov ili paragraf, slika, link, tabela, …). Tagovi se unose izneđu uglastih zagrada <ime taga> na početku i na kraju određenog dela sadržaja koji formatirate, s tim što završni tag ima i kosu crtu </ime taga>. (Ove uglaste zagrade su u stvari znakovi “manje od” i “veće od”.)
Svi HTML elementi mogu da imaju atribute koji ih dodatno opisuju. Atributi se uvek smeštaju u startnom tagu i uglavnom su u paru ime-vrednost. Sintaksa je atribut=”vrednost”.
Preporuka je da se elementi i atributi pišu malim slovima.
Pre nego što krenemo sa konkretnim primerima elemenata i atributa, važno je da znate kako izgleda struktura HTML strane.
Struktura HTML strane
<!DOCTYPE html> na počeku deklariše dokument kao HTML5, a to je u stvari najnoviji standard HTML-a koji ima mnogo više mogućnosti, i objedinjuje tri tipa koda: HTML, CSS i JavaScript. HTML obezbeđuje strukturu dokumenta, CSS (Cascading Style Sheets) je zadužen za izgled sajta, a JavaScript omogućava dodatnu funkcionalnost sajtu.
Na početku svake strane je obavezan <html> tag, dok je na kraju </html>. Između ova dva taga se smeštaju svi ostali elementi. Struktura je takva da imamo zaglavlje (head) i telo (body) strane.
Zaglavlje je smešteno između tagova <head> i </head> i ono se ne prikazuje u browseru već samo sadrži neke informacije o stranici. Npr. naslov stranice se smešta između tagova <title> i </title>.
Telo stranice, odnosno sve ono što se vidi u browseru, se smešta između tagova <body> i </body>. To mogu da budu: naslovi, paragrafi, liste nabrajanja, slike, linkovi, tabele, forme. Za sve nabrojano postoje posebni tagovi.
HTML naslov
H tagovi se koriste za naslove i podnaslove. Oni određuju stil i veličinu fonta koji će se koristiti. Rezervisani su tagovi od h1 do h6, i evo kako to izgleda:
| HTML kod | Izgled |
|---|---|
| <h1>Ovo je naslov sa h1 tagom </h1> |
Ovo je naslov sa h1 tagom |
| <h2>Ovo je naslov sa h2 tagom </h2> |
Ovo je naslov sa h2 tagom |
| <h3>Ovo je naslov sa h3 tagom </h3> |
Ovo je naslov sa h3 tagom |
| <h4>Ovo je naslov sa h4 tagom </h4> |
Ovo je naslov sa h4 tagom |
| <h5>Ovo je naslov sa h5 tagom </h5> |
Ovo je naslov sa h5 tagom |
| <h6>Ovo je naslov sa h6 tagom </h6> |
Ovo je naslov sa h6 tagom |
Naravno, ukoliko kod dodajete u WordPress-u, stil se nasleđuje od teme, što može da se promeni atributima, ali o tome će mo kasnije.
HTML paragraf
Da bi uneli bilo koji paragraf teksta, potrebno je da taj isti tekst stavite između tagova <p> i </p>. Ono što je važno da znate je da browser ignoriše bilo kakvo formatiranje (slično onome u wordu). To znači da kako god otkucate tekst, on će se prikazivati kao običan paragraf. Takođe, prelom reda zavisi od veličine prozora.
Evo kako izgleda prikazivanje prethodnog koda. Dodata je samo crna pozadina sa belim slovima, kako bi se razlikovao kod od prikaza u brovseru.
Ovaj paragraf sadrži puno razmaka i entera ali će ih browser ignorisati.
Kada pišete nešto u npr. Notepad-u, u novi red prelazite pritiskom na Enter. Međutim na internet strani se to ne dešava. Da bi prešli u novi red, potrebno je da koristite tag br
koji ne zahteva završni tag.
U novi paragraf prelazite tako što ponovo primenite tag p kao u ovom primeru. Prelom reda možete uraditi na dva načina koja su prikazani dole.
Ovo je
prvi način
za prelazak u novi red.
Drugi način je da koristite tag pre koji vam omogućava da tekst ostane onako kako ste ga uneli. Evo i primera.
Iza svih ovih rečenica je pritisnut Enter.
U ovoj rečenici su tabovi.
Ovde je po nekoliko razmaka.
HTML liste
Kreiranje liste, odnosno nabrajanje, je slično kao u Wordu (Bullets i Numbering). Za kreiranje liste sa znakovima Unordered List koriste se tagovi <ul> i </ul>, a za listu sa brojačem stavki (brojevi ili slova) Ordered List koriste se tagovi <ol> i </ol>. Stavke liste List Item se kod obe liste smeštaju između tagova <li> i </li>.
U narednom primeru su dve takve liste. Iskoristio sam priliku da nabrojim neke činjenice povezane sa tabelama, jer se sledeći podnaslov upravo odnosi na kreiranje tabela pomoću HTML koda.
- Tabela se sastoji iz kolona i vrsta.
- U HTML-u se prvo definišu vrste.
- U okviru vrste se definišu ćelije.
- Ove ćelije sada postaju kolone.
- Na ovaj način se kreira tabela.
- Prvo se definiše prva vrsta tabele (Table Row).
- Prva vrsta je uvek zaglavlje (Table Heading).
- Sada se unosi druga vrsta (Table Row).
- Za drugu vrstu se sada unose podaci (Table Data).
- I tako ponavljamo postupak onoliko puta, koliko imamo vrsta.
HTML tabele
Tabela se u HTML-u kreira pomoću tagova <table> i </table>. Za definisanje vrste u tabeli (Table Row), koriste se tagovi <tr> i </tr>. Između ova dva taga se smeštaju podaci (Table Data) u okviru tagova <td> i </td> i to onoliko puta, koliko imate kolona. Izuzetak je prva vrsta jer ona opisuje zaglavlje tabele (Table Heading), pa su za podatke u zaglavlju rezervisani tagovi <th> i </th>.
Primer na slici dole prikazuje kako je kreirana tabela iznad, a koja se odnosi na opis naslova u HTML-u. Vidi se da je u tabeli prva vrsta zaglavlje i da tabela ima dve kolone “HTML kod” i “Izgled”. Shodno ovome, u drugoj vrsti (i svim ostalim) unosimo po dva puta podatke jer imamo dve kolone.
HTML slike
U WordPressu je vrlo jednostavno da ubacite sliku, što je objašnjeno u prethodnoj lekciji “Pisanje postova”. Ovde posebno mislim na podešavanje dimenzija, ravnanja i preloma sa tekstom. Pomoću HTML koda, ovaj postupak je nešto složeniji i izgleda ovako.
Slike se u HTML kod ubacuju pomoću taga <img>, i što je specifično, ovde se ne koristi zatvarajući tag.
Atribut src je obavezan, i on definiše putanju do fajla slike. Ukoliko je slika u istom folderu gde i web stranica, dovoljno je da stavite samo ime fajla (npr. src=”Slika1.jpg”). Ako je slika u nekom posebnom folderu za slike, onda je potrebno da stavite putanju do slike (npr. src=”/slike/Slika2.jpg”). Postoji i slučaj da sliku “vučete” sa drugog sajta. U tom slučaju morate da napišete celu url putanju do slike kao u ovom primeru. U istom primeru je i prelom slike i teksta, zbog čega je slika u istom paragrafu sa tekstom.
Alt daje opis slike u slučaju da se ista ne učita iz nekog razloga. Preporuka je da se koristi jer će se vaša stranica bolje kotirati kod pretraživača. Dimenzije slike se definišu pomoću width i heigh, i poželjno je da ih koristite kod velikih slika. Pomoću float definišete ravnanje, i u ovom primeru slika je postavljena desno od teksta zato što su i slika i tekst u okviru istog paragrafa.
Na istu sličicu sam pomoću sledećeg koda dodao i link ka w3schools.com, ali o linkovima u nastavku teksta.
HTML linkovi
Osnovna snaga HTML dokumenata je upravo u mogućnosti povezivanja sa drugim stranicama i dokumentima. Linkovi su u stvari veze ka drugim stranicama i u browseru su, u odnosu na običan tekst, uvek drugačije označeni (ili su podvučeni ili je font druge boje ili …). Pored teksta, link može da se postavi i na sliku što je pokazano u gornjem primeru. Linkovi mogu da budu interni ili eksterni, što zavisi od toga da li ukazuju na stranice u okviru istog sajta ili vode na drugi sajt.
Ono što želite da bude link (najčešće je to tekst), smeštate između tagova <a> i </a>. Sintaksa je kao na slici dole. Ukoliko postavljate link ka nekom drugom sajtu, poželjno je da pomoću target=”_blank” podesite da se isti otvara u drugom tabu je u suprotnom čitalac napušta vaš sajt.
Ovde sam iskoristio priliku da kažem nešto o komentarima, koji su na slici gore predstavljeni zelenom bojom. Komentar može da se unese u HTML kod, ali se ne prikazuje na stranici, i služi kao podsetnik ili objašnjenje za neki termin. Npr. ako ste posle izvesnog vremena ušli u kod da nešto prepravite, komentar (ako ste ga ranije uneli) može da vas podseti i pomogne da nešto lakše pronađete i izmenite.
Elementi za formatiranje teksta
Formatiranje teksta je slično kao u Wordu. Rzlika je samo u tome, što se u HTML kodu delovi teksta smeštaju između tagova. U strong tagu tekst se prikazuje isto kao i bold, ali se on koristi kada je nešto veoma važno.
Ovako se precrtava tekst. Deo teksta može da bude iskošen. Možete da koristite i subscript i superscript (npr. H2O ili X2).
Kada je formatiranje boja u pitanju, pogledajte okvir dole i isprobajte mogućnosti. Usput, ovo je još jedna mogućnost HTML koda koja pomoću taga <iframe> prikazuje neku web stranu u okvitu tekuće stranice. Sintaksa je <iframe src=”https://www.w3schools.com/html/html_colors.asp” height=”400” width=”595”></iframe>
Stilovi u HTML kodu i CSS
CSS (Cascading Style Sheets) je stilski jezik koji opisuje kako će HTML elementi biti prikazni na web stranici. Dakle, HTML definiše samo sadržaj, odnosno ukazuje da li je nešto npr. naslov ili paragraf ili tabela…, a za njihov izgled je zadužen CSS. Bez obzira što su ovo dve različite teme, one se uvek prepliću i praktično su nerazdvojive, što se vidi u primerima gore, gde sam morao da koristim i stilove kako bih vam bliže objasnio pojedine radnje.
U ovoj lekciji, HTML osnove, tema nije CSS ali je ovde važno samo da steknete sliku o tome šta je CSS i koje su njegove prednosti. Postoje tri načina da opišete HTML elemente pomoću CSS-a:
- INLINE (u HTML element se ugrađuje atribut style)
- INTERNAL (koristi se poseban HTML element <style> koji se ugrađuje na početku dokumenta u sekciji za zaglavlje i koja se ne prikazuje u browseru tj. između tagova <head> i </head>)
- EXTERNAL (koristi se posebna datoteka sa ekstenzijom CSS za kompletan opis sajta)
Ovo poslednje je i najbolje, jer promenom nekoliko parametara, možete da promenite izgled celog sajta. Međutim, za ovaj nivo učenja, to je dosta složeno, pa se zadržavamo samo na INLINE CSS jer lako možete da probate to što uradite. Evo i kako.
WYSIWYG (What-You-See-Is-What-You-Get)
Pre nego što objavite stranicu na internetu, poželjno je da proverite njen izgled u browseru. Jedan od načina je da u npr. Notepad-u otkucate kod i snimite dokument kao HTML. Dalje, taj dokument otvorite pomoću nekog browsera i vidite kako izgleda. (Ono što vidite, to i dobijete.)
Drugi način, koji je po meni mnogo lakši i praktičniji za početnike, je da koristite neki Online HTML editor. Otkucate kod, pomoću Copy/Paste unesete u editor, i pokrenete Run. Najčešće je ekran podeljen na dva dela, tako da u jednom delu imate kod, a u drugom delu izgled stranice. Ovakvih besplatnih editora ima puno, a jedan primer je na linku https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
Radi probe, iskopirajte kod iz donjeg primera i proverite kako funkcioniše.
Inline CSS
Ako pogledate prva dva primera u ovom tekstu, videćete da je u oba primenjen atribut style. Ovaj atribut se unosi u start tagu, a sintaksa je <imetaga style=”svojsto: vrednost;“>. Glavna prednost je što možete da definišete više svojstava. Evo i primera (ukoliko vam ne radi kod, prekucajte samo znakove navoda u online editoru, jer WordPress pravi određene izmene pa nastaju problemi):
<h1 style=”background-color:yellow;”> Ovo je naslov na žutoj pozadini</h1>
<p style=”background-color:blue;color:white;”> Prvi paragraf je na plavoj pozadini, s tim što su slova bele boje. To znači da smo pomoću stila podesili dva svojstva.</p>
<p style=”color:red;”>Ovaj paragraf je standardan. Samo su slova crvene boje. Da smo u start tagu p-elementa izostavili atribut style, slova bi po difoltu bila crne boje.</p>
<p style=”border:3px solid black; margin:20px; color:blue; background-color:orange; font-size:130%; padding:20px;”> U ovom paragrafu je većina svojstava koja se često koriste: <b>border, margin, color, bacground-color, font-size</b>. Tu su još i: <b>font-family, padding, … </b></p>
<p>Radi lakšeg shvatanja prethodnih (uokvirenih) pojmova vezanih za stil, posetite link <a href=”https://www.w3schools.com/css/css_boxmodel.asp” target=”_blank”> Box model</a>.</p>
DIV i SPAN elementi
Za razliku od predhodnog primera sa box modelom, najveći deo teksta na stranicama je organizovan preko “blokova”. To znači da se tekst prostire celom širinom strane, odnosno od početne leve do krajnj desne pozicije. Ako neki odeljak teksta smestite u element DIV imate mogućnost da pomoću atributa style taj isti odeljak formatirate po vašoj želji. Upravo to sam i ja koristio u ovom tekstu za odeljke koji su sa crnom pozadinom.
Sa druge strane, ako ne želite da formatirate ceo sadržaj nekog elementa već samo jedan deo (npr. jedna reč ili rečenica treba da bude crvene boje a ne ceo paragraf) onda taj isti deo treba da umetnete u element SPAN kao u prethodnom paragrafu.
Evo i kako je urađen poslednji naslov.
Ovo je dovoljno za početak. Ukoliko vam se svideo tekst, kliknite Like.
