د هرې پاڼې پاڼې وګورئ او تاسو به د متن منځپانګې او انځور انځور سره یوځای وګورئ. دا دواړه عناصر د ویب پاڼې په بریالیتوب کې اړین اجزاوې دي. د متن منځپانګې هغه ځای دی چې د سایټ لیدونکي به لوستل شي او کومې سرچینې انجنونه به د دوی د درجه بندي الګوریتمونو برخه وي. انځورونه به د سایټ لپاره بصري دلچسپي اضافه کړي او د متن منځپانګې توضیح کولو کې مرسته وکړي.
ویب پاڼې ته متن او انځورونه اسانه دي. متن د معیاري HTML ټګیو سره لکه پیراگراف، سرلیکونه، او لیستونه شامل شوي، پداسې حال کې چې انځورونه په یو مخ کې د عنصر سره ځای پرځای شوي. کله چې تاسو خپل ویب پاڼه کې یو انځور اضافه کړئ، مګر، ممکن تاسو د انځور سره سم د متن فضا ولرئ، د دې سمدستي په نښه کولو لپاره (دا د اصلي HTML بڼه په HTML بکس کې اضافه شوی عکس به په براؤزر کې وړاندې کیږي). په تخنیکي توګه، دوه طریقې شتون لري چې تاسو یې د دې سیسټم ترلاسه کولی شئ، یا هم د سی ایس ایس کارول (سپارښتنه) یا د بصری لارښوونې سره په مستقیم ډول HTML کې شامل کړئ (سپارښتنې نه، ځکه چې تاسو غواړئ ستاسو د ویب پاڼې لپاره د طرز او جوړښت جلا کول).
د سی ایس ایس کارول
د پاڼه متن او انځورونو ترتیب او د براؤن په اړه د هغوی لیدلوري ډولونه څنګه راځي بدلون سمه لاره د سی ایس ایس سره ده . یوازې یاد ولرئ، ځکه چې موږ په پاڼه کې د بصري بدلون په اړه خبرې کوو (د انځور په شاوخوا کې د متن فضا جوړول)، دا پدې مانا ده چې دا د کایسډینډینډ اسټینټ پاڼې دي.
- لومړی، خپل انځور خپل ویب پاڼه کې اضافه کړئ. په یاد ولرئ چې د دې ایچ ٹی ایم څخه د بصری ځانګړتیاو لکه (د چوکۍ او لوړ ارزښتونو ارزښتونه) لرې کړئ. دا مهمه ده، په ځانګړي توګه د ځواب ورکوونکي ویب پاڼې لپاره چې د عکس اندازه به د براؤزر پر اساس توپیر ولري. ځینې سافټویرونه لکه د Adobe Dreamweaver، به د عکسونو لپاره چوکۍ او لوړ پوړ معلومات اضافه کړي، نو دا ډاډه وي چې دا معلومات د HTML code څخه لرې کړئ! په هرصورت، ډاډه شئ چې مناسبه alt متن شامل کړئ . دلته یو مثال دی چې ستاسو د HTML کود څنګه لیدل کیدی شي:
-
- د اسلوب مقاصد لپاره، تاسو کولی شئ یو ټولګي ته یو انځور اضافه کړئ. دا ټولګي ارزښت هغه څه دي چې موږ یې زموږ په CSS فایل کې کاروو. په ياد ولرئ چې دلته دلته کارول پخپله سرغړونه ده، که څه هم، د دې ځانګړي ډول لپاره، موږ د "بائیں" يا "ښي" ارزښتونو ارزښتونو څخه کار اخلو، دا په داسې حال پورې چې موږ غواړو زموږ تصوير په نښه کړئ. موږ ساده سټینګکس ښه کار کولو لپاره پیدا کوو او د نورو لپاره چې په راتلونکې کې د یوې سیمې اداره کولو لپاره اسانه وي اسانه وي، مګر تاسو کولی شئ دا کوم ټولګي ارزښت درکړو.
-
- پخپله، دا ټولګي ارزښت به هیڅ شی ونه کړي. انځور به په اتوماتيک ډول د متن بڼ ته نه وي. د دې لپاره، موږ اوس باید خپل CSS CSS ته ورسوو.
-
- ستا په شاليد پاڼه کې، تاسو اوس کولی شئ لاندې طرزالعمل اضافه کړئ:
- .غیر {
- لوټ
- ډډنگ: 0 20px 20px 0؛
- }
- هغه څه چې تاسو دلته ترسره کول د سی ایس ایس "فلوټ" ملکیت کاروي ، کوم چې انځور به د عادي سند فضا څخه وباسي (هغه طریقه چې عکس به عموما څرګندوي، د هغې لاندې لاندې متن سره متن کې شي) او دا به د کنټینر کاڼ لوري ته . هغه متن چې له هغې وروسته وروسته په HTML ټیکلیټ کې راځي سره نږدې یې لرې کړئ. موږ د ځینو ارزښتونو ارزښتونه هم اضافه کړل ترڅو دا متن به په مستقیمه توګه د عکس خلاف نه وي. پرځای یې، دا به ډیر ښه فاصله ولري چې د پاڼې په ډیزاین کې به په زړه پوري ښکیل وي. په سی ایس ایس کټارډ کې د ډډنګ لپاره، موږ د عکس د پورته او ښي خوا ته 0 ارزښتونه، او 20 بکسونه یې د ښي او ښکته لور ته اضافه کړل. په یاد ولرئ، تاسو اړتیا لرئ چې ځینې بڼې یې د ښي بڼې عکس ښي خوا ته اضافه کړئ. یو ښیګړی انځور (کوم چې موږ به په یو ساعت کې وګورو) به یې د پښې په ښي خوا کې کارول کیده.
- که تاسو خپل ویب پاڼې په یوه برنر کې وګورئ، نو تاسو باید دا وګورئ چې ستاسو انځور د پاڼې لاسي خوا ته اوښتی دی او په متن کې په ښه توګه وټاکل کیږي. بله خبره دا ده چې دا دا انځور دی چې "ښي لور ته" پورته شوی.
- که تاسو غواړئ دا عکس بدل کړئ سمه ته سمون سره (لکه د عکس مثال چې د دې مقالې سره ملګری شوی)، دا به ساده وي. لومړی، تاسو باید ډاډ ترلاسه کړئ چې، د اندازې سربیره موږ یوازې "بائیں" د ټولګي ارزښت لپاره زموږ CSS ته اضافه کړه، موږ هم د حق په مسیر کې یو. دا به داسې ښکاري:
- سمه {
- فلوټ: حق؛
- ډډنگ: 0 0 20px 20px؛
- }
- تاسو کولی شئ وګورئ چې دا لومړنی سیسټم دی چې موږ یې لیکلي. یوازینی توپیر هغه هغه ارزښت دی چې موږ یې د "فلوټ" ملکیت لپاره کاروو او د ګنډلو ارزښتونه چې موږ یې کاروو (د ښي ځای پرځای یې زموږ د انځور ښي لور ته اضافه کول).
- بالاخره، تاسو به د "بائیں" څخه ستاسو د HTML کې "ښی" ته د انځور ټولګي ارزښت بدل کړئ:
-
- اوس په برنر کې خپل مخ وګورئ او ستاسو انځور باید د متن سره سم په سمه توګه د هغې شاوخوا څراغونه لرې شي. موږ د دې دواړو روشونو، "بڼ" او "سمه" دواړه د خپلو سټیلیلټونو لپاره اضافه کوو ترڅو د دې بصری ډولونو څخه کار واخلو کله چې موږ ویب پاڼې جوړې کړو. دا دوه ډوله ښکاري، د بیا د راښکونکي وړ ځانګړتیاوې راځي چې هر کله چې موږ اړتیاوو ته اړتیا لرو کله چې د دوی شاوخوا شاوخوا متن ویرول شي.
د CSS په ځای د HTML استعمالول (او ولې دا کار نه کوئ)
که څه هم دا امکان لري چې د HTML سره د انځور په شاوخوا کې متن ولټوئ، ویب سټنډرډ لیکي چې سی ایس ایس (او پورته پورته وړاندیزونه) د تګ لاره ده ترڅو موږ د جوړښت (HTML) او سټایل (CSS) جلا کول وساتو. دا په ځانګړې توګه مهمه ده کله چې تاسو په پام کې ونیسئ، د ځینو وسیلو او لیږدونو لپاره، دا متن ممکن د انځور شاوخوا شاوخوا وهلو ته اړتیا نلري. د کوچنیو اسڪرينونو لپاره، د ځواب ورکوونکي ویب پاڼې ترتیب ممکن وي چې متن په حقیقت کې د انځور لاندې ښکاریږي او تصویر د سکرین بشپړ چوکۍ غزوي. دا په آسانۍ سره د رسنیو پوښتنو سره ترسره کیږي که ستاسو شاليدونه د خپل HTML مارک اپ څخه جلا وي. د نن ورځ ډیری آلې نړۍ کې، چیرې انځورونه او متن به د مختلفو لیدونکو او مختلفو اسڪرينونو لپاره په مختلف ډول ښکاره شي، دا جلا کول د ویب پاڼې اوږد مهاله بریالیتوب او مدیریت لپاره اړین دي.