Мазмун

• Кадамдар
• 1-бөлүк: HTMLди кантип таптым
• Кеңеш
• Эскертүү
• Сизге эмне керек

HTML (HyperText Markup Language) - бул веб-баракчаларды куруу үчүн негизги тил. Бул жеңил жана ийкемдүү коддоо тили катары түзүлгөн. Интернеттеги дээрлик бардык веб-сайттар ушул коддун кандайдыр бир формасы менен иштелип чыгат (ColdFusion, XML, XSLT). HTMLди түшүнүү оңой, бирок анын ар тараптуу иштешине кызыкдар болсоңуз, ал жөнүндө көпкө чейин биле берсеңиз болот. Вебсайтыңызга түс жана көңүл ачуу үчүн, негизги HTML барагына көнүп калсаңыз эле, негизги CSSти үйрөнсөңүз болот.

Кадамдар

4-бөлүктүн 1-бөлүгү: Документ түзүү

1. 

   Жөнөкөй тексттик редакторду ачыңыз. NotePad - бул жакшы вариант жана аны бекер жүктөп алсаңыз болот. Көпчүлүк тексттик редакторлор менен HTML жазсаңыз болот, бирок автоматтык форматтоо мүмкүнчүлүктөрү бар татаал программалар HTML барагыңызды уюштурууну кыйындатышы мүмкүн.
   • TextEdit колдонбоңуз, анткени ал файлды адатта сиздин браузериңиз HTML деп тааныбагандай форматта сактайт.
   • Ошондой эле онлайн HTML редакторду колдонсоңуз болот. Атайын HTML түзөтүү программалары башталгычтарга сунушталбайт.

2. 

   
   
   Файлды веб баракча катары сактаңыз. Өйдө жагындагы менюдан Файл → Башкача сактоону тандаңыз. Файлдын форматын "Веб-баракча", ".html" же ".htm" кылып өзгөртүңүз. Файлды оңой таба турган жерге сактаңыз.
   • Ушул үч варианттын ортосунда эч кандай айырма жок.

3. 

   Файлды браузерден ачыңыз. Файлды эки жолу чыкылдатып, ал автоматтык түрдө браузериңизде бош веб баракча болуп ачылат. Же болбосо, Firefox же Internet Explorer сыяктуу браузерди ачып, андан соң Файл → Файлды ачуу менен документти тандай аласыз.
   • Бул сайт онлайн эмес. Ал сиздин компьютерде гана көрүнөт.

4. 

   
   
   Веб баракчаны жаңылап, киргизилген өзгөртүүлөрдү көрө аласыз. Бош документиңизге төмөнкүлөрдү териңиз: салам. Документти сактаңыз. Браузериңиздеги бош веб-баракчаны жаңылаңыз, барактын жогору жагында кара тамгалар менен жазылган "Салам" деген сөздү көрүшүңүз керек. Бул окуу куралы учурунда өзүңүздүн жаңы HTML программаңызды текшергиңиз келсе, .htm документин сактап, андан кийин HTML кандайча түзүлгөндүгүн көрүү үчүн браузериңиздин терезесин жаңыртыңыз.
   • Эгерде сиз ""жана"'' Сиздин браузериңизде пайда болот, файл HTMLде туура түзүлө элек. Башка тексттик редакторду же башка браузерди байкап көрүңүз.

5. 

   
   
   Тэгдерди билип алыңыз. HTML буйруктары браузерге веб-баракчаңызды кантип компиляциялоону жана көрсөтүүнү айтып берген "тэгдерде" жазылат. Алар ар дайым бир тырмакчанын ичинде жазылат , жана жогоруда келтирилген мисалда аларды колдонгондой веб-баракчада көрсөтүлбөйт:
   • бул "баштапкы карта" же "ачуу картасы". Бул тегден кийин жазылгандардын бардыгы "жоон" деп аныкталат (веб баракчасында коюу).
   • - бул "аягы" же "жабуу теги", сиз аны белги / белги менен айырмалай аласыз. Бул коюу тексттин аягын билдирет. Көпчүлүк (баардыгы эмес) тегдер иштеши үчүн акыркы тег керек, андыктан аны сөзсүз кошуңуз.

