Qanday qilib veb sahifa yaratish mumkin ?

Bo'limi

Veb saytlar, Веб сайтлар, Веб-сайты, Websites

Buyurtma berish

Bo’lajak dasturchi, siz veb dasturlashga qiziqasizmi? Lekin buni qanday qilishni va nimadan boshlab o’rganishni bilmayapsizmi? Tushkunlikka tushishga hojat yo’q!

Aniq maqsad va tog’ri reja asosida ish boshlang. Ushbu maqolada siz veb sahifa yaratish yo’llari va HTML haqida boshlang’ich ma’lumotga ega bo’lasiz.

Biz foydalanadigan dasturlar:

Text editor
Brauzer(Chrome, Firefox)
HTML, CSS bilimlar

Dasturlashni o’rganing va Jamoamizga qo’shiling

Veb sahifa nima?

Veb sahifa – veb saytning tarkibiy qismi hisoblanadi. Agarda siz, sayt ochishni xohlasangiz, albatta veb sahifa yaratishni bilishingiz kerak. Buning uchun bizga HTML, CSS borasidagi bilimlar kerak bo’ladi. Mabodo, bu tillarni bilmasangiz, unda xavotir olmang. Maqolamizda oson va tez veb sahifa yaratish usullarini yoritib o’tganmiz.

HTML va CSS

HTML – (Hyper Text Markup Language) gipermatnlar belgilash tilidir. HTML- dasturlash tili emas, u veb sahifada matn, rasmlar va boshqa ma’lumotlarni joylashishini belgilab beruvchi tildir. HTML orqali siz axborotni internet foydalanuvchisiga yetkazib berasiz.

HTMLda buyruqlar ya’ni teglar mavjud. Har bir teg < va > (uchburchak qavs) ichida yoziladi. Har bir HTML sahifa <html> bilan boshlanib, </html> tegi bilan yopilishi shart. Lekin yopilmaydigan teglar ham mavjud. Masalan, <br> tegi sizning axborotingizni yangi qatordan boshlab beradi.

HTML sahifa bo’limlardan iborat:

Kirish qismi (ya’ni navigatsion menyu)
Asosiy qism

Kirish qismiga sarlavha va menu (bir sahifadan ikkinchi sahifaga o’tish va umimiy ma’lumotlar) kiritiladi.

Asosiy qismga veb sahifaning mazmuni kiritiladi.

CSS – bu veb sahifaning dizayn stillarini belgilab beruvchi til hisoblanadi. CSS orqali biz, HTML veb sahifamizning va veb saytimizning dizaynini chiroyli qilib ko’rsatib beramiz. HTMLda har bir bo’lim (<div>) ga nom ya’ni class beriladi. CSSda buyruqlar mavjud emas. Lekin HTMLdagi elementlarni (classlarni) kodda chaqirib, stillarni beramiz. Quyidagi bosqichlarda veb sahifa tayyorlashni o’rganib olasiz.

1-bosqich

Bloknotga kiramiz.
Пуск→Программы→ Стандартные→ Блокнот.
Faylni index.html formatida kompyuterga saqlab qo’yamiz. Shu HTML faylmizga kod yozishni boshlaymiz.

Sublime, Visual Studio Code kabi kod tahrirlash uchun dasturlardan ham fordalanishingiz mumkin.
Bulardan Sublime nisabatan soddaroq bo’lib, endi o’rganishni boshlagan dasturchi uchun foydalanish qulay.

<!DOCTYPE html>– veb sahifamizning kodini qaysi HTML versiyada yozayotganimizni bildiradi. Veb sahifa <html> bilan boshlanib </html>tegi bilan tugashi kerak.

<head> tegi veb sahifamizning sarlavhasini (<meta-title>) va veb brauzerda chiqadigan nomlanishi ( <title>) kiradi. Barcha still fayllari (.css)ga havolalar ham <head> tegi joylashtirilishi kerak.

