Front-end ≥

› Grafik dizayn va tasvirlar tayyorlash.
› Interfeysi dizayni.
› Axborot-dizayn, sayt bilan foydalanuvchi o'zaro foydalanuvchi tajribasi uchun tegishli, deb darajada.
› HTML hujjatlar va uslubi jadvallari.
› JavaScript.

==============

Back-end ≥

» Back-end rivojlantirish yashirincha server tomonida veb-sahifalar, dinamik va interaktiv qilish uchun ishga tushirish dasturlari va stsenariylar anglatadi. Umuman olganda, Back-end rivojlantirish, odatda, tajribali dasturchilar tomonidan amalga oshiriladi, lekin, barcha veb-dizaynerlar funktsional imkoniyatlarini bilimi Back-end chiqish kerak bo'ladi.

» Quyidagi vazifalarni Back-end-rivojlantirish uchun tegishli ≥

› Axborot-dizayn, serv bo'yicha ma'lumotlar tashkil qilish, u bilan bog'liq, deb darajada qayta qayta ishlash.
› Ma'lumotlar bazasi, Dasturiy shakllari.
› Kontentni boshqarish tizimi.
› Boshqa veb-ilovalar serveri yon PHP yordamida, JSP, Yoqut ustida ishlaydigan, ASP.NET, Java va boshqa dasturlash tillari.

@w3_uz › #front_end va #back_end

Video fayl...

.mpeg, .mpg ( video )
Harakatlanuvchi Rasmlar Ekspertlar Guruhi tomonidan ishlab chiqilgan. Internetdagi birinchi mashhur video formati. Barcha brauzerlar tomonidan qo'llab-quvvatlanadigan, lekin u HTML5-da ishlamaydi.

.avi AVI - (Audio Video Interleave) ≥
Microsoft tomonidan ishlab chiqilgan. Odatda videokameralarda va televizorda ishlatiladi. Windows-ning kompyuterlarida yaxshi tushadi, lekin veb-brauzerlarda emas.

.wmv WMV - (Windows Media Video) ≥
Microsoft tomonidan ishlab chiqilgan. Odatda videokameralarda va televizorda ishlatiladi. Windows-ning kompyuterlarida yaxshi tushadi, lekin veb-brauzerlarda emas.

.mov QuickTime ≥
Apple tomonidan ishlab chiqilgan. Odatda videokameralarda va televizorda ishlatiladi. Apple kompyuterlarida yaxshi tushadi, lekin veb-brauzerlarda emas.

.rm, .RealVideo ≥
Kam tarmoqli kengligi bilan videoni uzatish imkonini beruvchi Real Media tomonidan ishlab chiqilgan. U hali ham onlayn video va Internet TV uchun ishlatiladi, lekin veb brauzerlarda tushadi.

.swf, .flv Flash ≥
Macromedia tomonidan ishlab chiqilgan. Odatda veb-brauzerlarda tushishi uchun qo'shimcha komponent (plagin) talab qilinadi.

Ogg .gg, Teora Ogg. Xiph.Org ≥
Foundation tomonidan ishlab chiqilgan. HTML5 tomonidan qo'llab-quvvatlanadi.
WebM .webm WebM. Veb gigantlari, Mozilla, Opera, Adobe va Google tomonidan ishlab chiqilgan. HTML5 tomonidan qo'llab-quvvatlanadi.

MPEG-4 ≥
yoki .mp4 Harakatlanuvchi Rasmlar Ekspertlar Guruhi tomonidan ishlab chiqilgan. QuickTime-ga asoslangan. Odatda yangi video kameralarda va televizorda ishlatiladi. Barcha HTML5 brauzerlari tomonidan qo'llab-quvvatlanadi.

@w3_uz › #video

Audio fayl...

.mid, .midi MIDI (Musiqiy asboblar raqamli interfeysi) ≥
Synthesizerlar va kompyuter ovoz kartalari kabi barcha elektron musiqa asboblari uchun asosiy format. MIDI fayllarida ovoz yo'q, biroq raqamli yozuvlar elektronikada ijro etilishi mumkin. Internet-brauzerlarda emas, balki barcha kompyuter va musiqiy qurilmalarda tushadi.

