``
-
HTML ning asosiy taglari Tuzilma taglar:
: Metama'lumotlar, uslub, skriptlar joylashadi. : Asosiy kontent shu yerda bo‘ladi.
: Sahifa HTML ekanligini belgilaydi.
-
Matn tuzish uchun taglar:
h1 - h6: Sarlavhalar uchun.
: Paragraf.
: Yangi qatordan boshlash.
yoki : Matnni qalin qilish.
yoki : Matnni qiyshiq qilish.
3.Rasm va multimedia:
-
Havolalar va ro'yxatlar uchun :
Havola matni: Havola.
- : Tartibsiz ro‘yxat.
- : Ro‘yxat elementi.
-
Formalar va ma'lumotlar kiritish uchun :
: Forma yaratish. : Matn kiritish. : Tugma.
Jadval uchun :
Jadval yaratish:- inline usuli yani (ichki)
Javascript codini to'g'ridan to'g'ri html tagi ichiga yozish.
<button onclick="alert('Hello!')">Click me</button> <button onChange="alert('Thanks!')">Click me</button>
- : Tartibli ro‘yxat.
: Jadval.
: Qator.
: Ustun.
(): Jadval sarlavhasi. Javascriptni Htmlga ulash
2.internal usuli ya'ni (ichki cod)
JavaScript-ni tegi ichida HTML faylning ichida yozish:</p> <p><code><script><br> console.log("Hello from internal script!");<br> </script><br> </code></p> <p>3.Extrenal usuli ya'ni (tashqi fayl orqali );<br> Loyiha ichida javasript codini js fayl orqali yozish.</p> <p><code><script src="app.js"></script><br> </code></p> <p><strong>async va defer haqida</strong></p> <ol> <li>async atributi;</li> </ol> <p>Skript sahifa bilan bir vaqtning o'zida yuklanadi ya'ni ( asinxron).<br> Skript yuklanishi tugagandan keyin darhol bajariladi.</p> <p><code><script src="script.js" defer></script><br> </code></p> <ol> <li>defer atributi;</li> </ol> <p>Skript yuklanishi sahifa bilan bir vaqtda amalga oshadi, lekin bajarilishi sahifa to'liq yuklanib bo'lgandan keyin sodir bo'ladi.</p> <p><code><script src="script.js" defer></script><br> </code></p> <p><strong>SEO NIMA ?</strong></p> <p>SEO (Search Engine Optimization) — veb-saytlarni qidiruv tizimlari uchun optimallashtirish jarayonidir. Bu jarayon sahifangizni qidiruv tizimlari (Google, Bing) natijalarida yuqori o‘rinlarga chiqishga yordam beradi.<br> Sodda qilib aytganda foydalanuvchi google orqali qidiruv berganida sizning sahifangiz taqdim etilishi.</p> <p><strong>SEO ga yordam beradigan HTML teglar va atributlar;</strong><br> Quyidagi teg va atributlar SEO uchun muhim hisoblanadi:</p> <ol> <li>Meta-teglar; <title>: Sahifa sarlavhasini belgilaydi.</li> </ol> <p><code><title>Mening Sahifam</title><br> </code></p> <ol> <li>Sarlavha taglar; h1 va h6 matnlar tuzulishi va hamida ishlatiladi.</li> </ol> <p>`<h1>Asosiy Sarlavha</h1></p> <h2>Bo‘lim nomi</h2> <p>`</p> <p>foydali bo'ladi (Har bir sahifada faqat bitta <h1> bo‘lishi kerak.).</p> <ol> <li>Img taglaridagi alt atributi ; Rasimga tavsif berish orqali qidiruv tizimlariga yordam beradi.</li> </ol> <p><code><img src="rasm.jpg" alt="SEO haqida tushuncha"><br> </code></p> <ol> <li>Hvola taglari title atributi; Havola haqida qo‘shimcha ma’lumot beradi.</li> </ol> <p><code><a href="https://www.example.com" title="Qo‘shimcha SEO maslahatlari">Bu yerga o'ting</a><br> </code></p> <ol> <li>Lang atributi; sahifaning tilini belgilaydi;</li> </ol> <p><code><html lang="uz"><br> </code></p> <ol> <li>Mobile-friendly dizayn uchun teglar; <meta name="viewport">: Sahifani mobil qurilmalar uchun optimallashtiradi,</li> </ol> <p><code><meta name="viewport" content="width=device-width, initial-scale=1.0"><br> </code></p> <ol> <li>Breadcrumbs (nav va aria-label); Foydalanuvchilar va qidiruv tizimlariga sahifa strukturasi haqida ma’lumot beradi.</li> </ol> <p><code><nav aria-label="Breadcrumb"><br> <a href="/home">Bosh sahifa</a> > <a href="/blog">Blog</a><br> </nav><br> </code></p> <p><strong>Responsive Nima ?</strong></p> <p>Responsive dizayn — bu veb-sahifalarni turli ekran o‘lchamlariga (kompyuter, planshet, telefon) moslashadigan qilib yaratish usuli.</p> <p>Bu dizaynda sahifa elementi ekran o‘lchamiga qarab avtomatik ravishda moslashadi:</p> <p>Telefon: Kichik ekran uchun menyu yoki rasmlar ixcham ko‘rinadi.<br> Kompyuter: Katta ekran uchun kengaytirilgan formatda ko‘rinadi.</p> <p>Asosan CSS media query va moslashuvchan o‘lchamlar (%, em, rem, vh) ishlatiladi.<br> masalan:<br> <code>@media (max-width: 768px) {<br> body {<br> font-size: 14px;<br> }<br> }<br> </code></p> <p>responsive dizay yozishdan asosiy maqsad har qanday qurilmada sahifa qulay va chiroyli ko‘rinishi!</p> <p><strong>Sass Nima ?</strong><br> SASS (Syntactically Awesome Stylesheets);<br> U oddiy CSS bilan taqqoslaganda kodni takrorlanmas, tartibli va oson boshqariladigan qiladi.</p> <p>SASS nimga asosiy afzaliklari;</p> <ol> <li>O‘zgaruvchilar (Variables); O‘zgaruvchilar yordamida ranglar, o‘lchamlar yoki boshqa qiymatlarni saqlab, ularni qayta ishlatishingiz mumkin.</li> </ol> <p><code>$primary-color: #3498db;<br> body {<br> background-color: $primary-color;<br> }<br> </code></p> <p>2.Nestlash (Nesting);<br> CSS qoidalarini ichma-ich yozib, tuzilmani aniqroq va cod yozishnin tazlashtiradi.</p> <p><code>nav {<br> ul {<br> margin: 0;<br> li {<br> list-style: none;<br> }<br> }<br> }<br> </code></p> <ol> <li>Mixins; Ko‘p ishlatiladigan uslublarni bir joyga yig‘ib, kerakli joyda chaqirish uchun ishlatiladi.</li> </ol> <p><code>@mixin flex-center {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> }<br> .box {<br> @include flex-center;<br> }<br> </code></p> <ol> <li>Functions; Hisob-kitoblarni yoki maxsus qiymatlarni qaytaruvchi funksiyalarni yaratishingiz mumkin.</li> </ol> <p><code>@function rem($px) {<br> @return $px / 16 * 1rem;<br> }<br> body {<br> font-size: rem(18); // 18px ni rem ga o‘giradi<br> }<br> </code></p> <ol> <li>Inheritance (Meros olish); Boshqa sinflar uslublarini meros qilib olish imkonini beradi.</li> </ol> <p><code>%button-styles {<br> padding: 10px 20px;<br> border-radius: 5px;<br> }<br> .btn-primary {<br> @extend %button-styles;<br> background: blue;<br> }<br> </code></p> <p>SASS ning afzalliklari<br> Kod samaradorligi: Qayta-qayta yozishning oldini oladi.<br> Katta loyihalar uchun qulaylik: Tuzilmani boshqarishni osonlashtiradi.<br> O‘qilishi oson: Kod aniq va tuzilmali bo‘ladi.</p> <p><strong>Javascript Nima ?</strong></p> <p>JavaScript — bu veb-saytlarga interaktivlik qo‘shish uchun ishlatiladigan dasturlash tili. U dastlab veb-brauzerlarda ishlash uchun yaratilgan, lekin hozirda server tomonida ham ishlatiladi (Node.js orqali).</p> <p>JavaScript nimani qilishi mumkin?</p> <p>1.Veb-sahifalarni interaktiv qilish:</p> <ul> <li>Tugmalarni bosganda harakat qilish.</li> <li>Formadagi ma’lumotlarni tekshirish.</li> <li>Slider yoki karusel yaratish.</li> </ul> <p>masalan:<br> <code>document.querySelector("button").addEventListener("click", function() {<br> alert("Tugma bosildi!");<br> });<br> </code></p> <ol> <li>Dinamik kontent yaratish: HTML va CSS-ni o‘zgartirib, veb-sahifani yangilash.</li> </ol> <p><code>document.querySelector("h1").innerText = "Yangi sarlavha!";<br> </code></p> <ol> <li>API-lar bilan ishlash: Masalan, boshqa xizmatlardan (ob-havo, yangiliklar) ma’lumot olish.</li> </ol> <p><code>fetch("https://api.example.com/data")<br> .then(response => response.json())<br> .then(data => console.log(data));<br> </code></p> <p>4.Matematik va mantiqiy hisob-kitoblar:<br> Kalkulyator yaratish, o‘yinlar yozish, vaqtni hisoblash.</p> <p>5.Animatsiyalar yaratish:<br> CSS bilan birgalikda elementlarni harakatlantirish yoki o‘zgarishlarni boshqarish.</p> <p>JavaScript asosiy xususiyatlari</p> <p>1.O‘zgarmasligi (Static) emas:<br> JavaScript bilan sahifa kontenti o‘zgaruvchan bo‘lishi mumkin.</p> <p>2.Brauzerda ishlaydi:<br> Har bir brauzer JavaScript-ni tushunadi va ishlatadi. Masalan, Chrome, Firefox.</p> <p>3.Objektga yo‘naltirilgan:<br> JavaScript ob’ektlar va metodlar yordamida ishlaydi.</p> <p>4.Oson integratsiya:<br> HTML va CSS bilan birga ishlatiladi.</p> <p>avaScript bilan qanday ishlay boshlash mumkin?<br> JavaScript-ni o‘rganishni boshlash uchun asosiy mavzular:</p> <p>O‘zgaruvchilar: let, const, var.<br> Mantiqiy operatorlar: if, else, switch.<br> Funksiyalar va arraylar.<br> DOM bilan ishlash.<br> Hodisalar (click, hover) va ularning tinglovchilari.</p> <p><strong>Data typelar</strong></p> <p>JavaScript-da data typelar (ma'lumot turlari) — bu qiymatlarning turlarini aniqlash uchun ishlatiladi. Ular Primitive (oddiy) va Non-Primitive (murakkab) turlarga bo‘linadi.</p> <p>Primitive Data Types (Oddiy ma'lumot turlari)<br> Bu turlar oddiy qiymatlar bilan ishlaydi va to‘g‘ridan-to‘g‘ri qiymatni saqlaydi.</p> <ol> <li>String Matn yoki harflar ketma-ketligini saqlaydi.</li> </ol> <p><code>let name = "Ismingiz";<br> console.log(name); // "Ismingiz"<br> </code></p> <ol> <li>Number Butun va o‘nlik sonlarni saqlaydi.</li> </ol> <p><code>let age = 25;<br> let pi = 3.14;<br> console.log(age, pi); // 25, 3.14<br> </code></p> <ol> <li>Boolean true yoki false qiymatlarini saqlaydi (mantiqiy).</li> </ol> <p><code>let isLoggedIn = true;<br> console.log(isLoggedIn); // true<br> </code></p> <ol> <li>Undefined Qiymat hali aniqlanmagan bo‘lsa, undefined qaytariladi.</li> </ol> <p><code>let x;<br> console.log(x); // undefined<br> </code></p> <ol> <li><p>Null<br> null qiymati qiymat yo‘qligini ifodalaydi.<br> <code>let y = null;<br> console.log(y); // null<br> </code></p></li> <li><p>Symbol<br> Unikal va o‘zgarmas qiymatlar uchun ishlatiladi.</p></li> </ol> <p><code>let sym = Symbol("unique");<br> console.log(sym); // Symbol(unique)<br> </code></p> <ol> <li>BigInt Juda katta sonlarni saqlash uchun ishlatiladi.</li> </ol> <p><code>let bigNumber = 123456789012345678901234567890n;<br> console.log(bigNumber); // 123456789012345678901234567890n<br> </code></p> <p>Non-Primitive Data Types (Murakkab ma'lumot turlari)<br> Bu turlar qiymatlarni to‘plam shaklida saqlaydi.</p> <ol> <li>Object Kalit-qiymat juftliklarini saqlaydi.</li> </ol> <p><code>let person = {<br> name: "Ismingiz",<br> age: 25<br> };<br> console.log(person.name); // "Ismingiz"<br> </code></p> <ol> <li>Array Qiymatlar ro‘yxatini saqlaydi.</li> </ol> <p><code>let fruits = ["Olma", "Banan", "Uzum"];<br> console.log(fruits[0]); // "Olma"<br> </code></p> <ol> <li>Function Amal yoki kodni bajaruvchi obyekt.</li> </ol> <p><code>function greet() {<br> return "Salom!";<br> }<br> console.log(greet()); // "Salom!"<br> </code></p>
Top comments (0)