<body> tegi orqali veb sahifangizning asosiy ma’lumotlarini mazmunini yoritib bera olasiz. U yerda siz rasm joylashtirishingiz mumkin, biror bir narsa haqida masalan, yangi texnologiyalar haqida ma’lumot yozishingiz mumkin. Demak, ushbu teg ichida sahifani bor mazmunini matnlar rasmlar, video joylashtirb, slider(aylanib turuvchi rasmlar yoki matnlar) va boshqa turli xil elementlar orqali ifodalab berishingiz mumkin.

Har qanday veb sahifa quyidagi shablon asosida yaratiladi.

    
    <!DOCTYPE html>
    <html>
       <head>
       ...
       </head>
       <body>
       ...
       </body>
    </html>

2- Bosqich

<title> – tegida veb brauzerdan chiqadigan veb sahifaning nomi yoziladi. </title>
<h1> – asosiy qismga yozadigan axborotingizni sarlavhasi yoziladi. </h1>

<h1> tegi bizga sarlavhani ajratib, katta shriftda yozib beradi.

<p>Predmet yoki biron bir faoliyat haqida ma’lumot yoziladi</p>

<img src="rasm_nomi.jpg" alt="Rasmni tasvirlovchi matn» >

    
    <!DOCTYPE html>
    <html>
       <head>
          <title>Mening Birinchi veb saytim</title>
       </head>
       <body>
         <h1>Birinchi sahifa</h1>
         <p>Mening veb saytimga xush kelibsiz!</p>
    <img src="rasm.jpg" alt="Tabiat" >
       </body>
    </html>

Veb sahifa kodini yozdik. Endi faylimizni brauzer orqali ochamiz.

Unig uchun siz html farmatida saqlagan faylingizni ushbu usulda ochasiz :
Открыть с помощью->Google Chrome

Qoyil! Siz o’z veb sahifangizni yaratdingiz. Buni yanada boyitishni xohlasangiz shu linkga kirib HTML darslarini o’rganing.

3-bosqich.

Bu bosqichda biz veb sahifamizni ko’rinishini qanday qilib o’zgartirishni o’rganamiz.

CSS faylni ham bloknotga yozamiz. Faqat faylni faylnomi.css formatda saqlaymiz. Masalan, style.css

CSS ko’rinishini o’zgartirmoqchi bo’lgan HTML elementlarimizni chaqiramiz. Body tegini CSSda

    
    body {

        dizayni nomi: ko’rinish xususiyati;

         }

shaklda yoziladi.

HTML faylda CSS faylni <link> buyrug’i orqali ulaymiz:

    
    <link rel="stylesheet" href="faylnomi.css">

Bu buyrug’imiz <head>ni ichiga <title>dan kn yoziladi.

Veb sahifa dizaynini o’zingizning didingizga qarab o’zgartirishingiz mumkin. Buning uchun CSS bilimlarini yaxshi bilishingiz kerak bo’ladi. Veb sayt ochishni xohlasangiz internet resurslaridan hamma ma’lumotlarni olishingiz mumkin. Sizga www.w3schools.com saytini tavsiya qilamiz.

O’zbek tilida CSS ni o’rganing

CSS o’rganing

Veb brauzerdan yozgan index.html faylimizni ochamiz.

Agar sizda rasm chiqmasa bu rasm papkasini kompyuteringizning qayerida turganini topolmayotganidan dalolat beradi. Shu sabab rasmni index.html bilan birga bitta faylga saqlashingizni maslahat beramiz.

Siz hozir veb sahifa yaratishni, uni qanday dizayn qilish haqida boshlang’ich tushunchaga ega bo’ldingiz. O’ylaymizki, sizda veb sayt yaratishga bo’lgan qiziqish va xohish ortdi. Kelgusi maqolalarimizda qanday qilib oson va tez veb sayt yaratish haqida to’liq ma’lumotlar berib boramiz.