RealAudio .rm .Rey RealAudio ≥
Real Media tomonidan ishlab chiqilgan, past tarmoqli kengliklari bilan audio oqimlariga ruxsat berish. brauzerlarda tushmaydi.

.wma WMA (Windows Media Audio) ≥
Microsoft tomonidan ishlab chiqilgan. Odatda musiqa pleyerlarida ishlatiladi. Windows-ning kompyuterlarida yaxshi tushadi, lekin brauzerlarda emas.

.aac AAC (Kengaytirilgan audio kodlash) ≥
Apple tomonidan iTunes uchun standart format sifatida ishlab chiqilgan. Apple kompyuterlarida yaxshi o'ynaydi, lekin veb-brauzerlarda emas.

.wav, .IBM ≥
Microsoft tomonidan ishlab chiqilgan, Windows, Macintosh va Linux operatsion tizimlarida yaxshi tushadi. HTML5 tomonidan qo'llab-quvvatlanadi.

.ogg, .gg Ogg. Xiph.Org ≥
Foundation tomonidan ishlab chiqilganHTML5 tomonidan qo'llab-quvvatlanadi.

.mp3 fayllari ≥
Aslida MPEG fayllarining ovozli qismidir. MP3 - musiqa pleyerlari uchun eng mashhur format. Yaxshi siqishni (kichik fayllar) yuqori sifat bilan birlashtiradi. Barcha brauzerlar tomonidan qo'llab-quvvatlanadi.

.mp4 fayllari ≥
Video formati, ammo audio uchun ham foydalanish mumkin. MP4 video - kelajakdagi video formati. Bu barcha brauzerlar tomonidan MP4 audio uchun avtomatik qo'llab-quvvatlanadi.

@w3_uz › #audio

HTML › embed - haqida.
audio va video lar uchun qullash mumkin

Bundan tashqari <embed> tegini tanimaydigan brauzerlar uchun <noembed> tagini ham qo'shishingiz mumkin. Masalan, brauzeringiz <embed> tegini qo'llab-quvvatlamasa, rasm yoki matn aktivlashadi.

Flash filmlari (.swf), (.avi) va (.mov) fayl turlarini turli emblem taglarida ishlatishingiz mumkin.

Misol:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>

<embed src="/mnt/sdcard/Video/UZ/Ummon › Oq gulim Video.mp4" width="100%" height="60" >
<noembed>Kew kew kew</noembed>
</embed>

≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈


HTML › object - haqida.

1-Misol:
HTML hujjatni HTML hujjatiga quyidagi tarzda kiritishingiz mumkin:

<object data="test_data.html" type="text/html" width="400" height="300">
Link: <a href="test_data.html>test_data.html</a>
</object>

Brauzer obyekt linkini qo'llab-quvvatlamasa, bu yerda pastki attributlar tasvirga tushadi.

------------

2-Misol:
PDF-hujjatni quyidagi HTML-hujjatga joylashtirishingiz mumkin:

<object data="test_data.pdf" type="application/pdf" width="400" height="300">
Link : <a href="test_data.pdf">test_data.pdf</a>
</object>

------------

3-Misol:
Hujjatga tegishli bo'lgan ba'zi parametrlarni <param> tegini tanlashingiz mumkin.
.wav faylini joylash uchun misol:

<object data="test_data.wav" type="audio/x-wav" width="300" height="20">
<param name="src" value="test_data.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
Link : <a href="test_data.wav">test_data.wav</a>
</object>

------------

4-Misol:
Fleshli hujjatni quyidagicha qo'shishingiz mumkin ≥

<object classid "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin" codebase="someplace/swflash.cab" width="200" height="300">

<param name="movie" value="flash/penguin.swf">
<param name="quality" value="high">
<img src="image.jpg" width="200" height="300" alt="image name">
</object>

------------

5-Misol:
Java ilovasiga HTML hujjatiga quyidagi kabi qo'shilishingiz mumkin -

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" width="200" height="200">
<param name="code" value="applet.class">
</object>

Classic xususiyati Java Plugin-ning qaysi versiyasidan foydalanishni belgilaydi. JRE-ni qanday yuklab olish kerakligini aniqlash uchun ixtiyoriy kod baza xususiyatidan foydalanishingiz mumkin.

