Sadržaj:

Zdravo, dragi čitaoci bloga! Danas ćemo govoriti o strukturiranju teksta na web stranicama, karakteristikama njegovog prikaza i razmotriti kako razbiti tekst u zasebne logičke fragmente: naslovi, paragrafi, liste.

Postoji mnogo oznaka za rad sa tekstom u html-u, ali prvo moramo govoriti o nekim karakteristikama prikaza teksta u pretraživaču. Prvo, bilo koji broj razmaka, tabulatora i prijeloma reda u redu se pojavljuje kao jedan razmak. One. Pozicioniranje teksta pomoću razmaka i tabulatora neće raditi.

Na primjer, ovi redovi na web stranici bit će prikazani isto uprkos njihovom različitom pisanju:

Dobrodošli na našu stranicu!

Dobro
dobrodošli na našu web stranicu!

Dobrodošli
na naše
web stranica!

Izuzetak je tag

, unutar kojeg se svi razmaci i crtice prikazuju kao što jesu.

Drugo, tekst zauzima širinu prozora pretraživača.  Ako je dugačak red teksta širi od prozora pretraživača, prijelomi redova će se automatski umetnuti na razmake ili crtice.  Ako u redu nema razmaka ili crtica, a linija ne odgovara širini prozora, tada će se u pretraživaču pojaviti horizontalna traka za pomicanje.
Sada pređimo na razmatranje strukturnih elemenata teksta u html markupu.
Paragrafi u HTML-u
Tipično, blokovi teksta su odvojeni paragrafima.  Ovo olakšava čitanje velikih komada teksta.  HTML jezik za kreiranje pasusa sadrži par tag 

.  Sintaksa za kreiranje pasusa je sljedeća:
Ovo je prvi paragraf.


A ovo je drugi paragraf

Paragrafi na HTML stranici su odvojeni malim uvlačenjima od prethodnih i narednih elemenata.  Tag 
Također blok element.  Pisao sam o tome koji su blok elementi u članku “”.  Dozvolite mi da vas podsjetim na to blok elementi odlikuju se time da zauzimaju cijelu dostupnu širinu HTML stranice, visina elementa je određena njegovim sadržajem i uvijek počinje u novom redu.
Pogledajmo primjer korištenja pasusa na web stranici.  Hajde da otvorimo uređivač teksta, upišite HTML kod i sačuvajte ga sa html ekstenzijom:














Web stranica o automobilima.




Klasifikacija automobila


Passenger car;


Cargo;


SUV;


Buggy;


Pokupiti;


Sport;


Racing.





Prilikom otvaranja ovog fajla izgledat će otprilike ovako:
Za sada, naša stranica sadrži samo paragrafe.
Za poravnavanje teksta u oznaci pasusa 
Podržava atribut poravnati. Može uzeti jednu od četiri vrijednosti:
lijevo— poravnanje teksta lijevo;
centar— poravnanje teksta prema sredini;
u pravu— poravnanje teksta udesno;
opravdati— poravnanje po širini, tj.  poravnajte tekst istovremeno desno i lijevo.  Da bi to uradio, pretraživač postavlja razmake između reči.
Default align atribut ima preostalu vrijednost.  Primjer korištenja atributa align:

 Ovaj tekst u pasusu na html stranici bit će poravnat lijevo!


 Ovaj tekst će se pojaviti na sredini stranice u pretraživaču!


 Ovaj tekst će biti desno poravnat!


 I pretraživač će ovaj veliki dio teksta poravnati po širini, tj.  istovremeno na desnoj i lijevoj ivici!  Da bi to uradio, veb pretraživač će umetnuti dodatne razmake između reči i pasus će poprimiti uredan izgled koji se lako čita!

A ovako će biti prikazan u pretraživaču:

Naslovi u HTML-u
Naslovi se koriste za isticanje dijelova teksta na web stranici.  Postoji šest nivoa naslova u html-u.  Najviši nivo je nivo 1 - oznaka 
, a najniži je nivo 6, oznaka 
. Oznake 
 — 
 su elementi stranice na nivou bloka.  Sadržaj naslova prvog nivoa prikazan je najvećim podebljanim fontom, a naslovi posljednjeg šestog nivoa su prikazani najmanjim fontom.

