елемент
(от английски тяло- тяло) е предназначено да съхранява съдържанието на уеб страница (съдържание), показано в прозореца на браузъра. Информацията, която трябва да се показва в документа, трябва да се намира вътре в контейнера . Тази информация включва текст, изображения, тагове, JavaScript и др.също се използва за определяне на цветовете на връзките и текста на уеб страница. Тази практика е неодобрена в HTML и вместо това се препоръчва да се използват стилове за определяне на цветова схема, като се прилагат към селектора на тялото.Често
използва се за поставяне на манипулатор на събитие, като onload, който се изпълнява, след като документът приключи зареждането в текущия прозорец или рамка.Отваряне и затваряне на тагове
не се изискват на уеб страница, но се счита за добър стил да се използват за определяне на началото и края на HTML документ.Синтаксис
...Затварящ етикет
Не е задължително.
Атрибути
Пример
Дори Аристотел в своята „Политика” казва, че музиката, въздействайки на човека, доставя „вид пречистване, тоест облекчение, свързано с удоволствието”.
Резултатът от настоящия пример е показан на фиг. 1. Когато използвате събитието onload на елемент
Изпълнява се скрипт, написан на JavaScript, в този случай извежда съобщение, че документът е зареден.Ориз. 1. Изскачащ прозорец в документ
Спецификация
Всяка спецификация преминава през няколко етапа на одобрение.
- Препоръка - Спецификацията е одобрена от W3C и се препоръчва като стандарт.
- Препоръка за кандидат ( Възможна препоръка) - групата, отговорна за стандарта, е доволна, че той изпълнява целите си, но се нуждае от помощ от общността за разработка, за да внедри стандарта.
- Предложена препоръка Предложена препоръка) - на този етап документът се предава на Консултативния съвет на W3C за окончателно одобрение.
- Работна чернова - По-зряла версия на чернова, която е била обсъдена и изменена за преглед от общността.
- Черновата на редактора ( Редакционна чернова) - чернова версия на стандарта след промени, направени от редакторите на проекта.
- Чернова ( Проект на спецификация) - първата чернова на стандарта.
Живият HTML стандарт (Living) се откроява - той не се придържа към традиционното номериране на версиите, тъй като се развива постоянно и се актуализира редовно.
Етикет (двойки) е предназначен да съхранява съдържанието на уеб страница (съдържание), показано в прозорец на браузър. Информацията, която трябва да се показва в документа, трябва да се намира вътре в контейнера BODY. Тази информация включва текст, изображения, тагове, JavaScript и др.
Етикет също се използва за определяне на цветовете на връзките и текста на уеб страница. Тази практика е остаряла в HTML 4 и вместо това се препоръчва да се използват стилове за указване на цветова схема, като се прилагат към селектора . Повечето опции обаче все още се поддържат в браузърите.
Често етикет използва се за поставяне на манипулатор на събитие, като onLoad, който се изпълнява, след като документът приключи зареждането в текущия прозорец или рамка.
Отварящите и затварящите тагове BODY на уеб страница не са задължителни, но е добър стил да ги използвате за определяне на началото и края на HTML документ.
Синтаксис
...
Затварящ етикет
Задължително.
Настроики
alink - задава цвета на активната връзка.
фон - задава фоновото изображение на уеб страницата.
bgcolor - цвят на фона на уеб страницата.
bgproperties - определя дали да се превърта фона заедно с текста или не.
bottommargin - отстъп от долния край на прозореца на браузъра към съдържанието.
leftmargin - хоризонтално поле от ръба на прозореца на браузъра до съдържанието.
връзка - цвят на връзката.
scroll - задава дали да се показват ленти за превъртане или не.
текст - цветът на текста в документа.
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.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Описание на параметрите на тага 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 можете да фиксирате фона на едно място и по този начин да принудите само съдържанието да се превърта. Това качество на уеб страница рядко се използва за уебсайтове, така че може да изглежда странно и необичайно за потребителите.
Синтаксис
Аргументи
Има само един фиксиран параметър, който фиксира фона. Ако искате да премахнете тази функция, премахнете параметъра bgproperties от тага BODY или го задайте на празна стойност - "".
Стойност по подразбиране
Не.
Пример 5: Коригиране на фона
...
Забележка
- Не всички браузъри поддържат тази настройка, например Netscape я игнорира.
- Забелязано е, че при задаване на фоново изображение на уеб страница чрез стилове параметърът bgproperies спира да работи.
LEFTMARGIN параметър
Описание
Определя количеството пространство от левия и десния край на прозореца на браузъра до съдържанието на уеб страницата.
Синтаксис
Аргументи
Положително цяло число, което указва отместването в пиксели.
Стойност по подразбиране
10 пиксела за Windows и 8 пиксела за Macintosh.
Пример 6: Промяна на лявото поле
...
Забележка
- Браузърът Netscape не разбира параметъра leftmargin, той използва параметрите marginwidth - хоризонтални полета и marginheight - вертикални полета.
- За да зададете полетата от десния, долния и горния ръб, използвайте съответно параметрите rightmargin, bottommargin и topmargin.
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 параметъра:
ляво поле- отстъп от левия ръб;
дясно поле- отстъп от десния ръб;
горна граница- отстъп от горния ръб;
bottommargin- отстъп от долния ръб.
Тези параметри приемат стойности в пиксели. Те не са задължителни и можете да ги използвате наведнъж или поотделно. Например можете да направите отстъп само отляво и отдясно, или само отгоре и отдолу и т.н.:
илиЗдравейте момчета!
Днес реших да засегна една тема, която никога няма да спре да бъде актуална сред младите създатели на уебсайтове.
Винаги има нужда от персонализиране на сайтове, след като са създадени. Някои от настройките се извършват чрез редактиране на файловете на инсталирания темплейт. Например, трябва да вмъкнете код, който показва подобни записи. Но къде да го вмъкна?
Много често начинаещите задават такива въпроси. Те също са загрижени за други подобни проблеми, чието решение е по същество същото. Освен това в бъдещите си статии често ще прибягвам до вмъкване на кодове на различни места в шаблона. Следователно този материал е по-актуален от всякога.
В тази статия ще ви покажа как много лесно можете да идентифицирате мястото във вашия WordPress шаблон, където трябва да вмъкнете произволен код. Ще разгледам и други важни моменти, които може да ви интересуват в началния етап.
Нека започнем от самия връх и да разгледаме файловете, които може да се наложи да редактирате, ако искате да вмъкнете кодове ръчно, вместо да използвате добавки, защото има тази опция. Не го приветствам, но все пак, за мързеливите, ще опиша такива добавки в следващите статии.
В самото начало давам видео урок, тъй като без него ще бъде трудно да разберете материала, представен в текстов формат по-долу.
Сега ще обясня всичко подробно в текстов формат.
Файлове, отговорни за извеждането на всеки тип страница
Ако сте чели много статии в други блогове за внедряване на определени функции с помощта на кодове (скриптове), тогава съм 100% сигурен, че сте виждали фрази като:
- Поставете този код във файла, който отговаря за показването на главната страница;
- Поставете този код във файла, отговорен за извеждане на записи и други.
Има много файлове, в които може да се наложи да вмъкнете кодове. Но какви са тези файлове? Всичко е много просто.
- Извеждане на началната страница - index.php;
- Изход на записи - файл single.php;
- Изход на страница - файл page.php;
- Извеждане на архиви и категории - archive.php;
- Извеждане на долния колонтитул - footer.php;
- Извеждане на страницата за търсене - search.php;
- Изход от страничната лента - sidebar.php;
- Стилов файл – style.css;
- Изходният файл от 404 страници е 404.php.
Сега, когато ви кажат, че трябва да поставите кода в такъв и такъв файл, ще знаете къде да търсите.
Остава само да се отговори на въпроса: как да се определи правилното място във всеки от файловете?
Определяне къде да вмъкнете кода
Първо, нека преминем през онези места, които не е необходимо да бъдат идентифицирани. Те ще бъдат еднакви за всички, независимо от шаблона.
Първото място, идентично за всички шаблони, е областта във файла Header.php. Това са отварящи и затварящи тагове
.Между тези тагове винаги се поставят някои скриптове, които трябва да работят за всички страници на сайта. Тоест между тези тагове сме поставили скрипт, например за социални бутони и те работят на всички страници на сайта, където ще ги показваме.
Тези тагове се намират най-отгоре на файла Header.php.
Съдържанието между тях ще бъде различно за всеки, тъй като всичко зависи от шаблона.
Ако ви бъде казано, че трябва да вмъкнете този код между отварящия и затварящия тагове head, след това копирайте кода, потърсете подобна област във вашия шаблонен файл и просто го поставете между тези тагове.
Второто място, което също е идентично за всички шаблони, се намира във файла, отговорен за изхода на долния колонтитул - footer.php.
Скриптовете могат да бъдат свързани не само чрез вмъкването им между таговете
във файла Header.php. Можете също така да ги заредите чрез файла footer.php, като по този начин ускорите зареждането на страницата на сайта.Факт е, че когато страницата започне да се зарежда, тя се зарежда отгоре надолу. Ако всички скриптове са в горната част на страницата, тогава показването на нейното съдържание ще се забави, тъй като ще отнеме време за зареждане на скриптовете.
Нашата задача е да покажем съдържанието на страницата възможно най-бързо както на посетителите, така и на търсачките. В този случай е препоръчително да зареждате скриптове в самия край на страницата, за да покажете първо съдържанието и след това да заредите всичко останало.
За да приложите тази опция, трябва да отворите файла footer.php и да вмъкнете скрипта преди затварящия таг body. Той се намира в края на съдържанието на файла, тъй като отговаря за края на областта на страницата.
Както можете да видите, показах всички скриптове в тази област, преди затварящия етикет(маркирано със синя рамка). Между другото, извадих ги чрез зареждане от файлове, а не чрез поставяне на самите скриптове в тази област. След това значително ускорих блога. Как да направите това ще бъде отделна статия. Изчакайте!
Надявам се, че когато ви кажат да поставите код в тези области, ще го направите без никакви проблеми.
Нека да преминем към по-сложен проблем и да се опитаме да научим как да идентифицираме места в други шаблонни файлове, в които са вмъкнати различни други кодове. Обикновено тези кодове включват:
- Показване на подобни публикации;
- Извеждане на формуляр за абонамент;
- Показване на социални бутони и т.н.
Всички тези неща се вмъкват след основната част от съдържанието, тоест след края на статията. Всеки има различен код на шаблон и следователно универсален отговор на въпроса „Къде завършва изходният код на моята статия?“просто не.
Но можете лесно да определите края на кода, след което трябва да внедрите функцията, от която се нуждаете. Вече частично показах този метод в статията за избор на шаблон на WordPress (). След това използвах стандартната функционалност на интернет браузър.
За да разберете по-добре същността на този метод, силно препоръчвам да гледате видеоклипа в началото на тази публикация. В него показах как всичко се случва в реално време. Е, сега ще се опитам да го опиша възможно най-ясно.
Ще ви покажа с помощта на браузъра Google Chrome като пример. Други браузъри също имат тази функция, но може да имат малко по-различно име.
- Google Chrome - преглед на кода на елемента;
- Firefox - елемент за изследване;
- Opera - проверка на елемент.
Принципът е подобен в 3 браузъра. Сега ще ви покажа как да определите местоположението на всяка област във всеки шаблон.
Отидете, за да видите кода на елемента (Google Chrome). Щракнете с десния бутон върху празна област на страницата.
След това в долната част на страницата се появява панел, който показва целия изходен код на страницата, който можем да редактираме и да видим как ще се промени структурата и външния вид на шаблона в реално време. Но промените в данните не се запазват. За да направите това, трябва да редактирате самите шаблонни файлове.
Ето как изглежда панелът.
Посочих със стрелка лупа, като щракнете върху която можем да проверим структурата на шаблона и да определим от какви блокове се състои нашият шаблон. Наричам тази функция инспектор.
След като щракнем върху инспектора, можем да движим мишката около нашата страница и ще видим, че всички елементи, върху които задържаме курсора на мишката, започват да се маркират с цветен фон. Като пример ще ви покажа екранна снимка от статия за избор на шаблон. Там задържах курсора на мишката над заглавието на поста.
Ако трябва да вмъкнем код след изхода на нашата статия, тогава не е трудно да се досетим, че трябва да инспектираме областта на нашия шаблон и да намерим блока, който съдържа цялото съдържание на статията. Можете да търсите както в края на блока, така и в началото. Тоест можете да инспектирате шаблона както отдолу, така и отгоре.
Но ето една забележка . Трябва да намерим не само редовете на статията, а точно блоковете, в които се намира самото съдържание, тъй като в шаблонните файлове няма статии. Има само код, който показва съдържанието и е ограден в блокове. Веднага след затварящия блоков таг
