…HTML sintaksisini oʻrganish nisbatan sodda boʻlsa-da,…hali ham koʻplab elementlar, atributlar va…boshqa tushunchalar mavjudki, ularni oʻrganishingiz va kuzatib borishingiz kerak.…Bu kurs tanishtirish uchun moʻljallangan. Sizni HTMLning asosiy jihatlari bilan tanishtirsangiz, u... haqiqatan ham mavjud bo'lgan har bir element va atributni o'rgatish uchun mo'ljallanmagan....Shuning uchun men sizga bir nechta onlayn HTML resurslarini bermoqchiman,...bu sizga haqiqatan ham yordam berishi mumkin. HTML tilini o‘rganishni boshlaysiz va… keyinchalik mualliflik qilayotganingizda qimmatli havolalar bo‘lib xizmat qilishi mumkin sizning o'zingizniki sahifalar.…Endi biz spetsifikatsiyalardan boshlaymiz.…

Va bu, albatta, xatcho‘p qo‘yishingiz kerak bo‘lgan ikkita hujjat.…Demak, bu HTML5 ning W3Cs versiyasi.…Ularda eng so‘nggi nashriyot versiyasi borligini ko‘rishingiz mumkin.…Agar xohlasangiz, tahririyat loyihasini ko‘rishingiz mumkin. Quvurdan nima tushayotganini ko'ring.…Va bu juda katta.…Agar pastga aylantirsam, bu yerda shunchaki Mundarija ekanligini ko'rishingiz mumkin... Va men hammasini aylanib chiqmoqchi ham emasman. ulardan.…

Transkriptni avtomatik aylantirishni davom ettirish

HTML - bu internetni quvvatlaydigan dasturlash tili. Va har qanday til kabi, uni o'zlashtirganingizdan so'ng, oddiy veb-saytlar yoki murakkab veb-ilovalar bo'ladimi, o'zingizning tarkibingizni yaratishni boshlashingiz mumkin. Bu kurs asosiy narsalarni chuqur ko'rib chiqadi: HTML sintaksisi va eng yaxshi amaliyotlar. kodingizni yozish va tahrirlash. Katta xodim muallifi Jeyms Uilyamson odatiy HTML hujjatining tuzilishini ko‘rib chiqadi va sahifalarni qanday qismlarga ajratish va kontentingizni HTML yordamida formatlashni ko‘rsatadi. Bundan tashqari, havolalar va ro‘yxatlar yaratish hamda HTML qanday ishlashini bilib oling. Boy, qiziqarli foydalanuvchi tajribasini yaratish uchun CSS va JavaScript. Shunday qilib, matn muharririni oching, ushbu videolarni tomosha qiling va HTMLni toʻgʻri yozishni oʻrganishni boshlang.

Mavzularga quyidagilar kiradi:

• Nima uchun HTML muhim?
• HTML hujjatni o'rganish
• Tarkibni formatlash
• Tasvirlarni ko'rsatish
• Nav, maqola va div elementlaridan foydalanish
• Sahifalar va yuklab olinadigan kontentga ulanish
• Ro'yxatlarni yaratish
• Uslubni boshqarish (shriftlar, ranglar va boshqalar)
• Asosiy skriptlarni yozish

Dunyoda kim eng yoqimtoy, eng qizarib ketgan va eng sevimli? Hech qanday qo'pol narsa deb o'ylamang, men belgilash tilining yangi versiyasini nazarda tutyapman - HTML5. Eng so'nggi versiyalari Zamonaviy brauzerlar allaqachon ba'zi HTML5 fokuslarini tushunishadi, demak, uni loyihalaringizda ishlatishni boshlash vaqti keldi.

Bir qarashda HTML5 oddiy yangi versiya belgilash tili. Biroq, endi bu atama biroz boshqacha ma'noni anglatadi. HTML5-ni CSS3-ni eslatmasdan ko'rib chiqish shunchaki bema'nilik, chunki u holda chinakam zamonaviy veb-ilovalarni ishlab chiqish mumkin emas. Biz JavaScript haqida unutolmaymiz. Uning yordami bilan HTML5 standartida tasvirlangan boy API ga kirish amalga oshiriladi. Yuqorida aytilganlarning barchasini umumlashtirgan holda, ta'rif o'zini ko'rsatadi: HTML5 - bu veb-ilovalarni ishlab chiqish uchun ishlatiladigan zamonaviy texnologiyalar/standartlar (JS, HTML5, CSS3 va boshqalar).

HTML5 birdan paydo bo'lmadi. Uning rivojlanishi 2007 yilda boshlangan. W3C konsorsiumidan maxsus yaratilgan guruh ish jarayoni uchun mas'ul edi. Ammo HTML5 ning ko'pgina xususiyatlari Web Application 1.0 standarti doirasida ixtiro qilingan va ular 2004 yildan beri u bilan tanishib kelmoqda. Aslida, HTML5 birinchi qarashda ko'rinadigan darajada yosh texnologiya emas.