Sintaksa za kreiranje zaglavlja je:














 Zaglavlje prvog nivoa 



 Naslov drugog nivoa 



 Naslov trećeg nivoa 



 Naslov četvrtog nivoa 



 Naslov petog nivoa 



 Naslov šestog nivoa 






rezultat:

Naslovi također igraju važnu ulogu u promociji web stranice, budući da pretraživači dodaju rangiranje tekstu ako se nalazi unutar oznake naslova.
Dodajmo zaglavlja našoj stranici:
Web stranica o automobilima.


Dobrodošli na našu automobilsku web stranicu.  Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, njihovim tehničkim karakteristikama i karakteristikama.


Naučnim jezikom, automobil je:


Mehanički motorizovano cestovno vozilo bez gusjenice sa najmanje 4 točka.


Klasifikacija automobila


Automobili su sljedećih tipova:


Passenger car;


Cargo;


SUV;


Buggy;


Pokupiti;


Sport;


Racing.

I vidimo da na našoj stranici, pored pasusa, postoje naslovi velikim podebljanim fontom:

Oznake 
-
, kao oznaka 
Koristite atribut align da poravnate tekst.  Kada koristite ovaj atribut, sve je isto kao i sa oznakom 
Numerisane i označene liste u HTML-u
Lista se koristi za formiranje numerisane ili nenumerisane liste fraza ili značenja.  Poziva se lista sa numerisanim stavkama numerisan, i sa nenumeriranim stavkama - označeno.
U listama za nabrajanje stavke su označene markerima koji se postavljaju lijevo od stavki liste.  Web pretraživač prikazuje listu uvučenu s lijeve strane i automatski postavlja potrebne oznake ili numeraciju.  Liste i njihove stavke pripadaju blok elementima web stranice.
Svaka lista u HTML-u je skup elemenata, od kojih je svaki smješten unutar oznake 
.  Tada se svi elementi postavljaju unutar oznake 
, ako vam je potrebna lista za nabrajanje ili unutar oznake 
, ako vam je potrebna numerisana lista.












Lista sa oznakama: 



prva tačka.


druga tačka.


treća tačka.
 

Numerisana lista: 



prva stavka na numerisanoj listi.


druga stavka na numerisanoj listi.


treća stavka u numerisanoj listi.







I izgledaju otprilike ovako:

Liste za nabrajanje mogu koristiti različite vrste znakova za nabrajanje.  Za određivanje tipa markera u oznaci 
je dodan type atribut ako želimo postaviti tip markera za sve elemente liste ili dodati isti atribut u oznaku 
ako trebate postaviti tip markera za određeni element.  Atribut type može imati sljedeće vrijednosti:

disk — ispunjen krug;
krug - krug;
kvadrat - kvadrat.
Po defaultu, atribut tipa je disk.  Primjer upotrebe:


Stav 1


Tačka 2


Tačka 3






Stav 1


Tačka 2


Tačka 3






Stav 1


Tačka 2


Tačka 3



Prikaz pretraživača:

Numerisana lista takođe podržava atribut tipa, koji se može koristiti za određivanje sledećih tipova znakova:
A - velika latinična slova;
a — mala latinična slova;
I - veliki rimski brojevi;
i — mali rimski brojevi;
1 - arapski brojevi.
Podrazumevano, u numerisanoj listi, atribut tipa postavlja markere na arapske brojeve.  Pored atributa tipa, podržava i numerisanu listu start atribut, koji specificira broj od kojeg će lista početi.  U HTML5 specifikaciji sada imaju numerisane liste obrnuti atribut, koji obrće redosled numerisanja .
 One.  umjesto 1, 2, 3, lista će biti označena brojevima 3, 2, 1. Ali obrnuti atribut još uvijek podržava vrlo mali broj pretraživača.
Liste se mogu postaviti jedna unutar druge, stvarajući ugniježđene liste. Ugniježđena lista postavljene unutar elemenata 
vanjska lista:



prva tačka.


druga tačka. 



prva stavka u ugniježđenoj listi.


druga stavka ugniježđene liste.


