html වෙබ් පිටුව වේ. වෙබ් පිටු නිර්මාණය. HTML භාෂාව ඉගෙනීම. වෙබ් පිටු මූලද්‍රව්‍ය: ශීර්ෂකය

අපි HTML සහ CSS වෙබ් අඩවි ගොඩනැගීමේ පාඩම් හරහා අපගේ ගමන ආරම්භ කිරීමට පෙර, භාෂා දෙක අතර වෙනස්කම්, එක් එක් භාෂාවේ වාක්‍ය ඛණ්ඩය සහ සමහර මූලික පාරිභාෂිතයන් තේරුම් ගැනීම වැදගත් වේ.

HTML සහ CSS යනු කුමක්ද?

HTML (HyperText Markup Language) අන්තර්ගතයේ ව්‍යුහය සහ එහි අර්ථය නිර්වචනය කරයි, ශීර්ෂයන්, ඡේද හෝ රූප වැනි අන්තර්ගතයන් නිර්වචනය කරයි. CSS (Cascading Style Sheets) යනු, උදාහරණයක් ලෙස, අකුරු හෝ වර්ණ භාවිතා කරමින්, අන්තර්ගතයේ පෙනුම හැඩගැන්වීම සඳහා නිර්මාණය කරන ලද ඉදිරිපත් කිරීමේ භාෂාවකි.

මෙම භාෂා දෙක - HTML සහ CSS - එකිනෙකින් ස්වාධීන වන අතර එසේ පැවතිය යුතුය. CSS HTML ලේඛනයක් තුළ ලිවිය යුතු අතර අනෙක් අතට. සාමාන්‍ය රීතියක් ලෙස, HTML සෑම විටම අන්තර්ගතය නියෝජනය කරන අතර CSS සෑම විටම මෝස්තරය නිර්වචනය කරයි.

HTML සහ CSS අතර වෙනස පිළිබඳ මෙම අවබෝධය සමඟ, අපි වඩාත් විස්තරාත්මකව HTML වෙත කිමිදෙමු.

මූලික HTML නියමයන්

ඔබ HTML සමඟ වැඩ කිරීම ආරම්භ කිරීමට පෙර, ඔබට නව සහ බොහෝ විට අමුතු නියමයන් හමු වනු ඇත. කාලයත් සමඟම ඔබ ඒ සියල්ල සමඟ වඩාත් හුරුපුරුදු වනු ඇත, නමුත් දැනට ඔබ මූලික HTML පද තුනෙන් ආරම්භ කළ යුතුය - මූලද්‍රව්‍ය, ටැග් සහ ගුණාංග.

මූලද්රව්ය

පිටුවක ඇති වස්තූන්හි ව්‍යුහය සහ අන්තර්ගතය නිර්වචනය කරන්නේ කෙසේදැයි මූලද්‍රව්‍ය සඳහන් කරයි. බහුලව භාවිතා වන සමහර මූලද්‍රව්‍යවලට බහු මට්ටමේ ශීර්ෂයන් ඇතුළත් වේ (මූලද්‍රව්‍ය ලෙස අර්ථ දක්වා ඇත

කලින්

) සහ ඡේද (ලෙස අර්ථ දක්වා ඇත

); ඔබට ලැයිස්තුවේ අංග ඇතුළත් කළ හැකිය ,

, , සහ හා තවත් බොහෝ අය.

කෝණ වරහන් භාවිතයෙන් මූලද්රව්ය හඳුනා ගැනේ<>, මූලද්‍රව්‍ය නාමය වටා. එබැවින් මූලද්රව්යය මේ ආකාරයෙන් පෙනෙනු ඇත:

ටැග්

කෝණ වරහන් එකතු කිරීම< и >මූලද්‍රව්‍යය වටා ටැග් එකක් ලෙස හඳුන්වන දේ නිර්මාණය කරයි. ටැග් බොහෝ විට විවෘත සහ වසා දැමීමේ ටැග් යුගල තුළ සිදු වේ.

ආරම්භක ටැගය මූලද්රව්යයේ ආරම්භය සලකුණු කරයි. එය සංකේතයකින් සමන්විත වේ<, затем идёт имя элемента и завершается символом >; උදාහරණ වශයෙන්,

.

වසා දැමීමේ ටැගය මූලද්රව්යයේ අවසානය සලකුණු කරයි. එය සංකේතයකින් සමන්විත වේ< с последующей косой чертой и именем элемента и завершается символом >; උදාහරණ වශයෙන්,

.

විවෘත සහ අවසන් ටැග් අතර දිස්වන අන්තර්ගතය එම මූලද්‍රව්‍යයේ අන්තර්ගතය වේ. උදාහරණයක් ලෙස, සබැඳියට ආරම්භක ටැගයක් ඇත සහ වසා දැමීමේ ටැගය. මෙම ටැග් දෙක අතර ඇති දේ සබැඳියේ අන්තර්ගතය වනු ඇත.

එබැවින්, සබැඳි ටැග් මේ වගේ දෙයක් පෙනෙනු ඇත:

...

ගුණාංග

ගුණාංග යනු ලබා දීමට භාවිතා කරන ගුණාංග වේ අමතර තොරතුරුමූලද්රව්යය ගැන. වඩාත් පොදු ගුණාංගවලට මූලද්‍රව්‍යය හඳුනා ගන්නා id ගුණාංගය ඇතුළත් වේ; මූලද්‍රව්‍යය වර්ගීකරණය කරන පන්ති ගුණාංගය; කාවැද්දූ අන්තර්ගතයේ මූලාශ්‍රය සඳහන් කරන src ගුණාංගය; සහ සම්බන්ධිත සම්පතට සබැඳියක් සඳහන් කරන href ගුණාංගයකි.

මූලද්‍රව්‍ය නාමයෙන් පසුව ආරම්භක ටැගය තුළ ගුණාංග නිර්වචනය කර ඇත. පොදුවේ ගත් කල, ගුණාංගවලට නමක් සහ අගයක් ඇතුළත් වේ. මෙම ගුණාංග සඳහා ආකෘතිය සමන්විත වන්නේ උපලක්ෂණ නාමයෙන් පසුව සමාන ලකුණකින් පසුව, උද්ධෘතවල ඇති ගුණාංග අගයයි. උදාහරණයක් ලෙස, මූලද්රව්යය href ගුණාංගය සමඟ මේ ආකාරයෙන් පෙනෙනු ඇත:

ෂේ හෝව්

මූලික HTML නියමයන් නිරූපණය කිරීම

මෙම කේතය වෙබ් පිටුවක "Shay Howe" යන පාඨය පෙන්වනු ඇති අතර මෙම පාඨය මත ක්ලික් කළ විට පරිශීලකයා http://shayhowe.com වෙත ගෙන යනු ඇත. සබැඳි මූලද්‍රව්‍යය විවෘත කිරීමේ ටැගයක් භාවිතයෙන් ප්‍රකාශ කරනු ලැබේ සහ වසා දැමීමේ ටැගයපෙළ ආවරණය කිරීම, මෙන්ම විවෘත ටැගය තුළ href="http://shayhowe.com" හරහා ප්‍රකාශ කරන ලද සබැඳි ලිපිනයේ ගුණාංගය සහ අගය.

සහල්. 1.01. දළ සටහන් ආකාරයෙන් HTML වාක්‍ය ඛණ්ඩයට මූලද්‍රව්‍ය, ගුණාංග සහ ටැගය ඇතුළත් වේ

දැන් ඔබ HTML මූලද්‍රව්‍ය, ටැග් සහ උපලක්ෂණ යනු කුමක්දැයි දන්නා බැවින්, අපි අපගේ පළමු වෙබ් පිටුව දෙස බලමු. මෙහි අලුත් දෙයක් පෙනේ නම්, කරදර නොවන්න - අපි යන විට එය බිඳ දමමු.

HTML ලේඛන ව්‍යුහය අභිරුචිකරණය කිරීම

HTML ලේඛන යනු .txt වෙනුවට .html දිගුව සමඟ සුරකින සරල පෙළ ලේඛන වේ. HTML ලිවීම ආරම්භ කිරීමට ඔබට පළමුව අවශ්‍ය වේ පෙළ සංස්කාරකය, ඔබට භාවිතා කිරීමට පහසු වේ. අවාසනාවකට, මෙය ඇතුළත් නොවේ Microsoft Wordහෝ පිටු, මේවා සංකීර්ණ සංස්කාරක බැවින්. HTML සහ CSS ලිවීම සඳහා වඩාත් ජනප්‍රිය පෙළ සංස්කාරකවරුන් දෙදෙනා වන්නේ Dreamweaver සහ Sublime Text ය. නිදහස් විකල්ප Windows සඳහා Notepad++ සහ Mac සඳහා TextWrangler.

සියලුම HTML ලේඛනවල පහත ප්‍රකාශන සහ මූලද්‍රව්‍ය ඇතුළත් අවශ්‍ය ව්‍යුහයක් අඩංගු වේ: , , සහ .

ලේඛන වර්ගයේ ප්රකාශය හෝHTML ලේඛනයක ආරම්භයේම පිහිටා ඇති අතර HTML හි කුමන අනුවාදය භාවිතා කරන්නේද යන්න බ්‍රව්සර්වලට කියයි. අපි භාවිතා කරන නිසා නවතම අනුවාදය HTML, අපගේ ලේඛන වර්ගය සරල වනු ඇත. මෙයින් පසු මූලද්රව්යය පැමිණේ ලේඛනයක ආරම්භය පෙන්නුම් කරයි.

තුල මූලද්රව්යය විවිධ පාරදත්ත (පිටුව පිළිබඳ තොරතුරු සමඟ) ඇතුළුව ලේඛනයේ ඉහළ කොටස නිර්වචනය කරයි. මූලද්‍රව්‍යයක් ඇතුළත අන්තර්ගතය වෙබ් පිටුවේම නොපෙන්වයි. ඒ වෙනුවට, එයට ලේඛනයේ මාතෘකාව (බ්‍රවුසර කවුළුවේ මාතෘකා තීරුවේ දිස්වන), ඕනෑම බාහිර ගොනු වෙත සබැඳි හෝ වෙනත් ප්‍රයෝජනවත් පාර-දත්ත ඇතුළත් විය හැකිය.

වෙබ් පිටුවේ සියලුම දෘශ්‍ය අන්තර්ගතයන් මූලද්‍රව්‍යයේ අඩංගු වේ . සාමාන්‍ය HTML ලේඛනයක ව්‍යුහය මේ ආකාරයට පෙනේ:

හෙලෝ වර්ල්ඩ්!

හෙලෝ වර්ල්ඩ්!

මෙය වෙබ් පිටුවකි.



HTML ලේඛන ව්යුහය නිරූපණය කිරීම

