Tarkib

• Qadamlar
• 1-qism: HTMLni qanday kashf qildim
• Maslahat
• Ogohlantirish
• Sizga nima kerak

HTML (HyperText Markup Language) - veb-sahifalarni yaratish uchun asosiy til. U oson va moslashuvchan kodlash tili sifatida yaratilgan. Internetdagi deyarli har qanday veb-sayt ushbu kodning biron bir shakli (ColdFusion, XML, XSLT) bilan ishlab chiqilgan. HTMLni tushunish oson, ammo agar siz uning keng qamrovli funktsional imkoniyatlariga qiziqsangiz, bu haqda uzoq vaqt bilib olishingiz mumkin. Veb-saytingizga rang va ko'ngil ochish uchun asosiy HTML-sahifaga o'rganishingiz bilanoq asosiy CSS-ni o'rganishingiz mumkin.

Qadamlar

4-qismning 1-qismi: Hujjatni yaratish

1. 

   Oddiy matn muharririni oching. NotePad - bu yaxshi variant va uni bepul yuklab olish mumkin. Ko'pgina matn muharrirlari bilan HTML yozishingiz mumkin, ammo avtomatik formatlash qobiliyatiga ega bo'lgan yanada murakkab dastur HTML sahifangizni tartibga solishni qiyinlashtirishi mumkin.
   • TextEdit-dan foydalanmang, chunki u odatda faylni brauzeringiz HTML sifatida tanimaydigan formatdagi faylni saqlaydi.
   • Shuningdek, siz onlayn HTML muharriridan foydalanishingiz mumkin. Maxsus HTML tahrirlash dasturlari yangi boshlanuvchilar uchun tavsiya etilmaydi.

2. 

   
   
   Faylni veb-sahifa sifatida saqlang. Yuqoridagi menyuda Fayl → Saqlash boshqasini tanlang. Fayl formatini "Veb-sahifa", ".html" yoki ".htm" ga o'zgartiring. Faylni osongina topishingiz mumkin bo'lgan joyda saqlang.
   • Ushbu uchta variant o'rtasida farq yo'q.

3. 

   Faylni brauzerda oching. Faylni ikki marta bosing va u avtomatik ravishda brauzeringizda bo'sh veb-sahifa sifatida ochiladi. Shu bilan bir qatorda, siz Firefox yoki Internet Explorer kabi brauzerni ochishingiz va keyin Fayl → Faylni ochish yordamida hujjatni tanlashingiz mumkin.
   • Ushbu veb-sayt onlayn emas. Uni faqat sizning kompyuteringizda ko'rish mumkin.

4. 

   
   
   Veb-sahifani yangilang va kiritilgan o'zgarishlarni ko'ring. Bo'sh hujjatingizga quyidagilarni kiriting: Salom. Hujjatni saqlang. O'zingizning brauzeringizda bo'sh veb-sahifani yangilang va sahifaning yuqori qismida qalin harflar bilan "Salom" so'zini ko'rishingiz kerak. Ushbu o'quv qo'llanma davomida har doim yangi HTML-ni sinab ko'rmoqchi bo'lganingizda .htm hujjatini saqlang va keyin HTML qanday tuzilganligini ko'rish uchun brauzer oynasini yangilang.
   • Agar siz ""va"Brauzeringizda paydo bo'ladi, fayl HTML-da to'g'ri tuzilmagan. Boshqa matn muharriri yoki boshqa brauzerni sinab ko'ring.

5. 

   
   
   Teglarni bilib oling. HTML buyruqlar brauzerga veb-sahifangizni qanday kompilyatsiya qilish va ko'rsatishni ko'rsatadigan "teglar" da yozilgan. Ular har doim bitta tirnoq ichida yoziladi , va yuqoridagi misolda ishlatganingiz kabi veb-sahifada ko'rsatilmaydi:
   • bu "boshlang'ich karta" yoki "ochiq karta". Ushbu tegdan keyin yozilgan har qanday narsa "qalin" (veb-sahifada qalin) deb belgilanadi.
   • bu "tugatish yorlig'i" yoki "yopilish yorlig'i" bo'lib, uni belgi / belgi bo'yicha ajratish mumkin. Bu qalin matnning oxirini bildiradi. Ko'pgina teglar (barchasi hammasi emas) ishlashi uchun oxirgi yorliq kerak, shuning uchun uni qo'shishni unutmang.

6. 

   Hujjatingizni yarating. HTML hujjatingizdagi hamma narsani o'chirib tashlang. Aynan qanday yozilgan bo'lsa, quyidagi matn bilan boshlang (o'q nuqtalarini olib tashlang). Ushbu HTML kod brauzerda qaysi HTML turidan foydalanayotganingizni va barcha HTML-laringiz teglar ichiga joylashishini bildiradi. va .

7. 

   Bosh (bosh) va tana teglarini qo'shing. HTML hujjatlari ikki qismga bo'linadi. "Yuqori" bo'lim sahifaning sarlavhasi kabi maxsus ma'lumot uchun mo'ljallangan. "Tanasi" bo'limi sahifaning asosiy tarkibini o'z ichiga oladi. Hujjatingizga ushbu ikkala bo'limni qo'shing va oxirgi teglarni qo'shishni unutmang. Yangi qo'shilgan matn qalin:

8. 

   Sahifangizga sarlavha bering. Bosh qismidagi kartalarning aksariyati boshlang'ich bilan o'rganish uchun ahamiyatsiz. Sarlavha yorlig'ini ishlatish oson, ammo brauzer oynasining nomi yoki brauzer yorlig'ida nima ko'rinishini aniqlaydi. Bosh teglar ichiga sarlavha boshi va oxiri teglarini joylashtiring va shu teglar orasiga yoqqan sarlavhalarni yozing:
   reklama

4-qismning 2-qismi: Matnni formatlash

1. 

   Tanangizga matn qo'shing. Ushbu bo'lim uchun biz faqat tanadagi teglar bilan ishlaymiz. Boshqa matn sizning hujjatingizda saqlanib qoladi, ammo biz ushbu qo'llanmada uni takrorlamay, bo'sh joyni tejaymiz. Kartalar orasiga xohlagan narsani yozing va , va u sizning sahifangizdagi birinchi tarkib sifatida paydo bo'ladi. Masalan:
   • HTML sahifasini yozish bo'yicha wikiHow ko'rsatmalariga amal qildim.

2. 

   Matn uchun sarlavhalar qo'shing. O'zingizning sahifangizni sarlavha teglari bilan tartibga soling, bu brauzerga ular orasidagi matnni shrift kattaroq hajmda ko'rsatishni buyuradi. Ushbu teglar, shuningdek, qidiruv tizimlari va boshqa vositalar tomonidan veb-saytingiz nima ekanligini va uning qanday tashkil etilganligini aniqlash uchun ishlatiladi.
   eng katta sarlavha va siz kichikroq sarlavhalar yaratishingiz mumkin
   . Ularni o'z sahifangizda sinab ko'ring:
   • Mening sahifamga xush kelibsiz.

   • HTML-sahifani yozish bo'yicha wikiHow ko'rsatmalariga amal qildim.

   • Bugungi maqsadim:

   • Tugallangan maqsadlar:

   • Sarlavhalardan qanday foydalanishni bilib oling.

   • Bajarilmagan maqsadlar:

   • Matnni formatlash teglari haqida ko'proq bilib oling.

3. 

   Matnni formatlash teglari haqida ko'proq bilib oling. Siz allaqachon "kuchli" yorlig'ini ko'rgansiz, ammo matningizni formatlashning ko'plab boshqa usullari mavjud. Ushbu teglarni yoki bir xil matn satri uchun bir vaqtning o'zida bir nechta teglarni sinab ko'ring. Orqa tomonga tugatish teglarini qo'shishni unutmang!
   • Brauzerda qalin harflar bilan ko'rsatilgan muhim matn.
   • Brauzerda kursiv bilan ko'rsatilgan ta'kidlangan matn.
   • Odatdagidan biroz kichikroq SMS yuboring. Agar sarlavhada ishlatilsa, ushbu matn avtomatik ravishda hajmini o'zgartiradi.
   • Matn endi ahamiyatsiz, asosiy chiziqcha bilan ko'rsatiladi.
   • Matn pastki hujjatlar bilan ko'rsatilgan boshqa hujjatlarga qaraganda kechroq kiritiladi.

4. 

   O'zingizning sahifangizdagi matnni tartibga soling. "Enter" tugmachasini bosish bilan matn boshqa satrda paydo bo'lishi uchun etarli emasligini sezgan bo'lishingiz mumkin. Ushbu teglar xatboshilar va satrlarni yaratishda yordam beradi yoki matningizni boshqa usullar bilan tartibga soladi:

   • "Abzats" (paragraf) yorlig'i uchun qisqartma ushbu teglar orasidagi barcha matnlarni xatboshida saqlaydi va uni yuqoridagi va pastdagi matndan ajratib turadi.

   • 
     Ushbu teg satrlar oralig'ini hosil qiladi. Unga yakuniy yorliq qo'shmang, chunki u boshqa tarkibga xalaqit bermaydi. Ushbu tegdan paragraflarda emas, balki she'rlarda yoki manzil satrlarida foydalaning.

   • Agar siz matnni juda aniq ko'rsatishingiz kerak bo'lsa, ushbu teg uning ichidagi matnni belgilangan kenglik shriftiga o'rnatadi (har bir harf bir xil kenglikka ega) va intervallarni yaratishga imkon beradi. Teglar o'rniga muntazam tahrir qilishni xohlagan bo'sh joylar va satrlar.

   • Ushbu yorliq manbadan yana keltirilgan matn turini belgilaydi.

     Siz manbani keyinroq tasvirlab berishingiz mumkin Cite card.

5. 

   Ko'rinmas taglavha matnini qo'shing. Izoh teglari veb-sahifada ko'rsatilmaydi. Ular tarkibiga ta'sir qilmasdan o'zingizni HTML hujjatiga izoh berishga imkon beradi. Tugatish yorlig'ini qo'shmang.
   • Yakuniy teglarsiz yolg'iz ketadigan kartalar "bo'sh teglar" deb nomlanadi.

6. 

   Ularni birlashtiring. Ushbu teglarni eslab qolishning eng yaxshi usuli ularni veb-saytingizda ishlatishdir. Hozirgacha o'rgangan qadamlaringizdagi kartalardan foydalanishga misol. Ular qanday qilib brauzerda paydo bo'lishini oldindan aytib berishga harakat qiling, keyin ularni hujjatingizga ko'chirib oling va bilib oling.
   • Veb-saytimga xush kelibsiz.

   • Umid qilamanki bu sahifa sizga yoqadi!

     Men buni faqat siz uchun qildim.

   • 1-qism: HTMLni qanday kashf qildim

   • HTMLni allaqachon o'rganganman bitta ikkitasisoat, shuning uchun endi men mutaxassisman.
   reklama

4-qismning 3-qismi: Havolalar va rasmlarni qo'shish

1. 

   Atributlar haqida bilib oling. Teglarda atributlar deb nomlangan qo'shimcha ma'lumotlar bo'lishi mumkin. Ushbu atributlar teglarning o'zida, shaklda qo'shimcha so'zlar bilan ifodalanadi mulk nomi = "o'ziga xos qiymat". Masalan, har qanday HTML yorlig'i nom atributiga ega bo'lishi mumkin:

   • Kirish xatboshisi bu erda.

     Abzatsga veb-sahifadagi abzats ustiga o'tsangiz paydo bo'ladigan "Kirish" deb nom bering.

2. 

   Boshqa veb-saytlarga havolalar. Kartalardan foydalanish har qanday boshqa veb-sahifalarga ko'prik yaratish. Href atributidan foydalanishga bog'lanish uchun veb-sahifaning URL manzilini kiriting. Siz o'qiyotgan veb-sahifaga havola qiladigan misol:
   • Sizning veb-saytingizga tashrif buyuruvchilar ushbu matnni bosish orqali havolani bosishlari mumkin.

3. 

   Id atributini tegga qo'shing. Har qanday HTML yorlig'i ishlatishi mumkin bo'lgan yana bir atribut "id" elementidir. Har qanday kartada yozing id = "vidu" yoki bo'sh joy bo'lmagan nomlardan foydalaning. Bu hech qanday ko'rinadigan effekt bermaydi, ammo biz uni keyingi bosqichda ishlatamiz.
   • Masalan, hujjatingizga quyidagilarni qo'shing:

     Ushbu paragraf id atributining qanday ishlashini tavsiflash uchun namuna sifatida ishlatiladi.

4. 

   Muayyan id bilan elementga havola. Endi biz ko'prik yorlig'idan foydalanishimiz mumkin, , xuddi shu sahifadagi boshqa joyga bog'lanish uchun. URL o'rniga biz # belgisidan foydalanamiz, so'ngra biz bog'lanishni istagan id qiymati. Masalan, Ushbu matn "vidu" identifikatori bilan matnga bog'lanadi.
   • Barcha HTML qiymatlari kichik harflar uchun sezgir. "#VIDU" va "#vidu" ikkalasi ham bitta joyga bog'lanishadi.
   • Agar sizning sahifangiz bir vaqtning o'zida butun sahifani ko'rsatadigan darajada qisqa bo'lsa, ehtimol siz brauzeringizdagi havolani bosganingizda hech narsa sodir bo'layotganini sezmaysiz. O'tkazish paneli paydo bo'lguncha oynaning o'lchamini o'zgartiring va qaytadan urining.

5. 

   Suratlarni qo'shish. Karta bo'sh yorliqdir, ya'ni oxirgi yorliq kerak emas. Rasmni ko'rsatish uchun brauzerga kerak bo'lgan barcha ma'lumotlar atributlardan foydalangan holda qo'shiladi. WikiHow logotipini namoyish etish uchun misol, orqasida har bir atribut uchun tavsif mavjud:
   • 
   • Xususiyatlari src = "" fotosurat qaerda ekanligini brauzerga aytib beradi. (Birovning saytidan fotosuratni joylashtirish noo'rin deb hisoblanganligini unutmang - va sahifa endi faol bo'lmaganida fotosurat yo'qoladi.)
   • Xususiyatlari uslub = "" U ko'p narsalarni qila oladi, lekin eng muhimi, tasvirning kengligi va balandligini piksel bilan belgilash uchun ishlatiladi. (Buning o'rniga siz alohida = "" va balandlik = "" atributlaridan foydalanishingiz mumkin, ammo bu CSS dan foydalansangiz, o'lchamlarni o'zgartirish g'alati muammolarga olib kelishi mumkin.)
   • Xususiyatlari alt = "" foydalanuvchi rasm yuklanmaganligini ko'radigan rasmning qisqacha tavsifidir. Bu talab deb hisoblanadi, chunki u ko'r-ko'rona veb-saytga tashrif buyuruvchilar uchun ekran o'quvchilari uchun ishlatiladi.
   reklama

4-qismning 4-qismi: Veb-saytingizni Internetga qo'shish va olish haqida ko'proq bilib oling

1. 

   HTML-ni tasdiqlang. HTML tekshiruvi sizning kodingizdagi xatolarni tekshiradi. Agar saytingiz to'g'ri ko'rsatilmasa, tasdiqlash muammoni keltirib chiqaradigan xatoni topishga yordam beradi. Shuningdek, u kodning displeyda yaxshi ko'rinishini aniqlash orqali sizga HTML haqida ko'proq ma'lumot berishi mumkin, ammo HTML standartidagi yangi yangilanishlar tufayli endi tavsiya etilmaydi. Yaroqsiz HTML-dan foydalanish saytingizni foydasiz deb hisoblamaydi, aksincha turli xil brauzerlarda muammolarga olib kelishi yoki beqaror bo'lishi mumkin.
   • W3C-dan bepul onlayn tasdiqlash xizmatini sinab ko'ring yoki boshqa HTML 5 tekshirish vositasini onlayn izlang.

2. 

   Ko'proq teglar va atributlarni o'rganing. Boshqa ko'plab HTML teglari va atributlari mavjud va ularni o'rganish uchun ko'plab joylar mavjud:
   • Ko'proq o'quv qo'llanmalari va teglarning to'liq ro'yxati uchun w3schools va HTML Dog-ni sinab ko'ring.
   • Tashqi ko'rinishiga yoqadigan veb-sahifani toping, so'ngra HTML-kodni o'zingiz ko'rish uchun brauzeringizning "Sahifa manbasini ko'rish" funksiyasidan foydalaning. Uni hujjatingizga ko'chiring va qanday ishlashini o'rganing.
   • Boshqa maqolalarni o'qing va HTML-da jadvallarni yaratish, qidiruv tizimlari orqali uni topish imkoniyatini oshirish uchun meta teglardan foydalanish yoki bo'linishni ishlatishni o'rganing. sahifadagi maydonni ko'rsating) va CSS orqali uslubga yordam beradigan oraliq (matn elementining uslubini belgilash uchun ishlatiladi).

3. 

   Veb-saytingizni onlayn qiling. Veb-saytingizni joylashtirish uchun xizmatni tanlang, shunda shaxsiy veb-domeningizga xohlagancha HTML-sahifalarni yuklashingiz mumkin. Buning uchun sizga FTP yuklash dasturidan foydalanish kerak bo'ladi, ammo ko'plab veb-ijara xizmatlari ushbu xizmatni ham taklif qilishadi.
   • To'g'ridan-to'g'ri saytingizdagi sahifalar yoki rasmlarga havola qilishda to'liq manzildan foydalanishingiz kerak bo'ladi. Masalan, agar sizning domen nomingiz www.chuyengiahtmlsieudang.com bo'lsa, unda matn bu teglarda "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" ga havola qilinadi

4. 

   CSS bilan uslublarni qo'shing. Agar HTML sahifangiz biroz monoton ko'rinadigan bo'lsa, ranglar, turli xil shriftlar qo'shish va elementlarning joylashtirilgan joyini yaxshiroq boshqarish uchun CSS asoslarini o'rganishga harakat qiling. CSS-ning "uslublar varag'i" ni HTML-sahifaga bog'lab qo'yish, darhol barcha matnlarning uslubini berilgan yorliq ichida avtomatik ravishda to'g'rilab, keskin o'zgarishlarni amalga oshirishga imkon beradi. Siz bu erda asosiy formatlash qatlami bilan biroz o'ynashingiz yoki HTML Dog's CSS qo'llanmasida batafsil qo'llanmalarga sho'ng'ishingiz mumkin.

5. 

   Veb-saytingizga JavaScript-ni qo'shing. JavaScript - bu HTML-sahifalaringizga ko'plab funktsiyalarni qo'shish uchun ishlatiladigan dasturlash tili. JavaScript buyruqlari start va end teglari orasiga kiritilgan , va interfaol tugmachalarni qo'shish, matematik masalalarni hisoblash va boshqalarda foydalanish mumkin. Batafsil ma'lumotni w3c misollaridan bilib oling. reklama

Maslahat

• Ushbu o'quv qo'llanmasida foydalanilgan hujjat turi deklaratsiyasi (foydalanilgan Hujjat turi deklaratsiyasi) "bo'sh HTML 4.0.1 o'tish davri" (HTML 4.0.1 qattiq o'tish emas), oson format. yangi boshlanuvchilar uchun foydalanish. Foydalanish () brauzer tomonidan tavsiya etilgan (kam qo'llaniladigan bo'lsa ham) standart uslub bo'lgan qat'iy HTML 5 formatida kompilyatsiya qilishning alternativasi.

Ogohlantirish

• HTML-ning maqsadi tarkibni global formatda saqlashdir. U sizning veb-saytingizning taqdimotini, masalan, fon rangini va elementlarning aniq joylashishini nazorat qilmaydi. Bunga imkon beradigan teglar mavjud bo'lsa ham, boshqariladigan va izchil veb-sayt yaratish uchun CSS-dan foydalanish yaxshi.

Sizga nima kerak

• NotePad yoki TextEdit kabi oddiy matn muharriri
• Internet Explorer yoki Mozilla Firefox kabi veb-brauzer
• (Majburiy emas) Adobe Dreamweaver, Aptana Studio yoki Microsoft Expression Web kabi HTML muharriri