Режа
1
• HTML5 га кириш. HTML5 янги стандартлари.
2
• HTML5 теглар ва атрибутлар
3
• HTML5 да аудио билан ишлаш
4
• HTML5 да видео билан ишлаш.
5
• HTML5 да графика билан ишлаш.
2
HTML5 га кириш
HTML 4.01
//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/stri
ct.dtd">
HTML5
HTML 4.01
HTML5
HTML 4.01
type="text/javascript"
src="file.js">
HTML5
src="file.js">
HTML 4.01
type="text/css"
href="file.css">
HTML5
href="file.css">
5
HTML5
да эскирган теглар
Олиб ташланган тег
Ўрнига фойдаланиладиган
–
–
<![CDATA[
</p>
<p>–
<p>CSS</p>
<br />
<br /><acronym>
<br />
<br /><abbr>
<br />
<br /><applet>
<br />
<br /><object>
<br />
<br /><basefont>
</p>
<p>CSS
<br /></p>
<br /><big>
<p>CSS
<br /></p>
<br /><center>
<p>CSS
<br /></p>
<br /><dir>
<br />
<br /><ul>
<br />
<br /><strike>
<p>CSS, <s>, </p>
<p>ёки <del>
<br />
<br /><tt>
</p>
<p>CSS
<br /></p>
<br />6
<br /></div> <style type="text/css"> </style> <div id="page7-div" >
<br />HTML5
<p>Header
<br /></p>
<br />Navigation
<p>Aside
<br /></p>
<br />Footer
<p>Article
<br /></p>
<br />Footer
<p>Article
<br /></p>
<br />Footer
<p>Article
<br /></p>
<br />Footer
<p>Figure
<br /></p>
<br />Image, Video, Quote, Table,
<p>etc…
<br /></p>
<br />Legend
<p>Section
<br /></p>
<br />7
<br /></div> <style type="text/css"> </style> <div id="page8-div" >
<br /><b>HTML5 </b>
<br />
<br /><b>янги стандартлари</b>
<br />
<br /><b>Тег</b>
<br />
<br /><b>Изоҳи</b>
<br />
<br /><b><article></b>
<p>HTML
<br /></p>
<br />ҳужжатдаги мақолани белгилаш теги
<br />
<br /><b><aside></b>
<p>Саҳифа контентининг четки томонидаги контентини белгилаш теги</p>
<br />
<br /><b><bdi></b>
<p>Бир вақтинг ўзида чапдан ўнгга ва ўнгдан чапга ўқиладиган турли </p>
<p>тиллардаги сўзларни ажратишда фойдаланилади
<br />
<br /><b><details></b>
</p>
<p>Фойдаланувчи кўриши ёки яшириши мумкин бўлган қўшимча </p>
<p>маълумотни белгилайди
<br />
<br /><b><dialog></b>
</p>
<p>Диалог ойнасини очиш теги</p>
<br />
<br /><b><figcaption></b>
<br />
<br /><figure>
<p>элементларига сарлавҳани белгилаш теги </p>
<br />
<br /><b><figure></b>
<p>Автоном контентни белгилаш теги</p>
<br />
<br /><b><footer></b>
<p>HTML
<br /></p>
<br />ҳужжат учун пастки колонтитулни белгилаш теги
<br />
<br /><b><header></b>
<p>HTML
<br /></p>
<br />ҳужжат учун юқори колонтитул сарлавҳасини белгилаш теги
<br />
<br /><b><main></b>
<p>HTML
<br /></p>
<br />ҳужжатнинг асосий таркибини белгилаш теги
<p>8
<br /></div> <style type="text/css"> </style> <div id="page9-div" > </p>
<br /><b>HTML5 </b>
<br />
<br /><b>янги стандартлари</b>
<br />
<br /><b>Тег</b>
<br />
<br /><b>Изоҳи</b>
<br />
<br /><b><nav></b>
<p>Навишация ҳаволаларини белгилаш теги</p>
<br />
<br /><b>
<br /></b>
<p>Вазифанинг бажарилишини намойиш қилиш теги</p>
<br />
<br /><b><section></b>
<p>HTML
<br /></p>
<br />ҳужжат бўлимини белгилаш теги
<br />
<br /><b><summary></b>
<br />
<br /><details>
<p>элементи учун кўринадиган сарлавҳани чиқариш теги</p>
<br />
<br /><b><time></b>
<p>Сана / вақтни белгилаш теги</p>
<br />
<br /><b><wbr></b>
<p>Кейинги қаторга ўтиш мумкинлигини белгилаш теги</p>
<br />
<br /><b><meter></b>
<p>Маълум диапазон доирасидаги скаляр ўлчовни белгилайди.</p>
<br />
<br /><b><mark></b>
<p>Белгиланган/ажратилган матн ҳосил қилиш теги</p>
<p>9
<br /></div> <style type="text/css"> </style> <div id="page10-div" >
<br /><b>HTML5 </b>
<br />
<br /><b>янги форма элементлари</b>
<br />
<br /><b>Тег</b>
<br />
<br /><b>Изоҳи</b>
<br />
<br /><b><datalist></b>
</p>
<p>Киритишни бошқариш учун олдиндан киритилган параметрлар рўйхатини </p>
<p>белгилайди
<br />
<br /><b><html></b>
<br />
<br /><b><body></b>
<br />
<br /><b><form action="/" method="get"></b>
<br />
<br /><b><input list="languages" name="language"></b>
<br />
<br /><b><datalist id="languages"></b>
<br />
<br /><b><option value="C++"></b>
<br />
<br /><b><option value="Phyton"></b>
<br />
<br /><b><option value="PHP"></b>
<br />
<br /><b><option value="JavaScript"></b>
<br />
<br /><b><option value="JAVA"></b>
<br />
<br /><b><option </b>
<br />
<br /><b>value="ActionScript"></b>
<br />
<br /><b></datalist></b>
<br />
<br /><b><input type="submit" value="Send"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form </b>
<br />
<br /><b>oninput="x.value=parseInt(a.value)+parseInt</b>
<br />
<br /><b>(b.value)">0</b>
<br />
<br /><b><input type="range" id="a" value="50">100</b>
<br />
<br /><b> </b>
<br />
<br /><b>+ <input type="number" id="b" value="30"></b>
<br />
<br /><b>=<output name="x" for="a b"></output></b>
<br />
<br /><b></form></b>
<br />
<br /><b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mycolor">Select Color:</label></b>
<br />
<br /><b><input type="color" value="#00ff00" id="mycolor"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mydate">Select Date:</label></b>
<br />
<br /><b><input type="date" value="2020-03-14" id="mydate"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mydatetime">Choose Date and Time:</label></b>
<br />
<br /><b><input type="datetime-local" id="mydatetime"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="myemail">Enter Email Address:</label></b>
<br />
<br /><b><input type="email" id="myemail" required></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mymonth">Select Month:</label></b>
<br />
<br /><b><input type="month" id="mymonth"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mynumber">Enter a Number:</label></b>
<br />
<br /><b><input type="number" min="1" max="10" step="0.5" </b>
<br />
<br /><b>id="mynumber"></b>
<br />
<br /><b></form></b>
<br />
<br />
<br /><b>Note</b>: If you try to enter the number out of the range (1-10) or
</p>
<p>text character it will show error.</p>
<br /><b><form></b>
<br />
<br /><b><label for="mynumber">Select a Number:</label></b>
<br />
<br /><b><input type="range" min="1" max="10" step="0.5" </b>
<br />
<br /><b>id="mynumber"> </b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mysearch">Search Website:</label></b>
<br />
<br /><b><input type="search" id="mysearch" placeholder="Type </b>
<br />
<br /><b>something..."></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="myphone">Telephone Number:</label></b>
<br />
<br /><b><input type="tel" id="myphone" placeholder="xx-xxxx-</b>
<br />
<br /><b>xxxx" required></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="mytime">Select Time:</label></b>
<br />
<br /><b><input type="time" id="mytime"></b>
<br />
<br /><b></form></b>
<br />
<br /><b><form></b>
<br />
<br /><b><label for="myurl">Enter Website URL:</label></b>
<br />
<br /><b><input type="url" id="myurl" required></b>
<br />
<br /><b></form></b>
<br />
<br />
<br /><b>Note</b>: Enter URL in the form like
<p>https://www.google.com</p>
<br /><b><form></b>
<br />
<br /><b><label for="myweek">Select Week:</label></b>
<br />
<br /><b><input type="week" id="myweek"></b>
<br />
<br /><b></form></b>
<br />
<br /></b>
<br />
<br /><b><audio controls src="birds.mp3"></b>
<br />
<br /><b>Your browser does not support the HTML5 audio element.</b>
<br />
<br /><b></audio></b>
<br />
<br /><b><audio controls autoplay loop></b>
<br />
<br /><b><source src="birds.mp3" type="audio/mpeg"></b>
<br />
<br /><b><source src="birds.ogg" type="audio/ogg"></b>
<br />
<br /><b>Your browser does not support the HTML5 audio element.</b>
<br />
<br /><b></audio></b>
<br />
<br /><b>
<br />Track 1
<br /></b>
<br />
<br /><b>
<br />Track 2
<br /></b>
<br />
<br /><b><object data="sea.mp3"></object></b>
<br />
<br /><b><object data="sea.ogg"></object></b>
<br />
<br /><b><embed src="wind.mp3"></b>
<br />
<br /><b><embed src="wind.ogg"></b>
<br />
<br /><b><video controls src="shuttle.mp4"></b>
<br />
<br /><b>Your browser does not support the HTML5 Video element.</b>
<br />
<br /><b></video></b>
<br />
<br /><b><video controls></b>
<br />
<br /><b><source src="shuttle.mp4" type="video/mp4"></b>
<br />
<br /><b><source src="shuttle.ogv" type="video/ogg"></b>
<br />
<br /><b>Your browser does not support the HTML5 Video element.</b>
<br />
<br /><b></video></b>
<br />
<br /><b><embed src="blur.swf" width="400px" height="200px"></b>
<br />
<br /><b><iframe width="560" height="315“</b>
<br />
<br /><b>src="//www.youtube.com/embed/YE7VzlLtp-4" </b>
<br />
<br /><b>frameborder="0" allowfullscreen></b>
<br />
<br /><b></iframe></b>
<br />
<br /><b>
<br />Source:
<br />
<br /><b>rel="nofollow">https://www.youtube.com/watch?v=YE7VzlLtp-4
<br /></b>
<br />
<br /><b>
<br />
<br /><canvas id="myCanvas" width="200" height="
<p>100“
<br /></p>
<br />>
<p>Your browser does not support the HTML5 canvas tag.</p>
<br />
<br /></canvas>
<br />
<br /><script>
<p>var c = document.getElementById("myCanvas");</p>
<p>var ctx = c.getContext("2d");
</p>
<p>ctx.moveTo(0,0);</p>
<p>ctx.lineTo(200,100);
</p>
<p>ctx.stroke();</p>
<br />
<br /></script>
<br />
<br /><canvas id="myCanvas" width="200" height="100"
<p>>
<p>Your browser does not support the HTML5 canvas tag.</p>
<br />
<br /></canvas>
<br />
<br /><script>
</p>
<p>var c = document.getElementById("myCanvas");</p>
<p>var ctx = c.getContext("2d");
</p>
<p>ctx.font = "30px Arial";</p>
<p>ctx.fillText("Hello World",10,50);
<br />
<br /></script>
<br />
<br /><canvas id="myCanvas" width="200" height="100"
</p>
<p>>
<p>Your browser does not support the HTML5 canvas tag.</p>
<br />
<br /></canvas>
<br />
<br /><script>
</p>
<p>var c = document.getElementById("myCanvas");</p>
<p>var ctx = c.getContext("2d");
</p>
<p>ctx.font = "30px Arial";</p>
<br />
<br />ctx.strokeText("Hello World",10,50);
<br />
<br /></script>
<br />
<br /></b>
<br />
<br /><b><canvas id="myCanvas">Canvas Example.</canvas></b>
<br />
<br /><b><script></b>
<br />
<br /><b>var c = document.getElementById("myCanvas");</b>
<br />
<br /><b>var ctx = c.getContext("2d");</b>
<br />
<br /><b>ctx.fillStyle = "green";</b>
<br />
<br /><b>ctx.fillRect(0, 0, 180, 100);</b>
<br />
<br /><b></script></b>
<br />
<br /><b>
<br />
<br /><b><canvas id="myCanvas" width="200" height="100"</b>
<br />
<br /><b>></b>
<br />
<br /><b>Your browser does not support the canvas element.</b>
<br />
<br /><b></canvas></b>
<br />
<br /><b><script></b>
<br />
<br /><b>var canvas = document.getElementById("myCanvas");</b>
<br />
<br /><b>var ctx = canvas.getContext("2d");</b>
<br />
<br /><b>ctx.fillStyle = "#FF0000";</b>
<br />
<br /><b>ctx.fillRect(0,0,150,75);</b>
<br />
<br /><b></script></b>
<br />
<br /></b>
<br />
<br /><b><svg width="100" height="100"></b>
<br />
<br /><b><circle cx="50" cy="50" r="40" </b>
<br />
<br /><b>stroke="green" stroke-width="4" </b>
<br />
<br /><b>fill="yellow" /></b>
<br />
<br /><b></svg></b>
<br />
<br /><b><svg width="400" height="100"></b>
<br />
<br /><b><rect width="400" height="100" </b>
<br />
<br /><b>position:absolute;top:452px;left:41px;white-space:nowrap" ><b>width:10;stroke:rgb(0,0,0)" /></b>
<br />
<br /><b></svg></b>
<br />
<br /><b> </rect></circle></embed></source></source></embed></embed></source></source></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></input></body></html></datalist></mark></meter></wbr></time></details></summary></section></nav></main></header></footer></figure></figure></figcaption></dialog></details></bdi></aside></article></tt></del></s></strike></dir></center></big></basefont></object></applet></abbr></acronym>]]>
