Mavzu: HTML5 yangi standartlari va ularning vazifalari
Kalit so‘zlar
HTML5 da yangi teglar va atributlar paydo bo‘ldi:
number, date, time, calendar, range kabi yangi forma elementlari atributlari.
HTML Geolocation , HTML Drag and Drop, HTML Local Storage, HTML Application Cache, HTML Web Workers , HTML SSE
Olib tashlangan teg
O‘rniga foydalaniladigan
<![CDATA[
<br /></td> <td width="180" bgcolor="#ffffff">
<br />–
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br />
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><acronym>
<br /></td> <td width="180" bgcolor="#ffffff">
<br /><abbr>
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><applet>
<br /></td> <td width="180" bgcolor="#ffffff">
<br /><object>
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><basefont>
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><big>
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><center>
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><dir>
<br /></td> <td width="180" bgcolor="#ffffff">
<br /><ul>
<br /></td> </tr> <tr valign="top"> <td width="157" height="8" bgcolor="#ffffff">
<br /><strike>
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS, <s>, yoki <del>
<br /></td> </tr> <tr valign="top"> <td width="157" height="7" bgcolor="#ffffff">
<br /><tt>
<br /></td> <td width="180" bgcolor="#ffffff">
<br />CSS
<br /></td> </tr> </table>HTML5 da CSS imkoniyatlari paydo bo‘ldi.
<br />
<br />
<br />
<br />
<br />
<br />
<br /><b><span id='HTML5_yangi_standartlari'>HTML5 <a href="/8-mavzu-auditorlik-standartlari-va-auditning-uslubiyoti-6-soat.html">yangi standartlari</a></span></b>
<br /><table width="579" cellpadding="5" cellspacing="0"> <col width="133"> <col width="424"> <tr valign="top"> <td width="133" height="5" bgcolor="#0277bd">
<br /><b>Teg</b>
<br /></td> <td width="424" bgcolor="#0277bd">
<br /><b>Izohi</b>
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><article></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />HTML hujjatdagi maqolani belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><aside></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Sahifa kontentining chetki tomonidagi kontentini belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="12" bgcolor="#ffffff">
<br /><b><bdi></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Bir vaqting o‘zida chapdan o‘ngga va o‘ngdan chapga o‘qiladigan turli tillardagi so‘zlarni ajratishda foydalaniladi
<br /></td> </tr> <tr> <td width="133" height="12" bgcolor="#ffffff">
<br /><b><details></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Foydalanuvchi ko‘rishi yoki yashirishi mumkin bo‘lgan qo‘shimcha ma’lumotni <a href="/ctrl-a-hammasini-belgilaydi-shift--home-oxiridan-boshigacha-be.html">belgilaydi
</a><br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><span id='__Dialog_oynasini_ochish_tegi'><dialog></span></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Dialog oynasini ochish tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><figcaption></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br /><span id='__Avtonom_kontentni_belgilash_tegi'><figure></span> elementlariga sarlavhani belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><figure></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Avtonom kontentni belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><footer></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />HTML hujjat uchun pastki <a href="/tegidan-tashqari-bu-bolimning-qolgan-barcha-teglari-ekranda-ak-v6.html">kolontitulni belgilash tegi
</a><br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><header></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />HTML hujjat uchun yuqori kolontitul sarlavhasini belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><main></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />HTML hujjatning asosiy tarkibini belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><span id='__Navishatsiya_havolalarini_belgilash_tegi'><nav></span></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Navishatsiya havolalarini belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b>
<br /></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Vazifaning bajarilishini <a href="/ilk-qadam-dasturi-asosida-oz-ozini-namoyish-qilish-tamoyili-ma.html">namoyish qilish tegi
</a><br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><span id='__HTML_hujjat_bo‘limini_belgilash_tegi'><section></span></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />HTML hujjat bo‘limini belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><summary></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br /><details> elementi uchun ko‘rinadigan sarlavhani chiqarish tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><span id='__Sana_/_vaqtni_belgilash_tegi'><time></span></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Sana / vaqtni belgilash tegi
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><wbr></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Keyingi qatorga o‘tish <a href="/tegidan-tashqari-bu-bolimning-qolgan-barcha-teglari-ekranda-ak-v6.html">mumkinligini belgilash tegi
</a><br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><meter></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Ma’lum diapazon doirasidagi skalyar o‘lchovni belgilaydi.
<br /></td> </tr> <tr> <td width="133" height="6" bgcolor="#ffffff">
<br /><b><mark></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Belgilangan/ajratilgan matn hosil qilish tegi
<br /></td> </tr> <tr> <td width="133" height="5" bgcolor="#ffffff">
<br /><b><datalist></b>
<br /></td> <td width="424" bgcolor="#ffffff">
<br />Kiritishni boshqarish uchun oldindan kiritilgan parametrlar ro‘yxatini belgilaydi
<br /></td> </tr> </table>
<br />
<br /><b><span id='HTML5_yangi_forma_elementlari'>HTML5 yangi forma elementlari</span></b>
<br />
<br />
<br /><table width="599" cellpadding="5" cellspacing="0"> <col width="137"> <col width="440"> <tr valign="top"> <td width="137" height="3" bgcolor="#0277bd">
<br /><b>Teg</b>
<br /></td> <td width="440" bgcolor="#0277bd">
<br /><b>Izohi</b>
<br /></td> </tr> <tr valign="top"> <td width="137" height="3" bgcolor="#ffffff">
<br /><b><output></b>
<br /></td> <td width="440" bgcolor="#ffffff">
<br />Hisoblash <a href="/3-html5-da-yangi-teglar-html5-da-audio-video-va-grafika-bilan.html">natijasini aniqlash tegi
</a><br /></td> </tr> </table>
<br />
<br />
<br /><table width="602" cellpadding="5" cellspacing="0"> <col width="92"> <col width="116"> <col width="361"> <tr> <td width="92" height="5" bgcolor="#0277bd">
<br /><b><span id='Atribut_nomi__Qiymati__Izohi'>Atribut nomi</span></b>
<br /></td> <td width="116" bgcolor="#0277bd">
<br /><b>Qiymati</b>
<br /></td> <td width="361" bgcolor="#0277bd">
<br /><b>Izohi</b>
<br /></td> </tr> <tr> <td width="92" height="15" bgcolor="#ffffff">
<br /><b>for</b>
<br /></td> <td width="116" bgcolor="#ffffff">
<br />element_id
<br /></td> <td width="361" bgcolor="#ffffff">
<br />Hisoblash natijasi va hisoblashda ishlatiladigan elementlar o‘rtasidagi munosabatni belgilaydi
<br /></td> </tr> <tr> <td width="92" height="6" bgcolor="#ffffff">
<br /><b>form</b>
<br /></td> <td width="116" bgcolor="#ffffff">
<br />form_id
<br /></td> <td width="361" bgcolor="#ffffff">
<br />Tegishli forma elementini aniqlaydi
<br /></td> </tr> <tr> <td width="92" height="5" bgcolor="#ffffff">
<br /><b>name</b>
<br /></td> <td width="116" bgcolor="#ffffff">
<br />name
<br /></td> <td width="361" bgcolor="#ffffff">
<br />Chiqish elementi nomini belgilaydi
<br /></td> </tr> </table>
<br />
<br />
<br />
<br />
<br />
<br /><b><span id='HTML5_yangi_kiritish_turlari__HTML5_yangi_kiritish_turlari:_color'>HTML5 <a href="/6-sinf-informatika-v3.html">yangi kiritish turlari</a></span></b>
<br />
<br /><b>HTML5 yangi kiritish turlari: color</b>
<br /><html lang="en">
<br /><head>
<br /><title>HTML5 Color Input Type</title>
<br /></head>
<br /><body>
<br /><span id='__Select_Date'><form></span>
<br /><label for="mycolor">Select Color:</label>
<br /><input type="color" value="#00ff00" id="mycolor">
<br /></form>
<br /><b><form></b>
<br /><b><label for="mydate">Select Date:</label></b>
<br /><b><input type="date" value="2020-03-14" id="mydate"></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><label for="mydatetime">Choose Date and Time:</label></b>
<br /><b><input type="datetime-local" id="mydatetime"></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><span id='_Enter_Email_Address'><label for="myemail">Enter Email Address:</label></span></b>
<br /><b><input type="email" id="myemail" required></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><label for="mymonth">Select Month:</label></b>
<br /><b><input type="month" id="mymonth"></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><label for="mynumber">Enter a Number:</label></b>
<br /><b><span id='__Note'><input type="number" min="1" max="10" step="0.5" id="mynumber"></span></b>
<br /><b></form></b>
<br /><b>Note</b>: If you try to enter the number out of the range (1-10) or text character it will show error.
<br /><b><form></b>
<br /><b><label for="mynumber">Select a Number:</label></b>
<br /><b><input type="range" min="1" max="10" step="0.5" id="mynumber"> </b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><span id='_Search_Website'><label for="mysearch">Search Website:</label></span></b>
<br /><b><input type="search" id="mysearch" placeholder="Type something..."></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><label for="myphone">Telephone Number:</label></b>
<br /><b><input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><span id='_Select_Time:_____Enter_Website_URL'><label for="mytime">Select Time:</label></span></b>
<br /><b><input type="time" id="mytime"></b>
<br /><b></form></b>
<br /><b><form></b>
<br /><b><label for="myurl">Enter Website URL:</label></b>
<br /><b><input type="url" id="myurl" required></b>
<br /><b></form></b>
<br /><b>Note</b>: Enter URL in the form like https://www.google.com
<br /><b><form></b>
<br /><b><span id='_Select_Week'><label for="myweek">Select Week:</label></span></b>
<br /><b><input type="week" id="myweek"></b>
<br /><b></form></b>
<br /><audio controls src="birds.mp3">
<br />Your browser does not support the HTML5 audio element.
<br /></audio>
<br /><audio controls <u>autoplay</u> <u>loop</u>>
<br /><source src="birds.mp3" type="audio/mpeg">
<br /><source src="birds.ogg" type="audio/ogg">
<br />Your browser does not support the HTML5 audio element.
<br /></audio>
<br />Track 1
<br />Track 2
<br /><object data="sea.mp3"></object>
<br /><object data="sea.ogg"></object>
<br /><embed src="wind.mp3">
<br /><embed src="wind.ogg">
<br /><video controls src="shuttle.mp4">
<br />Your browser does not support the HTML5 Video element.
<br /></video>
<br /><video controls>
<br /><source src="shuttle.mp4" type="video/mp4">
<br /><source src="shuttle.ogv" type="video/ogg">
<br />Your browser does not support the HTML5 Video element.
<br /></video>
<br /><embed src="blur.swf" width="400px" height="200px">
<br /><iframe width="560" height="315“
<br />src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen>
<br /></iframe>
<br />Source: https://www.youtube.com/watch?v=YE7VzlLtp-4
<br /><canvas id="myCanvas" width="200" height="100“
<br />>
<br />Your browser does not support the HTML5 canvas tag.
<br /></canvas>
<br /><script>
<br />var c = document.getElementById("myCanvas");
<br />var ctx = c.getContext("2d");
<br />ctx.moveTo(0,0);
<br />ctx.lineTo(200,100);
<br />ctx.stroke();
<br /></script>
<br /><span id='_>_Your_browser_does_not_support_the_canvas_element.'><canvas id="myCanvas" width="200" height="100"</span>
<br />>
<br />Your browser does not support the HTML5 canvas tag.
<br /></canvas>
<br /><script>
<br />var c = document.getElementById("myCanvas");
<br />var ctx = c.getContext("2d");
<br />ctx.font = "30px Arial";
<br />ctx.fillText("Hello World",10,50);
<br /></script>
<br /><canvas id="myCanvas" width="200" height="100"
<br />>
<br />Your browser does not support the HTML5 canvas tag.
<br /></canvas>
<br /><script>
<br />var c = document.getElementById("myCanvas");
<br />var ctx = c.getContext("2d");
<br />ctx.font = "30px Arial";
<br />ctx.strokeText("Hello World",10,50);
<br /></script>
<br /><canvas id="myCanvas">Canvas Example.</canvas>
<br /><script>
<br />var c = document.getElementById("myCanvas");
<br />var ctx = c.getContext("2d");
<br />ctx.fillStyle = "green";
<br />ctx.fillRect(0, 0, 180, 100);
<br /></script>
<br /><b><canvas id="myCanvas" width="200" height="100"</b>
<br /><b>></b>
<br /><b>Your browser does not support the canvas element.</b>
<br /><b></canvas></b>
<br /><b><script></b>
<br /><b>var canvas = document.getElementById("myCanvas");</b>
<br /><b>var ctx = canvas.getContext("2d");</b>
<br /><b>ctx.fillStyle = "#FF0000";</b>
<br /><b>ctx.fillRect(0,0,150,75);</b>
<br /><b></script></b>
<br /><svg width="400" height="100">
<br /><rect width="400" height="100" />
<br /></svg>
<br /><svg width="100" height="100">
<br /><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<br /></svg></circle></rect></embed></source></source></embed></embed></source></source></input></input></input></input></input></input></input></input></input></input></input></input></body></html></output></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>]]> Do'stlaringiz bilan baham:
