HTMLni qanday o'rganish kerak

Video: Nima uchun dasturlashni mustaqil o’rganish kerak ?

Tarkib

Qadamlar
2dan 1 qism: HTML asoslarini o'rganish
2dan 2 qism: Kengaytirilgan HTML
Maslahatlar
Ogohlantirishlar
Sizga nima kerak

HTML inglizcha qisqasi Giper matnni belgilash tili (gipermatnni belgilash tili). Bu saytlarning asosiy markirovkasi yaratilgan kod yoki til. Agar siz hech qachon dasturlashtirmagan bo'lsangiz, o'rganish juda qiyin bo'lib tuyulishi mumkin, lekin aslida siz oddiy matn muharriri va internet -brauzerdan boshlashingiz kerak. Siz hatto Internet -forumlarda, maxsus tayyorlangan sahifalarda yoki wikiHow maqolalarida uchratgan HTML formatlashning ba'zi misollarini tan olishingiz mumkin. HTML har qanday internet foydalanuvchisi uchun foydali vosita bo'lib, asoslarni o'rganish siz o'ylagandan kamroq vaqtni oladi.

Qadamlar

2dan 1 qism: HTML asoslarini o'rganish

1 HTML hujjatini oching. Ko'pgina matn muharrirlari (Windows uchun Notepad yoki Notepad ++, Mac uchun TextEdit, GNU / Linux uchun gedit) HTML fayllarini yaratish uchun ishlatilishi mumkin. Yangi hujjat yarating va uni Fayl → Veb -sahifa formatida saqlash yoki fayl kengaytmasini .doc, .rtf yoki .htm o'rniga .html yoki .htm ga o'zgartiring.
- Siz fayl RTF formatida "oddiy matn" sifatida saqlanishi yoki formatlash va rasmlar saqlanmasligi haqida ogohlantirish olishingiz mumkin. Bu odatiy; HTML uchun bu variantlar kerak emas.
2 Yaratilgan faylni brauzerda oching. Bo'sh faylni saqlang, uni kompyuterdan toping va ochish uchun uni ikki marta bosing. Brauzerda bo'sh sahifa ochilishi kerak. Agar bunday bo'lmasa, faylni brauzerning manzil satriga torting. HTML faylini tahrir qilganda, o'zgarishlarni ko'rish uchun ushbu sahifani yangilashingiz mumkin.
- E'tibor bering, siz shu tarzda Internetda veb -sayt yaratmaysiz. Boshqa odamlar bu sahifaga kira olmaydi va sizning mahalliy sahifangizni sinab ko'rish uchun sizga internet aloqasi kerak emas. Brauzer shunchaki HTML -kodni sharhlab, uni xuddi veb -sayt kabi "o'qiydi".
3 Belgilash teglari nima ekanligini tushunib oling. Oddiy matndan farqli o'laroq, teglar sahifada ko'rinmaydi. Buning o'rniga, ular brauzerga sahifani va uning tarkibini qanday ko'rsatishni aytishadi. "Ochilish" yorlig'i ko'rsatmalarni o'z ichiga oladi. Masalan, u brauzerga matnni ko'rsatilishi kerakligini aytishi mumkin qalin... Brauzer ko'rsatma tugagan joyni ko'rsatish uchun unga "tugatish" yorlig'i ham kerak. Bu misolda bosh va oxiri teglari orasidagi matn qalin qilib ko'rsatiladi. Teglar teng bo'lmagan belgilar ichida yoziladi, lekin oxirgi teg oldinga siljish bilan boshlanadi.
- Ochilish yorlig'i tengsizlik belgilari orasiga yoziladi: ochish yorlig'i>
- Yakunlovchi yorliqda belgi tavsiflovchisidan oldin (oldinga) oldinga chiziq qo'yiladi: /oxirgi teg>
- Turli teglar qanday ishlatilishini bilish uchun o'qing. Ushbu qadam uchun siz faqat yozish formatini eslab qolishingiz kerak. Teglar tengsizlik belgilari orasiga yoziladi:> va />
- Ba'zi darsliklarda HTML teglari elementlar, ochilish va yopilish teglari orasidagi matn elementlar tarkibi deb ataladi.
4 Tahrirlovchiga html> tag kiriting. Har bir HTML fayli teg bilan boshlanishi kerak html> va teg bilan yakunlang / html>... Bu teglar brauzerga teglar orasidagi barcha kontent HTML -da ekanligini bildiradi. Hujjatga ushbu teglarni qo'shing:
- Ko'pincha HTML fayllari chiziqdan boshlanadi ! DOCTYPE html>bu shuni anglatadiki, brauzerlar butun faylni HTML sifatida tan olishlari kerak. Bu chiziq kerak emas, lekin u sizga moslik muammolarini bartaraf etishga yordam beradi.
- Qo'ng'iroq qiling html> hujjatning yuqori qismida.
- Bir nechta bo'sh satrlarni yaratish uchun Enter yoki Return tugmalarini bir necha marta bosing va yozing / html>
- eslang, shuni butun ushbu maqolada siz yaratadigan kod bu ikki teg orasida yozilishi kerak.
5 Faylda head> bo'limini yarating. Html> va / html> teglari o'rtasida ochiladigan teg yarating bosh> va yopish belgisi / bosh>... Ularning orasiga bo'sh satrlarni qo'shing. Head> va / head> teglari orasida yozilgan tarkib sahifaning o'zida ko'rsatilmaydi. Quyidagi amallarni bajaring va siz bu teg nima uchun ekanligini ko'rasiz:
- Bosh> va / bosh> teglari orasiga yozing sarlavha> va / sarlavha>
- Sarlavha> va / sarlavha> teglar orasiga yozing HTMLni qanday o'rganish kerak - wikiHow.
- O'zgarishlarni saqlang va faylni brauzerda oching (yoki fayl ochilgan bo'lsa sahifani yangilang). Manzil paneli ustidagi sahifa sarlavhasida ko'rsatilgan matnni ko'rasizmi?
6 Asosiy> bo'lim yaratish. Bu misoldagi boshqa barcha teglar va matnlar tanasi bo'limida yozilgan bo'lib, uning mazmuni sahifada ko'rsatiladi. Keyin yopish boshi / boshi>, lekin oldin tag / html> teg qo'shish tana> va / tana>... Maqolaning qolgan qismida tana bo'limi bilan ishlang. Sizning faylingiz shunday bo'lishi kerak:
html>
bosh>
sarlavha> HTMLni qanday o'rganish kerak - wikiHow / sarlavha>
/ bosh>
tana>
/ tana>
/ html>
7 Turli uslublar yordamida matn qo'shing. Sahifaga haqiqiy tarkibni qo'shish vaqti keldi! Asosiy teglar orasiga yozgan har bir narsa brauzerda yangilanganidan keyin sahifada ko'rsatiladi. Ishlatmang belgilar yoki >chunki brauzer tarkibni matn o'rniga teg sifatida talqin qilishga harakat qiladi. Yozing Hammaga salom! (yoki xohlagan narsangizni), keyin matnga ushbu teglarni qo'shib ko'ring va nima bo'lishini ko'ring:
- em> hammaga salom! / em> matnni "kursiv" qilib qo'yadi: Hammaga salom!
- kuchli> Hammaga salom! / kuchli> matnni "qalin" qiladi: Hammaga salom!
- s> hammaga salom! / s> chizilgan matn: ~~Hammaga salom!~~
- sup> hammaga salom! / sup> shriftni yuqori matn sifatida ko'rsatadi:
- sub> hammaga salom! / sub> shriftni pastki indeks sifatida ko'rsatadi: _{Hammaga salom!}
- Turli teglarni birgalikda sinab ko'ring. Qanday ko'rinadi em> kuchli> Hammaga salom! / strong> / em>?
8 Matnni paragraflarga ajrating. Agar siz HTML fayliga bir nechta satrli matn yozishga harakat qilsangiz, brauzerda satr uzilishlari ko'rsatilmasligini sezasiz. Matnni paragraflarga bo'lish uchun siz teglar qo'shishingiz kerak:
- p> Bu alohida paragraf. / p>
- Bu jumladan keyin bu satr boshlanishidan oldin br> satr uzilishi keladi.
  Bu oxirgi tegni talab qilmaydigan birinchi teg. Bu teglar "bo'sh" teglar deb ataladi.
