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

Последње ажурирано на КСНУМКС Маи КСНУМКС

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

Проблем са овим је то што ако не знате неколико основа, лако можете да уђете у стварне проблеме на свом блогу и да унајмите драгог програмера да бисте решили оно што може бити мали проблем. Не само то, већ креирање промјена на вашем блогу, као што је додавање прилагођеног виџета текста, захтијева мало знања.

А ако доживите распоред садржаја не изгледа исправно, ХТМЛ знање вам може вратити на прави пут.

Ево неких наших верзија ХТМЛ водича за блогере и не-тецхие онлине власнике бизниса.

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

Почетни К & А

КСНУМКС- Шта је ХТМЛ?

ХТМЛ је скраћеница од Hипер Tлок MАркупе Lангуаге. То је стандардни језик за означавање садржаја за веб прегледаче.

ХТМЛ представља "Елементи". Елементи су познати и као "тагови".

КСНУМКС- Зашто је ХТМЛ потребан?

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

Зато вам је потребан ХТМЛ.

КСНУМКС- Да ли је ХТМЛ осјетљив на слово?

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

Кораци за креирање првог ХТМЛ фајла

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

Потребан вам је Едитор за кодове. Добар кодни уредник олакшаће писање и организовање великих кодова.

Користим и препоручујем Нотепад + + (слободан и отворени извор) за писање веб језика. Постоје и други уредници које можете користити Сублиме Текст, Атом итд

Ево шта треба да урадите:

  1. Инсталирајте уредјај кода
  2. Отвори је
  3. Креирајте нову датотеку
  4. Сачувајте га као .хтмл датотеку

Спреман си да идеш!


Го Топ

КСНУМКС- Здраво свијет!

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

kod:

<! ДОЦТИПЕ хтмл> <хтмл> <хеад> <титле> Моја прва веб страница </титле> </хеад> <боди> <п> Здраво Свет! </п> </боди> </хтмл>

Излаз:

Цонгратс! Створили сте своју прву ХТМЛ датотеку. Не морате то разумјети у овом тренутку. Ускоро ћемо то покрити.

Разумевање ХТМЛ структуре

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

Покушајмо то схватити из "Хелло Ворлд!" Код. Следећи елементи су обавезни дијелови за сваку ХТМЛ датотеку.

  • <! ДОЦТИПЕ хтмл> = То је декларација за претраживач да је ово ХТМЛ датотека. Морате га специфицирати прије <хтмл> таг.
  • <хтмл> </ хтмл> = Ово је основни елемент ХТМЛ датотеке. Све што пишете иде између <хтмл> и </ хтмл>.
  • <хеад> </ хеад> = Ово је мета информација за претраживач. Кодови унутар ове ознаке немају визуелни излаз.
  • <боди> </ боди> = Ово је део који веб претраживач чини. Оно што тачно видите на веб локацији је рендеринг кодова између <боди> и </ боди>.


Го Топ

КСНУМКС- ХТМЛ ознаке

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

ХТМЛ ознаке обично имају отвор и ознаку за затварање. Отворена ознака има кључну реч окружену знаком мање од (<) и знаком већим од (>). Затварајућа ознака има све исте, али екстремно кретање (/) после знака мање од (<).

(КСНУМКСа) Хеад Тагс

Све ознаке главе прелазе између <хеад> и </ хеад>. Они садрже мета информације за веб прегледач и претраживаче. Они углавном немају визуелни излаз.

<титле> </ титле>

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

kod:

<титле> Моја прва веб страница </ титле>
Ознака наслова се појављује на врху прегледача.

<линк>

Линк таг повезује ХТМЛ страницу са вањским ресурсима. Његова главна употреба је повезивање ХТМЛ странице са ЦСС стиловима. То је самозапиравајућа ознака и не треба завршетак </ линк>. Овде рел означава релацију са датотеком и срц значи извор.

kod:

<линк рел = "стилесхеет" типе = "тект / цсс" срц = "стиле.цсс">

<мета>

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

kod:

<мета наме = "десцриптион" цонтент = "Ово је кратак опис који претраживачи показују"

