Mga katangian ng tag ng BODY. HTML tags html, ulo, katawan. Mga tag na nasa anumang pahina ng Internet Isang halimbawa ng isang binuong istruktura ng HTML na dokumento

Elemento (mula sa English katawan- body) ay idinisenyo upang iimbak ang nilalaman ng isang web page (nilalaman) na ipinapakita sa window ng browser. Ang impormasyon na dapat ipakita sa dokumento ay dapat na matatagpuan sa loob ng lalagyan . Kasama sa impormasyong ito ang teksto, mga larawan, mga tag, JavaScript, atbp.

ginagamit din upang matukoy ang mga kulay ng mga link at teksto sa isang web page. Ang kasanayang ito ay kinasusuklaman sa HTML at sa halip ay inirerekomendang gumamit ng mga istilo upang tumukoy ng scheme ng kulay, na inilalapat ang mga ito sa tagapili ng katawan.

Madalas ginagamit upang maglagay ng event handler, gaya ng onload, na tumatakbo pagkatapos na ma-load ang dokumento sa kasalukuyang window o frame.

Pagbubukas at pagsasara ng mga tag ay hindi kinakailangan sa isang web page, ngunit itinuturing na magandang istilo ang paggamit ng mga ito upang tukuyin ang simula at pagtatapos ng isang HTML na dokumento.

Syntax

...

Pansara na tag

Hindi kailangan.

Mga Katangian

Halimbawa

KATAWAN

Maging si Aristotle sa kanyang “Politics” ay nagsabi na ang musika, na nakakaimpluwensya sa isang tao, ay naghahatid ng “isang uri ng paglilinis, iyon ay, kaginhawaan na nauugnay sa kasiyahan.”

Ang resulta ng kasalukuyang halimbawa ay ipinapakita sa Fig. 1. Kapag ginagamit ang onload na kaganapan ng isang elemento Ang isang script na nakasulat sa JavaScript ay pinaandar, sa kasong ito ay nagpapakita ito ng isang mensahe na ang dokumento ay na-load.

kanin. 1. Pop-up na window sa isang dokumento

Pagtutukoy

Ang bawat detalye ay dumadaan sa ilang yugto ng pag-apruba.

  • Rekomendasyon - Ang detalye ay naaprubahan ng W3C at inirerekomenda bilang isang pamantayan.
  • Rekomendasyon ng Kandidato ( Posibleng rekomendasyon) - ang pangkat na responsable para sa pamantayan ay nasisiyahan na ito ay nakakatugon sa mga layunin nito, ngunit nangangailangan ng tulong mula sa development community upang maipatupad ang pamantayan.
  • Iminungkahing Rekomendasyon Iminungkahing Rekomendasyon) - sa yugtong ito ang dokumento ay isinumite sa W3C Advisory Council para sa huling pag-apruba.
  • Working Draft - Isang mas mature na bersyon ng draft na tinalakay at na-amyendahan para sa pagsusuri ng komunidad.
  • draft ng editor ( Editoryal na draft) - isang draft na bersyon ng pamantayan pagkatapos ng mga pagbabago na ginawa ng mga editor ng proyekto.
  • Draft ( Pagtutukoy ng draft) - ang unang draft na bersyon ng pamantayan.

Ang buhay na pamantayan ng HTML (Buhay) ay namumukod-tangi - hindi ito sumusunod sa tradisyonal na pag-numero ng bersyon, dahil ito ay nasa ilalim ng patuloy na pag-unlad at regular na ina-update.

Tag (doble) ay idinisenyo upang mag-imbak ng nilalaman ng isang web page (nilalaman) na ipinapakita sa isang browser window. Ang impormasyon na dapat ipakita sa dokumento ay dapat na matatagpuan sa loob ng lalagyan ng KATAWAN. Kasama sa impormasyong ito ang teksto, mga larawan, mga tag, JavaScript, atbp.

Tag ginagamit din upang matukoy ang mga kulay ng mga link at teksto sa isang web page. Ang kasanayang ito ay hindi na ginagamit sa HTML 4 at sa halip ay inirerekomendang gumamit ng mga istilo upang tumukoy ng scheme ng kulay, na inilalapat ang mga ito sa tagapili . Gayunpaman, karamihan sa mga opsyon ay sinusuportahan pa rin sa mga browser.

Madalas tag ginagamit upang maglagay ng event handler, gaya ng onLoad, na tumatakbo pagkatapos na ma-load ang dokumento sa kasalukuyang window o frame.

Ang pagbubukas at pagsasara ng BODY tag sa isang web page ay opsyonal, ngunit magandang istilo na gamitin ang mga ito upang tukuyin ang simula at dulo ng isang HTML na dokumento.

Syntax

...

Pansara na tag
Kailangan.

Mga pagpipilian
alink - nagtatakda ng kulay ng aktibong link.
background - itinatakda ang larawan sa background sa web page.
bgcolor - kulay ng background ng web page.
bgproperties - tinutukoy kung mag-scroll sa background kasama ng teksto o hindi.
bottommargin - indent mula sa ibabang gilid ng browser window hanggang sa nilalaman.
leftmargin - pahalang na margin mula sa gilid ng browser window hanggang sa nilalaman.
link - kulay ng link.
scroll - nagtatakda kung magpapakita ng mga scroll bar o hindi.
text - ang kulay ng teksto sa dokumento.
topmargin - indent mula sa tuktok na gilid ng browser window hanggang sa nilalaman.
vlink - kulay ng binisita na mga link.

Halimbawa 1: Paggamit ng BODY tag



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Kung nais mo ang pinakamababang halaga, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



Paglalarawan ng mga parameter ng BODY tag

Parameter ng ALINK

