Element
(iz angleščine telo- body) je namenjen shranjevanju vsebine spletne strani (vsebine), prikazane v oknu brskalnika. Informacije, ki naj bodo prikazane v dokumentu, se morajo nahajati znotraj vsebnika . Te informacije vključujejo besedilo, slike, oznake, JavaScript itd.uporablja se tudi za določanje barv povezav in besedila na spletni strani. To prakso v HTML-ju zavračajo in namesto tega je priporočljivo uporabiti sloge za določitev barvne sheme, ki jih uporabite za izbirnik telesa.pogosto
uporablja se za postavitev obdelovalca dogodkov, kot je nalaganje, ki se zažene po tem, ko se dokument konča z nalaganjem v trenutno okno ali okvir.Odpiranje in zapiranje oznak
na spletni strani niso potrebni, vendar velja, da je njihova uporaba za določitev začetka in konca dokumenta HTML dobra.Sintaksa
...Zaključna oznaka
Ni zahtevano.
Lastnosti
Primer
Že Aristotel je v svoji »Politiki« rekel, da glasba, ki vpliva na človeka, prinaša »neke vrste očiščenje, to je olajšanje, povezano z užitkom«.
Rezultat trenutnega primera je prikazan na sl. 1. Pri uporabi dogodka onload elementa
Izvede se skript, napisan v JavaScriptu, v tem primeru prikaže sporočilo, da je bil dokument naložen.riž. 1. Pojavno okno v dokumentu
Specifikacija
Vsaka specifikacija gre skozi več stopenj odobritve.
- Priporočilo – specifikacijo je odobril W3C in je priporočena kot standard.
- Priporočilo kandidata ( Možno priporočilo) - skupina, odgovorna za standard, je zadovoljna, da izpolnjuje svoje cilje, vendar potrebuje pomoč razvojne skupnosti za implementacijo standarda.
- Predlagano priporočilo Predlagano priporočilo) - na tej stopnji je dokument predložen svetovalnemu svetu W3C v končno odobritev.
- Delovni osnutek – bolj zrela različica osnutka, o katerem so razpravljali in ga spremenili za pregled skupnosti.
- Uredniški osnutek ( Uredniški osnutek) - osnutek različice standarda po spremembah s strani urednikov projekta.
- Osnutek ( Osnutek specifikacije) - prvi osnutek standarda.
Izstopa živi standard HTML (Living), ki se ne drži tradicionalnega številčenja različic, saj je v stalnem razvoju in se redno posodablja.
Oznaka (dvojne) je zasnovan za shranjevanje vsebine spletne strani (vsebine), prikazane v oknu brskalnika. Informacije, ki naj bodo prikazane v dokumentu, se morajo nahajati znotraj vsebnika BODY. Te informacije vključujejo besedilo, slike, oznake, JavaScript itd.
Oznaka uporablja se tudi za določanje barv povezav in besedila na spletni strani. Ta praksa je v HTML 4 opuščena in namesto tega je priporočljivo uporabiti sloge za določitev barvne sheme in jih uporabiti v izbirniku . Vendar je večina možnosti še vedno podprtih v brskalnikih.
Pogosto označite uporablja se za postavitev obdelovalca dogodkov, kot je onLoad, ki se zažene, ko se dokument konča z nalaganjem v trenutno okno ali okvir.
Odpiralne in končne oznake BODY na spletni strani niso obvezne, vendar je dobro, če jih uporabite za določitev začetka in konca dokumenta HTML.
Sintaksa
...
Zaključna oznaka
Obvezno.
Opcije
alink - nastavi barvo aktivne povezave.
ozadje - nastavi sliko ozadja na spletni strani.
bgcolor - barva ozadja spletne strani.
bgproperties - določa, ali naj se pomika ozadje skupaj z besedilom ali ne.
bottommargin - zamik od spodnjega roba okna brskalnika do vsebine.
levi rob - vodoravni rob od roba okna brskalnika do vsebine.
povezava - barva povezave.
pomikanje - nastavi, ali naj se prikažejo drsni trakovi ali ne.
besedilo - barva besedila v dokumentu.
topmargin - zamik od zgornjega roba okna brskalnika do vsebine.
vlink - barva obiskanih povezav.
Primer 1: Uporaba 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 parametrov oznake BODY
parameter ALINK
Opis
Nastavi barvo aktivne povezave. Trenutna barva povezave se spremeni v aktivno barvo, ko povezavo kliknete z miško ali izberete s tipkovnico.
Sintaksa
Argumenti
Vrednost barve lahko nastavite na dva načina.
1. Po svojem imenu
Brskalniki podpirajo nekatere barve po imenu.
2. Po šestnajstiški vrednosti
Za določanje barv se uporabljajo šestnajstiška števila. Šestnajstiški sistem za razliko od decimalnega temelji, kot že ime pove, na številu 16. Številke bodo naslednje: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Številke od 10 do 15 nadomestimo z latiničnimi črkami. Števila, večja od 15 v šestnajstiškem sistemu, nastanejo tako, da se dve števili združita v eno. Na primer, število 255 v decimalnem zapisu ustreza številu FF v šestnajstiškem zapisu. Da bi se izognili zmedi pri določanju številskega sistema, se pred šestnajstiško številko postavi znak #, na primer #666999. Vsaka od treh barv - rdeča, zelena in modra - ima lahko vrednosti od 00 do FF. Tako je barvni simbol razdeljen na tri komponente #rrggbb, kjer prva dva simbola označujeta rdečo komponento barve, srednja dva - zeleno in zadnja dva - modro.
Privzeta vrednost
Ujema se z barvo povezave.
...
BACKGROUND parameter
Opis
Določa sliko, ki bo uporabljena kot ozadje. Za razliko od običajnih slik ozadje nima nastavljene širine ali višine in je vedno prikazano v polni velikosti pri 100 %. Če je slika manjša od okna brskalnika, se slika ponavlja vodoravno v desno in navzdol ter se zlaga kot mozaik. Iz tega razloga se lahko pojavijo vidne razlike na stičišču slik ozadja, ki jih obiskovalci spletnega mesta opazijo. Pri izbiri slike za ozadje bodite pozorni na zadosten kontrast med njo in besedilom na spletni strani. Animirani GIF-i se lahko uporabljajo kot ozadje, vendar bodo odvrnili bralčevo pozornost.
Sintaksa
Argumenti
Kateri koli veljaven naslov slike - uporabite lahko relativno ali absolutno pot.
Privzeta vrednost
št.
Primer 3: Nastavitev ozadja na spletni strani
...
parameter BGCOLOR
Opis
Nastavi barvo ozadja spletne strani. Ta parameter lahko uporabite v povezavi z ozadjem, tako da izberete barvo ozadja, ki je blizu sliki ozadja
Sintaksa
Argumenti
Glej parameter ALINK.
Privzeta vrednost
Odvisno od brskalnika in njegove različice, vendar je barva ozadja običajno bela.
Primer 4: Nastavitev barve ozadja spletne strani
...
parameter BGPROPERTIES
Opis
Privzeto se slika ozadja pomika z vsebino spletne strani. S parametrom bgproperties lahko popravite ozadje na enem mestu in s tem prisilite, da se premika samo vsebina. Ta kakovost spletne strani se redko uporablja za spletne strani, zato se uporabnikom lahko zdi čudna in nenavadna.
Sintaksa
Argumenti
Obstaja samo en fiksni parameter, ki določa ozadje. Če želite odstraniti to funkcijo, odstranite parameter bgproperties iz oznake BODY ali ga nastavite na prazno vrednost - "".
Privzeta vrednost
št.
Primer 5: Popravljanje ozadja
...
Opomba
- Vsi brskalniki ne podpirajo te nastavitve; Netscape jo na primer ignorira.
- Opaženo je bilo, da pri nastavljanju slike ozadja na spletni strani prek slogov parameter bgproperies preneha delovati.
parameter LEFTMARGIN
Opis
Določa količino prostora od levega in desnega roba okna brskalnika do vsebine spletne strani.
Sintaksa
Argumenti
Pozitivno celo število, ki določa odmik v slikovnih pikah.
Privzeta vrednost
10 slikovnih pik za Windows in 8 slikovnih pik za Macintosh.
Primer 6: Spreminjanje levega roba
...
Opomba
- Brskalnik Netscape ne razume parametra levih robov, uporablja parametra marginwidth - vodoravni robovi in marginheight - navpični robovi.
- Če želite nastaviti robove od desnega, spodnjega in zgornjega roba, uporabite parametre rightmargin, bottommargin in topmargin.
parameter LINK
Opis
Nastavi barvo neobiskanih povezav.
Sintaksa
Argumenti
Glej parameter ALINK.
Privzeta vrednost
#0000FF
Primer 7: Nastavitev barve povezav
...
Parameter SCROLL
Opis
Parameter drsenja nadzira prisotnost drsnih trakov v oknu brskalnika, ko vsebina spletne strani presega velikost trenutnega okna. Ta nastavitev deluje samo v Internet Explorerju.
Sintaksa
Argumenti
da - prikaže drsne trakove.
ne - prepreči prikaz drsnih trakov v oknu.
Privzeta vrednost
ja
Primer 8: Skrivanje drsnega traku
...
parameter TEXT
Opis
Nastavi privzeto barvo besedila na spletni strani. Barve posameznih elementov lahko preprosto spreminjate s pomočjo stilov.
Sintaksa
Argumenti
Glej parameter ALINK.
Privzeta vrednost
#000000
Primer 9: Spreminjanje barve besedila
...
parameter VLINK
Opis
Določa barvo obiskanih povezav, torej povezav, ki jih je uporabnik že »kliknil«.
Sintaksa
Argumenti
Glej parameter ALINK.
Privzeta vrednost
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Primer 10: Nastavitev barve obiskanih povezav
...
Barva besedila
Barva ozadja
Slika ozadja
Barva povezave
Oblazinjenje okoli vsebine
telovadba
Kot že veste, med začetno oznako in zaključna oznaka Postavi se telo strani ali sama vsebina strani. Imenuje se tudi beseda vsebino(iz angleške vsebine - vsebina). Možnosti oznak določajo lastnosti vsebine kot celote. V tej lekciji si bomo ogledali nekatere izmed njih.
Barva besedila
Barva besedila celotnega dokumenta je določena s parametrom besedilo. Dodeljeno mu je ime barve ali šestnajstiška barvna vrednost, tako kot parameter barva oznaka (glejte lekcijo 2. Oblikovanje testa):
ozČe uporabite ta primer, bo vse besedilo na strani rdeče.
Parameter besedilo ni obvezna. Če ga izpustite, bo besedilo na strani privzeto črno. To ste verjetno že videli pri prejšnjih vajah. :)
Barva ozadja
Barva ozadja strani je določena s parametrom bgcolor. Sprejme bodisi ime barve bodisi šestnajstiško vrednost barve, tako kot parameter besedilo.
ozV tem primeru bo ozadje strani rdeče.
Parameter bgcolor ni obvezna. Če ga izpustite, bo privzeto ozadje strani belo. Kar ste tudi že videli pri prejšnjih vajah. :)
Slika ozadja
Uporaba parametra ozadje Poskrbite lahko, da stran nima navadnega ozadja, ampak je ozadje slika. Za ta parameter ozadje Določiti morate pot do slike, ki jo želite narediti za ozadje, kot tudi parameter src oznaka
(Glejte lekcijo 5. Slike):
Na ta način lahko na primer pokrijete ozadje strani z nekakšnim vzorcem. Vendar te priložnosti ne smete zlorabiti in narediti velikih slik v ozadju, da stran ne bo pretežka.
Na primer, imamo ta del vzorca:
Če naredimo sliko za ozadje, bomo dobili stran z ozadjem, kot je ta:
Parameter ozadje je tudi neobvezna. Če ga izpustite, bo privzeto ozadje strani belo.
Barva povezave
Obstajajo 3 parametri oznake za nastavitev barve povezav telo:
Tem parametrom je dodeljeno ime barve ali njena šestnajstiška vrednost, podobno kot drugi parametri, ki so odgovorni za barvo nečesa.
Takole bo videti na strani (če želite videti vsa stanja povezave, se spomnite, kakšna je bila prvotno, pritisnite in držite, poglejte, kaj je postala, in na koncu spustite, vrnite se na to stran in poglejte, kakšne barve je ):
Ti parametri so neobvezni. Če jih izpustite, bodo barve povezav prevzele privzete vrednosti (modra, rdeča, vijolična oz.).
Oblazinjenje okoli vsebine
Če želite, da se vsebina strani za določeno mero umakne od robov okna brskalnika, v tem primeru oznaka telo obstajajo 4 parametri:
levi rob- zamik od levega roba;
desni rob- zamik od desnega roba;
topmargin- zamik od zgornjega roba;
bottommargin- zamik od spodnjega roba.
Ti parametri imajo vrednosti v slikovnih pikah. Niso obvezne in jih lahko uporabite vse naenkrat ali ločeno. Na primer, lahko zamaknete samo levo in desno ali samo zgornji in spodnji itd.:
ozZdravo družba!
Danes sem se odločil, da se dotaknem teme, ki ne bo nikoli prenehala biti aktualna med mladimi ustvarjalci spletnih strani.
Ko so spletna mesta ustvarjena, jih je vedno treba prilagoditi. Nekatere nastavitve se izvedejo z urejanjem datotek nameščene predloge teme. Na primer, morate vstaviti kodo, ki prikazuje podobne vnose. Toda kam ga vstaviti?
Zelo pogosto novinci postavljajo takšna vprašanja. Skrbijo jih tudi druga podobna vprašanja, katerih rešitev je v bistvu povsem enaka. Poleg tega se bom v prihodnjih člankih pogosto zatekel k vstavljanju kod na različna mesta v predlogi. Zato je ta material bolj pomemben kot kdaj koli prej.
V tem članku vam bom pokazal, kako lahko zelo preprosto prepoznate mesto v vaši WordPress predlogi, kamor morate vstaviti katero koli kodo. Upošteval bom tudi druge pomembne točke, ki vas lahko zadevajo v začetni fazi.
Začnimo na samem vrhu in si oglejmo datoteke, ki jih boste morda morali urediti, če želite kode vstaviti ročno in ne z uporabo vtičnikov, saj ta možnost obstaja. Ne pozdravljam ga, a vseeno bom za lene opisal takšne vtičnike v naslednjih člankih.
Na samem začetku podajam video lekcijo, saj bo brez nje težko razumeti gradivo, predstavljeno v besedilni obliki spodaj.
Zdaj bom vse podrobno razložil v besedilni obliki.
Datoteke, odgovorne za izpis vsake vrste strani
Če ste na drugih blogih prebrali veliko člankov o izvajanju nekaterih funkcij s kodami (skripti), sem 100 % prepričan, da ste videli fraze, kot so:
- To kodo prilepite v datoteko, ki je odgovorna za prikaz glavne strani;
- To kodo prilepite v datoteko, ki je odgovorna za izpis zapisov in drugih.
Obstaja veliko datotek, v katere boste morda morali vstaviti kode. Toda kaj so te datoteke? Vse je zelo preprosto.
- Izpis domače strani - index.php;
- Izpis zapisov - datoteka single.php;
- Izpis strani - datoteka page.php;
- Izpis arhivov in kategorij - archive.php;
- Izpis noge - footer.php;
- Izpis iskalne strani - search.php;
- Izpis stranske vrstice - sidebar.php;
- Slogovna datoteka - style.css;
- Izhodna datoteka 404 strani je 404.php.
Zdaj, ko vam povedo, da morate kodo prilepiti v takšno in tako datoteko, boste vedeli, kam iskati.
Ostaja le odgovoriti na vprašanje: kako določiti pravo mesto v vsaki od datotek?
Določanje, kam vstaviti kodo
Najprej pojdimo skozi tista mesta, ki jih ni treba identificirati. Enaki bodo za vse, ne glede na predlogo.
Prvo mesto, enako za vse predloge, je območje v datoteki Header.php. To sta začetni in zaključni oznaki
.Nekateri skripti so vedno postavljeni med te oznake, kar bi moralo delovati na vseh straneh spletnega mesta. To pomeni, da smo na primer postavili skript za socialne gumbe med te oznake in delujejo na vseh straneh spletnega mesta, kjer jih bomo prikazali.
Te oznake se nahajajo na samem vrhu datoteke Header.php.
Vmesna vsebina bo za vsakogar drugačna, saj je vse odvisno od predloge.
Če vam povedo, da morate to kodo vstaviti med začetno in končno oznako glave, kopirajte kodo, poiščite podobno področje v datoteki predloge in jo preprosto prilepite med tema oznakama.
Drugo mesto, ki je prav tako enako za vse predloge, se nahaja v datoteki, ki je odgovorna za izpis noge - footer.php.
Skripte je mogoče povezati ne le tako, da jih vstavite med oznake
v datoteki Header.php. Naložite jih lahko tudi preko datoteke footer.php in s tem pospešite nalaganje strani spletnega mesta.Dejstvo je, da ko se stran začne nalagati, se naloži od zgoraj navzdol. Če so vsi skripti na vrhu strani, se bo prikaz njene vsebine upočasnil, saj bo nalaganje skriptov trajalo nekaj časa.
Naša naloga je čim hitreje prikazati vsebino strani tako obiskovalcem kot iskalnikom. V tem primeru je priporočljivo, da skripte naložite čisto na koncu strani, da najprej prikažete vsebino, nato pa naložite vse ostalo.
Za izvedbo te možnosti morate odpreti datoteko footer.php in vstaviti skript pred zaključno oznako body. Nahaja se na koncu vsebine datoteke, saj je odgovoren za konec območja strani.
Kot lahko vidite, sem prikazal vse skripte v tem območju pred zaključno oznako(poudarjeno z modrim okvirjem). Mimogrede, iznesel sem jih z nalaganjem iz datotek in ne s postavitvijo samih skriptov na to področje. Po tem sem bistveno pospešil blog. Kako to storiti, bo ločen članek. Počakaj!
Upam, da ko vam bodo rekli, da prilepite kodo v ta področja, boste to storili brez težav.
Pojdimo k bolj zapletenemu vprašanju in se poskušajmo naučiti prepoznati mesta v drugih datotekah predlog, v katere so vstavljene različne druge kode. Običajno te kode vključujejo:
- Prikaži podobne objave;
- Izpis naročniškega obrazca;
- Prikaz socialnih gumbov in tako naprej.
Vse te stvari so vstavljene za glavnim delom vsebine, torej za koncem članka. Vsak ima drugačno kodo predloge in s tem univerzalen odgovor na vprašanje "Kje se konča moja izhodna koda članka?" preprosto ne.
Vendar lahko preprosto določite konec kode, po kateri morate implementirati funkcijo, ki jo potrebujete. To metodo sem delno že prikazal v članku o izbiri WordPress predloge (). Nato sem uporabil standardno funkcionalnost internetnega brskalnika.
Za boljše razumevanje bistva te metode toplo priporočam ogled videa na začetku te objave. V njej sem pokazal, kako se vse dogaja v realnem času. No, zdaj bom poskušal čim bolj jasno opisati.
Pokazal vam bom na primeru brskalnika Google Chrome. Tudi drugi brskalniki imajo to funkcijo, vendar imajo lahko nekoliko drugačno ime.
- Google Chrome - ogled kode elementa;
- Firefox - element raziskovanja;
- Opera - preglejte element.
Načelo je podobno v treh brskalnikih. Zdaj vam bom pokazal, kako določite lokacijo katerega koli območja v kateri koli predlogi.
Pojdite na ogled kode elementa (Google Chrome). Z desno miškino tipko kliknite prazno območje strani.
Po tem se na dnu strani prikaže plošča, kjer je prikazana celotna izvorna koda strani, ki jo lahko urejamo in vidimo, kako se bo struktura in izgled predloge spreminjala v realnem času. Vendar se spremembe podatkov ne shranijo. Če želite to narediti, morate urediti same datoteke predloge.
Tako izgleda plošča.
S puščico sem pokazal na povečevalno steklo, s klikom na katerega lahko pregledamo strukturo predloge in ugotovimo, iz katerih blokov je sestavljena naša predloga. To funkcijo imenujem inšpektor.
Po kliku na inšpektorja lahko z miško premikamo po naši strani in videli bomo, da se vsi elementi, nad katerimi se pomaknemo, začnejo poudarjati z barvnim ozadjem. Kot primer vam bom pokazal posnetek zaslona iz članka o izbiri predloge. Tam sem se pomaknil nad naslov objave.
Če moramo vstaviti kodo po izpisu našega članka, potem ni težko uganiti, da moramo pregledati področje naše predloge in najti blok, ki vsebuje vso vsebino članka. Iščete lahko na koncu bloka in na začetku. To pomeni, da lahko predlogo pregledate tako od spodaj kot od zgoraj.
Ampak tukaj je ena opomba . Najti moramo ne samo vrstice članka, ampak natančno bloke, v katerih se nahaja sama vsebina, saj v datotekah predloge ni člankov. Obstaja le koda, ki prikazuje vsebino in je zaprta v bloke. Takoj za zaključno oznako bloka