@w3_uz › #html › #embed va #object

HTML 5 Nima ?
Yangi kodlar va judda qulay, tez, oson, õrganish mumkin...

HTML5 - eng yangi va eng rivojlangan HTML versiyasi. Texnik jihatdan, HTML dasturiy til emas, balki formatlash tili. Ushbu qo'llanmada biz HTML5 xususiyatlarini va amalda uni qanday ishlatishni muhokama qilamiz.

Ushbu qo'llanma HTML5da yangi boshlanuvchilar uchun mo'ljallangan bo'lib, ular ushbu mavzuning asosiy ilg'or kontseptsiyalarini tushunishlari uchun mo'ljallangan.

Ushbu qo'llanmani boshlashdan oldin HTML va uning teglarini asosiy tushunishingiz kerak.

-----------

HTML5 - sintaksi-si:

HTML 5 da qo'shimcha ma'lumotni olib tashlangan va shunchaki sintaksikdan so'ng foydalanishingiz mumkin ≥
(turli xil misollar...)

HTML 4.01 - xolati:
Misol:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 - xolati:
Misol:
<!DOCTYPE html> - va DOCTYPE qisqartirilgan...

-----------

HTML 4 - xolati:
Misol:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML 5 - xolati:
Misol:
<meta charset="UTF-8"> - va charset qisqartirilgan...

-----------

HTML 5 › Viewport:
Viewport elementi brauzerning sahifa o'lchamlarini va o'lchamlarini qanday boshqarishni ko'rsatmalarni beradi.

Kenglik = qurilma kengligi qismi qurilmaning ekran kengligidan (bu qurilmaga bog'liq ravishda o'zgaradi) rioya qilish uchun sahifaning kengligini belgilaydi.

Dastlabki miqdordagi = 1.0 qism birinchi marta brauzer tomonidan yuklangan birinchi zoom darajasini belgilaydi.

Misol:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

-----------
HTML 4 › script:
Script kodlariga "text/javascript" qiymati bilan quyidagi turdagi atributlarni kiritish odatiy edi:
Misol:
<script type="text/javascript" src="test.js"></script>

HTML 5 › script:
Misol:
<script src="test.js"></script>

-----------

HTML 4 › css link:
Misol:
<link rel="stylesheet" type="text/css" href="stylefile.css">

HTML 5 › css link:
Misol:
<link rel="stylesheet" href="style.css"> - va boshqa kodlar qisqartirilgan...

-----------

Misol:
<!DOCTYPE html>
<html lang="uz">
<head>
<title>HTML Sahifa</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

HTML kontent...

</body>
</html>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › Yangi kodlar haqida qisqa ma'lumot...

