Погледајте како се у ХТМЛ-у третира бијели простор
Ако сте почетни веб дизајнер, једна од многих ствари које ћете раније схватити је начин на који се бијелом простору у коду сајта обрађује веб прегледач.
Нажалост, начин на који су претраживачи обрађивали бијели простор није у почетку нарочито интуитиван, поготово ако дођете у ХТМЛ и упоредите га са начином на који се бави простору у програмима за обраду текста, за које можда сте више упознати.
У софтверу за обраду текста можете додати много размака или табова у документу и тај размак ће се одразити на приказу садржаја документа. Ово није случај са ХТМЛ-ом или са веб страницама. Као такво, сазнање о томе како је бијели простор, са којим се рукује веб претраживачи, веома је важан.
Размак у штампи
У софтверу за обраду текста, три главна карактера белог простора су враћање простора, картице и кретања. Свака од њих дјелује на посебан начин, али у ХТМЛ-у, претраживачи их све у суштини исти. Без обзира да ли ставите један простор или 100 места у ХТМЛ ознаку или мијешате свој размак са картицама и повратним бројем карата, све ће се смањити на један простор када страница прегледа претраживач. У терминологији веб дизајна, ово је познато као колапс простора. Не можете да користите ове типичне тастере размака да бисте додали празнину на веб страници јер прегледач сруши више простора у само један простор када се приказује у прегледачу,
Зашто неко користи картице?
Типично, када људи користе језичке у текстуалном документу, они их користе због разлога постављања или да се текст пребаци на одређено место или да буде одређена удаљеност од другог елемента. У веб дизајну, не можете користити наведене споменуте просторске знакове да бисте остварили те визуелне стилове или изгледе.
У веб дизајну, коришћење додатних знакова размака у коду би било чисто због једноставности читања тог кода. Веб дизајнери и програмери често користе табулаторе за код за индентификацију тако да могу видети који су елементи деца других елемената - али те алинеје не утичу на визуелни изглед странице самог. За оне потребне промене визуелног изгледа, мораћете да се окренете на ЦСС (каскадни листови стилова).
Коришћење ЦСС-а за креирање ХТМЛ картица и размака
Веб странице данас су изграђене са одвојењем структуре и стила. Структуру странице обрађује ХТМЛ док стила диктира ЦСС. То значи да за креирање размака или постизање одређеног распореда, требало би да се окрећете ЦСС-у, а не покушавате једноставно додати размак између размака у ХТМЛ код.
Ако покушавате да користите табове за креирање ступаца текста, можете уместо тога користити <див> елементе који су постављени ЦСС-ом како би добили тај распоред колоне. Ово позиционирање се може извршити кроз ЦСС флоат, апсолутно и релативно позиционирање или нове технике постављања ЦСС-а као што су Флекбок или ЦСС Грид.
Ако су подаци које постављате табеларни подаци, можете користити таблице за усклађивање тих података онако како желите. Табеле често добијају лоше место у веб дизајну јер су их злоупотребљавали као чист алат за израду већ толико година, али табеле су и даље сасвим валидне ако ваш садржај садржи наведене табеларне податке.
Маргине, Паддинг и Тект-Индент
Најчешћи начини за креирање размака са ЦСС је коришћење једног од следећих стилова ЦСС:
- маржа
- паддинг
- текст-индент
На примјер, можете одредити прву линију параграфа као таб са сљедећим ЦСС-ом (обратите пажњу да то подразумева да ваш пасус има атрибут класе "првог" који је придружен њему):
п.фирст {
тект-индент: 5ем;
}
Овај пасус би сада био раздвојен око 5 знакова.
Такође можете да користите карактеристике маргине или паддинга у ЦСС-у да бисте додали размаке на горње, доње, лево или десно (или комбинације тих страна) елемента. На крају, можете постићи неку врсту размака потребних окретањем на ЦСС.
Премештање текста више од једног простора без ЦСС-а
Ако желите да текст премјестите више од једног мјеста даље од претходне ставке, можете користити простор који не расклапа.
Да бисте користили простор који не крши, једноставно додате & нбсп; колико пута вам је потребно у ХТМЛ ознакама.
На пример, уколико желите да преместите вашу реч са пет простора, пре реч можете додати следеће.
& нбсп; & нбсп; & нбсп; & нбсп; & нбсп;ХТМЛ их поштује и неће их срушити на један простор. Међутим, ово се сматра веома лошом праксом, јер додају додатни ХТМЛ маркуп у документ само ради постизања потреба за постављање. Ако се вратимо на то раздвајање структуре и стила, избегавајте додавање неосетљивих простора једноставно за постизање жељеног распореда ефекта и умјесто тога користите ЦСС маргине и паддинг.