html5

Ոճայնություն տվող նոր թեգեր

Կառուցվածքային նոր թեգեր

Հիպերտեքստային հղում

Պատկեր, քարտեզ(image, map)

4/17/2013 2

HTML5 ներկայացնում է մի շարք նոր տարրեր և հատկանիշներ,
որոնք արտացոլում են ժամանակակից կայքերում

Ավելացնել <b>աղ</b> և <b>շաքար</b>.<br/>
<em>Ես</em> ընտրեցի նրան:
Ես ընտրեցի <em>դա</em>:
<em>Ես ընտրեցի դա!</em><br/>

<strong>Ուշադրություն!</strong> Դուք մուտք եք գործել այդ տարածք:<br/>
VIP համարը <small>(որն իր մեջ ներառում է նախաճաշ)</small><br/>
E<sub>1</sub> = m<sub>1</sub>c<sup>2</sup>

4/17/2013 3

<dfn> — փաստաթղթում առաջին անգամ սահմանված տերմին
<code> — ծրագրային կոդ կամ նրա մաս
<samp> — ծրագրի արտածման արդյունք
<kbd> — ստեղնաշարով շարված տեքստ
<var> — փոփոխականի հայտարարում
<cite> — ցիտատ կամ այլ հոդվածից մասի օգտագործում
<blockquote> — կրկնակի չակերտներ
<del> — տեքստ վրայից գծով
<ins> — տեքստ տակից գծված
<bdo> — տեքստի կողմնորոշում
<pre> — տեքստը հաշվի առնելով բոլոր բացարկներն ու նախորոշված տեսքը
<mark> — տեքստի հետանշում, հետևի ֆոնի
<time> — ժամային ֆորմատի տեքստ
<meter> — տրված դիապազոնի հաստատում
<progress> — արտացոլում է վիճակի տող
<wbr /> — դրվում է տեքստի մեջ տողադարձի ժամանակ բառը կիսելու համար

4/17/2013 4

Հիպերտեքստային հղման նոր ատրիբուտներ

<a href="http://www.example.com/" hreflang="en-US">Example</a>

_self — նույն պատուհանում
_blank — նոր պատուհանում
_parent — ծնողական պատուհանում եթե այն frame-ի մեջ է)
_top — գլխավոր պատուհանում

HTML5- ում <a> թեգին ավելացել է նաև media ատրիբուտ, հետևյալ արժեքներով

аll — բոլոր սարքերի համար
screen — համակարգչային էկրանների համար

tty — ֆիքսված ցանցով կրիչների համար

tv — հեռուստացույցների տիպի էկրանների համար
projection — պրոյեկտորների համար
handheld — գրպանի սարքերի համար

print — էջային փաստաթղթերի համար

braille — Բրոյլի այբուբենի համար
aural — ձայնի սինթեզատորների համար
4/17/2013 5

Կառուցվածքային նոր թեգեր

4/17/2013 6

HTML5 –ի
հատկանիշներից է
նոր
կառուցվածքային
թեգերի ստեղծումը,
որոնք բավականին
հեշտացնում են
կայքի կառուցվածքի
մշակումը

4/17/2013 7

<section>Թեմատիկ բովանդակությամբ խումբ է, հաջորդում է
<header>- ին: Պարունակում է այլ թեմատիկ թագեր:
<header> խորագիր կամ գլխագիր, պարունակում է ինֆորմացիա
<section>-ի մասին նաև:
<footer> ստորագիր, պարունակում է ինֆորմացիա կայքի
պատրաստողի կամ տիրոջ մասին
<nav> նավարկման հղումների տարածքն է, կարող է լինել և header-ում
և footer-ում
<article>Բլոգի, ամսագրի և այլ տարածքի անկախ մաս
<aside> կողային մասի բովանդակություն, որը անմիջական կապված է
իր հարևան թեգերից

4/17/2013 8

Figure
<figure>
<img src="i/Picture1.png" width="400" alt="Picture
1" title="Picture 1">
</figure>

Նախատեսված է
խմբավորել նկարներ,
վիդեոներ, աուդիո

4/17/2013 9

Նկարների համար նոր ատրիբուտներ, քարտեզներ

<img /> թեգը ունի 2 ատրիբուտներ, որոնք ismap և usermap,
վերածում են նկարը քարտեզի

<img src="planets.gif" alt="Планеты" usemap="#planetmap" />
<map name="planetmap">
<area shape="rectangle" coords="0,0,82,126" href="sun.html" alt="Солнце" />
<area shape="circle" coords="90,58,3" href="mercury.html" alt="Меркурий" />
<area shape="circle" coords="124,58,8" href="venus.html" alt="Венера" />
</map>

4/17/2013 10

Ձևի(form) նոր ատրիբուտներ

input type=email էլփոստի համար նախատեսված, վալիդացիա է
անցնում
input type=url նախատեսված է հասցեի համար, վալիդացվում է
input type=tel նածատեսված է հեռախեսահամարի համար, տարբեր
ֆորմատներով
input type=number թվային արժեքներ է ընդունում, max և min
միջակայքերով
input type=range արժեքներ որոշակի դիապազոնով
input type=search որոնման համար նախատեսված դաշտ է
date ամսաթվի համար նախատեսվախ Տ-Ա-Օ ֆորմատով
time թույլ է տալիս ժամանակ ներմուծել
Datetime ամսաթվի համար նախատեսվախ Տ-Ա-Օ նաև ժամ
ֆորմատով
month ամսի ֆորմատով դաշտ է
week ամսաթվի դաշտ է տարի-շաբաթ ֆորմատով

4/17/2013 11

HTML5 <canvas> տարր, է որն օգտագործվում է
գրաֆիկական պատկեր նկարելու համար՝ օգտագործելով
scripting (սովորաբար JavaScript)

Canvas- ն ունի պատկերներ նկարելու մի քանի մեթոդներ,
տուփով, շրջանակով, պատկերների ավելացումով

<body>
<canvas id='example'>Обновите браузер</canvas>
<script> var example = document.getElementById("example"); var ctx =
example.getContext('2d'); example.width = 640; example.height = 480;
ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260);
ctx.fillRect(20, 20, 256, 256); for (i=0; i<8; i+=2) for (j=0; j<8; j+=2) {
ctx.clearRect(20+i*32, 20+j*32, 32, 32); ctx.clearRect(20+(i+1)*32,
20+(j+1)*32, 32, 32); }
</script>
</body>

4/17/2013 13

Շնորհակալություն

4/17/2013 14

html5

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (9)

Destaque

Destaque (20)

html5