ХТМЛ водич (за почетнике)

ХТМЛ водич за почетникеДа ли желите да научите неки ХТМЛ?


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

Данас у свету постоји најмање 1,7 милијарди веб локација. Практично све ове веб странице користе ХТМЛ на овај или онај начин.

П.С: Ако не желите да научите ХТМЛ и одмах почнете да правите веб страницу, без кодирања, погледајте овај водич: Како направити БЕСПЛАТНО веб страницу (без учења ХТМЛ-а).

Contents

Увод у ХТМЛ


Шта је ХТМЛ?

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

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

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

ХТМЛ верзије

Прво, брзо поништавање свих ХТМЛ верзија од када је ХТМЛ изумљен.

  • ХТМЛ 1.0: Ово је била баребонес верзија ХТМЛ-а и прво издање језика.
  • ХТМЛ 2.0: Ова верзија је представљена 1995. Постепено се развијала, омогућавајући додатне могућности укључујући пријенос датотека заснованих на форми, таблице, мапе слика на страни клијента и интернационализацију..
  • ХТМЛ 3.2: У покушају да осигура развој стандарда за Ворлд Виде Веб, Конзорцијум за Ворлд Виде Веб (В3Ц) основао је Тим Бернерс-Лее 1994. године. До 1997, они су објавили ХТМЛ 3.2..
  • ХТМЛ 4.0: Касније 1997. године В3Ц је објавио ХТМЛ 4.0 – верзију која је усвојила многе типове и атрибуте специфичне за претраживач.
  • ХТМЛ 4.0 је поново објављен са мањим изменама 1998. године.
  • ХТМЛ 4.01: Децембра 1999. године објављен је ХТМЛ 4.01.
  • КСХТМЛ: Спецификације су уведене 2000. године и препоручено је да се користи као заједнички стандард са ХТМЛ 4.01. Укључио је КСМЛ како би се осигурало да је код правилно написан и да се осигура интероперабилност између програмских језика.
  • ХТМЛ5: В3Ц је објавио ХТМЛ5 као препоруку у октобру 2014., а касније је објавио ХТМЛ 5.1 у новембру 2016.

Одабир ХТМЛ Едитора

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

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

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

Основни блокови ХТМЛ-а


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

Увод у тагове

Једном када уђете у ХТМЛ, прво што морате да схватите су ознаке. У основи, ознаке одвајају нормалан текст од ХТМЛ кода.

Сходно томе, када је у питању ХТМЛ, ознаке праве разлику између тога да ли је ваш документ приказан као обичан текст или “трансформисани текст”, што је у основи код текста који изгледа као да приказује низ ствари (хипервезе, слике, медији или друго методе форматирања) на основу онога што је упутно за приказ на основу тагова.

Погледајмо реч “Он је дечак” као пример:

  • У обичном тексту текста добијате: Он је дечак.
  • У подебљаном текстуалном формату добијате: Он је дечак

Да бисте постигли оно што имамо у подебљаном формату, морате користити таг.

чинећи текст подебљаним у хтмл-у

У сировом ХТМЛ-у имамо Он је дечак што прегледач на ово преводи: Он је дечак.

„Он је дечак“ такође би могао изаћи курзив.

То се постиже коришћењем таг.

израда курзивног текста у хтмл-у

Имамо: Он је дечак која тада излази као Он је дечак.

Хиперповезаност се постиже коришћењем таг.

прављење текста хипервезе у хтмл-у

У сировом ХТМЛ-у који имамо: Он је дечак који се показује као Дечак.

Неколико ствари би требало да схватите у вези са ознакама:

  • Ознаке су практично саставни део ХТМЛ-а – не можете без ХТМЛ-а без ХТМЛ-а! Ако сте запели на којој ознаци да користите, провјерите нашу ХТМЛ периодичну табелу.
  • Скоро свака отворена ознака мора бити затворена. Имајте на уму да постоје изузеци. Пример ознаке која не мора бити затворена је празна ознака, попут прекида линије:
    .
  • Ознаке су садржане у мање од („<”) and greater than (“>“) угаона заграда. Ознаке за затварање садрже задњу косу црту која постаје пре затварања имена ознаке. Пример отворене ознаке: . Пример затворене ознаке .
  • Свака ХТМЛ датотека почиње почетном ознаком а завршава се завршном ознаком. Први ред ХТМЛ датотеке требао би објавити врсту документа како би прегледач знао који ХТМЛ окус користите. Због тога видите ХТМЛ странице које почињу са „“Пре него што започне ХТМЛ код.

Пре додавања садржаја већина ХТМЛ датотека у основи изгледа овако:

ХТМЛ--

