Како шифрирати веб локацију

Како шифрирати веб локацијуЖелите да научите како да направите веб локацију са ХТМЛ и ЦСС-ом?


На правом сте месту. У овом водичу приказујемо све кораке за кретање са празног екрана до веб странице која је оптимизована и истовремено добро изгледа..

Али прво, шта је ХТМЛ и ЦСС?

Па, могли бисте само потражити оба термина у Википедији, али те дефиниције нису баш читљиве. Поједноставимо ствари:

  • ХТМЛ (Хипертект Маркуп Лангуаге) дефинише структуру и садржај веб странице – где ствари иду, како они су положени и шта с на страници
  • ЦСС (Каскадне таблице стилова) дефинише стајлинг / презентација веб странице и елементе на њој

Не можете заиста једно без другог – њих двоје заједно раде на стварању финалне веб странице, њеног дизајна и садржаја који се налази на њој.

Белешка; када кажемо „веб страница“, то значи да је један ХТМЛ документ – једна страница која је део ваше веб локације. Док је „веб локација“ комплетна ствар – ваша цела веб страница са свим њеним појединачним веб страницама.

Како направити веб локацију помоћу ХТМЛ и ЦСС (табела садржаја):

  1. Научите основе ХТМЛ-а
  2. Схватите структуру ХТМЛ документа
  3. Упознајте ЦСС селекторе
  4. Саставите табелу ЦСС стилова
  5. Набавите Боотстрап
  6. Изаберите дизајн
  7. Прилагодите своју веб локацију ХТМЛ и ЦСС
  8. Додајте садржај и слике
  9. Фино подешавање боја и фонтова
  10. Креирајте додатне странице

Укупно време за израду веб странице: 4-5 сати
Ниво вештина: Средњи

Ако мислите да је то превише компликовано, препоручујемо вам да креирате веб локацију помоћу ВордПресс-а или одаберете једног од градитеља веб локација. Такође можете да погледате листу одабраних најбољих ИДЕ-а за развој веба. 

Contents

Пре него што започнете, скупите ресурсе:

Дакле, прво што вам је потребно пре него што креирате веб локацију са ХТМЛ-ом и ЦСС-ом је веб сервер (хостинг). Не брините, међутим; не морате да купујете сопствену машину. Многе компаније за хостинг нуде вам једноставне услуге хостинга на својим машинама. Само гоогле за “веб хостинг” и одаберите нешто што није прескупо.

Када је сервер сортиран, следећа ствар која вам треба је име домена. Назив домена је оно што је веб локација идентификована на вебу. На пример, име домене ове веб локације је вебситесетуп.орг.

Када имате и име домене и сервер, можете их повезати заједно.

Потпуно обелодањивање: Зарађујемо провизију ако на крају купите Блуехост кроз наше препоруке у овом водичу. Ово нам помаже да ажурирамо и покренете ажурност ВебСетуп-а. Хвала на подршци.

Да бисте ово средили без икаквих болова, препоручујемо да се пријавите са неком компанијом Блуехост.

Они ће поднети сва подешавања уместо вас. Значи да ће: (а) подесите хостинг налог за вас, (б) региструјте име домена у ваше име, (ц) конфигуришите све да раде заједно и (д) пружају вам приступ контролној табли која се лако користи.

Само напред и пријавите се Блуехост, сачекаћемо Када се вратите и конфигуришете свој веб сервер, идите на следећи корак.

П.С. Ако само желите да експериментишете са веб страницом на рачунару, и не намеравате да га објавите, користите локални софтвер за веб сервер. Она која препоручамо и волимо да користимо зове се КСАМПП. Има верзије и за Мац и за ПЦ и лако је користити. Ево га Водич о томе како да га инсталирате на рачунар.

1. Научите основе ХТМЛ-а

Главни елемент ХТМЛ структуре је ХТМЛ таг.

На пример, ознака изгледа овако:

НЕШТО

Ево, имамо посла са таг. Овај ће одважан део текста који се налази између почетне ознаке () и завршну ознаку (). У овом случају је то део текста НЕШТО.

Али постоје и друге ознаке, само неколико имена:

  • ... ће курзив текста бити између курса и почетних ознака
  • ... подвући ће га
  • ...

    је одломак текста


  • ...

    је главно заглавље на страници

Осим тих једноставних тагова, постоје и сложеније ознаке. На пример, ако желите да направите листу као што је следећа:

  • Ставка 1
  • Тачка 2
  • Тачка 3

… то можете учинити са следећим ХТМЛ кодом:

  • Ставка 1
  • Тачка 2
  • Тачка 3

Или, ако желите да додате везу на другу страницу, попут ове:

Ово је веза до наше почетне странице

… то можете учинити са овим делом кода:

Ово је веза до моје почетне странице

Прочитајте ово да бисте добили пуна листа ХТМЛ тагова. Постаће корисно док правите веб локацију са ХТМЛ и ЦСС.

2. Схватите структуру ХТМЛ документа

Замислите своју ХТМЛ страницу као да је направљена од Легоса. Ставите различите цигле једну на другу да бисте добили већу структуру.

Али уместо Лего цигли, добићете ХТМЛ ознаке …

Ево најједноставније структуре документа ХТМЛ-а:





Здраво Свете!


Здраво Свете!

Моја прва веб страница.

Можете узети горњи код, копирати га и залепити у нову датотеку, сачувати документ као индек.хтмл, и то ће бити савршено важећа ХТМЛ страница.

Објаснимо поједине делове овог кода:

  • – почетна декларација документа
  • – друга декларација; каже да ће следећи бити ХТМЛ документ написан на енглеском језику
  • – означава почетак глава одељак; тхе тхе глава у одељку се налазе сви основни параметри странице; већина њих неће бити приказана на екрану; они само дефинишу шта се дешава испод хаубе
  • – дефинише који скуп знакова се користи за писање документа; нема потребе да трошите превише времена на ово; само искористите ову изјаву каква је
  • Здраво Свете! – наслов странице; то ће људи видети у насловној траци својих прегледача, нпр .:

наслов у веб прегледачу приликом креирања веб странице са ХТМЛ и ЦСС

  • – означава почетак тело одељак; Овде иде сав садржај странице; то је главни део ХТМЛ документа; нагласимо ово, у овом одељку ћете укључити сав садржај који је требао да се прикаже на страници

  • Здраво Свете!

    – главно заглавље на страници

  • Моја прва веб страница.

    – једноставан одломак текста

  • – завршна ознака целог ХТМЛ документа

Важна напомена овде. Рад на ХТМЛ датотеци у основној апликацији за текст или на сложеном процесору текста као што је МС Ворд није добро искуство. Да бисте олакшали ствари себи, инсталирајте алат под називом Узвишени текст. Има верзије и за Мац и за ПЦ и бесплатна је.

Зашто је боље? Између осталог, обојат ће синтаксу ХТМЛ датотеке. Значи, визуелно ћете разликовати ваше ХТМЛ ознаке од текстуалног садржаја, параметара ознаке и других вредности. У основи, све ће то постати читљиво. Ево како изгледа наша једноставна ХТМЛ структура у узвишеном тексту:

узвишена синтакса је одлична при креирању веб странице са ХТМЛ и ЦСС

Ок, натраг на тему. Можете узети ново индек.хтмл датотеку која је ваша, копирајте је у главни директориј вашег веб сервера, а затим видите ту страницу тако што ћете се кретати до ње путем веб прегледача. Немојте се превише узбуђивати; ова страница ће бити прилично ружна (види доле).

ова страница је ружна

У реду, па страница је ружна, како направити да није тако?

3. Упознајте ЦСС селекторе

Баш као што ХТМЛ има своје ознаке, тако и ЦСС селектори.

