BODY тегтерінің атрибуттары. HTML тегтері html, head, body. Кез келген Интернет бетіндегі тегтер әзірленген HTML құжат құрылымының мысалы

Элемент (ағылшын тілінен дене- дене) браузер терезесінде көрсетілетін веб-беттің (контенттің) мазмұнын сақтауға арналған. Құжатта көрсетілуі тиіс ақпарат контейнердің ішінде орналасуы керек . Бұл ақпарат мәтінді, суреттерді, тегтерді, JavaScript және т.б.

веб-беттегі сілтемелер мен мәтіннің түстерін анықтау үшін де қолданылады. Бұл тәжірибе HTML-де ұнамайды және оның орнына түс схемасын көрсету үшін стильдерді пайдалану ұсынылады, оларды негізгі таңдау құралына қолдану.

Жиі құжат ағымдағы терезеге немесе жақтауға жүктеуді аяқтағаннан кейін іске қосылатын жүктеу сияқты оқиға өңдегішін орналастыру үшін пайдаланылады.

Тегтерді ашу және жабу веб-бетте талап етілмейді, бірақ оларды HTML құжатының басы мен соңын анықтау үшін пайдалану жақсы стиль болып саналады.

Синтаксис

...

Жабу белгісі

Қажет емес.

Атрибуттар

Мысал

ДЕНЕ

Тіпті Аристотель өзінің «Саясатында» музыка адамға әсер ете отырып, «тазартудың бір түрін, яғни ләззатпен байланысты жеңілдікті» береді деп айтқан.

Ағымдағы мысалдың нәтижесі суретте көрсетілген. 1. Элементтің жүктеу оқиғасын пайдалану кезінде JavaScript тілінде жазылған сценарий орындалады, бұл жағдайда ол құжаттың жүктелгені туралы хабарламаны көрсетеді.

Күріш. 1. Құжаттағы қалқымалы терезе

Техникалық сипаттама

Әрбір спецификация мақұлдаудың бірнеше сатысынан өтеді.

  • Ұсыныс - Техникалық сипаттаманы W3C мақұлдаған және стандарт ретінде ұсынылады.
  • Кандидат ұсынысы ( Мүмкін ұсыныс) - стандартқа жауапты топ оның мақсаттарына сәйкес келетініне қанағаттанады, бірақ стандартты енгізу үшін әзірлеушілер қауымдастығының көмегін қажет етеді.
  • Ұсынылған ұсыныс Ұсынылған ұсыныс) - бұл кезеңде құжат түпкілікті бекіту үшін W3C Консультативтік кеңесіне беріледі.
  • Жұмыс жобасы - қоғамдастық талқылауы үшін талқыланған және түзетілген жобаның жетілген нұсқасы.
  • Редактор жобасы ( Редакциялық жоба) - жоба редакторлары өзгерістер енгізгеннен кейін стандарттың жобалық нұсқасы.
  • нобай ( Техникалық сипаттама жобасы) – стандарттың бірінші жобалық нұсқасы.

HTML тірі стандарты (Living) ерекшеленеді - ол дәстүрлі нұсқаны нөмірлеуді ұстанбайды, өйткені ол үнемі даму үстінде және үнемі жаңартылып отырады.

Тег (еселейді) браузер терезесінде көрсетілетін веб-беттің (мазмұнын) мазмұнын сақтауға арналған. Құжатта көрсетілуі тиіс ақпарат BODY контейнерінің ішінде орналасуы керек. Бұл ақпарат мәтінді, суреттерді, тегтерді, JavaScript және т.б.

Тег веб-беттегі сілтемелер мен мәтіннің түстерін анықтау үшін де қолданылады. Бұл тәжірибе HTML 4-те ескірген және оның орнына түс схемасын көрсету үшін стильдерді пайдалану ұсынылады, оларды селекторға қолдану ұсынылады. . Дегенмен, көптеген опцияларға әлі де браузерлерде қолдау көрсетіледі.

Жиі белгілеу құжат ағымдағы терезеге немесе жақтауға жүктеуді аяқтағаннан кейін іске қосылатын onLoad сияқты оқиға өңдегішті орналастыру үшін пайдаланылады.

Веб-беттегі BODY тегтерін ашу және жабу міндетті емес, бірақ оларды HTML құжатының басы мен соңын анықтау үшін пайдалану жақсы стиль.

Синтаксис

...

Жабу белгісі
Міндетті.

Опциялар
alink - белсенді сілтеменің түсін орнатады.
фон – веб-беттегі фондық суретті орнатады.
bgcolor - веб-бет фонының түсі.
bgproperties - мәтінмен бірге фонды айналдыру немесе жылжытпау керектігін анықтайды.
төменгі жиек – шолғыш терезесінің төменгі жиегінен мазмұнға шегініс.
leftmargin – шолғыш терезесінің шетінен мазмұнға дейінгі көлденең жиек.
сілтеме - сілтеме түсі.
айналдыру - айналдыру жолақтарын көрсету немесе көрсетпеу керектігін белгілейді.
мәтін – құжаттағы мәтіннің түсі.
topmargin - шолғыш терезесінің жоғарғы жиегінен мазмұнға шегініс.
vlink - кірген сілтемелердің түсі.

1-мысал: BODY тегін пайдалану



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


Бұл ең аз және ең аз уақытты қажет ететін болса, бұл жаттығуды орындауға мүмкіндік береді.



BODY тег параметрлерінің сипаттамасы

ALINK параметрі