treća stavka ugniježđene liste.






treća tačka.



I u pretraživaču:

U HTML-u postoji i treća vrsta liste - to je lista pojmova i njihovih definicija.  Ova lista je specificirana pomoću uparene oznake 
.  Unutar njega se nalaze parovi „pojam – definicija“.  Uslovi su sadržani u uparenoj oznaci 
, a definicije - u uparenoj oznaci 
:



Termin 1


Definicija 1


Termin 2


Definicija 2



Prikaz pretraživača:

Na našoj web stranici postoji paragraf o klasifikaciji automobila.  Napravimo ovu klasifikaciju koristeći listu s nabrajanjem:


Passenger car;


Cargo;


SUV;


Buggy;


Pokupiti;


Sport;


Racing.



I da vidimo rezultat:

Horizontalne linije
Za odvajanje ili dodatno isticanje blokova teksta u HTML-u postoji jedan HR oznaka - horizontalna linija.  Ovako to izgleda u html kodu:
Prvi paragraf




Drugi paragraf

A ovako se prikazuje:

HTML horizontalna linija proteže se vodoravno cijelom širinom web stranice i debljine je jedan ili dva piksela, ovisno o korištenom pretraživaču.
Koristeći atribute možete postaviti izgled vodoravne linije.  Tag 
podržava sljedeće atribute:

align — određuje poravnanje linije;
boja — postavlja boju linije;
veličina — postavlja debljinu linije u pikselima;
širina - postavlja širinu linije u pikselima.
Ubacimo vodoravnu liniju u našu WEB stranicu.  Neka bude zeleno, debljine 1 piksel i širine 320 piksela:
Web stranica o automobilima.


Dobrodošli na našu automobilsku web stranicu.  Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, njihovim tehničkim karakteristikama i karakteristikama.


Naučnim jezikom, automobil je:


Mehanički motorizovano cestovno vozilo bez gusjenice sa najmanje 4 točka.




Klasifikacija automobila


Automobili su sljedećih tipova:




Passenger car;


Cargo;


SUV;


Buggy;


Pokupiti;


Sport;


Racing.



Rezultat će biti otprilike ovako:
 liste slika linkove tabele forme video audio HTML reference CSS reference Izgled web stranice 
Delimično smo se upoznali sa naslovom stranice H1 i paragrafom P u prvoj lekciji o strukturi HTML dokumenta.  Pogledajmo detaljnije logičke oznake za označavanje: naslove, pasuse, liste, vidljive elemente elementa Body i oznake fizičkog oblikovanja.  Da bismo to učinili, malo promijenimo našu stranicu za primjer ili je ukucajmo ponovo:
 
Na našoj html stranici za obuku dodali smo (obilježeno strelicama, jednom): naslov 2. nivoa - oznaku H2, dva naslova 3. nivoa - oznaku H3, još jedan pasus - P tag, listu s nabrajanjem - Ul i nekoliko oznaka fizičkog formatiranja .  Otvorimo stranicu u pretraživaču:
 

 
Oznake H1-H3 označavaju naslove različitih nivoa - ima ih šest.  Prema tome, naslov najnižeg nivoa je H6.  Naslovi se moraju koristiti logično, a naslov H1 najvišeg nivoa bi se trebao pojaviti samo jednom na stranici.  Naslov H1 se u pretraživačima prikazuje velikim fontom, a veličina fonta u naslovima narednih nivoa se shodno tome smanjuje.
 
Botovi za pretragu pridaju veliku važnost sadržaju naslova najvišeg nivoa.  Korisnicima je lakše kretati se po stranici s logično ispravno konstruiranim naslovima.
 
Oznake fizičkog formatiranja
 
Na stranici je vidljiva horizontalna traka nakon drugog pasusa - kreirana je pomoću elementa Hr, koji nema završnu oznaku.  Oznaka Br znači novi red i nije uparen - bez završne oznake.  Prilikom oblikovanja teksta možete koristiti nekoliko Br elemenata u nizu - svaki sljedeći će dodati novi prazan red.
 