<сцрипт> </ сцрипт>

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

kod:

<сцрипт типе = "тект / јавасцрипт" срц = "сцриптс.јс"> </ сцрипт>

<носцрипт> </ носцрипт>

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

kod:

<носцрипт> <п> Алас! Скрипте су онемогућене. </ П> </ носцрипт>

(КСНУМКСб) Ознаке тела

Све ознаке тела иду између <боди> и </ боди>. Имају визуелне излазе. Овде се највише ради. Морате користити ове ознаке да бисте структурирали садржај главне странице.

<хКСНУМКС> </ хКСНУМКС> на <хКСНУМКС> </ хКСНУМКС>

Ово су ознаке наслова. Најважнији наслов је означен са <хКСНУМКС> а најважнији са <хКСНУМКС>. Требали бисте их користити у тачној хијерархији.

kod:

<хКСНУМКС> Ово је хКСНУМКС наслов </хКСНУМКС> <хКСНУМКС> Ово је хКСНУМКС наслов </хКСНУМКС> <хКСНУМКС> Ово је хКСНУМКС наслов </хКСНУМКС> <хКСНУМКС> Ово је хКСНУМКС наслов </хКСНУМКС> <хКСНУМКС > Ово је хКСНУМКС наслов </хКСНУМКС> <хКСНУМКС> Ово је хКСНУМКС наслов </хКСНУМКС>

Излаз:

Форматирање ознака

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

kod:

<п> Можете означити текст на много начина. </п> <п> Можете <стронг> подебљано </стронг>, <у> подвући </у>, <ем> италиц </ем>, <означити > означи </марк>, <суб> субсцрипт </суб>, <суп> суперсцрипт </суп> и још много тога! </п>

Излаз:

<! - ->

Можете да одступите од неких кодова од коришћења ознаке за коментаре. Код ће се појавити у изворном коду, али неће бити приказан. Главна употреба ове ознаке је за креирање документације хтмл датотека за будућу референцу.

primer:

<! - <п> Можете да коментаришете било који код тако што ћете их на овај начин окружити </ п> ->

(КСНУМКСц) Друге важне ХТМЛ ознаке

<а> </а>

Сидро је непроцењива ознака која се користи скоро свуда. Нећете видети веб страницу на мрежи без најмање једне везе за сидро.

Структура је иста. Има отворени <а> и завршни део </а>. Текст који желите сидрати иде између <а> и </а>.

Постоје неки атрибути који дефинишу где и како корисник иде након што кликне на њега.

  • ахреф = "" = Дефинише одредишну везу. Веза иде између двоструких цитата.
  • таргет = "" = Дефинише да ли ће се УРЛ отворити на новом картици прегледача или на истој картици. таргет = "_ бланк" је за нову табу и циљ = "_ селф" је за отварање на истом језичку.
  • рел = "" = Одређује однос тренутне странице са повезаном страницом. Ако не верујете у повезану страницу, можете дефинирати рел = "нофоллов".

kod:

<п> <а таргет="_бланк" хреф="хттпс://ввв.гоогле.цом/"> Кликните овде </а> да бисте отишли ​​на Гоогле. Отвориће се на новој картици. </п> <п> <а таргет="_селф" хреф="хттпс://ввв.гоогле.цом/"> Кликните овде </а>. Такође ће вас одвести на Гоогле, али ће се отворити на тренутној картици. </п>

Излаз:

<имг />

Ознака слике је још једна важна ознака без које не можете да замислите многе веб локације засноване на сликама.

<имг /> је самозапиравајућа ознака. Не треба традиционално затварање као </ имг>. Постоје неки атрибути који морате да знате пре него што их правилно употребите.

  • срц = "" = Ово је за дефинисање изворне везе слике. Ставите везу између двоструких цитата.
  • алт = "" = То представља алтернативни текст. Када се ваша слика не учита, овај текст ће корисницима пружити идеју о недостајућој слици.
  • видтх = "" = Дефинише ширину слике у пикселима.
  • Висина = "" = Дефинише висину слике у пикселима.

