html

13
HTML ԱԱԱԱԱԱԱԱԱ webdesignfromscratch.com

Upload: internews-training

Post on 04-Aug-2015

609 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: HTML

HTML

Աղբյուրը՝webdesignfromscratch.com

Page 2: HTML

HTML-Ի՞նչ է ը

• "HTML" "HyperText Markup նշանակում էLanguage". Այն ստեղծվել է Թիմ

- : Բերներս Լիի կողմից Վերջինսայն , WWW- : HTML- մարդն է ով ստեղծել է ն ը

գոյություն ունի համացանցի ստեղծման օրից եւայստարիների :ընթացքում շատ քիչ էփոխվել

•HTML- , ը այնպայմանական լեզուն է որն օգտագործվում է

: ինտերնետային էջեր գրելու համար Այնպարզապես նկարագրում է

ինտերնետային էջի պարունակությունը եւ

:կառուցվածքը

Page 3: HTML

HTML Ծանոթացումթեգերին

•HTML – , ը օգտագործում է թեգեր որոնք գրվում ենանկյունաձեւ

, չակերտների մեջ ինչպեսայս< >:թեգը

Page 4: HTML

Զուգակցվող թեգեր

• , Թեգերի մեծ մասը զուկացված են այլ կերպասած՝ նրանք սկսվում են

բացման թեգով եւավարտվում : համապատասխանփակման թեգով

Թեգերի զույգը նկարագրում է իրենց միջեւ ընկած բովանդակության

:կառուցվածքը եւ նշանակությունը• HTML- Պարզ ի օրինակ• <p> : Սապարբերություն է Այնամենը

ինչ գտնվում էայս երկու թեգերի, միջեւ համարվում էպարբերության:</p>մասը

Page 5: HTML

Անկախ HTML թեգեր

• Որոշ թեգեր չունեն համապատասխանփակման թեգը

• , Դրանքայն թեգերն են որոնք կարիք չունեն իրենց միջեւ ներփակված

, բովանդակության որպեսզի :նշանակություն ձեռք բերեն

• HTML Հիմնականանկախ թեգերն են• <br>• : Տողիավարտի նշանը Սա նորտող է

: (<br /> xHTML- )բացում ում• <hr>• : (<hr /> xHTML- )Հորիզոնական գիծ ում• <img>• : Նկար Սրան դեռ կանդրադառնանք• <meta>• , Սա չերեւացող թեգ է որը

<head> տեղակայվում է էջի բաժնում եւ հիմնականում էջի մասին

օգտակարտեղեկատվություն :հաղորդելու համար է

Page 6: HTML

ՊարզֆորմատավորումHTML-ում

• HTML Ամենաշատօգտագործվող թեգերն են․

• <h1> … </h1>, <h2> … </h2>, <h3> … </h3>• (heading 1, 2 3), Գլխագրերը որոնք

օգտագործվում են ինտերնետային էջերում վերնագրեր եւ

ենթաբաժինների գլխագրեր գրելու:համար

• <p> … </p>• Սաարդենտեսել ենք վերեւի

: օրինակում Այս թեգերի միջեւ տեղաբաշխվում են

: պարագրաֆները Այս թեգերից առաջինը կարծեսասում է՝ այ

, այստեղ սկսվում էպարագրաֆը իսկ երկրոդը զգուշացնում է՝ այստեղ

:պարագրաֆնավարտվում է• <br>• Սրա մասին էլ խոսեցինք․ սկսում է

:նորտող• <hr>• Հորիզոնական գիծ

Page 7: HTML

ՊարզֆորմատավորումHTML-ում

• <div> … </div>• Սա շատհաճախակի օգտագործվող

: թեգ է Այս թեգըասես ընդհանուր , նշանակության կոնտեյներ լինի որը

զբաղեցնում էայնամբողջ, :տարածքը որը մակնիշոմ է

• <span> .. </span>• , Սա եւս կոնտեյների նման է բայց եթե

div- ըասես ուղղանկյունտարածք , span- զբաղեցնի՝ նմանվելովտուփի ը

կարծեսփաթաթվի իր մերջ :ներփակված բովանդակությանը

• <strong> .. </strong>• Այս թեգի մեջ ներփակվածտեքստը

: ընդգծվում է Այն սովորաբար հաստ՝ բոլդ ֆորմատավորման դեր է

:տանում• <em> .. </em>• : Շեշտվածտեքստ Սա էլ

հիմնականում երեւում է որպես :շեղագիր՝ իթալիկտառատեսակ

• <title>• Այս թեգըտեղաբաշխվում է էջի

գլխամասային բաժնում եւ չի : , երեւում բուն էջում Այնասում է թե

ինչ է տվյալ էջիանվանումը եւ երեւում է ինտերնետային

(title զննարկիչի Անմանման բաժնումbar):

Page 8: HTML

Paragraph tag: <p> … </p>

Code<p> Here’s a paragraph.</p><p> And here’s a different one. It’s as simple as that.</p>Looks likeHere’s a paragraph.And here’s a different one.It’s as simple as that.

Page 9: HTML

Line-break tag: <br>

CodeI’d like to write some text<br>and then have the next bit on the line below.Looks likeI’d like to write some textand then have the next bit on the line below.

Page 10: HTML

Horizontal rule tag: <hr>

Code<p>Here’s part of my page.</p><hr><p>And here’s another bit, distinguished by the line above.</p>

Looks likeHere’s part of my page

And here’s another bit, distinguished by the line above.

Page 11: HTML

Div tag: <div> … </div>

CodeHere’s some content…<div>This is a div.</div><div>And this is another one. Works pretty much like a new paragraph for now.</div>Here’s some more content…Looks likeHere’s some content…This is a div.And this is another one. Works pretty much like a new paragraph for now.Here’s some more content…Basically, that’s it about <div>s. They’re boxes, and (unless you tell them otherwise), they occupy the full width of the space available to them.It’s only when we get on to CSS that we can make divs do all kinds of interesting things.

Page 12: HTML

Span tag: <span> … </span>

Code<p>Here’s a paragraph of text. What I want to happen is to make <span style=”font-weight:bold;”>some of the text bold</span>, and then make <span style=”color:red;”>some of it red</span>, and <span style=”background:yellow;”>yet another bit on a yellow background</span>. <span>Now, some of this text may wrap round onto new lines, but that’s OK.</span></p>How it looksHere’s a paragraph of text. What I want to happen is to make some of the text bold, and then make some of it red, and yet another bit on a yellow background. Now, some of this text may wrap round onto new lines, but that’s OK.If you look carefully at the code above, you may notice that spans don’t actually do anything on their own.The last sentence is contained in a blank <span>, which has no effect on anything.The only ones you notice in any way are the ones I’ve styled (using inline CSS.

Page 13: HTML

Խորանալու համար

• Ավելիխորանալու համար առաջարկում եմ կարդալայս էջերը․

• http://www.webdesignfromscratch.com/html-css/html-lists/• http://www.webdesignfromscratch.com/html-

css/html-tables/• http://www.w3schools.com/css/css_intro.asp