Sada obratimo pažnju na reč „telo“ u drugom pasusu, zatvorenu u uparenu B oznaku, koja reč čini podebljanom.  A fraza "format text" je prikazana kurzivom - to se postiže pomoću oznake I. Oznaka U postavlja podvlačenje (nije u našem primjeru).
 

 
Pored ovih oznaka koje ističu fragmente teksta, postoji i Strong tag u HTML-u - ističe fragment koji je važan po značenju (podebljano).  A oznaka Em je malo manje važna (kurziv).  Botovi za pretragu obraćaju veću pažnju na ove dvije oznake, koje označavaju fraze koje su važne po svom logičkom značenju.  Preporučljivo je u njih uključiti ključne riječi, ali ne treba pretjerivati.  Isto se odnosi i na naslove.
 
Evo još nekih oznaka fizičkog oblikovanja teksta: Q - Istakne citat u redu.  Blockquote blok element - ova oznaka može sadržavati više pasusa.
 
Oznaka Code se koristi za označavanje fragmenata koda, mora se koristiti s prijelomima reda Br i razmacima bez prekida: za njihovo označavanje koriste se posebni simboli.  simbol (prvi znak - ampersand: tipka 7 sa Shift pritisnutim u engleskom rasporedu).  Ali Pre tag prikazuje programski kod kakav jeste, sa razmacima i onoliko redova koliko ih ima u kodu.
 
Ovo su najčešće korišćeni elementi dizajna teksta za druge oznake za formatiranje i posebne znakove, pogledajte HTML Reference, koja se nalazi na istoj stranici - ima zgodnu navigaciju po abecednom redu.
 
Kreiranje html lista
 
Ostaje da razmotrimo kreiranje lista, imamo ga označeno i specificirano uparenom oznakom Ul, a njeni elementi, odnosno stavke, oznakom Li (1. screenshot).  Koristeći atribut type, i za Ul i za Li tagove, možemo promijeniti tip markera.  Podrazumevano, tj.  ako atribut nije specificiran, njegova vrijednost je "disk" - krug.  Možete postaviti atribut tipa sa vrijednošću “krug” - krug.  ili ovako: 
- dobićemo listu sa kvadratnim markerima.

 
Zapravo, neću se fokusirati na atribute oznake osim na one obavezne i na nekoliko primjera za opće razumijevanje.  Za postavljanje stilova, bolje je koristiti CSS svojstva - doći ćemo do njih, a atribute ćete pronaći u priručniku.
 
Pored onih sa nabrajanjem, postoje numerisane liste, koje su specificirane sa Ol oznakom, i elementi liste, poput onih sa nabrajanjem, sa oznakom Li.  Osim toga, za obje vrste lista možete kreirati ugniježđene liste.  Zakomplikujmo zadatak i promijenimo našu listu na stranici primjera u sljedeće:
 

 
Otvorimo stranicu u pretraživaču i jasno vidimo: numerisanu listu sa ugniježđenom listom za nabrajanje, za koju vrijednost "kvadrat" atributa type specificira kvadratne markere.

Paragrafi i naslovi
Glavni način predstavljanja informacija na Internetu je tekst, to su tekstualne informacije koje većina ljudi traži, a to su tekstualne riječi i fraze koje koriste posebni pretraživači za obavljanje ove pretrage.  Stoga, da li će se posjetitelj zadržati na stranici ili će potražiti pogodniji izvor informacija, uvelike će ovisiti o tome koliko je dobro i zgodno strukturiran tekst na stranicama.  Na kraju krajeva, složit ćete se da je čitanje kontinuiranog teksta mnogo teže od čitanja teksta podijeljenog na pasuse i tematske pododjeljke.  U HTML-u je nekoliko tagova odgovorno za ovo strukturiranje teksta, a o njima ćemo govoriti u ovoj lekciji.
Tag 
Ili razbijemo stranicu na pasuse (paragrafe)
Ako se sećate, onda sa oznakom 
Već ste se upoznali u ovom udžbeniku, pa, sada je vrijeme da ga u potpunosti proučite.  Dakle, oznaka 
Odgovoran je za kreiranje pasusa na HTML stranici i jeste blok element.  Nadam se da ste se već setili šta su oznake na nivou bloka.  Da, ali osim što pravi prijelome reda ispred i iza sebe do početka, postavlja i male margine (spoljašnje uvlake) praznog prostora iznad i ispod sebe, zbog čega je tekst vizualno podijeljen na pasuse .  Visina ovih polja je jednaka jednom praznom redu.
 
