Структура скоро сваке веб локације коју пронађемо и користимо на вебу креирана је помоћу ХТМЛ-а, стандардизованог система за категоризацију текстуалних датотека. Преломи страница, пасуси, јака слова, курзив и друге карактеристике се додају помоћу ХТМЛ-а. Коришћењем ознака, које упућују прегледаче како да рукују садржајем, ХТМЛ помаже да се створи ова структура.
На пример, поставили бисмо реч између ознака стронг>болд/стронг> да би изгледала подебљано. Почетна ознака (/) означава где желимо да се подебљано заврши, док прва ознака (/) означава где желимо да почне подебљано. Служи као основа за већину веб страница. Дакле, ово је место за почетак ако учите да кодирате.
Како додати простор у ХТМЛ-у
Осим једног размака између речи, занемарују се сви празни простори које уносимо у ХТМЛ текст да би се приказали у претраживачу. Као резултат тога, морамо програмирати празна места која желимо у нашем документу. Било којој линији текста може се додати размак у ХТМЛ-у. На пример, можемо да убацимо празна места у садржај табеле и пасуса користећи ХТМЛ објекат. Пошто ХТМЛ-у недостаје слово тастатуре за празан простор, морамо унети ентитет да бисмо додали сваки размак.
Можда изгледа једноставно, али додавање простора нашем ХТМЛ-у може бити изазовно. Постоји најмање пет различитих приступа да се брине о овоме.
Током ове обуке, видећемо многе примере. Такође ће показати како користити сложеније облике простора.
дф.лоц
Све ово је могуће у обичном ХТМЛ-у без употребе ЦСС-а. Али имајте на уму да је додавање простора вашем ХТМЛ-у најбоље урадити преко ЦСС-а.
Како изгледа АСЦИИ простор?
Простор је представљен АСЦИИ симболом 20. Али то је само прихваћена пракса.
Постоји пет различитих врста простора које можете користити у ХТМЛ-у. Изгледају идентично неувежбаном оку, иако имају донекле различите функције.
Таб знак, који симулира притисак на тастер таб на тастатури, је још једна опција. Још један пример је и знак за враћање каријеса, који симулира притискање тастера ентер на тастатури.
Непрекидни простор:
У свемиру:
Ем простор:
Танак простор:
Стандардни простор:
Нова линија (повратак):
Таб знак:
Лева страна представља карактера , а десна страна представља ХТМЛ код.
Колико је широк лик у простору?
За размакне знакове постоје четири стандардне ширине:
Шта значи размак у ХТМЛ-у?
је најчешће коришћени ХТМЛ ентитет.
арраилист јава
Да би овај текст испунио простор, покушајте да га баците.
Замислимо, на пример, да желимо да додамо два размака после фразе, али механизам за рендеровање веб странице сам елиминише један од размака. Да бисмо додали два размака, можда ћемо моћи да уђемо
Размак: шта је то?
Знакови који нису видљиви називају се размаци. Они се састоје од:
- простори,
- картице и
- преломи редова (повратак лагера, помицање реда или обоје),
Зашто је ово кључно?
Ова слова, на пример, нису видљива у програму за обраду текста, али утичу на простор и форматирање текста. Прегледач сажима бројне знакове размака у један размак у ХТМЛ-у, који се разликује од других језика за означавање.
Постоји неколико размака између речи у овом ХТМЛ-у, а сваки ред се завршава знаковима ЦРЛФ (повратак прелаза, улазак у ред). Прегледач ће скупити све знакове размака.
Пример
За добре ствари је потребно више времена.
Излаз:
Уметање размака
- Користите знак размака који се не прекида у тексту ( ) да бисте обезбедили више размака.
- Својство ЦСС паддинг може се користити за повећање простора унутар елемента у различитим околностима.
- ЦСС атрибут маргине омогућава додавање додатног простора око елемента.
Иако су празни размаци корисни, не би требало да се користе претерано, јер би то могло да омета начин на који се материјал приказује у прегледачима. Поред тога, уздржите се од коришћења размака без прекида у сврхе стила као што је увлачење или центрирање елемента на веб страници; уместо тога, стилске захтеве треба решавати преко ЦСС-а.
Поред ентитета, ХТМЛ такође подржава следеће додатне ентитете за бројне суседне празне просторе:
Ентитет карактера се користи за представљање размака. Ен је јединица мере која је еквивалентна 8 пиксела, или половини ширине ем (16 пиксела).
Синтакса за ен простор између садржаја је Ево примера како да користите ХТМЛ &енсп ентитет:
Ево примера за ен свемирски ентитет.
Излаз:
Ентитет се користи у горњем примеру за додавање размака у ХТМЛ, а његова ширина је 8 пиксела. Могу се користити и на неколико суседних локација.
Одржавање форматирања и размака
Ако желите да задржите форматирање и размак који су наведени, постоје два избора:
- Додавање ХТМЛ форматирања и простора
- Користећи
tag.
Коришћење ознаке 'пре'
Ови резултати настају заменом
ознака за
tag:
Пример
pre> Good things take more time
Излаз:
Да,
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
Додавање ХТМЛ форматирања и размака
Као алтернативу, можемо укључити ХТМЛ елементе и симболе као што су следећи:
тврди повез у односу на меки повез
Добре ствари ће
узети више времена.
Излаз:
Прелом реда је обавезан
елемент.
Непрекидни простор:
Прегледач не сажима размаке додане знаком размака који се не прекида ().
Поред тога, као што име каже, спречава претраживач да ту преломи две речи.
За добре ствари је потребно више времена.
Излаз:
У овом моделу, 10 размака се додаје на почетку текста. Други се ставља између ' узима ' који неће бити изолован када се реченица заврши због ограничења простора.
Атрибут Паддинг
Унутрашњи простор елемента се повећава помоћу атрибута ЦСС паддинг.
Заузима вредности у распону од један до четири, почевши од горње, десне, доње и десне стране.
Тхе 'див' елемент има паддинг од 20 пиксела са свих страна.
Inner spacing is 20px with a div attribute
Излаз:
Атрибут маргине
- Са ЦСС атрибутом маргина, око елемента се додаје додатни простор.
- Заузима вредности у распону од један до четири, почевши од горње, десне, доње и десне стране.
Тхе 'див' елемент има маргину од 40 пиксела са свих страна.
како сортирати низ у Јави
Outer spacing is 20px using the div and margin attribute
Излаз:
Паддинг вс Маргин
- Паддинг и маргина повећавају простор елемента.
- Паддинг оставља празнину која се сматра компонентом елемента.
- Простор креиран на маргини сматра се да постоји изван граница елемента.
- Ова варијација утиче на регион кликова, боје позадине и друге атрибуте веб локације.
Могло би се веровати да је додавање размака у ХТМЛ једноставно као и стално притискање размакнице. Али ствари једноставно не функционишу тако. Притиском на размакницу више пута нећете додати још празних места у близини као што би то било у текстуалном документу. Претраживач ће комбиновати све оближње празне просторе у један ако то урадимо у ХТМЛ-у. Да бисмо демонстрирали шта се дешава када користимо неколико размака у ХТМЛ-у, погледајмо пример:
Дакле, након што смо размакницу користили много пута, не можемо додати још празних простора
Излаз:
Узастопним притиском на размакницу у ХТМЛ-у, као што се види у горњем примеру, покушавамо да убацимо бројне узастопне празне просторе у веб страницу. Међутим, претраживачи приказују више суседних празних простора као један размак и занемарују размаке пре, после и ван компоненти. Феномен је познат као колапс белине. Иако сажимање размака понекад може бити досадно, постоји неколико техника за додавање више размака у ХТМЛ и ЦСС (каскадни стилски листови).
&амп;
Ентитет карактера се користи за представљање ем простора. Ширина ем-а, која износи 16 пиксела, је еквивалентна емсп-у.
Синтакса за ем размаке у тексту је Ево примера како се користи ХТМЛ &емсп ентитет:
Ево примера за ем свемирски ентитет.
Излаз
Ентитет се користи у горњем примеру за додавање размака у ХТМЛ, а његова ширина је 16 пиксела. Такође се могу користити у неколико суседних простора.
&тхинсп
Ентитет карактера се користи за представљање Танког простора, често познатог као уски простор. Једна шестина ем је ширина а &
Танак простор је написан као садржај између у синтакси. Ево примера како се користи ХТМЛ ентитет ''
рекха аге
Ово је пример ентитета танког простора.
Излаз
Ентитет се користи у горњем примеру за додавање танких размака у ХТМЛ, а његова ширина је једна шестина ем. Такође се користе у неколико суседних простора.
Испод је АСЦИИ арт 'Здраво'. # # ##### # # # ##### # # # # # # # # # # #####
Излаз:
Предности коришћења размака
Зашто је размак важан?
Бели простор је основни градивни блок доброг дизајна, по мом мишљењу као дизајнера. Дизајнери се позивају на негативни простор, или простор између делова у композицији, када користе термин „бели простор“. То је празан простор између графике, маргина и олука на страници која није ничим означена. Оку се даје визуелно подручје дисања размаком између колона, редова текста и фигура.
Постоји убедљив разлог зашто је размак кључна компонента дизајна. Може револуционисати дизајн наше веб странице и пружити јој неколико предности ако се правилно примени. Морамо да произведемо и креирамо распореде који су пријатни за око и подстичу читаоце да наставе. Од кључне је важности да стално имамо на уму да је испорука фантастичног производа нашим клијентима наш приоритет када дизајнирамо за веб.
Размак се може користити за вођење читаоца од једног елемента до другог, стварање хармоније и равнотеже и помоћ при брендирању дизајна. Наши кључни циљеви су да веб локација изгледа једноставно и јасно и да пружи садржај који ће се допасти нашим корисницима и који ће ценити. Размак није само 'празан' простор; то је карактеристика дизајна која омогућава постојање ставки на страници. Подручје успоставља равнотежу и служи као стални подсетник да постоје прелепи дизајни. Да бисмо пренели јасну поруку, не морамо да правимо изглед који је преоптерећен текстом и графиком.