Одељак који следи Ознака обично садржи информације о документу као што су његов наслов, мета ознаке и где да пронађете његову ЦСС датотеку – садржај који се не види директно на страници прегледача. Одељак између „ и“(Који смо представљали„ ГЛАВНИ САДРЖАЈ “) се налази главни садржај ХТМЛ датотеке, који ће гледалац видети у прегледачу. То укључује све, од првог одломка до хипервеза до форматирања до мултимедије и свега осталог.

Увод у елементе

увод у елементе

У ХТМЛ-у се „елемент“ састоји од ознаке за отварање и затварање, као и од садржаја између ознака.

У „Он је дечак“(Подебљан) пример, ово имамо у ХТМЛ-у: Он је дечак. Текст “Он је дечак” окружен је отвореном и затвореном ознаком. Све, укључујући почетну ознаку, садржај и ознаку за затварање, је елемент.

Када се ознака отвори, уводи се садржај и ознака је затворена, имамо елемент.

Елемент може бити у основном облику или у сложеном облику. Зашто? Јер било шта између отворене и завршне ознаке као и тих ознака је елемент. То значи да можемо имати елементе унутар елемента. У нашем тренутном примеру, „он је дечак“ (Он је дечак) је елемент.

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

Увод у атрибуте

Док ХТМЛ документи у основи користе ознаке за све, понекад желимо комуницирати додатне информације унутар елемента. У овом случају користимо атрибут. Атрибут се користи за дефинисање карактеристика елемента, користи се унутар почетне ознаке елемента. Атрибути се састоје од имена и вредности.

Имајте на уму да се вредност атрибута смешта унутар наводника користећи формат Ваш текст.

пример атрибута

Пример:

Он је дечак

У овом примјеру упућујемо да је “Он дечак” поравнат у средини документа.

Први кораци са ХТМЛ-ом


Почетак рада са ХТМЛ-омПод претпоставком да данас желите да направите свој основни ХТМЛ документ, како започети? Од креирања наслова страница до креирања образаца, водићемо вас кроз како да започнете с ХТМЛ-ом у наставку.

Стварање ХТМЛ-а Елемент

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

Неки од елемената у укључују наслов који је креиран помоћу таг.</p><p><strong>Пример</strong>:</p><pre><title>Ово је наслов наше странице

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

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

Прављење наслова у ХТМЛ-у

креирање наслова у хтмл-у

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

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

У ХТМЛ-у постоји шест ознака наслова:

до
, са

ознаку која означава најважније заглавље и
ознака која означава најмање важно заглавље.

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

Пример ХТМЛ наслова:

  • Ово је ваш први ХТМЛ наслов

    (Највећа)

  • Ово је ваш други ХТМЛ наслов

  • Ово је ваше треће ХТМЛ заглавље

  • Ово је ваше четврто ХТМЛ заглавље

  • Ово је ваше Пето ХТМЛ заглавље
  • Ово је ваше шесто ХТМЛ заглавље

Стварање параграфа

креирање одломака у ХТМЛ-у

Следећи корак је почетак стварања одломака. Одломци се могу креирати помоћу

таг.

Пример:

Ово је ваш први пасус.

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

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

Пример:

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

Ово неће изаћи на следећи начин:

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

Уместо тога, испашће овако:

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

Дакле, како раставити текстове на нове редове да би се показало овако:

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

Коришћењем прекида линија.

Пример:

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

Уз то је важно напоменути да је прекид линије (
) ознака је празна ознака, тако да је не морате затварати.

Форматирање текста у ХТМЛ-у

форматирање текста у ХТМЛ-у

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

Коришћење подебљано: Он је дечак излази као Он је дечак

Коришћење курзива: Он је дечак излази као Он је дечак

Подвлачење текста: Он је дечак излази као Он је дечак. Вреди напоменути да ознака је застарјела у ХТМЛ 4.01 и редефинирана је да представља стилски различит текст у ХТМЛ5. Као резултат тога, препоручује се коришћење ЦСС-а за означавање текста који треба подвући. Будући да је овај чланак основни водич, ми га водимо једноставним.

Коришћење претплате: Он је дечак излази као Он је дечак

Користећи надкрипт: Он је дечак излази као Он је дечак

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

Наручени и ненаређени пописи

Пре или касније мораћете да направите спискове. Листе могу бити наручене (тј. Нумерисане) или неуређене (тј., Нумерисане).

Ево примера наручене листе:

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

Ево како да га креирате:

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

Ево примера неоригроване листе:

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

Ево како да га креирате:

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

Ако то већ није очигледно. Ево поделе:

Тхе

  • Ознака се користи за означавање сваке ставке на листи. Када правите листу, можете да користите
      ознака да назначи наручену листу („о” = наредјена и “л” = листа) или