Magicalcode. Uz a. Shamsuddinov

MAGICALCODE.UZ

A.SHAMSUDDINOV

FRONT END v1.0

HTML & CSS 

REJA :

1) KIRISH. DASTURLAR BILAN TANISHUV.

2) TEG VA ATRIBUTLAR HAQIDA TUSHUNCHA.

Veb  sahifa  -  bu  saytning  ma’lum  bir  qismi  hisoblanadi.  Aynan  qandaydir 

ma’lumotni  o’zida  chop  etaoladigan:  matn,  rasm,  formalar  va  boshqa  veb 

sahifalarga  o’tish  linklari  bo’lishi  mumkin.  Odatiy  holda,  veb  sahifa 

deyilganda brauzerdan bizning so’rovimizga natija sifatida qaytuvchi *.html 

hujjat tushuniladi. 

Veb sayt - bu yuqorida aytganimiz turli hil veb sahifalar jamlanmasidir. 

VEB SAHIFA va VEB SAYT : 

VEB SAYTLAR QISQACHA : 

DOMEN  -  veb  sayt  nomi.  Misol  :  google.com.  google  -  bu  yerda  saytni 

ikkinchi  darajali  domeni  deyiladi.  .com  -  bu  yerda  saytni  birinchi  darajali 

domeni deyiladi. Agar, biz docs.google.com saytiga kiradigan bo’lsak: docs - 

bu  yerda  saytni  uchinchi  darajali  domeni  hisoblanadi.  google  -  ikkinchi 

darajali,  .com  -  esa  birinchi  darajali  domen  hisoblanadi.  Birinchi  darajali 

domen  odatda  sayt  qanday  turdaligini,  qayerga  tegishli  ekanligini  bildiradi. 

Misol: .com, .net lar xalqaro domenlar, aksincha esa .uz O’zbekistonga tegishli 

ekanligini bildiradi.

HOSTING  -  saytlar  ham  kompyuterlarda  aniqrog’i  serverlarda  joylashgan 

bo’ladi.  Oddiy  kompyuterlardan  ularni  farqi  ular  nisbatan  ancha  kuchli  va 

xalqaro  tarmoqqa  ulangani  bilan  farq  qiladi.  Hosting  server  egasini 

foydalanuvchi uchun ajratgan joyi.

VEB SAYTLAR QISQACHA : 

FRONTEND  -  saytni  yoki  qandaydir  dasturni  tashqi  ko’rinishini 

qurish  jarayoni.  Quyidagilarni  o’z  ichiga  oladi:  HTML,  CSS: 

Bootstrap.,  SASS  va  SCSS,  JavaScript:  jQuery,  React  JS,  VueJS, 

Angular.

BACKEND  -  saytni  server  tomonda  ishlovchi  qismi.  Hisob 

kitobga  doir  amallar  aynan  shu  tomonda  davom  etadi.  O’z 

ichiga oladi: MB va dasturlash tillaridan birini o’z ichiga

KERAKLI DASTURLAR

Asosiy dasturlar :

- Matn muharrirlaridan biri : VS Code, Sublime Text, Atom, Brackets, 

NodePad ++ yoki oddiy bloknot dasturi

- Brauzerlardan biri : Google Chrome, Mozilla Firefox, Safari yoki boshqa 

biror bir brauzer.

Bo’lsa yomon bo’lmasdi : Adobe Photoshop, Total Commander, 

Prepros

ESLATMA! 

- *.html fayllar taxrirlash uchun esa 

matn muharririda ochiladi.

- *.html fayllar ko’rish uchun 

brauzerda ochiladi.

VS CODE’GA QO`SHIMCHA IMKONIYATLAR QO’SHISH:

1.“Extensions” 

oynasini ochamiz

2.Extension 

nomini kiritamiz

3. “Install” 

tugmasini 

bosamiz

VSCODE UCHUN QO’SHIMCHALAR

ALL AUTOCOMPLETE - fayllar o’rtasida ma’lumotlar almashishinishini ta’minlab beradi.

AUTO  COMPLETE  TAG/AUTO  CLOSE  TAG/AUTO  RENAME  TAG  -    teglarni  avtomatik 

tugatish,  avtomatik  yopish  va  uni  o’zgartirayotgan  ochuvchi  va  yopuvchi  qismlarini 

birinchisiga mos ravishda o’zgartirish uchun kerak bo’ladi.

EMMET'>EMMET - odatda VSCODE’da o’rnatilgan bo’ladi. Agar yo’q bo’lsa o’rnatish tavsiya etiladi. 

O’rnatilgan qo’shimchalar ro’yhati “EXTENSIONS” ichida “ENABLED” bo’limida bo’ladi.

SUBLIME TEXT’GA QO’SHIMCHA IMKONIYAT QO’SHISH

1.  CTRL  +  SHIFT  +  P  tugmasi  bosiladi. 

Ochilgan  oynaga  “Install  package” 

buyrugi kiritiladi va ENTER

2. O’rnatiladigan paket nomi 

kiritiladi va ENTER

SUBLIME TEXT UCHUN QO’SHIMCHALAR

ADVANCEDNEWFILE

ALL AUTOCOMPLETE

AUTOFILENAME

BRACKETHIGHLIGHTER

COLOR HIGHLIGHT

GOTOANYTHING

SIDEBAR ENHANCEMENTS

EMMET

TEGLAR & ATRIBUTLAR :

TEGLAR - HTML va XML - tillarida ishlatiladi. Teglarni ikki hil ko’rinishi mavjud: juft 

va toq.

JUFT  TEGLAR  -  o’z  ichidagi  elementlarga  ega  bo’ladi.  Misol  :  ,  , 

TOQ  TEGLAR  -  biror  bir  faylni  biriktirib  olish,  elementlarni  bir  biridan  ajratish 

uchun qo’llaniladi. Misol : ,  ,

---

,

TEG VA ATRIBUTLAR RO’YHATI

...

align

title

color, size, face

img src, width, height

a href

- daraja

- indeks

button

pre

style: font-size, font-family, 

background-color, color, 

text-align

 

button

pre

style: font-size, font-family, 

background-color, color, 

text-align

JUSTIFY-CONTENT  -  PARENT  ELEMENT  ichida  elementlarni  gorizontal  yo’nalish 

bo’yicha joylashishini boshqaradi..

ALIGN-ITEMS  - PARENT ELEMENT ichida elementlarni vertikal yo’nalish bo’yicha 

joylashishini boshqaradi.

JUSTIFY-SELF  -  CHILD  elementni  gorizontal  yo’nalish  bo’yicha  joylashishini 

boshqaradi..

ALIGN-SELF    -  CHILD  elementni  vertikal  yo’nalish  bo’yicha  joylashishini 

boshqaradi..

FLEXBOX:

FLEXBOX (PARENT ELEMENT):

display: flex;

flex-direction: row;

align-items: flex-start;

display: flex;

flex-direction: row;

align-items: center;

display: flex;

flex-direction: row;

align-items: flex-end;

FLEXBOX (CHILD ELEMENT):

align-self: start;

display: flex;

flex-direction: row;

justify-content: center;

display: flex;

flex-direction: row;

justify-content: end;

HTML SAHIFALARGA MISOLLAR : 

HTML SAHIFALARGA MISOLLAR : 

VAZIFA

VAZIFA

`

QO’SHIMCHA VAZIFALAR : 

 

http://www.itmathrepetitor.ru/zadachi-po-html-i-css/