Xurmatli Web sahifani sabr bilan hamma html darslarini o'qib o'rgangan yurtdoshlar, barchangizga tashakkurimni bildiraman. Sizlarni tabriklasam ham bo'ladi sizlar juda muhim bo'lgan bosqichni o'tib bo'ldingiz
Xurmatli Web sahifani sabr bilan hamma HTML darslarini o'qib o'rgangan yurtdoshlar, barchangizga tashakkurimni bildiraman. Sizlarni tabriklasam ham bo'ladi sizlar juda muhim bo'lgan bosqichni o'tib bo'ldingiz. Bu o'rganganlarinigizning hammasi HTML borasida edi. Ba'zi ma'lumotlar tushib qolgan bo'lsa uzurimni aytaman, iloji boricha to'liq o'rgatishga harakat qildim, ba'zi muhim bo'lmagan ma'lumotlarni tashlab ketishimga ham to'g'ri keldi chunki sizlarni juda ko'p ma'lumotlar bilan qo'rqitgim kelmadi. Yoki shunchaki juda maydalanibti deb tashlab qo'yishinglarni ham inobatga oldim, shuning uchun eng qisqa va lo'nda qilib tushuntirishga harakat qildim, biroq ishoning hech bir HTML kitobida bu qadar to'liq ma'lumotlarni topa olmaysiz, o'zim kamida 20 ta Ingliz tilidagi HTML kitoblarni o'qib olgan bilimlarimni bitta qilib tushurdim, oralarizda HTML ni kitobdan o'qib o'rganishga urungallarilar b'olsa bu so'zimni tasdiqlashi mumkin. Agar sizda HTML borasida biron savollar tug'ilgan bo'lsa yoki tushunsizmovchiliklar bo'lgan bo'lsa be'malol menga pochta orqali bog'lanishingiz mumkindir, men sizlarga hizmat qilish uchun shu web sahifani yaratganman, shunday ekan sizlardan habarlar kutib qolaman.
Ochig'ini aytsam siz Web sahifa yaratish uchun eng muhim bo'lgan birinchi katta qadamni tashladingiz. HTML ning o'zida yaratgan web sahifa azgincha soddaroq tuyilyatgandir sizga, lekin afsuski HTML bir o'zi qila oladigan hamma narsani 99% o'rgandingiz. HTML ning bir o'zi bundan ortig'ini bajara olmaydi. Lekin buning ham yechimi bordir. 21- Texnologiya asri davrida bunday sodda web sahifalar unchalik muvaffaqiyatli chiqmaydi. Murakkab web sahifalar "Dynamic Websites" deb ataladi.
Dynamic website lar yaratish uchun sizda boshqa qo'shimcha Cascading Style Sheet (CSS), JavaScript va PHP dasturlari borasida ham bilimlar bo'lishi talab etiladi. Bu dasturlar HTML dasturiga qo'shimcha tarzda hizmat qiladi va HTML ni yaxshi o'zlashtirganlar uchun bu dasturlarni to'liq o'rganish juda oson kechadi. Ushbu uchta dasturlarni to'liq o'rganish ketma ketligi quyidagichadir, ya'ni birinchi CSS (10 ta dars), ikkinchi navbatda JavaScript (20 ta dars), keyin PHP (30 ta dars). HTML ni bilganga CSS juda osondir, HTML va CSS ni bilganga esa JavaScript osondir, bu uchala dasturlarni yaxshi o'zlashtirgan PHP ni bemalol ishlata oladi. Agar sabr bilan o'rgansangiz hammasini bemalol olib ketishingizga ishonaman.
Dynamic Website yaratishni o'rganish nima uchun kerak degan savol ba'zilarinigizda paydo bo'lishi mumkin.
Dynamic website nega kerak.
- dynamic website lar chiroyli ko'rinishga ega bo'ladi
- dynamic website yaratish uchun bu dasturlarni ishlatish ancha vaqtingizni tejaydi, kam kodlar kiritib ko'p natijalarga erishasiz.
- haqiqiy web master bo'lasiz, bu dasturlarni bilmaslik web sahifa yarata olaman deyishdan ancha yiroq, ya'ni bu 3 dastur web masteri uchun o'rganish majburiy va shartdir.
-
Cascading Style Sheet (CSS)
CSS - HTMLning qo'shimcha dasturi bo'lib web masterlar uchun to'liq o'rganish talab qilinadi, bu dastursiz HTML ning o'zi ko'p funksiya bajara olmaydi.
CSS o'rganish juda oson va qulay dastur, qulayligi hadeb HTML kodlarini qayta-qayta yozavermasdan bitta yaratilgan qoidani hohlagan matnga, rasmga va hamma hamma narsaga qo'llashingiz mumkin bo'ladi faqat id=" ", yoki kabi attributlarga o'sha qoidalarni nomini kiritsangiz bo'lgani bemalol ishlatishingiz mumkin bo'ladi. Bu dastur HTML kabi Faqat web sahifa yaratish uchun mo'ljallangandir.
HTML bilan qilib bo'lmaydigan juda ko'p funksyalar mavjud, quyida ba'zi birlarini aytib o'taman:
Tasavvur qiling siz bitta website ning 20 ta sahifasini hammasini HTML yordamida tuzdingiz, siz va nihoyat websiteni tayyor holatini sizga web sahifa qilib berish taklifini bergan korhona yoki tashkilotga ko'rsatdingiz, tayyor holatini ko'rganch boshida o'zi tanlagan foni, yozuvning o'zi yoki ranglari azgincha yoqmaganini bildirdi va uni boshqasiga o'zgartirishingizni sizdan iltimos qildi (masalan times new roman o'rniga arial) va siz qilishiz kerak bo'lgan narsa quyidagichadir:
1. 20 ta sahifaning har birini
, va hakazo taglarni har bir HTML dokumentdan qidirib topib (nimani o'zgartirish kerak bo'lsa o'sha tagni qidirib topib) hammasiga bitta bitta o'zgartirishni kiritishingizga to'g'ri keladi. Lekin CSS ni bilsangiz 20 ta sahifaning hammasini bitta so'z bilan CSS dokumentizda o'zgartirib o'zgaritirgan CSS dokumentizi "Save" qilib saqlashingiz kifoyadir, agar klaviaturada yaxshi ishlasez har qanday elementni o'zgartirish uchun sizni 30 soniyadan ortiq vaqtiz ketmasligi mumkin, hatto 20 ta web sahifaning bironta HTML dokumentlarini ochishning ham hojati yo'qdir.
2. Web sahifaning tez va oson web browserda yuklanishi ham juda muhim jihatlardan sanaladi chunki sizni sahifangiz har hil tezlikka ega Internet foydalanuvchilari tamonidan tashrif buyurilshi mumkin, agar sizni sahifangiz yuklanishi HTML dokumentizda kod va ma'lumotlarning ko'pligini evaziga sekin yuklansa hali to'liq ochilib bo'lmasidan tashrif buyurayotgan shaxs yopib yuborishi hech gap emas. Biroq siz CSS dokumentizi HTML dokumentiz bilan bitta kodi bilan bog'lab hamma buyruqlarni CSS dokumentga kiritsangiz barcha 20 ta web sahifangiz uchun o'sh kiritgan bitta CSS dokumentiz hizmat qiladi va oqibatda HTML da kam kodlar demakdir.
3. Shuningdek hozirda web browserlarning mukammal datajada rivojlanishlari oqibatida sizning web sahifangiz CSS dokumentiga ham web sahifaga tashrif buyuruvchi kirishi mumkindir va istalgan o'zgarishni kiritib sizni web sahifangizni o'zi istalgan holda ko'rish imkoniyatini ham beradi. Masalan ko'zi mayda harflarga uncha o'tmaydigan shaxs siz kiritgan 14pt o'lchamli yozuvni o'ziga qulay qilib 16pt yoki 18pt o'lchamli qilib olishi mumkindir va buning uchun tashrif buyuruvchi ham CSS ni yaxshi tushunishiga to'g'ri keladi.
Nega CSS?
HTML- web sahifaning matn strukturasini tuzadi, CSS esa o'sha matnni (ramslar, videolar, so'zlar, gaplar, va hamma hamma narsa) HTML qila olmaydigan darajada go'zal qilib formatlaydi va mukammalshtiradi.
Bitta CSS dokument bilan bir nechta HTML dokumentlarni nazoratini qo'lga olish mumkin.
HTML dokumentlarda kam kodlar demakdir oqibatda sizning kod kiritish vaqtingizni tejaydi.
CSS juda puhta va tushunarli, qoidalar kam.
CSS - Web masterlar uchun o'rganish majburiydir, CSS ni bilmagan Web Master emasdir.
CSS ning Qulayligi nimada?
CSS dan HTML da foydalanishning uch hil yo'li bordir, va uchala uslubning ham o'ziga yarash qulayliklari ko'pdir. Quyida o'sha uchala yo'lni qisqacha ko'rib chiqamiz.
1. INTERNAL: - ICHKI demakdir HTML dokumentning
... qismida huddi quyidagi misolga o'xshab keladi, bu HTML dokumentda nechta
...
ishlatilinsa hammasi qizil bo'ladi, har birida HTML ning elementini ishlatish shart emas. Shuningdek CSS da id va class tushunchalari bordir ular matnimizning muayyan qismiga istalgan holda ishlatiladi va quyidagi misoldan ham juda qulaydir va mukammalroq funksiya bajaradi.
Qayerda matnni yangi abzastdan boshlasangiz hamma p lar uchun huddi shu yozuv o'rinli bo'ladi.
HTML dokumentizi qayerida
...
ishlatsangiz u uchun CSS yordamida tuzilgan div buyruqlari o'rinli bo'ladi, Har bir div uchun attribute ishlatib o'tirmisiz.
...
,
,
) taglar uchun quyidagi "{ }" orasidagi buyruqlarni amalga oshir deganidir, huddi HTML dagi taglarning attributelari kabi. Boshqacha qilib aytganda tag attributelariga judayam o'xshash, lekin ulardan ko'ra ko'proq hususiyatlarga egadir. Ya'ni HTML dagi o'rniga CSS da body {background-color:#FF0000;} ikkalasi bir hil funksiyani amalga oshiradi. Agar CSS da body {background-color:#FF0000;} yozilsa HTML da tagi bir o'zi hech qanday attributelarsiz keladi chunki CSS elementlari attribute vazifasini o'taydi. HTML dokumentimizning ...
id="birodar">Bu matn browserda sariq rangda va web sahifa markazida paydo bo'ladi
,
va
lar uchun CSS ning elementlari attribute vazifasini o'tashini tushuntirgan edim, lekin siz ba'zi
yoki
lar uchun bu elementlar qo'llanmasligini va ular uchun boshqa elementlar bo'lishini hohlashingiz tabiiydir, u holda CSS da "p.birodar" qilib belgilab HTML da
qilib ishlatishingizga to'g'ri keladi. Shunda CSS dagi p {font-family:arial; font-size:14pt; font-style:italic; color:#660000; } buyruqlari sizning HTML dagi
...
orasida keladigan ma'lumotingizga ta'sir qilmaydi, va aksincha CSSda "p.brodar {font-family:times new roman; font-size:16pt;} qilib yozib olingan qoidalar
...
uchun o'rinli bo'ladi. Lekin nega aynan "p.birodar", ".birodar" qilsak bo'lmaydimi, baribir ikkala holatda ham tag ichida ishlatilinadiku? - degan savol tug'ilishi tabiiy. Bunday qilishdan 2 hil maqsad bordir: birinchisi
larning ko'p va har hil bo'lishi mumkinligi hohishga qarab va ularni bir biridan ajratish oson bo'lishi uchun (masalan: p.bir, p.ikki, p.uch), ikkinchi maqsad p.birodar faqat
uchundir, agar .brodar ni ishlatsak unda boshqa taglarga ham qo'llanishi mumkin bo'lib qoladi .brodar qaysi taglar uchun yaralgani sizni chalg'itishi mumkin katta ma'lumotlar kiritganizda.
"Quyidagi (b) misolda uni yaqinroq tushunishga harakat qilamiz, agar tushunrsizlik bo'lsa email orqali habar bering aniqroq tushuntirishga harakat qilaman, biroq ikkinchi darsda ko'proq misollarda ko'rsangiz albatta yaxshi tushunib olasiz chunki bu qoidalar juda oson, siz asosan CSS da "{ }" orasidagi qiymatlar turlari va har birining bajarish funksiyalari va vazifalarini o'rganasiz, qolgan hamma narsa mutlaqo osondir. Hozir birinchi bo'lib (a) Misolni ko'raylik, keyin (b) Misol.
(a) Misol:
CSS Darsliklari
>Bu matn browserda sariq rangda va web sahifa markazida paydo bo'ladi
Bu matn birinchi p {} qiymatlarini o'z ichiga oladi, barcha
...
lar orasidagi matn shu ko'rinishda paydo bo'ladi.
>Bu matn ikkinchi bo'lib yozilgan p.brodar {} orasidagi qiymatlarni o'zi uchun o'rinli qilib belgilaydi, har qanday
tagi ichida kelsa shunday yozuvda paydo bo'ladi.
...
#000000">">Bu matn shunchaki style yordamida tuzilgandir.
qismida kelishi mumkingdir, lekin CSS qoidalari uchun HTMLning
Oddiy matn ko'rinishi:
body {background-color} web sahifaning o'zini orqa fon rangi hisoblanadi va u #ff0000 hexadecimal rang kodi bilan belgilangandir.
Bu tag yordamida yozilgan har qanday text orqasi #6495ed rangda bo'ladi.
Yangi abzastdan yozilgan har qanday text orqais #e0ffff rangda bo'ladi.
Bu abzast odatiy abzastdan farqliroq holda orqa foni #00ff00 rangda bo'ladi.
DIV tagi orasida har qanday text kelishidan qatiy nazar orqa foni #b0c4de rangda bo'ladi.
Har qanday yaratadigan linkizni orqa foni yellow rangida bo'ladi.
tagi uchun ishlatmaganiz maqul chunki CSS ni ba'zi kodlarini qo'llamaydigan hozircha 5% web browserlar bor lekin uning ham yechimlari topilish atafasida. qiymatlari:
background-image:none; - "none" tarjimasi hech narsa, hech bir degan ma'nolarni beradi, demak bu kod ishlatilinsa hech qanday rasm yo'q deganidir, ishlatmasangiz ham bo'ladi shundoq ham hech qanday rasm hech bir element orqasiga o'ziz yuklamagunizcha yuklanmaydi. bu kod qo'yilgan rasmni o'chirish uchun qulay shundoq qiymatini o'zgartirsangiz bo'lgani.
background-image:url(rasm_nomi.jpg); - bu property yordamida web sahifaning deyarli barcha narsasiga orqa fon yoki rasm qo'yishimiz mumkindir, faqat rasm manzilini rasm formati (.jpg; .jpeg; .png;) bilan qavs "(rasm_nomi.jpg)" ichida to'g'ri ko'rsatilsa bo'lgani.
(a) Quyidagi holda hamma
...
orasida keladigan matnlarning orqa foni ko'rsatilingandir, siz shuningdek istalgan tag uchun bunday rasmni ishlatishingiz mumkindir.
Bu qatorga orqasiga rasm o'rnatiligandir CSS kodi: h4 {background-image:url(002.jpg);}
background-image:inherit; -
background-repeat - Bu property faqatgina bacground-image:url(rasm.jpg); ishlatilingandagina ishlatilinadi, sababi orqaga qo'yilgan rasmning ko'rinishiga nisbatan beriladigan buyruqdir. Faqat 4 ta qiymatlari bor: repeat, repeat-x, repeat-y, no-repeat. Rasmimizning asl ko'rinishi to'rtinchi katakdadir ya'ni no-repeat holati, agar HTMLning ni ishlatsangiz rasm faqat birinchi katakdagi ko'rinish va qiymatni oladi.
background-repeat: repeat; - orqa fonimiz rasmi gorizontalni va vertikalni ketma-ket joylashib takrorlanadi agar bu propertyni ishlatmasak ham shu qiymatga erishamiz, chunki repeat default qiymatdir. Quyida chap tarafdan birinchi katakda ko'rsatilingan.
background-repeat: repeat-x; - orqa fonimiz rasmi gorizontal yo'nalish bo'yicha bir qator ketma-ket joylashib takrorlanadi, x-bu yerda x o'qi bo'ylab degan ma'noda kelgan, quyida chapdan ikkinchi katak bu qiymatga misoldir.
background-repeat: repeat-y; - orqa fonimiz rasmi vertikal yo'nalish bo'yicha bir qator ketma-ket joylashib takrorlanadi, y-bu yerda y o'qi bo'ylab degan ma'noda kelgan, quyida chapdan uchunchi katak bu qiymatga misoldir.
background-repeat: no-repeat; - bu qiymat rasmi takrorlamaslik uchun buyruqdir, rasm asl holatida keladi. Quyida eng ohirgi katakda joylashgandir.
