Otisni knjiguOtisni knjigu

Tekstni elementi

Sjedište: Loomen - Usavrsavanje
E-kolegij: Osnove HTML-a
Knjiga: Tekstni elementi
Otisnuo/la: Gost (anonimni korisnik)
Datum: srijeda, 18. prosinca 2024., 21:06

Opis

Različiti dijelovi teksta: naslovi, podnaslovi, obični odlomci. Podebljani i ukošeni tekst, tekst u obliku popisa.

Sadržaj

O ovom poglavlju
Web sjedište je teško ili čak nemoguće zamisliti bez tekstnih elemenata. U ovom ćemo poglavlju pokazati kako se oblikuje tekst pomoću HTML oznaka.

U sljedećim lekcijama predstavit ćemo vam najvažnije oznake za uređivanje teksta. Bit će riječi o razmacima i prijelomima redova, a one koji ipak žele znati nešto više pripremili smo još lekciju o posebnim znakovima u bonus poglavlju.

Ishodi učenja

Nakon ovog poglavlja moći ćete:

  • postaviti meta oznaku za željeni način kodiranja znakova, namjestiti postavke editora tako da vam stranicu spremi u tom načinu kodiranja i razumjeti zašto je ova natuknica važna
  • podebljati i ukositi dio teksta
  • postaviti naslove i podnaslove na svoju stranicu
  • razlikovati prijelom reda od prijeloma odlomka u prikazu web stranice bez oblikovanja (čistom HTML-u)
  • napisati tekst sastavljen od nekoliko odlomaka, kao i tekst s prelomljenim redovima
  • opisati kako HTML shvaća razmake, te redovito primjenjivati HTML-ovo poimanje razmaka u cilju povećanja preglednosti vlastitog HTML kôda
  • spojiti (ili razdvojiti, ovisno o tome kako se gleda) dvije uzastopne riječi nelomljivim razmakom
  • odgovarajuće sadržaje oblikovati kao predefinirani tekst
  • postaviti popise – numerirane, nenumerirane i definicijske
  • napisati posebne znakove pomoću najčešće upotrebljavanih HTML oznaka i potražiti oznake za druge znakove.

Aktivnosti u ovom poglavlju

U ovom vas poglavlju, za razliku od prethodnih, očekuje malo teorije i puno primjera. Predlažemo vam da primjere prepišete i provjerite na svom računalu. Namjerno kažemo „prepišete”, a ne „kopirajte” jer prepisivanjem sebe i svoje prste navikavate na način pisanja HTML-a, osobito na šiljaste zagrade i kose crte.

Osim navedenog, tu su i vježbe u svakoj lekciji, te ispit znanja na kraju poglavlja. Njih također odradite, po potrebi vraćajući se na odgovarajuću lekciju.
CARNet - puni naziv i logo

Definiranje načina kodiranja znakova
     

Vjerojatno ste barem jedanput u svojoj surferskoj karijeri naišli na stranicu na kojoj se hrvatski znakovi nisu prikazivali ispravno. Do toga dolazi kad način kodiranja znakova nije (ispravno) definiran, pa se za prikaz teksta koristi pogrešna tablica znakova.

Pišete li tekst na svojim stranicama na hrvatskom jeziku, bit će vam potrebni znakovi poput č, ć, đ, š i ž, kojih u engleskoj abecedi nema. Ako ne definirate ispravno način kodiranja znakova, umjesto njih će se web preglednici posjetiteljima prikazivati neke druge znakove i vaš će tekst učiniti teško čitljivim.

primjer 40

Izbor načina kodiranja i
obavijest web preglednicima posjetitelja

Način kodiranja znakova zapisuje se u meta oznaci unutar zaglavlja dokumenta. Općenito, meta oznakama opisujemo našu stranicu ili dajemo određene upute preglednicima i pretraživačima. U ovom ćemo slučaju reći korisnikovu pregledniku da za dekodiranje stranice upotrebljava tablicu znakova Unicode koja uključuje znakove iz mnogih svjetskih jezika i to, konkretno, način kodiranja utf-8.