Селектори описују како би требало да се неки елемент понаша према изгледу. Ево примера ЦСС селектора:

п {
фонт-сизе: 18пк;
}

Овај селектор означава да је сав ХТМЛ

ознаке у документу имаће величину фонта од 18 пк.

Међутим, практичнији начин коришћења ЦСС селектора није да све ознаке одређене врсте ограничавају на одређени стил, већ креирају различите „класе“ и додељују их таговима један по један.

На пример, селектор класе у ЦСС-у изгледа овако:

.нормал-тект {
фонт-сизе: 18пк;
}

Примјетите тачку (.) пре имена класе (нормал-тект). Са дефинисаном класом „нормалног текста“, сада можемо да доделимо ту класу оним одређеним ХТМЛ ознакама које желимо да направимо у величини од 18 пиксела.

На пример:

Овај текст има 18пк.

Још неколико минута да објаснимо све елементе тог дела ЦСС кода изнад:

  • .нормал-тект – дефиниција класе; све након назива класе и између заграда за отварање и затварање {} дефинише како ће изгледати елементи додељени овој класи
  • фонт-сизе – пример ЦСС својства
  • 18пк – вредност додељена својству

Постоји тона ЦСС својстава осим горе наведених фонт-сизе. Ево комплетна листа ако сте знатижељни.

4. Саставите ЦСС табелу стилова

ХТМЛ документ је врло структурни – сваки елемент има своје место, а редослед елемената је пресудан за коначну изградњу и изглед дотичне веб странице. ЦСС документ је много мање.

ЦСС документи се често називају табеле стилова. У основи, ЦСС таблица стилова је листа свих дефиниција класе које се користе у одговарајућем ХТМЛ документу. Редослед дефиниција класе није толико битан већину времена (барем за једноставне дизајне).

Начин на који састављате ЦСС таблицу стилова је тако што ћете дефинисати сваку класу једну по једну, а затим тестирати да ли је резултат у дизајну ваше странице какав сте желели.

Ово звучи као мучан посао, и јесте.

Али олакшат ћемо вам ствари, а не присиљавати вас да ручно научите ХТМЛ и ЦСС дизајн. Уместо да вас научимо свему испочетка, узећемо живи организам и сецират ћемо његове елементе.

Овде долази у игру ствар која се зове Боотстрап.

5. Преузмите / инсталирајте Боотстрап

Боотстрап је алат са отвореним кодом за креирање веб странице са ХТМЛ и ЦСС.

На обичном енглеском језику Боотстрап води рачуна о основној структури ХТМЛ документа и ЦСС табеле. Омогућава оквир који осигурава да су главне скеле ваше веб странице спремне и оптимизоване за даљи развој.

У основи, Боотстрап вам омогућава да не кренете испочетка, и уместо тога идете право у забавни део. Уз то, не морате радити на често досадним раним фазама стварања веб локације са ХТМЛ и ЦСС.

Постоје два пута која можете кренути:

  • Опција (а): научите Боотстрап – идите на почетну страницу Боотстрап, преузмите главни Боотстрап пакет и почните да градите преко њега.
  • Опција (б): узмите пречицу – набавите стартер пакет за Боотстрап са лепим дизајном и већ изграђеном демо веб страницом.

Опција (а) можда има неку криву учења на почетку, али није ни на који начин најгори начин да се приступи креирању веб странице са ХТМЛ и ЦСС. Једном када овладате језгром Боотстрап структуре, можда ће вам бити лакше да направите нове странице и учините их да изгледају онако како желите. Тхе Документација за покретање система је сјајно место за почетак овог пута.

Идемо са Опцијом (б) за овај водич. То радимо из неколико разлога, главни од њих:

Почетак с готовом структуром штеди много боли у покушају да се утврде основне потребе ХТМЛ документа. Ово вам омогућава да се фокусирате на занимљиве ствари – попут постављања садржаја и чинећи га лепим.