Sada je najvažnija stvar oznaka 
Može sadržavati samo elemente na nivou reda (inline) i ništa drugo.  Stoga, na primjer, ne može sadržavati drugi pasus, budući da sam 
Je blok element.  Pa, na ovo ćemo se vratiti više puta.  Usput, svaki tekst bez oznaka također se smatra umetnutim elementom.
Primjer pasusa u HTML-u

 






Prvi paragraf.
Drugi paragraf.


Rezultat u pretraživaču
Prvi paragraf.
Drugi paragraf.
Općenito, oznaka za zatvaranje
 Nije ga potrebno postavljati - čim pretraživač naiđe na sljedeći paragraf, automatski će zatvoriti prethodni.  Ali, kao što sam već rekao, bolje je zatvoriti sve opcione oznake.

Na oznaci 
Postoji jedan opcioni atribut, align, koji postavlja poziciju teksta unutar bloka.  to jest, svaki red pasusa možete imati centriran na stranici ili pritisnut na desnu stranu, a ne na lijevo kao i obično.  Jedini problem je što atribut align nije u strogoj verziji HTML-a i možda ga moderni pretraživači više neće podržavati u bliskoj budućnosti.  Pa šta da radimo?  A mi ćemo učiniti sljedeće: u jednoj od narednih lekcija pokazat ću vam univerzalnu metodu pomoću koje možete promijeniti položaj sadržaja ne samo unutar pasusa, već i unutar bilo kojeg blok elementa HTML stranice (naslovi, tabele, liste , itd.).  Ali glavna stvar je da svi pretraživači to razumiju i da će to razumjeti.
Oznake 

 - 
ili HTML zaglavlja stranica
Naslovi igraju vrlo važnu ulogu u HTML-u, pomoću njih možete podijeliti tekst stranice na logične dijelove, naglašavajući važnost svakog od njih, što omogućava posjetiteljima da brzo pronađu informacije koje su im potrebne.  Osim toga, pretraživači (Yandex, Google, itd.) daju veću “težinu” tekstu u naslovima.  Postoji šest vrsta, gde 
najvažniji naslov (prvi nivo, vrh) i 
najmanje značajan (šesti nivo, niži).  Na primjer, 
može biti naslov stranice, 
- njegove sekcije, 
- pododjeljci itd.

Naslovne oznake su blok elementi i, poput pasusa, može sadržavati samo oznake i tekst na nivou reda.  Pretraživači podebljaju tekst naslova, različite veličine (ovisno o oznaci) i dodaju razmak na vrhu i dnu, opet poput pasusa.
Sintaksa za pisanje zaglavlja u HTML-u

 
Zaglavlje prvog nivoa
Naslov drugog nivoa
Naslov trećeg nivoa
Naslov četvrtog nivoa
Naslov petog nivoa
Naslov šestog nivoa
Oznake naslova imaju dva opciona atributa - poznato staromodno poravnanje i atribut title, koji prikazuje opis alata kada pređete mišem preko naslova.  Kao i kod paragrafa, nećemo koristiti align, ali ćemo uskoro naučiti drugi način.
Primjer korištenja zaglavlja u HTML-u

 






Zaglavlje prvog nivoa
Paragraf.
Naslov drugog nivoa
Paragraf.
Paragraf.


Rezultat u pretraživaču
Zaglavlje prvog nivoa
Paragraf.
Naslov drugog nivoa
Paragraf.
Paragraf.
Zadaća.
U ovom zadatku morat ćete kreirati stranicu koja simulira mali članak, napisati bilo koji tekst koji vam se sviđa.  Možete odmah vidjeti rezultat primjera tako da imate ideju šta treba učiniti.
Otvorite stranicu iz prethodne lekcije u HTML uređivaču.
Korištenje naslova 

