Element
(sa engleskog tijelo- tijelo) je dizajniran za pohranjivanje sadržaja web stranice (sadržaja) prikazanog u prozoru pretraživača. Informacije koje treba da budu prikazane u dokumentu treba da se nalaze unutar kontejnera . Ove informacije uključuju tekst, slike, oznake, JavaScript, itd.također se koristi za određivanje boja veza i teksta na web stranici. Ova praksa se ne poštuje u HTML-u i umjesto toga preporučuje se korištenje stilova za specificiranje sheme boja, primjenjujući ih na selektor tijela.Često
koristi se za postavljanje rukovaoca događaja, kao što je onload, koji se pokreće nakon što se dokument završi učitavanjem u trenutni prozor ili okvir.Oznake za otvaranje i zatvaranje
nisu potrebni na web stranici, ali se smatra dobrim stilom koristiti ih za definiranje početka i kraja HTML dokumenta.Sintaksa
...Oznaka za zatvaranje
Nije potrebno.
Atributi
Primjer
Čak je i Aristotel u svojoj “Politici” rekao da muzika, utječući na osobu, donosi “neku vrstu pročišćenja, odnosno olakšanja povezanog sa zadovoljstvom”.
Rezultat trenutnog primjera prikazan je na Sl. 1. Kada koristite događaj onload elementa
Skript napisan u JavaScript-u se izvršava, u ovom slučaju prikazuje poruku da je dokument učitan.Rice. 1. Iskačući prozor u dokumentu
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobrenja.
- Preporuka - specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice da implementira standard.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se dostavlja Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt – zrelija verzija nacrta o kojoj se raspravljalo i dopunjeno za pregled zajednice.
- Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija standarda.
Ističe se živi HTML standard (Living) - ne pridržava se tradicionalnog numerisanja verzija, jer je u stalnom razvoju i redovno se ažurira.
Tag (dubl) je dizajniran za pohranjivanje sadržaja web stranice (sadržaja) prikazanog u prozoru pretraživača. Informacije koje treba da budu prikazane u dokumentu treba da se nalaze unutar BODY kontejnera. Ove informacije uključuju tekst, slike, oznake, JavaScript, itd.
Tag također se koristi za određivanje boja veza i teksta na web stranici. Ova praksa je zastarjela u HTML 4 i umjesto toga preporučuje se korištenje stilova za specificiranje sheme boja, primjenjujući ih na selektor . Međutim, većina opcija je i dalje podržana u svim pretraživačima.
Često tag koristi se za postavljanje rukovaoca događaja, kao što je onLoad, koji se pokreće nakon što se dokument završi učitavanjem u trenutni prozor ili okvir.
Otvaranje i zatvaranje BODY oznaka na web stranici su opcione, ali je dobar stil koristiti ih za definiranje početka i kraja HTML dokumenta.
Sintaksa
...
Oznaka za zatvaranje
Obavezno.
Opcije
alink - postavlja boju aktivne veze.
pozadina - postavlja pozadinsku sliku na web stranici.
bgcolor - boja pozadine web stranice.
bgproperties - određuje hoće li se pomicati pozadina zajedno sa tekstom ili ne.
bottommargin - uvlačenje od donje ivice prozora pretraživača do sadržaja.
leftmargin - horizontalna margina od ivice prozora pretraživača do sadržaja.
link - boja veze.
pomicanje - postavlja da li će se prikazati trake za pomicanje ili ne.
text - boja teksta u dokumentu.
topmargin - uvlačenje od gornje ivice prozora pretraživača do sadržaja.
vlink - boja posjećenih linkova.
Primjer 1: Korištenje oznake BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Opis parametara oznake BODY
ALINK parametar
Opis
Postavlja boju aktivne veze. Trenutna boja veze mijenja se u aktivnu kada se na vezu klikne kursorom miša ili se izabere pomoću tastature.
Sintaksa
Argumenti
Vrijednost boje može se postaviti na dva načina.
1. Po svom imenu
Pretraživači podržavaju neke boje svojim imenom.
2. Po heksadecimalnoj vrijednosti
Heksadecimalni brojevi se koriste za određivanje boja. Heksadecimalni sistem je, za razliku od decimalnog, zasnovan, kao što mu ime kaže, na broju 16. Brojevi će biti sledeći: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Brojevi od 10 do 15 zamjenjuju se latiničnim slovima. Brojevi veći od 15 u heksadecimalnom sistemu formiraju se kombinovanjem dva broja u jedan. Na primjer, broj 255 u decimalnom obliku odgovara broju FF u heksadecimalnom. Da bi se izbjegla zabuna u definiranju brojevnog sistema, ispred heksadecimalnog broja stavlja se heš simbol #, na primjer #666999. Svaka od tri boje - crvena, zelena i plava - može imati vrijednosti od 00 do FF. Dakle, simbol boje je podijeljen na tri komponente #rrggbb, gdje prva dva simbola označavaju crvenu komponentu boje, srednja dva - zelenu, a zadnja dva - plavu.
Zadana vrijednost
Odgovara boju veze.
...
BACKGROUND parametar
Opis
Određuje sliku koja će se koristiti kao pozadina. Za razliku od običnih slika, pozadina nema podešenu širinu ili visinu i uvijek se prikazuje u punoj veličini na 100%. Ako je slika manja od prozora pretraživača, onda se slika ponavlja horizontalno udesno i nadole, nižući se kao mozaik. Iz tog razloga mogu se pojaviti vidljive razlike na spoju pozadinskih slika, koje su uočljive posjetiteljima stranice. Prilikom odabira pozadinske slike, provjerite postoji li dovoljan kontrast između nje i teksta na web stranici. Animirani GIF-ovi mogu se koristiti kao pozadina, ali će odvratiti pažnju čitaoca.
Sintaksa
Argumenti
Bilo koja važeća adresa slike - možete koristiti relativnu ili apsolutnu putanju.
Zadana vrijednost
br.
Primjer 3: Postavljanje pozadine na web stranici
...
BGCOLOR parametar
Opis
Postavlja boju pozadine web stranice. Ovaj parametar možete koristiti zajedno s pozadinom, odabirom boje pozadine bliske pozadinskoj slici
Sintaksa
Argumenti
Pogledajte parametar ALINK.
Zadana vrijednost
Zavisi od pretraživača i njegove verzije, ali boja pozadine je obično bijela.
Primjer 4: Postavljanje boje pozadine web stranice
...
BGPROPERTIES parametar
Opis
Podrazumevano, pozadinska slika se kreće sa sadržajem web stranice. Koristeći parametar bgproperties možete popraviti pozadinu na jednom mjestu i na taj način prisiliti samo sadržaj da se skroluje. Ovakav kvalitet web stranice rijetko se koristi za web stranice, pa korisnicima može izgledati čudno i neobično.
Sintaksa
Argumenti
Postoji samo jedan fiksni parametar koji fiksira pozadinu. Ako želite da uklonite ovu funkciju, uklonite parametar bgproperties iz oznake BODY ili ga postavite na praznu vrijednost - "".
Zadana vrijednost
br.
Primjer 5: Popravljanje pozadine
...
Bilješka
- Ne podržavaju svi pretraživači ovu postavku, na primer, Netscape je ignoriše.
- Uočeno je da prilikom postavljanja pozadinske slike na web stranici kroz stilove parametar bgproperies prestaje da radi.
LEFTMARGIN parametar
Opis
Definira marginu od lijeve i desne ivice prozora pretraživača do sadržaja web stranice.
Sintaksa
Argumenti
Pozitivan cijeli broj koji specificira pomak u pikselima.
Zadana vrijednost
10 piksela za Windows i 8 piksela za Macintosh.
Primjer 6: Promjena lijeve margine
...
Bilješka
- Netscape pretraživač ne razumije parametar leftmargin za postavljanje margina, koristi parametre marginwidth - horizontalne margine i marginheight - vertikalne margine;
- Da biste postavili margine s desne, donje i gornje ivice, koristite parametre desne margine, donje margine i gornje margine.
LINK parametar
Opis
Postavlja boju neposjećenih veza.
Sintaksa
Argumenti
Pogledajte parametar ALINK.
Zadana vrijednost
#0000FF
Primjer 7: Postavljanje boje veze
...
SCROLL parametar
Opis
Parametar pomicanja kontrolira prisutnost traka za pomicanje u prozoru pretraživača kada sadržaj web stranice premašuje veličinu trenutnog prozora. Ova postavka radi samo u Internet Exploreru.
Sintaksa
Argumenti
da - prikazuje trake za pomicanje.
ne - sprečava da se trake za pomeranje prikazuju u prozoru.
Zadana vrijednost
da
Primjer 8: Skrivanje trake za pomicanje
...
TEXT parametar
Opis
Postavlja zadanu boju teksta koji se koristi na web stranici. Boje pojedinih elemenata mogu se lako mijenjati pomoću stilova.
Sintaksa
Argumenti
Pogledajte parametar ALINK.
Zadana vrijednost
#000000
Primjer 9: Promjena boje teksta
...
VLINK parametar
Opis
Definira boju posjećenih linkova, odnosno linkova na koje je korisnik već „kliknuo“.
Sintaksa
Argumenti
Pogledajte parametar ALINK.
Zadana vrijednost
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Primjer 10: Postavljanje boje posjećenih linkova
...
Boja teksta
Boja pozadine
Pozadinska slika
Boja veze
Padding oko sadržaja
Vježbajte
Kao što već znate, između početne oznake i završnu oznaku Postavlja se tijelo stranice ili sadržaj same stranice. Naziva se i riječ sadržaja(od engleskog content - sadržaj). Opcije oznaka određuju svojstva sadržaja u cjelini. U ovoj lekciji ćemo pogledati neke od njih.
Boja teksta
Boja teksta cijelog dokumenta određena je parametrom tekst. Dodjeljuje mu se ili ime boje ili heksadecimalna vrijednost boje, baš kao i parametar boja tag (pogledajte lekciju 2: Formatiranje testa):
iliKorištenjem ovog primjera će sav tekst na stranici biti crven.
Parametar tekst je opciono. Ako ga izostavite, tekst na stranici će po defaultu biti crn. Vjerovatno ste to već vidjeli radeći prethodne vježbe. :)
Boja pozadine
Boja pozadine stranice određena je parametrom bgcolor. Prihvata ili naziv boje ili heksadecimalnu vrijednost boje, baš kao i parametar tekst.
iliOvaj primjer će rezultirati crvenom pozadinom stranice.
Parametar bgcolor je opciono. Ako ga izostavite, zadana pozadina stranice bit će bijela. To je nešto što ste već vidjeli radeći prethodne vježbe. :)
Pozadinska slika
Korištenje parametra pozadini Možete osigurati da stranica nema običnu pozadinu, već da je pozadina slika. Za ovaj parametar pozadini potrebno je da dodijelite putanju slici koju želite da napravite pozadinom, kao i parametar src tag
(Pogledajte lekciju 5. Slike):
Na ovaj način možete, na primjer, popločiti pozadinu stranice nekom vrstom uzorka. Ali ne biste trebali zloupotrijebiti ovu priliku i napraviti velike slike u pozadini kako ne biste učinili stranicu preteškom.
Na primjer, imamo ovaj fragment uzorka:
Ako je napravimo pozadinskom slikom, dobit ćemo stranicu s pozadinom poput ove:
Parametar pozadini je također opciono. Ako ga izostavite, zadana pozadina stranice bit će bijela.
Boja veze
Postoje 3 parametra oznake za postavljanje boje linkova tijelo:
Ovim parametrima se pripisuje naziv boje ili njena heksadecimalna vrijednost, slično drugim parametrima odgovornim za boju nečega.
Ovako će izgledati na stranici (da vidite sva stanja veze, zapamtite šta je bila originalno, pritisnite i držite, vidite šta je postala, i na kraju otpustite, vratite se na ovu stranicu i vidite koje je boje ):
Ovi parametri su opcioni. Ako ih izostavite, boje veze će poprimiti zadane vrijednosti (plava, crvena, ljubičasta, respektivno).
Padding oko sadržaja
Ako želite da se sadržaj stranice udalji od ivica prozora pretraživača za određenu količinu, u ovom slučaju oznaka tijelo postoje 4 parametra:
leftmargin- uvlačenje od lijeve ivice;
desna margina- udubljenje od desne ivice;
topmargin- uvlačenje od gornje ivice;
bottommargin- uvlačenje od donje ivice.
Ovi parametri uzimaju vrijednosti u pikselima. Nisu obavezni, a možete ih koristiti sve odjednom ili zasebno. Na primjer, možete uvući samo lijevo i desno, ili samo vrh i dno, itd.:
iliZdravo momci!
Danas sam odlučio da se dotaknem teme koja nikada neće prestati da bude aktuelna među mladim kreatorima sajtova.
Uvijek postoji potreba za prilagođavanjem web lokacija nakon što su kreirane. Neka podešavanja se izvode uređivanjem datoteka instaliranog šablona teme. Na primjer, trebate umetnuti kod koji prikazuje slične unose. Ali gdje ga ubaciti?
Vrlo često novajlije postavljaju takva pitanja. Zabrinuti su i za druga slična pitanja, čije je rješenje u suštini potpuno isto. Osim toga, u svojim budućim člancima često ću pribjeći umetanju kodova na razna mjesta u šablonu. Stoga je ovaj materijal relevantniji nego ikad.
U ovom članku ću vam pokazati kako je vrlo lako prepoznati mjesto u vašem WordPress predlošku gdje trebate umetnuti bilo koji kod. Takođe ću razmotriti druge važne tačke koje bi vas mogle zabrinjavati u početnoj fazi.
Počnimo od samog vrha i pogledajmo datoteke koje ćete možda morati urediti ako želite ručno umetnuti kodove umjesto da koristite dodatke, jer postoji ta opcija. Ne pozdravljam to, ali ipak, za one lijene, opisat ću takve dodatke u sljedećim člancima.
Na samom početku dajem video lekciju, jer će bez nje biti teško razumjeti materijal predstavljen u tekstualnom formatu u nastavku.
Sada ću sve detaljno objasniti u tekstualnom formatu.
Fajlovi odgovorni za izlaz svake vrste stranice
Ako ste pročitali mnogo članaka na drugim blogovima o implementaciji određenih funkcija pomoću kodova (skripti), onda sam 100% siguran da ste vidjeli fraze poput:
- Zalijepite ovaj kod u datoteku odgovornu za prikaz glavne stranice;
- Zalijepite ovaj kod u datoteku odgovornu za izlaz zapisa i drugih.
Postoji mnogo datoteka u koje ćete možda morati umetnuti kodove. Ali šta su ovi fajlovi? Sve je vrlo jednostavno.
- Izlaz početne stranice - index.php;
- Izlaz zapisa - fajl single.php;
- Izlaz stranice - page.php fajl;
- Izlaz arhiva i kategorija - archive.php;
- Izlaz podnožja - footer.php;
- Izlaz stranice pretrage - search.php;
- Izlaz bočne trake - sidebar.php;
- Datoteka stila - style.css;
- Izlazni fajl od 404 stranice je 404.php.
Sada, kada vam kažu da morate zalijepiti kod u tu i takvu datoteku, znat ćete gdje tražiti.
Ostaje samo odgovoriti na pitanje: kako odrediti pravo mjesto u svakom od fajlova?
Određivanje mjesta ubacivanja koda
Prvo, prođimo kroz ona mjesta koja ne treba identifikovati. Oni će biti isti za sve, bez obzira na šablon.
Prvo mjesto, identično za sve šablone, je područje u datoteci Header.php. Ovo su oznake za otvaranje i zatvaranje
.Neke skripte se uvijek postavljaju između ovih tagova, koje bi trebale raditi za sve stranice stranice. Odnosno, postavili smo skriptu, na primjer, za društvene gumbe između ovih oznaka i oni rade na svim stranicama stranice na kojima ćemo ih prikazati.
Ove oznake se nalaze na samom vrhu datoteke Header.php.
Sadržaj između će biti različit za svakoga, jer sve zavisi od šablona.
Ako vam se kaže da morate umetnuti ovaj kod između početne i završne oznake glave, zatim kopirajte kod, potražite slično područje u datoteci predloška i jednostavno ga zalijepite između tih oznaka.
Drugo mjesto, koje je također identično za sve šablone, nalazi se u datoteci odgovornoj za izlaz podnožja - footer.php.
Skripte se mogu povezati ne samo umetanjem između oznaka
u datoteci Header.php. Možete ih učitati i putem datoteke footer.php, čime ćete ubrzati učitavanje stranice stranice.Činjenica je da kada se stranica počne učitavati, ona se učitava od vrha do dna. Ako su sve skripte na vrhu stranice, prikaz njenog sadržaja će se usporiti, jer će biti potrebno vrijeme da se skripte učitaju.
Naš zadatak je da što brže prikažemo sadržaj stranice i posjetiteljima i pretraživačima. U ovom slučaju, preporučljivo je učitati skripte na samom kraju stranice kako bi se prvo prikazao sadržaj, a zatim učitali sve ostalo.
Da biste implementirali ovu opciju, morate otvoriti datoteku footer.php i umetnuti skriptu prije završne oznake tijela. Nalazi se na kraju sadržaja datoteke, jer je odgovoran za kraj područja stranice.
Kao što vidite, prikazao sam sve skripte u ovoj oblasti, prije završne oznake(istaknuto plavim okvirom). Inače, izveo sam ih učitavanjem iz fajlova, a ne postavljanjem samih skripti u ovo područje. Nakon toga sam značajno ubrzao blog. Kako to učiniti bit će poseban članak. Čekaj!
Nadam se da ćete, kada vam kažu da zalijepite kod u ove oblasti, to učiniti bez problema.
Pređimo na složenije pitanje i pokušajmo naučiti kako identificirati mjesta u drugim datotekama šablona u koje su umetnuti razni drugi kodovi. Obično ovi kodovi uključuju:
- Prikaži slične postove;
- Izlaz obrasca za pretplatu;
- Prikaz društvenih dugmadi i tako dalje.
Sve te stvari se ubacuju iza glavnog dijela sadržaja, odnosno nakon kraja članka. Svaki od njih ima drugačiji šablonski kod i, stoga, univerzalni odgovor na pitanje "Gdje završava izlazni kod mog članka?" jednostavno ne.
Ali možete lako odrediti kraj koda, nakon čega trebate implementirati funkciju koja vam je potrebna. Ovu metodu sam već djelomično pokazao u članku o odabiru WordPress predloška (). Zatim sam koristio standardnu funkcionalnost internet pretraživača.
Da biste bolje razumjeli suštinu ove metode, toplo preporučujem da pogledate video na početku ovog posta. U njemu sam pokazao kako se sve dešava u realnom vremenu. Pa, sada ću pokušati da to opišem što je moguće jasnije.
Pokazat ću vam da koristite preglednik Google Chrome kao primjer. Drugi pretraživači takođe imaju ovu funkciju, ali mogu imati malo drugačiji naziv.
- Google Chrome - pogledajte kod elementa;
- Firefox - explore element;
- Opera - pregledajte element.
Princip je sličan u 3 pretraživača. Sada ću vam pokazati kako odrediti lokaciju bilo kojeg područja u bilo kojem predlošku.
Idite na prikaz koda elementa (Google Chrome). Desnom tipkom miša kliknite na prazno područje stranice.
Nakon toga, na dnu stranice se pojavljuje panel koji prikazuje cijeli izvorni kod stranice, koji možemo urediti i vidjeti kako će se struktura i izgled šablona mijenjati u realnom vremenu. Ali promjene podataka se ne pohranjuju. Da biste to učinili, morate urediti same datoteke šablona.
Evo kako izgleda panel.
Strelicom sam pokazao na lupu, klikom na koju možemo pregledati strukturu šablona i odrediti od kojih blokova se sastoji naš šablon. Ovu funkciju nazivam inspektorom.
Nakon što kliknemo na inspektor, možemo se pomicati mišem po našoj stranici i vidjet ćemo da svi elementi preko kojih pređemo pokazivačem počinju biti označeni obojenom pozadinom. Kao primjer, pokazat ću vam snimak ekrana iz članka o odabiru predloška. Tamo sam prešao preko naslova posta.
Ako trebamo umetnuti kod nakon izlaza našeg članka, onda nije teško pogoditi da trebamo pregledati područje našeg predloška i pronaći blok koji sadrži sav sadržaj članka. Možete pretraživati i kraj bloka i početak. Odnosno, predložak možete pregledati i odozdo i odozgo.
Ali evo jedne napomene . Moramo pronaći ne samo redove članka, već upravo blokove u kojima se nalazi sam sadržaj, budući da u datotekama šablona nema članaka. Postoji samo kod koji prikazuje sadržaj, a zatvoren je u blokove. Odmah nakon oznake za zatvaranje bloka