Upotrebom kodiranja Unicode moći ćete na svojim stranicama spominjati ljude iz raznih krajeva svijeta pišući njihova imena izvorno, tj. upotrebljavajući sve znakove koje upotrebljavaju i oni sami kad se potpisuju: Dvořák, Ångström i drugi.

Više o meta oznakama bit će riječi na naprednim CARNetovim tečajevima. Zasad je dovoljno da znate da meta oznake nemaju završni dio i da ih opisuju dva atributa – http-equiv i content. Meta oznaka kojom ćemo definirati način kodiranja izgledat će ovako:

<meta http-equiv="Content-Type"
      content="text/html; charset=utf-8">

U upotrebi su (bili) i drugi načini kodiranja koji omogućavaju pisanje i prikaz naših znakova, no u njima možete pisati samo znakove koji su u upotrebi u zemljama geografski bliskim našoj.

To su kodiranje iso-8859-2, koje predstavlja međunarodni standard, te windows-1250, koje je stvoreno u tvrtki Microsoft.

Pohranjivanje stranice
izabranim načinom kodiranja

Da bi web stranica bila ispravno prikazana, treba još istim načinom kodiranja stranicu i pohraniti. Naime, da bi se tekst zapisao u računalu, on se pretvara u brojeve, kodira. Način kodiranja pri pohranjivanju stranice mora biti isti kao način kodiranja koji smo naveli u meta oznaci, tj. onaj kojim će se stranica pretvoriti u svima čitljive znakove.

Dakle, editor koji upotrebljavate za pisanje kôda mora podržavati izabrani način kodiranja znakova, te ga u editoru trebate postaviti kao način pohranjivanja podataka.

Ako upotrebljavate editor Notepad++, prije početka pisanja web stranice izaberite Format > Kodirati u UTF-8. Još je bolje od toga izabrati to kodiranje za sve dokumente koji će biti stvarani: Postavke > Postavke... > kartica Novi dokument/Otvaranje/Pohranjivanje, pa izabrati UTF-8 iz skupine Kodiranje.

Ako upotrebljavate editor SharePoint Designer, pretpostavljamo da prema preporukama radite s web sjedištem, a ne s pojedinačnim stranicama. U tom slučaju iz izbornika Site otvorite Site Settings, te tamo na kartici Language pod Default page encoding namjestite UTF-8. Inače je ista kartica, ali koja se odnosi samo na jednu stranicu, dostupna i desnim klikom na stranicu u pogledu Design > Page properties ili promjenom podataka u meta oznaci.

Otvorite u editoru datoteku  osnovni_kod.htm te uz osnovni HTML kôd definirajte i način kodiranja znakova. Pripazite da se meta oznaka nalazi u zaglavlju dokumenta.

Budući da editori ne moraju uvažavati sadržaj vašeg HTML dokumenta, prije spremanja dokumenta ne zaboravite zadati editoru da ćete raditi s UTF-8 kodiranjem.

Konačno, promijenite tekst u tijelu dokumenta tako da sadrži naša slova. Spremite datoteku, te je otvorite u web pregledniku dvoklikom na njezino ime. Provjerite prikazuju li se ispravno naša slova.

UPUTA:

Ako na vašoj stranici nisu ispravno prikazana naša slova, prvo provjerite nalaze li vam se sve oznake na pravim mjestima. To se prije svega odnosi na meta oznaku koja se treba nalaziti u zaglavlju dokumenta, tj. između oznaka <head> i </head>.

Nakon toga u editoru provjerite jeste li spremili dokument s pravim kodiranjem. U programu Notepad++ to se radi tako da potražite točkicu u izborniku Format. Ako je na pogrešnom mjestu, pretvorite dokument u odgovarajuće kodiranje funkcijom Format > Pretvoriti u UTF-8.

