Pri izvođenju rasporeda mjesta svi elementi moraju biti raspoređeni tako da čine cjelovitu strukturu i pogodni su za gledanje krajnjeg korisnika. Izvršite HTML izgled web-stranica za označavanje - najlakši način da stranicu učinite jednostavnom i čitljivom.

Izjednačavanje elemenata stranice

Alat za usklađivanje HTML-a omogućuje vam da odredite položaj teksta ili stavki bloka na stranici u odnosu na desni i lijevi rub zaslona. Time se stvara cjelovita struktura stranice, u kojoj su svi blokovi raspoređeni tako da korisnik može lako uočiti informacije na stranici. Ako je tekst na stranici pisan bez formatiranja, on se doživljava mnogo gore i uzrokuje da posjetitelj želi zatvoriti stranicu bez daljnjeg čitanja. Stoga je prije svega potrebno podijeliti informacije u logičke blokove, a zatim ih raspodijeliti tako da stvore koherentnu i prikladnu sliku za percepciju.


Na primjer, zaglavlja u tekstu mogu biti ne samo istaknuta podebljanim ili uvećanim fontom, već i smještena u sredini, a blok izbornika, pomaknut na lijevu ili desnu marginu, pomoći će u označavanju glavnih veza. Najjednostavniji način da napravite poravnanje po širini jest pomoću HTML oznaka ili CSS alata.

Poravnavanje pomoću HTML-a

Postoje četiri glavna načina raspoređivanja teksta i elemenata na web stranici:

lijevo - tekst će se nalaziti na lijevom rubu;

desno -odgovoran je za izravnavanje desnog ruba;

središte - tekst ili elementi bit će prikazani u sredini;

opravdati - poravnati u HTML-u preko rubova, preko širine stranice s istim udubljenjima na oba ruba.

Prema zadanim postavkama, ako se ne koriste elementi oblikovanja, informacijski blok će se poravnati s lijevom stranom, zatim će se desna linija razlikovati za duljinu linija.


U nastavku ćete naći primjer koda koji će prikazati primjere osnovnih metoda oblikovanja za usklađivanje širine u HTML-u. Položaj teksta odgovara atributu poravnanja, koji radi s oznakama kao što su

i druge. Sintaksa će izgledati ovako:

Prvi naslov u primjeru usklađen je centriran

Poravnanje podnaslova na desnom rubu

) Za dugi element teksta koji se sastoji od nekoliko rečenica, opcija s poravnanjem po širini je prikladna.
To poboljšava čitljivost teksta.

Sljedeći podnaslov je s lijeve strane

Kopirajte gornji primjer u bilježnicu i spremite ga kao HTML datoteku. Otvaranjem u bilo kojem pregledniku, u praksi ćete vidjeti kako raditi poravnanje.

Može se primijeniti ne samo na tekst nego i na slike, a kod će izgledati ovako:

U ovom primjeru poravnanje je centrirano u HTML-u. Pokušajte eksperimentirati i pomicati sliku desno ili lijevo pomoću odgovarajućih vrijednosti atributa.poravnati.

CSS poravnanje

Postavite elemente web-stranice u skladu s tim, ne samo s HTML-om, već is CSS alatima. Da biste izvršili ovaj zadatak, koristi se svojstvo stila kao što je poravnanje teksta. Napisana je ili unutar oznake izravno u tijelu HTML dokumenta ili smještena u zasebnom stilu datoteke s nastavkom .css, koji se zatim spaja na stranicu.

Prva opcija je bolje koristiti na stranicama koje su loše opterećene stilovima. Ako je broj CSS koda vrlo velik, preporuča se izraditi poseban dokument koji sadrži tablicu stilova.

Sintaksa za poravnavanje tekstualnih elemenata izgledat će ovako.

p {
 poravnavanje teksta: sredina; /* Centrirano poravnanje * /
}
h1 {
 poravnavanje teksta: desno; /* Desno poravnanje * /
}
h2 {
 poravnavanje teksta: lijevo; /* Lijevo poravnanje * /
}
 

Možete zapaziti da će vrijednosti ovog svojstva biti slične onima koje su postavljene pri poravnanju u centru u HTML-u. Isto vrijedi i za mjesto teksta na desnom i lijevom rubu ili na cijelu širinu stranice.

Napravite tekstualni dokument i tamo kopirajte kod. U ovom primjeru, glavni paragrafi zatvoreni u oznaci

nalazi se na sredini stranice, zaglavlja prve razine pojavljuju se na desnoj strani, a drugi nivo na lijevoj strani.

Među modernim web programerima i stručnjacima za dizajn, korištenje stilskih listova smatra se najboljim načinom optimizacije web stranice.

Napredne tehnike formatiranja

Osim gore navedenih metoda usklađivanja širine u HTML-u, postoje i druge oznake koje vam omogućuju da tekst uredite na pravi način.

Na primjer, oznaka omogućuje vam da više odstupate od lijeve strane stranice. Da biste razumjeli kako to funkcionira, kopirajte sljedeći primjer.

Povećana lijeva margina 

 

Postoji sličan način da se s velikim CSS-om napravi velika uvlaka s lijeve strane s danom vrijednošću. Da biste to učinili, upotrijebite sljedeće svojstvo stila.

Povećana lijeva alineja

Kada se koristi ova metoda, možete samostalno napisati vrijednost koja odgovara širini uvlačenja. Isprobajte ovu metodu i promijenite veličinu udubljenja u bilo koju drugu kako biste razumjeli načelo djelovanja. Još jedna zanimljiva oznaka koja se može koristiti za oblikovanje teksta, ali unaše vrijeme je gotovo potpuno izgubilo svoje značenje - to jest. Njegova je zadaća onemogućiti automatski prijenos linijama, čak i ako je ova linija veća od širine prozora preglednika.

Zaključak

Stoga se u članku razmatraju glavni načini usklađivanja teksta i drugih strukturnih elemenata web stranice pomoću HTML i CSS alata. Na koji način odabrati? To treba rješavati ovisno o tome koji su ciljevi i ciljevi postavljeni tijekom izgleda stranice.