Paglalarawan
Itinatakda ang kulay ng aktibong link. Ang kasalukuyang kulay ng link ay nagbabago sa aktibong kulay kapag ang link ay na-click gamit ang mouse cursor o pinili gamit ang keyboard.

Syntax
...

Mga argumento
Maaaring itakda ang halaga ng kulay sa dalawang paraan.

1. Sa pangalan nito
Sinusuportahan ng mga browser ang ilang mga kulay sa pamamagitan ng kanilang pangalan.

2. Sa pamamagitan ng hexadecimal na halaga
Ang mga hexadecimal na numero ay ginagamit upang tukuyin ang mga kulay. Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang mga numero ay magiging ganito: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Ang mga numero mula 10 hanggang 15 ay pinapalitan ng mga letrang Latin. Ang mga numerong higit sa 15 sa hexadecimal system ay nabuo sa pamamagitan ng pagsasama-sama ng dalawang numero sa isa. Halimbawa, ang numerong 255 sa decimal ay tumutugma sa numerong FF sa hexadecimal. Upang maiwasan ang pagkalito sa pagtukoy ng sistema ng numero, isang simbolo ng hash na # ang inilalagay bago ang hexadecimal na numero, halimbawa #666999. Ang bawat isa sa tatlong kulay - pula, berde at asul - ay maaaring tumagal ng mga halaga mula 00 hanggang FF. Kaya, ang simbolo ng kulay ay nahahati sa tatlong bahagi #rrggbb, kung saan ang unang dalawang simbolo ay nagpapahiwatig ng pulang bahagi ng kulay, ang gitnang dalawa - berde, at ang huling dalawa - asul.

Default na halaga
Tumutugma sa kulay ng link.



...

BACKGROUND parameter

Paglalarawan
Tinutukoy ang larawang gagamitin bilang wallpaper. Hindi tulad ng mga regular na larawan, ang background ay walang lapad o taas na nakatakda at palaging ipinapakita sa buong laki sa 100%. Kung ang larawan ay mas maliit sa laki kaysa sa window ng browser, pagkatapos ay ang larawan ay paulit-ulit nang pahalang sa kanan at pababa, na pumila tulad ng isang mosaic. Para sa kadahilanang ito, ang mga nakikitang pagkakaiba ay maaaring mangyari sa junction ng mga larawan sa background, na kapansin-pansin ng mga bisita sa site. Kapag pumipili ng larawan sa background, tiyaking may sapat na kaibahan sa pagitan nito at ng teksto sa web page. Ang mga animated na GIF ay maaaring gamitin bilang mga background, ngunit sila ay makagambala sa atensyon ng mambabasa.

Syntax
...

Mga argumento
Anumang wastong address ng imahe - maaari kang gumamit ng isang kamag-anak o ganap na landas.

Default na halaga
Hindi.

Halimbawa 3: Pagtatakda ng wallpaper sa isang web page



...

Parameter ng BGCOLOR

Paglalarawan
Itinatakda ang kulay ng background ng web page. Maaari mong gamitin ang parameter na ito kasabay ng background, pagpili ng kulay ng background na malapit sa larawan sa background

Syntax
...

Mga argumento
Tingnan ang parameter ng ALINK.

Default na halaga
Depende sa browser at sa bersyon nito, ngunit kadalasang puti ang kulay ng background.

Halimbawa 4: Pagtatakda ng kulay ng background ng isang web page



...

Parameter ng BGPROPERTIES

Paglalarawan
Bilang default, nag-i-scroll ang larawan sa background kasama ang nilalaman ng web page. Gamit ang parameter na bgproperties maaari mong ayusin ang background sa isang lugar at sa gayon ay pilitin lamang ang nilalaman na mag-scroll. Ang kalidad ng isang web page ay bihirang ginagamit para sa mga website, kaya maaaring mukhang kakaiba at hindi karaniwan sa mga user.

Syntax
...

Mga argumento
Mayroon lamang isang nakapirming parameter, na nag-aayos sa background. Kung gusto mong alisin ang feature na ito, alisin ang parameter ng bgproperties mula sa BODY tag o itakda ito sa isang walang laman na value - "".

Default na halaga
Hindi.

Halimbawa 5: Pag-aayos ng background



...

Tandaan

  • Hindi lahat ng browser ay sumusuporta sa setting na ito, halimbawa, hindi ito pinapansin ng Netscape.
  • Napansin na kapag itinatakda ang larawan sa background sa isang web page sa pamamagitan ng mga istilo, ang parameter ng bgproperies ay hihinto sa paggana.

LEFTMARGIN parameter

Paglalarawan
Tinutukoy ang dami ng espasyo mula sa kaliwa at kanang mga gilid ng browser window hanggang sa nilalaman ng web page.

Syntax
...

Mga argumento
Isang positibong integer na tumutukoy sa offset sa mga pixel.

Default na halaga
10 pixels para sa Windows at 8 pixels para sa Macintosh.

Halimbawa 6: Pagbabago sa kaliwang margin



...

Tandaan

  • Hindi nauunawaan ng Netscape browser ang leftmargin na parameter upang magtakda ng mga margin, ginagamit nito ang mga parameter na marginwidth - pahalang na margin at marginheight - vertical margin.
  • Upang itakda ang mga margin mula sa kanan, ibaba, at itaas na mga gilid, gamitin ang rightmargin, bottommargin, at topmargin na mga parameter, ayon sa pagkakabanggit.

Parameter ng LINK

Paglalarawan
Itinatakda ang kulay ng mga hindi nabisitang link.

Syntax
...

Mga argumento
Tingnan ang parameter ng ALINK.

Default na halaga
#0000FF

Halimbawa 7: Pagtatakda ng kulay ng mga link



...

SCROLL parameter

