Кескіннің айналасында мәтінді қалай аудару керек

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

Веб-сайттарға мәтін және суреттер қосу оңай. Мәтін параграфтар, тақырыптар және тізімдер секілді стандартты HTML тегтерімен қосылады, ал суреттер элементі бар бетте орналастырылады. Веб-бетке суретті қосқаннан кейін, суреттің жанында мәтін ағыны болуы мүмкін (HTML кодқа қосылған сурет әдепкі түрде браузерде көрсетілетін болады). Техникалық тұрғыдан, CSS-ні ​​(ұсынылған) немесе визуалды нұсқауларды тікелей HTML-ға қосу арқылы (осы веб-сайт үшін стилі мен құрылымын бөлуді қолдау қажет болғандықтан ұсынылмайды) осы көрініске қол жеткізудің екі жолы бар.

CSS-ды пайдалану

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

1. Алдымен суретті өз веб-сайтыңызға қосыңыз. Осы HTML-дан кез келген көрнекі сипаттамаларды (ені мен биіктігі мәндері сияқты) алып тастауды ұмытпаңыз. Бұл маңызды, әсіресе браузерге негізделген кескін өлшемі өзгеретін жауапты веб-сайт үшін. Adobe Dreamweaver сияқты белгілі бір бағдарлама ені мен биіктігі туралы мәліметтерді осы құралмен енгізілген суреттерге қосады, сондықтан бұл ақпаратты HTML кодынан алып тастаңыз! Дегенмен, сәйкес келетін алтын мәтінді қамту керек . HTML кодының қалай көрінетіні туралы мысал:
2. Сәндеу мақсаттары үшін суретке сынып қосуға болады. Бұл сыныптың мәні - біздің CSS файлымызда қолданылатын нәрсе. Бұл жерде қолданылатын құндылық ерікті болып табылады, дегенмен, осы стиль үшін біз өзіміздің бейненің қалай туралануын қалайтынымызға байланысты «сол» немесе «оң» мәндерін пайдаланамыз. Біз бұл қарапайым синтаксисті жақсы жұмыс істеуге және болашақта торапты басқаруға мәжбүр бола алатын басқа адамдарға оңай болатынын білеміз, бірақ сіз мұны өзіңіз қалаған кез келген мәнге бере аласыз.
   2. Өз кезегінде бұл класс мәні ештеңе жасамайды. Кескін автоматты түрде мәтіннің сол жағында тураланбайды. Бұл үшін біз қазір біздің CSS файлымызға жүгінуіміз керек.

1. Стиль кестесінде енді келесі стильді қосуға болады:
   1. .сол {
   2. float: сол;
   3. толтыру: 0 20px 20px 0;
   4. }
   5. Мұнда сіз не істеп қойдыңыз , ол қалыпты құжат айналымынан суретке түсіретін CSS-нің «float» сипатын қолданыңыз (бұл суреттің астында қалыпты түрде бейнеленген), контейнердің сол жағына теңестіреді . Енді HTML белгісінен кейін шыққан мәтін оны айналады. Сондай-ақ, біз бұл мәтінді тікелей суретке қарсы тұрмас үшін, кейбір толтырылған мәндерді қосамыз. Оның орнына, беттің дизайнын көрнекі түрде тартымды ететін жақсы интервал болады. Толтыруға арналған CSS стенограммасында суреттің жоғарғы және сол жағына 0, ал сол және төменгі 20 пиксельге қосылды. Есіңізде болсын, сол жаққа тураланған кескіннің оң жағын біршама толтырып қосу керек. Оң жаққа тураланған сурет (бір сәтте біз қарайтын боламыз) оның сол жағына толтырылатын болады.
2. Егер веб-бетті браузерде қарасаңыз, енді сіздің суретіңіз беттің сол жағына теңестірілгенін және мәтіннің айналасында жақсы оралғанын көріңіз. Айтуға болатын тағы бір тәсіл - бұл сурет «солға қарай жылжиды».

1. Егер сіз осы кескінді оң жаққа келтіргіңіз келсе (мысалы, осы мақаланы сүйемелдейтін фотокөрсетілім сияқты), қарапайым болар еді. Біріншіден, біз «сол жақта» сынып құндылығы үшін біздің CSS-ді ғана қосқан стилден басқа, оң жаққа теңестіру үшін бізде де бар. Бұл келесідей көрінеді:
   1. Тікелей {
   2. float: оң;
   3. толтыру: 0 0 20px 20px;
   4. }
   5. Бұл біз жазған алғашқы CSS-дің ұқсастығын көре аласыз. Жалғыз айырмашылық - біз қолданатын «float» қасиеті мен біз қолданатын толтырғыш мәндері (оң жақтың орнына суретіміздің сол жағына қосу).
2. Соңында, кескіннің сыныбының мәнін «солдан» «HTML» -дегі «оңға» өзгертуге болады:
3. Браузерде қазір сіздің бетіңізді қараңыз және суретті оң жаққа туралап мәтінді мұқият орап алу керек. Біз веб-беттерді жасаған кезде бұл визуалды мәнерлерді қажетінше пайдалану үшін, біз барлық стиль кестелеріне «сол» және «оң» деген екі стильді қосамыз. Бұл екі стильдер жақсы, қайталанатын мүмкіндіктерге айналады, біз суреттерді суреттерді мәнермен орауды қажет ететін кез келген уақытта айналдыра аламыз.

HTML-ні орнына HTML-ні пайдалану (және неге бұлай істеу керек)

HTML арқылы кескін айналасында мәтінді орау мүмкін болса да, веб-стандарттар CSS (және жоғарыда көрсетілген қадамдар) құрылымды (HTML) және стильді (CSS) бөлу мүмкіндігін сақтауға мүмкіндік береді. Бұл, әсіресе кейбір құрылғылар мен қондырғылар үшін, бұл мәтіннің кескін айналасында қажет болмайтынын ескеру әсіресе маңызды. Кішігірім экрандар үшін жауапты веб-сайттың орналасуы мәтіннің шынымен суреттің астына тура түсуін және суреттің экранның толық енін созуын талап етуі мүмкін. Егер сіздің стильдер HTML түзетулеріңізден бөлек болса, бұны бұқаралық ақпарат сұрауларымен оңай жасауға болады. Суреттер мен мәтін әртүрлі келушілерге және әртүрлі экрандарға әртүрлі түрде көрінетін бүгінгі көпмақсатты әлемде бұл бөліну ұзақ мерзімді табысқа және веб-бетті басқаруға өте маңызды.