HTML tilini o'rganish

Tarkib

Qadam bosish
2 qismning 1-qismi: HTML asoslarini o'rganish
2-qismning 2-qismi: Kengaytirilgan HTML tilini o'rganish
Maslahatlar
Ogohlantirishlar
Zaruriyatlar

HTML - bu qisqartma Hiper matnni belgilash tili, bu kod yoki til veb-saytlarni yaratish uchun foydalaniladigan. Agar ilgari hech qachon dasturlashmagan bo'lsangiz, bu murakkab ko'rinishi mumkin, ammo uni sinab ko'rish uchun oddiy so'zlarni qayta ishlash dasturi va Internet-brauzer kerak bo'ladi. Siz forumlardan, onlayn profillardan yoki wikiHow maqolalaridan ba'zi HTMLlarni tanib olishingiz mumkin. HTML Internetdan foydalanadigan har bir kishi uchun foydali manba bo'lib, HTMLni o'rganish siz kutganingizdan kam vaqt talab qilishi mumkin.

Qadam bosish

2 qismning 1-qismi: HTML asoslarini o'rganish

HTML hujjatni oching. Ko'pgina matnlarni qayta ishlash dasturlari, shu jumladan Notepad yoki Windows uchun Word va Mac uchun Text Editor, HTML hujjatlarini yaratish uchun ishlatilishi mumkin. Hujjatni veb-sahifa sifatida saqlash uchun yangi hujjatni oching va yuqori menyuda Fayl → Saqlash-ni tanlang yoki fayl kengaytmasini ".doc", ".rtf" yoki boshqa narsalardan ".html" yoki ".htm ga o'zgartiring. ".
- Endi sizning hujjatingiz boy matnli format (RTF) dan "oddiy matn" formatiga o'zgartirilganligi va ba'zi formatlash parametrlari va rasmlari to'g'ri saqlanmayotganligi to'g'risida ogohlantirishni ko'rishingiz mumkin. Siz ushbu ogohlantirishni e'tiborsiz qoldirishingiz mumkin; HTML hujjatlari ushbu parametrlardan foydalanmaydi.
- .html va .htm fayllari bir xil. Ikkalasi ham ishlaydi.
Hujjatni brauzer yordamida ko'ring. Bo'sh hujjatingizni saqlang, yoping va keyin uni qayta ochish uchun saqlangan joyda ikki marta bosing. Hujjatingiz endi brauzeringiz tomonidan bo'sh veb-sahifa sifatida ochilishi kerak. Agar bu ishlamasa, fayl belgisini brauzeringizning manzil satriga torting. Keyinchalik, ushbu maqoladagi amallarni bajarib, HTML-hujjatingizni tahrir qilsangiz, koddagi o'zgarishlar qanday ko'rinishini tekshirish uchun brauzerga qaytib borasiz.
- Izoh: veb-sahifangiz hali onlayn emas. Sahifaga boshqalar kira olmaydi va uni sinab ko'rish uchun sizga ishlaydigan internet aloqasi kerak emas. Siz HTML-hujjatni veb-saytga o'xshab "o'qish" uchun shunchaki brauzeringizdan foydalanasiz.
"Teglar" nima ekanligini tushunib oling. Oddiy matn kabi teglar oxirgi veb-sahifada ko'rinmaydi. Teglar sizning brauzeringizda sahifani va tarkibdagi sahifani qanday ko'rsatishni aytib beradi. Boshlang'ich yorliqda ko'rsatmalar mavjud. Masalan, u brauzerga matnni qalin qilib ko'rsatishini aytishi mumkin. Ko'rsatmalar qaerda qo'llanilishini brauzerga aytib berish uchun yakuniy yorliq kerak bo'ladi: ushbu misolda boshlang'ich va tugatish orasidagi barcha matnlar qalin. Yakuniy yorliqlar ham qavs ichiga joylashtirilgan, ammo birinchi qavsdan keyin qiyshiq chiziq.
- Qavslarga boshlang'ich teglarni yozing: bu boshlang'ich kun>
- Qavslar ichiga so'nggi teglarni yozing, lekin birinchi qavsdan keyin egri chiziq qo'ying: /bu yopilish yorlig'i>)
- Keyinchalik funktsional teglarni qanday yozishni maqoladan o'qing. Ushbu bosqichda siz teglarni qanday usulda yozishni eslashingiz kerak:> va />.
- Boshqa HTML kurslarida teglar "elementlar" deb ham nomlanadi va ochilish va yopilish teglari orasidagi matn "elementlar tarkibi" deb ham yuritiladi.
Birinchi html> tegingizni yozing. Har bir HTML hujjati a bilan boshlanadi HTML>yorlig'i va a bilan tugaydi / html>yorliq. Bu brauzerga ushbu teglar orasidagi hamma narsa HTMLda yozilganligini aytadi. Hujjatingizga ushbu teglarni qo'shing:
- Yozing HTML> hujjatning yuqori qismida.
- O'zingizga bo'sh joy berish uchun bir necha marta kiring yoki qaytib keling, so'ngra yozing / html>
- Seni eslayman hamma narsa ushbu ikkita teg o'rtasida ushbu maqolada.
Hujjatning boshini> qismini yarating. Html> va / html> teglari orasida siz a yozasiz bosh>boshlang'ich yorlig'i va a / bosh>-end yorlig'i. Ushbu teglar orasida yana bir oz bo'sh joy qoldiring. Ushbu teglar orasida yozilgan har qanday narsa veb-sahifaning o'zida ko'rinmaydi. Quyidagi amallarni bajarib ko'ring va ma'lumot qayerda ko'rinishini ko'rishni bilasizmi:
- Head> va / head> teglari orasida yozing: sarlavha> va / sarlavha>
- Teglar sarlavhasi> va / sarlavha> o'rtasida siz quyidagilarni yozasiz: HTMLni qanday o'rganish mumkin (rasmlar bilan) - wikiHow.
- Hujjatni saqlang va uni brauzerda oching (yoki hujjatni saqlang va sahifani brauzerda yangilang, agar sahifa hali ham ochiq bo'lsa). Siz sahifaning yuqori qismida, manzil satrining yuqorisida nima yozganingizni ko'rasizmi?
Asosiy qism> bo'lim yarating. Ushbu boshlang'ich hujjatidagi barcha narsalar tanasi> bo'limiga joylashtirilgan va veb-sahifada ko'rsatilgan. Keyin tag / head>, lekin ni oldida tag / html> siz yozasiz tanasi> va / tanasi>. Ushbu maqolada biz muhokama qiladigan barcha narsalar, biz tanadagi teglar orasiga joylashtiramiz. Endi sizda shunday hujjat bo'lishi kerak (o'qsiz):
- HTML>
- bosh>
- sarlavha> HTMLni o'rganish - wikiHow / title>
- / bosh>
- tanasi>
- / tanasi>
- / html>
Turli xil uslublarda matn qo'shing. Endi siz brauzerda ko'rinadigan narsalarni yozishni boshladingiz! O'zgarishlarni saqlaganingizdan va sahifani brauzerda yangilaganingizdan so'ng tanadagi teglar ichida yozganlaringiz barchasi brauzerda ko'rinadi. Yozing emas belgilar bilan bir narsa va >chunki brauzeringiz buni oddiy matn o'rniga HTML ko'rsatmasi sifatida izohlaydi. Masalan yozing Salom Dunyo! (Ingliz tili "Salom dunyo!", Bu ma'lum bir dasturlash tilidagi har qanday dasturlash kursidagi birinchi misol sifatida global standart matn) yoki boshqa biron bir narsa, va matndan oldin va keyin quyidagi teglarni qo'ying va nima bo'lishini ko'ring:
- em> Salom dunyo! / em> kursivli matnga o'xshaydi: Salom Dunyo!
- kuchli> Salom dunyo! / kuchli> qalin matnga o'xshaydi: Salom Dunyo!
- s> Salom dunyo! / s> chizilgan matnga o'xshaydi: ~~Salom Dunyo!~~
- sup> Salom dunyo! / sup> yuqori belgiga o'xshaydi:
- sub> Salom dunyo! / sub> taglavhaga o'xshaydi: _{Salom Dunyo!}
- Kombinatsiyalarni sinab ko'ring: qanday ko'radi em> strong> salom dunyo! / strong> / em> chiqib keting?
Matningizni xatboshilarga bo'ling. Agar siz hujjatingizga turli xil satrlarni joylashtirsangiz, barcha satrlar birin-ketin joylashtirilganini ko'rasiz. Siz yangi qatorlar va bo'sh satrlarni o'zingiz dasturlashingiz kerak:
- p> Bu alohida bo'lim ./p>
- Ushbu jumla birinchi satrda, ushbu jumla keyingi satrda.
  Bu biz duch keladigan birinchi teg, unga yakuniy yorliq kerak emas! Biz bunday yorliqni bitta deb ataymiz bo'sh yorliq.