, 
I 
kreirajte naslov članka, njegova dva odjeljka i tri pododjeljka u drugom dijelu.
Pobrinite se da se prilikom prelaska miša preko naslova članka prikaže odgovarajući natpis.
Napišite po jedan pasus za svaki odjeljak i pododjeljak.

Oznake koje definiraju pasus, razmak, HTML blok i pasus
 
Pogledajmo to detaljno HTML blokovi i paragrafi kao elementi web stranice.
 
HTML paragraf definisano oznakama.
 
HTML paragrafi obično sadrže tekst, oznake za formatiranje i slike.
 
HTML paragraf ne može sadržavati blok elemente kao što su zaglavlja 
 
 - 
, blok 
 
 i drugi paragrafi.
 
HTML blok definisano oznakama 
 
 .
 
HTML blok može sadržavati bilo koje elemente web stranice, u bilo kojoj količini.
 
HTML blokovi Odličan za web stranice i lak za manipulaciju.
Razmotrite kod u nastavku:
 
rezultat:
 
To možemo vidjeti HTML paragrafi imaju vertikalna udubljenja - ovo je karakteristika oznaka. HTML blokovi
 
 
 takvi prostori se ne stvaraju jer ne nose nikakav teret, već su jednostavno kontejneri.

 
Oznake ne mogu sadržavati druge ili 
 
.  Unutar se mogu postaviti linearni elementi, kao što su ili, na primjer, oznake odgovorne za oblikovanje teksta.

 
Oznake i , u principu, su ista stvar, ali W3C konzorcij preporučuje korištenje malih slova.  U novoj verziji HTML-a, kao iu modernom XHTML-u, upotreba velikih slova pri pisanju oznaka je zabranjena.
 
Blokiraj 
 
 može sadržavati koliko god želite 
 
 i drugi elementi HTML dokument.  Idealan je za raspored, ali više o tome kasnije - u lekcijama CSS tutoriala.

 
HTML prostor iz tabele specijalnih znakova
 
HTML prostor omogućava vam da povećate udaljenost između riječi i znakova.
 
Što se tiče razmaka između riječi, bez obzira koliko ih ima u Notepadu, odnosno u izvornom kodu, na web stranici će biti prikazana samo jedna.  Ako trebate povećati udaljenost, koristite razmak iz tablice simbola.  Možda ćete pitati: Zašto su potrebna ova kodirana značenja običnih znakova?  - Odgovorit ću: Oni su potrebni za prikaz, na primjer, takvih zagrada< >.  Drugim riječima, da bih prikazao oznake na ekranu, u uređivaču pišem: .  Oznake  , kao što se sjećamo, pretvaramo tekst u monospace (kucani).
 
Načini prikaza HTML pasusa
 
Primjeri izlaznih paragrafa.
U prošloj lekciji o dokumentu pogledali smo šest nivoa naslova koje html stranica može uključiti i naučili pravila za korištenje oznake “h1-h6”.  U ovom vodiču ćemo pogledati, paragraf oznaka, što će dati naš tekst ispravan dizajn Na stranici.
U sljedećem postu ću vam reći kako svoju web stranicu učiniti još ljepšom (da je ne biste propustili).  Naučit ćemo kako napraviti elegantnu pozadinu.  Ovu sliku ću podijeliti na dva dijela, u prvom dijelu ćemo raditi sa Photoshopom, a u drugom ćemo se igrati sa kaskadnim stilovima.
Oznaka paragrafa ili oznaka pasusa “p” vam omogućava da kreirate pasus od teksta na stranici web dokumenta.  Ako ne koristite oznaku "p", već jednostavno unesete tekst bez dizajna, na kraju ćete dobiti nestrukturiran, ružan tekst.
Korišćenjem oznake paragrafa, tekst postaje manje-više čitljiv, što stranicu čini privlačnijom.  Pogledajmo dokument koji ne koristi oznaku paragrafa:
 
