Како направити властиту веб страницу

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

Како направити властиту веб страницу

  • Шта је ХТМЛ?
  • Захтеви
    • Пример 1:
  • ХТМЛ тагови
  • ХТМЛ Елементс
  • Основне ХТМЛ ознаке за памћење
    • Пример 2
  • ХТМЛ атрибути и вредности
    • Пример 3
  • Ознаке боја
    • Пример 4
  • Форматирање текста
    • Пример 5
  • Ознаке ХТМЛ одељења
    • Пример 6
  • Ознаке слике
    • Пример 7
  • Повезивање ознака
    • Пример 8
  • Ознаке табеле
    • Пример 9
  • Ознаке ХТМЛ оквира
    • Пример 10
  • ВИСИВИГ Софтваре

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

Шта је ХТМЛ?

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

Два најчешћа начина за покретање веб-локације су:

  • Креирање сопствених кодова у једноставном уређивачу текста и њихово чување као .хтм фајла
  • Користећи ХТМЛ генератор софтвера

Захтеви

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

За оне који користе МАЦ, отворите нови СимплеТект документ.

За кориснике ОСКС- а, отворите ТектЕдит и извршите следеће измене:

1. Отворите мени "Формат" и изаберите "Обичан текст"

2. У менију "Тект Едит", отворите прозор "Преференцес" и изаберите опцију "Игнориши команде обогаћеног текста у ХТМЛ датотекама".

Пример 1:

Када имате празан документ, можете почети тако што ћете уписати:

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

Овде ће се појавити сви ваши садржаји

Белешка:

1. Увек сачувајте своје документе са .хтм или хтмл екстензијом да бисте их приказали у вашем веб претраживачу. (нпр. индек.хтм).

2. Да бисте уредили изворни документ, изаберите опцију "Приказ" на траци са алаткама у прозору прегледача и изаберите "Извор".

3. Не заборавите да сачувате сваку промену у документу.

4. Да бисте прегледали измене у документу у прозору прегледача, освежите страницу помоћу тастера Ф5.

ХТМЛ тагови

ХТМЛ ознака је дефинисана као ознака која се додаје у ХТМЛ документ како би пружила више информација о садржају. Између заграда се поставља ХТМЛ ознака и потребна јој је завршна ознака. (на пример ).

ХТМЛ Елементс

Елементи су ознаке за означавање које се користе за форматирање неких дијелова веб странице. Пример ХТМЛ елемента је ознака која се користи за подебљавање текста приказаног у прегледачу.

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

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

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

дефинише сав садржај који ће бити приказан у вашем претраживачу.

Основне ХТМЛ ознаке за памћење

Хеадингс

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

Параграфи

Одломци се користе за раздвајање блокова текста на вашој веб страници. У ХТМЛ-у су дефинисани са

таг. Параграф ће имати почетну ознаку

и завршну ознаку

.
  • Овај одељак има дефинисане ХТМЛ ознаке

Преломи линија

У ХТМЛ-у, преломи редова НЕ захтевају завршну ознаку. Дакле, они су једноставно дефинисани са

таг.

  • Овај одељак има дефинисане ХТМЛ ознаке

Цомментс

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

Пример 2

Све о ХТМЛ-у

ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

ХТМЛ атрибути и вредности