Укратко, учење ствари на овај начин ће вам дати бржи резултат бржи, за што претпостављамо да је оно што желите.

6. Изаберите дизајн

Када правите веб локацију са ХТМЛ и ЦСС, слободно можете користити било који предложак за покретање система Боотстрап. Сви би требали радити слично.

Међутим, у овом водичу ћемо користити један од предложака од стране Покрените Боотстрап. Имају леп избор бесплатних предложака који су оптимизовани, раде без проблема, а такође су и добро дизајнирани.

Тема коју ћемо користити је названа Цреативе. Коначни ефекат који ћемо ићи изгледаће отприлике овако:

финална почетна страница након креирања веб странице са ХТМЛ и ЦСС

За почетак, предложак Цреативе, кликните на Бесплатно скидање дугме са десне стране (на Ова страница) и сачувајте зип пакет на радну површину.

Отпакујте пакет и премјестите његов садржај у главни директориј локалног веб сервера или веб хостинг рачуна.

Сада отворите ту локацију путем веб прегледача. Видећете основну верзију шаблона:

старт боотстрап темплате

Већ је добро изгледа, али сада је време да научите како да користите ХТМЛ и ЦСС да бисте то претворили у тачно оно што желите.

7. Прилагодите своју веб страницу ХТМЛ-ом и ЦСС-ом

Прво порадимо на почетној страници дизајна. Ово ће нам показати како заменити графику, текстове и опћенито прилагодити све.

Мало смо горе говорили о одељку главе ХТМЛ документа. Погледајмо овде детаљније.

Када отворите индек.хтмл датотека ваше странице за покретање система Боотстрап у узвишеном тексту, видећете овако главни део (за јасноћу смо уклонили све небитне ствари из овог кода *):






Цреативе - Покрените тему за покретање система





* Поред горе наведеног, постојао је и код за учитавање Гоогле фонтова, иконе Фонт Авесоме и модул светлосне кутије за слике приказане на страници.

Већину декларација овде већ знамо, али постоји и пар нових:

  • Прво, све између заграде је ХТМЛ коментар. Не приказује се на завршној страници.
  • – то је једна од Боотстрап-ових сопствених декларацијских ознака. Она дефинише величину прегледаног места веб локације.
  • – ова линија учитава ЦСС табелу стилова предлошка Цреативе и она такође садржи стандардну таблицу стилова Боотстрап.

Изменимо последњу декларацију – линију која учитава ЦСС – да бисмо касније лакше радили.

Промените ту линију у:


Ово је само мала разлика – учитаваће скраћена верзија истог ЦСС листа. Ову верзију је једноставно лакше изменити.

Сада се померите до самог дна индек.хтмл датотека. Следеће редове ћете видети непосредно пре затварања тело таг:

        

Они су одговорни за учитавање ЈаваСцрипт датотека које се баве неким визуелнијим интеракцијама дизајна. На пример, када кликнете на О томе линк у горњем менију, бићете несметано одведени до отприлике блока на истој страници – то се, између осталог, врши преко ЈаваСцрипт-а. Не морамо да се правимо да одмах схватимо овај код. Оставимо ово неки други пут.

Уместо тога, хајде да радимо на додавању нашег сопственог садржаја на страницу:

8. Додајте садржај и слике

Прво што ћете желети је да промените наслов странице.

1. Промените наслов

Пронађи наслов означите у одељку главе и замените текст између ознака нечим својим:

Мој ХТМЛ сајт

2. Прилагодите Одељак хероја

Одељак о херојима је оно што називамо овим блоком:

одељак за хероје

Било би кул да у себи имамо свој садржај. Да бисте модификовали овај блок, вратите се на свој индек.хтмл датотеку и пронађите овај одељак:

...


...

Откриј више

Цео овај блок кода контролише оно што се налази у одељку „херој“.