XHTML
 

 
 
 
Danas sam se probudio rano kao i uvek.  Jutarnje sunce sijalo je kroz zavjese mog prozora.  Protežući se, otišao sam u kuhinju.  Skuhao sam sebi zeleni čaj, dodao dvije kašike šećera i sjeo u mekanu stolicu ispred kuhinjskog prozora.  Napolju je bila jesen.  Volim ovo doba godine jer mislim da je jesen najromantičnije doba godine.  Nakon što sam popio čaj, uzeo sam mobilni telefon i nazvao svoju voljenu da joj poželim dobro jutro.  Kao što sam mislio, ona je još spavala.  Lepo smo razgovarali i dogovorili se da se nađemo popodne dok je sunce sijalo i napolju je bilo toplo.  Vrijeme je proletjelo.  A sada smo zajedno, ručamo u lokalnom kafiću: jedemo, ćaskamo, flertujemo jedno s drugim.  Osjećamo se dobro zajedno.  Volim svoju devojku i to se odnosi i na mene.  Razmišljamo o osnivanju porodice...

 


 





Danas sam se probudio rano kao i uvek.  Jutarnje sunce se probijalo
zavese mog prozora.  Protežući se, otišao sam u kuhinju.  Napravila sam sebi zeleni čaj,
stavio dvije kašike šećera i sjeo u mekanu stolicu ispred kuhinjskog prozora.  Napolju
bila je jesen.  Volim ovo doba godine jer verujem da je jesen najviše...
romantično doba godine.  Nakon što sam popio čaj, uzeo sam mobilni telefon i nazvao
svojoj voljenoj, poželi joj dobro jutro.  Kao što sam mislio, ona je još spavala.  Slatki smo
razgovarali i dogovorili se da se nađemo danas popodne dok sunce sija i
Napolju je toplo.  Vrijeme je proletjelo.  A sada smo zajedno, ručamo u lokalu
cafe: jedemo, ćaskamo, flertujemo jedni s drugima.  Osjećamo se dobro zajedno.  Volim svoje
devojka i ja takođe.  Razmišljamo o osnivanju porodice...




Evo šta smo završili:
Tekst je loše formatiran.  Sve je skupljeno, bez ikakve strukture.  Sljedeći primjer pokazuje upotrebu oznake paragrafa "p".  Ova oznaka je uparena, blok oznaka, ali unutar sebe može sadržavati samo oznake linija.  Blokirane oznake unutar oznake "p" nisu dozvoljene, uključujući i samu "p" oznaku:
 
XHTML
 

 
 
 

 
Stav jedan.  Da bi tekst na vašim stranicama bio čitljiv, koristite oznaku paragrafa “p”.  Ovaj tekst je okružen uparenom oznakom "p", koja omogućava pretraživaču da prepozna tekst kao pasus.
 
Stav dva.  Ovo je drugi pasus, koji dolazi iza prvog.  Ovaj stav će biti uvučen od prvog stava.  Primjer korištenja pasusa može se vidjeti na donjoj slici.


 


 





Stav jedan.  Da bi tekst na vašim stranicama bio čitljiv
Koristi se oznaka paragrafa "p".  Ovaj tekst je uokviren uparenom oznakom "p", što dozvoljava
Pretraživač prepoznaje tekst kao pasus.
Stav dva.  Ovo je drugi pasus, koji dolazi iza prvog.  Ovaj paragraf će imati
uvlačenje iz prvog stava.  Primjer korištenja paragrafa možete pronaći na
slika ispod.




Evo šta smo dobili kada smo počeli da koristimo paragraf:
Pojavile su se dvije komponente stranice - dva pasusa odvojena uvlakom.  I tako nevolje sa svakim novim paragrafom.  Za naš prvi primjer, gdje se oznaka paragrafa ne koristi, možemo primijeniti sljedeće formatiranje pomoću oznake "p":
 
XHTML
 

 
 
 

 
Sunčano jutro
 
Danas sam se probudio rano kao i uvek.  Jutarnje sunce sijalo je kroz zavjese mog prozora.  Protežući se, otišao sam u kuhinju.  Skuhao sam sebi zeleni čaj, dodao dvije kašike šećera i sjeo u mekanu stolicu ispred kuhinjskog prozora.  Napolju je bila jesen.
 
Volim ovo doba godine jer mislim da je jesen najromantičnije doba godine.  Nakon što sam popio čaj, uzeo sam mobilni telefon i nazvao svoju voljenu da joj poželim dobro jutro.  Kao što sam mislio, ona je još spavala.
 