Ako ste dokument spremili kodiranjem Unicode (UTF-8), noviji web preglednici će ga prepoznati bez obzira na meta oznaku.

CARNet - puni naziv i logo

Uređivanje teksta
     

Podsjetimo se da se sav sadržaj naših stranica koji se prikazuje u web pregledniku nalazi u tijelu dokumenta, unutar oznake <body>. Napišite stoga neki tekst unutar te oznake, spremite datoteku i provjerite kako taj vaš tekst preglednik prikazuje.

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
<html>

<head>
<title>Dokument za testiranje</title>
</head>

<body>
Testing, testing. 1, 2, 3. Testing!
</body>

</html>

primjer 17

Da bi bio potpuno ispravan, ovaj ćemo primjer kasnije morati malo nadopuniti.

Tekst ćemo ponekad htjeti ukositi ili podebljati. To postižemo tako da željenu riječ ili više riječi omeđimo oznakama <i> za ukošavanje (italic) i <b> za podebljavanje (bold). Tekst možemo istaknuti i oznakama <em> (emphasize), koja se najčešće ukosi slova, te <strong>, koja ih najčešće podeblja.

Danas se preporuča upotreba potonjih dvaju oznaka jer one ističu značenje teksta, a ne oblikovanje. Oblikovanje se, kao što je već više puta naglašeno, opisuje na drugom mjestu, u CSS datoteci, a naglašavanje ima i druge funkcije, poput promjene načina čitanja teksta čitača za slijepe i slabovidne.

Podvlačenje teksta, često upotrebljavano u raznim programima za pisanje, u HTML-u je proglašeno zastarjelim.

Dva su razloga: podvlačenje je uobičajena oznaka za linkove (koji se podvlače automatski), te crta uz tekst otežava čitanje pojedinih slova.

Ovo je <strong>moj</strong> tekst. Ponekad je malo <i>ukošen</i>, a ponekad <b>podebljan</b>. Poželim li to, mogu ga, primjerice, učiniti istovremeno <i><b>i podebljanim i podvučenim</b></i>.

primjer 05

Otvorite u editoru datoteku osnovni_kod.htm te je spremite u istu mapu u kojoj se nalazi original pod imenom oblikovanje_teksta.htm.

Podebljajte jednu riječ rečenice koju ste napisali unutar oznake <body>, te jednu riječ ukosite.

Spremite datoteku, te je dvoklikom na njezino ime u popisu datoteka otvorite u web pregledniku.

Ukošena i podebljana slova su na mjestu, ali ćete možda primijetiti da se tekst koji ste napisali prikazuje fontom koji niste sami odredili, te da se u različitim preglednicima, odnosno na različitim operacijskim sustavima, možda prikazuje različito. To je posljedica činjenice da je HTML jezik za opis strukture dokumenta, a da se izgled dokumenta određuje drugim sredstvima.

Ako želimo promijeniti boju, font ili veličinu teksta, morat ćemo HTML datoteci dodati opis stilova, CSS datoteku. Jezik CSS sadržaj je posebnog tečaja, koji preporučamo da ga prođete nakon završenog ovog tečaja.

Ipak, posebnim se dijelovima teksta izgled može promijeniti i HTML-om, o čemu je bilo riječi u ovoj, a bit će i u sljedećoj lekciji.
CARNet - puni naziv i logo

Naslovi
     

HTML 4.01 nam dopušta definiranje naslova u šest razina i to upotrebom oznake <hn>, gdje je n broj od 1 do 6. Tako ćemo, na primjer, glavni naslov definirati oznakom <h1>, a podnaslove oznakama od <h2> do <h6>.

<h1>Osnove HTML-a</h1>
Dobrodošli na CARNetov online tečaj „Osnove HTML-a”. Upoznajmo se pobliže s tečajem.
<h2>Ukratko o tečaju</h2>
Ovaj tečaj je zakon.

primjer06