Сипаттама
Белсенді сілтеменің түсін орнатады. Ағымдағы сілтеме түсі сілтемені тінтуірдің курсорымен басқанда немесе пернетақта арқылы таңдағанда белсенді түске өзгереді.

Синтаксис
...

Аргументтер
Түс мәнін екі жолмен орнатуға болады.

1. Өз аты бойынша
Браузерлер кейбір түстерді аты бойынша қолдайды.

2. Он алтылық шама бойынша
Түстерді анықтау үшін он алтылық сандар қолданылады. Он алтылық жүйе ондық жүйеден айырмашылығы, аты айтып тұрғандай, 16 санына негізделген. Сандар келесідей болады: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10-нан 15-ке дейінгі сандар латын әріптерімен ауыстырылады. Он алтылық жүйедегі 15-тен үлкен сандар екі санды бір санға біріктіру арқылы жасалады. Мысалы, ондық жүйедегі 255 саны он алтылық жүйедегі FF санына сәйкес келеді. Санау жүйесін анықтауда шатасуды болдырмау үшін он алтылық санның алдына # хэш таңбасы қойылады, мысалы #666999. Үш түстің әрқайсысы - қызыл, жасыл және көк - 00-ден FF-ге дейінгі мәндерді қабылдай алады. Осылайша, түс таңбасы #rrggbb үш компонентке бөлінеді, мұндағы алғашқы екі таңба түстің қызыл компонентін, ортаңғы екеуі жасыл, ал соңғы екеуі көк түсті көрсетеді.

Әдепкі мән
Сілтеме түсіне сәйкес келеді.



...

BACKGROUND параметрі

Сипаттама
Түсқағаз ретінде пайдаланылатын кескінді анықтайды. Кәдімгі кескіндерден айырмашылығы, фонның ені немесе биіктігі орнатылмайды және әрқашан 100% толық өлшемде көрсетіледі. Егер суреттің өлшемі браузер терезесінен кішірек болса, онда сурет мозайка тәрізді қатарға көлденеңінен оңға және төменге қайталанады. Осы себепті сайтқа келушілерге байқалатын фондық кескіндердің түйіскен жерінде көрінетін айырмашылықтар болуы мүмкін. Фондық суретті таңдағанда, оның және веб-беттегі мәтіннің арасында жеткілікті контраст бар екеніне көз жеткізіңіз. Анимацияланған GIF файлдарын фон ретінде пайдалануға болады, бірақ олар оқырманның назарын аударады.

Синтаксис
...

Аргументтер
Кез келген жарамды кескін мекенжайы - салыстырмалы немесе абсолютті жолды пайдалануға болады.

Әдепкі мән
Жоқ.

3-мысал: Веб-беттегі тұсқағазды орнату



...

BGCOLOR параметрі

Сипаттама
Веб-беттің өң түсін орнатады. Бұл параметрді фондық суретке жақын фон түсін таңдай отырып, фонмен бірге пайдалануға болады

Синтаксис
...

Аргументтер
ALINK параметрін қараңыз.

Әдепкі мән
Браузерге және оның нұсқасына байланысты, бірақ фон түсі әдетте ақ болады.

4-мысал: Веб-беттің өң түсін орнату



...

BGPROPERTIES параметрі

Сипаттама
Әдепкі бойынша, фондық сурет веб-беттің мазмұнымен бірге жылжиды. bgproperties параметрін пайдалану арқылы өңді бір жерде түзете аласыз және осылайша тек мазмұнды айналдыруға мәжбүрлей аласыз. Веб-беттің бұл сапасы веб-сайттар үшін сирек пайдаланылады, сондықтан ол пайдаланушыларға оғаш және әдеттен тыс болып көрінуі мүмкін.

Синтаксис
...

Аргументтер
Фонды түзететін бір ғана тіркелген параметр бар. Бұл мүмкіндікті жойғыңыз келсе, BODY тегінен bgproperties параметрін жойыңыз немесе оны бос мәнге орнатыңыз - "".

Әдепкі мән
Жоқ.

5-мысал: Фонды түзету



...

Ескерту

  • Барлық браузерлер бұл параметрді қолдамайды, мысалы, Netscape оны елемейді;
  • Веб-бетте фон суретін стильдер арқылы орнату кезінде bgproperies параметрі жұмысын тоқтататыны байқалды.

LEFTMARGIN параметрі

Сипаттама
Браузер терезесінің сол және оң жақ шетінен веб-бет мазмұнына дейінгі жиекті анықтайды.

Синтаксис
...

Аргументтер
Офистерді пикселдерде көрсететін оң бүтін сан.

Әдепкі мән
Windows үшін 10 пиксель және Macintosh үшін 8 пиксель.

6-мысал: Сол жақ жиекті өзгерту



...

Ескерту

  • Netscape браузері жиектерді орнату үшін сол жақ маржа параметрін түсінбейді, ол marginwidth – горизонталь маржа және marginheight – вертикаль маржа параметрлерін пайдаланады;
  • Оң жақтан, төменгі және жоғарғы жиектерден жиектерді орнату үшін сәйкесінше оң жақ шет, төменгі және жоғарғы жиектер параметрлерін пайдаланыңыз.

LINK параметрі

Сипаттама
Кірілмеген сілтемелердің түсін орнатады.

Синтаксис
...

Аргументтер
ALINK параметрін қараңыз.

Әдепкі мән
#0000FF

7-мысал: Сілтеме түсін орнату



...

SCROLL параметрі