- Bo'limlarning nomlarini aniq qilish uchun sarlavhalar yarating:
  h1> header / h1>: mumkin bo'lgan eng katta sarlavha
  h2> sarlavha / h2> (2 darajali sarlavha)
  h3> sarlavha / h3> (3 darajali sarlavha)
  h4> header / h4> (4 darajali sarlavha)
  h5> header / h5> (mumkin bo'lgan eng kichik sarlavha)
Ro'yxatlarni qanday qilishni o'rganing. Veb-sahifada ro'yxatlar yaratishning bir necha yo'li mavjud. Sizga eng yoqqan narsani bilish uchun quyidagi usullarni sinab ko'ring. Bir juft teg butun ro'yxat atrofida joylashtirilganligiga e'tibor bering (masalan, tartibsiz ro'yxatlar uchun ul> va / ul> teglar) va ro'yxatdagi har bir element atrofida turli xil juft teglar joylashtirilgan, masalan, li> va / li> .
- Belgilangan ro'yxatlarni yaratish uchun quyidagi koddan foydalaning:
  ul> li> bitta element / li> li> boshqa element / li> li> boshqa element / li> / ul>
- Yoki raqamlangan ro'yxatlarni yaratish uchun ushbu kod:
  ol> li> 1-band / li> li> 2-band / li> li> 3-band / li> / ol>
