17 једноставних примера ХТМЛ кода које можете научити за 10 минута

17 једноставних примера ХТМЛ кода које можете научити за 10 минута

Иако су савремене веб странице углавном изграђене са интерфејсом прилагођеним кориснику, корисно је знати неки основни ХТМЛ. Ако знате следећих 17 примера ХТМЛ ознака (и неколико додатака), моћи ћете да креирате основну веб страницу од нуле или да прилагодите код који је креирала апликација попут ВордПресс -а.





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



1.

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





Иако ово заправо није ХТМЛ ознака, ипак је добро знати.

2.

Ово је још једна ознака која прегледачу говори да чита ХТМЛ. Ознака иде одмах иза ознаке ДОЦТИПЕ, а ви је затварате ознаком одмах на крају датотеке. Све остало у вашем документу иде између ових ознака.



3.

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

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



Четири.

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


My Website

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



5.

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

  • Опис : Основни опис ваше странице.
  • кључне речи : Избор кључних речи применљивих на вашу страницу.
  • аутор : Аутор ваше странице.
  • видно поље : Ознака која осигурава да ваша страница изгледа добро на свим уређајима.

Ево примера који би се могао применити на ову страницу:




Ознака „виевпорт“ увек треба да има „видтх = девице-видтх, инитиал-сцале = 1.0“ као садржај како би се ваша страница добро приказивала на мобилним и десктоп уређајима.

6.

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

Сав садржај ваше веб странице налази се између ових ознака. Једноставно је колико звучи:


Everything you want displayed on your page.

7.

Нешто мање велико заглавље


Подзаглавље

Резултат:

Као што видите, они се смањују на сваком нивоу.

8.

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

Погледајте, на пример, паузу између претходног реда и овог. То је оно што а

таг ће учинити.

Your first paragraph.


Your second paragraph.

Резултат:

Ваш први пасус.

Ваш други пасус.

Можете такође користите ЦСС стилове у ознакама пасуса, попут ове која мења величину текста:

This is 50% larger text.

Резултат:

9.

Ознака прелома реда убацује један прелом реда:

The first line.

The second line (close to the first one).

Резултат:

Рад на сличан начин је

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

10.

Ова ознака дефинише важан текст. Уопштено, то значи да ће бити подебљано. Међутим, могуће је користити ЦСС за прављење текст се приказује другачије.

која је разлика између цхромецаст и року

Међутим, можете га безбедно користити до подебљаног текста.

Very important things you want to say.

Резултат:

Веома важне ствари које желите да кажете.

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

Једанаест.

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

An emphasized line.

Резултат:

Наглашена линија.

Тхе таг и даље ради, али опет, могуће је да ће бити застарео у будућим верзијама ХТМЛ -а.

12.

Тхе , или сидро, ознака вам омогућава да креирате везе. Једноставна веза изгледа овако:

Идите на МУО

Атрибут 'хреф' идентификује одредиште везе. У многим случајевима ово ће бити друга веб локација. То може бити и датотека, попут слике или ПДФ -а.

Остали корисни атрибути укључују „циљ“ и „наслов“. Атрибут таргет се скоро искључиво користи за отварање везе у новој картици или прозору, на пример:

Go to MUO in a new tab

Резултат:

Идите на МУО на новој картици

Атрибут 'титле' ствара опис. Пређите курсором преко доње везе да видите како то функционише:

Hover over this to see the tool tip

Резултат:

Пређите курсором преко ове ставке да бисте видели врх алата

13.

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

Резултат:

најбољи онлине видео преузимач са било које локације

Доступни су и други атрибути, као што су 'висина', 'ширина' и 'алт'. Ево како би то могло изгледати:

the name of your image

Као што сте могли очекивати, атрибути 'хеигхт' и 'видтх' постављају висину и ширину слике. Генерално, добра је идеја поставити само један од њих тако да се слика правилно мери. Ако користите обоје, могли бисте добити истегнуту или згњечену слику.

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

14.

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

  1. ), па ће ваша листа изгледати овако:


    1. First thing

    2. Second thing

    3. Third thing

    Резултат:

    1. Прва ствар
    2. Друга ствар
    3. Трећа ствар

    У ХТМЛ5 можете користити

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

      Атрибут 'типе' вам омогућава да кажете прегледачу који тип симбола треба да користи за ставке листе. Може се поставити на „1“, „А“, „а“, „И“ или „и“, постављајући листу тако да се приказује са означеним симболом овако:

        петнаест.

          Неуређена листа је много једноставнија од наручене. То је једноставно означена листа.


          • First item

          • Second item

          • Third item

          Резултат:

          • Прва ставка
          • Друга ставка
          • Трећа ставка

          Неуређене листе такође имају атрибуте „типе“, па их можете поставити на „дисц“, „цирцле“ или „скуаре“.

          16.

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














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          Тхе

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

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

          Резултат:

          1. колона2. колона
          Први ред, колона 1Ред 1, колона 2
          Ред 2, колона 1Ред 2, колона 2

          17.

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

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Резултат:

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

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

          Узорци ХТМЛ кода

          Са ових 17 примера ХТМЛ -а требало би да креирате једноставну веб локацију. Можете их све тренутно испробати у мрежном уређивачу текста да бисте стекли утисак о томе како раде.

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

          Објави Објави Твеет Емаил Желите да научите основно кодирање? Испробајте 5 апликација за кодирање величине залогаја у своје слободно време

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

          Прочитајте следеће           Повезане теме
          • Програмирање
          • Вордпресс
          • ХТМЛ
          • Веб Девелопмент
          • Кодирање Туториали
          О аутору Анди Беттс(221 објављених чланака)

          Анди је бивши штампани новинар и уредник часописа који већ 15 година пише о технологији. У то време допринео је небројеним публикацијама и писао текстове за велике технолошке компаније. Он је такође дао коментаре стручњака за медије и водио панеле на индустријским догађајима.

          Више од Андија Беттса

          Претплатите се на наш билтен

          Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

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