Овде су неке нове ознаке:


  • – ово је ознака која дефинише да је цео овај одељак заглавље странице; ова ознака има неколико браће и сестара у облику
    таг и
    таг
  • – је општа ЦСС ознака која означава да је следеће засебан одељак (ака подела) у ХТМЛ документу; његово коришћење олакшава визуелно разликовање појединих одељка на страници

Такође ћете приметити да неке друге ознаке (које већ знамо) изгледају мало сложеније, са додељеним више ЦСС класа. На пример:

...

Часови додељени

ознака је овде тект-велика слова текст-бијела, масно подебљана.

Ове часове су креирали Боотстрап и програмер креативне теме. Добра вест је да их и ви можете слободно користити приликом креирања веб странице са ХТМЛ и ЦСС.

Искрено, можете прилагодити било коју ознаку коју додате структури своје странице додељивањем било ког броја класа.

Ако желите да видите комплетну листу доступних класа, можете да отворите главну цреативе.цсс датотека која се налази у цсс поддиректор креативне теме.

Схватање свих ових класа може у почетку изгледати застрашујуће, али заправо је лакше него што изгледа.

На пример, једна од часова која је додељена неким одломцима у нашем индек.хтмл датотека је фонт-веигхт-лигхт. Када скочите у цреативе.цсс датотека и цтрл + ф ако тражите име класе, видећете да то једноставно поставља фонт-веигхт параметар попут:

.фонт-веигхт-лигхт {
фонт-веигхт: 300;
}

Измена заданих текстова у индек.хтмл датотека је врло једноставна. Једноставно пронађите ознаку коју желите да измените и промените шта је између уводних и завршних ознака.

На пример, да бисте променили главни наслов, само промените ово:

Твоја омиљена ...

На нешто попут следећег:

Дивите се мојој ХТМЛ веб локацији!

То можете учинити са свим параграфима и осталим ознакама на страници.

Оно што је важно јесте да такође можете слободно додавати нове одломке. На пример, можемо узети одломак који се већ налази на страници, направити копију и залепити га одмах испод оригиналног одломка; овако:

Покрените Боотстрап може ...

Став 2

Сада, уз бригу о текстовима, заменимо слику која је у позадини.

То је мало сложеније учинити јер захтева да уђемо у датотеку табеле ЦСС стилова и тамо извршимо модификације. Као што можете видети у ХТМЛ коду Мастхеад у одељку, ниједна ознака не би показала да на било који начин укључује слику на страницу. Ово се ради преко ЦСС-а.

Када поново погледате цео блок руковања кодом Мастхеад у одељку, видећете да је додељена класи која се зове мастхеад. Ова линија кода управља задатком класе:

Тхе мастхеад класа је она која поставља слику у позадину целог блока.

Отворимо цреативе.цсс датотеку поново и потражите класу “мастхеад”:

хеадер.мастхеад {
паддинг-топ: 10рем;
пад-боттом: цалц (10рем - 72пк);
позадина: линеарни градијент (до дна, ргба (92, 77, 66, 0,8) 0%, ргба (92, 77, 66, 0,8) 100%), урл ("../ имг / бг-мастхеад.јпг" );
позадинска позиција: центар;
позадина-понављање: не-понављање;
позадински прилог: листање;
позадина: поклопац;
}

Овај код чини све врсте фантастичних ствари на нашој слици (попут додавања прекривања, засјењења итд.), Али важан део је следећи: урл ("../ имг / бг-мастхеад.јпг"). Ово је линија која показује где треба да пронађете позадинску слику. Биће у имг поддиректоријум.

Да бисте променили ову позадинску слику, узмите било коју сопствену слику, копирајте је на имг поддиректоријум, а затим копирајте и залепите његово име уместо оригинала бг-мастхеад.јпг датотека. Укратко, промените ово: урл ("../ имг / бг-мастхеад.јпг") на ово: урл ("../ имг / ИОУРФИЛЕ.јпг").