මෙම කේතය ලේඛනය පෙන්වයි, ලේඛන වර්ගය ප්‍රකාශයෙන් ආරම්භ වේ,, එවිට වහාම මූලද්රව්යය පැමිණේ . තුල මූලද්රව්ය එනවා සහ . මූලද්රව්යය ටැගය හරහා පිටු සංකේතනය අඩංගු වේ සහ මූලද්රව්යය හරහා ලේඛනයේ මාතෘකාව . මූලද්රව්යය <body>මූලද්රව්යය හරහා මාතෘකාව ඇතුළත් වේ <h1>සහ හරහා පෙළ ඡේදයක්<р>. මාතෘකාව සහ ඡේදය යන දෙකම මූලද්‍රව්‍යය තුළ තැන්පත් කර ඇති බැවිනි <body>, ඒවා වෙබ් පිටුවේ දිස්වේ.</p><p>මූලද්‍රව්‍යයක් වෙනත් මූලද්‍රව්‍යයක් තුළ ඇති විට, එය කැදලි ලෙසද හැඳින්වේ, ලේඛන ව්‍යුහය හොඳින් සංවිධානය වී කියවිය හැකි ලෙස තබා ගැනීමට එය එබුම කිරීම හොඳ අදහසකි. පෙර කේතයේ මූලද්රව්ය දෙකම <head>සහ <body>මූලද්‍රව්‍යය තුළ කූඩු කර මාරු කර ඇත <html>. මූලද්‍රව්‍ය සඳහා ඉන්ඩෙන්ටේෂන් ව්‍යුහය ඇතුළත එකතු කරන ලද නව මූලද්‍රව්‍ය සමඟ දිගටම පවතී <head>සහ <body> .</p><h3>ස්වයං-වසා දැමීමේ මූලද්රව්ය</h3><p>පෙර උදාහරණයේ, මූලද්රව්යය <meta>වසා දැමීමේ ටැගයක් ඇතුළත් නොවූ එකම ටැගය විය. බය වෙන්න එපා මේක හිතාමතා කරපු දෙයක්. සියලුම මූලද්‍රව්‍ය විවෘත කිරීම සහ වැසීම ටැග් වලින් සමන්විත නොවේ. සමහර මූලද්‍රව්‍ය හුදෙක් තනි ටැගයක් තුළ ඇති ගුණාංග හරහා අන්තර්ගතය හෝ හැසිරීම් ලබා ගනී. <meta>මෙම මූලද්රව්ය වලින් එකකි. මූලද්රව්ය අන්තර්ගතය <meta>උදාහරණයේ එය charset attribute සහ අගයක් භාවිතා කරමින් පවරනු ලැබේ. අනෙකුත් සාමාන්ය ස්වයං-වසා දැමීමේ මූලද්රව්ය ඇතුළත් වේ:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>ලේඛන ආකාරයේ ප්රකාශයක් භාවිතයෙන් සාදන ලද අඩු කරන ලද ව්යුහය<!DOCTYPE html>සහ මූලද්රව්ය <html> , <head>සහ <body>, තරමක් පොදු වේ. අපට මෙම ලේඛන ව්‍යුහය පහසුව තබා ගැනීමට අවශ්‍ය වන්නේ නව HTML ලේඛන සෑදීමේදී අපි එය නිතර භාවිතා කරන බැවිනි.</p><h3>කේතය වලංගු කිරීම</h3><p>අපි කොච්චර පරිස්සමෙන් කෝඩ් ලිව්වත් වැරදි එන එක වැළැක්විය නොහැක. වාසනාවකට මෙන්, HTML සහ CSS ලියන විට, අපගේ වැඩ පරීක්ෂා කිරීමට වලංගුකාරක ඇත. W3C දෝෂ සඳහා කේතය පරිලෝකනය කරන HTML සහ CSS වලංගුකාරක ඉදිරිපත් කරයි. අපගේ කේතය සමාලෝචනය කිරීම එය සියලුම බ්‍රවුසරවල නිවැරදිව විදැහුම් කිරීමට උපකාරී වනවා පමණක් නොව, කේතය ලිවීමේදී හොඳම භාවිතයන් ඉගැන්වීමටද උපකාරී වේ.</p><h2>ප්රායෝගිකව</h2><p>වෙබ් නිර්මාණකරුවන් සහ ඉදිරිපස සංවර්ධකයින් ලෙස, අපගේ යාත්‍රාව සඳහා කැප වූ විශිෂ්ට සම්මන්ත්‍රණ ගණනාවකට සහභාගී වීමේ සුඛෝපභෝගීත්වය අපට ඇත. අපි අපේම විලාසිතා සම්මන්ත්‍රණයක් සංවිධානය කර මීළඟ පාඩම් අතරතුර ඒ සඳහා වෙබ් අඩවියක් නිර්මාණය කරන්නෙමු. මෙවැනි!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>අපි HTML වලින් ටිකක් ඈතට ගියර් මාරු කරලා CSS දිහා බලමු. මතක තබා ගන්න, HTML අපගේ වෙබ් පිටු වල අන්තර්ගතය සහ ව්‍යුහය නිර්වචනය කරන අතර CSS මගින් ඒවායේ දෘශ්‍ය විලාසය සහ පෙනුම නිර්වචනය කරයි.</p><h2>මූලික CSS නියමයන්</h2><p>HTML නියමයන්ට අමතරව, ඔබ හුරුපුරුදු වීමට අවශ්‍ය මූලික CSS නියමයන් කිහිපයක් තිබේ. මෙම නියමයන් තේරීම්, ගුණාංග සහ අගයන් ඇතුළත් වේ. HTML පාරිභාෂිතය සමඟ මෙන්, ඔබ CSS සමඟ වැඩ කරන තරමට, මෙම නියමයන් දෙවන ස්වභාවය බවට පත්වේ.</p><h3>තේරීම් කරන්නන්</h3><p>ඔබ වෙබ් පිටුවකට මූලද්‍රව්‍ය එකතු කරන විට, ඒවා CSS භාවිතයෙන් මෝස්තර කළ හැක. තේරීම් කාරකය HTML හි කුමන මූලද්‍රව්‍ය හෝ මූලද්‍රව්‍ය ඉලක්ක කර මෝස්තර (වර්ණ, ප්‍රමාණය සහ පිහිටීම වැනි) යෙදිය යුතුද යන්න තීරණය කරයි. අපට කෙතරම් නිශ්චිත විය යුතුද යන්න මත පදනම්ව, අනන්‍ය මූලද්‍රව්‍ය තෝරා ගැනීමට තේරීම්කරුවන්ට විවිධ ප්‍රමිතික එකතුවක් ඇතුළත් කළ හැක. උදාහරණයක් ලෙස, අපට පිටුවක ඇති සෑම ඡේදයක්ම තේරීමට හෝ එක් නිශ්චිත ඡේදයක් පමණක් තෝරා ගැනීමට අවශ්‍ය වේ.</p><p>තේරීම් සාමාන්‍යයෙන් id හෝ පන්ති අගය වැනි ගුණාංග අගයක් හෝ මූලද්‍රව්‍ය නාමයක් සමඟ සම්බන්ධ වේ. <h1>හෝ<р> .</p><p>CSS හි, තේරීම් කාරකයන් වක්‍ර වරහන් () සමඟ ඒකාබද්ධ කර ඇති අතර එමඟින් තෝරාගත් මූලද්‍රව්‍යයට යොදන මෝස්තර ඇතුළත් වේ. මෙම තේරීම්කාරකය සියලුම අංග ඉලක්ක කරයි <span><p>පී(...)</p><h3>දේපළ</h3><p>මූලද්‍රව්‍යයක් තෝරාගත් පසු, දේපල එයට යොදන මෝස්තර තීරණය කරයි. දේපල නම් පැමිණෙන්නේ තේරීමට පසුව, ඇතුළත <a href="https://5visa.ru/si/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">curly වරහන්</a>() සහ වහාම මහා බඩවැලේ පෙර. පසුබිම, වර්ණය, අකුරු ප්‍රමාණය, උස සහ පළල සහ පොදුවේ එකතු කරන වෙනත් ගුණාංග වැනි අපට භාවිතා කළ හැකි බොහෝ ගුණාංග තිබේ. පහත කේතයෙන් අපි සියලු මූලද්‍රව්‍ය සඳහා අදාළ වන වර්ණය සහ අකුරු ප්‍රමාණයේ ගුණාංග නිර්වචනය කරමු <span><p>P (වර්ණ: ...; අකුරු ප්රමාණය: ...;)</p><h3>වටිනාකම්</h3><p>අපි මෙතෙක් තෝරාගෙන ඇත්තේ සිලෙක්ටරයක් ​​හරහා මූලද්‍රව්‍යයක් පමණක් තෝරාගෙන, ගුණාංග හරහා අපි එයට යෙදිය යුතු මෝස්තරය තීරණය කර ඇත. දැන් අපට මෙම දේපලෙහි හැසිරීම අගයක් හරහා සැකසිය හැක. අගයන් මහා බඩවැලක් සහ අර්ධ කෝලයක් අතර පෙළ ලෙස දැක්විය හැක. පහත අපි සියලු මූලද්රව්ය තෝරා ගනිමු <p >තවද වර්ණ ගුණ අගය තැඹිලි පාටට සහ අකුරු ප්‍රමාණයේ ගුණ අගය පික්සල 16ට සකසන්න.</p><p>P (වර්ණය: තැඹිලි; අකුරු ප්රමාණය: 16px; )</p><p>මෙය පරීක්‍ෂා කිරීම සඳහා, CSS හි අපගේ නීති මාලාව තේරීම්කාරකයකින් ආරම්භ වන අතර, පසුව වහාම රැලි සහිත වරහන් මගින්. මෙම curly braces වල ගුණ සහ අගයන් යුගල වලින් සමන්විත ප්රකාශන අඩංගු වේ. සෑම ප්‍රකාශයක්ම දේපලකින් ආරම්භ වන අතර, පසුව කොලනයක්, දේපලෙහි වටිනාකම සහ අවසානයේ අර්ධ කොමාවක්.</p><p>සාමාන්‍ය භාවිතයක් වන්නේ වක්‍ර වරහන් තුළ ගුණ සහ අගයන් යුගල මාරු කිරීමයි. HTML සමඟ මෙන්ම, indentation අපගේ කේතය සංවිධානාත්මකව සහ පැහැදිලිව තබා ගැනීමට උපකාරී වේ.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>සහල්. 1.03. CSS වාක්‍ය ව්‍යුහයට තේරීම්, ගුණාංග සහ අගයන් ඇතුළත් වේ</p><p>මූලික නියමයන් කිහිපයක් සහ සාමාන්‍ය CSS වාක්‍ය ඛණ්ඩය දැන ගැනීම හොඳ ආරම්භයක් වේ, නමුත් අපි ගැඹුරට කිමිදීමට පෙර අපට ආවරණය කිරීමට තවත් කරුණු කිහිපයක් තිබේ. විශේෂයෙන්ම, අපි CSS හි තේරීම්කරුවන් ක්‍රියා කරන ආකාරය දෙස සමීපව බැලිය යුතුය.</p><h2>තේරීම්කරුවන් සමඟ වැඩ කිරීම</h2><p>කලින් සඳහන් කළ පරිදි තේරීම්, කුමන HTML මූලද්‍රව්‍ය හැඩගැන්විය යුතුද යන්න දක්වයි. තේරීම්කාරක භාවිතා කරන්නේ කෙසේද සහ ඒවා ක්‍රියා කරන ආකාරය සම්පූර්ණයෙන්ම අවබෝධ කර ගැනීම වැදගත්ය. පළමු පියවර විය යුත්තේ දැන හඳුනා ගැනීමයි <a href="https://5visa.ru/si/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">විවිධ වර්ග</a>තේරීම්කරුවන්. අපි වඩාත් මූලික තේරීම් වලින් පටන් ගනිමු: වර්ගය, පන්තිය සහ හඳුනාගැනීමේ තේරීම්.</p><h3>ටයිප් තේරීම්</h3><p>වර්ග තේරීම් කාරක ඒවායේ වර්ගය අනුව මූලද්‍රව්‍ය ඉලක්ක කරයි. උදාහරණයක් ලෙස, අපට සියලු අංග ඉලක්ක කිරීමට අවශ්‍ය නම් <div>අපි div තේරීම්කාරකය භාවිතා කළ යුතුයි. පහත කේතය මූලද්‍රව්‍ය සඳහා වර්ගය තේරීම පෙන්වයි <div>, මෙන්ම අනුරූප HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>පංතිවල</h3><p>පන්ති ගුණාංගයේ අගය මත පදනම්ව මූලද්‍රව්‍යයක් තෝරා ගැනීමට පන්ති ඔබට ඉඩ සලසයි. පන්ති තේරීම් වර්ග තේරීම්කරුවන්ට වඩා ටිකක් විශේෂිත වන්නේ ඔවුන් එකම වර්ගයේ සියලුම මූලද්‍රව්‍යවලට වඩා නිශ්චිත මූලද්‍රව්‍ය සමූහයක් තෝරන බැවිනි.</p><p>බහු මූලද්‍රව්‍ය සඳහා එකම පන්ති ගුණාංග අගය භාවිතා කිරීමෙන් එකවර විවිධ මූලද්‍රව්‍ය සඳහා එකම මෝස්තර යෙදීමට පන්ති ඔබට ඉඩ සලසයි.</p><p>CSS හි, පන්ති නියෝජනය කරනු ලබන්නේ ප්‍රමුඛ තිතකින් පසුව පන්ති ගුණාංගයේ අගයයි. පහත පන්ති තේරීම් කාරකය මූලද්‍රව්‍ය ඇතුළුව නියම පන්ති ගුණාංගයේ අගය අඩංගු සියලුම මූලද්‍රව්‍ය තෝරයි <div>සහ <span><p>නියමයි (...)</p><p> <div class="awesome">...</div> </p><h3>හඳුනාගැනීම්</h3><p>හඳුනාගැනීම් පන්තිවලට වඩා නිරවද්‍ය වන්නේ ඒවා වරකට එක් අද්විතීය මූලද්‍රව්‍යයක් පමණක් ඉලක්ක කරන බැවිනි. පන්ති තේරීම් කාරකයන් class attribute හි අගය භාවිතා කරනවා සේම, identifier id attribute හි අගය තේරීමක් ලෙස භාවිතා කරයි.</p><p>දර්ශණය වන මූලද්‍රව්‍ය වර්ගය කුමක් වුවත්, id උපලක්ෂණ අගය පිටුවක එක් වරක් පමණක් භාවිතා කළ හැක. හැඳුනුම්පත් තිබේ නම්, ඒවා වැදගත් අංග සඳහා වෙන් කළ යුතුය.</p><p>CSS හි, හඳුනාගැනීම් ඉදිරියෙන් ඇති හැෂ් සංකේතයකින්, පසුව id ගුණාංගයේ අගයෙන් නිරූපණය කෙරේ. මෙහිදී හැඳුනුම්පත තෝරාගනු ලබන්නේ shayhowe අගය සහිත id ගුණාංගය අඩංගු මූලද්‍රව්‍යය පමණි.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>අතිරේක තේරීම් කරන්නන්</h3><p>තේරීම්කරුවන් අතිශයින්ම බලවත් දේවල් වන අතර ඉහත විස්තර කර ඇති ඒවා අපට හමුවන වඩාත් පොදු තේරීම් අතර වේ. මෙම තේරීම්කරුවන් ආරම්භය පමණි. බොහෝ උසස් තේරීම් ලබා ගත හැකි අතර ඒවා පහසුවෙන් ලබා ගත හැකිය. ඔබ ඔවුන් සමඟ සැපපහසු වූ පසු, වඩාත් දියුණු ඒවා කිහිපයක් පරීක්ෂා කිරීමට බිය නොවන්න.</p><p>හොඳයි, අපි සියල්ල එකට එකතු කිරීමට පටන් ගනිමු. අපි අපගේ HTML තුළ ඇති පිටුවට මූලද්‍රව්‍ය එක් කරන්නෙමු, එවිට අපට එම මූලද්‍රව්‍ය තෝරා CSS භාවිතයෙන් ඒවා මෝස්තර කළ හැක. දැන් අපි භාෂා දෙක එකට වැඩ කිරීමට HTML සහ CSS අතර තිත් සම්බන්ධ කරමු.</p><h2>CSS සම්බන්ධ කිරීම</h2><p>අපගේ CSS අපගේ HTML සමඟ කතා කිරීමට අපි HTML වෙතින් CSS ගොනුව වෙත යොමු කළ යුතුය. හොඳ පරිචයක් නම් මූලද්‍රව්‍යය තුළ පෙන්වා ඇති එක් බාහිර ගොනුවකට අපගේ සියලුම මෝස්තර ඇතුළත් කිරීමයි <head>අපගේ HTML ලේඛනය. එක් බාහිර CSS භාවිතා කිරීමෙන් වෙබ් අඩවිය පුරා එකම මෝස්තර යෙදීමට සහ ඉක්මනින් එහි වෙනස්කම් කිරීමට අපට ඉඩ සලසයි.</p><h3>CSS එකතු කිරීම සඳහා වෙනත් විකල්ප</h3><p>CSS සංස්ථාගත කිරීම සඳහා වෙනත් විකල්ප අභ්‍යන්තර සහ පේළිගත විලාස භාවිතා කිරීම ඇතුළත් වේ. යථාර්ථයේ දී ඔබට මෙම විකල්පයන් හමුවිය හැක, නමුත් ඒවා සාමාන්‍යයෙන් අප්‍රසාදයට ලක් වන්නේ ඒවා වෙබ් අඩවි යාවත්කාලීන කිරීම අපහසු සහ කරදරකාරී වන බැවිනි.</p><p>අපගේ බාහිර විලාස පත්‍රය නිර්මාණය කිරීම සඳහා, නව එකක් සෑදීමට අප තෝරාගත් පෙළ සංස්කාරකය භාවිතා කිරීමට අපට නැවත අවශ්‍යය <a href="https://5visa.ru/si/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">පෙළ ගොනුව</a>.css දිගුව සමඟ. අපගේ CSS ගොනුව අපගේ HTML ගොනුව සේම එකම ෆෝල්ඩරයක හෝ උප ෆෝල්ඩරයක සුරැකිය යුතුය.</p><p>මූලද්රව්යයක් ඇතුළත <head>මූලද්රව්යය යොදන ලදී <link>, එය HTML සහ CSS ගොනු අතර සම්බන්ධය නිර්වචනය කරයි. අපි CSS වෙත සම්බන්ධ කරන බැවින්, අපි ඔවුන්ගේ සම්බන්ධතාවය දැක්වීමට මෝස්තර පත්‍ර අගයක් සහිත rel උපලක්ෂණය භාවිතා කරමු. මීට අමතරව, CSS ගොනුවේ පිහිටීම හෝ මාර්ගය දැක්වීමට href ගුණාංගය භාවිතා කරයි.</p><p>පහත උදාහරණයේ HTML ලේඛනය, මූලද්‍රව්‍යය <head>බාහිර විලාස ගොනුවකට යොමු කරයි.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS නිවැරදිව විදැහුම්කරණය සඳහා, href ගුණාංගයේ මාර්ග අගය CSS ගොනුව ගබඩා කර ඇති ස්ථානයට කෙලින්ම ගැලපිය යුතුය. පෙර උදාහරණයේදී, main.css ගොනුව HTML ගොනුව ඇති ස්ථානයේම ගබඩා කර ඇත, එය root ෆෝල්ඩරය ලෙසද හැඳින්වේ.</p><p>CSS ගොනුව උප ෆෝල්ඩරයක පිහිටා තිබේ නම්, href ගුණාංගයේ අගය එම මාර්ගයට අනුරූප විය යුතුය. උදාහරණයක් ලෙස, අපගේ main.css ගොනුව ස්ටයිල්ෂීට් නම් උප ෆෝල්ඩරයක සුරකින ලද්දේ නම්, href ගුණාංගයේ අගය stylesheets/main.css වේ. මෙය උප ෆෝල්ඩරයකට යන බව දැක්වීමට ඉදිරි ස්ලැෂ් (හෝ slash) භාවිතා කරයි.</p><p>මත <a href="https://5visa.ru/si/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">මේ මොහොතේ</a>අපගේ පිටු සෙමෙන් නමුත් නිසැකවම ජීවයට පැමිණීමට පටන් ගෙන ඇත. අපි තවම CSS ගැන ගැඹුරින් අධ්‍යයනය කර නැත, නමුත් සමහර මූලද්‍රව්‍යවල අපි අපගේ CSS තුළ ප්‍රකාශ නොකළ මෝස්තර ඇති බව ඔබ දැක ඇති. මෙම මූලද්‍රව්‍ය මත තමන්ගේම කැමති මෝස්තර පනවන්නේ බ්‍රවුසරයයි. වාසනාවකට මෙන්, අපට මෙම විලාසයන් ඉතා පහසුවෙන් නැවත ලිවිය හැකිය, එය CSS යළි පිහිටුවීමක් භාවිතයෙන් අපි ඊළඟට කරන්නෙමු.</p><h2>CSS යළි පිහිටුවීම භාවිතා කිරීම</h2><p>සෑම බ්‍රවුසරයකටම තමන්ගේම පෙරනිමි මෝස්තර ඇත <a href="https://5visa.ru/si/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">විවිධ මූලද්රව්ය</a>. කෙසේද <a href="https://5visa.ru/si/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">ගූගල් ක්රෝම්</a>ශීර්ෂයන්, ඡේද, ලැයිස්තු සහ යනාදිය සංදර්ශන කරයි, එය කරන ආකාරය වෙනස් විය හැක <a href="https://5visa.ru/si/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">අන්තර්ජාල ගවේෂකය</a>. හරස් බ්‍රවුසර් ගැළපුම සහතික කිරීම සඳහා, CSS යළි පිහිටුවීම බහුලව භාවිතා වී ඇත.</p><p>CSS යළි පිහිටුවීමක් සියලු මූලික HTML මූලද්‍රව්‍ය ලබා දී ඇති ශෛලියක් සමඟ ගන්නා අතර සියලුම බ්‍රව්සර් හරහා ස්ථාවර ශෛලියක් සපයයි. මෙම යළි පිහිටුවීම් සාමාන්‍යයෙන් මෙම අගයන් අඩු කරන මානයන්, පිරවුම්, මායිම් හෝ අමතර මෝස්තර ඉවත් කිරීම ඇතුළත් වේ. CSS කැස්කැඩිං ඉහළ සිට පහළට ක්‍රියා කරන බැවින් (ඔබ ඒ ගැන ඉක්මනින් ඉගෙන ගනු ඇත) - අපගේ යළි පිහිටුවීම අපගේ ශෛලියේ ඉහළින්ම තිබිය යුතුය. මෙම ශෛලීන් පළමුව කියවන බව සහතික කරන අතර එය එයයි. <a href="https://5visa.ru/si/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">විවිධ බ්‍රව්සර්</a>පොදු යොමු ස්ථානයක සිට වැඩ කිරීමට පටන් ගනී.</p><p>අයදුම් කිරීමට විවිධ CSS යළි පිහිටුවීමේ පොකුරක් ඇත, ඒවා සියල්ලටම තමන්ගේම ඇත <a href="https://5visa.ru/si/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">ශක්තීන්</a>. Eric Meyer වෙතින් වඩාත් ජනප්‍රිය එකක් වන ඔහුගේ CSS යළි පිහිටුවීම නව HTML5 මූලද්‍රව්‍ය ඇතුළත් කිරීමට අනුවර්තනය වී ඇත.</p><p>ඔබට ටිකක් වික්‍රමාන්විත බවක් දැනේ නම්, Nicholas Gallagher විසින් නිර්මාණය කරන ලද Normalize.css ද ඇත. Normalize.css සියලු මූලික මූලද්‍රව්‍ය සඳහා දෘඪ යළි පිහිටුවීමක් භාවිතා කිරීම කෙරෙහි අවධානය යොමු නොකරයි, ඒ වෙනුවට එම මූලද්‍රව්‍ය සඳහා පොදු මෝස්තර සැකසීම කෙරෙහි අවධානය යොමු කරයි. මේ සඳහා CSS පිළිබඳ ගැඹුරු අවබෝධයක් මෙන්ම මෝස්තර වලින් ඔබ ලබා ගැනීමට කැමති දේ පිළිබඳ දැනුමක් අවශ්‍ය වේ.</p><h3>හරස් බ්‍රවුසර ගැළපුම සහ පරීක්ෂා කිරීම</h3><p>කලින් සඳහන් කළ පරිදි, විවිධ බ්‍රව්සර් මූලද්‍රව්‍ය වෙනස් ලෙස ලබා දෙයි. හරස් බ්‍රවුසර් ගැළපුම සහ පරීක්ෂා කිරීමේ වැදගත්කම හඳුනා ගැනීම වැදගත් වේ. සියලුම බ්‍රව්සර් වල අඩවි හරියටම සමාන නොවිය යුතුය, නමුත් සමීප විය යුතුය. ඔබට සහාය දීමට අවශ්‍ය බ්‍රවුසර මොනවාද සහ ඔබේ වෙබ් අඩවිය සඳහා හොඳම දේ මත පදනම්ව ඔබට තීරණයක් ගැනීමට සිදුවේ.</p><p>CSS ලිවීමේදී අවධානය යොමු කළ යුතු කරුණු කිහිපයක් තිබේ. ශුභාරංචිය නම් ඔබට ඒ සියල්ල කළ හැකි අතර එය ප්‍රගුණ කිරීමට ටිකක් ඉවසීම අවශ්‍ය වේ.</p><h2>ප්රායෝගිකව</h2><p>අපි අපේ සම්මන්ත්‍රණ අඩවියේ අවසන් වරට නතර කළ ස්ථානයට ආපසු යමු සහ අපට CSS කිහිපයක් එකතු කරන්නේ කෙසේදැයි බලමු.</p><ol><li>අපේ styles-සම්මන්ත්‍රණ ෆෝල්ඩරය තුළ, අපි Assets නමින් නව ෆෝල්ඩරයක් නිර්මාණය කරමු. අපි අපේ වෙබ් අඩවිය සඳහා මෝස්තර, රූප, වීඩියෝ ආදී සියලුම සම්පත් ගබඩා කරන්නේ මෙහිදීය. අපගේ මෝස්තර සඳහා, අපි ඉදිරියට යමු සහ වත්කම් ෆෝල්ඩරය තුළට තවත් මෝස්තර පත්‍ර ෆෝල්ඩරයක් එක් කරමු.</li><li>පෙළ සංස්කාරකයක් භාවිතා කර, අපි main.css නමින් නව ගොනුවක් සාදා එය අප විසින් සාදන ලද ස්ටයිල්ෂීට් ෆෝල්ඩරයේ සුරකිමු.</li><p>බ්‍රවුසරයේ ඇති index.html ගොනුව දෙස බලන විට අපට පෙනෙන්නේ එම මූලද්‍රව්‍ය බව ය <h1>සහ <p>දැනටමත් පෙරනිමි විලාසය අඩංගු වේ. විශේෂයෙන්ම, ඔවුන් වටා අද්විතීය අකුරු ප්රමාණය සහ අවකාශය ඇත. Eric Meyer ගේ reset එක භාවිතා කිරීමෙන් අපට මෙම මෝස්තර මෘදු කළ හැකි අතර, ඒ සෑම එකක්ම එකම පදනමකින් ආරම්භ කිරීමට ඉඩ සලසයි. මෙය සිදු කිරීම සඳහා, ඔහුගේ වෙබ් අඩවිය දෙස බලන්න, කේතය පිටපත් කර එය අපගේ main.css ගොනුවේ ඉහළින් අලවන්න.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 බලපත්‍රය: කිසිවක් නැත (පොදු වසම) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, කෙටි යෙදුම, ලිපිනය, විශාල, උපුටා, කේතය, del, dfn, em, img, ins, kbd, q, s, samp, කුඩා, වර්ජනය, ශක්තිමත්, උප, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, ක්ෂේත්‍ර කට්ටලය, පෝරමය, ලේබලය, පුරාවෘත්තය, වගුව, සිරස්තලය, tbody, tfoot, thead, tr, th, td, ලිපිය, පසෙකට, කැන්වසය, විස්තර, කාවැද්දීම, රූප සටහන්, පාදකය, ශීර්ෂකය hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* පැරණි බ්‍රවුසර සඳහා HTML5 සංදර්ශක-භූමිකාව යළි පිහිටුවීම */ ලිපිය, පසෙකින්, විස්තර, figcaption, රූපය, පාදකය, ශීර්ෂකය, hgroup, මෙනුව, nav, කොටස (දර්ශණය: වාරණ; ) ශරීරය (රේඛාව-උස: 1; ) ol, ul (list-style: none; ) blockquote, q (quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- කඩා වැටීම: කඩා වැටීම; මායිම් පරතරය: 0; )</p><li>අපගේ main.css ගොනුව හැඩගැසීමට පටන් ගෙන ඇත, එබැවින් අපි එය index.html ගොනුවට සම්බන්ධ කරමු. පෙළ සංස්කාරකයක index.html විවෘත කර අංගයක් එක් කරන්න <link>වී <head>, මූලද්රව්යය පසු වහාම <title> .</li><li>අපි මූලද්‍රව්‍යය හරහා ශෛලීන් පෙන්වා දෙන බැවින් <link>අගය මෝස්තර පත්‍රිකාව සමඟ rel ගුණාංගයක් එක් කරන්න.</li><p>අපි href ගුණාංගය භාවිතයෙන් අපගේ main.css ගොනුවට සබැඳියක් ද ඇතුළත් කරන්නෙමු. මතක තබා ගන්න, අපගේ main.css ගොනුව වත්කම් ෆෝල්ඩරය තුළ පිහිටා ඇති මෝස්තර පත්‍ර ෆෝල්ඩරයේ සුරකියි. එබැවින් අපගේ main.css ගොනුවට යන මාර්ගය වන href ගුණාංගයේ අගය asset/stylesheets/main.css විය යුතුය.</p><p> <head> <meta charset="utf-8"> <title>විලාසිතා සමුළුව