- Bo'lim sarlavhalarini ko'rsatish uchun sarlavhalar yarating:
  h1> sarlavha matni / h1>: eng katta nom
  h2> sarlavha matni / h2> (ikkinchi darajali sarlavha)
  h3> sarlavha matni / h3> (uchinchi darajali sarlavha)
  h4> sarlavha matni / h4> (to'rtinchi darajali sarlavha)
  h5> sarlavha matni / h5> (eng kichik sarlavha)
9 Ro'yxatlar tuzishni o'rganing. Veb -sahifada ro'yxatlar tuzishning bir necha yo'li mavjud. Quyidagi variantlarni sinab ko'ring va qaysi biri sizga ko'proq yoqishini hal qiling. E'tibor bering, ro'yxat uchun bir juft teg kerak (masalan, ul> va / ul> markerlangan ro'yxat uchun) va har bir ro'yxat elementi boshqa teglar bilan ajratilgan, masalan, li> va / li>.
- Belgilangan ro'yxat:
  ul> li> Birinchi qator / li> li> Ikkinchi qator / li> li> Va hokazo / li> / ul>
- Raqamlangan ro'yxat:
  ol> li> Bir / li> li> Ikki / li> li> Uch / li> / ol>
- Ta'rif ro'yxati:
  dl> dt> Kofe / dt> dd> - issiq ichimlik / dd> dt> Limonad / dt> dd> - sovuq ichimlik / dd> / dl>
10 Sahifa yordamida joylashtiring chiziq uzilishlari, gorizontal chiziqlar va Rasmlar. Sahifaga matndan boshqa narsani qo'shish vaqti keldi. Qo'shimcha ma'lumot olish uchun quyidagi teglarni ko'ring yoki havolalarga o'ting. Siz joylashtirmoqchi bo'lgan rasmga havola yaratish uchun onlayn xosting xizmatidan foydalaning:
- Gorizontal chiziq: soat>
- Rasm kiritish: img src = "rasm havolasi">
11 Havolalar qo'shing. Siz bu teglardan boshqa sahifalar va saytlarga giperhavolalar yaratish uchun foydalanishingiz mumkin, lekin sizda hali veb -sayt yo'q, shuning uchun siz langar havolalarini, ya'ni sahifadagi ma'lum joylarga havolalar yaratishni o'rganasiz:
- Sahifaga bog'lamoqchi bo'lgan a> teg bilan langar yarating. Aniq va unutilmas ismni keltiring:
  
  a name = "Maslahatlar"> Siz havola qilayotgan matn. / a>
- Nisbatan havola yoki tashqi manbaga havola yaratish uchun href> tegidan foydalaning:
  
  a href = "sahifaga havola yoki sahifadagi langar nomi"> Havola sifatida xizmat qiladigan matn yoki rasm. / a>
- Boshqa sahifadagi nisbiy havola bilan bog'lanish uchun asosiy havola va langar nomidan keyin # belgisini qo'shing. Masalan, https://en.wikihow.com/learn-HTML#Tips bu sahifaning maslahatlar bo'limiga havolalar.

2dan 2 qism: Kengaytirilgan HTML

1 Xususiyatlar bilan tanishing. Atributlar yorliq ichida yozilib, qo'shimcha ma'lumotlarni ko'rsatadi. Xususiyatlarning formati quyidagicha: ism = "qiymat", qaerda sarlavha atributni belgilaydi (masalan, rang rang atributi uchun) va qiymat uning qiymatini ko'rsatadi (masalan, qizil qizil uchun).
- HTML asoslari haqidagi oldingi bo'limda atributlar ishlatilgan. Img> tegi atributdan foydalanadi src, nisbiy bog'lanish langari atributdan foydalanadi ismva havolalar atributdan foydalanadi href... Siz allaqachon sezganingizdek, barcha atributlar formatda yozilgan ___='___’.
2 HTML jadvallar bilan tajriba o'tkazing. Jadvalni yaratish har xil teglardan foydalanishni o'z ichiga oladi. Siz tajriba o'tkazishingiz yoki batafsil ko'rsatmalarni o'qishingiz mumkin.
- Jadval teglarini yarating:stol> / stol>
- Jadvaldagi har bir satr tarkibini teglar bilan yozing: tr>
- Ustun sarlavhasi teg bilan belgilanadi: th>
- Keyingi qatorlardagi hujayralar: td>
- Ushbu teglardan foydalanishga misol:
  
  jadval> tr> th> 1 -ustun: oy / th> th> 2 -ustun: tejash / th> / tr> tr> td> yanvar / td> td> 5000 rubl / td> / tr> / jadval>
3 Qo'shimcha bosh bo'limi teglarini bilib oling. Siz allaqachon har bir html faylining boshida keladigan head> tagini bilib oldingiz. Sarlavha> tegidan tashqari, ushbu bo'lim uchun boshqa teglar ham bor:
- Meta teglar o'z ichiga oladi metadatasaytni indekslash uchun qidiruv tizimlari tomonidan ishlatiladi. Saytingizni qidiruv tizimlarida topishni osonlashtirish uchun bir yoki bir nechta ochiladigan meta> teglardan foydalaning (yopish teglari shart emas).Bir teg uchun bitta atribut va bitta qiymatdan foydalaning: meta name = "description" content = "page description">; yoki meta nomi = "kalit so'zlar" mazmuni = "vergul bilan ajratilgan kalit so'zlar">
- Havola> teglar har xil turdagi kodlash yordamida yaratilgan va HTML-sahifani rang, matn hizalanishi va boshqa ko'plab xususiyatlar yordamida o'zgartirishga imkon beradigan uslublar jadvallari (CSS) kabi uchinchi tomon fayllariga ishora qiladi.
- JavaScript fayllarini sahifaga biriktirish uchun ishlatiladigan skript> teglar. Bu fayllar sahifani interaktiv tarzda o'zgartirish uchun kerak (foydalanuvchi harakatlariga javoban).
4 Boshqa saytlarning HTML kodi bilan tajriba o'tkazing. Boshqa veb -sahifalarning manba kodini ko'rish - bu HTMLni o'rganishning ajoyib usuli. Siz sahifani o'ng tugmasini bosib, brauzerning yuqori menyusidan manba ko'rish yoki shunga o'xshash narsani tanlashingiz mumkin. Notanish yorliq nima qilayotganini aniqlashga harakat qiling yoki Internetda bu haqda ma'lumot qidiring.
- Boshqa odamlarning saytlarini tahrir qila olmasangiz ham, keyinroq teglar bilan tajriba o'tkazish uchun manba kodini faylingizga ko'chirishingiz mumkin. E'tibor bering, CSS formatlashi bo'lmasligi mumkin va ranglar va formatlash boshqacha ko'rinishi mumkin.
5 Batafsil ko'rsatmalarni o'rganishni boshlang. Internetda W3Schools yoki HTMLbook kabi HTML teglariga bag'ishlangan ko'plab saytlar mavjud. Sotuvda qog'oz kitoblar ham bor, lekin standartlar o'zgarishi va rivojlanishi bilan eng yangi nashrni topishga harakat qiling. Yaxshisi, CSS -ni o'z saytingizning joylashuvi va ko'rinishini ko'proq nazorat qilish uchun o'zlashtirish. CSS -ni o'rgangandan so'ng, veb -dizaynerlar odatda JavaScript -ni o'rganadilar.

Maslahatlar

Notepad ++ - oddiy Notepad -ga o'xshash ajoyib bepul dastur, lekin siz o'z kodingizni brauzeringizda onlayn saqlashingiz va sinab ko'rishingiz mumkin. (U deyarli har qanday tilni qo'llab -quvvatlaydi - HTML, CSS, Python, JavaScript va boshqalar.)
Tarmoqda oddiy sahifani toping, kodni kompyuteringizga saqlang va u bilan tajriba o'tkazing. Matnni ko'chirishga, shriftni o'zgartirishga, tasvirlarni o'zgartirishga harakat qiling - nima bo'lishidan qat'iy nazar!
Siz daftarni teglar yozadigan joyda saqlashingiz mumkin, shunda siz ularni doim qo'lingizda ushlab turasiz. Siz ham ushbu sahifani chop etishingiz va unga havola qilishingiz mumkin.
Kod yozayotganda, buni siz va boshqa odamlar tushunishi uchun ehtiyotkorlik bilan bajaring. Foydalaning! - Sharhni bu erga kiriting -> HTML izohlari uchun: ular sahifada aks ettirilmaydi, lekin kod hujjatida ko'rinadi.
XML va RSS mashhurlik kasb etmoqda. XML va RSS texnologiyasini o'z ichiga olgan sahifalar kodini tajribasiz foydalanuvchi o'qishi va tushunishi qiyinroq, lekin bu vositalar juda foydali.
HTML-da belgilash teglari katta-kichiklarga sezgir emas, lekin biz standartlashtirish va XHTML muvofiqligi uchun faqat kichik harflardan (bu maqoladagi misollarda bo'lgani kabi) foydalanishni tavsiya qilamiz.

Ogohlantirishlar

So'nggi bir necha yil ichida ba'zi teglar ishlatilmay qoldi va ularning o'rniga bir xil yoki qo'shimcha effekt beradigan yangilar qo'yildi.
Agar siz o'z sahifangizni sinab ko'rmoqchi bo'lsangiz, W3 saytiga o'ting va zamonaviy HTML talablarini ko'rib chiqing. Vaqt o'tishi bilan HTML standartlari o'zgaradi va ba'zi teglar zamonaviy brauzerlarda yaxshiroq ishlaydigan yangilar bilan almashtiriladi.

Sizga nima kerak

Notepad (Windows) yoki TextEdit (Mac) kabi matn muharriri.
Qog'oz / bloknot (shart emas)
Notepad ++ (Windows) yoki TextWrangler (Mac) kabi HTML muharriri. (shart emas)