Paglalarawan
Kinokontrol ng scroll parameter ang pagkakaroon ng mga scroll bar sa browser window kapag ang nilalaman ng isang web page ay lumampas sa laki ng kasalukuyang window. Gumagana lang ang setting na ito sa Internet Explorer.

Syntax
...

Mga argumento
oo - nagpapakita ng mga scroll bar.
hindi - pinipigilan ang mga scroll bar na ipakita sa window.

Default na halaga
oo

Halimbawa 8: Pagtatago ng scrollbar



...

Parameter ng TEXT

Paglalarawan
Itinatakda ang default na kulay ng text na ginamit sa isang web page. Ang mga kulay ng mga indibidwal na elemento ay madaling mabago gamit ang mga estilo.

Syntax
...

Mga argumento
Tingnan ang parameter ng ALINK.

Default na halaga
#000000

Halimbawa 9: Pagpapalit ng kulay ng text



...

Parameter ng VLINK

Paglalarawan
Tinutukoy ang kulay ng mga binisita na link, ibig sabihin, mga link na "na-click" na ng user.

Syntax
...

Mga argumento
Tingnan ang parameter ng ALINK.

Default na halaga
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

Halimbawa 10: Pagtatakda ng kulay ng mga binisita na link



...

    Kulay ng teksto

    Kulay ng background

    Larawan sa background

    Kulay ng link

    Padding sa paligid ng nilalaman

    Mag-ehersisyo

Tulad ng alam mo na, sa pagitan ng pambungad na tag at closing tag Ang katawan ng pahina o ang nilalaman ng pahina mismo ay inilalagay. Tinatawag din itong salita nilalaman(mula sa nilalamang Ingles - nilalaman). Mga pagpipilian sa tag tukuyin ang mga katangian ng nilalaman sa kabuuan. Sa araling ito ay titingnan natin ang ilan sa mga ito.

Kulay ng teksto

Ang kulay ng teksto ng buong dokumento ay tinutukoy ng parameter text. Ito ay itinalaga alinman sa isang pangalan ng kulay o isang hexadecimal na halaga ng kulay, tulad ng parameter kulay tag (tingnan ang Aralin 2. Pag-format ng pagsusulit):

o

Ang paggamit ng halimbawang ito ay magreresulta sa lahat ng teksto sa pahina ay pula.

Parameter text ay opsyonal. Kung aalisin mo ito, magiging itim ang text sa page bilang default. Marahil ay nakita mo na ito sa pamamagitan ng paggawa ng mga nakaraang pagsasanay. :)

Kulay ng background

Ang kulay ng background ng page ay tinutukoy ng parameter bgcolor. Tumatanggap ito ng alinman sa isang pangalan ng kulay o isang halaga ng kulay ng hexadecimal, tulad ng parameter text.

o

Ang halimbawang ito ay magreresulta sa pagiging pula ng background ng pahina.

Parameter bgcolor ay opsyonal. Kung aalisin mo ito, ang default na background ng page ay magiging puti. Ang nakita mo na rin sa paggawa ng mga nakaraang pagsasanay. :)

Larawan sa background

Gamit ang parameter background Maaari mong tiyakin na ang pahina ay walang plain na background, ngunit ang background ay isang imahe. Para sa parameter na ito background kailangan mong italaga ang path sa imahe na gusto mong gawing background, pati na rin ang parameter src tag (Tingnan ang Aralin 5. Mga Larawan):

Sa ganitong paraan, maaari mong, halimbawa, i-tile ang background ng isang pahina na may ilang uri ng pattern. Ngunit hindi mo dapat abusuhin ang pagkakataong ito at gumawa ng malalaking larawan sa background para hindi masyadong mabigat ang page.

Halimbawa, mayroon kaming ganitong fragment ng isang pattern:

Kung gagawin natin itong background na larawan, makakakuha tayo ng page na may background na tulad nito:

Parameter background ay opsyonal din. Kung aalisin mo ito, ang default na background ng page ay magiging puti.

Kulay ng link

Mayroong 3 mga parameter ng tag upang itakda ang kulay ng mga link katawan:

Ang mga parameter na ito ay itinalaga ang pangalan ng kulay o ang hexadecimal na halaga nito, katulad ng iba pang mga parameter na responsable para sa kulay ng isang bagay.

Ito ang magiging hitsura nito sa pahina (upang makita ang lahat ng mga estado ng link, tandaan kung ano ito sa orihinal, pindutin nang matagal, tingnan kung ano ang naging, at sa wakas ay bitawan, bumalik sa pahinang ito, at tingnan kung ano ang kulay nito ):

Ang mga parameter na ito ay opsyonal. Kung aalisin mo ang mga ito, ang mga kulay ng link ay kukuha sa mga default na halaga (asul, pula, lila, ayon sa pagkakabanggit).

Padding sa paligid ng nilalaman

Kung gusto mong bumaba ang nilalaman ng page mula sa mga gilid ng window ng browser ng isang tiyak na halaga, sa kasong ito ang tag katawan mayroong 4 na mga parameter:

    kaliwang margin- indent mula sa kaliwang gilid;

    rightmargin- indentation mula sa kanang gilid;

    topmargin- indent mula sa tuktok na gilid;

    bottommargin- indent mula sa ilalim na gilid.

Ang mga parameter na ito ay kumukuha ng mga halaga sa mga pixel. Hindi kinakailangan ang mga ito, at maaari mong gamitin ang mga ito nang sabay-sabay o hiwalay. Halimbawa, maaari mong i-indent lamang ang kaliwa at kanan, o ang itaas at ibaba lamang, atbp.:

o

Hello guys!

Ngayon ay nagpasya akong hawakan ang isang paksa na hindi titigil na maging may kaugnayan sa mga batang tagalikha ng website.