Сипаттама
Айналдыру параметрі веб-беттің мазмұны ағымдағы терезенің өлшемінен асып кеткен кезде шолғыш терезесінде айналдыру жолақтарының болуын басқарады. Бұл параметр тек Internet Explorer шолғышында жұмыс істейді.

Синтаксис
...

Аргументтер
иә - айналдыру жолақтарын көрсетеді.
жоқ - терезеде айналдыру жолақтарының көрсетілуіне жол бермейді.

Әдепкі мән
иә

8-мысал: Айналдыру жолағын жасыру



...

TEXT параметрі

Сипаттама
Веб-бетте қолданылатын мәтіннің әдепкі түсін орнатады. Жеке элементтердің түстерін стильдер арқылы оңай өзгертуге болады.

Синтаксис
...

Аргументтер
ALINK параметрін қараңыз.

Әдепкі мән
#000000

9-мысал: Мәтін түсін өзгерту



...

VLINK параметрі

Сипаттама
Кірген сілтемелердің түсін анықтайды, яғни пайдаланушы «басып қойған» сілтемелер.

Синтаксис
...

Аргументтер
ALINK параметрін қараңыз.

Әдепкі мән
#551a8b (навигатор 4); #800080 (Internet Explorer Windows); №006010 (Internet Explorer Macintosh).

10-мысал: кірген сілтемелердің түсін орнату



...

    Мәтін түсі

    Фон түсі

    Фондық сурет

    Сілтеме түсі

    Мазмұнның айналасында толтыру

    Жаттығу

Өздеріңіз білетіндей, ашу тегінің арасында және жабу тегі Беттің негізгі бөлігі немесе бет мазмұнының өзі орналастырылады. Оны сөз деп те атайды мазмұны(ағылшын тілінен – контент). Тег опциялары жалпы мазмұнның қасиеттерін анықтау. Бұл сабақта біз олардың кейбірін қарастырамыз.

Мәтін түсі

Бүкіл құжаттың мәтін түсі параметрмен анықталады мәтін. Оған параметр сияқты түс атауы немесе он алтылық түс мәні тағайындалады түстег (2-сабақ: Тестті пішімдеу қараңыз):

немесе

Бұл мысалды пайдалану беттегі барлық мәтіннің қызыл болуына әкеледі.

Параметр мәтінміндетті емес. Оны өткізіп жіберсеңіз, беттегі мәтін әдепкі бойынша қара болады. Сіз мұны алдыңғы жаттығуларды орындау арқылы көрген шығарсыз. :)

Фон түсі

Бет фонының түсі параметрмен анықталады bgcolor. Ол параметр сияқты түс атауын немесе он алтылық түс мәнін қабылдайды мәтін.

немесе

Бұл мысал бет фоны қызыл болады.

Параметр bgcolorміндетті емес. Оны өткізіп жіберсеңіз, әдепкі бет фоны ақ болады. Бұл сіз алдыңғы жаттығуларды орындау арқылы көрген нәрсе. :)

Фондық сурет

Параметрді пайдалану фонБеттің қарапайым фонының жоқтығына көз жеткізуге болады, бірақ фон сурет болып табылады. Бұл параметр үшін фонфон жасағыңыз келетін кескінге жолды, сонымен қатар параметрді тағайындауыңыз керек srcтег (5-сабақты қараңыз. Суреттер):

Осылайша, мысалы, беттің фонын қандай да бір өрнекпен жабуға болады. Бірақ бұл мүмкіндікті теріс пайдаланбау керек және бетті тым ауыр етпеу үшін фондық режимде үлкен кескіндер жасау керек.

Мысалы, бізде үлгінің бұл фрагменті бар:

Егер біз оны фондық суретке айналдырсақ, біз келесідей фоны бар бетті аламыз:

Параметр фонсонымен қатар міндетті емес. Оны өткізіп жіберсеңіз, әдепкі бет фоны ақ болады.

Сілтеме түсі

Сілтемелердің түсін орнату үшін 3 тег параметрі бар дене:

Бұл параметрлерге түс атауы немесе бір нәрсенің түсіне жауап беретін басқа параметрлерге ұқсас он алтылық мәні тағайындалады.

Ол бетте осылай көрінеді (сілтеменің барлық күйлерін көру, оның бастапқыда не болғанын есте сақтау үшін басып тұрыңыз, не болғанын көріңіз, соңында босатыңыз, осы бетке оралыңыз және оның түсі қандай екенін көріңіз. ):

Бұл параметрлер міндетті емес. Оларды өткізіп жіберсеңіз, сілтеме түстері әдепкі мәндерді қабылдайды (тиісінше көк, қызыл, күлгін).

Мазмұнның айналасында толтыру

Егер бет мазмұны браузер терезесінің шетінен белгілі бір мөлшерге шегінуін қаласаңыз, бұл жағдайда тег дене 4 параметрі бар:

    сол жақ жиек- сол жақ шетінен шегініс;

    оң жақ жиегі- оң жақ шетінен шегініс;

    жоғарғы маржа- жоғарғы шетінен шегініс;

    төменгі жиегі- төменгі жиектен шегініс.

Бұл параметрлер пиксельдегі мәндерді қабылдайды. Олар міндетті емес және олардың барлығын бірден немесе бөлек пайдалануға болады. Мысалы, сіз тек солға және оңға шегініс жасай аласыз немесе тек үстіңгі және астыңғы және т.б.:

немесе

Сәлем жігіттер!

Бүгін мен жас веб-сайт жасаушылар арасында өзектілігін жоғалтпайтын тақырыпты қозғауды жөн көрдім.