Obratite pažnju na prikaz naslova. Naslovi se, ovisno o njihovoj važnosti koju definiramo brojem uz slovo h (engl. heading), prikazuju u različitim veličinama. Naslovi s najmanjim brojem su najveći, a oni s najvećim – najmanji. Također, naslovi se prikazuju masno otisnuti, iako to nismo posebno definirali oznakom <strong>. Primijetit ćete i da se naslovi automatski vertikalno vizualno „odvajaju” od ostatka teksta.

U dokumentu oblikovanje_teksta.htm definirajte glavni naslov (h1) i šest podnaslova dviju razina (h2 i h3). Provjerite kako se naslovi prikazuju u web pregledniku.

Iza svakog naslova postavite još i malo teksta izvan naslova. Spremite stranicu, te je pregledajte u web pregledniku.

Usporedbe radi, pogledajte element title zaglavlja vaše web stranice te uočite gdje se on pojavljuje pri prikazu u pregledniku.

UPUTA:

Ako ne možete pronaći tekst koji se nalazi u elementu title, ponovite lekciju Osnovni HTML kôd.

CARNet - puni naziv i logo

Prijelom reda i prijelom odlomka
     

„Prebacimo” li se unutar HTML kôda u novi red, naš pokušaj neće biti vidljiv u web pregledniku. Uostalom, kao što smo spomenuli, kôd cijele stranice može biti napisan i u jednom jedinom retku. Ipak, može se završiti red i nakon toga početi pisati u novom redu, a o načinima prelaska u novi red govori ova lekcija.

Odlomak

Tekstove možemo posložiti u odlomke ili paragrafe oznakom <p>. Pritom preglednici odlomke međusobno odvajaju vertikalnim razmakom, čime čitatelju olakšava snalaženje u tekstu.

<p>Odlomak se sastoji od nekoliko gusto poslaganih redaka iza kojih slijedi vertikalni razmak prije početka sljedećeg odlomka.</p>
<p>Odlomke web preglednik najčešće poravna uz lijevi rub – tko želi obostrano poravnavanje ili centriranje odlomaka mora posegnuti za sredstvima izvan jezika HTML.</p>

primjer 09

Prema strogom standardu HTML 4.01 sav se tekst dokumenta mora nalaziti unutar elemenata kao što su, od zasad poznatih, p, h1, h2, h3 itd. To je i logično, zar ne?

Novi redak

Želimo li prijeći u novi redak bez prijeloma odlomka, na mjestu gdje želimo prekid dodat ćemo oznaku <br> (engl. break). Ta oznaka nema završni dio.

Dobro došli na CARNetov online tečaj!<br>Upoznajmo se pobliže s tečajem.

primjer 08

U novi HTML dokument dodajte obavezne elemente te napišite pjesmu. Prisjetite se, pisanje ćete započeti otvaranjem datoteke s pripremljenim HTML kôdom, osnovni_kod.htm.

Pjesma mora imati naslov, pojedini stihovi trebaju biti odvojeni prijelomom reda, a svaka kitica treba biti jedan odlomak.

Dokument spremite pod imenom pjesma.htm u istu mapu u kojoj se nalaze i vaše prethodne vježbe.

Nemojte zloupotrebljavati prijelom reda. Tekst se u pravilu dijeli na odlomke i nikakvi dodatni prijelomi redaka nisu uobičajeni (iako su bili uobičajeni u starijim verzijama nekih editora).

Ako vam je razmak između odlomaka prevelik, možemo vas utješiti da se on vrlo lako može smanjiti ili čak ukloniti jednim potezom alatom za oblikovanje teksta – CSS-om. Kako se to radi, možete naučiti odmah nakon završetka ovog tečaja.
CARNet - puni naziv i logo

Razmaci



Svi razmaci u tekstu unutar HTML-a u pregledniku se prikazuju kao jednostruki, pa čak i kada ih unesemo nekoliko (desetaka), jednako kao što se ne vide niti prelasci u novi red. U ovoj lekciji sprijateljit ćemo se s jednom novom oznakom i jednom „malom tajnom”.