Palaging kailangan na i-customize ang mga site pagkatapos gawin ang mga ito. Ang ilan sa mga setting ay ginagawa sa pamamagitan ng pag-edit ng mga file ng naka-install na template ng tema. Halimbawa, kailangan mong magpasok ng code na nagpapakita ng mga katulad na entry. Ngunit saan ito ipasok?

Kadalasan ang mga baguhan ay nagtatanong ng mga ganoong katanungan. Nag-aalala rin sila tungkol sa iba pang katulad na mga isyu, ang solusyon na kung saan ay talagang eksaktong pareho. Bilang karagdagan, sa aking mga artikulo sa hinaharap ay madalas akong gumamit ng pagpasok ng mga code sa iba't ibang mga lugar sa template. Samakatuwid, ang materyal na ito ay mas may kaugnayan kaysa dati.

Sa artikulong ito, ipapakita ko sa iyo kung paano mo madaling matukoy ang lugar sa iyong template ng WordPress kung saan kailangan mong magpasok ng anumang code. Isasaalang-alang ko rin ang iba pang mahahalagang punto na maaaring ikabahala mo sa paunang yugto.

Magsimula tayo sa pinakatuktok at tingnan ang mga file na maaaring kailanganin mong i-edit kung gusto mong magpasok ng mga code nang manu-mano sa halip na gumamit ng mga plugin, dahil mayroong pagpipiliang iyon. Hindi ko ito tinatanggap, ngunit gayon pa man, para sa mga tamad, ilalarawan ko ang mga naturang plugin sa mga sumusunod na artikulo.

Sa pinakadulo simula ay nagbibigay ako ng isang aralin sa video, dahil kung wala ito ay mahirap maunawaan ang materyal na ipinakita sa format ng teksto sa ibaba.

Ngayon ay ipapaliwanag ko ang lahat nang detalyado sa format ng teksto.

Mga file na responsable para sa pag-output ng bawat uri ng pahina

Kung marami kang nabasang artikulo sa iba pang mga blog tungkol sa pagpapatupad ng ilang function gamit ang mga code (scripts), 100% akong sigurado na nakakita ka ng mga parirala tulad ng:

  • Idikit ang code na ito sa file na responsable sa pagpapakita ng pangunahing pahina;
  • I-paste ang code na ito sa file na responsable para sa pag-output ng mga tala at iba pa.

Maraming mga file kung saan maaaring kailanganin mong magpasok ng mga code. Ngunit ano ang mga file na ito? Napakasimple ng lahat.

  1. Output ng home page - index.php;
  2. Output ng mga talaan - file single.php;
  3. Output ng pahina - file page.php;
  4. Output ng mga archive at kategorya - archive.php;
  5. Output ng footer - footer.php;
  6. Output ng pahina ng paghahanap - search.php;
  7. Output ng sidebar - sidebar.php;
  8. Style file - style.css;
  9. Ang 404 page na output file ay 404.php.

Ngayon, kapag sinabi nila sa iyo na kailangan mong i-paste ang code sa ganoon at ganoong file, malalaman mo kung saan titingnan.

Ang natitira lamang ay upang sagutin ang tanong: kung paano matukoy ang tamang lugar sa bawat isa sa mga file?

Pagtukoy kung saan ilalagay ang code

Una, dumaan tayo sa mga lugar na hindi kailangang kilalanin. Magiging pareho ang mga ito para sa lahat, anuman ang template.

Ang unang lugar, magkapareho para sa lahat ng mga template, ay ang lugar sa Header.php file. Ito ang mga pambungad at pagsasara na mga tag .

Ang ilang mga script ay palaging inilalagay sa pagitan ng mga tag na ito, na dapat gumana para sa lahat ng mga pahina ng site. Ibig sabihin, naglagay kami ng script, halimbawa, para sa mga social button sa pagitan ng mga tag na ito at gumagana ang mga ito sa lahat ng page ng site kung saan namin ipapakita ang mga ito.

Ang mga tag na ito ay matatagpuan sa pinakatuktok ng Header.php file.

Ang nilalaman sa pagitan ay magkakaiba para sa lahat, dahil ang lahat ay nakasalalay sa template.

Kung sinabihan ka na kailangan mong ipasok ang code na ito sa pagitan ng pagbubukas at pagsasara ng mga tag ng ulo, pagkatapos ay kopyahin ang code, maghanap ng katulad na bahagi sa iyong template file, at i-paste lang ito sa pagitan ng mga tag na iyon.

Ang pangalawang lugar, na pareho din para sa lahat ng mga template, ay matatagpuan sa file na responsable para sa output ng footer - footer.php.

Maaaring ikonekta ang mga script hindi lamang sa pamamagitan ng paglalagay ng mga ito sa pagitan ng mga tag sa Header.php file. Maaari mo ring i-load ang mga ito sa pamamagitan ng footer.php file, sa gayon ay mapabilis ang paglo-load ng pahina ng site.

Ang katotohanan ay kapag ang pahina ay nagsimulang mag-load, ito ay naglo-load mula sa itaas hanggang sa ibaba. Kung ang lahat ng mga script ay nasa tuktok ng pahina, kung gayon ang pagpapakita ng nilalaman nito ay bumagal, dahil magtatagal ito upang mai-load ang mga script.

Ang aming gawain ay ipakita ang mga nilalaman ng pahina nang mabilis hangga't maaari sa parehong mga bisita at mga search engine. Sa kasong ito, ipinapayong mag-load ng mga script sa pinakadulo ng pahina upang maipakita muna ang nilalaman, at pagkatapos ay i-load ang lahat ng iba pa.

Upang ipatupad ang opsyong ito, kailangan mong buksan ang footer.php file at ipasok ang script bago ang closing body tag. Ito ay matatagpuan sa dulo ng nilalaman ng file, dahil ito ay responsable para sa dulo ng lugar ng pahina.