Сайттарды жасағаннан кейін оларды теңшеу қажет. Кейбір параметрлер орнатылған тақырып үлгісінің файлдарын өңдеу арқылы орындалады. Мысалы, ұқсас жазбаларды көрсететін кодты енгізу керек. Бірақ оны қайда енгізу керек?

Көбінесе жаңадан келгендер мұндай сұрақтарды қояды. Олар сондай-ақ басқа ұқсас мәселелерге алаңдайды, олардың шешімі іс жүзінде бірдей. Сонымен қатар, мен болашақ мақалаларымда шаблонның әртүрлі жерлеріне кодтарды енгізуге жиі жүгінемін. Сондықтан бұл материал бұрынғыдан да өзекті.

Бұл мақалада мен сізге WordPress үлгісіндегі кез келген кодты енгізу қажет орынды анықтаудың қалай оңай екенін көрсетемін. Мен бастапқы кезеңде сізді алаңдатуы мүмкін басқа да маңызды мәселелерді қарастырамын.

Ең жоғарыдан бастайық және плагиндерді пайдаланбай, кодтарды қолмен енгізгіңіз келсе, өңдеуге тура келетін файлдарды қарастырайық, себебі бұл опция бар. Мен оны құптай алмаймын, бірақ жалқаулар үшін мен келесі мақалаларда мұндай плагиндерді сипаттаймын.

Ең басында мен бейне сабақ беремін, өйткені онсыз төменде мәтіндік форматта ұсынылған материалды түсіну қиын болады.

Енді мен бәрін мәтіндік форматта егжей-тегжейлі түсіндіремін.

Беттің әрбір түрін шығаруға жауапты файлдар

Егер сіз кодтарды (скрипттерді) пайдалана отырып, белгілі бір функцияларды іске асыру туралы басқа блогтарда көптеген мақалаларды оқыған болсаңыз, онда сіз келесідей фразаларды көргеніңізге 100% сенімдімін:

  • Бұл кодты негізгі бетті көрсетуге жауапты файлға қойыңыз;
  • Бұл кодты жазбаларды және басқаларды шығаруға жауапты файлға қойыңыз.

Кодтарды енгізу қажет болуы мүмкін көптеген файлдар бар. Бірақ бұл файлдар қандай? Барлығы өте қарапайым.

  1. Басты бет шығысы - index.php;
  2. Жазбаларды шығару – single.php файлы;
  3. Бет шығысы – page.php файлы;
  4. Мұрағаттар мен санаттарды шығару – archive.php;
  5. төменгі колонтитул шығысы - footer.php;
  6. Іздеу бетінің шығысы - search.php;
  7. Бүйірлік тақтаның шығысы - sidebar.php;
  8. Мәнер файлы - style.css;
  9. 404 беттік шығыс файлы 404.php.

Енді олар сізге кодты мынандай файлға қою керек екенін айтқанда, сіз қайда іздеу керектігін білесіз.

Сұраққа жауап беру ғана қалады: файлдардың әрқайсысында дұрыс орынды қалай анықтауға болады?

Кодты қай жерге енгізу керектігін анықтау

Алдымен анықтауды қажет етпейтін жерлерді аралап көрейік. Үлгіге қарамастан, олар барлығына бірдей болады.

Бірінші орын, барлық үлгілер үшін бірдей, Header.php файлындағы аумақ. Бұл ашу және жабу тегтері .

Кейбір сценарийлер әрқашан осы тегтердің арасында орналасады, олар сайттың барлық беттері үшін жұмыс істеуі керек. Яғни, біз сценарийді, мысалы, осы тегтердің арасына әлеуметтік түймелер үшін орналастырдық және олар сайттың біз көрсететін барлық беттерінде жұмыс істейді.

Бұл тегтер Header.php файлының ең жоғарғы жағында орналасқан.

Арасындағы мазмұн әркім үшін әр түрлі болады, себебі бәрі үлгіге байланысты.

Егер сізге осы кодты ашу және жабу басты тегтерінің арасына енгізу керек екені айтылса, кодты көшіріп, үлгі файлыңыздан ұқсас аймақты іздеңіз және оны сол тегтердің арасына қойыңыз.

Екінші орын, сонымен қатар барлық үлгілер үшін бірдей, төменгі деректеменің шығуына жауапты файлда орналасқан - footer.php.

Сценарийлерді тегтер арасына кірістіру арқылы ғана қосуға болмайды Header.php файлында. Сондай-ақ, сіз оларды footer.php файлы арқылы жүктей аласыз, осылайша сайт бетін жүктеуді жылдамдата аласыз.

Өйткені, бет жүктеле бастағанда, ол жоғарыдан төменге қарай жүктеледі. Егер барлық сценарийлер беттің жоғарғы жағында болса, оның мазмұнын көрсету баяулайды, өйткені сценарийлерді жүктеуге уақыт қажет.

Біздің міндетіміз - бет мазмұнын келушілерге де, іздеу жүйелеріне де мүмкіндігінше жылдам көрсету. Бұл жағдайда алдымен мазмұнды көрсету үшін сценарийлерді беттің ең соңында жүктеп алған жөн, содан кейін қалғанын жүктеңіз.

Бұл опцияны іске асыру үшін footer.php файлын ашып, жабылатын негізгі тегтің алдына сценарийді енгізу керек. Ол файл мазмұнының соңында орналасқан, себебі ол бет аймағының соңына жауап береді.