Otvorite datoteku oblikovanje_teksta.htm te između ili između riječi i oznaka dodajte razmake po želji. Spremite dokument pod imenom oblikovanje_teksta_razmaci.htm.

U HTML kôd možete dodati i prijelome redaka tipkom [enter].

Otvorite u jednom prozoru preglednika polaznu stranicu, a u drugom izmijenjenu, te ih usporedite.

Nelomljivi razmak

Da biste prisilili preglednik da prikaže više uzastopnih razmaka, umjesto razmaka unutar HTML koda možete napisati poseban znak, &nbsp; (nonbreaking space). Poredate li nekoliko na taj način napisanih razmaka jedan iza drugoga, svaki od njih bit će vidljiv u web pregledniku.

Vidi ti&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to!

primjer 10

Upotrebom ove vrste razmaka možete izbjeći i neželjeni prijelom teksta između dviju ili više riječi.

To činimo najčešće kod niza riječi koje predstavljaju imena ili nazive, a osobito onih koje sadrže brojeve: Henrik&nbsp;VIII., I.&nbsp;svjetski rat i sl.

U dokumentu oblikovanje_teksta.htm napišite nekoliko rečenica o XX. stoljeću bez upotrebe nelomljivih razmaka.

Spremite dokument, prikažite ga u web pregledniku, te mijenjajte veličinu prozora preglednika. U jednom će vam trenutku broj „XX.” ostati u gornjem redu, a „stoljeće” u drugom. Takav tekst djeluje čudno, zar ne?

Ponovno otvorite dokument u editoru te stavite nelomljivi razmak umjesto običnog iza broja „XX.”. Spremite datoteku i ponovite pokus u pregledniku.

Predefinirani tekst

Ponekad želimo da se tekst napisan unutar HTML koda jednostavno prikazuje onako kako je napisan – sa svim razmacima i prijelazima u novi red. To ćemo postići korištenjem oznake <pre>. Sve što omeđimo ovom oznakom izgledat će upravo onako kako izgleda unutar samog koda. Ova će oznaka i promijeniti font u neki od fontova kod kojeg su svi znakovi jednake širine (npr. u Courier).

<pre>
Vidi ti to! Tko bi
rekao da ovo doista
radi!
</pre>

primjer 35

Predefinirani tekst se vrlo često upotrebljava pri pisanju dijelova programskog kôda.

U dokumentu oblikovanje_teksta.htm napišite nekoliko rečenica o svome gradu. Oblikujte tekst kreirajući poglavlja i koristeći prelazak u novi redak.

Ako se bavite programiranjem, dodajte jednu if naredbu ili petlju u svoj tekst i oblikujte je onako kako biste to učinili da pišete program.
CARNet - puni naziv i logo

Popisi
     
Numerirani, nenumerirani ili pak one definicijski, prije ili kasnije ćete ih zatrebati. Popisi su često neophodni, a u HTML-u ih je vrlo jednostavno definirati.

Numerirani popisi

Koristimo ih kada želimo nabrojiti pojmove za koje nam je važan redoslijed. Da bismo ih definirali, bit će nam potrebne dvije vrste oznaka – jedna kojom ćemo definirati početak i kraj popisa, a druga kojom ćemo definirati svaki element popisa.

Početak i kraj numeriranog popisa definirat ćemo oznakom <ol> (engl. ordered list), dok ćemo elemente popisa definirati oznakom <li> (engl. list item), koju koristimo za svaki novi element popisa:

<ol>
   <li>Numerirani popisi</li>
   <li>Nenumerirani popisi</li>
   <li>Definicijski popisi</li>
</ol>

primjer 11

Otvorite datoteku osnovni_kod.htm i spremite je pod imenom popisi.htm.

U novostvorenom dokumentu nakon odgovarajuće uvodne rečenice napišite popis vaših pet omiljenih filmova počevši s najomiljenijim.