primer:

<п> Ово је Гооглеплек у августу КСНУМКС. </п> <п> Ова слика има ширину од КСНУМКС пиксела и висину од КСНУМКС пиксела. </п> <имг срц = "хттпс: //уплоад.викимедиа. орг / википедиа / цоммонс / КСНУМКС / КСНУМКСе / Гооглеплек-Патио-Ауг-КСНУМКС.ЈПГ "алт =" Седиште Гоогле-а у августу КСНУМКС "видтх =" КСНУМКС "хеигхт =" КСНУМКС "/>

Излаз:

Савети: Желите ли убацити слику која се може кликнути? Обмотите шифру слике помоћу ознаке <а>. Види како иде.

<ол> </ ол> или <ул> </ ул>

Ознака листе је за креирање листе ставки. <ол> означава поруџбане листе (нумерисана листа) и <ул> означава неуређене листе (метке).

Ставке листе унутар <ол> или <ул> означене су са <ли> </ ли>. ли је листа. Можете имати толико <ли> што желите унутар ознаке родитеља <ол> или <ул>.

kod:

<п> Ово је наручена листа: </п> <ол> <ли> Ставка КСНУМКС </ли> <ли> Ставка КСНУМКС </ли> <ли> Ставка КСНУМКС </ли> </ол> <п> Ово је неуређена листа: </п> <ул> <ли> Ставка КСНУМКС </ли> <ли> Ставка КСНУМКС </ли> <ли> Ставка КСНУМКС </ли> </ул>

Излаз:

<табле> </ табле>

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

<табле> </ табле> је спољашњи родитељски код. У овој ознаци, <тр> означава ред таблице, <тд> означава стуб колоне и <тх> означава заглавље табеле.

kod:

<табле> <тр> <тх> Име </тх> <тх> Старост </тх> <тх> Професија </тх> <тр> <тд> Јо <тд> КСНУМКС </тд> < тд> Бизнисмен </тд> </тр> <тр> <тд> Керол </тд> <тд> КСНУМКС </тд> <тд> Сестра </тд> </тр> <тр> <тд> Симоне < / тд> <тд> КСНУМКС </тд> <тд> Професор </тд> </тр> </табле>

Излаз:

Напомена: Вредности унутар првог <тр> су наслове. Дакле, користили смо <тх> који примењује смел текстуални ефекат на текст.

Груписање табела

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

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

Ознаке за групу таблица су:

  • <тхеад> </ тхеад> = За завијање наслова табеле. Одштампаће се на сваку подељену страницу табеле.
  • <тбоди> </ тбоди> = За завијање главних података табеле. Можете имати толико <тбоди> колико вам треба. Ознака <тбоди> означава посебну групу података.
  • <тфоот> </ тфоот> = За омотавање информација о подножју табеле. Одштампаће се на сваку подељену страницу табеле.

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

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

kod:

<табле> <тхеад> <тр> <тх> Име </тх> <тх> Старост </тх> <тх> Профессион </тх> </тр> </тхеад> <тбоди> <тр> <тд> Јохн </тд> <тд> КСНУМКС </тд> <тд> </тд> </тр> <тр> Царол </тд> <тд> КСНУМКС </тд> <тд> Нурсе </> тд> </тр> <тр> <тд> Симоне </тд> <тд> КСНУМКС </тд> <тд> Професор </тд> </тр> </тбоди> <тфоот> <тр> <тд> Тотал Персонс: </тд> <тд> КСНУМКС </тд> </тр> </тфоот> </табле>

Излаз:

<форм> </ форм>

Елемент образца се користи за креирање интерактивних форме за веб странице. ХТМЛ облик садржи неколико узастопних елемената. На пример: <лабел>, <инпут>, <тектареа> итд.

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

Можете користити било који од метода, добити или објавити. Гет шаље све информације у формату УРЛ-а у којем Пост шаље информације у телу поруке.

Постоји много врста инпута за форме. Врло основни тип улаза је текст. Пише се као <инпут типе = "тект">. Врсте могу бити и радио, цхецк бок, е-пошта и тако даље. Требало би да постоји улазни тип уноса на дну за стварање дугмета за слање.