Көріп отырғаныңыздай, мен осы аймақтағы барлық сценарийлерді жабу тегіне дейін көрсеттім(көк жақтаумен ерекшеленген). Айтпақшы, мен оларды сценарийлерді осы аймаққа орналастыру арқылы емес, файлдардан жүктеу арқылы шығардым. Осыдан кейін мен блогты айтарлықтай жылдамдаттым. Мұны қалай жасау керек, бөлек мақала болады. Күте тұрыңыз!

Олар сізге кодты осы аймақтарға қоюды айтқанда, сіз мұны еш қиындықсыз жасайсыз деп үміттенемін.

Күрделі мәселеге көшейік және әртүрлі кодтар енгізілген басқа үлгі файлдарындағы орындарды анықтауды үйренуге тырысайық. Әдетте бұл кодтар мыналарды қамтиды:

  • Ұқсас жазбаларды көрсету;
  • Жазылым пішінінің шығысы;
  • Әлеуметтік түймелерді көрсету және т.б.

Бұл заттардың барлығы мазмұнның негізгі бөлігінен кейін, яғни мақала аяқталғаннан кейін енгізіледі. Олардың әрқайсысында әртүрлі үлгі коды бар, сондықтан сұраққа әмбебап жауап береді "Менің мақаламның шығыс коды қайда аяқталады?"жай жоқ.

Бірақ кодтың соңын оңай анықтауға болады, содан кейін сізге қажет функцияны іске асыру қажет. Мен бұл әдісті WordPress үлгісін таңдау туралы мақалада ішінара көрсеттім (). Содан кейін мен Интернет-шолғыштың стандартты функциясын қолдандым.

Бұл әдістің мәнін жақсырақ түсіну үшін мен осы жазбаның басындағы бейнені қарауды ұсынамын. Онда мен барлығы нақты уақытта қалай болатынын көрсеттім. Енді мен оны мүмкіндігінше анық сипаттауға тырысамын.

Мен сізге мысал ретінде Google Chrome браузерін пайдалануды көрсетемін. Басқа браузерлерде де бұл функция бар, бірақ сәл басқаша атау болуы мүмкін.

  • Google Chrome - элемент кодын қарау;
  • Firefox - зерттеу элементі;
  • Opera - элементті тексеру.

Принцип 3 браузерде ұқсас. Енді мен сізге кез келген үлгідегі кез келген аймақтың орнын қалай анықтау керектігін көрсетемін.

Элемент кодын көру үшін өтіңіз (Google Chrome). Беттің бос бөлігін тінтуірдің оң жақ түймешігімен басыңыз.


Осыдан кейін беттің төменгі жағында панель пайда болады, ол беттің бүкіл бастапқы кодын көрсетеді, оны өңдеуге және үлгінің құрылымы мен көрінісі нақты уақытта қалай өзгеретінін көруге болады. Бірақ деректер өзгерістері сақталмайды. Ол үшін үлгі файлдарының өзін өңдеу керек.

Міне, панель қалай көрінеді.

Мен жебемен үлкейткіш әйнекті көрсеттім, оны басу арқылы шаблонның құрылымын тексеріп, шаблонымыздың қандай блоктардан тұратынын анықтай аламыз. Мен бұл функцияны инспектор деп атаймын.

Инспекторды басқаннан кейін біз тінтуірді беттің айналасында жылжыта аламыз және біз меңзерді апаратын барлық элементтер түсті фонмен ерекшелене бастайтынын көреміз. Мысал ретінде мен сізге үлгі таңдау туралы мақаланың скриншотын көрсетемін. Сол жерде мен меңзерді пост тақырыбының үстіне апардым.


Егер мақаланы шығарғаннан кейін кодты енгізу қажет болса, онда біздің шаблонның аумағын тексеріп, мақаланың барлық мазмұнын қамтитын блокты табу керек екенін болжау қиын емес. Блоктың соңын да, басын да іздеуге болады. Яғни, шаблонды төменнен де, жоғарыдан да тексеруге болады.

Бірақ мына бір ескертпе . Бізге мақаланың жолдарын ғана емес, сонымен қатар мазмұнның өзі орналасқан блоктарды табу керек, өйткені шаблон файлдарында мақалалар жоқ. Тек мазмұнды көрсететін код бар және ол блоктармен қоршалған. Жабылатын блок тегінен кейін

және сізге кодты қою керек.

Сонымен не істейміз? Үлкейткіш әйнек белгішесін басып, мақаламыз орналасқан аумақты тексере бастаңыз. Бүкіл мақаланың аумағы бөлектелгенде беттің сол бөлігін табу керек. Бұл мазмұнды көрсететін блок болады.

Мысал ретінде мен бұл блоктың қалай бөлектелетінін көрсету үшін шағын мазмұны бар жаңа мақала жасадым.


Пок әдісін қолдана отырып, мазмұнды қамтитын блокты табу керек. Меңзерді апарған кезде блоктың атын көрсететін шағын құралдар кеңесін көресіз.

Үлгінің мұндай бөлігін тапқан кезде тінтуірдің түймесін басыңыз және бұл бөлік белсенді болады. Элемент кодын қарау тақтасында осы блокпен код жолы автоматты түрде бөлектеледі.


Көріп отырғаныңыздай, бұл блоктың меңзерді апару кеңесіндегідей атау бар.

Мақаланың негізгі бөлігі көрсетілетін блоктың атын білгеннен кейін біз қажетті файлға өтіп, осы блоктан кейін бізге қажетті кодты енгізе аламыз. Мысалы, жазбаның шығыс файлын (single.php) алайық.