Tulad ng nakikita mo, ipinakita ko ang lahat ng mga script sa lugar na ito, bago ang pansarang tag(naka-highlight na may asul na frame). Sa pamamagitan ng paraan, inilabas ko ang mga ito sa pamamagitan ng pag-load mula sa mga file, at hindi sa pamamagitan ng paglalagay ng mga script mismo sa lugar na ito. Pagkatapos nito, binilisan ko nang husto ang blog. Kung paano ito gagawin ay magiging isang hiwalay na artikulo. Teka!

Umaasa ako na kapag sinabi nila sa iyo na i-paste ang code sa mga lugar na ito, gagawin mo ito nang walang anumang problema.

Lumipat tayo sa isang mas kumplikadong isyu at subukang matutunan kung paano tukuyin ang mga lugar sa iba pang mga template file kung saan ipinapasok ang iba't ibang mga code. Kadalasan, kasama sa mga code na ito ang:

  • Ipakita ang mga katulad na post;
  • Output ng form ng subscription;
  • Pagpapakita ng mga social button at iba pa.

Ang lahat ng mga bagay na ito ay ipinasok pagkatapos ng pangunahing bahagi ng nilalaman, iyon ay, pagkatapos ng pagtatapos ng artikulo. Ang bawat isa ay may ibang template code at, samakatuwid, isang unibersal na sagot sa tanong "Saan nagtatapos ang output code ng aking artikulo?" hindi lang.

Ngunit madali mong matukoy ang dulo ng code, pagkatapos nito kailangan mong ipatupad ang function na kailangan mo. Bahagyang ipinakita ko na ang pamamaraang ito sa artikulo tungkol sa pagpili ng template ng WordPress (). Pagkatapos ay ginamit ko ang karaniwang pag-andar ng isang Internet browser.

Upang mas maunawaan ang kakanyahan ng pamamaraang ito, lubos kong inirerekumenda na panoorin ang video sa simula ng post na ito. Dito ko ipinakita kung paano nangyayari ang lahat sa real time. Well, ngayon ay susubukan kong ilarawan ito nang malinaw hangga't maaari.

Ipapakita ko sa iyo ang paggamit ng Google Chrome browser bilang isang halimbawa. Ang ibang mga browser ay mayroon ding ganitong function, ngunit maaaring may bahagyang naiibang pangalan.

  • Google Chrome - tingnan ang code ng elemento;
  • Firefox - galugarin ang elemento;
  • Opera - suriin ang isang elemento.

Ang prinsipyo ay katulad sa 3 browser. Ngayon ay ipapakita ko sa iyo kung paano matukoy ang lokasyon ng anumang lugar sa anumang template.

Pumunta upang tingnan ang code ng elemento (Google Chrome). Mag-right-click sa isang walang laman na lugar ng pahina.


Pagkatapos nito, may lalabas na panel sa ibaba ng page, na nagpapakita ng buong source code ng page, na maaari naming i-edit at makita kung paano magbabago ang istraktura at hitsura ng template sa real time. Ngunit ang mga pagbabago sa data ay hindi nai-save. Upang gawin ito, kailangan mong i-edit ang mga file ng template mismo.

Narito ang hitsura ng panel.

Itinuro ko gamit ang isang arrow sa isang magnifying glass, sa pamamagitan ng pag-click kung saan maaari naming suriin ang istraktura ng template at matukoy kung anong mga bloke ang binubuo ng aming template. Tinatawag ko itong function na inspektor.

Pagkatapos mag-click sa inspektor, maaari naming ilipat ang mouse sa paligid ng aming pahina at makikita namin na ang lahat ng mga elemento na aming i-hover ay magsisimulang ma-highlight na may isang kulay na background. Bilang halimbawa, magpapakita ako sa iyo ng screenshot mula sa isang artikulo tungkol sa pagpili ng template. Doon ako nag-hover sa pamagat ng post.


Kung kailangan naming magpasok ng code pagkatapos ng output ng aming artikulo, kung gayon hindi mahirap hulaan na kailangan naming suriin ang lugar ng aming template at hanapin ang bloke na naglalaman ng lahat ng nilalaman ng artikulo. Maaari kang maghanap sa dulo ng block at sa simula. Iyon ay, maaari mong suriin ang template mula sa ibaba at mula sa itaas.

Ngunit narito ang isang tala . Kailangan nating hanapin hindi lamang ang mga linya ng artikulo, ngunit tiyak ang mga bloke kung saan matatagpuan ang nilalaman mismo, dahil walang mga artikulo sa mga file ng template. Mayroon lamang code na nagpapakita ng nilalaman, at ito ay nakapaloob sa mga bloke. Pagkatapos mismo ng closing block tag

at kakailanganin mong i-paste ang code.

Kaya ano ang gagawin natin? Mag-click sa icon ng magnifying glass at simulang suriin ang lugar kung saan matatagpuan ang aming artikulo. Kailangan mong maghanap ng isang bahagi ng pahina kapag ang lugar ng buong artikulo ay naka-highlight. Ito ang magiging bloke na magpapakita ng nilalaman.

Bilang halimbawa, gumawa ako ng bagong artikulo na may maliit na nilalaman upang ipakita kung paano iha-highlight ang block na ito.


Gamit ang paraan ng poke, dapat mo ring mahanap ang block na naglalaman ng iyong nilalaman. Kapag nag-hover ka, makikita mo ang isang maliit na tooltip na nagpapakita sa iyo ng pangalan ng block.

Kapag nakakita ka ng ganoong bahagi ng template, mag-click sa pindutan ng mouse at magiging aktibo ang bahaging ito. Sa panel ng pagtingin sa elemento ng code, awtomatikong mai-highlight ang linya ng code na may block na ito.