- Yoki ta'riflar ro'yxatini yaratish uchun ushbu kod:
  dl> dt> Coffee / dt> dd> - Issiq ichimlik / dd> dt> Sut / dt> dd> - Sovuq ichimlik / dd> / dl>
O'zingizning sahifangizni yangi chiziqlar, gorizontal chiziqlar va rasmlar bilan yanada jozibali qiling. Endi sahifangizga boshqa narsalarni qo'shishni boshlash vaqti keldi. Quyidagi teglarni sinab ko'ring (rasm onlayn tarzda joylashtirilishi kerak, shunda siz rasmga havoladan foydalanishingiz mumkin):
- Qatorni kiriting: br> yoki soat>
- Rasmlarni joylashtiring: img src = "sizning_ tasviringiz_url_of">
Sahifadagi boshqa joylarga havolalarni joylashtiring. Siz ushbu kodni boshqa sahifalar va veb-saytlarga ulanish uchun ham ishlatishingiz mumkin, ammo sizda hali veb-saytingiz bo'lmaganligi sababli, biz sahifadagi aniq joylar bo'lgan "langar" larga e'tibor qaratamiz:
- Birinchidan, bog'lashni xohlagan sahifadagi a> yorlig'i bilan langar yarating. Langaringizga eslab qolish oson bo'lgan aniq ism bering:
  
  a name = "Maslahatlar"> Bu sizning atrofingizga langarni joylashtiradigan matn ./a>
