W3 🇺🇿
Photo
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
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
W3 🇺🇿
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…
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
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
W3 🇺🇿
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…
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>© AsaUz / Kutubxona: t.me/w3_uz</p>
</footer>
</body>
</htm>
@w3_uz › #html4 va #html5 - farqi...
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>© AsaUz / Kutubxona: t.me/w3_uz</p>
</footer>
</body>
</htm>
@w3_uz › #html4 va #html5 - farqi...
Telegram
W3 🇺🇿
👨💻Yigit va Qizlar👩💻
HTML, CSS yoki Vebga oid postlar
» Qiziqasizmi yoki Hovoskormisiz yoki Mastermisiz? - Kanal balkim sizlarga maqul kelar😅
› Savollar, Takliflar, Shikoyatlar uchun: @w3_uz_group
› Admin: @asakew
HTML, CSS yoki Vebga oid postlar
» Qiziqasizmi yoki Hovoskormisiz yoki Mastermisiz? - Kanal balkim sizlarga maqul kelar😅
› Savollar, Takliflar, Shikoyatlar uchun: @w3_uz_group
› Admin: @asakew
W3 🇺🇿
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.…
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
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
W3 🇺🇿
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…
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
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
W3 🇺🇿 via @printfbot
Евгений Исаков "HTML5 Elements and their styling".
🎬 › RU › 36:53
🎬 › 720p › 293.1MB
🎬 › 320p › 139.2MB
@w3_uz › #kharkivcss_3, #2018, #css, #html5, #conference
🎬 › RU › 36:53
🎬 › 720p › 293.1MB
🎬 › 320p › 139.2MB
@w3_uz › #kharkivcss_3, #2018, #css, #html5, #conference