6. 

   Документиңизди түзүңүз. HTML документтин бардыгын жок кылыңыз. Төмөнкү текстти кандай жазылса, ошондой баштаңыз (ок пункттарын алып салсаңыз). Бул HTML код браузерге кайсы HTML түрүн колдонуп жатканыңызды жана HTMLиңиздин бардыгы тегдердин ичине жайгаштырыла тургандыгын билдирет. жана .

7. 

   Баш (баш) жана дене белгилерин кошуңуз. HTML документтери эки бөлүккө бөлүнөт. "Топ" бөлүмү баракчанын аталышы сыяктуу атайын маалыматка арналган. "Дене" бөлүмү барактын негизги мазмунун камтыйт. Ушул бөлүмдөрдүн экөөсүн тең документке кошуңуз жана акыркы тегдерди киргизүүнү унутпаңыз. Жаңы кошулган текст кара тамгалар менен жазылган:

8. 

   Баракчаңызга аталыш бериңиз. Баш бөлүмүндөгү карталардын көпчүлүгү башталгыч менен үйрөнүү үчүн маанилүү эмес. Титул теги колдонууга оңой жана ал браузер терезесинин же браузер өтмөгүнүн аталышы катары аныкталат. Баш тегдеринин башы жана аягы тегдерин баш тегдеринин ичине жайгаштырыңыз жана ошол тегдердин арасына жаккан баш аттарды жазыңыз:
   жарнама

4 ичинен 2-бөлүк: Текстти форматтоо

1. 

   Денеңизге текст кошуңуз. Бул бөлүм үчүн биз дене тегдери менен гана иштейбиз. Башка текст сиздин документте дагы деле болсо сакталып калат, бирок бул окуу куралыда аны кайталабастан мейкиндикти үнөмдөйбүз. Карталардын арасына каалаганыңызды жазыңыз жана , жана ал сиздин беттеги биринчи мазмун катары пайда болот. Мисалы:
   • HTML баракчасын жазуу боюнча wikiHow көрсөтмөлөрүн аткардым.

2. 

   Текстке баш аттарды кошуңуз. Браузерге текстти чоңураак арип өлчөмүндө көрсөтүүнү буйруган баш тегдери менен өз баракчаңызды уюштуруңуз. Бул тэгдерди издөө тутумдары жана башка куралдар дагы колдонуп, веб-сайтыңыз эмне жөнүндө экендигин жана ал кандайча уюштурулгандыгын аныкташат.
   эң чоң баш болуп саналат, жана сизге чейин кичинекей аталыштарды түзсөңүз болот
   . Аларды баракчаңыздан байкап көрүңүз:
   • Менин баракчама кош келдиңиз.

   • HTML баракчасын жазуу боюнча wikiHow көрсөтмөлөрүн аткардым.

   • Бүгүнкү максатым:

   • Аткарылган максаттар:

   • Рубрикаларды кантип колдонууну билип алыңыз.

   • Аткарылбаган максаттар:

   • Текстти форматтоо тегдери жөнүндө көбүрөөк билүү.

3. 

   Текстти форматтоо тегдери жөнүндө көбүрөөк билүү. Сиз буга чейин "күчтүү" теги менен таанышкансыз, бирок текстти форматтоонун башка көптөгөн жолдору бар. Ушул тегдерди бир эле учурда бир нече теги менен колдонуп көрүңүз. Артка аяктоочу тегдерди кошууну унутпаңыз!
   • Браузерде коюу текст менен көрсөтүлгөн маанилүү текст.
   • Браузерде курсив менен көрсөтүлгөн текстти баса белгилөө.
   • Адаттагыдан бир аз кичинекей SMS жөнөтүңүз. Бул тексттин аталышы колдонулса, анын көлөмү автоматтык түрдө өзгөртүлөт.
   • Текст мындан ары мааниге ээ эмес, негизги сызыкча менен көрсөтүлөт.
   • Текст башка документтерге караганда кечирээк киргизилет, асты сызылып көрсөтүлөт.

