Բովանդակություն

• Քայլեր
• Մեթոդ 1 -ը 1 -ից ՝ HTML էջ գրելը
• Խորհուրդներ
• Գուշացումներ
• Ինչ է պետք

HTML- ը (Hypertext Markup Language) հիմնական ծրագրավորման լեզուն է վեբ էջերի մշակման համար: Ստեղծվել է որպես պարզ և հարմար ծրագրավորման լեզու: Ինտերնետում էջերի մեծ մասը մշակվել է ՝ օգտագործելով այս լեզվի ձևերից մեկը (ColdFusion, XML, XSLT): Այս հոդվածը կարդալուց հետո կարող եք շարունակել ձեր ուսուցումը ՝ օգտագործելով ինտերնետի այլ ռեսուրսներ: Փորձեք ինտերնետում որոնել այս թեմային առնչվող այլ հոդվածներ:

Քայլեր

Մեթոդ 1 -ը 1 -ից ՝ HTML էջ գրելը

1. 1 Նախքան սկսեք ծանոթանալ այստեղ ներկայացված քայլերից մեկին, տես «Ինչ ձեզ հարկավոր կլինի» բաժինը:
2. 2 Այն, ինչ դուք պետք է իմանաք, նախքան այս հարցը հասկանալը սկսելը.
3. 3 Հիմունքները: Երբևէ լսե՞լ եք պիտակի մասին: Պիտակը շրջապատված է անկյունային փակագծերով ՝ ներսում բառով: Վերջնական պիտակը գրված է նույն ձևով, բայց առաջին անկյունային փակագծից հետո շեղ գծի ավելացմամբ: Հատկանիշը պարտադիր բառ է պիտակի մեջ, որն օգտագործվում է պիտակի վրա մանրամասներ ավելացնելու համար:
4. 4 Փաստաթղթի սկիզբը: Ինչ տեքստային խմբագրում եք օգտագործում, տեղադրեք հետևյալը.
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Պիտակը պետք է փակվի նույն պիտակով, բայց առաջին անկյան փակագծից հետո շեղ գծով: Կան բացառություններ, ինչպիսիք են պիտակները ՄԵՏԱ կամ ԴՈԿՏԻՊ.
5. 5 ԴՈԿՏԻՊ
   • Սովորաբար, վեբ էջերի մեծ մասը տեղադրված է ԴՈԿՏԻՊ »: Սա օգնում է որոշել կոդավորումը, ինչպես նաև այն, թե ինչպես այն կընկալվի վեբ բրաուզերների կողմից:Էջերի մեծ մասը կաշխատի առանց դրա, «բայց դա անհրաժեշտ է, եթե ցանկանում եք համընկնել (դրանք կարգավորում են ինտերնետում ծածկագրերի տեսակները և ինչպես են դրանք օգտագործվում)... HTML 4.01-ի DOCTYPE- ը ներկայացված է ստորև. ամենատարածվածներից DOCTYPE- ն օգտագործվում է ամբողջ ինտերնետի էջերում: Սկզբում այն ​​մատնանշում է «html» - ը նկարագրող էջի տեսակը, այնուհետև ընդգծում է կոդավորման տեսակը, և վերջապես, DOCTYPE– ի գտնվելու վայրը, որը արդյունքում նկարագրում է վեբ դիտարկիչի էջը:
   • Կան HTML- ի տարբեր տեսակներ (տարիների ընթացքում մշակված տարբեր տարբերակներ), օրինակ ՝ նոր պիտակների կամ հատուկ պիտակների օգտագործմամբ: Որոշ պիտակներ հնացած են (փոխարենը օգտագործվում են այլ ավելի օգտակար պիտակներ):
   • բ> և ես> - սա այն է, ինչ ներկայումս պարտադրված է պիտակների վրա, քանի որ դրանք օգտագործվում են տեքստը փոխակերպելու համար, բայց ոչ բնութագրերը, արդյունքում դրանք փոխարինելու են գալիս այլ պիտակներ: Պիտակ ուժեղ> փոխարինում է բ>, և em>, փոխարինում է ես>.
   • Կարևոր է, որ նախորդ պիտակները փոխարինվեն պիտակներով, որոնք ավելին են, քան ձևաչափումը: Եթե ​​տեքստը թարգմանված է, ապա ոչ միայն ձևաչափումը, այլև դրա իմաստը մնում է նույնը: Սա իմաստային առումով ճիշտ է:
   • XHTML 2.0 տարբերակում b> և ես> չի օգտագործվում, ինչպես HTML 3+ տարբերակում:
6. 6 HTML «Կափսուլյացիայի կանոն».
   • Եկեք նայենք ներկայումս օգտագործվող ավելի կարևոր պիտակներին: Էջի ստեղծման ընթացքում օգտագործվում է պարզ կառուցվածք: Եթե ​​պիտակ է բացվել, ապա արդյունքում ՝ այն պետք է փակվի... Սա վերաբերում է ամբողջ կառուցվածքին: Ահա XHTML դասավորության կառուցվածքի վավեր օրինակ.
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • գլուխ>
   • meta http-equ = "Content-Type" content = "text / html; charset = utf-8" />
   • վերնագիր> Բարև աշխարհ! / վերնագիր>
   • / գլուխ>
   • մարմին>
   • h1> Բարև աշխարհ! / h1>
   • / մարմին>
   • / html>
   • Կոդի օրինակ, որը թողարկում է հաղորդագրություն Բարեւ աշխարհ... Սա կոչվում է փորձություն Բարեւ աշխարհ.
7. 7 Վերնագիր
   • Վեբ էջի անվանումը պիտակի միջև եղած բովանդակությունն է գլուխ>... Այս բովանդակությունը չի կարող դիտվել օգտագործողի կողմից (միայն վերնագիրը, որը ցուցադրվում է էջի վերնագրում): Տեղեկատվություն պիտակների միջև գլուխ>, կարող է պարունակել այլ պիտակներ, ինչպիսիք են ՝
     
     
     • META պիտակը օգտագործվում է տեղեկատվության համար, որն օգտակար է որոնման և այլ կոմունալ ծառայությունների համար:
     • LINK պիտակ, որը կապ է ստեղծում փաստաթղթերի միջև, օրինակ ՝ Styles (CSS) - ի համար:
     • SCRIPT պիտակը, սա ներառում է գրեթե ցանկացած վեբ կոդավորում ՝ հեռակա մուտք գործելու հնարավորությամբ (այլ փաստաթղթից):
     • STYLE պիտակը, որն ըստ էության ոճ է, որը կարող է կիրառվել էջի վրա:
     • TITLE պիտակը այն վերնագիրն է, որը հայտնվում է որպես ձեր վեբ դիտարկիչի էջի վերնագիր:
   • Եկեք տեսնենք դրանցից մի քանիսի ցուցադրումը այս կայքից վերցված վերնագրի օրինակով (այն կրճատվել է).
     • գլուխ>
     • վերնագիր> ... / վերնագիր>
     • meta name = "description" content = "..." />
     • հղում rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equ = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / գլուխ>
       
       Այն դեպքում, երբ դուք չեք նկատել, առանձին պիտակներն ընդգծված են, իսկ իրական տեղեկատվությունը ՝ հանված: Օրինակը բավականին կարճ է ՝ ցույց տալով գրեթե յուրաքանչյուր պիտակ, որը կարելի է գտնել այնտեղ գլուխ>բացառությամբ HTML- ի մեկնաբանության (մենք այս մասին կխոսենք պարզ պիտակներում):
8. 8 Ամենուր պարզ պիտակներ
   • Եկեք առաջ շարժվենք և տեսնենք այլ պիտակներ: Tagգույշ եղեք պիտակավորման հետ կապված և հիշեք հիմնական կանոնը ՝ «Կափարումը»:
     
     
     • ուժեղ> Ընդգծում է կարևոր տեքստը:
     • small> Փոքրացնում է տեքստը:Տառատեսակի չափը չափվում է 1 -ից 7 ստանդարտ միավորներով, 3 -ը տեքստի կանխադրված չափն է: ...
     • pre> Սահմանում է հարուստ տեքստի բլոկ: Ինչպես ճիշտ է, նման տեքստը մուտքագրվում է նույն չափի տառատեսակով և բառերի միջև եղած բոլոր բացատներով:
     • em> textույց է տալիս տեքստը որպես արտահայտություն:
     • del> Հեռացնում է տեքստը:
     • ins> Սահմանում է փաստաթղթի մեջ տեղադրված տեքստը:
     • h1> Վերնագրի բազմաթիվ պիտակներից մեկը: Այս տեսակի պիտակները սկսվում են «h» - ով ՝ թվի տարբերությամբ: Համոզվեք, որ փակեք պիտակը նույն համարով:
     • p> Սահմանում է պարբերություն:
     • ! --- ... ---> Ի տարբերություն այլ պիտակների, մեկնաբանությունը պետք է լինի հենց պիտակի ներսում: Այս տեղեկատվությունը տեսանելի է միայն այն դեպքում, երբ կոդը դիտվում է:
     • blockquote> owsույց է տալիս մեջբերում, կարող է օգտագործվել cite> պիտակի հետ:
     • Վերոնշյալ մի քանի օրինակները գոյություն ունեցող պիտակների ամբողջական ցանկ չեն: Ուրիշների մասին իմանալու համար այցելեք:
9. 9 Ստեղծելով հստակ կառուցվածք
   • Էջերը նախագծված են տվյալների պիտակների պարզ հավաքածուներում պահելու համար, որպեսզի մենք կարողանանք տեղեկատվությունը բաժանել պարբերությունների: Համակարգիչը ճանաչում է տվյալները, չգիտի համատեքստի կամ հայեցակարգային կապի մասին: Մենք պետք է ստեղծենք համակարգչի համար հարմար HTML էջեր: Դա ձեռք է բերվում div պիտակի օգտագործմամբ: Այն օգնում է ստեղծել հսկայական թվով էջեր: Այն կարող է ոճավորվել CSS- ով և ավելի հեշտ է, քան դասավորության համար մեծ ծածկագրերի ստեղծումը:
     • div> Այս պիտակը հատուկ է, քանի որ այն կարող է ձևավորվել և օգտագործել տեղեկատվության առանձին բլոկներ, որոնք հասկանալի են ինչպես օգտագործողը, այնպես էլ համակարգիչը:
   • Եկեք նայենք մի պարզ HTML դասավորության, որն օգտագործում է div պիտակ:
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • գլուխ>
     • meta http-equ = "Content-Type" content = "text / html; charset = utf-8" />
     • վերնագիր> Բարև աշխարհ! / վերնագիր>
     • / գլուխ>
     • մարմին>
     • h1> Բարև աշխարհ! / h1>
     • div id = "contentOne">
     • p> Սա որոշ տեքստ է div # contentOne- ում: / p>
     • div>
     • p> Պարբերություն div # contentOne / p> ենթաբաժնում
     • / div>
     • / div>
     • / մարմին>
     • / html>
   • Div> պիտակների օգտագործումը օգնում է գտնել և փոփոխել ոճերը CSS- ի և Javascript- ի հետ աշխատելիս: HTML- ն կօգտագործի տարբեր կոդավորում ՝ CSS ոճերի և Javascript- ի հետ աշխատելու համար ՝ օգտագործողի ավելի լավ և արձագանքող փորձ ստեղծելու համար:

Խորհուրդներ

• Այս հոդվածը կարդալուց հետո մի կանգ առեք և մտածեք, որ դուք սովորել եք այն ամենը, ինչ ձեզ հարկավոր է իմանալ: Սովորելու բան միշտ կա, հատկապես այս տեխնոլոգիայի մեջ:
• Սովորեք, հասկացեք և գրեք ծածկագիր:
• Նշենք, որ որոշ պիտակներ օգտագործում են միայն>: Para և br որոշ օրինակներ են: > - ով բացված այլ պիտակներ պետք է հետագայում փակվեն: Օրինակ ՝ «div> / div>»:
• Մարդիկ ակնկալում են նոր բացահայտումներ, ուստի նորից հորինեք, նախագծեք կամ ծածկագրեք:
• Շատ բան սովորելուց հետո փորձեք սերվերի ծրագրավորում սովորել:
• Սովորեք աշխատել CSS- ի, ինչպես նաև Javascript- ի հետ:

Գուշացումներ

• Հիշեք, որ HTML- ն ամեն ինչ բովանդակություն խմբագրելն է: Սա նշանակում է, որ HTML- ն օգտագործվում է միայն ճանաչված ձևաչափով բովանդակություն պահելու համար: Այլ փոփոխություններ պետք է կատարվեն ՝ օգտագործելով այլ տեխնոլոգիաներ, օրինակ ՝ CSS: Այն նաև նշանակում է անել «Իմաստաբանորեն ճիշտնույնիսկ եթե ուրիշները դա չեն ընդունում: Otherրագրավորման այլ լեզուներ օգնում են կառուցել վեբ էջեր (CSS, Javascript և XML): HTML- ը բովանդակության կառուցող է:

Ինչ է պետք

• Տեքստային խմբագիր, որն ապահովում է ANSI կոդավորումը
• Վեբ դիտարկիչ, ինչպիսիք են Internet Explorer- ը կամ Mozilla Firefox- ը
• (Ըստ ցանկության) wysiwyg կամ wykiwyg HTML խմբագիր, ինչպիսիք են Adobe Dreamweaver- ը, Aptana Studio- ն կամ Microsoft Expression Web- ը