3. Прилагодите остале блокове на страници

Док пролазите кроз индек.хтмл датотеке, приметићете да на страници постоји већ пуно различитих одељка. Имамо одељак за навигација, и О томе блок, неки услуге, а портфолио, а позив на акцију, а контакт блок и фоотер.

Иако постоји различит садржај у свим овим одељцима, сами делови су по структури слични. Сви имају приближно исти скуп ХТМЛ ознака – само различите ЦСС класе које су им додељене.

Најбољи начин да промените страницу у складу са вашим потребама је да прођете кроз блокове један по један и експериментишете мењајући ствари около.

Осим што мењате текстове, можете да померате и читаве одељке (делове између

ознаке). Под условом, то морате учинити ручно (сечењем и лепљењем елемената на место), то је и даље једноставно..

Уз то речено, постоје две сасвим основне модификације о којима још нисмо разговарали. Покријмо следеће:

9. Фино подешавање боја и фонтова

Мењање боја или фонтова је врло лако урадити у ХТМЛ-у и ЦСС-у. Најједноставнија ствар коју можете учинити је додијелити неки линијски стил ХТМЛ ознаци. На пример:

Црвени текст

У ХТМЛ-у су боје представљене њиховим шестнаестим вредностима; „# ФФ0000“ је црвене боје. Ево табеле свих осталих стандардне боје.

Бољи начин да доделите боје је то помоћу ЦСС табеле. На пример, да добијемо исти ефекат као код изнад, ово можемо ставити у нашу ЦСС таблицу стилова:

п.ред {
боја: # ФФ0000;
}

Затим користите главни део ХТМЛ кода у главном документу:

Црвени текст

Друга метода је у основи како се ствари раде у Боотстрапу.

Да бисте променили боју било ког текста на страници, прво пронађите ознаку која је одговорна за обликовање тог текста, а затим уђите у таблицу стилова и промените одговарајућу класу или направите нову класу.

Ево примера; реците да желите да промените боју заглавља на коме пише „На услузи“. Тренутно је црна, и ово је код којим се руководи:

На услузи

Да бисте променили боју, најбољи начин је креирање нове класе која се зове, рецимо, .текст наранџасто и подесите вредност боје на следећи начин:

.тект-оранге {
боја: # ф4623а! битно;
}

* Тхе !Важно је ће се побринути да ово подешавање боја надјача било које друго подешавање боје које је стигло пре њега.

Сада се можемо вратити нашем заглављу и променити његов код у:

На услузи

Уз ове промене, заглавље ће сада бити наранџасто:

наранџасти х2

Да бисте променили фонт и његову величину, можете учинити нешто веома слично. Али прво, пример како изгледа блок дефиниције фонта у ЦСС-у:

.СОМЕЦЛАСС {
породица фонтова: "Мерривеатхер", Робото, санс-сериф;
фонт-сизе: 18пк;
}
  • учитавање фонтова Мерривеатхер, Робото, и системски подразумевани Санс Сериф фонт (прочитајте ово да бисте сазнали о фонтовима заштићеним на мрежи)
  • подесите величину фонта на 18 пк

Ова врста дефиниције може бити смештена у било коју ЦСС класу, баш као и дефиниција боја. Заправо, дефиниције фонта и боје често се налазе у декларацијама исте класе.

Враћајући се нашем претходном примеру, да бисмо променили величину фонта за оно заглавље које каже „На услузи“, прво бисмо могли да створимо класу попут ове:

.тект-ккл {
фонт-сизе: 50пк;
}

И доделите овој класи заглавље:

На услузи

Када мењате боје или фонтове у свом шаблону направљеном у програму Боотстрап, прво погледајте ЦСС таблицу стилова за класе које вам већ могу дати алтернативне величине или боје. Користите оне тамо где су доступни.

10. Креирајте додатне странице