Мен оны Блокнот редакторында ашамын және кодтан элемент кодын қарау тақтасындағыдай басталатын жолды іздеймін.

Блокнот редакторында жұмыс істеу өте ыңғайлы, өйткені блоктың ашылу тегін басқан кезде жабу тегі де ерекшеленеді (жоғарыдағы суретте көрсетілген). Жабу тегі бұл мазмұнның соңы екенін көрсетеді. Осыдан кейін біз әлеуметтік түймелерді, ұқсас жазбаларды және басқа функцияларды енгізе аламыз.

Мен жай ғана әлеуметтік түймелерді және жаңартуларға жазылу пішінін енгіздім.


Олар беттерде осылай көрінеді.


Басқа үлгі файлдарына (беттер, санаттар, мұрағаттар...) кірістіру үшін де солай.

Тәжірибесіз мәтін мен кескіндерді енгізудің бұл әдісін меңгеру екіталай. Сондықтан, оны алыңыз және көріңіз. Бәрі ойдағыдай болатынына сенімдімін. Мақаланың басындағы бейне де пайдалы.

Үлгі файлында қалаған файлды кейіннен енгізу үшін орынды анықтау туралы біз оны анықтадық.

Соңғы сәт қалды, бұл осы сәтте қасиетті етуге тұрарлық.

Үлгінің functions.php файлына араласуды қажет ететін бірнеше параметрлер бар. Бірақ сіз оған кодтарды қалай енгізу керектігін де түсінуіңіз керек.

Әдетте, барлық блогтарда кірістіру файлдың ең соңында жабу тегіне дейін жасалуы керек деп жазады?>.

Бірақ бұл тег файлда болмаса ше? Мысалы, менде ол жоқ. Мұндай жағдайда не істеу керек? Жабу тегінің болмауы файлдың дұрыс емес екенін білдірмейді. Блог жұмыс істейді. Сондықтан бәрі жақсы.

Бұл жағдайда мен керісінше істеуді ұсынамын - оны ашу тегіне дейін файлдың ең басында кодқа енгізіңіз. Төмендегі суретті қараңыз.


Ашу тегі қызыл түспен, ал енгізілген код көк түспен бөлектелген.

Бұл бір нұсқа. Сондай-ақ, кодты файлдың соңына, бірақ соңғы кодтың алдында енгізуге болады. Бұл жағдайда оны үзіп алмау үшін соңғы кодтың қай жерде басталатынын аздап түсіну керек.

Осымен болды. Егер кенеттен сізде funsctions.php файлында жоқ жабу тегімен бірдей жағдай болса, онда сіз не істеу керектігін білесіз.

Үлгідегі дизайн стильдерін анықтау

Біз сондай-ақ бет элементтерінің дизайн мәнерлерін көре аламыз және оларды өзгерте аламыз, сонымен қатар өзімізді қоса аламыз. Дәл сол элемент инспекторы бұған көмектеседі.

Қажетті элементті тауып, оны басқан кезде таңдалған блоктың (элементтің) дизайн стильдері кодты қарау тақтасының оң жағында көрсетіледі. Мен жоғарыда талқыланған мақаланың сол блогының стильдерін көрсетемін.


Егер біз осы стильдерді нақты уақытта өңдегіміз келсе және осы немесе басқа элементтің сыртқы түрі қандай болатынын көргіміз келсе, біз оларды тікелей осы панельде өзгерте аламыз. Қажетті стильдердің мәндерін басып, оларды өзгертіңіз.

Бірақ өзгертулер 1-бет жаңартылғанша ғана жарамды болады. Бұл мәнерлерді қолдану үшін оларды үлгінің мәнерлер файлына қосу керек. Жоғарыдағы суреттердің бірінде мен көк жақтаумен осы стильдер жазылған файлдың атын, сондай-ақ олар басталатын нақты жолды көрсететін аймақты көрсеттім.

Сондықтан style.css мәнер файлын ашыңыз және менің жағдайда 890 жолын іздеңіз.

Мұнда сіз оларды өңдей аласыз. Файлды сақтаңыз және оны хостингке жүктеңіз.

Мен компьютердегі барлық файлдарды өңдейтінімді ескеріңіз. Бұл жағдайда мен сыртқы бағдарламаларды қолданамын, бұл қандай да бір мәселелер туындаған жағдайда кез келген өзгерістерді болдырмауға мүмкіндік береді. Бұл кодтар мен сценарийлер бар әртүрлі эксперименттерге де қатысты - барлығы қосулы.

Мен сізге де компьютердегі кез келген файлдарды ұқсас өңдеуді орындауды ұсынамын. Ол үшін алдымен ftp клиенті арқылы хостингтен файлдарды компьютерге жүктеп алу керек. Мен бұл туралы жаздым. Содан кейін файлдарды ашуға болатын кез келген ыңғайлы редактормен ашыңыз. Мен блокнотты осы мақсаттар үшін қолданамын.

Осымен мақала аяқталады. Міне, кейбір кодты немесе сценарийді енгізу қажет орынды анықтаудың күрделі процесі. Бір қарағанда, бұл процедура күрделі болып көрінуі мүмкін. Бірақ бәрі өте қарапайым. Сіз оны бірнеше рет байқап көресіз және енді мұндай сұрақтарды қоймайсыз.