HTML5 spetsifikatsiyasining birinchi loyihasi 2008 yil 22 yanvarda taqdim etildi. Uch yil o'tdi, ammo spetsifikatsiyaning yakuniy versiyasi hali ham tayyor emas va keyingi yoki ikki yil ichida tayyor bo'lishi dargumon. Ushbu qayg'uli daqiqa ishlab chiquvchilarni o'z loyihalarida yangi xususiyatlarni diqqat bilan qo'llashga majbur qiladi. Spetsifikatsiya osongina o'zgarishi mumkin, ammo barcha zamonaviy brauzerlar emas (FireFox 4, Gugl xrom 10, IE9, Opera 11) yangi xususiyatlarni to'liq qo'llab-quvvatlaydi.

Biz HTML5 nazariyasi haqida juda uzoq vaqt gapirishimiz mumkin, ammo bizning bo'limimiz "Kodlash" deb nomlanadi, shuning uchun men sizni standartning imkoniyatlarini amalda sinab ko'rishga taklif qilaman. Men super-original retseptlar yaratish bilan bezovta qilmadim, lekin haqiqatan ham foydali bo'lgan va hozirda saytlaringizda ishlatilishi mumkin bo'lgan va kerak bo'lgan narsalarga misollar berishga qaror qildim. Xo'sh, ketaylik.

HTML5-ning yoqimli jihatlaridan biri (siz bunchalik ko'p energiya ichimliklar iste'mol qilmasligingiz kerak edi, chunki u erda "hiylalar" so'zi bo'lishi kerak - tahrirlovchining eslatmasi) HTML5-ning File API va Drag and Drop API-dan foydalanish qobiliyati edi.

Ularning yordami bilan siz foydalanuvchi kompyuteridan serverga fayllarni chiroyli o'tkazishni tashkil qilishingiz mumkin. Esingizda bo'lsin, oldin har doim fayllarni yuborish uchun "Browse" tugmasi bo'lgan maydon mavjud edi? Uni bosgandan so'ng, standart fayl tanlash dialog oynasi paydo bo'ldi, unda siz uzatish uchun faylni tanlashingiz kerak edi. Ushbu usulni qulay deb atash qiyin bo'ladi. Ayniqsa, yuklab olish navbatiga bir nechta fayllarni qo'shish haqida gap ketganda.

Biroz vaqt o'tgach, hunarmandlar ko'proq funksionallikni ta'minlovchi flesh-yuklovchilarni yaratishni boshladilar, ammo jiddiy kamchilikka ega edi - o'rnatilgan fleshga ehtiyoj. Bundan tashqari, har ikkala holatda ham foydalanuvchi sichqonchani sahifaga shunchaki sudrab o'tkazish uchun fayllarni qo'shish imkoniyatiga ega emas edi.

Ammo Drag&Drop texnologiyasi tizimda juda tez-tez ishlatiladi. Shaxsan men har doim ta'kidlashni xohlardim kerakli fayllar va kalamushning engil to'lqini bilan uni sahifaga tashlang. Bu standart dialog oynasi yordamida faylni qidirishdan ko'ra ancha qulayroqdir.

HTML5 o'z tuzatishlarini kiritdi va endi hech narsa faylni sahifaga o'tkazish uchun to'liq huquqli Drag&Drop-ni tashkil qilishingizga to'sqinlik qilmaydi. Google xodimlari bu xususiyatni Gmail’da birinchi bo‘lib joriy qilishdi. Agar siz Google-dan foydalansangiz, siz xatga biriktirish uchun fayllarni sudrab olishingiz mumkin bo'lgan joyni allaqachon payqagan bo'lsangiz kerak. Shaxsan men ushbu funktsiyadan faol foydalanaman va endi men sizga loyihangiz uchun qanday qilib yaratishni ko'rsataman. Loyihamiz uchta fayldan iborat bo'ladi: sample.html, style.css va scripts.js. Albatta, biz o'zimizni bitta html fayli bilan cheklashimiz mumkin edi, lekin keyin kod o'qib bo'lmaydigan bo'lib chiqadi. HTMLni JS yoki CSS bilan aralashtirishning hojati yo'q. Hamma narsani fayllarga bo'lish va keyin ular bilan xotirjam ishlash yaxshiroqdir. Avvalo, ilovamiz tuzilishini tayyorlaylik. sample.html faylini yarating va unga yozing:

Fayllaringizni shu yerga torting