4. 

   Өз баракчаңыздагы текстти иреттеңиз. Сиз "enter" баскычын басуу тексттин башка сапта көрүнүшү үчүн жетишсиз экендигин байкагандырсыз. Бул тегдер абзацтарды жана сап үзүндүлөрүн түзүүгө же текстти башка жолдор менен жайгаштырууга жардам берет:

   • "Параграф" деген кыска (абзац) теги абзацтын ичиндеги бардык тексттерди сактап, аны жогорудагы жана астындагы тексттен бөлүп берет.

   • 
     Бул тег сап үзгүлтүктөрүн жаратат. Башка мазмунуна тоскоол болбогондуктан, ага аяктоо тегин кошпоңуз. Бул тегди абзацтарда эмес, ыр саптарында же дарек тилкелеринде колдонуңуз.

   • Эгер сиз текстти өтө так чагылдырып турушуңуз керек болсо, анда бул тег тексттин ичине белгиленген кеңдик шрифтине өтөт (ар бир тамга бирдей кеңдикке ээ) жана интервалдарды түзүүгө мүмкүндүк берет Тегдердин ордуна үзгүлтүксүз түзөтүүнү каалаган боштуктар жана саптар.

   • Бул тег булактан алынган тексттин түрүн аныктайт.

     Булакты кийинчерээк сүрөттөп берсеңиз болот cite card.

5. 

   Көрүнбөгөн коштомо текстти кошуңуз. Комментарийлердин тэгдери веб баракчасында көрсөтүлбөйт. Алар HTML документине мазмунуна таасирин тийгизбестен аннотациялоого мүмкүнчүлүк берет. Аяктоо тегин кошпоңуз.
   • Тегдердин аягы жок жалгыз жүргөн карталар "бош тегдер" деп аталат.

6. 

   Аларды бириктирүү. Бул тегдерди эсиңизде сактоонун эң мыкты жолу - бул веб-сайтыңызда колдонуу. Буга чейин үйрөнгөн кадамдарыңыздагы карталарды колдонуу мисалы. Алар браузерде кандайча көрсөтүлөрүн болжолдоп көрүңүз, андан кийин аларды документине көчүрүп, билип алыңыз.
   • Менин сайтыма кош келдиңиз.

   • Бул баракча сизге жагат деп үмүттөнөм!

     Мен аны сиз үчүн гана жасадым.

   • 1-бөлүк: HTMLди кантип таптым

   • Мен HTML тилин мурунтан эле үйрөнүп алдым бир экисаат, ошондуктан мен азыр адисмин.
   жарнама

4 ичинен 3-бөлүк: Шилтемелерди жана сүрөттөрдү кошуу

1. 

   Атрибуттар жөнүндө билип алыңыз. Тегдерде атрибуттар деп аталган кошумча маалыматтар болушу мүмкүн. Бул атрибуттар формалардагы тегдердин ичиндеги кошумча сөздөр менен чагылдырылат касиет аты = "белгилүү бир мааниси"Мисалы, каалаган HTML теги атрибутка ээ болушу мүмкүн:

   • Кириш абзацы бул жерде.

     Параграфтын аталышын "Киришүү" деп атаңыз, ал веб-баракчанын абзацтын үстүнө жылганда пайда болот.

2. 

   Башка веб-сайттарга шилтемелер. Карталарды колдонуу башка веб-баракчаларга гипершилтеме түзүү. Href атрибутун колдонууга шилтеме берүү үчүн веб баракчанын URL дарегин кыстарыңыз. Сиз окуп жаткан веб баракчага шилтеме берген мисал:
   • Сиздин веб-сайтыңызга киргендер шилтемени көрүү үчүн ушул текстти чыкылдата алышат.