Әрине, сіз өзіңіздің блогыңызға кодтар мен сценарийлерді арнайы плагиндер арқылы кірістіре аласыз, мен оларды келесі мақалаларда міндетті түрде талқылаймын. Бірақ оларды пайдаланбау үшін сіз оларсыз бірдей әрекеттерді жасай аласыз, мен ұсынамын. Осылайша сіз сайттағы қажетсіз жүктемеден құтыласыз, осылайша оны жылдамдатасыз және келушілеріңіздің пайдалануын ыңғайлы етесіз.

Барлық достар. Мен осы жерде аяқтаймын. Түсініктемелерде сұрақтарыңызды күтемін. Біз оны анықтаймыз. Жаңа материалдарда кездескенше.

Құрметпен, Константин Хмелев.

Элемент браузер терезесінде көрсетілетін веб-беттің (мазмұнның) мазмұнын сақтауға арналған. Құжатта көрсетілуі тиіс ақпарат BODY контейнерінің ішінде орналасуы керек. Бұл ақпарат мәтінді, суреттерді, тегтерді, JavaScript және т.б.

Тег веб-беттегі сілтемелер мен мәтіннің түстерін анықтау үшін де қолданылады. Бұл тәжірибе HTML 4 нұсқасында ескірген және оның орнына мәнерлерді BODY селекторына қолдана отырып, түс схемасын көрсету үшін пайдалану ұсынылады. Дегенмен, көптеген опцияларға әлі де браузерлерде қолдау көрсетіледі.

Жиі белгілеу құжат ағымдағы терезеге немесе жақтауға жүктеуді аяқтағаннан кейін іске қосылатын onLoad сияқты оқиға өңдегішті орналастыру үшін пайдаланылады.

Тегтерді ашу және жабу веб-бетте талап етілмейді, бірақ оларды HTML құжатының басы мен соңын анықтау үшін пайдалану жақсы стиль болып саналады.

Синтаксис


...

Опциялар

alink Белсенді сілтеменің түсін орнатады. фон Веб-бетте фондық суретті орнатады. bgcolor Веб-беттің өң түсі. bgproperties Фонды мәтінмен бірге жылжыту керек пе, жоқ па анықтайды. төменгі жиек шолғыш терезесінің төменгі жиегінен мазмұнға дейінгі маржа. leftmargin Браузер терезесінің шетінен мазмұнға дейінгі көлденең жиек. сілтеме Веб-беттегі сілтемелердің түсі. айналдыру Айналдыру жолақтарын көрсету немесе көрсетпеу керектігін орнатады. мәтін Құжаттағы мәтіннің түсі. topmargin Браузер терезесінің үстіңгі жиегінен мазмұнға дейінгі маржа. vlink Кірілген сілтемелердің түсі.

Жабу белгісі

Ашу және жабу тегтері міндетті емес.

1-мысал: тегті пайдалану




BODY белгісі


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


Бұл ең аз және ең аз уақытты қажет ететін болса, бұл жаттығуды орындауға мүмкіндік береді.



Жүктеу тегі параметрін пайдаланған кезде JavaScript тілінде жазылған сценарий орындалады, бұл жағдайда ол құжаттың жүктелгені туралы хабарламаны көрсетеді.

Тег параметрлерінің сипаттамасы

ALINK параметрі

Сипаттама

Синтаксис

...

Аргументтер

Түс мәнін екі жолмен орнатуға болады.

1. Өз аты бойынша

Браузерлер кейбір түстерді аты бойынша қолдайды.

2. Он алтылық шама бойынша

Түстерді анықтау үшін он алтылық сандар қолданылады. Он алтылық жүйе ондық жүйеден айырмашылығы, аты айтып тұрғандай, 16 санына негізделген. Сандар келесідей болады: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10-нан 15-ке дейінгі сандар латын әріптерімен ауыстырылады. Он алтылық жүйедегі 15-тен үлкен сандар екі санды бір санға біріктіру арқылы жасалады. Мысалы, ондық жүйедегі 255 саны он алтылық жүйедегі FF санына сәйкес келеді. Санау жүйесін анықтауда шатасуды болдырмау үшін он алтылық санның алдына # хэш белгісі қойылады, мысалы #666999. Үш түстің әрқайсысы - қызыл, жасыл және көк - 00-ден FF-ге дейінгі мәндерді қабылдай алады. Осылайша, түс таңбасы #rrggbb үш компонентке бөлінеді, мұндағы алғашқы екі таңба түстің қызыл компонентін, ортаңғы екеуі жасыл, ал соңғы екеуі көк түсті көрсетеді.

Әдепкі мән

CSS-ге ұқсас

ДЕНЕ: белсенді (түс: түсті)




BODY тегі, alink параметрі



...

BACKGROUND параметрі

Сипаттама

Түсқағаз ретінде пайдаланылатын кескінді анықтайды. Кәдімгі кескіндерден айырмашылығы, фонның ені немесе биіктігі орнатылмайды және әрқашан 100% толық өлшемде көрсетіледі. Егер суреттің өлшемі браузер терезесінен кішірек болса, онда сурет мозайка тәрізді қатарға көлденеңінен оңға және төменге қайталанады. Осы себепті сайтқа келушілерге байқалатын фондық кескіндердің түйіскен жерінде көрінетін айырмашылықтар болуы мүмкін. Фондық суретті таңдағанда, оның және веб-беттегі мәтіннің арасында жеткілікті контраст бар екеніне көз жеткізіңіз. Анимацияланған GIF файлдарын фон ретінде пайдалануға болады, бірақ олар оқырманның назарын аударады.

Синтаксис

...

Аргументтер