JavaScript-da kod yozish qulayligi uchun men jQuery kutubxonasini qo'shdim. Shundan so'ng men kelajakdagi html hujjatning tuzilishini tasvirlab berdim. Bu juda oddiy - biz foydalanuvchi fayllarni sudrab olib tashlashi kerak bo'lgan maydonni tasvirlashimiz kerak. Bu faqat bitta div konteynerini talab qiladi. Agar siz hozir sahifani brauzerda ochsangiz, hech qanday yaxshi narsani ko'rmaysiz. Maydonimizni ko'zga ko'rinadigan qilish uchun biz uni CSS yordamida loyihalashimiz kerak. style.css faylini oching va unga quyidagi kodni yozing:

#quti (
kengligi: 500px;
balandligi: 300px;
chegara: 2px chiziqli #000000;
fon rangi: #FCFFB2;
matnni tekislash: markaz;
rang: #3D91FF;
shrift o'lchami: 2em;
font-family: Verdana, sans-serif;

Moz chegarasi radiusi: 8px;
-webkit-border-radius: 8px;
}
#yorliq (
pozitsiya: nisbiy;
yuqori: 2%;
}

"Quti" identifikatori - bu fayllarni qabul qilish uchun bizning kelajakdagi konteynerimiz (foydalanuvchi hujjatlarni ushbu hududga sudrab borishi kerak). Foydalanuvchi o'tkazib yubormasligi uchun men maydonni kattalashtiraman va ramka opsiyasi sifatida chiziqli - nuqtali chiziqlarni tanlayman. Oddiy nuqtali chiziqlar unchalik yaxshi ko'rinmaydi, shuning uchun men darhol xususiyatlar uchun qiymatlarni o'rnatdim: -moz-border-radius va -webkitborderradius. Endi siz yaratilgan sahifani brauzerda ochishingiz va umumiy ko'rinishni baholashingiz mumkin.

Biroq, agar siz hozir biror narsani sudrab chiqmoqchi bo'lsangiz, qiziq narsa bo'lmaydi. Surab olingan fayl shunchaki veb-brauzerda ochiladi va tamom. JavaScript kodining kichik bir qismi vaziyatni tuzatishga yordam beradi:

$(hujjat).ready(funksiya() (

//Hodisa ishlov beruvchilarini qo'shish

Var mybox = document.getElementById("box")

Mybox.addEventListener("dragenter", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("tashlash", tushirish, yolg'on);
});
dragEnter(evt) funksiyasi (

Evt.stopPropagation();

Evt.preventDefault();
}
dragExit(evt) funksiyasi (

Evt.stopPropagation();

Evt.preventDefault();
}
dragOver(evt) funksiyasi (

Evt.stopPropagation();

Evt.preventDefault();
}
funksiya tushishi (evt) (

Evt.stopPropagation();

Evt.preventDefault();

Var fayllar = evt.dataTransfer.files;

Var count = files.length;

Agar (hisoblash > 0)

HandleFiles (fayllar);
}
funktsiya handleFiles (fayllar) (

//Birinchi faylni oling

//Agar bir nechta bilan ishlash kerak bo'lsa

//fayllar, keyin bu erda siz qidiruvni tashkil qilishingiz kerak

Var fayl = fayllar;

Document.getElementById("label").innerHTML =
"Tutildi: " + file.name;

Var o'quvchi = new FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(fayl);
}
handleReaderProgress(evt) funksiyasi (

Agar (evt.lengthComputable) (

Agar (evt.loaded = evt.jami) (

Ogohlantirish ("Yuklangan...");
}
}
}

Bir qarashda, kod noqulay va tushunarsiz bo'lib tuyulishi mumkin, ammo JavaScript va jQuery bilan kamida bir oz tanish bo'lganlar nima bo'layotganini darhol tushunishlari kerak. Eng boshida men sodir bo'lishi meni qiziqtirgan voqealarni aniqlayman. Ularning har biri uchun men alohida funktsiyani tasvirlayman. Masalan, dragExit hodisasi foydalanuvchi sichqoncha kursorini sudrab ketayotgan elementdan uzoqlashtirganda yuzaga keladi. Agar foydalanuvchi faylni sudrab chiqsa, handleFiles() funksiyasi boshqaruvni oladi.

Unda men ataylab birinchi faylga (fayllarga) kiraman va u bilan ishlashni boshlayman. E'tibor bering, foydalanuvchi bir vaqtning o'zida bir nechta fayllarni sudrab olib tashlashi mumkin. Agar ilovangiz bunday vaziyatlarni hal qila olishi kerak bo'lsa, biz butun fayllar qatorini qidirishni tashkil qilamiz. handleFiles() funksiyasi barcha qiziqarli narsalar sodir bo'ladi.

Birinchidan, men yorliq elementida (“Fayllaringizni bu yerga torting” yozuvi esingizdami?) foydalanuvchi faol maydonga sudrab olib borgan fayl nomini ko‘rsataman, so‘ngra FileReader() tipidagi obyekt yordamida uni o‘qishni boshlayman. . Bu haqda ko'proq ma'lumotni ushbu maqolada o'qishingiz mumkin: html5rocks.com/tutorials/file/dndfiles. Har holda, FileReader() tipidagi ob'ekt uchun onProgress hodisasi ishlovchisini aniqlayman. Ushbu hodisa har safar ma'lumot o'qilganda chaqiriladi. Ishlovchining o'zida men shart qo'ydim: agar yuklangan ma'lumotlar hajmi fayl hajmiga teng bo'lsa, u holda o'qish muvaffaqiyatli yakunlandi va baxtli xabar ko'rsatilishi mumkin.

HTML5 paydo bo'lishidan oldin, Internetda videolarni tomosha qilish barcha turdagi flesh-pleerlar yordamida amalga oshirildi. Bu videolarni bu tarzda tomosha qilish noqulay, degani emas. Bizda yagona muammolar xavfsizlik bilan bog'liq (so'nggi paytlarda Flash Player oddiygina zaifliklar bilan to'la) va plaginni o'zi o'rnatish zarurati. HTML5 standarti nafis yechimni taklif etadi - o'rnatilgan video va audio kontentni ijro etish qobiliyati.

Ehtimol, ko'pchilik men teglar va teglar haqida gapirayotganimni allaqachon taxmin qilgan. Ular sizga audio va videoni to'g'ridan-to'g'ri sahifaga joylashtirish imkonini beradi. Biz hal qilishimiz kerak bo'lgan yagona umidsizlik - bu qo'llab-quvvatlanadigan kodeklar to'plami. Afsuski, bu to'plam har bir brauzer uchun farq qiladi, shuning uchun sizning videongiz Chrome'da mukammal ko'rsatilishi ehtimoli katta, ammo FireFox foydalanuvchilari o'rmonda qoladilar. Bunday vaziyatga tushib qolmaslik uchun xavfsizlik tarmog'i opsiyasiga e'tibor berish tavsiya etiladi - videoni Flash pleer yordamida o'ynatish. Biz yoqimlilik (yo'q, axir, u so'zlarni aralashtirmadi, uni animega qaramlik uchun elektrokonvulsiv terapiya bilan davolash kerak - Lozovskiyning eslatmasi) va muammolar haqida gaplashdik, endi amaliyotga o'tamiz. Videoni tinglashni namoyish qilish uchun men oddiy misol keltirdim:

Bu yerda video bo'lishi kerak. Agar siz ushbu matnni ko'rsangiz, brauzeringiz yangi standartni qo'llab-quvvatlamaydi.

Iltimos, yorliq misolida men poster atributini ko'rsatganimni unutmang. Unda men sahifa yuklangandan so'ng darhol ko'rsatilishi kerak bo'lgan grafik faylga yo'lni belgilayman - "birinchi ramka".

Bu nima uchun foydali bo'lishi mumkin? Shu bilan bir qatorda, bunday rasm sifatida kompaniya/loyiha logotipini kiritishingiz mumkin. Teg xuddi shu tarzda qo'llaniladi. Bu bir vaqtning o'zida media fayl uchun bir nechta manbalarni belgilash imkonini beradi. Shunday qilib, siz bir xil faylni turli formatlarda (ogg, mp3) yuklashingiz mumkin. Agar foydalanuvchining brauzerida mp3 kodek bo'lmasa, ogg o'ynashga harakat qilinadi. Ma'lum bo'lishicha, oddiy manipulyatsiyalar bilan moslik muammosini hal qilish oson va foydalanuvchi tarkibni qayta ishlab chiqarishi mumkinligiga ishonch hosil qilish mumkin.

Geolocation API - foydalanuvchi koordinatalarini aniqlash uchun dasturiy interfeys. Olingan ma'lumotlarga asoslanib, foydalanuvchining joylashuvini, masalan, Google Xaritalarda belgilash oson. Bu xususiyatdan qayerda foydalanish mumkin? Ha, ko'p joylar! Masalan, Twitter-ning mashhur mikrobloglar xizmati ishlab chiquvchilari Twitter mijozining veb-interfeysida Geolocation API-dan foydalanadilar. Agar foydalanuvchi o'z joylashuvini baham ko'rishga ruxsat bersa, u hozirda joylashgan shahar barcha tvitlariga qo'shiladi.

Shubhasiz, endi sizni “GAPIlar joylashuv ma’lumotlarini qayerdan olishadi?” degan savol qiynayapti. Ayg'oqchi sun'iy yo'ldoshlar va boshqa Bond narsalari ishtirok etadi deb o'ylamang. Hammasi ko'proq prozaik - tahlil qilish uchun ma'lumotlar to'plami IP-manzil, yaqin Wi-Fi ulanish nuqtalari, GPS (agar qurilma mavjud bo'lsa), GSM uyali identifikatori va boshqalar haqidagi ma'lumotlar asosida qurilgan. Agar siz yuqorida sanab o'tilgan manbalardan taxminiy koordinatalarni olish nazariyasi va amaliyoti bilan qiziqsangiz, men sizga ][ papkasini ochib, Stepning ushbu mavzu bo'yicha maqolasini topishingizni maslahat beraman, u erda u nazariy qismni chuqur tahlil qilgan va shuningdek, umumiy ko'rinish bergan. tegishli dasturiy ta'minot. Endi GAPI dan foydalanish misolini ko'rib chiqamiz. Hammasi juda oddiy va tushunarli:

agar (navigator.geolocation) (
navigator.geolocation.getCurrentPosition(
funktsiya (pozitsiya) (
document.getElementById("kenglik").innerHTML =
position.coords.latitude;
document.getElementById("uzunlik").innerHTML =
pozitsiya.koordinatlar.uzunlik;
},
);
}

Kenglik: noma'lum

Uzunlik: noma'lum

Koordinatalarni olishga harakat qilishdan oldin, brauzeringiz GAPI-ni qo'llab-quvvatlashiga ishonch hosil qilishingiz kerak. Agar geolokatsiya usuli rost bo'lsa, unda hamma narsa tartibda va siz koordinatalarni olishga harakat qilishingiz mumkin. Buning uchun navigator obyektining getGurrentPosition usulidan foydalanamiz. Agar muvaffaqiyatli bo'lsa, biz to'g'ridan-to'g'ri hujjatga yuboriladigan koordinatalarni olamiz.

Veb-ilovalarni ishlab chiqishda biz ma'lumotlar bazalaridan foydalanishga odatlanganmiz. MySQL, SQLite har bir dasturchiga tanish bo'lgan mahsulotlardir. HTMLning beshinchi versiyasi bizga yana bir sovg'a - mustaqil SQLite ma'lumotlar bazasidan foydalanish qobiliyatini olib keladi. STOP!

Ma'lum bo'lishicha, barcha ma'lumotlar foydalanuvchining kompyuterida saqlanadimi? Ha shunday. Bu xavfsiz emas deb baqirishga hojat yo'q. Muayyan loyihalar uchun bu xususiyat foydali bo'lishi mumkin. Afsuski, hali hamma brauzerlar ushbu ma'lumotlar bazasi bilan ishlashga ruxsat bermaydi.

Misol uchun, IE9 va FF4 hali bu xususiyatga ega emas, shuning uchun siz ushbu xususiyat bilan faqat Google Chrome brauzerida amalda tanishishingiz mumkin. Men haqiqiy kodga misol keltirmayman, lekin faqat umumiy ishlash printsipini ko'rsataman:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("agar mavjud bo'lmasa mytable yarating" +
"checkins (id integer birlamchi kalit asc, field_number_one string)",
, function() ( console.log("So'rov muvaffaqiyatli yakunlandi"); ));
);