Gaya ng nakikita mo, ang block na ito ay may eksaktong kaparehong pangalan tulad ng sa hover tooltip.

Kapag alam namin ang pangalan ng block kung saan ipinapakita ang pangunahing bahagi ng artikulo, maaari kaming pumunta sa kinakailangang file at ipasok ang code na kailangan namin pagkatapos ng block na ito. Halimbawa, kunin natin ang recording output file (single.php).

Binuksan ko ito sa editor ng Notepad at naghahanap ng isang linya sa code na nagsisimula nang eksakto katulad ng sa panel ng view ng elemento ng code.

Ito ay napaka-maginhawa upang gumana sa Notepad editor, dahil kapag nag-click ka sa pambungad na tag ng isang bloke, ang pagsasara ng tag ay naka-highlight din (ipinapakita sa larawan sa itaas). Isinasaad ng pansarang tag na ito na ang katapusan ng nilalaman. Ito ay pagkatapos nito na maaari naming ipasok ang aming mga social button, katulad na mga post at iba pang mga function.

Naglagay lang ako ng mga social button doon kasama ng isang subscription form para sa mga update.


Ganito ang hitsura ng mga ito sa mga pahina.


Ang parehong ay totoo para sa pagpasok sa iba pang mga template file (mga pahina, kategorya, archive...).

Kung walang pagsasanay, malamang na hindi ka makabisado ang pamamaraang ito ng pagpasok ng teksto at mga imahe. Samakatuwid, kunin ito at subukan ito. Sigurado akong magiging maayos ang lahat. Kapaki-pakinabang din ang video sa simula ng artikulo.

Tungkol sa pagtukoy ng lokasyon sa template file para sa kasunod na pagpasok dito ng ninanais, naisip namin ito.

Naiwan ang huling sandali, na sulit na italaga sa puntong ito.

Mayroong ilang mga setting na nangangailangan ng interbensyon sa mga function.php file ng template. Ngunit kailangan mo ring maunawaan kung paano magpasok ng mga code dito.

Bilang isang patakaran, sa lahat ng mga blog ay isinusulat nila na ang pagpasok ay dapat gawin sa pinakadulo ng file bago ang pansarang tag?>.

Ngunit paano kung wala ang tag na ito sa file? Halimbawa, wala lang ako. Ano ang gagawin sa ganoong sitwasyon? Ang kawalan ng pansarang tag ay hindi nangangahulugan na ang file ay hindi tama. Gumagana ang blog. Kaya lahat ay OK.

Sa kasong ito, ipinapanukala kong gawin ang kabaligtaran - ipasok ito sa code sa pinakadulo simula ng file bago ang pambungad na tag. Tingnan ang larawan sa ibaba.


Ang pambungad na tag ay naka-highlight sa pula, at ang code na ipinasok sa asul.

Isa itong opsyon. Maaari mo ring ipasok ang code sa dulo ng file, ngunit bago ang huling code. Sa kasong ito, kailangan mong maunawaan kahit kaunti kung saan magsisimula ang huling code upang hindi ito maputol.

Iyon lang. Kung bigla kang magkakaroon ng parehong sitwasyon sa nawawalang closing tag sa funsctions.php file, malalaman mo kung ano ang gagawin.

Pagtukoy sa mga istilo ng disenyo sa isang template

Maaari din naming tingnan ang mga istilo ng disenyo para sa mga elemento ng page at baguhin ang mga ito, pati na rin magdagdag ng sarili namin. Ang parehong inspektor ng elemento ay tumutulong dito.

Kapag nahanap namin ang nais na elemento at nag-click dito, ang tamang lugar ng panel ng pagsusuri ng code ay nagpapakita ng mga estilo ng disenyo para sa napiling bloke (elemento). Ipapakita ko ang mga istilo para sa parehong bloke ng artikulong tinalakay sa itaas.


Kung gusto naming i-edit ang mga istilong ito sa real time at makita kung anong hitsura nito o ang elementong iyon, maaari naming baguhin ang mga ito nang direkta sa panel na ito. Mag-click lamang sa mga halaga ng nais na mga estilo at baguhin ang mga ito.

Ngunit ang mga pagbabago ay magiging wasto lamang hanggang sa pag-refresh ng 1st page. Upang ilapat ang mga istilong ito, dapat mong idagdag ang mga ito sa file ng mga estilo ng template. Sa isa sa mga larawan sa itaas, ipinakita ko sa isang asul na frame ang lugar na nagpapakita ng pangalan ng file kung saan nakasulat ang mga istilong ito, pati na rin ang eksaktong linya kung saan sila magsisimula.

Samakatuwid, buksan ang style file style.css at hanapin ang linya 890 sa aking kaso.

Dito maaari mong i-edit ang mga ito. I-save ang file at i-upload ito sa iyong hosting.

Pakitandaan na ine-edit ko ang lahat ng file sa aking computer. Sa kasong ito, gumagamit ako ng mga panlabas na programa, na ginagawang posible na kanselahin ang anumang mga pagbabago kung mayroong anumang mga problema. Ang parehong naaangkop sa iba't ibang mga eksperimento na may mga code at script - lahat sa .

Lubos kong inirerekomenda na magsagawa ka rin ng katulad na pag-edit ng anumang mga file sa iyong computer. Upang gawin ito, kailangan mo munang i-download ang mga file sa iyong computer mula sa iyong pagho-host gamit ang isang ftp client. Isinulat ko ang tungkol dito sa. At pagkatapos ay buksan lamang ang mga file gamit ang anumang editor na maginhawa para sa iyo na maaaring magbukas ng mga ito. Gumagamit ako ng Notepad para sa mga layuning ito.