- Ankeringizga yoki boshqa veb-sahifaga ulanish uchun href> yorlig'idan foydalaning:
  
  a href = "veb-sahifaning url-si yoki ushbu sahifadagi langar nomi"> Bu erda havola sifatida ko'rsatilgan matn yoki rasmni yozing ./a>
- Boshqa sahifadagi langarga ulanish uchun urldan keyin # belgisini, so'ngra langarining ismini qo'shing. Masalan http://www.wikihow.com/HTML-leren# Maslahatlar sizni to'g'ridan-to'g'ri ushbu sahifadagi "Maslahatlar" bo'limiga olib boradi.

2-qismning 2-qismi: Kengaytirilgan HTML tilini o'rganish

Atributlar haqida bilib oling. Atributlar yorliq ichiga joylashtirilgan va boshlang'ich va oxirgi yorliq o'rtasida "element tarkibiga" qo'shimcha tuzatishlar kiritish uchun ishlatiladi. Ular hech qachon yolg'iz qolishmaydi. Ular quyidagi tarzda yozilgan: name = "value". ism atribut nomini ifodalaydi (masalan, "rang") va qiymat ushbu aniq holatni tavsiflaydi (masalan, "qizil").
- Agar siz ushbu maqolaning avvalgi qismini diqqat bilan ko'rib chiqsangiz, siz allaqachon atributlarga duch kelgansiz. Img> tegida atribut ishlatiladi src, langar atributdan foydalanadi ism va havolalar atributdan foydalanadi href. Ularning barchasi kattaligini aytish mumkin ___='___’ ergashmoq.
HTML jadvallari bilan tajriba qiling. Jadval yoki grafik yaratish uchun sizga bir nechta teglar kerak:
- Butun jadval atrofida jadval teglaridan (ingliz tilidagi "jadval") boshlang:jadval> / jadval>
- Har bir satr tarkibiga teglar joylashtiring: tr>
- Birinchi qatorga ustun sarlavhalarini joylashtiring: th>
- Hujayralarni ketma-ket qatorlarga joylashtiring: td>
- Bularning barchasi birlashishiga misol:
  
  table> tr> th> 1-ustun: Oy / th> th> 2-ustun: Pul tejab / th> / tr> tr> td> yanvar / td> td> 100 € / td> / tr> / table>