3. 

   Тегге id атрибутун кошуңуз. HTML теги колдоно турган дагы бир атрибут - бул "id" элементи. Каалаган картаңызга жазыңыз id = "vidu" же боштук болбогон ар кандай аталышты колдонуңуз. Ал эч кандай көзгө көрүнгөн эффект бербейт, бирок кийинки кадамда колдонобуз.
   • Мисалы, документтериңизге төмөнкүлөрдү кошуңуз:

     Бул абзац id атрибуту кандай иштээрин сүрөттөө үчүн мисал катары колдонулат.

4. 

   Белгилүү идентификатору бар элементке шилтеме. Эми биз гипершилтеме тэгин колдоно алабыз, , ошол эле беттеги башка жерге шилтеме берүү үчүн. URL ордуна, биз # белгисин колдонобуз, андан кийин шилтемени киргизгибиз келген id мааниси. Мисалы, Бул текст "vidu" идентификатору менен текстке шилтеме берет.
   • Бардык HTML маанилери регистрге сезгич. "#VIDU" жана "#vidu" экөө тең бир жерге шилтеме беришет.
   • Эгер сиздин баракчаңыз бир эле учурда бардык баракты көрсөтө тургандай кыска болсо, анда сиз браузериңиздеги шилтемени чыкылдатып, эч нерсе болуп жаткандыгын байкабай калышыңыз мүмкүн. Жылдыруу тилкеси пайда болгонго чейин терезенин көлөмүн өзгөртүп, дагы бир жолу аракет кылып көрүңүз.

5. 

   Сүрөттөрдү кошуу. Карта бош тег, бул эч кандай акыркы тэгдин кереги жок дегенди билдирет. Сүрөттү көрсөтүү үчүн браузерге керектүү болгон бардык маалыматтар атрибуттар аркылуу кошулат. Бул жерде wikiHow логотибин көрсөтүү үчүн ар бир атрибут үчүн сүрөттөмө келтирилген мисал келтирилген:
   • 
   • Касиеттери src = "" браузерге сүрөт кайда экендигин айтат. (Башка бирөөнүн сайтындагы сүрөттү жайгаштыруу ылайыксыз деп табылгандыгын эске алыңыз - жана баракча иштебей калганда сүрөт жоголот.)
   • Касиеттери style = "" Ал көп нерселерди жасай алат, бирок эң негизгиси ал сүрөттүн туурасын жана бийиктигин пиксель менен белгилөө үчүн колдонулат. (Анын ордуна width = "" жана height = "" атрибуттарын колдонсоңуз болот, бирок CSSди колдонсоңуз, көлөмүн өзгөртүү кызыктуу көйгөйлөргө алып келиши мүмкүн.)
   • Касиеттери alt = "" колдонуучу сүрөттү жүктөй албай калгандыгын көрө турган сүрөттүн кыскача сүрөттөлүшү. Бул нерсе көзү азиз веб-сайттын зыяратчылары үчүн экран окурмандары үчүн колдонулгандыктан, бул талап деп эсептелет.
   жарнама

4 ичинен 4-бөлүк: Вебсайтыңызды Интернетке кошуу жана алуу жөнүндө көбүрөөк билүү

1. 

   HTML'иңизди ырастаңыз. HTML текшерүү кодуңуздагы каталарды текшерет. Эгер сиздин сайтыңыз туура көрсөтүлбөсө, текшерүү көйгөйдү жараткан катаны табууга жардам берет. Ошондой эле коддун дисплейде жакшы көрүнгөндүгүн аныктоо менен сизге HTML жөнүндө көбүрөөк маалымат бере алат, бирок HTML стандартындагы жаңы жаңыртуулардан улам мындан ары сунушталбайт. Жараксыз HTMLди колдонуу сиздин сайтыңызды пайдасыз кылбайт, бирок ар кандай браузерлерде көйгөйлөрдү жаратышы же туруксуз болушу мүмкүн.
   • W3Cден акысыз онлайн текшерүү кызматын колдонуп көрүңүз же башка HTML 5 текшерүү куралын интернеттен издеңиз.