Yuqoridagi misolni diqqat bilan ko'rib chiqsangiz, siz umuman olganda, o'rnatilgan ma'lumotlar bazasi bilan ishlash oddiy SQLite bilan bir xil tarzda sodir bo'lishini ko'rasiz: biz ma'lumotlar bazasini ochamiz, so'rov matnini tayyorlaymiz va uni bajaramiz.

Loyihalaringizda HTML5 dan foydalanasizmi yoki yo'qmi, bu sizga bog'liq. Menimcha, hozir vaqt. Agar siz professional veb-sayt ishlab chiqaruvchisi bo'lsangiz, HTML5 xususiyatlarini hozir joylashtirishga dangasa bo'lmang. Albatta, moslik haqida g'amxo'rlik qilishni unutmang - zamonaviy brauzerlarni ham, eskirganlarini ham qo'llab-quvvatlang. Buning uchun sizga kerak bo'lgan hamma narsa bor. Sekinlashmang va loyihalaringizni boshqalardan ajratib ko'rsatishga harakat qiling. Omad!

Ushbu maqola davomida men buni aytdim hozirda Zamonaviy brauzerlar turli darajadagi HTML5 funksiyalarini qo'llab-quvvatlaydi. Shuning uchun siz ehtiyot bo'lishingiz va juda ekzotik narsalarni ishlatmaslikka harakat qilishingiz kerak. Darhol savol tug'iladi: "Muayyan brauzer qaysi HTML5 xususiyatlarini qo'llab-quvvatlashini qanday aniqlash mumkin?" Ushbu muammoni hal qilishning bir necha yo'li bor, lekin mening sevimli narsam Modernizr (modernizr.com) deb nomlangan kichik JavaScript kutubxonasidan foydalanishdir.