Сада када сте почетну страницу прилагодили, време је да почнете да радите на неким додатним страницама и повежете их са почетном страницом.

Када креирате веб локацију са ХТМЛ и ЦСС-ом, можете направити било који број подстраница и затим их повезати заједно.

Ево неких од уобичајених страница које су већини веб локација потребне:

  • о страници
  • контакт
  • портфолио
  • Производи и услуге
  • тим
  • политике (политика приватности, услови итд.)

1. Почните са изгледом

Када правите нову веб страницу, прва одлука коју треба да донесете је оно што желите да изгледа изглед.

Када креирате веб локацију са ХТМЛ и ЦСС, ништа вас не спречава да се правите шта год изглед који желите. Једина потешкоћа је заправо њихово спајање.

ХТМЛ и ЦСС могу бити тешки за решавање када започињемо са празног екрана, па ћемо овде користити и Боотстрап. Прво ћемо вам показати неке принципе израде изгледа, а затим демонстрирати како то урадити са Боотстрапом.

Начин на који можете размишљати о распореду ваше веб странице је да је сматрате редоследом појединачних блокова – један на другом. Нешто попут овога (приметите четири различита блока):

изглед приликом креирања веб странице са ХТМЛ и ЦСС

Сјајна ствар у програму Боотстрап јесте да он поступа са основним принципима изгледа и детаљима изгледа за вас, тако да можете једноставно да се фокусирате на постављање тих блокова на права места.

У овом одељку водича креираћемо нову страницу „отприлике“.

За почетак, направићемо само врло основни пројекат изгледа. Нешто попут горњег.

  • на врху се налази навигациони мени,
  • блок наслова пуне ширине испод менија,
  • одељак са главним садржајем у средини, у средини екрана (не пуне ширине),
  • и подножје.

Сада ћемо изградити овај изглед у ХТМЛ-у.

2. Направите нову страницу

Најлакши начин за почетак рада на новој страници је умножавање постојеће странице и кориштење је као предложак. То је оно што ћемо радити.

Направите копију индек.хтмл датотеку и преименовати абоут.хтмл.

Да бисте олакшали разликовање страница у овој раној фази, уредите нову абоут.хтмл датотеку и промените шта је у </code> таг. На пример, <code><title>О мени.

Сада идемо кроз датотеку по ред и одлучујемо шта ћемо оставити и шта ћемо уклонити:

  • Тхе навигација мени (испод) ). Вероватно желите да овај одељак остане нетакнут, само како би навигациони доживљај био уједначен на свим страницама.
  • Тхе главни јунак одељак (испод) ). Овај нам неће бити потребан према нашем пројекту изгледа. Можете наставити и избрисати цео одељак.
  • Тхе О томе одељак (испод) ). Поновно ћемо користити овај одељак као наш главни наслов.
  • Тхе услуге одељак, портфолио одељак, позив на акцију одељак и контакт одељак (све између и ). Ови одељци нам уопште нису потребни. Можете да наставите и да их обришете.
  • Тхе фоотер одељак и све испод њега (испод ). Ово ћемо морати да задржимо.

То чини наш тренутни код прилично једноставан. У основи је управо ово:



























Оно што овде недостајемо је главни садржај одељак. Да бисмо га изградили, поново ћемо употребити одељак.

Само напред и направите копију одељка о теми. Овај:

...


...

Сада промените прва два реда на ово:

Како нам не требају

заглавље тамо и

елемент, хајде да их само уклонимо Једино што је остало у целом овом блоку биће одломак текста. Овако:

Одломак текста.

Када сачувате датотеку и кренете до ње преко прегледача, видећете да у основи имате два врло слична блока један испод другог, са истом позадином боја:

о глави странице

Било би боље имати белу позадину у главном одељку са садржајем. Да бисмо је променили, једино што морамо да урадимо је да уклонимо бг-басиц класа из главног

таг. Другим речима, додајте ознаку у ово:

Тако је боље:

о глави странице 2

На страницу додајмо неке одважне параграфе да бисмо их додали још, плус можда поднаслов:

Лорем ипсум долор сит амет, посвећење адиписцинг елит...

Проин ферментум, фелис ​​темпор пхаретра лобортис, магна куам хендрерит долор...

Поднаслов

Лорем ипсум долор сит амет, посвећење адиписцинг елит...

Ево како ово изгледа на страници:

абоут вер 1

Ако вам се не свиђа текст у центру, једноставно уклоните тект-центер часове једне од

ознаке.

абоут вер 2

Ако желите да ставите још више осећања на ове блокове текста, можете да креирате нове ЦСС класе (као и пре) и доделите им одломке у блоку. Или можете завирити у тренутну таблицу стилова и видети које су класе већ постоје за ту сврху. Ево оних којима смо додељени

и

ознаке:

Лорем ипсум долор сит амет...

Проин ферментум, фелис ​​темпор пхаретра лобортис, магна куам хендрерит долор...

Поднаслов

А ево ефекта:

абоут вер 3

Још једна ствар коју ћемо овде учинити је додавање слике негде на страници.

Ево како изгледа пример слике са ознаком у ХТМЛ-у:


Прилично једноставно, зар не? Једини параметар је пут до датотеке са сликама. Да би ствари биле лепо организоване, можете ставити своју слику у имг поново директоријум (баш као што сте то имали и раније с том позадином). У таквом случају ће слика бити:


Како је речено, ознака слике у овој конкретној конфигурацији је прилично ограничена. Да би био мало рафиниранији, доделимо му неке Боотстрап класе. Посебно:


Ове две класе даће вашој слици заобљене углове, а такође ће осигурати да величина слике не прелази величину блока у коме се налази.

Сада можете да додате ову ознаку негде у одељак са главним садржајем на вашој страници. На пример, овде:

Лорем ипсум долор сит амет...

Проин ферментум, фелис ​​темпор пхаретра лобортис, магна куам хендрерит долор...

Поднаслов

И ево коначног ефекта на страници:

абоут вер 4

Ево наше странице о свом сјају:

о завршеној страници

3. Линк до нове странице

Са завршеном новом страном сада је повежемо са почетне странице ( индек.хтмл датотека). Наравно, најбоље место за додавање ове везе је у навигационом менију (испод ).

Конкретно, потражите ову линију:

О томе

Променићемо то на ово:

О томе

То је нешто о чему још нисмо разговарали, али оно таг је ознака везе у ХТМЛ-у. Помоћу ње можете се повезати на било коју веб страницу уношењем адресе те странице у хреф параметар. Текст везе – део везе на који се може кликнути – биће текст између отварања и затварања ознаке.

Када сада освежите почетну страницу, видећете ваш нови линк који упућује на отприлике страницу.

Додатна литература:

У овој фази сами сте направили једноставан веб сајт који се састоји од две странице – а Почетна страница и један О томе страна.

Оно што бисте сада требали учинити је испрати и поновити креирањем нових страница, подешавањем истих, додавањем садржаја и повезивањем свега из навигацијског менија.

Остале ствари које вреди радити док пролазите кроз ове кораке је даље учење ХТМЛ и ЦСС принципа, пролазак кроз списак, као и учење Боотстрапа и његових структура и часова. Неколико ресурса за то:

  • ХТМЛ5 варалица
  • ЦСС цхеатс схеет
  • Јавас цхеатс схеет
  • ХТМЛ туториал
  • Водич за покретање система за покретање система
  • Боотстрап цхеат схеет

Мастеринг Боотстрап, врло вероватно најбољи пут тренутно на изради оптимизованих и лепих веб локација са ХТМЛ и ЦСС.

Ако имате било каквих питања о креирању веб странице са ХТМЛ и ЦСС, не оклевајте да их пошаљете у коментарима.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map