Кез келген жарамды кескін мекенжайы - салыстырмалы немесе абсолютті жолды пайдалануға болады.

Әдепкі мән

CSS-ге ұқсас

BODY (фон: url («файл жолы») )

3-мысал: Түсқағазды орнату




BODY тегі, фон параметрі


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

BGCOLOR параметрі

Сипаттама

Веб-беттің өң түсін орнатады. Бұл параметрді фондық суретке жақын фон түсін таңдай отырып, фонмен бірге пайдалануға болады

Синтаксис

...

Аргументтер

ALINK параметрін қараңыз.

Әдепкі мән

Браузерге және оның нұсқасына байланысты, бірақ фон түсі әдетте ақ болады.

CSS-ге ұқсас

BODY (фон: түс)

4-мысал: веб-беттегі фон түсі




BODY тегі, bgcolor параметрі



...

BGPROPERTIES параметрі

HTML: 3.2 4 XHTML: 1.0 1.1

Сипаттама

Әдепкі бойынша, фондық сурет веб-беттің мазмұнымен бірге жылжиды. bgproperties параметрін пайдалану арқылы өңді бір жерде түзете аласыз және осылайша тек мазмұнды айналдыруға мәжбүрлей аласыз. Веб-беттің бұл сапасы веб-сайттар үшін сирек пайдаланылады, сондықтан ол пайдаланушыларға оғаш және әдеттен тыс болып көрінуі мүмкін.

Синтаксис

...

Аргументтер

Фонды бекітетін бір ғана тұрақты мән бар. Фонның түзетілмегенін қаласаңыз, тегтен bgproperties параметрін алып тастаңыз немесе оны бос мәнге орнатыңыз - «».

Әдепкі мән

CSS-ге ұқсас

BODY (фон-қосымша: бекітілген | айналдыру)

Мысал 5. Фонды бекіту




BODY тегі, bgproperties параметрі


background="images/bbking.jpg" bgproperties="түзетілген">
...

Ескерту

  • Барлық браузерлер бұл параметрді қолдамайды, мысалы, Netscape (Firefox) оны толығымен елемейді;
  • Веб-беттегі фондық кескінді стильдер арқылы орнату кезінде bgproperies параметрі жұмысын тоқтататыны байқалды.

LEFTMARGIN параметрі

HTML: 3.2 4 XHTML: 1.0 1.1

Сипаттама

Браузер терезесінің сол және оң жақ шетінен веб-бет мазмұнына дейінгі жиекті анықтайды.

Синтаксис

...

Аргументтер

Офистерді пикселдерде көрсететін оң бүтін сан.

Әдепкі мән

Windows үшін 10 пиксель және Macintosh үшін 8 пиксель.

CSS-ге ұқсас

BODY (шегі: сан)

6-мысал: Сол жақ жиек




BODY тегі, сол жақ жиек параметрі



...

Ескерту

  • Netscape браузері жиектерді орнату үшін сол жақ маржа параметрін түсінбейді, ол marginwidth (горизонталь маржа) және marginheight (вертикаль маржа) параметрлерін пайдаланады;
  • Оң жақтан, төменгі және жоғарғы жиектерден жиектерді орнату үшін сәйкесінше оң жақ шет, төменгі және жоғарғы жиектер параметрлерін пайдаланыңыз.

LINK параметрі

Сипаттама

Кірілмеген сілтемелердің түсін орнатады.

Синтаксис

...

Аргументтер

ALINK параметрін қараңыз.

Әдепкі мән

CSS-ге ұқсас

BODY:сілтеме (түсі: түсі)

Мысал 7. Сілтеме түсі




BODY тегі, сілтеме параметрі



...

SCROLL параметрі

HTML: 3.2 4 XHTML: 1.0 1.1

Сипаттама

Айналдыру параметрі веб-беттің мазмұны ағымдағы терезенің өлшемінен асып кеткен кезде шолғыш терезесінде айналдыру жолақтарының болуын басқарады. Бұл параметр тек Internet Explorer шолғышында жұмыс істейді.

Синтаксис

...

Аргументтер

иә — Айналдыру жолақтарын көрсетеді.
жоқ—терезеде айналдыру жолақтарын көрсетуді өшіреді.

Әдепкі мән

CSS-ге ұқсас

BODY (толып кету: жасырын)




BODY тегі, айналдыру параметрі



...

TEXT параметрі

Сипаттама

Веб-бетте қолданылатын мәтіннің әдепкі түсін орнатады. Жеке элементтердің түстерін стильдер арқылы оңай өзгертуге болады.

Синтаксис

...

Аргументтер

ALINK параметрін қараңыз.

Әдепкі мән

CSS-ге ұқсас

ДЕНЕ (түсі: түсі)

9-мысал: Веб-беттегі мәтін түсі




BODY тегі, мәтін параметрі



...

VLINK параметрі

Сипаттама

Кірген сілтемелердің түсін анықтайды, яғни пайдаланушы «басып қойған» сілтемелер.

Синтаксис

...

Аргументтер

ALINK параметрін қараңыз.

Әдепкі мән

#551a8b (навигатор 4); #800080 (Internet Explorer Windows); №006010 (Internet Explorer Macintosh).

  • META браузерлер мен іздеу жүйелеріне арналған ақпаратты сақтау үшін пайдаланылатын мета тегтерді анықтайды.
  • STYLE веб-бет элементтерінің стильдерін анықтау үшін қолданылады.
  • LINK стиль кестесі немесе қаріп файлы сияқты сыртқы құжатқа сілтеме орнатады.