අපගේ කාර්යය පරීක්ෂා කිරීමට සහ අපගේ HTML සහ CSS එකට වැඩ කරන ආකාරය බැලීමට කාලයයි. බ්‍රවුසරයේ index.html ගොනුව විවෘත කිරීම (හෝ එය දැනටමත් විවෘත නම් පිටුව නැවුම් කිරීම) පෙරට වඩා තරමක් වෙනස් ප්‍රතිඵලයක් පෙන්විය යුතුය.

සහල්. 1.04. CSS යළි පිහිටුවීම සමඟ අපගේ විලාසිතා සම්මන්ත්‍රණ අඩවිය

Demo සහ source code

පහතින් ඔබට ස්ටයිල්ස් සම්මන්ත්‍රණ වෙබ් අඩවිය එහි වත්මන් තත්වයෙන් බැලීමට සහ බාගත කිරීමටද හැකිය මූලාශ්රයමේ මොහොතේ අඩවිය.

සාරාංශය

ඉතින්, හැම දෙයක්ම හොඳයි! අපි මෙම නිබන්ධනය තුළ විශාල පියවර කිහිපයක් ගත්තා.

නිකමට හිතන්න, දැන් ඔබ HTML සහ CSS මූලික කරුණු දන්නවා. අපි දිගටම කරගෙන යන විට සහ ඔබ HTML සහ CSS ලිවීමට වැඩි කාලයක් ගත කරන විට, ඔබට මෙම භාෂා දෙක සමඟ වැඩ කිරීම වඩාත් පහසු වනු ඇත.

නැවත විස්තර කිරීම සඳහා, අපි පහත සඳහන් දෑ ආවරණය කළෙමු:

  • HTML සහ CSS අතර වෙනස.
  • HTML මූලද්‍රව්‍ය, ටැග් සහ ගුණාංග සඳහා හැඳින්වීම.
  • ඔබගේ පළමු වෙබ් පිටුවේ ව්‍යුහය සැකසීම.
  • CSS තේරීම්, ගුණාංග සහ අගයන් වෙත හැඳින්වීම.
  • CSS තේරීම් සමඟ වැඩ කිරීම.
  • HTML වෙතින් CSS වෙත පොයින්ටර්.
  • CSS යළි පිහිටුවීමේ වැදගත්කම.

දැන් අපි HTML දෙස සමීපව බලමු සහ අර්ථ ශාස්ත්‍රය ගැන ටිකක් හුරුපුරුදු වෙමු.

සම්පත් සහ සබැඳි

  • Scripting Master හරහා පොදු HTML නියමයන්
  • සිත් ඇදගන්නා වෙබ් අඩවි හරහා CSS නියම සහ අර්ථ දැක්වීම්
  • CSS මෙවලම්: Eric Meyer හරහා CSS යළි පිහිටුවන්න

අන්තර්ජාලයේ ඉදිරිපත් කර ඇති අන්තර්ගතයෙන් වැඩි කොටසක් වෙබ් පිටු වේ. මෙය ඓතිහාසික වශයෙන් අථත්‍ය ජාල අවකාශයක ස්ථානගත කිරීම සඳහා අදහස් කරන ලද පළමු ලේඛන වර්ගය වේ, නමුත් එය තවමත් අදාළ වන අතර ප්‍රායෝගිකව තරඟකාරී ආකෘති නොමැත. වෙබ් පිටු වල ව්‍යුහය කුමක්ද? ඔවුන් නිර්මාණය කිරීමට භාවිතා කරන වෙබ් සංවර්ධන මෙවලම් මොනවාද?

වෙබ් පිටුවක් යනු කුමක්ද?

“වෙබ් පිටුවක ප්‍රධාන අංග ලැයිස්තුගත කරන්න,” පරීක්ෂකවරයා පරිගණක විද්‍යා පාඩමකදී අපට කියයි. ඔහුට ප්‍රතිචාර වශයෙන් අපට කුමක් කිව හැකිද? පළමුවෙන්ම, අපි ප්‍රතිපත්තිමය වශයෙන් වෙබ් පිටුවක් යනු කුමක්ද යන්න ගැන කතා කරමු.

තොරතුරු තාක්ෂණ විශේෂඥයින් අතර පොදුවේ පිළිගත් නිර්වචනයට අනුව, මෙය විශේෂිත වැඩසටහනක - බ්‍රව්සරයක විවෘත කිරීමට අදහස් කරන ලේඛනයක් වන අතර විවිධ ප්‍රයෝජනවත් අන්තර්ගත - පෙළ සහිත සුදුසු මෘදුකාංග භාවිතා කරමින් පරිගණක තිරයේ ප්‍රදර්ශනය කිරීම සඳහා දත්ත අඩංගු වේ. , සබැඳි, ග්‍රැෆික්ස්, වීඩියෝ, සංගීතය සහ යනාදිය. වෙබ් පිටුවක් යනු පෙළ ලේඛනයකි. බ්රවුසරය සඳහා අනුරූප දත්ත අකුරු, අංක සහ විශේෂ සංකේත, සලකුණු භාෂා මූලද්‍රව්‍ය ලෙස භාවිතා කරයි - HTML. වෙබ් පිටුවේ නිර්මාතෘ බ්රවුසරයට "පැහැදිලි" කරන්නේ මෙම හෝ එම අන්තර්ගතය තිරය මත ප්රදර්ශනය කරන්නේ කෙසේද යන්නයි.

අඩවි ව්‍යුහය තුළ වෙබ් පිටු වල ස්ථානය සහ භූමිකාව

වෙබ් පිටුවක් වෙබ් අඩවියක ප්‍රධාන අංගය යැයි අපට කිව හැකිද? මෙය අර්ධ වශයෙන් සත්‍යයකි. කෙසේ වෙතත්, අප ඉහත සඳහන් කළ පරිදි, වෙබ් පිටුවක් යනු පෙළ ලේඛනයක් පමණි. වෙබ් අඩවිය, රීතියක් ලෙස, පින්තූර, වීඩියෝ සහ අනෙකුත් බහුමාධ්ය මූලද්රව්ය ද අඩංගු වේ. වෙබ් පිටුවකට ඒවා අඩංගු විය නොහැක, නමුත් එහි ව්‍යුහය තුළ ඒවාට සබැඳි අඩංගු විය හැක. මේ අනුව, පරිශීලකයින් ඉදිරියේ අතථ්‍ය අන්තර්ගතය ප්‍රදර්ශනය කිරීමේදී එහි ප්‍රමුඛ කාර්යභාරය අනුව වෙබ් පිටුව වෙබ් අඩවියේ ප්‍රධාන අංගය ලෙස හැඳින්විය හැක.

දුර්ලභ අවස්ථාවන්හිදී, ඇත්ත වශයෙන්ම, අදාළ ලේඛනය වෙබ් අඩවියේ එකම සංරචකය වනු ඇත - කිසියම් හේතුවක් නිසා එය චිත්රක, වීඩියෝ සහ අනෙකුත් බහුමාධ්ය මූලද්රව්ය ප්රදර්ශනය කිරීම සඳහා ලබා නොදේ නම්. විශේෂයෙන්, පළමු වෙබ් අඩවි - වෙබ් පිටු සලකුණු භාෂා මුලින්ම දර්ශනය වූ විට - අදාළ අන්තර්ගතයන් ඇතුළත් නොවීය. පරිශීලකයාගේ ඇස් ඉදිරිපිට තිබුණේ පෙළ සහ සබැඳි පමණි.

අධිපෙළ භාවිතා කිරීමේ මූලධර්මය

එබැවින්, වෙබ් පිටුවක් යනු සම්පාදනය කරන ලද ලේඛනයකි HTML භාෂාව, අධිපෙළ සලකුණු කිරීමට භාවිතා කරයි. නමුත් මෙම සංසිද්ධිය කුමක්ද? අධිපෙළ යනු කුමක්ද? න්‍යාය ගැඹුරින් සොයා බැලීමකින් තොරව, මෙය එක් ආකාරයකින් හෝ වෙනත් ආකාරයකින් ඔබට ලබා ගැනීමට ඉඩ සලසන පෙළක් බව අපි සටහන් කරමු. වේගවත් ප්රවේශයතවත් කෙනෙකුට - සබැඳි හරහා. සාමාන්‍ය පොතක මෙය කළ නොහැක - “සරල පෙළ” ඇත. අපේක්ෂිත පිටුවට ප්රවේශ වීම සඳහා, පාඨකයාට හැරීම් කිහිපයක් සිදු කළ යුතුය, පළමුව පටුන හෝ පාද සටහන් කියවන්න. අධිපෙළ ප්‍රකාරයේදී, පිටුවේ HTML මූලද්‍රව්‍යවල පරාවර්තනය වන තොරතුරු භාවිතා කරමින් බොහෝ වැඩ කටයුතු පරිගණකය මගින් සිදු කරයි.

පරිගණක විද්‍යා ගුරුවරයෙකු අපට පවසන්නේ නම්: “වෙබ් පිටුවක ප්‍රධාන අංග ලැයිස්තුගත කරන්න”, එවිට අපට HTML සලකුණු භාෂාව භාවිතයෙන් නිර්මාණය කර ඇති අනුරූප ලේඛනයේ සංරචක ගැන නිවැරදිව කතා කිරීමට පටන් ගත හැකිය. එමනිසා, පළමුව, HTML සම්බන්ධ න්යායික කරුණු කිහිපයක් බලමු.

HTML භාෂා ව්‍යුහය: ටැග්

HTML ලේඛනයකින් වෙබ් පිටුවක් පිළිබඳ අවශ්‍ය දත්ත බ්‍රවුසරයක් කියවන්නේ කෙසේද? හරිම සරලයි.

අත්යවශ්ය අංග මෙම භාෂාවෙන්- මේවා ටැග්. බොහෝ අවස්ථාවන්හීදී, ඒවා යුගලනය කර ඇත - විවෘත කිරීමක් ඇත, සහ වසා දැමීමක් ඇත. කලින් සඳහන් කර ඇත්තේ කෝණ වරහන් පමණක් භාවිතා කරමිනි. දෙවැන්න සමාන ය, නමුත් දෙවන වරහනට පෙර ස්ලෑෂ් එකක් ඇත - සංකේතය /. බ්රවුසරයට ඒවා හඳුනා ගැනීමට හැකි වන අතර, එම නිසා ලේඛන සංවර්ධකයා විසින් නිර්මාණය කරන ලද ඇල්ගොරිතම වලට අනුකූලව කිසිදු ගැටළුවක් නොමැතිව වෙබ් පිටු වල අන්තර්ගතය පෙන්වයි.

ආරම්භක ටැගය සාමාන්‍යයෙන් විශාල අකුරු වලින් ලියා ඇත, වසා දැමීමේ ටැගය කුඩා අකුරු වලින්. මෙය තොරතුරු තාක්ෂණ විශේෂඥයින් අතර ස්ථාපිත වී ඇති සම්මතයකි. බ්‍රවුසරය, ඇත්ත වශයෙන්ම, ඕනෑම අකුරකින් HTML විධානය හඳුනා ගනී, නමුත් වෙබ් සංවර්ධකයින්ට තවමත් සලකුණු කළ ටැග් ලිවීමේ ක්‍රමයට අනුගත වීමට උපදෙස් දෙනු ලැබේ. මෙය වෙනත් විශේෂඥයින් සඳහා වෙබ් පිටුව වැඩිදියුණු කිරීම පහසු කරනු ඇත.

ගුණාංග

HTML භාෂාවේ අනෙකුත් වැදගත් අංග වන්නේ attributes වේ. ඔවුන්ගේ උපකාරයෙන්, වෙබ් පිටුවක නිර්මාතෘවරයාට අන්තර්ගතයේ ගුණාංග සැකසිය හැකිය - නිදසුනක් ලෙස, අකුරු උස, එහි වර්ණය, පිටුවට සාපේක්ෂව පිහිටීම. පින්තූර, වීඩියෝ සහ අනෙකුත් බහුමාධ්ය සංරචක සඳහාද එයම වේ. ආරම්භක ටැගය තුළ ගුණාංග ලියා ඇත.

අන්තර්ගතය

විවෘත කිරීම සහ වසා දැමීමේ ටැග් අතර වෙබ් පිටුවක මීළඟ ප්‍රධාන අංගය-අන්තර්ගතය පවතී. මෙය ඇත්ත වශයෙන්ම, තිරයේ පරිශීලකයා ඉදිරිපිට ප්රදර්ශනය කළ යුතු අන්තර්ගතයයි. මෙය පෙළ, සබැඳියක්, පින්තූරයක්, වීඩියෝවක් හෝ වෙනත් බහුමාධ්‍ය අංගයක් විය හැකිය.

වෙබ් පිටු මූලද්‍රව්‍ය

“එබැවින් වෙබ් පිටුවක ප්‍රධාන අංග ලැයිස්තුගත කරන්න, අවසාන වශයෙන්!” - ගුරුවරයා නැවත කියනවා. “සතුටෙන්,” අපි ඔහුට පිළිතුරු දෙමු. සලකා බලනු ලබන ලේඛන වර්ගයේ ව්යුහයේ ඇතුළත් වන්නේ කුමක්ද? වෙබ් පිටුවේ HTML මූලද්‍රව්‍යවල සන්දර්භය තුළ අපි මෙම අංගය සලකා බලන බවට එකඟ වෙමු. එනම්, බ්රවුසරයේ ඔවුන්ගේ සංදර්ශකය - පරිශීලකයා තිරය මත දකින දේ - අපට අඩු වශයෙන් උනන්දුවක් දක්වනු ඇත. කාරණය නම්, වැඩසටහන එකම ආකාරයකින් අන්තර්ගතය පෙන්වන අනුරූප HTML ඇල්ගොරිතම වෙනස් විය හැකිය. තවද මෙය HTML භාෂාවේ ලක්ෂණයකි: වෙබ් පිටුවක අපේක්ෂිත රූපය පෙන්විය හැක විවිධ ක්රම. ඒ අතරම, ඒවා වෙබ් පිටු නිර්මාතෘගේ ශ්රම පිරිවැය අනුව සමාන විය හැකිය, නැතහොත් ඒවා ක්රියාත්මක කිරීම සඳහා වෙනස් උත්සාහයක් හා කාලයක් අවශ්ය වේ.

වෙබ් පිටු මූලද්‍රව්‍ය: ශීර්ෂකය

වෙබ් පිටුවක සම්මත මූලද්‍රව්‍ය, එය පුදුමයට කරුණක් ලෙස පෙනුනද, ඉතා කුඩා ප්‍රමාණවලින් ඉදිරිපත් කෙරේ. ඇත්ත වශයෙන්ම, ඒවායින් දෙකක් පමණක් ඇත - ලේඛනයේ මාතෘකාව සහ ප්රධාන කොටස. ඒ අතරම, ඒ සෑම එකක්ම තරමක් සංකීර්ණ ව්‍යුහයක් තිබිය හැකිය.

මාතෘකාවේ විශේෂතා මොනවාද? එය වෙබ් පිටුවේ ඉහලින්ම පිහිටා ඇත. ශීර්ෂකය සාදන HTML කේතය සාමාන්‍යයෙන් පෙළ "සංකේතනය" කිරීමට අදහස් කරයි, නමුත් අවශ්‍ය නම්, කුඩා ග්‍රැෆික් ඇතුළු කිරීම් ද අනුරූප මූලද්‍රව්‍යයේ තැබිය හැකිය. ඇත්ත වශයෙන්ම, මාතෘකාව ගැන කිව හැක්කේ එපමණයි. අනුරූප ලේඛනයේ ව්යුහය තුළ එහි භූමිකාව නොවැදගත් බව පෙනේ. නමුත් එය සත්‍ය නොවේ. සෙවුම් යන්ත්‍රවල අඩවි සුචිගත කිරීමේ දෘෂ්ටි කෝණයෙන් වෙබ් පිටු මාතෘකා ඉතා වැදගත් වේ - Yandex, Google. මෙම අංගය වෙබ් පිටුවේ අන්තර්ගතයට මෙන්ම වෙබ් අඩවියේ තේමාත්මක විශේෂතාවලට සම්පූර්ණයෙන්ම අදාළ විය යුතුය.

HTML භාවිතයෙන් වෙබ් පිටුවක මාතෘකාව ග්‍රහණය කර ගන්නේ කෙසේද? හරිම සරලයි. පළමුව, ආරම්භක ටැගය ලියා ඇත, එය සැමවිටම කෝණ වරහන් සහිත HEAD ලෙස පෙනේ, පසුව ශීර්ෂයේ අන්තර්ගතය, පසුව වසා දැමීමේ ටැගය. ඒවා ලියා ඇත්තේ, ඇත්ත වශයෙන්ම, වෙබ් ලේඛනයේ ඉහළම ස්ථානයේ ය.

වෙබ් ලේඛනයක මාතෘකාවට අමතර අංග ගණනාවක් ඇතුළත් විය හැක. සමහර විට වෙබ් පිටුවක ආකෘතියට නිශ්චිත කේතීකරණයකින් පෙළ පෙන්වීමට අවශ්‍ය විය හැක. ඔබේ වෙබ් ලේඛනය මෙම නිර්ණායකය සපුරාලන බව සහතික කර ගන්නේ කෙසේද? හරිම සරලයි. HTML ඇල්ගොරිතම ලේඛන ශීර්ෂ ව්‍යුහය තුළ තැබිය යුතු අතර, විශේෂිත භාෂා කේතනයක් භාවිතා කිරීමට බ්‍රවුසරයට උපදෙස් දෙයි - උදාහරණයක් ලෙස, සිරිලික්. අනුරූප විධාන META ටැගය තුළ තබා ඇත, අනෙක් ඒවා මෙන්, විවෘත කිරීම සහ වසා දැමීම කළ හැකිය.

වෙබ් පිටුවේ ප්‍රධාන කොටස

වෙබ් ලේඛනයේ ප්‍රධාන කොටස BODY ටැගය සමඟ විවෘත වන අතර ස්ලෑෂ් ඇතුළුව අනුරූප මූලද්‍රව්‍යය සමඟ වසා දමයි. එපමනක් නොව, විවෘත සහ වසා දැමීමේ ටැග් අතර අතිරේක අධිපෙළ සලකුණු භාෂා විධාන විශාල සංඛ්යාවක් තිබිය හැක. මෙයට හේතුව වෙබ් පිටුවේ ප්‍රධාන කොටස එහි ප්‍රයෝජනවත් අන්තර්ගතයන් අඩංගු වීමයි - පෙළ, සබැඳි, ග්‍රැෆික්ස්, වීඩියෝ, පිරවීම සඳහා විවිධ ආකෘති.

සෑම අනුරූප අන්තර්ගත වර්ගයකටම තමන්ගේම ටැග් ඇත. වෙබ් ලේඛනයක ප්‍රධාන කොටසෙහි ව්‍යුහයේ HTML විධාන අඩංගු විය හැක, ඒවා පෙළ හැඩතල ගැන්වීමට ද භාවිතා කරයි - නිදසුනක් ලෙස, අකුරු වලට යම් වර්ණයක්, ප්‍රමාණය සහ වෙනත් ගුණාංග ලබා දීම.

සාමාන්‍යයෙන් භාවිතා වන HTML ටැග් කිහිපයක විශේෂතා බලමු. ඇත්ත වශයෙන්ම, ඒවා වෙබ් පිටුවක ප්රධාන අංගයන් සාදයි.

මූලික HTML ටැග්

එබැවින්, වෙබ් පිටුවක මූලද්‍රව්‍ය මොනවාද යන්න විස්තරාත්මකව අධ්‍යයනය කිරීම සඳහා, මූලික HTML ටැග් වල සාරය වඩාත් විස්තරාත්මකව අධ්‍යයනය කරමු. අපි දැනටමත් ඒවායින් සමහරක් ඉහත ලබා දී ඇත - විශේෂයෙන් බ්‍රවුසරය වෙබ් පිටු වල ශීර්ෂ කියවන සහ ලේඛනයේ ප්‍රධාන කොටස පිහිටා ඇත්තේ කොතැනද යන්න තීරණය කරන ආධාරයෙන්.

P ටැගය ඉතා සුලභ වේ, එය, අධිපෙළ සලකුණු භාෂාවේ අනෙකුත් සමාන මූලද්‍රව්‍ය මෙන්, විවෘත කිරීම සහ වැසීම විය හැක. ලේඛනයක තනි ඡේදයක් ආකෘතිකරණය කිරීමට මෙම ටැගය ඔබට ඉඩ සලසයි. උදාහරණයක් ලෙස, ඔබට ඒ සඳහා නිශ්චිත අකුරු වර්ගයක් හෝ වර්ණයක් සැකසිය හැක. කෙසේ වෙතත්, මෙය සිදු කරනු ලබන්නේ අතිරේක ටැගයක් භාවිතා කරමිනි - FONT. මෙම අවස්ථාවෙහිදී, එය ඡේදයේ මායිම් සලකුණු කරන එකක් තුළ තබනු ඇත - මෙය වෙබ් පිටුවේ අනෙකුත් අංග වෙත බෙදා හැරීමෙන් කැමති අකුරු වර්ගය පිළිබිඹු කරන HTML විධානය වලක්වනු ඇත.

TABLE ටැගය භාවිතයෙන් වගු නිර්මාණය කර ඇත. අනුරූප ගුණාංග භාවිතා කරමින්, ඔබට අවශ්‍ය තීරු සහ පේළි ගණන තීරණය කළ හැකිය, ඒවායේ පළල, නිශ්චිත මායිම්, ප්‍රමාණය සහ වගුවේ අකුරු වර්ණය සැකසිය හැකිය.

බ්රවුසරය මගින් පින්තූර සැකසීම සඳහා වගකීම දරයි. රූපයේ ප්‍රමාණය සහ පිටුවේ පිහිටීම නියාමනය කරන විවිධ ගුණාංග ඔබට එහි තැබිය හැකිය.

වෙනත් වෙබ් ලේඛන හෝ ලිපිගොනු වෙත සබැඳි A ටැගය භාවිතයෙන් දක්වා ඇත. රීතියක් ලෙස, වෙබ් පිටුවේ ව්‍යුහයේ අධි සබැඳියක් ඇති බව පෙන්නුම් කරන ගුණාංග එහි ඇත. මෙම අවස්ථාවේදී, එය යොමු කරන ලේඛනය, ගොනුව හෝ වෙබ් අඩවිය දක්වා ඇත.

පොදු ටැගය FRAMESET වේ. එහි ආධාරයෙන්, ඔබට වෙබ් පිටුවක අවකාශය ප්රදේශ කිහිපයකට බෙදිය හැකිය - රාමු. ඒ සෑම එකක් තුළම ඔබට වෙනම වෙබ් ලේඛන භාවිතා කළ හැකිය. එනම්, රාමු මඟින් ඔබට එකවර පිටු දෙකක් හෝ කිහිපයක් එක් තිරයක නිවැරදිව ස්ථානගත කිරීමට ඉඩ සලසයි.

වෙබ් පිටු වල ප්‍රධාන අංග පිළිබඳ කතාවක් සහ HTML භාෂාව භාවිතයෙන් ඒවා හැඩතල ගැන්වීමේ මාධ්‍යයන් පිළිබඳ ඊළඟ කතාව - ආසන්න වශයෙන් මෙය පරීක්ෂකවරයා අපෙන් ඇසූ ප්‍රශ්නයට අපගේ පිළිතුර සඳහා ඇල්ගොරිතම වනු ඇත. "වෙබ් පිටුවක ප්‍රධාන අංග ලැයිස්තුගත කරන්න" යනුවෙන් ඔහු අප වෙත පැමිණියේ නම්, සුදුසු ක්‍රමවේදය භාවිතා කරමින්, මාතෘකාව අනාවරණය කර ගැනීමට අපට සෑම අවස්ථාවක්ම ලැබෙනු ඇත. එනම්, “මූලද්‍රව්‍ය” යන යෙදුමෙන් අපට වෙබ් ලේඛනයක ව්‍යුහයේ ප්‍රධාන සංරචක හෝ HTML භාෂාව වැනි මෙවලමක් භාවිතයෙන් වෙබ්මාස්ටර් උත්පාදනය කරන අන්තර්ගත වර්ග - පෙළ, පින්තූර, වගු, රාමු, සබැඳි තේරුම් ගත හැකිය. .

වෙබ් සංවර්ධන මෙවලම්වල විශේෂතා

පවසා ඇති දේට අමතරව, HTML ප්‍රමිති මගින් සපයන ලද ටැග් සහ ගුණාංග විශාල ප්‍රමාණයක් ඇති බව අපට පැහැදිලි කළ හැකිය. HTML වලට අමතරව, වෙබ් සංවර්ධකයින්ට අධිපෙළ ලේඛන සඳහා අතිරේක ආකෘතිකරණ මෙවලම් භාවිතා කළ හැකිය. උදාහරණයක් ලෙස, සමඟ JavaScript භාවිතා කරමින්ඔබට ගතික වෙබ් පිටු නිර්මාණය කළ හැකිය - එනම්, අන්තර්ගතය නිරන්තරයෙන් යාවත්කාලීන වන ඒවා (පරිශීලකයාගේම ක්‍රියාවන් නිසා සහ ස්ක්‍රිප්ට් වල කලින් ලියා ඇති ඇල්ගොරිතම වලට අනුකූලව).

වෙබ් සංවර්ධකයෙකුට ඔහුගේ කාර්යයේදී සම්පූර්ණ ක්‍රමලේඛන භාෂා භාවිතා කළ හැකි බව එකතු කිරීම ප්‍රයෝජනවත් වනු ඇත, උදාහරණයක් ලෙස, පර්ල්, පීඑච්පී, ජාවා, පයිතන් වැනි, හයිපර් ටෙක්ස්ට් ලේඛන සමඟ වැඩ කිරීමේ හැකියාව ඇති කරයි. ඊටත් වඩා පුළුල්. අද වන විට වෙබ් තාක්ෂණයන් භාවිතා කරන ක්ෂේත්‍ර බෙහෙවින් වෙනස් වීම මේ සඳහා අවශ්‍යතාවය විය හැකිය. නවීන සංවර්ධකයින් මුහුණ දෙන අභියෝග තරමක් සංකීර්ණ විය හැකිය. උදාහරණයක් ලෙස, සමහර විට රුසියානු භාෂාවෙන් ලියා ඇති වෙබ් පිටු ඉංග්රීසි භාෂාවට පරිවර්තනය කිරීම අවශ්ය වේ. මෙම අවස්ථාවේදී, සංවර්ධකයාගේ මෙවලම් ඉතා විවිධාකාර වනු ඇත.

කාර්යයේ අරමුණ: HTML භාෂාවේ මූලික සංකල්ප, HTML ලේඛනයක ව්‍යුහය, අනිවාර්ය ටැග්, අදහස්, පෙළ හැඩතල ගැන්වීමේ ක්‍රම, භෞතික හා තාර්කික ශෛලීන්, සරල ස්ථිතික වෙබ් ලේඛන නිර්මාණය කිරීමේ කුසලතා ලබා ගැනීම වැනි දේ සිසුන්ට හුරු කරවීම.

රසායනාගාර පන්ති වලදී, අපි HTML ගොනු සකස් කිරීමට Notepad පෙළ සංස්කාරකය භාවිතා කරන්නෙමු, සිදු කර ඇති දේ නිරීක්ෂණය කිරීම සඳහා මෙවලමක් ලෙස Internet Explorer බ්‍රවුසරය භාවිතා කරන්නෙමු.

න්යායික තොරතුරු

මූලික සංකල්ප

අධිපෙළ- ඔබට එක් මූලද්‍රව්‍යයකින් තවත් මූලද්‍රව්‍යයකට පහසුවෙන් සංක්‍රමණය විය හැකි ආකාරයෙන් පරිගණක තිරයක පෙළ මූලද්‍රව්‍ය අතර අර්ථකථන සම්බන්ධතා ඇති කර ගැනීමට ඔබට ඉඩ සලසන තොරතුරු ව්‍යුහයකි. ප්‍රායෝගිකව, අධිපෙළේදී, සමහර වචන වෙනත් වර්ණයකින් (අධිසබැඳි) යටින් ඉරි ඇඳීමෙන් හෝ වර්ණ ගැන්වීමෙන් උද්දීපනය කෙරේ. වචනයක් උද්දීපනය කිරීමෙන් මෙම වචනය සහ උද්දීපනය කරන ලද වචනය හා සම්බන්ධ මාතෘකාව වඩාත් විස්තරාත්මකව සාකච්ඡා කෙරෙන සමහර ලේඛන අතර සම්බන්ධයක් පෙන්නුම් කරයි. HTML ආකෘතියෙන් ලියා ඇති වෙනම ලේඛනයක් ලෙස හැඳින්වේ:

HTML ලේඛනය;

වෙබ් ලේඛනය;

වෙබ් පිටුව.

එවැනි පිටු සාමාන්යයෙන් NTM හෝ HTML ආකෘතියෙන් ඇත.

එක් කර්තෘකට හෝ එක් IEDV ශරීරයකට අයත් වෙබ් පිටු සමූහයක් සහ පොදු අධි සබැඳි මගින් අන්තර් සම්බන්ධිත වෙබ් නෝඩයක් හෝ වෙබ් අඩවියක් ලෙස ව්‍යුහයක් සාදයි. සෑම HTML පිටුවකටම ආවේණික URL එකක් ඇත - පිcඅන්තර්ජාලයේ.

රාමුව (රාමුව) - අර්ථ දෙකක් ඇති පදයක්. පළමු අගය වන්නේ එහිම අනුචලන තීරු සහිත ලේඛන ප්රදේශයයි. දෙවැන්න සජීවිකරණ ග්‍රැෆික් ගොනුවක (රාමු) 0DNN0H රූපයකි.

ඇප්ලට් (ඇපල්ට්) - වැඩසටහනක් සේවාදායක පරිගණකයට වෙනම ගොනුවක් ලෙස මාරු කර වෙබ් පිටුවක් බැලීමේදී දියත් කරනු ලැබේ.

පිටපත (පිටපත) , හෝ ස්ක්‍රිප්ට් යනු වෙබ් පිටුවක එහි හැකියාවන් පුළුල් කිරීම සඳහා ඇතුළත් කර ඇති වැඩසටහනකි. ඇතැම් අවස්ථාවලදී, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් බ්‍රවුසරය පණිවිඩය පෙන්වයි: "පිටුවෙහි ස්ක්‍රිප්ට් ක්‍රියාත්මක කිරීමට ඉඩ දෙන්න?" මෙහිදී අප අදහස් කරන්නේ scripts යන්නයි.

CGI (පොදු දොරටුව අතුරුමුහුණත) - සේවාදායකයක වැඩ කරන වැඩසටහන් සඳහා පොදු නමක්, වෙබ් පිටු වල හැකියාවන් පුළුල් කිරීමට ඔබට ඉඩ සලසයි. එවැනි වැඩසටහන් නොමැතිව අන්තර්ක්‍රියාකාරී වෙබ් පිටු නිර්මාණය කළ නොහැක.

බ්‍රව්සරය (බ්රවුසරය) - වෙබ් පිටු බැලීම සඳහා වැඩසටහනක්.

මූලද්රව්යය- HTML භාෂා නිර්මාණය. ඔබට එය දත්ත රඳවා තබා ඇති බහාලුමක් ලෙස සිතිය හැකි අතර එය යම් ආකාරයකට සංයුති කිරීමට ඔබට ඉඩ සලසයි. ඕනෑම වෙබ් පිටුවක් යනු මූලද්‍රව්‍ය සමූහයකි. හයිපර් ටෙක්ස්ට් හි එක් ප්‍රධාන අදහසක් වන්නේ මූලද්‍රව්‍ය කූඩු කිරීමේ හැකියාවයි. උදාහරණ වශයෙන්:

<Начало элемента>මූලද්‍රව්‍යයේ අන්තර්ගතය, මූලද්‍රව්‍ය හැඩතල ගන්වන දත්ත

ටැග් කරන්න(ඉංග්‍රීසි ටැගයෙන් - ලේබලය, විස්තරය, ලේබලය) - මූලද්‍රව්‍යයක ආරම්භක හෝ අවසන් සලකුණ. ටැග් මගින් මූලද්‍රව්‍යවල ක්‍රියාකාරීත්වයේ මායිම් නිර්වචනය කරන අතර මූලද්‍රව්‍ය එකිනෙකින් වෙන් කරයි. වෙබ් පිටුවක පෙළ තුළ, ටැග් කෝණ වරහන් තුළ කොටා ඇත< >, සහ අවසාන ටැගය සෑම විටම ස්ලෑෂ් එකක් අනුගමනය කරයි. මෙම වරහන් අතර නොවන පෙළ (< >), බ්‍රවුසරයක් තුළ බලන විට සම්පූර්ණයෙන්ම දෘශ්‍යමාන වේ. උදාහරණ වශයෙන්:

<Начальный тег>මූලද්රව්යයේ අන්තර්ගතය, දත්ත බව

මූලද්රව්යයක් ආකෘතිකරණය කරයි

<Р>මෙම පාඨය වෙනම ඡේදයක පිහිටා ඇත

ඕනෑම වෙබ් පිටුවක් යනු මූලද්‍රව්‍ය සමූහයකි. HTML හි මූලික මූලධර්මවලින් එකක් වන්නේ එක් මූලද්‍රව්‍යයක් තුළ තවත් මූලද්‍රව්‍යයක් කැදවා ගැනීමේ හැකියාවයි.

ගුණාංගය- මූලද්රව්යයක පරාමිතිය හෝ දේපල. උපලක්ෂණ ආරම්භක ටැගය තුළ පිහිටා ඇති අතර අවකාශයන් මගින් එකිනෙකින් වෙන් කරනු ලැබේ. සිමෙන්තිවල පෙළ අඩංගු නම්, ගුණාංගවලට අකුරු වර්ණය සහ ප්‍රමාණය, පෙළගැස්ම සැකසිය හැක. පෙළ ඡේදයසහ යනාදි. මූලද්‍රව්‍යයේ පින්තූරයක් තිබේ නම්, ගුණාංගවලට පින්තූරයේ ප්‍රමාණය, පින්තූරය වටා ඇති රාමුවක පැවැත්ම සහ ප්‍රමාණය ආදිය දැක්විය හැකිය.

<Р align="center">මෙම පෙළ තිරයේ මැදට පෙළගස්වනු ඇත

මෙම උදාහරණය නැවතත් ඡේදයක ආරම්භය සහ අවසානය නිර්වචනය කරන ටැගයක් භාවිතා කරයි. කෙසේ වෙතත්, ආරම්භක ටැගය තුළ පෙළගැස්වීමේ ගුණාංගයක් අඩංගු වන අතර, එය තිරයේ මැදට පෙළ පෙළගැස්ම සකසයි.

සටහන:

ඕනෑම ප්‍රයෝජනවත් තොරතුරක් එහි ආකෘතිය දැක්වෙන ආරම්භක සහ අවසන් ටැග් අතර දිස්විය යුතුය;

සියලුම ගුණාංග ආරම්භක ටැගය තුළ පිහිටා ඇත;

භාවිතයේ පහසුව සඳහා, ඔබට ආරම්භක ටැගය ලොකු අකුරු (කැපිටල්) අකුරකින් (P) ලිවිය හැකිය, සහ අවසාන ටැගය කුඩා (කුඩා) අකුරකින් (/p) ලිවිය හැකිය, මෙය අවශ්‍ය නොවේ.

සියලුම මූලද්‍රව්‍ය සඳහා අවසන් (වසා දැමීමේ) ටැගයක් අවශ්‍ය නොවේ;

සෑම නව අංගයක්ම නව පේළියක ලිවීම ආරම්භ කරන්න. ඉන්ඩෙන්ට් කැදැලි මූලද්‍රව්‍ය (ටැබ්). මෙය නැවතත් අවශ්ය නොවේ, නමුත් එය ඔබගේ කාර්යය වඩාත් පහසු කරනු ඇත.

වෙබ් පිටුවක් යනු පෙළ, ග්‍රැෆික්ස්, අධිසබැඳි, ශ්‍රව්‍ය, සජීවිකරණ සහ වීඩියෝ ඇතුළත් කළ හැකි විශේෂයෙන් ආකෘතිගත ලේඛනයකි.

පොදු තේමාවක්, සැලසුමක් සහ සබැඳි බෙදා ගන්නා සහ සාමාන්‍යයෙන් එකම වෙබ් සේවාදායකයේ වාසය කරන වෙබ් පිටු කිහිපයක් වෙබ් අඩවියක් සාදයි.

වෙබ් අඩවිය (ඉංග්‍රීසියෙන්. වෙබ් අඩවිය: වෙබ්- "වෙබ්, ජාලය" සහ අඩවිය- "ස්ථානය", වචනාර්ථයෙන් "ස්ථානය, කොටස, ජාලයේ කොටසක්") - එකතුවකි ඉලෙක්ට්රොනික ලේඛනපුද්ගලයෙකුගේ හෝ සංවිධානයක (ගොනු). පරිගණක ජාලය, එක් ලිපිනයක් (වසම් නාමය හෝ IP ලිපිනය) යටතේ එක්සත් වේ.

සියලුම වෙබ් අඩවි එකට සාදයිවිශ්ව විසිරි වියමන, සන්නිවේදනය (වෙබ්) ලෝක ප්‍රජාවේ තොරතුරු කොටස් තනි සමස්තයක් බවට ඒකාබද්ධ කරයි - දත්ත සමුදායක් සහ ග්‍රහලෝක පරිමාණයෙන් සන්නිවේදනය. සේවාදායකයන් මත සේවාදායක අඩවි වෙත සෘජු ප්‍රවේශය සඳහා ප්‍රොටෝකෝලයක් විශේෂයෙන් සකස් කරන ලදී HTTP .

යම් මාතෘකාවක් හෝ ගැටලුවක් පිළිබඳ තොරතුරු අඩංගු සඟරාවක් මෙන් වෙබ් අඩවියක් ව්‍යුහගත කර ඇත. සඟරාවක් මුද්‍රිත පිටු වලින් සමන්විත වන්නා සේම වෙබ් අඩවියක් පරිගණක වෙබ් පිටු වලින් සමන්විත වේ.

වෙබ් පිටුවක් පෙන්වන වැඩසටහන වෙබ් බ්‍රව්සරයක් ලෙස හැඳින්වේ.

වෙබ් අඩවි නිර්මාණය කර ඇත්තේ අධිපෙළ ලේඛන සලකුණු භාෂාව HTML භාවිතා කරමිනි. HTML තාක්‍ෂණය සාමාන්‍ය පෙළ ලේඛනයකට පාලන අක්ෂර (ටැග්) ඇතුළත් කිරීමෙන් සමන්විත වන අතර එහි ප්‍රතිඵලයක් ලෙස අපට වෙබ් පිටුවක් ලැබේ. බ්රවුසරය, වෙබ් පිටුවක් පූරණය කරන විට, ටැග් මගින් නිශ්චිතව දක්වා ඇති පෝරමයේ තිරය මත එය ඉදිරිපත් කරයි.

HTML ඔබට ඉඩ දෙන්නේ:

· ආකෘති පෙළ;

· ලේඛනයේ පින්තූර සහ බහුමාධ්ය ඇතුළත් කරන්න;

· මෙම භාෂාව භාවිතා කරමින්, අනෙකුත් වෙබ් පිටු වෙත අධිපෙළ සබැඳි සාදනු ලැබේ.

HTML ගොනු තොරතුරු අන්තර්ගතය නිර්මාණය කිරීමට සහ වෙබ් පිටු වල ව්‍යුහය සහ ආකෘතිය නිර්වචනය කිරීමට භාවිතා කරයි. HTML ගොනු සරල පෙළ ගොනු බැවින්, එවැනි ගොනුවක් ඕනෑම පරිගණකයකට යැවිය හැක.

වෙබ් පිටු නිර්මාණය කිරීම සඳහා, නිර්මාණය කරන ලද ලේඛනයේ පෙළ හැඩතල ගැන්වීමේ පාලන අක්ෂර ඇතුළත් නොවන සරල පෙළ සංස්කාරක භාවිතා කරනු ලැබේ. වින්ඩෝස් හි එවැනි සංස්කාරකයක් ලෙස ඔබට භාවිතා කළ හැකිය සම්මත යෙදුම"සටහන් පොත".

සාමාන්‍යයෙන්, වෙබ් පිටු ගොනුවක .html හෝ .htm දිගුවක් ඇත.

මීට අමතරව, වෙබ් අඩවි නිර්මාණය කිරීමේ මූලික පියවර දැනටමත් ස්වයංක්‍රීය කර ඇති බොහෝ තාක්ෂණයන් ඇත; ඉතිරිව ඇත්තේ ඔබේ මාතෘකාවට අනුකූලව වෙනස්කම් සිදු කිරීම පමණි.

HTML පිටුවක් බැලීම සඳහා, එහි URL එක ඔබේ වෙබ් බ්‍රවුසරයේ ලිපින තීරුව තුළ ඇතුළත් කර පසුව අධි සබැඳි අනුගමනය කරන්න. නමුත් මෙය හරියටම ප්රධාන ගැටළුවයි - පිටු ලිපිනය සොයා ගන්නේ කෙසේද? බොහෝ විට සිදුවන්නේ ඔබ සොයා ගත යුතු දේ ඔබ දන්නා නමුත් හරියටම බැලිය යුත්තේ කොතැනදැයි ඔබ නොදනී. මෙම ගැටළුව විසඳීම සඳහා විශේෂ සෙවුම් යන්ත්ර තිබේ. පරිශීලකයාගේ දෘෂ්ටි කෝණයෙන්, සෙවුම් පද්ධතිය- මෙය සාමාන්‍ය වෙබ් අඩවියකි මුල් පිටුවඅනෙකුත් වෙබ් අඩවි වෙත සබැඳි අඩංගු, කාණ්ඩවලට බෙදා ඇත ("ක්‍රීඩා", "ව්‍යාපාර", "පරිගණක", ආදිය). ඊට අමතරව, සෙවුම් යන්ත්‍රය මඟින් පරිශීලකයාට මූලික වචන කිහිපයක් ඇතුළත් කිරීමට ඉඩ ලබා දෙන අතර එම මූල පද අඩංගු පිටු වෙත සබැඳි ලබා දෙයි.

වෙබ් අඩවිය

වෙබ් අඩවියක් (ඉංග්‍රීසි වෙබ් අඩවිය, වෙබ් - වෙබ් සහ වෙබ් අඩවිය - "ස්ථානය") යනු පරිගණක ජාලයක එක් ලිපිනයක් යටතේ එක්සත් වූ පුද්ගලික පුද්ගලයෙකුගේ හෝ සංවිධානයක ලේඛන එකතුවකි. පෙරනිමියෙන්, වෙබ් අඩවිය අන්තර්ජාලයේ පිහිටා ඇති බව උපකල්පනය කෙරේ. සියලුම අන්තර්ජාල වෙබ් අඩවි සාමූහිකව ලෝක ව්‍යාප්ත ජාලය සෑදී ඇත. HTTP ප්‍රොටෝකෝලය සේවාදායකයින්ට සෘජුවම සේවාදායක වෙබ් අඩවි වෙත ප්‍රවේශ වීම සඳහා විශේෂයෙන් සංවර්ධනය කරන ලදී. වෙබ් අඩවි වෙනත් ආකාරයකින් පුද්ගලයෙකුගේ හෝ සංවිධානයක අන්තර්ජාල නියෝජනය ලෙස හැඳින්වේ. ඔවුන් "අන්තර්ජාලයේ ඔබේම පිටුව" යැයි පවසන විට, එයින් අදහස් වන්නේ වෙනත් කෙනෙකුගේ වෙබ් අඩවියක කොටසක් ලෙස සම්පූර්ණ වෙබ් අඩවියක් හෝ පුද්ගලික පිටුවක්. අන්තර්ජාලයේ වෙබ් අඩවි වලට අමතරව ජංගම දුරකථන සඳහා WAP අඩවි ද තිබේ.

මුලදී, වෙබ් අඩවි ස්ථිතික ලේඛන එකතුවක් විය. වර්තමානයේ, ඒවායින් බොහොමයක් ගතිකත්වය සහ අන්තර්ක්රියාකාරිත්වය මගින් සංලක්ෂිත වේ. එවැනි අවස්ථාවන් සඳහා, විශේෂඥයන් වෙබ් යෙදුම - සූදානම් කර ඇති යෙදුම භාවිතා කරයි මෘදුකාංග පැකේජයවෙබ් අඩවි ගැටළු විසඳීමට. වෙබ් යෙදුමක් යනු වෙබ් අඩවියක කොටසකි, නමුත් දත්ත නොමැති වෙබ් යෙදුමක් තාක්ෂණික වශයෙන් වෙබ් අඩවියක් පමණි.

අන්තර්ජාලයේ බොහෝ අවස්ථාවලදී, එක් වෙබ් අඩවියක් එක් වසම් නාමයකට අනුරූප වේ. හරියටම අනුව වසම් නාමඅඩවි හඳුනාගෙන ඇත ගෝලීය ජාලය. වෙනත් විකල්ප හැකි ය: වසම් කිහිපයක එක් අඩවියක් හෝ එක් වසමක් යටතේ අඩවි කිහිපයක්. සාමාන්‍යයෙන්, විශාල වෙබ් අඩවි (වෙබ් ද්වාර) විසින් සපයනු ලබන විවිධ වර්ගයේ සේවාවන් තාර්කිකව වෙන් කිරීම සඳහා වසම් කිහිපයක් භාවිතා කරයි (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). සඳහා වෙනම වසම් වෙන් කරන අවස්ථා ද තිබේ වෙනස් රටවල්හෝ භාෂා. උදාහරණයක් ලෙස, google.ru සහ google.fr තාර්කිකව විවිධ භාෂාවලින් Google අඩවි වේ, නමුත් තාක්ෂණික වශයෙන් ඒවා විවිධ අඩවි වේ. එක් වසමක් යටතේ අඩවි කිහිපයක් ඒකාබද්ධ කිරීම සාමාන්‍ය වේ නොමිලේ සත්කාරකත්වය. අඩවි හඳුනා ගැනීමට, ලිපිනයෙහි ටිල්ඩයක් සහ ධාරකයට පසුව අඩවි නාමය අඩංගු වේ: example.com/~my-site-name/.




ඉහල