Lepo smo razgovarali i dogovorili se da se nađemo popodne dok je sunce sijalo i napolju je bilo toplo.  Vrijeme je proletjelo.  A sada smo zajedno, ručamo u lokalnom kafiću: jedemo, ćaskamo, flertujemo jedno s drugim.  Osjećamo se dobro zajedno.  Volim svoju devojku, a volim i nju.  Razmišljamo o osnivanju porodice...


 


 





Sunčano jutro
Danas sam se probudio rano kao i uvek.  Jutarnje sunce sijalo je kroz zavjese mog prozora.  Protežući se, otišao sam u kuhinju.  Skuhao sam sebi zeleni čaj, dodao dvije kašike šećera i sjeo u mekanu stolicu ispred kuhinjskog prozora.  Napolju je bila jesen.
Volim ovo doba godine jer mislim da je jesen najromantičnije doba godine.  Nakon što sam popio čaj, uzeo sam mobilni telefon i nazvao svoju voljenu da joj poželim dobro jutro.  Kao što sam mislio, ona je još spavala.
Lepo smo razgovarali i dogovorili se da se nađemo popodne dok je sunce sijalo i napolju je bilo toplo.  Vrijeme je proletjelo.  A sada smo zajedno, ručamo u lokalnom kafiću: jedemo, ćaskamo, flertujemo jedno s drugim.  Osjećamo se dobro zajedno.  Volim svoju devojku i to se odnosi i na mene.  Razmišljamo o osnivanju porodice...




Kao što ste već primijetili, dodao sam naslov tekstu.  Koristio sam samo tri pasusa, a ova verzija se, kao i uvijek, pokazala boljom od prethodne.  Sada imamo semantičke podjele teksta (uvlake između pasusa).  Općenito, bilo bi ispravno reći ne "paragraf", već "paragraf", jer oznaka "p" u prijevodu s engleskog znači "paragraf".  Sljedeće ću govoriti o paragrafu, tako da se nemojte zbuniti.
Ovo je otprilike ono što biste trebali dobiti nakon upotrebe paragraf oznaka:
Oznaka paragrafa, kao i sve druge HTML oznake, ima atribute.  Sada ćemo pogledati najvažnije atribute oznake “p”.
id – definiše univerzalni identifikator koji se koristi prilikom pisanja svojstava u kaskadnom fajlu sa stilskim listovima (obično style.css).  Ime identifikatora se koristi samo jednom unutar istog dokumenta
class – isto kao id, ali se može koristiti više puta u istom dokumentu
title – opis alata koji se prikazuje u prozoru pretraživača kada pređete mišem preko teksta pasusa
style – definira skup svojstava za kaskadne tablice stilova
align – određuje poravnanje teksta pasusa u odnosu na prozor pretraživača (lijevo – lijevo, desno – desno, centrirano – središte, poravnato – poravnati)
itd. (JavaScript elementi)
Primjer korištenja atributa:
 
XHTML
 

 
 
 

 
Ako pređete mišem preko ovog teksta, pojavit će se savjet!!!
 
Ovaj paragraf je poravnat lijevo
 
Ovaj paragraf je poravnat desno
 
Ovaj paragraf je poravnat po sredini
 
Ovaj paragraf ima univerzalni identifikator koji se odnosi na svojstva zapisana u CSS datoteci i može se koristiti samo jednom na stranici
 
Ovaj paragraf ima MAIN-P klasu, može se dodijeliti nekoliko puta na stranici, za razliku od ID identifikatora
 
Ovaj paragraf je podvučen jer...  koristi kaskadne stilove dodijeljene direktno ovom pasusu koristeći atribut oznake STYLE.  U vrijednosti atributa STYLE naznačio sam da cijeli pasus treba biti podvučen: PODNAVANJE
 s

 


 






Ovaj paragraf je podvučen jer...  koristi kaskadne stilove dodijeljene direktno ovom pasusu koristeći atribut oznake STYLE.  U vrijednosti atributa STYLE precizirao sam da ceo pasus treba biti podvučen: PODNAVAJ
 s