Атрибути ХТМЛ су информације које се додају елементима и које се користе да укључе одређену карактеристику у ХТМЛ елементе. ХТМЛ атрибути се увек пишу заједно са вредношћу (нпр. Наме = "валуе" ) и стављају се на почетну ознаку ХТМЛ елемента.

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

  • ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

    Ознаке боја

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

    У ХТМЛ-у можете користити и кодове боја да бисте добили одређене боје помоћу хексадецималних кодова. Такозвани хексадецимални триплети одговарају црвеној, зеленој и плавој боји (РГБ). Дакле, ознака у боји у хексадецималном ће изгледати нешто слично . Кодове и имена боја можете добити слиједећи овај линк: //ввв.цомпутерхопе.цом/хтмцолор.хтм

    Такође можете користити ознаке у боји да бисте променили боју позадине вашег веб сајта додавањем атрибута БГЦОЛОР . Стога, ће променити боју позадине из подразумеване беле боје.

    Пример 4

    Све о ХТМЛ-у

    .

    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

    Белешка:

    1. Препоручује се да не изаберете маркантне боје као што су жута или ружичаста за ваш текст јер ове боје имају тенденцију да сметају очима

    2. Такође, покушајте да користите максимално 4 нијанса боје која одговара атмосфери вашег веб сајта ради бољег хармонизовања резултата.

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

    Форматирање текста

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

    1. Болд Таг

    Овај текст ће бити подебљан

    2. Италиц Таг

    Овај текст ће бити у курзиву

    3. Подвући ознаку

    Овај текст ће бити подвучен

    4. Нагласите ознаку

    Ово ће нагласити ваш текст

    5. Јака ознака

    Овај текст ће бити јак

    6. Биг Таг

    Ово ће дефинисати велики текст

    7. Мала ознака

    Ово ће дефинисати мали текст

    8. Ознака индекса

    Овај текст ће бити индексиран

    9. Суперсцрипт Таг

    Овај текст ће бити натписан

    10. Средишња ознака

    Овај текст ће бити центриран

    11. Лева ознака

    Овај текст ће се приказати на левој страни екрана

    12. Десна ознака

    Овај текст ће се приказати на десној страни екрана

    13. Унордеред Лист Таг

    • Ово је неуређена листа
    • Ово је неуређена листа

    14. Наређена листа ознака

    1. Ово је број 1 на мојој листи
    2. Ово је број 2 на мојој листи

    Белешка:

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

    2. Међутим, увек затворите прву ознаку коју сте задњи пут отворили. У горњем примеру, је отворен ПРВО, пре таг, али је затворен ЛАСТ.

    Пример 5

    Све о ХТМЛ-у

    .

    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

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

    • текст,
    • имагес,
    • звуци,
    • оквири
    • анимација на вашим страницама претраживача.

    Два уобичајена начина за покретање веб-локације су:

    1. креирати властите кодове у једноставном уређивачу текста и спремити их као .хтм датотеку. или
    2. користите ХТМЛ генератор софтвера.

    Ознаке ХТМЛ одељења

    Хоризонтално правило

    Хоризонтална правила се користе за поделу или поделу делова ваше веб странице. Тхе


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

    На пример


    или

    Пуна линија

    Тхе


    таг се користи за креирање чврсте линије. Мало се мења у односу на хоризонталну ознаку правила јер производи линију без 3Д изреза генерисаног од стране
    таг.

    Пример 6

    Све о ХТМЛ-у

    .


    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

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

    • текст,
    • имагес,
    • звуци,
    • оквири
    • анимација на вашим страницама претраживача.


    Два уобичајена начина за покретање веб-локације су:

    1. креирати властите кодове у једноставном уређивачу текста и спремити их као .хтм датотеку. или
    2. користите ХТМЛ генератор софтвера.

    Ознаке слике

    ХТМЛ документи вам омогућавају да убаците слике помоћу ознака слика. Можете да прегледате слику из УРЛ-а на мрежи или са свог рачунара. Ознака слике означава "извор слике"; стога, путању слике треба дефинисати након атрибута. Ако се слика налази у истој фасцикли као изворни документ, нема потребе да уносите цео директоријум путање.

    На пример

    или или

    Ознака поравнања

    Још једном, можете користити атрибут АЛИГН за приказ слике у центру, десној или лијевој страни прегледника.

    Ег1

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

    Ег2

    Величина слике

    Величина приказане слике може бити измењена помоћу атрибута ВИДТХ и ХЕИГХТ. Можете да користите проценат или пикселе да бисте одредили величину слике.

    Ег1

    Ег2

    Имаге Бордер

    Ако желите да убаците границу у слику, можете користити атрибут БОРДЕР да то урадите.

    На пример

    Рунароунд Спаце

    Рунароунд простор се односи на просторну празнину око слике. Ово је врло корисна ознака када имате текст око слике. Дефинише се коришћењем атрибута ВСПАЦЕ за горњу и доњу страну и ХСПАЦЕ атрибут се користи за леву и десну страну.

    На пример

    Пример 7

    Све о ХТМЛ-у

    .


    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

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

    • текст,
    • имагес,
    • звуци,
    • оквири
    • анимација на вашим страницама претраживача.

    Два уобичајена начина за покретање веб-локације су:

    1. креирати властите кодове у једноставном уређивачу текста и спремити их као .хтм датотеку. или
    2. користите ХТМЛ генератор софтвера.


    Цолор Цодес

    Можете користити хексадецималне кодове у боји које пружа Тхеодора да бисте креирали сопствену атмосферу веб локације

    Ово је пример који имате са атрибутом вспаце и хспаце

    Повезивање ознака

    У ХТМЛ-у, повезивање ознака се користи за прелазак са једног дела на други или са једне странице на другу. Називају се Интерни линкови ако вам дозвољавају да прелазите из једне секције или странице своје веб локације у другу, а Ектернал Линк када отварају нови прозор прегледника са друге веб локације. Главна предност повезивања ознака је то што вам омогућавају да креирате динамички веб сајт уместо да креирате веб страницу која се помера.

    Ектернал Линк

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

    Интерна веза

    Постоје два специфична начина за уметање интерне везе:

    1. Да пређете са тренутне странице на другу страницу на истом веб сајту

    2. Да пређете из тренутног дела странице на други одељак на истој страници.

    Да бисте могли да прелазите из једног дела у други, прво треба да дате име одељку тако да га таг може лоцирати када се позива. На пример, ако одељак који се односи на ХТМЛ везе мора бити убачен у горњи део веб странице, одмах изнад наслова "ХТМЛ везе", убаците ознаку . Вредност "линкова" односи се на одељак који мора бити лоциран; стога, ако се дио веб-странице базира на мачкама, уметните ознаку мало изнад наслова за мачке.

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

    Пример 8

    Све о ХТМЛ-у

    Цолор Цодес

    Повезивање ознака


    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

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

    • текст,
    • имагес,
    • звуци,
    • оквири
    • анимација на вашим страницама претраживача.

    Два најчешћа начина за покретање веб-локације су:

    1. креирати властите кодове у једноставном уређивачу текста и спремити их као .хтм датотеку. или
    2. користите ХТМЛ генератор софтвера.


    Цолор Цодес

    Можете користити хексадецималне кодове у боји које пружа Тхеодора да бисте креирали сопствену атмосферу веб локације

    Ово је пример који имате са атрибутом вспаце и хспаце

    Корисно је да посетите Мицрософтову веб страницу кликом на овај линк


    Повезивање ознака

    Овај одељак ће дискутовати о важности повезивања ознака на вашем веб сајту.

    Белешка:

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

    Таргет Виндов

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

    Ознаке табеле

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

    Уводна ознака

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

    Величина табеле се може променити коришћењем

    таг. Можете или користити пикселе или проценат да бисте променили величину табеле.

    Можете користити ознаку

    на пример, да направите невидљиву границу у вашем претраживачу.

    Тхе

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

    Тхе

    таг се користи за уметање размака између унутрашње и спољашње линије граница табеле.

    Табела се састоји од ћелија које су дефинисане колонама и редовима у табели. Ћелија ће бити простор у који ће се убацити ваш садржај. Ознака колоне је дефинисана као

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

    Такође можете поравнати ваше редове и колоне додавањем атрибута АЛИГН у ваше ознаке. Дакле, да бисте поравнали одређени ред, на пример, убаците ознаку

    Да бисте поравнали ћелију, можете користити атрибут ВАЛИГН .

    ће поставити ћелију у горњи центар ваше странице.

    Да бисте проширили колону, можете користити ознаку

    да бисте подесили број колона које ћелија треба да обухвати. Приметите да је подразумевана вредност постављена на 1.

    Такође, да бисте проширили ћелију на више редова, користите

    таг.

    Пример 9

    Све о ХТМЛ-у

    Цолор Цодес

    Ознаке табеле

    ХТМЛ је скраћеница за ХиперТект Маркуп Лангуаге

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

    • текст,
    • имагес,
    • звуци,
    • оквири
    • анимација на вашим страницама претраживача.

    Два уобичајена начина за покретање веб-локације су:

    1. креирати властите кодове у једноставном уређивачу текста и спремити их као .хтм датотеку. или
    2. користите ХТМЛ генератор софтвера.

    Цолор Цодес

    Можете користити Хексадецималне кодове боја које обезбеђује Тхеодора да креирате сопствену атмосферу.

    Више текста можете додати овдје.

    Више текста можете додати овдје.

    Више текста можете додати овдје.

    Више текста можете додати овдје.

    Више текста можете додати овдје.

    Табле тагс

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

    Хеадинг

    Ово је други део садржаја

    Колона 1 Колона 2 Колона 3
    Покривање ћелија у 3 реда (2. и 3. спајање) Покривање ћелије у 2 реда (спојена 1. и 2. ћелија) 1ст Целл
    2нд Целл
    3рд Целл
    3рд Целл 4тх Целл

    Ознаке ХТМЛ оквира

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

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

    Пример 10

    Испробајте ознаке оквира

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

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

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

    ознака ће се користити за постављање границе на ваше оквире. Постављање на 0 осигурава компатибилност са свим прегледницима.

    ће поставити размак између најближих оквира.

    ће поставити ширину простора на обје стране оквира. Величину треба поставити у пикселима.

    поставиће величину горње и доње маргине у пикселима.

    Тхе таг ће моћи вертикални или хоризонтални клизач на вашем оквиру. Његова вредност мора бити постављена на "да", "не" или "ауто".

    ВИСИВИГ Софтваре

    Постоје софтверски програми названи ВИСИВИГ (оно што видите је оно што добијате), који кодирају за вас, међутим то не би требало да вас спречи да научите минимум хтмл концепта да бисте избегли непријатна изненађења! Са овим софтвером, стављате текст и слике, а софтвер генерише одговарајући ХТМЛ код истовремено. Такође ће олакшати рад на укључивању анимација или скрипти. Постоје, на пример:

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

    ГоЛиве Пхотосхоп едитор

    За бесплатан ВИСИВИГ можемо поменути:

    • Матизха сублиме
    • //блуегриффон.орг/пагес/ДовнлоадБлуеГриффон
    • Магума студио
    • ХТМЛ кит
    • 1ст Паге 2000
    Претходни Чланак Sledeći Чланак

    Топ Савети