Magicalcode. Uz a. Shamsuddinov
Download 1.62 Mb. Pdf ko'rish
|
Veb dizayn
- Bu sahifa navigatsiya:
- REJA
- *.html
- VEB SAYTLAR QISQACHA : FRONTEND
- KERAKLI DASTURLAR Asosiy dasturlar
- VS CODE’GA QO`SHIMCHA IMKONIYATLAR QO’SHISH
- VSCODE UCHUN QO’SHIMCHALAR ALL AUTOCOMPLETE
- EMMET
- SUBLIME TEXT’GA QO’SHIMCHA IMKONIYAT QO’SHISH
- ENTER SUBLIME TEXT UCHUN QO’SHIMCHALAR ADVANCEDNEWFILE
- EMMET TEGLAR ATRIBUTLAR : TEGLAR
- TEG VA ATRIBUTLAR RO’YHATI
- JUSTIFY-CONTENT
- JUSTIFY-SELF
- HTML SAHIFALARGA MISOLLAR : HTML SAHIFALARGA MISOLLAR
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 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.
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.
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 ... aligntitle color, size, face img src, width, height a href
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 :
Download 1.62 Mb. Do'stlaringiz bilan baham: |
ma'muriyatiga murojaat qiling