Element
(inglise keelest keha- body) on mõeldud brauseriaknas kuvatava veebilehe sisu (sisu) salvestamiseks. Teave, mis tuleks dokumendis kuvada, peaks asuma konteineri sees . See teave hõlmab teksti, pilte, silte, JavaScripti jne.kasutatakse ka veebilehel olevate linkide ja teksti värvide määramiseks. Seda tava HTML-is taunitakse ja selle asemel on soovitatav kasutada stiile värviskeemi määramiseks, rakendades neid kehavalijale.Sageli
kasutatakse sündmuste käitleja (nt onload) paigutamiseks, mis käivitub pärast seda, kui dokument on praegusesse aknasse või raami laadimise lõpetanud.Siltide avamine ja sulgemine
ei ole veebilehel kohustuslikud, kuid nende kasutamist HTML-dokumendi alguse ja lõpu määratlemiseks peetakse heaks stiiliks.Süntaks
...Sulgev silt
Pole nõutud.
Atribuudid
Näide
Isegi Aristoteles ütles oma "Poliitikas", et muusika, mis mõjutab inimest, pakub "omamoodi puhastust, see tähendab naudinguga seotud kergendust".
Praeguse näite tulemus on näidatud joonisel fig. 1. Elemendi laadimissündmuse kasutamisel
Käivitatakse JavaScriptis kirjutatud skript, sel juhul kuvatakse teade, et dokument on laaditud.Riis. 1. Hüpikaken dokumendis
Spetsifikatsioon
Iga spetsifikatsioon läbib mitu kinnitamisetappi.
- Soovitus – spetsifikatsiooni on heaks kiitnud W3C ja seda soovitatakse kasutada standardina.
- Kandidaadi soovitus ( Võimalik soovitus) – standardi eest vastutav grupp on rahul, et see täidab oma eesmärke, kuid vajab standardi rakendamiseks abi arenduskogukonnalt.
- Kavandatud soovitus Soovitatav soovitus) – selles etapis esitatakse dokument lõplikuks kinnitamiseks W3C nõuandekogule.
- Working Draft – küpsem versioon eelnõust, mida on kogukonna läbivaatamiseks arutatud ja muudetud.
- Toimetaja mustand ( Toimetuse mustand) - standardi mustandversioon pärast muudatuste tegemist projekti toimetajate poolt.
- Mustand ( Spetsifikatsiooni kavand) – standardi esimene mustandversioon.
Elav HTML-standard (Living) paistab silma - see ei järgi traditsioonilist versioonide nummerdamist, kuna seda arendatakse pidevalt ja seda uuendatakse regulaarselt.
Tag (kahekohalised) on mõeldud brauseriaknas kuvatava veebilehe sisu (sisu) salvestamiseks. Teave, mis tuleks dokumendis kuvada, peaks asuma konteineris BODY. See teave hõlmab teksti, pilte, silte, JavaScripti jne.
Tag kasutatakse ka veebilehel olevate linkide ja teksti värvide määramiseks. See tava on HTML 4-s aegunud ja selle asemel on soovitatav värviskeemi määramiseks kasutada stiile, rakendades neid valijale . Enamikku valikuid toetatakse siiski kõigis brauserites.
Sageli märgistage kasutatakse sündmuste käitleja (nt onLoad) paigutamiseks, mis käivitatakse pärast seda, kui dokument on praegusesse aknasse või raami laadimise lõpetanud.
Ava- ja sulgemissildid BODY veebilehel on valikulised, kuid nende kasutamine on hea HTML-dokumendi alguse ja lõpu määratlemiseks.
Süntaks
...
Sulgev silt
Nõutud.
Valikud
alink – määrab aktiivse lingi värvi.
background – määrab veebilehe taustapildi.
bgcolor – veebilehe taustavärv.
bgproperties – määrab, kas kerida tausta koos tekstiga või mitte.
bottommargin – taane brauseriakna alumisest servast sisuni.
vasak veeris – horisontaalne veeris brauseriakna servast sisuni.
link - lingi värv.
kerimine – määrab, kas kerimisribasid kuvada või mitte.
tekst – dokumendis oleva teksti värv.
topmargin – taane brauseriakna ülaservast sisuni.
vlink – külastatud linkide värv.
Näide 1: Märgi BODY kasutamine
Lorem ipsum dolor sit amet, consectetuer adipiscing eliit, 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.
Märgendi BODY parameetrite kirjeldus
ALINK parameeter
Kirjeldus
Määrab aktiivse lingi värvi. Lingi praegune värv muutub aktiivseks värviks, kui lingil klõpsatakse hiirekursoriga või valitakse see klaviatuuri abil.
Süntaks
Argumendid
Värvi väärtust saab määrata kahel viisil.
1. Nime järgi
Brauserid toetavad mõnda värvi nende nime järgi.
2. Kuueteistkümnendsüsteemi väärtuse järgi
Värvide määramiseks kasutatakse kuueteistkümnendarvu. Kuueteistkümnendsüsteem, erinevalt kümnendsüsteemist, põhineb, nagu nimigi ütleb, arvul 16. Arvud on järgmised: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Numbrid 10 kuni 15 asendatakse ladina tähtedega. Arvud, mis on suuremad kui 15 kuueteistkümnendsüsteemis, saadakse kahe arvu ühendamisel üheks. Näiteks kümnendsüsteemis olev arv 255 vastab kuueteistkümnendsüsteemis arvule FF. Et vältida segadust numbrisüsteemi määramisel, asetatakse kuueteistkümnendsüsteemi ette räsimärk #, näiteks #666999. Kõik kolm värvi - punane, roheline ja sinine - võivad võtta väärtusi vahemikus 00 kuni FF. Seega on värvisümbol jagatud kolmeks komponendiks #rrggbb, kus kaks esimest sümbolit tähistavad värvi punast komponenti, kaks keskmist - rohelist ja kaks viimast - sinist.
Vaikeväärtus
Sobib lingi värviga.
...
TAUST parameeter
Kirjeldus
Määrab taustapildina kasutatava pildi. Erinevalt tavalistest piltidest ei ole taustal laiust ega kõrgust määratud ning see kuvatakse alati täissuuruses 100%. Kui pilt on brauseriaknast väiksem, korratakse pilti horisontaalselt paremale ja alla, joondudes nagu mosaiik. Sel põhjusel võivad taustapiltide ristumiskohas ilmneda nähtavad erinevused, mis on saidi külastajatele märgatavad. Taustapildi valimisel jälgi, et selle ja veebilehel oleva teksti vahel oleks piisavalt kontrasti. Animeeritud GIF-e saab kasutada taustana, kuid need tõmbavad lugeja tähelepanu kõrvale.
Süntaks
Argumendid
Mis tahes kehtiv pildi aadress – võite kasutada suhtelist või absoluutset teed.
Vaikeväärtus
Ei.
Näide 3: Taustapildi määramine veebilehele
...
BGCOLOR parameeter
Kirjeldus
Määrab veebilehe taustavärvi. Seda parameetrit saate kasutada koos taustaga, valides taustapildile lähedase taustavärvi
Süntaks
Argumendid
Vaadake ALINK parameetrit.
Vaikeväärtus
Oleneb brauserist ja selle versioonist, kuid taustavärv on tavaliselt valge.
Näide 4: Veebilehe taustavärvi määramine
...
BGPROPERTIES parameeter
Kirjeldus
Vaikimisi kerib taustapilt koos veebilehe sisuga. Parameetri bgproperties abil saate tausta ühes kohas fikseerida ja seega sundida ainult sisu kerima. Seda veebilehe kvaliteeti kasutatakse veebisaitide jaoks harva, mistõttu võib see kasutajatele kummaline ja ebatavaline tunduda.
Süntaks
Argumendid
On ainult üks fikseeritud parameeter, mis fikseerib tausta. Kui soovite selle funktsiooni eemaldada, eemaldage parameeter bgproperties sildist BODY või määrake see tühjaks väärtuseks "".
Vaikeväärtus
Ei.
Näide 5: tausta parandamine
...
Märge
- Kõik brauserid ei toeta seda sätet; näiteks Netscape ignoreerib seda.
- On märgatud, et stiilide kaudu veebilehel taustapildi seadmisel lakkab parameeter bgproperies töötamast.
LEFTMARGIN parameeter
Kirjeldus
Määrab ruumi hulga brauseriakna vasakust ja paremast servast veebilehe sisuni.
Süntaks
Argumendid
Positiivne täisarv, mis määrab nihke pikslites.
Vaikeväärtus
10 pikslit Windowsi jaoks ja 8 pikslit Macintoshi jaoks.
Näide 6: Vasaku veerise muutmine
...
Märge
- Netscape'i brauser ei mõista parameetrit leftmargin, veeriste määramiseks kasutab ta parameetreid marginwidth - horisontaalsed veerised ja marginheight - vertikaalsed veerised.
- Veeriste määramiseks paremast, alumisest ja ülemisest servast kasutage vastavalt parameetreid paremveeris, alumine veeris ja ülemine veeris.
LINK parameeter
Kirjeldus
Määrab külastamata linkide värvi.
Süntaks
Argumendid
Vaadake ALINK parameetrit.
Vaikeväärtus
#0000FF
Näide 7: linkide värvi määramine
...
SCROLL parameeter
Kirjeldus
Kerimisparameeter juhib kerimisribade olemasolu brauseriaknas, kui veebilehe sisu ületab praeguse akna suuruse. See säte töötab ainult Internet Exploreris.
Süntaks
Argumendid
jah – kuvab kerimisribad.
ei – takistab kerimisribade kuvamist aknas.
Vaikeväärtus
jah
Näide 8: Kerimisriba peitmine
...
TEXT parameeter
Kirjeldus
Määrab veebilehel kasutatava teksti vaikevärvi. Üksikute elementide värve saab stiilide abil lihtsalt muuta.
Süntaks
Argumendid
Vaadake ALINK parameetrit.
Vaikeväärtus
#000000
Näide 9: Teksti värvi muutmine
...
VLINK parameeter
Kirjeldus
Määrab külastatud linkide värvi, st linkide, millel kasutaja on juba klõpsanud.
Süntaks
Argumendid
Vaadake ALINK parameetrit.
Vaikeväärtus
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).
Näide 10: Külastatud linkide värvi määramine
...
Teksti värv
Taustavärv
Taustapilt
Lingi värv
Polsterdus sisu ümber
Harjutus
Nagu juba teate, avasildi vahele ja sulgev silt Paigutatakse lehe keha või lehe enda sisu. Seda nimetatakse ka sõnaks sisu(ingliskeelsest sisust - sisu). Sildi valikud määrata sisu kui terviku omadused. Selles õppetükis vaatleme mõnda neist.
Teksti värv
Kogu dokumendi teksti värv määratakse parameetriga tekst. Sellele määratakse kas värvinimi või kuueteistkümnendsüsteemis värvi väärtus, nagu parameetrile värvi tag (vt õppetund 2. Testi vormindamine):
võiSelle näite kasutamisel on kogu lehel olev tekst punane.
Parameeter tekst on valikuline. Kui jätate selle vahele, on lehel olev tekst vaikimisi must. Tõenäoliselt olete seda juba eelmisi harjutusi tehes näinud. :)
Taustavärv
Lehe taustavärv määratakse parameetri järgi bgcolor. See aktsepteerib kas värvi nime või kuueteistkümnendsüsteemi värvi väärtust, nagu parameeter tekst.
võiSelle näite tulemuseks on lehe taust punane.
Parameeter bgcolor on valikuline. Kui jätate selle vahele, on lehe vaiketaust valge. Mida olete ka eelnevaid harjutusi tehes juba näinud. :)
Taustapilt
Parameetri kasutamine taustal Saate jälgida, et lehel poleks tavaline taust, vaid taust on pilt. Selle parameetri jaoks taustal peate määrama tee pildile, mida soovite taustaks teha, ja parameetri src tag
(Vt õppetund 5. Pildid):
Nii saab näiteks lehe tausta plaatida mingisuguse mustriga. Kuid te ei tohiks seda võimalust kuritarvitada ja teha taustal suuri pilte, et leht mitte liiga raskeks muuta.
Näiteks on meil see mustri fragment:
Kui teeme selle taustapildiks, saame sellise taustaga lehe:
Parameeter taustal on ka valikuline. Kui jätate selle vahele, on lehe vaiketaust valge.
Lingi värv
Linkide värvi määramiseks on 3 sildi parameetrit keha:
Nendele parameetritele määratakse värvi nimi või selle kuueteistkümnendsüsteem, mis sarnaneb muude parameetritega, mis vastutavad millegi värvi eest.
See näeb lehel välja selline (et näha kõiki lingi olekuid, meeles pidada, mis see algselt oli, vajutage ja hoidke all, vaadake, mis sellest sai ja lõpuks vabastage, naaske sellele lehele ja vaadake, mis värvi see on ):
Need parameetrid on valikulised. Kui jätate need välja, omandavad lingivärvid vaikeväärtused (vastavalt sinine, punane, lilla).
Polsterdus sisu ümber
Kui soovid, et lehe sisu taanduks brauseriakna servadest teatud määral, siis antud juhul märgi keha on 4 parameetrit:
vasakpoolne veeris- taane vasakust servast;
paremääre- taane paremast servast;
ülemine veeris- taane ülemisest servast;
alumine piir- taane alumisest servast.
Need parameetrid võtavad väärtusi pikslites. Neid ei nõuta ja saate neid kasutada korraga või eraldi. Näiteks saate taandada ainult vasakule ja paremale või ainult üla- ja alaosale jne.
võiTere kutid!
Täna otsustasin puudutada teemat, mis ei lakka kunagi aktuaalsest noorte veebiloojate seas.
Alati on vaja saite pärast nende loomist kohandada. Mõned sätted tehakse installitud teemamalli failide redigeerimise teel. Näiteks peate sisestama koodi, mis kuvab sarnaseid kirjeid. Aga kuhu see sisestada?
Väga sageli küsivad algajad selliseid küsimusi. Samuti valmistavad neile muret muud sarnased probleemid, mille lahendus on sisuliselt täpselt sama. Lisaks kasutan oma tulevastes artiklites sageli koodide sisestamist malli erinevatesse kohtadesse. Seetõttu on see materjal asjakohasem kui kunagi varem.
Selles artiklis näitan teile, kuidas teil on väga lihtne oma WordPressi mallis tuvastada koht, kuhu peate koodi sisestama. Kaalun ka muid olulisi punkte, mis võivad teid algetapis puudutada.
Alustame kõige ülaosast ja vaatame faile, mida peate võib-olla redigeerima, kui soovite sisestada koode käsitsi, mitte kasutada pluginaid, kuna see võimalus on olemas. Ma ei tervita seda, kuid laiskade jaoks kirjeldan selliseid pistikprogramme järgmistes artiklites.
Alguses annan videotunni, kuna ilma selleta on allpool tekstivormingus esitatud materjali raske mõista.
Nüüd selgitan kõike üksikasjalikult tekstivormingus.
Igat tüüpi lehtede väljastamise eest vastutavad failid
Kui olete lugenud teistest ajaveebidest palju artikleid mõne funktsiooni rakendamise kohta koodide (skriptide) abil, siis olen 100% kindel, et olete näinud selliseid fraase nagu:
- Kleepige see kood avalehe kuvamise eest vastutavasse faili;
- Kleepige see kood faili, mis vastutab kirjete ja muu väljastamise eest.
Seal on palju faile, millesse peate võib-olla koodid sisestama. Aga mis need failid on? Kõik on väga lihtne.
- Kodulehe väljund - index.php;
- Kirjete väljund - fail single.php;
- Lehe väljund - fail page.php;
- Arhiivide ja kategooriate väljund - arhiiv.php;
- Jaluse väljund - jalus.php;
- Otsingulehe väljund - otsing.php;
- Külgriba väljund - sidebar.php;
- Stiilifail - style.css;
- 404-leheküljeline väljundfail on 404.php.
Nüüd, kui nad ütlevad teile, et peate koodi kleepima sellisesse ja sellisesse faili, teate, kust otsida.
Jääb vaid vastata küsimusele: kuidas määrata igas failis õige koht?
Koodi sisestamise koha määramine
Kõigepealt käime läbi need kohad, mida pole vaja tuvastada. Need on kõigile ühesugused, olenemata mallist.
Esimene koht, mis on kõigi mallide puhul identne, on faili Header.php ala. Need on avamise ja sulgemise sildid
.Mõned skriptid paigutatakse alati nende siltide vahele, mis peaksid töötama saidi kõigil lehtedel. See tähendab, et asetasime nende siltide vahele näiteks sotsiaalsete nuppude skripti ja need töötavad saidi kõigil lehtedel, kus me neid kuvame.
Need sildid asuvad faili Header.php ülaosas.
Vahepealne sisu on igaühe jaoks erinev, kuna kõik sõltub mallist.
Kui teile öeldakse, et peate selle koodi sisestama avamis- ja sulgemissildi vahele, kopeerige kood, otsige oma mallifailist sarnane ala ja kleepige see lihtsalt nende siltide vahele.
Teine koht, mis on samuti kõigi mallide jaoks identne, asub jaluse väljundi eest vastutavas failis - footer.php.
Skripte saab ühendada mitte ainult neid siltide vahele sisestades
faili Header.php. Saate need laadida ka faili footer.php kaudu, kiirendades seeläbi saidi lehe laadimist.Fakt on see, et kui leht hakkab laadima, laaditakse see ülevalt alla. Kui kõik skriptid on lehe ülaosas, aeglustub selle sisu kuvamine, kuna skriptide laadimine võtab aega.
Meie ülesanne on näidata lehe sisu võimalikult kiiresti nii külastajatele kui ka otsingumootoritele. Sel juhul on soovitatav laadida skriptid lehe päris lõpus, et esmalt kuvada sisu ja seejärel laadida kõik muu.
Selle suvandi rakendamiseks peate avama faili footer.php ja sisestama skripti sulgemismärgise ette. See asub faili sisu lõpus, kuna see vastutab lehe lõpu ala eest.
Nagu näete, kuvasin kõik selle ala skriptid enne sulgevat silti(esile tõstetud sinise raamiga). Muide, ma tõin need välja failidest laadimise kaudu, mitte skripte ise sellesse piirkonda paigutades. Peale seda kiirendasin oluliselt blogi pidamist. Kuidas seda teha, on eraldi artikkel. Oota!
Loodan, et kui nad käsivad teil nendesse piirkondadesse koodi kleepida, teete seda ilma probleemideta.
Liigume edasi keerukama probleemi juurde ja proovime õppida, kuidas tuvastada teistes mallifailides kohti, kuhu on sisestatud mitmesuguseid muid koode. Tavaliselt hõlmavad need koodid järgmist:
- Kuva sarnased postitused;
- Tellimisvormi väljund;
- Sotsiaalsete nuppude kuvamine ja nii edasi.
Kõik need asjad sisestatakse pärast sisu põhiosa, st pärast artikli lõppu. Igal neist on erinev mallikood ja seega universaalne vastus küsimusele "Kus lõpeb minu artikli väljundkood?" lihtsalt ei.
Kuid saate hõlpsalt määrata koodi lõpu, mille järel peate vajaliku funktsiooni rakendama. Osaliselt näitasin seda meetodit juba artiklis WordPressi malli valimise kohta (). Seejärel kasutasin Interneti-brauseri standardfunktsioone.
Selle meetodi olemuse paremaks mõistmiseks soovitan soojalt vaadata selle postituse alguses olevat videot. Selles näitasin, kuidas kõik toimub reaalajas. Noh, nüüd proovin seda võimalikult selgelt kirjeldada.
Näitan teile Google Chrome'i brauserit näitena. See funktsioon on ka teistel brauseritel, kuid neil võib olla veidi erinev nimi.
- Google Chrome - vaata elemendi koodi;
- Firefox – uuri elementi;
- Opera - kontrollige elementi.
Põhimõte on sarnane 3 brauseris. Nüüd näitan teile, kuidas määrata mis tahes piirkonna asukoht mis tahes mallis.
Minge elemendi koodi vaatamiseks (Google Chrome). Paremklõpsake lehe tühjal alal.
Pärast seda ilmub lehe allossa paneel, kus on näha kogu lehe lähtekood, mida saame redigeerida ja vaadata, kuidas reaalajas malli struktuur ja välimus muutuvad. Kuid andmete muudatusi ei salvestata. Selleks peate redigeerima mallifaile ise.
Siin näeb paneel välja.
Osutasin noolega suurendusklaasile, millel klõpsates saame malli struktuuri üle vaadata ja määrata, millistest plokkidest meie mall koosneb. Nimetan seda funktsiooni inspektoriks.
Pärast inspektoril klõpsamist saame hiirt oma lehel ringi liigutada ja näeme, et kõik elemendid, mille kohal hõljutame, hakkavad olema värvilise taustaga esile tõstetud. Näitena näitan teile ekraanipilti malli valimist käsitlevast artiklist. Seal hõljutasin kursorit postituse pealkirja kohal.
Kui peame oma artikli väljundi järel koodi sisestama, siis pole raske arvata, et peame oma malli ala üle vaatama ja leidma ploki, mis sisaldab kogu artikli sisu. Otsida saab nii ploki lõpust kui ka algusest. See tähendab, et saate malli kontrollida nii alt kui ka ülalt.
Kuid siin on üks märkus . Peame leidma mitte ainult artikli read, vaid täpselt plokid, milles sisu ise asub, kuna mallifailides pole artikleid. Seal on ainult kood, mis kuvab sisu ja see on suletud plokkidesse. Vahetult pärast sulgemisploki silti
