Ժողովուրդ, HTML-ով սայտ եմ սարքում: Ինձ պետք ա կոտորակի գիծ գծեմ, բայց չեմ կարողանում: Մի ձև եմ իմանում՝ Paint-ում գիծ եմ գծում, նկար սարքում, հետո որպես նկար դնում, բայց էս ձևը դուրս չի գալիս:
Եթե ուրիշ ձև կա, խնդրում եմ էլի, օգնեք:
Ժողովուրդ, HTML-ով սայտ եմ սարքում: Ինձ պետք ա կոտորակի գիծ գծեմ, բայց չեմ կարողանում: Մի ձև եմ իմանում՝ Paint-ում գիծ եմ գծում, նկար սարքում, հետո որպես նկար դնում, բայց էս ձևը դուրս չի գալիս:
Եթե ուրիշ ձև կա, խնդրում եմ էլի, օգնեք:
Սիրում եմ կյանքը, ինքն էլ ինձ է սիրում
. HTML ԳԾԱՆՇՄԱՆ ԼԵԶՈՒՆ
1. HTML փաստաթղթերի կառուցվածքը և հիմնական տեգերը
2. Տեքստի գծանշումը և կազմակերպումը HTML փաստաթղթերում
2.1. Տեքստի ֆիզիկական ոճի գծանշում
2.2. Տեքստի տրամաբանական ոճի գծանշում
2.3. Տեքստի կազմակերպումը (վերնագրեր, հորի¬զո¬նա¬կան գծեր)
2.4. Ցուցակներ
3.Հիպերհղումների կազմակերպումը HTML-ում
3.1. Հիպերհղումների աշխատանքի սկզբունքը: Բացարձակ և հա¬¬րա¬¬բերական հասցեավորում
3.2. Հիպերհղումների և ներքին հղումների ստեղծումը web-էջում
3.3. Հատուկ հիպերհղումներ
4. Գրաֆիկայի և մուլտիմեդիայի օգտագործումը HTML փաստաթղթերում
4.1. Գրաֆիկայի օգտագործումը web-էջերում
4.2. Մուլտիմեդիայի օգտագործումը web-էջերում
5. Web-էջերի աղյուսակային ձևավորումը
5.1. Աղյուսակների կառուցման հիմունքները
5.2. Աղյուսակների ձևավորումը
6. Ոճերի աղյուսակներ, հատուկ պայմանանիշեր (սիմվոլներ)
6.1. Ոճերի աղյուսակների ընդհանուր հասկացությունը
6.2. Ոճերի աղյուսակների ներդրումը web-էջում
6.3. Ոճերի դասեր, ոճավորման հատուկ՝ <div> և <span> տեգերը
6.4. Ոճերի աղյուսակների կապակցումը web-էջերին
6.5. Բլոկային տարրերի տեղաբաշխման և տեսքի ոճերը..
6.6. Հատուկ պայմանանիշեր (պրիմիտիվներ)
7. Կայքերի կառուցումը ֆրեյմների (շրջանակների) միջոցով
8. Meta-որոշիչները
9. Web-խմբագրիչները
Cannibal (31.05.2010)
HTML ԳԾԱՆՇՄԱՆ ԼԵԶՈՒՆ
HTML լեզուն ստեղծվել է գիտական և ուսումնական ինֆորմացիայի փոխանակման նպատակներով, այն տարիներին, երբ Ինտերնետից օգտվում էին միայն գիտական և կառավարական հիմնարկությունները: Ժամանակի ընթացքում, երբ լեզվի կիրառության բնագավառը ընդլայնվեց՝ կրթություն, զվարճանքներ, կոմերցիա և այլն, այսինքն` երբ առաջացավ տեսողական լավ ձևավորված, դյուրին ընկալվող web-էջերի անհրաժեշտություն, պարզ դարձավ, որ լեզվի ընթացիկ վարկածը չի համապատասխանում աճող պահանջներին: Այդ պատճառով, web-մեկնաբաններ (հատկապես Internet Explorer և Netscape) արտադրող ֆիրմաները սկսեցին ավելացնել սեփական՝ ոչ ստանդարտ հրամաններ, որոնք հնարավորություն տվեցին բրաուզերներին արտապատկերել պատկերազարդ, վառ, գրավիչ էջեր:
Սակայն շատ շուտով web-դիզայներների պահանջների և web-մեկնաբանների հնարավորությունների միջև առաջացան համատեղելիության հիմնախնդիրներ և, ինչպես արդեն նշել ենք, 2000 թվականին W3C խումբը ստեղծեց XML ստանդարտը, որը հիմք հանդիսացավ գծանշման լեզվի մշակվող բոլոր տարբերակների համար: Որպես անցումային` ստեղծվեց XHTML գծանշման լեզուն, որի ընթացիկ վարկածը քիչ է տարբերվում HTML4.01-ից (HTML-ի վերջին վարկածից): Այն պարզապես հին ստանդարտների ավելի խստապահանջ տարբերակն է և պահանջում է web-դիզայներներից ծրագրային կոդի ավելի “կոկիկ” ձևակերպում:
Կարող է թվալ, թե բոլոր դեպքերում անհրաժեշտ է կիրառել նո-րագույն ստանդարտը, սակայն իրականում նույնիսկ ստանդարտն ունի երկու տարբերակներ՝ խիստ և անցումային: Բանն այն է, որ ոչ բոլոր բրաուզերներն են կարողանում արտապատկերել էջերը նոր ձևաչափում: Իհարկե, օգտվողների մեծամասնությունը “թարմացնում է” ծրագրային և ապարատային ապահովումները, սակայն դեռ գոյություն ունեն մեծ թվով հին մեքենաներ, որոնց վրա տեղադրված է հին` XHTML-ից “անտեղյակ” ծրագրային ապահովում:
Վերջին խմբագրող՝ Zangezur: 04.12.2009, 19:57:
Cannibal (31.05.2010)
1. HTML փաստաթղթերի կառուցվածքը և
հիմնական տեգերը
Ինչպես և ցանկացած այլ ծրագրավորման լեզու, HTML-ը նախատեսում է ծրագրի, մեր դեպքում՝ HTML-փաստաթղթի, որոշակի ստանդարտացված կառուցվածք: HTML-փաստաթղթում այդպիսի կառուցվածքը նկարագրում է ոչ թե հրամանների, այլ անմիջականորեն ծրագրային կոդ պարունակող պարտադիր բլոկների դասավորության հաջորդականությունը: Ի տարբերություն ծրագրավորման այլ լեզուների, HTML-ի դիրեկտիվները չեն անվանվում “հրամաններ”, “պրոցեդուրաներ” կամ “օպերատորներ”: Դրանք ունեն սեփական անվանում՝ “տեգ”-եր (անգլերեն “tag” - գծանիշ): Տեգ-ը իրենից ներկայացնում է անկյունային փակագծերի մեջ վերցված որոշակի բառ-բանալի՝ դեսկրիպտոր: Տեգի գրանցման եղանակը ընդհանուր դեպքում կարելի է ներկայացնել հետևյալ տեսքով՝
<տեգ>:
Բոլոր այն օբյեկները, որոնք վերցված չեն անկյունային փակագծերի մեջ, ինտերպրետատորը (վերծանիչ ծրագիրը) հասկանում է որպես տեքստային բաղադրատարր և արտապատկերում համակարգչի էկրանին այնպես, “ինչպես որ կան”:
Այսպիսով՝ տեգը HTML-ի որոշակի հրաման է, որը թելադրում է բրաուզերի վերծանիչ ծրագրին, թե ինչպես այն պետք է մշակի յուրաքանչյուր կոնկրետ դիրեկտիվին համապատասխանող արժեքը:
Այդ դիրեկտիվները կոչվում են տեգի ատրիբուտներ (բնութագրիչներ): Յուրաքանչյուր ատրիբուտ ունի անուն և արժեք: Օրինակ, քանի որ յուրաքանչյուր աղյուսակ ունի որոշակի լայնություն (width), ապա աղյուսակի ստեղծման համար նախատեսված <table> տեգում կարելի է նախատեսել համապատասխան բնութագրիչը՝
<table width=”100”>: Այստեղ width=”100” արտահայտությունը <table> տեգի բնութագրիչն է, որի անունն է՝ width, իսկ արժեքը հավասար է 100 պիքսելի: Այդպիսի գրանցումը նշանակում է, որ էկրանին պետք է արտապատկերվի 100 պիքսել լայնություն ունեցող աղյուսակ: Համաձայն XML ստանդարտի` բոլոր տեգերի և բնութագրիչների անունները պետք է գրանցվեն փոքրատառերով, իսկ բնութագրիչների արժեքները պետք է վերցվեն զույգ չակերտների մեջ: Հետագա շարադրանքում կղեկավարվենք այդ կանոններով:
HTML-ն ունի ևս մեկ առանձնահատկություն, որով տարբերվում է ծրագրավորման այլ լեզուներից՝ գործնականում լեզվի բոլոր տեգերը, որոշ բացառությամբ, “զույգ են”, այսինքն` բաղկացած են “բացող” և ”փակող” մասերից (դրանք կոչվում են “տեգ-կոնտեյներներ”): Փակող տեգը տարբերվում է բացողից “ / ” նշանի առկայությամբ: Այն ամենը, ինչ գտնվում է այդպիսի տեգերի միջև, մշակվում է ըստ տվյալ տեգին բրաուզերում շնորհված ալգորիթմի: HTML-ի հրամանային տողը ընդհանուր տեսքով կարելի է ներկայացնել հետևյալ կերպ՝
<տեգ>մշակվող (արտապատկերվող) արժեք</տեգ>:
Լեզվի այդպիսի հատկությունը թույլ է տալիս կիրառել մեկ տեգը մյուսի մեջ ներդնելու սկզբունքը, այսինքն` այդ դեպքում ներքին (ներդրված) տեգի մշակման արդյունքը արտաքին տեգի համար դառնում է մշակվող արժեք: Ներկայացնենք տեգերի ներդրման պարզագույն օրինակ՝
<տեգ1><տեգ2>մշակվող արժեք</տեգ2></տեգ1>:
“Եզակի” տեգերը, ի տարբերություն “զույգերի”, չունեն փակող բաղադրիչ: Դրանք հիմնականում օգտագործվում են էջում գրաֆիկական տարրեր (նկարներ, բաներներ), երաժշտություն և որոշ ղեկավարման տարրեր (կոճակներ, տեքստային դաշտեր) ներդնելու համար: Օրինակ՝ <img src=”MyImage.gif”> տեգի օգնությամբ էջում ներդրվում է պատկեր (image), որի “սկզբնաղբյուրը” (src՝ անգլերեն source - սկզբնաղբյուր) MyImage անունով և gif ընդլայնումով պատկերը նկարագրող ֆայլն է:
Համաձայն նոր՝ XML ստանդարտի, նույնիսկ այդպիսի տեգերը պետք է ունենան “փակելու” փաստը ազդարարող նիշ: Այդ նպատակով, կենտ տեգում՝ փակող անկյունային փակագծից առաջ դրվում է “ / ” նիշը: Իսկ որպեսզի հին web-մեկնաբանները անտեսեն այն, դրա արջև պարտադիր դրվում է բացակ (պրոբել): Պատկերի ներդրման հրամանային տողը, այդ կանոնի համաձայն, կընդունի հետևյալ տեսքը՝ <img src=”MyImage.gif” />:
XHTML-ի կոդի հետ աշխատելիս անհրաժեշտ է ղեկավարվել մի պարզ օրենքով՝ եթե ծրագրի տեքստում հանդիպում է բացող տեգ, ապա պարտադիր պետք է առկա լինի փակողը (կամ փակող նիշը):
Գծանշման լեզվի նախկին վարկածները կախված չէին տառերի գրանցման ռեգիստրից, այսինքն` տեգերի և բնութագրիչների անունները կարելի էր գրանցել ինպես մեծատառերով, այնպես էլ փոքրատառերով (իհարկե, դա չի վերաբերում բնութագրիչների արժեքներին): XML ստանդարտում դա այդպես չէ՝ բոլոր տեգերը և բնութագրիչները պետք է գրանցվեն փոքրատառերով (ստորին ռեգիստրում): Բացի այդ, չեն թույլատրվում դատարկ (արժեք չունեցող) բնութագրիչներ: Օրինակ` նախկինում checked բնութագրիչը օգտագործվում էր առանց արժեքի, իսկ ըստ նոր ստանդարտի` այն պետք է գրանցվի հետևյալ տեսքով՝ checked = “checked”:
Ինչպես և կամայական փաստաթուղթ, HTML փաստաթուղթը բաղկացած է երկու հիմնական մասերից՝
վերնագրային, “գլխային” մաս (<head>…</head> տեգերի միջև), որը ընդգրկում է սպառիչ ինֆորմացիա փաստաթղթի վերաբերյալ (այդ թվում` փաստաթղթի արտաքին անունը՝ title, որն արտապատկերվում է բրաուզերի վերնագրային տողում) և, որոշ դեպքերում, տրանսլյատորի հատուկ դիրեկտիվները` <meta> տեգերը, որոնք հուշում են բրաուզերում ներկառուցված HTML վերծանիչին այն կանոնները, ըստ որոնց պետք է մշակվի web-էջը կազմավորող կոդը;
փաստաթղթի “մարմին” (<body>…</body> տեգերի միջև), որտեղ պարունակվում է այն ամենը, ինչը մենք ցանկանում ենք արտապատկերել էկրանին՝ տեքստը, պատկերազարդումները, ուղղորդման և ղեկավարող (commons) էլեմենտները և այլն:
Իսկ որպեսզի ամբողջ աշխարհը հասկանա, որ գործ ունի HTML փաստաթղթի հետ, անհրաժեշտ է <head> և <body> մասերը եզրափակել համապատասխան` <html>…</html> տեգի ներքո: Այսպիսով, էջի կոդը կարելի է ներկայացնել հետևյալ տեսքով՝
<html>
<head>
<title>Փաստաթղթի անունը</title>
</head>
<body>
</body>
</html>
HTML-ով գրված կամայական web-էջը սովորական տեքստային ֆայլ է: Դա նշանակում է, որ web-էջերի ստեղծման համար կարելի է օգտագործել ցանկացած տեքստ խմբագրելու համար նախատեսված ծրագիր (հետագա շարադրանքում` տեքստային խմբագրիչ), մասնավորապես` Notepad-ը կամ, նույնիսկ, տեքստային պրոցեսորներ (օրինակ՝ Word-ը): Ձևակերպելով համապատասխան կոդը խմբագրիչում և պահպանելով այն համակարգչի հիշողությունում “.htm” (հին օպերացիոն համակարգերի համար) կամ “.html” (նորերի) ընդլայնումով, կստանանք HTML փաստաթուղթ:
XML (ներկա փուլում՝ XHTML) ստանդարտն ավելի ու ավելի ամուր դիրքեր է գրավում համաշխարհային ցանցում: Բացի այդ, ընդլայնվում է նաև web-ծառայություններից օգտվելու համար կիրառվող սարքավորումների և հավելվածների տեսականին (օրինակ՝ Ինտերնետին կարելի է միանալ բջջային հեռախոսների միջոցով): Այդ ամենը փաստաթղթի տեսակի խիստ բնորոշման անհրաժեշտություն է առաջացնում: Ոչ այնքան հեռու ապագայում ցանկացած web-փաստաթուղթ պարտադիր պետք է ունենա, այսպես կոչված, DTD-ն (Document Type Definition - փաստաթղթի տեսակի սահմանում), ըստ որի` ընդունող սարքավորումը կհասկանա, թե ինչպե՞ս այն վերծանել:
Ասենք, որ ժամանակակից բրաուզերների մեծամասնությունը առանց դրա էլ կարող է արտապատկերել web-էջը, սակայն ժամանակի ընթացքում փաստաթղթի տեսակի որոշումը կունենա ավելի ու ավելի կարևոր նշանակություն:
HTML4.01 վարկածի համար DTD-ն ունի հետևյալ տեսքը՝
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,
իսկ XHTML1.0-ի անցումային (transitional) վարկածի համար` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional .dtd">:
Այդ սահմանումը գրանցվում է անմիջապես փաստաթուղթը բացող <html> տեգի առջև, ընդ որում` նշված վարկածների համար այդ տեգը չունի բնութագրիչներ: XHTML-ի խիստ (strict) վարկածը կիրառելիս (այսինքն` XML ստանդարտին հետևելիս) անհրաժեշտ է <html> բացող տեգը փոխարինել հետևյալ սահմանումով՝
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http : / /www . w3 . org/TR/ xhtml 1 / DTD/ stri ct . dtd ">
<html xmlns="http: //www.w3.org/1999/xhtml">:
Ինչպես տեսնում ենք, նոր ստանդարտում <html> տեգը արդեն ունի մեկ բնութագրիչ՝ xlmns, որի միջոցով փաստաթղթին միացվում է XML անունների բազմությունը:
Քանի որ դեռևս առավել հաճախ կիրառվում է HTML4.01 ստանդարտը (ոչ բոլոր օգտվողներն ունեն նոր ստանդարտը վերծանող բրաուզերներ), ապա կարելի է web-էջեր ստեղծելիս առաջնորդվել առաջին սահմանումով:
Հաճախ անհրաժեշտ է ծրագրի ստեղծման ընթացքում գրանցել որոշակի մեկնաբանություններ, որոնք հետագայում կօգնեն խմբագրման կամ փոփոխություններ կատարելու դեպքում ավելի հեշտ հասկանալ, թե ի՞նչ է կատարվում տվյալ ծրագրային բլոկում, փաստաթղթի ո՞ր մասն է այն նկարագրում և, առհասարակ, ի՞նչ է պետք դրա հետ անել: Այդ նպատակին ծառայող comment տեգը որոշ չափով տարբերվում է մյուս տեգերից, քանի որ դրա բացող՝ <!-- և փակող՝ --> մասերը պարունակում են միայն միակողմանի անկյունային փակագծեր: Այն ամենը, ինչ գտնվում է այդպիսի նշանների միջև, անտեսվում է բրաուզերի կողմից:
Ի մի բերելով ասվածը` ստեղծենք Notepad խմբագրիչում HTML փաստաթղթի ձևանմուշ և պահպանենք այն որպես սովորական տեքստային ֆայլ (անվանելով, օրինակ՝ template.txt),
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ձևանմուշ</title></head>
<body></body>
</html>
Ամեն անգամ, երբ անհրաժեշտ լինի ստեղծել նոր web-փաստաթուղթ, մենք կարող ենք բացել այդ ֆայլը, խմբագրել այն և, ընտրելով File ցանկի Save As կետը, շնորհել ֆայլին ընտրած անունը և “.html” ընդլայնումով պահպանել համապատասխան թղթապանակում (կամ դիրեկտորիայում):
Էս ամբողջը նյութը, որ դրել ես, ճիշտ ա շատ լավ բացատրված ա, բայց ես սրանք լրիվ գիտեմ: Ինձ էս պահին առայժմ մի բան ա պետք: Իմանալ, թե կոտորակի գիծը ոնց են գծում
Սիրում եմ կյանքը, ինքն էլ ինձ է սիրում
Արևատիկ ջան դու կոտորակի գիծ ասելով ի նկատի ունես՝ համարիչը հայտարարից բաժանող գիծը՞ :
Ոնց ես սովորական թիվ գրում նենց էլ գրի՝ ասենք 3/4:
Թե ի նկատի ունես հորիզոնական գիծ՝ որոշակի երկարությամբ:
HR տեգով կարաս գրես:
<HR WIDTH="50%" ALIGN="left" SIZE="0">
Чеширский КотЭ
*e}|{uka* (06.12.2009)
Խնդրեմ, width-ով կարաս երկարությունը նշես:
Чеширский КотЭ
Արևհատիկ (06.12.2009)
Ժողովո՜ւրդ Յունիկոդը ո՞նց եմ դզմզում, որ հարցականներ ցույց չտա բրաուզերում, նորմալ հայերեն տառերը երևան։ Օգնեք, թե չէ բեյխաբար մեռնում եմ
Freddie (27.06.2010)
Իսկ եթե դնում եմ UTF-8, դա կարող է ինչ–որ խնդիրներ առաջացնե՞լ։ Թե տեքստը ընթեռնելի կլինի՝ ինչպես Unicode-ը նշելու դեպքում։
Վերջին խմբագրող՝ Freddie: 27.06.2010, 15:09:
Ունեմ մի նկար ասենք այսպիսի
ո՞վ կարող է ասել, ինչպես կարող եմ հայկական դրոշի տարածքում այլ հղում դնեմ, իսկ ամերիկյանի տարածքում այլ։
նախապես շնորհակալ եմ։
արդեն մոտավորապես գիտեմ՝
մենակ թե էստեղ էդ կոորդինատները ո՞նց են հաշվում, նկարի պիկսելներո՞վ։Կոդ:<img src="menu.jpg"> <map name="armflag"> <area shape="rect" coords="0,0,58,126" alt="home" href="index.php?c=home" /> <area shape="rect" coords="90,90,58,3" alt="other" href="index.php?c=other" /> </map>
Այս պահին թեմայում են 1 հոգի. (0 անդամ և 1 հյուր)
Էջանիշներ