Kutubxona butunlay bepul tarqatiladi va uni loyihangizga ulaganingizdan so'ng u darhol brauzeringiz qo'llab-quvvatlaydigan HTML5 funksiyalari ro'yxatini ko'rsatadi. Kutubxonaning funksionalligini tekshirish uchun uni darhol yuklab olishingiz va loyihangizga ulashingiz shart emas. Siz shunchaki kutubxonaning rasmiy veb-saytiga kirishingiz kerak va siz brauzeringiz nimani qo'llab-quvvatlayotganini va nimani qo'llab-quvvatlamasligini darhol ko'rasiz. Saytga qachon tashrif buyurganingizning skrinshotlariga qarang Google yordami Chrome va Internet Explorer 9. Yaxshi PR kampaniyasi va maqtovli maqolalarga qaramay, Microsoft brauzeri Google Chrome-ga qaraganda kamroq funksiyalarni qo'llab-quvvatlaydi.

HTML5 ning eng qiziqarli xususiyatlaridan biri bu animatsiyalarni yaratish qobiliyatidir. Bunga HTML5 va CSS3 ni aralashtirish orqali erishiladi.

Ushbu animatsiya juda chiroyli ko'rinadi va ko'p hollarda Flash o'rnini bosishi mumkin. Ishonch bilan ayta olamanki, bu tez orada sodir bo'lmaydi, chunki endi tushunarsiz HTML5/CSS3 kodini (IMHO) tushunishdan ko'ra Flashni o'zlashtirish osonroq. Shunga qaramay, siz bunday xususiyat haqida bilishingiz kerak. Men sizga quyidagi havolalarga rioya qilishingizni va animatsiya imkoniyatlarini ko'rsatadigan go'zal demolarni o'z ko'zingiz bilan ko'rishingizni tavsiya qilaman.

• Canvas imkoniyatlarini ko'rsatadigan chiroyli demo: feedtank.com/labs/html_canvas;
• Google'dan o'rnatilgan qidiruv paneliga ega chiroyli 3D quti: ;
• Bir marta bosish va sahifa to'plar bilan to'ldirila boshlaydi. Ko'proq bosish - ko'proq to'p. Sahifani oxirigacha to'ldirganingizdan so'ng, ularni keskin sudrab ko'ring. Juda kulgili ko'rinadi: mrdoob.com/projects/chromeexperiments/ball_pool ;
• Turli xil kimyoviy birikmalarni ko'rsatadigan ajoyib demo. Albatta ko'rishga arziydi: alteredqualia.com/canvasmol;
• Hech qachon o'zingizni patolog kabi his qilishni va inson tanasining sirlarini o'rganishni xohlaganmisiz?

Ha bo'lsa, bu havola albatta siz uchun. Google WebGL, HTML5, CSS3 va Flash texnologiyalari aralashmasidan foydalangan holda ajoyib demo yaratdi. Kokteyl natijasi 3D inson tanasini namoyish qiluvchi interfaol dastur bo'lib, unda siz ichki organlarning tuzilishini tekshirishingiz mumkin. Uni birinchi marta ko'rganimda, o'zimni yirtib tashlay olmadim.

Men bu qizg'in mavzuni davom ettirishga qaror qildim. Men ushbu masalalarni o'rganishga qiziquvchilarga yordam berish uchun html va CSS-ni o'rganish uchun eng yaxshi manbalar ro'yxatini tuzdim. Esimda, men webmaster sifatida ish boshlaganimda, yuqori sifatli va foydali resurslarning bunday tanlovini juda sog'indim.

Avval ba'zi ta'riflar:

Html (ingliz tilidan "HyperText Markup Language" - gipermatn belgilash tili) veb-sahifalar uchun standart belgilash tilidir.

Css (ingliz tilidan "Cascading Style Sheets" - kaskadli uslublar jadvallari) - bu veb-sahifaning ko'rinishini tavsiflash texnologiyasi.

Html va CSS-ni bilmasangiz, veb-saytingizni ishga tushirish juda muammoli bo'ladi - siz hatto statistika hisoblagichini ham, hatto bannerni ham o'rnatolmaysiz. Yordam uchun mutaxassislarga murojaat qilishimiz yoki forumlarda mavzu ortidan mavzu yaratishimiz kerak emasmi? Siz shunchaki qabul qilishingiz va o'rganishingiz kerak.

O'z tajribamdan shuni aytishim mumkinki, html va css ni 1 oyda o'rganish mumkin. Albatta, men professional balandliklar haqida gapirmayapman - agar xohlasangiz, ularga o'zingiz erisha olasiz.