2. 

   Көбүрөөк тегдерди жана атрибуттарды билип алыңыз. Башка HTML тэгдери жана атрибуттары бар жана аларды үйрөнө турган көптөгөн жерлер бар:
   • W3schools жана HTML Dog колдонмолорун үйрөнүп, тэгдердин толук тизмесин көрүңүз.
   • Сырткы көрүнүшүңүзгө жаккан веб-баракчаны таап, HTML кодун өзүңүз көрүү үчүн браузериңиздин "Баракчанын булагын кароо" функциясын колдонуңуз. Документиңизге көчүрүп, анын кандай иштээрин изилдеңиз.
   • Башка макалаларды окуп, HTMLде таблицаларды кантип түзүү керектигин, издөө системалары аркылуу аны табуу мүмкүнчүлүгүн жогорулатуу үчүн мета тэгдерди колдонуңуз же бөлүмдү колдонуңуз. CSS аркылуу стилдештирүүгө жардам берүү үчүн, баракчага аянтты орнотуңуз) жана аралыгын (тексттик элементтин стилин көрсөтүү үчүн колдонулат).

3. 

   Вебсайтыңызды онлайн режиминде алыңыз. Вебсайтыңызды өткөрүү үчүн кызматты тандап, андан кийин жеке веб-доменге каалаганча HTML баракчаларын жүктөй аласыз. Бул үчүн, сиз FTP жүктөө программасын колдонушуңуз керек, бирок көптөгөн веб ижара кызматтары бул кызматты да сунушташат.
   • Түздөн-түз өзүңүздүн сайтта жайгашкан баракчаларга же сүрөттөргө шилтеме бергенде, сиз толук даректи колдонушуңуз керек. Мисалы, сиздин домендик атыңыз www.chuyengiahtmlsieudang.com болсо, анда текст ушул тегдерде "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" ге шилтеме берет

4. 

   CSS менен стилдерди кошуңуз. Эгерде сиздин HTML баракчаңыз бир өңчөй көрүнсө, түстөрдү, ар кандай шрифттерди кошуу жана элементтердин жайгаштырылышын көзөмөлдөө үчүн CSS негиздерин үйрөнүп көрүңүз. CSS "стилин" HTML баракчасына шилтеме берүү менен, сиз тез арада кескин өзгөртүүлөрдү киргизип, берилген тексттин ичиндеги тексттин стилин динамикалык түрдө жөндөп аласыз. Бул жерде негизги форматтоо катмары менен бир аз ойноп же HTML Dog'дун CSS Окутуучусунан кененирээк окуу куралдары менен таанышсаңыз болот.

5. 

   Вебсайтыңызга JavaScript кошуңуз. JavaScript - HTML беттериңизге көптөгөн функцияларды кошуу үчүн колдонулган программалоо тили. JavaScript буйруктары баштоо жана аяктоо тегдеринин арасына киргизилет , жана интерактивдүү баскычтарды кошуу, математикалык маселелерди эсептөө жана башкалар үчүн колдонсо болот. Көбүрөөк маалыматты w3c мисалдарынан алыңыз. жарнама

Кеңеш

• Бул окуу куралында колдонулган документтин декларациясы (колдонулган Документтин Декларациясы) "бош HTML 4.0.1 өткөөл" (HTML 4.0.1 катуу эмес өткөөл), оңой формат. башталгычтар колдонушу керек. Колдонуу () сунушталган (азыраак колдонулган) стандарттык стиль болгон браузерге аны катаал HTML 5 форматында топтоого альтернатива.

Эскертүү

• HTMLнин максаты - глобалдык форматтагы мазмунду сактоо. Ал сиздин веб-сайтыңыздын фон өңү жана элементтердин так жайгашуусу сыяктуу презентациясын көзөмөлдөй албайт. Буга мүмкүнчүлүк берген тегдер дагы эле болсо дагы, башкарылып туруучу жана ырааттуу веб-сайт түзүү үчүн CSSти колдонсоңуз жакшы болот.

Сизге эмне керек

• NotePad же TextEdit сыяктуу жөнөкөй текст редактору
• Internet Explorer же Mozilla Firefox сыяктуу веб-браузер
• (Милдеттүү эмес) Adobe Dreamweaver, Aptana Studio же Microsoft Expression Web сыяктуу HTML редактору