Ознака <лабел> се користи за креирање етикета и повезивање са улазима. Правило повезивања наљепница са улазима је да имају исту вриједност у атрибуту атрибута етикете и ид = "" атрибута уноса.

kod:

<форм ацтион = "#"> <лабел фор = "фирстнаме"> Име: </лабел> <инпут типе = "тект" ид = "фирстнаме"> <бр> <лабел фор = "ластнаме"> Презиме: </лабел> <инпут типе = "тект" ид = "ластнаме"> <бр> <лабел фор = "био"> Кратки био: </лабел> <тектареа ид = "био" ровс = "КСНУМКС" цолс = " КСНУМКС "плацехолдер =" Унесите вашу биографију овде ... "> </тектареа> <бр> <лабел> Пол: </лабел> <бр> <лабел фор =" мале "> Мале </лабел> <тип уноса = "радио" наме = "гендер" ид = "мушки"> <бр> <ознака за = "женски"> Женски </лабел> <инпут типе = "радио" наме = "гендер" ид = "фемале"> <бр > <инпут типе = "субмит" валуе = "Субмит"> <форм>

Излаз:

Напомена: показао сам акцију на нулту вриједност јер није био повезан са било којим сервером за обраду информација.


Го Топ

КСНУМКС- ХТМЛ атрибут

Атрибути су једна врста модификатора за ХТМЛ ознаке. Додају нове конфигурације ХТМЛ ознакама.

Атрибут изгледа као атрибутенаме = "" и налази се у отварању ХТМЛ ознаке. Вредност атрибута иде између двоструких цитата.

ид = "" и класа = ""

ид и класа су идентификатори ХТМЛ ознака. Различита имена су означена различитим ХТМЛ елементима користећи идентификаторе. Можете користити један идентификатор класе за више елемената. Али не можете користити један ид идентификатор за више елемената.

kod:

<хКСНУМКС цласс = "хеадинг"> Ово је главни наслов </ хКСНУМКС>

хреф = ""

хреф означава Хипертект Референце. Они упућују кориснике на референтне везе. <а> <а хреф="хттп://ввв.б92.нет/индек.пхп?оптион=цом_цонтент&таск=цонтент&таск=цонтент&таск=виев&ид=1&Итемид=2 »

kod:

<а хреф="хттпс://ввв.гоогле.цом/"> Гоогле </а>

срц = ""

срц означава извор. Она дефинише извор медија или ресурса који користите у ХТМЛ датотеки. Извор може бити локална или трећа страна.

kod:

<имг срц = "хттпс://уплоад.викимедиа.орг/википедиа/цоммонс/КСНУМКС/КСНУМКСе/Гооглеплек-Патио-Ауг-КСНУМКС.ЈПГ" />

алт = ""

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

kod:

<имг срц = "хттпс://уплоад.викимедиа.орг/википедиа/цоммонс/КСНУМКС/КСНУМКСе/Гооглеплек-Патио-Ауг-КСНУМКС.ЈПГ" алт = "Гоогле Хеадкуартерс" />

стиле = ""

атрибут стила се често користи у ХТМЛ ознакама. Ради ЦСС у ХТМЛ тагу. Ваше стилске особине пролазе између двоструких цитата.

kod:

<хКСНУМКС стиле = "цолор: ред"> Ово је још један наслов </ хКСНУМКС>


Го Топ

КСНУМКС- Кодни дисплеј: Блок вс Инлине

Неки елементи увек почињу на новој линији и узимају пуно доступну ширину. Ово су елементи "Блок".

Пример: <див>, <п>, <хКСНУМКС> - <хКСНУМКС>, образац итд.

Неки елементи узимају само потребан простор и не почињу на новој линији. Ово су елементи "Инлине".

Пример: <а>, <спан>, <бр>, <стронг>, <имг> итд.

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

kod:

<! ДОЦТИПЕ хтмл> <хтмл> <хеад> <титле> Моја прва веб страница </титле> </хеад> <боди> <хКСНУМКС> Ово је ХКСНУМКС наслов. Има приказ Блока. </хКСНУМКС> <хКСНУМКС> Ово је <у> друго </у> ХКСНУМКС наслов. Овде подвучена ознака има уграђени приказ. </хКСНУМКС> </боди> </хтмл>

Излаз:


Го Топ

КСНУМКС- Двоструки цитат против појединачне цитате у ХТМЛ-у

Ово питање је врло очигледно. Шта треба да користите у ХТМЛ-у? Јединствени цитат или двоструки цитат? Изгледа да људи користе оба, али која је тачна?

У ХТМЛ-у, појединачни цитат и двоструки цитат су исти. Они не праве разлику у излазу.

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


Го Топ

КСНУМКС- Семантички ХТМЛ против не-семантичног ХТМЛ-а

Семантички ХТМЛ је најновија верзија ХТМЛ-а, која се такође назива ХТМЛКСНУМКС. То је развијена верзија не-семантичног ХТМЛ-а и КСХТМЛ-а.

Зашто је ХТМЛКСНУМКС бољи? У претходним верзијама, ХТМЛ елементи су идентифицирани по именима ид / класа. На примјер: <див ид = "артицле"> </ див> се сматрао чланком.

У ХТМЛКСНУМКС-у, ознака <артицле> </ артицле> представља себе као чланак без потребе за идентификацијом ид / цласс.

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

Овде је листа неких популарних тагова ХТМЛКСНУМКС:

  • <маин> </ маин> = Ово је за омотавање главног садржаја који желите приказати својим гледаоцима.
  • <хеадер> </ хеадер> = Ово је за означавање дела заглавља садржаја као што је наслов или аутор мета.
  • <артицле> </ артицле> = Он одређује кориснички дефиниран или независни садржај вашим гледаоцима.
  • <сецтион> </ сецтион> = Може груписати било који код, као што су заглавље, подножје или бочна трака. Можете рећи, то је семантички облик див.
  • <фоотер> </ фоотер> = Овде је ваш садржај фоотер-а, одрицање од одговорности или текст аутора.
  • <аудио> </ аудио> = Омогућава вам да убаците аудио датотеке без проблема са додатком.
  • <видео> </ видео> = Као <аудио>, можете убацити видео записе помоћу ове ознаке без проблема са додатком.

Једноставна ХТМЛКСНУМКС структура би изгледала овако:

<! ДОЦТИПЕ хтмл> <хтмл> <хеад> <мета цхарсет = "утф-КСНУМКС" /> <титле> Моја прва веб страница </титле> </хеад> <боди> <хеадер> <нав> <ул> < ли> Мени КСНУМКС </ли> <ли> Мени КСНУМКС </ли> </ул> </нав> </хеадер> <маин> <артицле> <хеадер> <хКСНУМКС> Ово је наслов чланка </ хКСНУМКС> <п> Објавио / ла Јохн Дое </п> </хеадер> <п> Садржај чланка иде овде </п> </артицле> </маин> <фоотер> <п> Ауторско право КСНУМКС Јохн Дое </ п> </фоотер> </боди> </хтмл>


Го Топ

КСНУМКС - ХТМЛ Валидатион

Већина веб професионалаца потврђује свој код након што га заврши. Зашто је потребно валидирати код када ради добро?

Постоје два разлога за валидацију ваших кодова:

  1. То ће вам помоћи да направите свој код цросс-бровсер и цросс-платформ компатибилан. Код можда не приказује грешку у вашем тренутном прегледачу, али можда у неком другом. Валидација кода ће то поправити.
  2. Претраживачи и други веб програми могу зауставити пописивање ваше странице ако имате грешке у њему. Можете потврдити кроз валидацију да немате никакве велике грешке.

ВКСНУМКСЦ Валидатор је најпопуларнија услуга за валидацију кодова. Имају неколико метода за валидацију кодова. Можете да отпремите датотеку или директно унесете код у свој механизам валидације.


Го Топ

КСНУМКС - Други корисни ресурси

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

Ево неколико корисних ресурса за вас: