Բացարձակ HTML ուղեցույց սկսնակների համար

Վերջին թարմացումը 15 Մայիս 2018- ին

Քսան տարի առաջ, նույնիսկ եթե դուք պարզապես հոբբի բլոգեր եք, դուք պետք է իմանաք որոշ վեբ կոդավորումը `պաշտպանելու կամ ձեր կայքի համար պարզ գործառույթ ավելացնելու համար: Բայց հիմա կան շատ խմբագիրներ եւ հասանելի պլիգակներ, որոնք նույնիսկ HTML- ի հիմունքները իմանալն այլեւս պահանջված չէ դարձնել կայք or գործարկել բլոգը.

Խնդիրն այն է, որ եթե դուք չգիտեք մի քանի հիմունքներ, կարող եք հեշտությամբ բախվել ձեր բլոգում իրական դժվարությունների եւ ստիպված է վարձել մի թանկ մշակող `պարզելու, թե ինչ կարող է լինել փոքր խնդիր: Ոչ միայն դա է, այլ ձեր բլոգում փոփոխություններ կատարելը, ինչպիսիք են մաքսային տեքստի պատուհանը ավելացնելը, քիչ գիտելիքներ է պահանջում:

Եվ եթե դուք ապրում եք բովանդակության դասավորությունը ճիշտ չէ, HTML- ի գիտելիքները կարող են ձեզ վերադառնալ:

Ահա HTML- ի ուղեցույցի մի քանի տարբերակ, բլոգերների եւ ոչ առեւտրային օնլայն բիզնեսի սեփականատերերի համար:

HTML- ը այսօրվա ինտերնետի հիմքն է: Միլիոնավոր կայքեր միասին ձեւավորեցին ինտերնետը: Որտեղ HTML- ը այս բոլոր կայքերը կառուցելն է:

Beginner's Q & A

1- Ինչ է HTML- ը:

HTML- ը հապավումը Hyper Tներքին Markup Lանչափահասը: Սա վեբ բրաուզերների համար պիտակավորման բովանդակության ստանդարտ լեզուն է:

HTML- ը ներկայացնում է «Elements» - ը: Elements- ը նաեւ հայտնի է որպես «Tags»:

2- HTML- ն ինչու է անհրաժեշտ:

Վեբ բրաուզերները կարող են միայն կայքը մատուցել այն ժամանակ, երբ գրված է նրանց կողմից աջակցվող լեզվով: HTML- ն ամենատարածված նշագրման լեզուն է եւ ունի վեբ բրաուզերների ամենաբարձր ընդունումը:

Ահա թե ինչու պետք է HTML:

3- HTML գործը զգայուն է:

HTML- ը զգայուն չէ: Սակայն ամենալավ պրակտիկան HTML- ի պատշաճ դեպքերում գրելն է:

Ձեր առաջին HTML ֆայլի ստեղծման քայլերը

Դուք կարող եք ստեղծել հիմնական HTML ֆայլ, օգտագործելով Notepad ձեր համակարգչում: Բայց դա ցավալի կլինի շատ գծերի կոդեր գրելու համար:

Ձեզ հարկավոր է օրենսգրքի խմբագիր: Լավ կոդերի խմբագիրն ավելի հեշտ կլինի գրել եւ կազմակերպել խոշոր կոդեր:

Ես օգտագործում եմ եւ խորհուրդ եմ տալիս Notepad + + (ազատ եւ բաց աղբյուր) ինտերնետային լեզուների գրելու համար: Կան այլ խմբագիրներ, որոնք դուք կարող եք օգտագործել Վսեմ Text, Ատոմ եւ այլն:

Ահա թե ինչ պետք է անեք.

  1. Տեղադրեք կոդերի խմբագիր
  2. Բացեք այն
  3. Ստեղծեք նոր ֆայլ
  4. Պահպանեք այն որպես .html ֆայլ

Դուք պատրաստ եք գնալ:


Գնալ վերեւ

1- Բարեւ աշխարհը!

Պատճենեք եւ տեղադրեք հետեւյալ կոդը ձեր նոր HTML ֆայլում եւ պահեք այն: Այժմ այն ​​վարեք ձեր վեբ բրաուզերում:

Կոդ:

<! DOCTYPE html> <html> <head> <title> Իմ առաջին վեբ էջը </ title> </ head> <body> <p> Բարեւ աշխարհ </ p> </ body> </ html>

Արդյունք:

Շնորհավորանքներ: Դուք ստեղծել եք ձեր առաջին HTML ֆայլը: Դուք այս պահին չեք հասկանում: Մենք շուտով այն կտեղադրենք:

Հասկանալ HTML կառուցվածքը

Յուրաքանչյուր HTML ֆայլ ունի ընդհանուր մերկ կառույց: Սա ամեն ինչ սկսվում է: Եվ յուրաքանչյուր խոշոր կոդերի գագաթնակետից հետո այս կառույցը կգա:

Այնպես որ, փորձենք հասկանալ այն «Բարեւ աշխարհը» կոդից: Հետեւյալ տարրերը յուրաքանչյուր HTML ֆայլի համար պարտադիր մասեր են:

  • <! DOCTYPE html> = Սա բրաուզերի հայտարարություն է, որը HTML ֆայլ է: Դուք պետք է նշեք այն <html> tagից առաջ:
  • <html> </ html> = Սա HTML ֆայլի արմատն է: Ամեն ինչ գրում եք <html> եւ </ html> - ի միջեւ:
  • <head> </ head> = Սա բրաուզերի համար մետա տեղեկատվական մաս է: Այս պիտակի ներդիրները ոչ մի տեսողական արդյունք չեն ունենում:
  • <body> </ body> = Սա այն մասն է, որը վեբ զննարկիչը մատուցում է: Ինչ եք տեսնում կայքում, <body> եւ </ body> կոդերի միջեւ:


Գնալ վերեւ

2- HTML Tags

HTML- ն հարյուրավոր տարբեր պիտակների համագործակցություն է: Դուք պետք է իմանաք, թե ինչպես են նրանք աշխատում: Դուք նաեւ պետք է համոզվեք, որ նրանք ճիշտ օգտագործել են դրանք:

HTML- ը սովորաբար ունենում է բացման եւ փակման պիտակ: Բացելով պիտակը ունի (<) եւ ավելի մեծ (>) նշանից պակաս շրջապատված բանալի բառ: Փակման պիտակը ամեն ինչ ունի, բայց լրացուցիչ առաջ քաշում (/) պակաս (<) նշանից հետո:

(2a) Ղեկավարները

Բոլոր գլխի պիտակները անցնում են <head> եւ </ head>: Նրանք պարունակում են meta տեղեկատվության վեբ զննարկիչի եւ որոնման համար: Նրանք հիմնականում տեսողական արդյունք չունեն:

<title> </ title>

Վերնագրի տողը սահմանում է վեբ էջի անվանումը, որը տեսանելի է բրաուզերի էջում: Այս տեղեկատվությունը օգտագործվում է վեբ ծրագրերով եւ որոնման համակարգերով: Դուք կարող եք ունենալ ամենաբարձր մեկ վերնագիր մեկ HTML ֆայլի համար:

Կոդ:

<title> Իմ առաջին վեբ էջը </ title>
Վերնագրի տողը հայտնվում է ձեր դիտարկչի վերեւում:

<հղում>

Հղում տեքստը կապում է ձեր HTML էջը արտաքին ռեսուրսներով: Դրա հիմնական օգտագործումը հղում է HTML էջի CSS ոճաթերթերի հետ: Դա ինքնակառավարման փակման պիտակ է եւ կարիք չունի ավարտին </ link>: Այստեղ հղվում է ֆայլի հետ կապի հետ եւ src- ը նշանակում է աղբյուրը:

Կոդ:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<meta>

Meta- ն ինքնաբերաբար փակման պիտակ է, որն ապահովում է html ֆայլի մետա տեղեկատվություն: Այս տեղեկությունները օգտագործում են որոնման եւ այլ վեբ ծառայություններ: Մետա պիտակները պարտադիր են, եթե ցանկանում եք օպտիմալացնել ձեր էջը որոնման համար:

Կոդ:

<meta name = "description" content = "Սա կարճ նկարագրություն է, որը ցույց է տալիս որոնման համակարգերը"

<script> </ script>

Սցենարի պիտակը օգտագործվում է սերվերային սցենարի մեջ ներառելու համար կամ հղում կատարելու արտաքին սցենարի ֆայլին: Այն կարող է ունենալ երկու հատկանիշներ բացման պիտակի մեջ: Մեկը տիպն է, մյուսը `աղբյուրը (src):

Կոդ:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Noscript պիտակը աշխատում է, երբ սցենարները անջատված են վեբ դիտարկիչում: Այն ստիպում է նրանց հետ համատեղելի էջ, որը թույլ չի տալիս սցենարներ իրենց վեբ բրաուզերում:

Կոդ:

<noscript> <p> Ալաս! Սցենարները անջատված են: </ p> </ noscript>

(2b) Body Tags

Բոլոր մարմնի պիտակները անցնում են <body> եւ </ body>: Նրանք ունեն տեսողական արդյունքներ: Սա այն է, որտեղ կատարվում է մեծ աշխատանք: Դուք պետք է օգտագործեք այս պիտակները, ձեր հիմնական էջի բովանդակության կառուցումը:

<h1> </ h1> դեպի <h6> </ h6>

Սրանք են վերնագրի պիտակները: Ամենակարեւոր վերնագիրը վերնագրված է <h1> եւ առնվազն կարեւոր է <h6>: Դուք պետք է օգտագործեք դրանք ճիշտ հիերարխիայում:

Կոդ:

<h1> Սա h1 տող է </ h1> <h2> Սա h2 տող է </ h2> <h3> Սա h3 տող է </ h3> <h4> Սա h4 տառատեսակ է </ h4> <h5 > Սա h5 տող է </ h5> <h6> Սա h6 տող է </ h6>

Արդյունք:

Ֆորմատավորում Tags

HTML ֆայլի տեքստը կարող է ֆորմատավորել, օգտագործելով բազմաթիվ ձեւաչափեր: Անհրաժեշտ է, երբ ուզում եք ընդգծել մի բառ կամ գիծ ձեր բովանդակությունից:

Կոդ:

<p> Կարող եք ընդգծել ձեր տեքստը տարբեր ձեւերով: </ p> <p> Դուք կարող եք <strong> համարձակ </ strong>, <u> ընդգծում </ u>, <em> ստեղնաշար </ em>, <նշան <mark> </ mark>, <sub> ենթաճյուղ </ sub>, <sup> superscript </ sup> եւ այլն: </ p>

Արդյունք:

<! - ->

Դուք կարող եք շեղել որոշ կոդեր, օգտագործելով մեկնաբանության պիտակը: Կոդը կցուցադրվի կոդով, բայց չի ցուցադրվի: Այս պիտակի հիմնական օգտագործումը HTML ֆայլերի փաստաթղթերի ստեղծումն է ապագա հղման համար:

Example:

<! - <p> Կարող եք մեկնաբանել ցանկացած կոդը, շրջապատելով դրանք այս ձեւով </ p> ->

(2c) Այլ կարեւոր HTML Tags

<a> </a>

Խարիսխը անգնահատելի պիտակ է, որը գրեթե ամենուր օգտագործվում է: Դուք ոչ մի վեբ էջ չի տեսնում առցանց առանց առնվազն մեկ խարիսխ հղման:

Կառուցվածքը նույնն է: Այն ունի <a> եւ փակման մասի բացումը </a>: Տեքստը, որը ցանկանում եք խարիսխը անցնել <a> եւ </a>:

Կան որոշ հատկանիշներ, որոնք սահմանում են, թե որտեղ եւ ինչպես օգտագործվում է օգտվողը սեղմելուց հետո:

  • ahref = "" = Այն սահմանում է նպատակակետ հղումը: Կապը անցնում է կրկնակի մեջբերումների միջեւ:
  • target = "" = Այն սահմանում է, թե արդյոք URL բացվելու է նոր բրաուզերի էջում կամ նույն ներդիրում: թիրախ = "_ blank" -ը նոր ներդիրի եւ թիրախի համար "_ ինք" է, նույն թղթապանակում բացելու համար:
  • rel = "" = Այն սահմանում է ընթացիկ էջի կապը կապված էջի հետ: Եթե ​​չեք վստահում կապված էջին, կարող եք սահմանել rel = "nofollow":

Կոդ:

<p> <a target="_blank" href="https://www.google.com/"> Սեղմեք այստեղ </a>, Google- ին գնալու համար: Այն կբացվի նոր էջում: </ p> <p> <a target="_self" href="https://www.google.com/"> Սեղմեք այստեղ </a>: Այն նաեւ կտանի Google- ին, բայց կբացվի ընթացիկ ներդիրում: </ p>

Արդյունք:

<img />

Image tag- ը եւս մեկ կարեւոր պիտակ է, առանց որի չեք կարող պատկերացնել պատկերների վրա հիմնված բազմաթիվ կայքեր:

<img /> ինքնատիպ փակման պիտակ է: Անհրաժեշտ է ավանդական փակման նման </ img>: Կան որոշ հատկանիշներ, որոնք դուք պետք է իմանաք, նախքան այն կարող եք ճիշտ օգտագործել:

  • src = "" = Սա պատկերի աղբյուրի հղման համար է: Տեղադրեք հղումը ճիշտ երկակի մեջբերումների միջեւ:
  • alt = "" = Այլընտրանքային տեքստը: Երբ ձեր պատկերը չի բեռնվում, այս տեքստը օգտվողներին հնարավորություն կտա պատկերացում կազմել բացակայող պատկերի մասին:
  • լայնությունը = "" = Այն սահմանում է պատկերի լայնությունը պիքսելներում:
  • Բարձրությունը = "" = Այն նկարում է պատկերը բարձրությունը, փիքսել:

Example:

<p> Սա օգոստոսի 2014- ում GooglePlex է: </ p> <p> Այս պատկերը ունի 500 պիքսելների լայնությունը եւ 375 պիքսելների բարձրությունը: </ p> <img src = "https: //upload.wikimedia: / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Google- ի գլխամասը օգոստոսի 2014 "width =" 500 "height =" 375 "/>

Արդյունք:

Tips: Ցանկանում եք տեղադրել clickable պատկեր: Պատկերը պատկանել <a> tag- ով: Տեսեք, թե ինչպես է դա կատարվում:

<ol> </ ol> կամ <ul> </ ul>

Ցուցակների պիտակը ստեղծվում է իրերի ցանկի ստեղծման համար: <ol> - ը հստակ ցուցակների (թվանշված ցուցակ) եւ <ul >- ը ներկայացնում է չկատարված ցուցակների համար (գնդակային միավորներ):

<Ol> կամ <ul> ներսում ցուցակի տարրերը պիտակավորված <li> </ li>: li- ն հանդես է գալիս ցուցակի համար: Դուք կարող եք ունենալ այնքան <li>, որքան ցանկանում եք <ol> կամ <ul> tag պարունակող ներսում:

Կոդ:

<p> Այս կարգավորվող ցուցակն է </ p> <ol> <li> Նյութը 1 </ li> <li> Նյութը 2 </ li> <li> Նյութը 3 </ li> </ ol> <p> </ Li> <li> Նյութը 1 </ li> <li> Նյութը 2 </ li> </ ul>

Արդյունք:

<table> </ table>

Աղյուսակային տեքստը տվյալների աղյուսակ ստեղծելու համար: Կան մի քանի ներքին մակարդակի պիտակներ, որոնք սահմանում են սեղանի վերնագրեր, շարքեր եւ սյունակներ:

<table> </ table> - արտաքին ծնողի կոդը: Այս տողի մեջ <tr> տող է, սեղանի շարքը, <td>, սեղանի սյունակում եւ <th>, սեղանի գլխի համար:

Կոդ:

<table> <tr> <th> Անունը </ th> <th> Տարիք </ th> <th> Մասնագիտություն </ th> </ tr> <tr> <td> Jo <td> 27 </ td> <td> Գործարարություն </ td> </ tr> <tr> <td> Կարոլ </ td> <td> 26 </ td> <td> բուժքույր </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> Պրոֆեսոր </ td> </ tr> </ table>

Արդյունք:

Նշում. Առաջին <tr> պարունակության արժեքները վերնագրերն են: Այսպիսով, մենք օգտագործեցինք <th>, որը տեքստի համարձակ տեքստային ազդեցություն է գործում:

Աղյուսակային խմբավորում

Դուք կարող եք ընդլայնել աղյուսակի ֆունկցիոնալությունը `օգտագործելով սեղանի խմբավորման տարրերը: Կլինեն ժամանակներ, երբ դուք պետք է ստեղծեք խոշոր աղյուսակներ, որոնք բաժանում են մի քանի էջ:

Ձեր աղյուսակի տվյալները խմբագրելու համար վերնագիր, մարմնի եւ ստորագիր, կարող եք թույլ տալ անկախ շարժվել: Վերնագիրը եւ մարմնի մասը կտտացնում են յուրաքանչյուր էջին, որտեղ ձեր սեղանը տարածված է:

Սեղանի խմբավորման պիտակները հետեւյալն են.

  • <thead> </ thead> = Սեղանի վերնագրերը փաթաթելու համար: Այն տպում է սեղանի յուրաքանչյուր բաժանված էջ:
  • <tbody> </ tbody> = Աղյուսակի հիմնական տվյալները փաթաթելու համար: Դուք կարող եք ունենալ այնքան, որքան անհրաժեշտ է <tbody>: A <tbody> պիտակը նշանակում է տվյալների առանձին խումբ:
  • <tfoot> </ tfoot> = Աղյուսակի ստորեւ բերված տեղեկատվությունը փաթաթելու համար: Այն տպում է սեղանի յուրաքանչյուր բաժանված էջ:

Խնդրում ենք նկատի ունենալ, որ խմբավորման օգտագործումը պարտադիր չէ: Դուք կարող եք օգտագործել այն, որպեսզի ավելի մեծ աղյուսակներն ավելի ընթանան: Թեեւ որոշ հատուկ մշակողները նշանակալիորեն օգտագործում են այս պիտակները որպես CSS ընտրողներ:

Ահա թե ինչպես կարող ենք խմբագրել մեր օրինակելի աղյուսակը <thead>, <tbody> եւ <tfoot>:

Կոդ:

<table> <thead> <tr> <th> Անվան </ th> <th> Տարիք </ th> <th> Մասնագիտություն </ th> </ tr> </ hr> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Գործարարություն </ td> </ tr> <tr> <td> Քերոլ </ td> <td> 26 </ td> <td> </ td> <td> <td> <td> <td> <td> <td> <td> <td> <td> Ընդհանուր անձինք `</ td> <td> 39 </ td> </ tr> </ tfoot> </ table>

Արդյունք:

<form> </ form>

Ձեւի տարրը օգտագործվում է վեբ էջերի համար ինտերակտիվ ձեւերի ստեղծման համար: HTML ձեւը պարունակում է մի շարք հետեւողական տարրեր: Օրինակ `<label>, <input>, <textarea> եւ այլն:

Ակցիայի հատկանիշը շատ կարեւոր է: Այն մատնանշում է սերվերային կամ երրորդ կողմի էջը, տեղեկատվությունը մշակելու համար: Մշակման համար անհրաժեշտ է նախ մեթոդը սահմանել:

Դուք կարող եք օգտագործել երկու մեթոդներից մեկը, ստանալ կամ գրել: Ստացեք բոլոր տեղեկությունները URL- ի ձեւաչափով, որտեղ Փոստը ուղարկում է տեղեկատվություն մարմնի հաղորդագրության մեջ:

Ձեւերում առկա են բազմաթիվ տեսակներ: Հիմնական մուտքագրման տեքստը տեքստն է: Այն գրված է <input type = "text">: Տեսակները կարող են լինել նաեւ ռադիո, վանդակում, էլեկտրոնային փոստ եւ այլն: Ներկայացրեք կոճակը ստեղծելու համար ներքեւում պետք է ներկայացնել տիպի մուտքագրումը:

<label> պիտակը օգտագործվում է պիտակների ստեղծման եւ ներդիրների հետ համակցելու համար: Մուտքային նյութերի հետ կապող կանոնն այն է, որ նույն արժեքն ունի պիտակի = "" պիտակի եւ id = "" մուտքագրման հատկանիշը:

Կոդ:

<form action = "#"> <label for = "firstname"> Անունը: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Անուն: </ label> <input type = "text" id = "lastname"> <label for = "bio"> Կարճ Bio: </ label> <textarea id = "bio" rows = "10" cols = </ Label> <br> <label> = <male>> </ label> <input type = "Մուտքագրեք ձեր կենսագրությունը այստեղ ..."> </ textarea> <radio> name = "gender" id = "male"> <br> <label for = "female"> Իգական </ label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "ներկայացնել" value = "Ներկայացնել"> <ձեւ>

Արդյունք:

Նշում. Ես անիմաստ եմ համարում գործողությունը, քանի որ այն կապված չէ որեւէ սերվերի հետ `տեղեկատվությունը մշակելու համար:


Գնալ վերեւ

3- HTML հատկանիշներ

Հատկանիշները HTML- ի պիտակների համար ձեւափոխիչի մի տեսակ են: Նրանք ավելացնում են նոր կոնֆիգուրացիաներ HTML պիտակներում:

Հատկանիշը կարծես attributename = "" է, եւ նստում է HTML- ի բացման պիտակի մեջ: Արտահայտության արժեքը անցնում է կրկնակի մեջբերումների միջեւ:

id = "" եւ class = ""

id- ը եւ դասը HTML- ի պիտակների նույնացուցիչն են: Տարբեր անուններ նշանակվում են տարբեր HTML տարրեր, օգտագործելով identifiers. Դուք կարող եք օգտագործել մեկ դասի նույնացուցիչը բազմակի տարրերի համար: Սակայն դուք չեք կարող օգտագործել մեկ ID նույնացուցիչը բազմակի տարրերի համար:

Կոդ:

<h1 class = "heading"> Սա հիմնական վերնագիրը </ h1>

href = ""

href- ը ներկայացնում է Հիպերտեքստի հղում: Նրանք մատնանշում են օգտագործողներին հղումների հղումները: Anchor պիտակը <a> օգտագործում է href- ը, օգտագործողներին ուղարկելու ուղղությամբ URL:

Կոդ:

<a href="https://www.google.com/"> Google </a>

src = ""

src- ը հանդես է գալիս աղբյուրի համար: Այն սահմանում է HTML ֆայլում օգտագործվող լրատվության կամ ռեսուրսի աղբյուրը: Աղբյուրը կարող է լինել տեղական կամ երրորդ կողմի URL:

Կոդ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = ""

altը այլընտրանք է: Այն պահեստային տեքստ է, որը գալիս է օգտագործման ժամանակ, երբ HTML տարրը չի կարողանում բեռնել:

Կոդ:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Google- ի Գլխամաս" />

style = ""

ոճի հատկանիշը հաճախ օգտագործվում է HTML պիտակներում: Այն CSS- ի գործն է HTML tag- ում: Ձեր styling հատկությունները գնացեք երկակի մեջբերումների միջեւ:

Կոդ:

<h2 style = "color: red"> Սա եւս մեկ վերնագիր է </ h2>


Գնալ վերեւ

4- կոդերի ցուցադրում. Block Inline

Որոշ տարրեր միշտ սկսում են նոր գիծ եւ վերցնում լիարժեք լայնությունը: Սրանք «Բլոկ» տարրեր են:

Ex: <div>, <p>, <h1> - <h6>, ձեւ եւ այլն:

Որոշ տարրեր վերցնում են անհրաժեշտ տարածք եւ չեն սկսում նոր գիծ: Սրանք «Inline» տարրեր են:

Ex: <a>, <span>, <,> <strong>, <img> եւ այլն:

Դուք պետք է տարբերեք բլոկի տարրերը գծային գծից, երբ դուք կօգտագործեք CSS ոճերը: Այս HTML ուղեցույցում դա շատ անհրաժեշտ չէ:

Կոդ:

<! DOCTYPE html> <html> <head> <title> Իմ առաջին վեբ էջը </ title> </ head> <body> <h2> Սա H2 վերնագիր է: Այն ունի արգելափակման ցուցադրություն: </ h2> <h2> Սա <u> այլ </ u> H2 վերնագիր: Այստեղ ընդգծված տողն ունի Inline ցուցադրություն: </ h2> </ body> </ html>

Արդյունք:


Գնալ վերեւ

5- Կրկնվող մեջբերումը եւ HTML- ի մեկական մեջբերումը HTML- ում

Այս հարցը շատ ակնհայտ է: Ինչ պետք է օգտագործեք HTML- ում: Միակ մեջբերումը կամ կրկնակի մեջբերումը: Մարդիկ կարծես երկուսն էլ օգտագործում են, բայց որն է ճիշտ:

HTML- ում, միակ մեջբերումն ու կրկնակի մեջբերումը նույնն են: Նրանք արտադրության մեջ որեւէ տարբերություն չեն տեսնում:

Կարող եք օգտագործել ցանկացած մեկին, ում նախընտրում եք: Բայց խառնաշփոթը եւ կոդերի էջը համարվում են վատ պրակտիկա: Դուք պետք է հետեւեք դրանցից որեւէ մեկին:


Գնալ վերեւ

6- Semantic HTML- ը ընդդեմ ոչ-իմաստաբանական HTML- ի

Semantic HTML - HTML- ի վերջին տարբերակը, որը նաեւ կոչվում է HTML5: Սա ոչ-semantic HTML- ի եւ XHTML- ի մշակված տարբերակն է:

Ինչու HTML5- ը ավելի լավ է: Նախորդ տարբերակներում HTML տարրերը հայտնաբերվել են id / դասի անուններով: Օրինակ, <div id = "article"> </ div> համարվում է հոդված:

HTML5- ում <article> </ article> tag- ը իրեն ներկայացնում է որպես հոդված, առանց որեւէ id / դասի նույնացուցիչի կարիք:

HTML5- ի համար, այժմ որոնման համակարգերը եւ այլ վեբ հավելվածները կարող են ավելի լավ հասկանալ վեբ էջը: Semantic կայքերն ապացուցել են ավելի լավ անել SEO- ի համար:

Ահա որոշ հայտնի HTML5 պիտակներ:

  • <main> </ main> = Սա ձեր դիտողների ցուցադրման հիմնական բովանդակությունը փաթաթելու համար:
  • <header> </ header> = Սա նշանակում է բովանդակության վերնագրի մաս, որը վերնագիր կամ հեղինակային մետա է:
  • <article> </ article> = Ձեր դիտողների համար սահմանում է օգտագործողի կողմից սահմանված կամ անկախ պարունակություն:
  • <section> </ section> = Այն կարող է խմբագրել ցանկացած կոդ, ինչպիսիք են header, footer կամ sidebar: Դուք կարող եք ասել, որ դա div- ի իմաստային ձեւն է:
  • <footer> </ footer> = Այս ստորագրության բովանդակությունը, հերքումը կամ հեղինակային իրավունքի տեքստը պատկանում են:
  • <audio> </ audio> = Այն հնարավորություն է տալիս ներդնել աուդիո ֆայլեր, առանց որեւէ plugin խնդրի:
  • <video> </ video> = <Audio >- ի նման, դուք կարող եք տեղադրել այս պիտակը `առանց պլանավորման խնդիրներ օգտագործելով:

Պարզ HTML5 կառուցվածքը նման է հետեւյալը.

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Իմ առաջին վեբ էջը </ title> </ head> <body> <header> <nav> <ul> </ li> </ li> </ head> <main> <article> <header> <h1> Սա հոդվածի վերնագիրն է </ li> <li> Menu 2 </ li> h2> <p> <p> <p> Հեղինակային իրավունքը 2 John Doe </ p> </ head> <p> p> </ footer> </ body> </ html>


Գնալ վերեւ

7- HTML վավերացում

Վեբ մասնագետների մեծ մասը վավերացնում են իրենց կոդը ավարտելուց հետո: Ինչու է անհրաժեշտ վավերացնել կոդը, երբ այն աշխատում է լավ:

Ձեր կոդերը հաստատելու երկու հնարավոր պատճառ կա.

  1. Այն կօգնի ձեզ կատարել ձեր կոդերը խաչաձեւ բրաուզերի եւ խաչաձեւ հարթակի համատեղելի: Ծածկագիրը չի կարող որեւէ սխալ ներկայացնել ձեր ընթացիկ բրաուզերում, բայց դա կարող է լինել մեկ այլ կայքում: Կոդի վավերացումը կբարձրացնի այն:
  2. Որոնման համակարգերը եւ այլ վեբ ծրագրերը կարող են դադարեցնել ձեր էջը, եթե սխալներ ունեք: Կարող եք հաստատել վավերացման միջոցով, որ դուք չունեք որեւէ խոշոր սխալ:

W3C ՆԳՄ կոդը վավերացման ամենատարածված ծառայությունն է: Նրանք ունեն մի քանի մեթոդներ ստուգելու համար: Դուք կարող եք կամ վերբեռնել ֆայլ կամ անմիջականորեն մուտքագրել կոդը իրենց վավերացման շարժիչով:


Գնալ վերեւ

8- Այլ օգտակար ռեսուրսներ

HTML- ը երբեւէ սովորող թեման է: HTML- ի նորացված նոր տարբերակները կարող են ավելի շուտ լինել: Այսպիսով, դուք պետք է թարմացնեք եւ գործեք: Պրակտիկան այն է, ինչ HTML- ները:

Ահա որոշ օգտակար ռեսուրսներ ձեզ համար.