Ito ang nagtatapos sa artikulo. Ito ang nakakalito na proseso ng pagtukoy kung saan mo kailangang magpasok ng ilang code o script. Sa unang sulyap, ang pamamaraang ito ay maaaring mukhang kumplikado. Ngunit ang lahat ay napaka-simple. Susubukan mo ito ng ilang beses at hindi ka na magtatanong ng mga ganoong katanungan.

Siyempre, maaari kang magpasok ng mga code at script sa iyong blog gamit ang mga espesyal na plugin, na tiyak na tatalakayin ko sa mga sumusunod na artikulo. Ngunit, upang maiwasan ang kanilang paggamit, maaari mong gawin ang parehong mga aksyon nang wala ang mga ito, na kung ano ang inirerekomenda ko. Sa paggawa nito ay maaalis mo ang hindi kinakailangang pag-load sa site, at sa gayon ay mapabilis ito at ginagawang mas maginhawa para sa iyong mga bisita na gamitin.

Lahat ng kaibigan. dito na ako magtatapos. Inaasahan ko ang iyong mga katanungan sa mga komento. Aalamin natin ito. Magkita-kita tayo sa mga bagong materyales.

Pinakamahusay na pagbati, Konstantin Khmelev.

Elemento idinisenyo upang iimbak ang nilalaman ng isang web page (nilalaman) na ipinapakita sa isang browser window. Ang impormasyon na dapat ipakita sa dokumento ay dapat na matatagpuan sa loob ng lalagyan ng KATAWAN. Kasama sa impormasyong ito ang teksto, mga larawan, mga tag, JavaScript, atbp.

Tag ginagamit din upang matukoy ang mga kulay ng mga link at teksto sa isang web page. Ang kasanayang ito ay hindi na ginagamit sa HTML 4 at sa halip ay inirerekomendang gumamit ng mga istilo upang tumukoy ng scheme ng kulay, na inilalapat ang mga ito sa tagapili ng BODY. Gayunpaman, karamihan sa mga opsyon ay sinusuportahan pa rin sa mga browser.

Madalas tag ginagamit upang maglagay ng event handler, gaya ng onLoad, na tumatakbo pagkatapos na ma-load ang dokumento sa kasalukuyang window o frame.

Pagbubukas at pagsasara ng mga tag ay hindi kinakailangan sa isang web page, ngunit itinuturing na magandang istilo ang paggamit ng mga ito upang tukuyin ang simula at pagtatapos ng isang HTML na dokumento.

Syntax


...

Mga pagpipilian

alink Itinatakda ang kulay ng aktibong link. background Itinatakda ang background na larawan sa web page. bgcolor Ang kulay ng background ng web page. bgproperties Tinutukoy kung mag-scroll sa background kasama ng teksto o hindi. bottommargin Margin mula sa ibabang gilid ng browser window hanggang sa nilalaman. leftmargin Pahalang na margin mula sa gilid ng browser window hanggang sa nilalaman. link Ang kulay ng mga link sa isang web page. scroll Itinatakda kung ipapakita ang mga scroll bar o hindi. text Ang kulay ng teksto sa dokumento. topmargin Margin mula sa tuktok na gilid ng browser window hanggang sa nilalaman. vlink Kulay ng binisita na mga link.

Pansara na tag

Opsyonal ang mga opening at closing tag.

Halimbawa 1: Paggamit ng tag




I-tag ang KATAWAN


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


Kung nais mo ang pinakamababang halaga, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



Kapag ginagamit ang parameter ng onload tag Ang isang script na nakasulat sa JavaScript ay pinaandar, sa kasong ito ay nagpapakita ito ng isang mensahe na ang dokumento ay na-load.

Paglalarawan ng mga parameter ng tag

Parameter ng ALINK

Paglalarawan

Syntax

...

Mga argumento

Maaaring itakda ang halaga ng kulay sa dalawang paraan.

1. Sa pangalan nito

Sinusuportahan ng mga browser ang ilang mga kulay sa pamamagitan ng kanilang pangalan.

2. Sa pamamagitan ng hexadecimal na halaga

Ang mga hexadecimal na numero ay ginagamit upang tukuyin ang mga kulay. Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang mga numero ay magiging ganito: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Ang mga numero mula 10 hanggang 15 ay pinapalitan ng mga letrang Latin. Ang mga numerong higit sa 15 sa hexadecimal system ay nabuo sa pamamagitan ng pagsasama-sama ng dalawang numero sa isa. Halimbawa, ang numerong 255 sa decimal ay tumutugma sa numerong FF sa hexadecimal. Upang maiwasan ang pagkalito sa pagtukoy ng sistema ng numero, isang simbolo ng hash na # ang inilalagay bago ang hexadecimal na numero, halimbawa #666999. Ang bawat isa sa tatlong kulay - pula, berde at asul - ay maaaring tumagal ng mga halaga mula 00 hanggang FF. Kaya, ang simbolo ng kulay ay nahahati sa tatlong bahagi #rrggbb, kung saan ang unang dalawang simbolo ay nagpapahiwatig ng pulang bahagi ng kulay, ang gitnang dalawa - berde, at ang huling dalawa - asul.

Default na halaga

Katulad ng CSS

KATAWAN:aktibo (kulay: kulay)




BODY tag, alink parameter



...

BACKGROUND parameter

Paglalarawan

Tinutukoy ang larawang gagamitin bilang wallpaper. Hindi tulad ng mga regular na larawan, ang background ay walang lapad o taas na nakatakda at palaging ipinapakita sa buong laki sa 100%. Kung ang larawan ay mas maliit sa laki kaysa sa window ng browser, pagkatapos ay ang larawan ay paulit-ulit nang pahalang sa kanan at pababa, na pumila tulad ng isang mosaic. Para sa kadahilanang ito, ang mga nakikitang pagkakaiba ay maaaring mangyari sa junction ng mga larawan sa background, na kapansin-pansin ng mga bisita sa site. Kapag pumipili ng larawan sa background, tiyaking may sapat na kaibahan sa pagitan nito at ng teksto sa web page. Ang mga animated na GIF ay maaaring gamitin bilang mga background, ngunit sila ay makagambala sa atensyon ng mambabasa.