Nenumerirani popisi

Nenumerirane popise u pravilu upotrebljavamo kad su članovi popisa ravnopravni, odnosno kad nije važno koji je element prvi, a koji posljednji.

Nenumerirani popis definirat ćemo na isti način kao i numerirani, samo ćemo umjesto oznake <ol> koristiti oznaku <ul> (engl. unordered list).

<ul>
   <li>Numerirani popisi</li>
   <li>Nenumerirani popisi</li>
   <li>Definicijski popisi</li>
</ul>

primjer 14

U datoteku popisi.htm nakon odgovarajućeg uvoda dodajte popis knjiga za koje smatrate da ih svatko treba pročitati (bez obzira na redoslijed čitanja).

Definicijski popisi

Definicijski popisi malo su složeniji, pa je za njihovu definiciju potrebna i jedna oznaka više.

Početak i kraj definicijskog popisa definirat ćemo oznakom <dl> (engl. definition list). Pojam koji definiramo okružit ćemo oznakom <dt> (engl. definition term) a definiciju pojma oznakom <dd> (engl. definition data).

<dl>
  <dt>Onomatopeja</dt>
     <dd>Oponašanje zvukova iz prirode.</dd>
  <dt>Personifikacija</dt>
     <dd>Davanje ljudskih osobina životinjama,
         stvarima, biljkama i pojavama.</dd>
</dl>

primjer 16

Nabrojite i objasnite sve oznake za definiranje definicijskog popisa!
CARNet - puni naziv i logo

Bonus: Posebni znakovi
     

Kao što razmak možemo zamijeniti kodom (&nbsp;), tako i neke druge znakove možemo napisati koristeći njihov kôd. Donosimo tablicu najčešćih posebnih znakova:

Znak Kôd
  &nbsp;
& &amp;
© &copy;
® &reg;
> &gt;
< &lt;
" &quot;
± &plusmn;
€ &euro;
£ &pound;
¢ &cent;
– &ndash;
— &mdash;

Ako su vaše stranice kodirane standardom Unicode, većina ovih znakova vam neće trebati jer ćete ih moći upisati kao uobičajene znakove. Ipak, postoje nekoliko iznimaka od kojih ističemo dvije:

  • možda ne znate koje tipke treba pritisnuti na tipkovnici da bi se dobio poneki od ovih znakova

  • možda ćete se susresti s pisanjem o HTML-u, pa ćete morati pisati o šiljastim zagradama za koje postoji opasnost da ih preglednik protumači kao početak oznake koja opisuje vaš tekst – tada za zagrade koje želite prikazati na stranici morate upotrijebiti oznake &lt; i &gt;.

U datoteku popisi.htm dopišite definicijski popis u kojem će pojmovi biti HTML oznake koje ste do sada naučili, a na mjestu definicija ćete napisati opise tih oznaka.

Uputa: Oznake pišite u šiljastim zagradama, za što će vam trebati tablica iz ove lekcije.

Popis svih imena znakova možete naći na odgovarajućoj stranici W3C-a. Tamo su gotovo svi znakovi, i više njih od uobičajenog „od Α do Ω” (ili od α do ω – kako vam drago).

Znak koji nedostaje, a relativno se često upotrebljava je nelomljiva crtica, koja se upotrebljava u situacijama kad ne želimo da se iza crtice prelomi red (slično kao nelomljivi razmak, &nbsp;). Recimo, ako želimo napisati riječ „HTML‑a”, crtica mora biti nelomljiva da nastavak „a” ne bi sam prešao u novi red.

Red prelomljen ispred crtice
Prijelom reda na nezgodnom mjestu – crtici.

Nelomljiva crtica jedan je od znakova koji se pišu upotrebom brojčanog kôda, &#8209;.
CARNet - puni naziv i logo
Accessibility
Reset All

Boja pozadine

Font

Veličina fonta

1

Boja teksta