Mening fikrimcha, Eng yaxshi yo'l html, CSS va boshqa mavzularni, jumladan, veb-saytni reklama qilishni o'rganish, o'z veb-saytingizga ega bo'lishni va unda mashq qilishni anglatadi. Aytgancha, siz Counter-Strike o'yini uchun xaritalar uchun men yaratgan birinchi veb-saytni ko'rishingiz mumkin, uni yaratish men o'sha paytda juda qiziq edi. Mana, Globator chol tomonidan yaratilgan xaritalar va ularning skrinshotlari, o'sha kunlarda u eng yaxshi 10 talik, TCI va PR nima ekanligini bilmagan va uch o'lchamli xaritalarni yaratib, quyoshda bemalol o'ynagan :) Bu saytni html va css ni amalda o'rganib, bir oyda yaratdim.

HTML va CSS ni o'rganish uchun texnik mutaxassis bo'lish shart emas. Misol uchun, men odatda gumanistman va matematikada men asosan "2" oldim :) Shunday qilib, har kim html va css ni o'rganishi mumkin. Men sanab o'tgan resurslar ham mos keladi, shuning uchun istalgan vaqtda ulardan html va CSS bilan bog'liq o'zingizni qiziqtirgan har qanday nuqtani bilish uchun foydalanishingiz mumkin.

Html va css o'rganish uchun veb-saytlar

Men o'zim foydalangan saytdan html va CSS-ni o'rganish uchun foydali resurslarni tanlashni boshlayman. Bu Valentina Axmetzyanova aka Dikarka tomonidan yozilgan Wild html darslari. U barcha kerakli fikrlarni shu qadar quvnoq va qiziqarli tasvirlab berdiki, uning darslari yordamida html va CSS-ni o'rganish qiziqarli mashg'ulotga aylanadi. Aytgancha, siz blog uchun saytni o'qishingiz mumkin. Yovvoyi darslar html va CSS-ni webmaster sifatida ishlash uchun zarur bo'lgan darajada o'rganish uchun etarli.

Tasavvur qila olasizmi, agar men Photoshop mavzusini yanada rivojlantirsam, kim bo'lardim? Men haqiqiy yirtqich hayvon bo'lardim! Lekin men SEO va o'simliklar bilan shug'ullanib, bu harflarni sovuqdan siqilgan barmoqlar bilan yozdim :) Hazillashaman, bu yerda ham issiq va taomlari yaxshi :)

Oxirgi yangilanish 2019-yil 09-noyabr 06:54:54 (UTC/GMT +8 soat)

HTML qisqartmasi Hyper Text Markup Language veb-sahifalar va veb-brauzerda ko'rish mumkin bo'lgan boshqa turdagi hujjatlarni yaratish uchun ishlatiladi.

HTML - bu World Wide Web Consortium tomonidan belgilangan va qo'llab-quvvatlanadigan standart.

O'zining ixtirosidan boshlab HTML turli versiyalar orqali rivojlandi. HTMLning hozirgi versiyasi HTML 4.01.

HTMLning keyingi versiyasi HTML 5 bo'lib, u ishlab chiqilmoqda, ammo ishlab chiquvchilar uning ba'zi funksiyalaridan foydalanishni allaqachon boshlashgan.

Keyingi sahifalarda biz HTML 4.01 ni batafsil muhokama qilamiz. Buni o'rganib, siz o'zingiz veb-sahifalar yaratishingiz mumkin bo'ladi.

Oddiy veb-sahifaning HTML kodi

Misol HTML sahifasi Bu misol HTML sahifasi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi va lacus euismod egestas. In hac habitasse platea dictumst. In sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilis. Donec va odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi va sem eget nisl euismod porta. Sed semper, tortor eu molestie iaculis, felis massa vestibulum massasi, vitae suscipit arcu nunc quis ante. Phasellus aliquam elit va nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Quvvatni to'xtatib turish. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Turli xil skrikalar mavjud.

Veb-saytdan HTMLni o'rganing

Bu HTML sahifasiga misol

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi va lacus euismod egestas. In hac habitasse platea dictumst. In sagittis magna eu odio interdum mollis. Phasellus sagittis pulvinar facilis. Donec va odio volutpat tortor volutpat commodo. Donec vehicula vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing tortor, at condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis adipiscing viverra. Morbi va sem eget nisl euismod porta. Sed semper, tortor eu molestie iaculis, felis massa vestibulum massasi, vitae suscipit arcu nunc quis ante. Phasellus aliquam elit va nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Quvvatni to'xtatib turish. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan velit sed lacus pellentesque in gravida nunc ultrices. Turli xil skrikalar mavjud.

w3resource HTML darsliklarining xususiyatlari

Biz barcha HTML 4.01 elementlarini yoki teglarini va ularning atributlarini qamrab oldik. Chunki bu HTML elementlari (yoki teglar) va atributlar bo'lib, siz HTMLni o'rganish uchun tushunishingiz kerak. HTML yorlig'i yoki elementlarini HTML darslarimizda muhokama qilishda biz sizga yaxshiroq tushunishga yordam berish uchun quyidagi xususiyatlardan foydalandik:

1. Biz aniq va oddiy tavsif bilan boshladik.

2. Uni qanday yozishni eslab qolishingiz uchun Sintaksisni berdik.

3. A Amalda qanday yozishni ko'rsatish uchun foydalaning.

4. Foydalanish natijasini ko'rsatdik.

5. HTML teglari elementni yopish uchun va tugatish tegiga ega bo'lishi yoki bo'lmasligi mumkinligi sababli, biz har doim Boshlash va tugatish teglari kerak yoki kerak emasligini ko'rsatib turamiz.

6. HTML elementi qaysi Turkumga tegishli, ya'ni. agar u matn yoki sarlavha yoki shakllar yaratish uchun bo'lsa.

7. HTML tegida yana qaysi elementlar yoki qanday turdagi kontent bo'lishi mumkin.

8. HTML tegi qaysi boshqa elementlar ichida joylashishi mumkin.

9. Bu tegning turli atributlari, ularning tavsifi va misollar.

10. Ushbu HTML tegiga misol.

11. Ushbu misolning natijasi.

12. Misolni brauzerda ko'ring.

13. Bu teg turli brauzerlarda qanday ko'rinadi.

Ushbu sahifada standartlarni ishlab chiqishda ishtirok etadigan shaxslar uchun materiallar mavjud.

Ushbu ma'lumotlarning aksariyati parol bilan himoyalanmagan. Biroq, ba'zi sahifalarga kirishda sizga parol kerak bo'lishi mumkin.

ISO qo'mitalari, ishchi guruhlari yoki "Konsensusga erishish uchun birlashish" a'zolari axloq kodeksi tamoyillariga muvofiq ishlashga da'vat etiladi.

Standartlarni ishlab chiqish jarayonida qonun hujjatlariga rioya qilish bozor mexanizmlarining samarali ishlashini ta’minlash va raqobatbardoshligini oshirish, shuningdek, standartlarga ishonchni oshirishda muhim ahamiyatga ega. ISO standartlarni ishlab chiqish jarayonining barcha ishtirokchilariga huquqiy masalalar bo'yicha ko'rsatmalar beradi.

Raqobat qonunchiligi qoidalariga oid har qanday savollarni quyidagi manzilda ISO yuridik guruhiga yuborish mumkin E-pochta manzili.

Standartlashtirish bo'yicha faoliyatning barcha ishtirokchilari ISO nashrlari va loyihalarni ishlab chiqish, shuningdek, ISO bilan bog'liq har qanday tarkibga nisbatan mualliflik huquqini hurmat qilishlari kerak. Ushbu qoidalar Deklaratsiyada aks ettirilgan bo'lib, standartlashtirishdan manfaatdor barcha tomonlar kelishishlari kerak.

ISO standartlarini ishlab chiqish jarayonlari ishtirokchilari taklif qilinishi mumkin (masalan, ommaviy axborot vositalari) yoki o'z tashabbusi paydo bo'lishi mumkin (masalan, orqali ijtimoiy tarmoqlar) tashqi tomonlar bilan qo'mita faoliyatining turli jihatlari haqida ma'lumot almashish. ISO bunday tashqi shovqinlar uchun operatsion siyosatni ishlab chiqdi.

Ushbu siyosat bilan bog'liq har qanday savol bo'lishi mumkin elektron pochta TMB kotibiyati: .

Standartlashtirish jarayonida ishtirok etayotgan barcha tomonlar ma'lumotlarni himoya qilish bo'yicha huquq va majburiyatlarga ega. Bular ISO a'zolari uchun ishlab chiqilgan Ma'lumotlarni himoya qilish siyosatida, shuningdek, deklaratsiyada aks ettirilgan bo'lib, unga barcha ishtirokchilar rioya qilishlari kerak. bu jarayon. Bu ISO AT xizmatlarida saqlanadigan ma'lumotlarga, shuningdek, standartlashtirish ishlari davomida to'plangan ko'plab shaxsiy ma'lumotlarga (masalan, davomat ro'yxatlari, daqiqalar) taalluqlidir.

ISO sanktsiyalar va standartlarni ishlab chiqish jarayoni bilan bog'liq masalalarni jamlagan hujjatni ishlab chiqdi.

ISO ishi bozor ehtiyojlarini yanada samarali qondirish uchun manfaatdor tomonlar tomonidan, manfaatdor tomonlar uchun standartlar ishlab chiqilishini ta'minlashga qaratilgan.

Quyida siz manfaatdor tomonlarni jalb qilish bo'yicha yo'riqnoma beruvchi hujjatlarni topishingiz mumkin.