Syntax

...

Mga argumento

Anumang wastong address ng imahe - maaari kang gumamit ng isang kamag-anak o ganap na landas.

Default na halaga

Katulad ng CSS

BODY ( background: url("file path") )

Halimbawa 3: Pagse-set ng wallpaper




BODY tag, parameter ng background


background="/images/bgred.gif">
...

Parameter ng BGCOLOR

Paglalarawan

Itinatakda ang kulay ng background ng web page. Maaari mong gamitin ang parameter na ito kasabay ng background , pagpili ng kulay ng background na malapit sa larawan sa background

Syntax

...

Mga argumento

Tingnan ang parameter ng ALINK.

Default na halaga

Depende sa browser at sa bersyon nito, ngunit kadalasang puti ang kulay ng background.

Katulad ng CSS

KATAWAN ( background: kulay )

Halimbawa 4: Kulay ng background sa isang web page




BODY tag, bgcolor na parameter



...

Parameter ng BGPROPERTIES

HTML: 3.2 4 XHTML: 1.0 1.1

Paglalarawan

Bilang default, nag-i-scroll ang larawan sa background kasama ang nilalaman ng web page. Gamit ang parameter na bgproperties maaari mong ayusin ang background sa isang lugar at sa gayon ay pilitin lamang ang nilalaman na mag-scroll. Ang kalidad ng isang web page ay bihirang ginagamit para sa mga website, kaya maaaring mukhang kakaiba at hindi karaniwan sa mga user.

Syntax

...

Mga argumento

Mayroon lamang isang nakapirming halaga, na nag-aayos sa background. Kung gusto mong hindi maayos ang background, alisin ang parameter na bgproperties sa tag o itakda ito sa isang walang laman na halaga - "".

Default na halaga

Katulad ng CSS

BODY ( background-attachment: fixed | scroll )

Halimbawa 5. Pag-aayos ng background




BODY tag, parameter ng bgproperties


background="images/bbking.jpg" bgproperties="fixed">
...

Tandaan

  • Hindi lahat ng browser ay sumusuporta sa parameter na ito, halimbawa, ganap na binabalewala ito ng Netscape (Firefox).
  • Napansin na kapag nagtatakda ng larawan sa background sa isang web page sa pamamagitan ng mga istilo, hihinto sa paggana ang parameter ng bgproperies.

LEFTMARGIN parameter

HTML: 3.2 4 XHTML: 1.0 1.1

Paglalarawan

Tinutukoy ang dami ng espasyo mula sa kaliwa at kanang mga gilid ng browser window hanggang sa nilalaman ng web page.

Syntax

...

Mga argumento

Isang positibong integer na tumutukoy sa offset sa mga pixel.

Default na halaga

10 pixels para sa Windows at 8 pixels para sa Macintosh.

Katulad ng CSS

KATAWAN (margin: numero)

Halimbawa 6: Kaliwang margin




BODY tag, leftmargin parameter



...

Tandaan

  • Hindi nauunawaan ng Netscape browser ang leftmargin na parameter upang magtakda ng mga margin, ginagamit nito ang mga parameter na marginwidth (horizontal margin) at marginheight (vertical margins).
  • Upang itakda ang mga margin mula sa kanan, ibaba, at itaas na mga gilid, gamitin ang rightmargin, bottommargin, at topmargin na mga parameter, ayon sa pagkakabanggit.

Parameter ng LINK

Paglalarawan

Itinatakda ang kulay ng mga hindi nabisitang link.

Syntax

...

Mga argumento

Tingnan ang parameter ng ALINK.

Default na halaga

Katulad ng CSS

KATAWAN:link (kulay: kulay )

Halimbawa 7. Kulay ng link




BODY tag, parameter ng link



...

SCROLL parameter

HTML: 3.2 4 XHTML: 1.0 1.1

Paglalarawan

Kinokontrol ng scroll parameter ang pagkakaroon ng mga scroll bar sa browser window kapag ang nilalaman ng isang web page ay lumampas sa laki ng kasalukuyang window. Gumagana lang ang setting na ito sa Internet Explorer.

Syntax

...

Mga argumento

oo—Nagpapakita ng mga scroll bar.
hindi—Hindi pinapagana ang pagpapakita ng mga scroll bar sa window.

Default na halaga

Katulad ng CSS

KATAWAN (overflow: nakatago)




BODY tag, scroll parameter



...

Parameter ng TEXT

Paglalarawan

Itinatakda ang default na kulay ng text na ginamit sa isang web page. Ang mga kulay ng mga indibidwal na elemento ay madaling mabago gamit ang mga estilo.

Syntax

...

Mga argumento

Tingnan ang parameter ng ALINK.

Default na halaga

Katulad ng CSS

KATAWAN (kulay: kulay)

Halimbawa 9: Kulay ng teksto sa isang web page




BODY tag, parameter ng teksto



...

Parameter ng VLINK

Paglalarawan

Tinutukoy ang kulay ng mga binisita na link, ibig sabihin, mga link na "na-click" na ng user.

Syntax

...

Mga argumento

Tingnan ang parameter ng ALINK.

Default na halaga

#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

  • Tinutukoy ng META ang mga meta tag na ginagamit upang mag-imbak ng impormasyong nilayon para sa mga browser at search engine.
  • Ginagamit ang STYLE upang tukuyin ang mga istilo ng mga elemento ng web page.
  • Ang LINK ay nagtatatag ng isang link sa isang panlabas na dokumento tulad ng isang stylesheet o font file.