Veb-sayt texnologiyalari: HTML, CSS, JavaScript va frameworklar

14 aprel, 2025 · Avtor: Innosoft jamoasi

Kirish

Veb-sayt yaratish jarayoni bir necha asosiy texnologiyalarni o‘z ichiga oladi. HTML sahifaning strukturasini, CSS dizayn va uslubni, JavaScript esa interaktivlikni boshqaradi. Zamonaviy loyihalarda React, Next.js, Vue kabi frontend frameworklar ishlatiladi.

1. HTML — sahifa skeleti

HTML (HyperText Markup Language) web-sahifalarni belgilash uchun ishlatiladi. <header>, <nav>, <article> kabi semantik teglar sahifa tarkibini SEO nuqtai nazardan yaxshilaydi.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Maqola sarlavhasi</title>
</head>
<body>
  <header>
    <h1>Salom, dunyo!</h1>
  </header>
</body>
</html>

Semantik HTML SEO uchun muhim: Google sahifa tuzilishini yaxshiroq tushunadi va qidiruv natijalarida yuqori o‘rin olishingizga yordam beradi.

2. CSS — dizayn va responsivlik

CSS (Cascading Style Sheets) sahifalarga rang, shrift, joylashuv va animatsiya qo‘shadi. Flexbox va Grid yordamida murakkab tartiblar yaratish mumkin.

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

Media queries yordamida saytni mobil va planshet qurilmalarga moslashtiring:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

3. JavaScript — sahifaga interaktivlik

JavaScript veb-saytni dinamik qiladi. DOM manipulyatsiya, hodisalarni ushlash va AJAX so‘rovlar yordamida foydalanuvchi tajribasini yaxshilang.

document.getElementById('btn').addEventListener('click', () => {
  alert('Tugma bosildi!');
});

4. Zamonaviy frameworklar

4.1 React

React komponent bazasida, qayta foydalaniladigan UI bloklarini yaratishga imkon beradi. Virtual DOM tezkor yangilanishlarni ta’minlaydi.

import React from 'react';

function Button({ label }) {
  return <button className="btn">{label}</button>;
}

export default Button;

4.2 Next.js

Next.js server-side rendering va statik saytlash imkoniyatlari bilan SEOni kuchaytiradi. Har sahifa uchun getStaticProps va getServerSideProps funksiyalari mavjud.

export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

4.3 Vue va boshqa frameworklar

Vue.js, Angular va Svelte ham keng qo‘llaniladigan frontend ramkalardir, ular ham component-based yondoshuvni qo‘llab-quvvatlaydi.

Xulosa

HTML, CSS va JavaScript — har qanday veb-loyiha asosini tashkil qiladi. Zamonaviy frameworklar esa loyihalarni tez, samarali va SEOga mos yaratish imkonini beradi. Innosoft jamoasi bilan veb-saytingizni yangi bosqichga olib chiqing.