Misol:
<header>, <footer>, <nav>, <article> va <section> kabi yangi kodlar...

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › Yangi Multimedia kodlari:
<svg> - Grafik: CSS va SVG.
<canvas> - Grafika ( CSS va JavaScriptlar bilan ).
---------
<audio> - Music kontentlar uchun. / Offline va Online
<video> - Video kontentlar uchun. / Offline va Online
---------
<embed> Tashqi (HTML-bo'lmagan) dastur uchun konteyner belgilaydi.
<source> Media elementlari uchun bir nechta media resurslarini belgilaydi (<video> va <audio>, <picture>).
<track> Media elementlari uchun matnli treklarni belgilaydi (<video> va <audio>).

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › API - ( Application Programming Interfaces / Dastur Dasturiy Interfeysi )

HTML Geolocation / geologiya
HTML Drag and Drop
HTML Local Storage / local saqlash
HTML Application Cache / dastur keshlar
HTML Web Workers / web ishchilar
HTML SSE

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › Foydalanuvchi tomonidan yangi kod yaratish...

<!DOCTYPE html>
<html lang="uz">
<head>
<title>HTML 5 - kod yaratish...</title>
<meta charset="UTF-8">
</head>
<body>

<sarlavha>
Sayt Sarlavhasi: ( Misol: UzOnline.Uz )
</sarlavha>

<yangilliklar>
Sayt Yangilliklar...
</yangilliklar>

<yunalishlar>
<a href="">Bosh Sahifa</a>
<a href="">Servis</a>
<a href="">Foto Albom</a>
<a href="">Video Albom</a>
</yunalishlar>

...
...
...

</body>
</html>

HTML 4 › HTML 5 - da bazi kodlar qisqartirilgan...

Misol:
<div id="header"> › <header>
<div id="menu"> › <nav>
<div id="kontent"> › <section>
<div id="post"> › <article>
<div id="footer"> › <footer>...

@w3_uz › #html5_kirish

HTML 5 Semantik kodlar haqida...

Semantik kodlar nima uchun ?
» HTML 4 bilan ishlab chiquvchilar o'zlarining id / class nomlarini uslublar kodlariga ishlatishgan: header, top, bottom, footer, menu, navigatsiya, main, container, content, article, sidebar, topnav va boshqalar.

› Bu qidiruv tizimlarining tez va aniq veb-sahifa mazmunini aniqlashga imkon bermadi.

› Yangi HTML 5 kodlarida ( <header>, <footer>, <nav>, <section>, <article>... ) bilan bu osonlashadi.

-------------

› Semantika - tilda so'zlar va iboralar ma'nosini o'rganishdir.
› Semantik kodlar ≠ ma'noga ega elementlar.
› Semantik kod o'z mazmunini brauzerlar tez va oson topadi.

Semantik bo'lmagan kodlar ≥
Misol: <div> va <span> - uning mazmuni haqida hech narsa aytilmagan va xar xil usullar va xolatlarda qullaniladi.

Semantik kodlar ≥
Misol: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> - kodlarni mazmunini aniq belgilangan.

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <section> - haqida.
<section> - kodi hujjatdagi bo'limni belgilaydi.

Misol
<section>
<h1>HTML Yangilliklar</h1>
<p>...</p>
</section>

<section>
<h1>CSS Yangilliklar</h1>
<p>...</p>
</section>

<section>
<h1>JS Yangilliklar</h1>
<p>...</p>
</section>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <article> - haqida.
<article> - Forum post, Blog post, Gazeta maqolalarida foydalaniladi.

Misol:
<article>
<h1>HTML haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

<article>
<h1>CSS haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

<article>
<h1>JS haqida Forum yoki Blog...</h1>
<p>...</p>
</article>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <section> va <article> - kodlari birlashtirish mumkin ≥

<section>
<article>
<h1>HTML Yangilliklar</h1>
<p>...</p>
</article>
</section>

<section>
<article>
<h1>CSS Yangilliklar</h1>
<p>...</p>
</article>
</section>

<section>
<article>
<h1>JS Yangilliklar</h1>
<p>...</p>
</article>
</section>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <header> - haqida.
<header> kodi hujjat yoki bo'lim uchun (sarlavha)ni bildiradi.

<header> kodi kirish kontenti uchun konteyner sifatida ishlatilishi kerak.

Bitta hujjatda bir necha <header> - kodi bo'lishi mumkin.

Quyidagi misol, blog postni sarlavhasini belgilaydi:

Misol:
<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
<p>...</p>
</article>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <footer> haqida.

<footer> - Bir footer odatda hujjatning muallifini, mualliflik huquqi ma'lumotlarini, foydalanish
shartlariga havolalarni, aloqa ma'lumotlarini va boshqalarni o'z ichiga oladi.

Bitta hujjatda bir necha <footer> kodi bo'lishi mumkin.

Misol:
<footer>
<p>...</p>
<p>...</p>
</footer>

<footer>
<p>...</p>
<p>...</p>
</footer>

<footer>
<p>...</p>
<p>...</p>
</footer>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <nav> - haqida.
<nav> kodi navigatsiya (<a href=""></a>) - havolalari to'plamini belgilaydi.

Hujjatning barcha havolalarining <nav> elementi bo'lmasligiga e'tibor bering. <nav> kodi faqat asosiy navigatsion bloklar blokiga mo'ljallangan.

Misol:
<nav>
<a href="test.html">HTML</a> ~
<a href="test.html">CSS</a> ~
<a href="test.html">JavaScript</a>
</nav>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 › <aside> - haqida.
<aside> kodi ba'zi kontentni joylashtirilgan kontentdan chetga suradi (chekka panel kabi).

Misol:
<aside>
<h2>...</h2>
<p>...</p>
</aside>

Mukamalashtirish uchun CSS-dan foydalaniladi.


@w3_uz › #html5 › #semantik › #section, #article, #header, #footer, #nav, #aside

HTML Skeleton / Back-end - lar...

HTML 4 - xolati...

Misol:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="uz">
<head>
<title>HTML4</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>

<div id="header">
  <h1>...</h1>
</div>

<div id="menu">
  <ul>
  <li><a href="link.html">Test Link</a></li>
  <li><a href="link.html">Test Link</a></li>
  <li><a href="link.html">Test Link</a></li>
  </ul>
</div>

<!-- id yoki class -->
<div id="content">
<h2>...</h2>

<div id="post">
  <h3>...</h3>
  <p>...</p>
  <p>...</p>
</div>

<div class="post">
  <h3>...</h3>
  <p>...</p>
  <p>...</p>
</div>

</div>

<div class="footer">
  <p>...</p>
</div>

</body>
</html>

≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠≠

HTML 5 - xolati...

Misol:
<!DOCTYPE html>
<html lang="uz">
<head>
<title>HTML 5</title>
<meta charset="utf-8">
</head>
<body>

<header>
  <h1>HTML 5</h1>
</header>

<nav>
<ul>
  <li><a href="link.html">Test Link</a></li>
  <li><a href="link.html">Test Link</a></li>
  <li><a href="link.html">Test Link</a></li>
</ul>
</nav>

<section>

<h2>...</h2>

<article>
<h3>...</h3>
<p>...</p>
<p>...</p>
</article>

<article>
<h3>...</h3>
<p>...</p>
<p>...</p>
</article>

</section>

<footer>
<p>&copy; AsaUz / Kutubxona: t.me/w3_uz</p>
</footer>

</body>
</htm>

@w3_uz › #html4 va #html5 - farqi...

Kanal Faoliyati Sizlarga maqul-mi?

HTML 5 › audio...

Usullar: ≥
» autoplay - sahifa ochilgandan, audio avtomatik tarizda quyiladi.
» controls - boshqaruv panel
» loop - audio tugagandan sung, yana boshidan quyish ( takror ).
» preload - yuklab olish veb-sahifa bilan faylni yuklash uchun ishlatiladi.
» src - adres URL...

---------------

Misol:
<audio src="audio_url" controls>
Agar brauzer audio kodini ochmasa joriy izoh aktivlashtirish uchun.
Misol:
(Sizning brauzeringiz ochmadi. Brauzeringizni yangillang !!!) yoki link quying: <a href="audio_url.mp4">Audio-ni yuklash</a> - dib quysayz buladi.
</audio>

@w3_uz › #html5 › #audio

HTML 5 › video

Usullar: ≥
» poster - video screenshoot...
» autoplay - sahifa ochilgandan, audio avtomatik tarizda quyiladi.
» controls - boshqaruv panel
» loop - audio tugagandan sung, yana boshidan quyish ( takror ).
» preload - yuklab olish veb-sahifa bilan faylni yuklash uchun ishlatiladi.
» src - adres URL...

-------------

Misol: 700x400
<video width="700" height="400" controls="controls" poster="video_screenshoot.jpg">
<source src="video_url.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video_url.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video_url.webm" type='video/webm; codecs="vp8, vorbis"'>
Izoh qoldirish uchun maxsus maydon.
Misol:
(Sizning brauzeringiz ochmadi. Brauzeringizni yangillang !!!)
yoki link quying: <a href="video_url.mp4">Video-ni yuklash</a>
</video><br>

@w3_uz › #html5 › #video

Applet

» ActiveX yoki Java-ga asoslangan veb-brauzer tomonidan yuklangan kichik Java dasturi. U nozil qilinganidan keyin dastur kompyuterda ishlaydi. Umumiy dasturlarga moliyaviy kalkulyatorlar va veb-chizma dasturlari kiradi.

@w3_uz › #lugat › #applet

Dastur

» Matnni qayta ishlash yoki chizish kabi vazifalar yoki vazifalar to'plamini bajaradigan kompyuter dasturi. Ilovalar ham dastur sifatida ko'rsatiladi.

@w3_uz › #lugat › #dastur