Bosh qismida ishlatiladigan boshqa teglarni bilib oling. Siz har bir hujjatning boshiga qo'yadigan bosh yorlig'ini allaqachon bilib oldingiz. Sarlavha> yorlig'idan tashqari, bosh qismida boshqa teglar ham bo'lishi mumkin:
- Meta teglar yaratish uchun ishlatiladi metadata veb-sahifa haqida. Ushbu ma'lumotlar qidiruv tizimlari tomonidan veb-sahifalarni toifalarga ajratish uchun ishlatiladi. O'zingizning sahifangizni qidiruv tizimlariga ko'rinadigan qilish uchun siz bir yoki bir nechta meta teglarni joylashtirishingiz mumkin (oxirgi teglar shart emas), har bir teg to'liq bitta ism atributi va tarkib atributini o'z ichiga olishi kerak, masalan: meta name = "description" content = "here tavsif ">; yoki meta name = "keywords" content = "bu erga har doim vergul bilan ajratilgan kalit so'zlar ro'yxatini yozing">
- link> teglar boshqa fayllarni sahifaga bog'lash uchun ishlatiladi. Odatda CSS uslublar jadvallarini HTML-sahifalar bilan bog'lash uchun foydalaniladigan ushbu sahifalar boshqa turdagi kodlar bilan tuzilgan va sahifaning umumiy uslubini aniqlash uchun ishlatiladi.
- script> teglar javascript fayllarini HTML sahifasi bilan bog'lash uchun ishlatiladi. Javascript foydalanuvchi sahifada biror narsa qilsa, sahifani o'zgartirishga imkon beradi.
Mavjud sahifalardan HTML bilan o'ynang. Veb-sahifalarning manba kodlarini ko'rish HTML bilimlarini kengaytirishning ajoyib usuli hisoblanadi. Sahifani o'ng tugmasini bosing va "Manba ko'rish", "Sahifa manbasini ko'rsatish" yoki shunga o'xshashlarni tanlang. Siz bilmagan ma'lum bir teg nimani bilishini bilib oling yoki javobni Internetda qidiring.
- Siz boshqalarning veb-saytlarini tahrirlay olmaysiz, lekin HTML-kodni o'zingizning hujjatingizga ko'chirib olishingiz va u bilan o'ynashingiz mumkin. Eslatma: ko'p veb-saytlar CSS uslublar jadvallaridan foydalanganligi sababli, siz ko'p ranglarni yoki boshqa uslublarni ko'ra olmasligingiz mumkin.
Batafsil chuqur maqolalarni o'qib HTML haqida ma'lumot oling. Internetda W3Schools yoki Codecademy kabi ko'proq HTML teglarini o'zlashtirish uchun ko'plab manbalar mavjud. Bundan tashqari, ko'plab HTML-kitoblar mavjud, ammo HTML standarti vaqti-vaqti bilan o'zgarib turishi sababli yaqinda chop etilgan nashrdan foydalanayotganingizga ishonch hosil qiling. HTMLni yaxshi darajada o'zlashtirganingizdan so'ng, veb-sahifangiz dizayni va uslubi ustidan ko'proq nazorat qilish uchun CSS-ga murojaat qilishingiz mumkin. Shundan so'ng, keyingi qadam odatda javascriptdir.

Maslahatlar

Internetda oddiy veb-sahifani topish va keyin kod bilan aralashishni boshlash foydali bo'lishi mumkin. Biron bir matnni ko'chirishga, shriftni o'zgartirishga, rasmlarni o'zgartirishga harakat qiling, xohlagan narsangiz!
Kodni yozish uchun daftardan foydalanishingiz mumkin, shunda siz bir lahzaga eslamasangiz, orqaga qaytishingiz mumkin. Siz ushbu sahifani chop etishingiz va ma'lumot uchun saqlashingiz mumkin.
Hozirgi kunda veb-saytlarda XML va RSS tobora ko'proq qo'llanilmoqda. Kod, ayniqsa, manba kodida ko'rib chiqilganda, inson ko'ziga etib bo'lmaydigan ko'rinishi mumkin, ammo funksionallik foydali bo'lishi mumkin.
HTML-da ishlatiladigan teglar katta-kichiklarga sezgir emas, lekin sukut bo'yicha kichik harflardan foydalanish kerak (biz ushbu maqolada bo'lgani kabi). Teglar uchun kichik harflar, shuningdek XHTML bilan muvofiqligi uchun juda tavsiya etiladi.

Ogohlantirishlar

Ba'zi teglar endi ishlatilmaydi va ularning o'rnini xuddi shu narsani bajaradigan boshqa teglar egallaydi, lekin ko'pincha ko'proq imkoniyatlarni taklif qiladi.
Agar sizning sahifangiz HTML standartiga mos kelishiga ishonch hosil qilishni istasangiz, kodingizni amaldagi standartga muvofiq tekshirish uchun W3 veb-saytiga o'ting. Ko'pgina teglar eskirgan va ularning o'rnini zamonaviy brauzerlarda yaxshiroq ishlaydigan teglar egallagan.

Zaruriyatlar

Notepad (Windows) yoki Text Editor (Mac) kabi matnni qayta ishlash dasturi.
bir varaq qog'oz yoki daftar (ixtiyoriy)
HTML uchun yozish uchun maxsus ishlab chiqilgan dastur, masalan Windows uchun Notepad ++ yoki Mac uchun TextWrangler (ixtiyoriy)