Skip to content

Commit 36f2def

Browse files
d3j1xd3j1x
authored
Merge pull request #32 from d3j1x/main
ب. ما الفرق بين المسارات المطلقة Absolute paths والنسبية Relative pat…
2 parents 9f3ab15 + 5b34242 commit 36f2def

2 files changed

Lines changed: 102 additions & 4 deletions

File tree

‎basic/basic18.html‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,111 @@ <h5>ما هو السلوك الافتراضي عند عدم تعيين "هدف"
8989
</section>
9090

9191
<section id="2">
92-
<h3>ب. ما الفرق بين المسارات المطلقة Absolute والنسبية Relative ؟</h3>
92+
<h3>ب. ما الفرق بين المسارات المطلقة Absolute paths والنسبية Relative paths ؟</h3>
93+
<p>المسار <strong>A path</strong> هو سلسلة نصية <em>string</em> تحدد موقع ملف أو مجلد في نظام الملفات <em>file system</em> . في تطوير الويب، تتيح المسارات <em>paths</em> للمطورين ربط موارد مثل الصور، وأوراق الأنماط <em>stylesheets</em>، والبرامج النصية <em>scripts</em>، وصفحات الويب الأخرى. هناك مسارات مطلقة Absolute ونسبية Relative، وكلاهما أساسي <em>essential</em> لتحديد مواقع الملفات داخل نظام الملفات. دعونا نلقي نظرة على المسارين لتحديد أيهما نستخدم ومتى.</p>
94+
<p>المسار المطلق <strong>An absolute path</strong> هو رابط كامل لمورد <em>resource</em>. يبدأ من الدليل الجذر <em>root directory</em>، ويتضمن جميع الأدلة الأخرى <em>other directory</em>، وأخيرًا اسم الملف <em>filename</em> وامتداده <em>extension</em>. يشير "الدليل الجذر" root directory إلى الدليل الأعلى <em>the top-level directory</em> أو المجلد الأعلى مستوى في التسلسل الهرمي <em>hierarchy</em>.</p>
95+
<p>يتضمن المسار المطلق <em>absolute path</em> أيضًا البروتوكول <strong>protocol</strong> - والذي قد يكون <code class="br">http</code> أو <code class="br">https</code> و الملف <code class="br">file</code> واسم النطاق domain name إذا كان المورد موجودًا على الويب <em>web</em>.</p>
96+
97+
<h4>إليك مثال على مسار مطلق absolute path يرتبط بشعار HTMLverse:</h4>
98+
99+
<div class="sourcecode">
100+
<pre><span>code <br></span><code>
101+
&lt;a href="https://arabiverse.github.io/HTMLverse/favicon.png"&gt;HTMLverse شعار&lt;/a&gt;
102+
</code></pre>
103+
</div>
104+
105+
<p>في هذا المثال، البروتوكول هو <code class="br">https</code>، واسم النطاق هو <code class="br">arabiverse.github.io</code>، واسم الملف هو <code class="br">favicon.png</code>.</p>
106+
<p>الآن، ماذا لو كان المورد <em>resource</em> الذي تريد ربطه باستخدام مسار مطلق <em>absolute path</em> موجودًا على جهازك المحلي <strong>local machine</strong> ؟</p>
107+
108+
<h4>إليك كيفية ربط ملف <code class="br">about.html</code> بمسار مطلق absolute path:</h4>
109+
110+
<div class="sourcecode">
111+
<pre><span>code <br></span><code>
112+
&lt;p&gt;
113+
اقرأ المزيد عن
114+
&lt;a href="/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html"&gt;
115+
صفحة "حول"
116+
&lt;/a&gt;
117+
&lt;/p&gt;
118+
</code></pre>
119+
</div>
120+
121+
<p>يبدو الأمر هكذا لأننا ندخل إلى مجلد باسم "المستخدمون" <code class="br">Users</code>، ثم إلى مجلد باسم "المستخدم" <code class="br">user</code>، ثم إلى مجلد باسم "سطح المكتب" <code class="br">Desktop</code>، ثم إلى مجلد باسم "اف.سي.سي" <code class="br">fCC</code>، ثم إلى مجلد باسم "رمز البرنامج النصي" <code class="br">script-code</code>، ثم إلى مجلد باسم "المسارات المطلقة مقابل النسبية" <code class="br">absolute-vs-relative-paths</code>، ثم إلى مجلد باسم "الصفحات" <code class="br">pages</code>، لنحصل أخيرًا على ملف <code class="br">about.html</code>.</p>
122+
123+
<h4>هكذا يبدو عنوان URL المطلق في شريط عناوين المتصفح browser address bar:</h4>
124+
125+
<div class="sourcecode">
126+
<pre><code>
127+
file:///Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/about.html
128+
</code></pre>
129+
</div>
130+
131+
<p>يتضمن عنوان <strong>URL</strong> البروتوكول <code class="br">//:file</code>. كما يتضمن المسار، الذي يبدو كالتالي: <code class="long-code br">/Users/user/Desktop/fCC/script-code/absolute-vs-relative-paths/pages/</code>، ويمثل سلسلة المجلدات المؤدية إلى الملف. وأخيرًا، يتضمن أيضًا ملف <code class="br">about.html</code>، وهو اسم الملف <em>filename</em> وامتداده <em>extension</em>.</p>
132+
133+
<p>الآن، لنلقِ نظرة على المسار النسبي <strong>Relative path</strong>. يُحدد المسار النسبي <em>Relative path</em> موقع الملف بالنسبة لمجلد الملف الحالي. لا يتضمن البروتوكول <em>protocol</em> أو اسم النطاق <em>domain name</em>، مما يجعله أقصر <em>shorter</em> وأكثر مرونة <em>more flexible</em> للروابط الداخلية <em>internal links</em> ضمن الموقع نفسه.</p>
134+
135+
<h4>إليك مثال على ربط صفحة <code class="br">about.html</code> بصفحة <code class="br">contact.html</code>، وكلاهما في نفس المجلد:</h4>
136+
137+
<div class="sourcecode">
138+
<pre><code>
139+
&lt;p&gt;
140+
اقرأ المزيد عن
141+
&lt;a href="about.html"&gt;
142+
صفحة "حول"
143+
&lt;/a&gt;
144+
&lt;/p&gt;
145+
</code></pre>
146+
</div>
147+
148+
<p>تخيّل أنك في صفحة <code class="br">contact.html</code>، ولأن صفحة <code class="br">about.html</code> موجودة في نفس المكان، ستحصل ببساطة على اسم الملف <em>filename</em>. هذا مثال على استخدام مسار ملف نسبي <em>relative file path</em>.</p>
149+
150+
<p>إذًا، أيهما يجب استخدامه ومتى: مسار مطلق Absolute path أم مسار نسبي Relative path؟ إليك القواعد <strong>The rules</strong> التي يجب اتباعها:</p>
151+
152+
<ul>
153+
<li>استخدم المسارات المطلقة <strong>Absolute paths</strong> عند الربط بمورد مُستضاف <em>resource hosted</em> على موقع ويب خارجي <em>external website</em>.</li>
154+
<li>استخدم المسارات المطلقة <strong>Absolute paths</strong> عندما تحتاج إلى أن يعمل رابط الصفحة أو المورد بشكل متسق <em>consistently</em> بغض النظر عن موقع المستند <em>document location</em> داخل الموقع.</li>
155+
<li>استخدم المسارات النسبية <strong>Relative paths</strong> عند ربط الموارد <em>resources</em> داخل الموقع الإلكتروني نفسه.</li>
156+
<li>استخدم المسارات النسبية <strong>Relative paths</strong> للحفاظ على شيفرتك <em>your code</em> أكثر تنظيمًا <em>cleaner</em> وسهولة في الصيانة <em>easier to maintain</em> أثناء التطوير <em>during development</em>.</li>
157+
<li>استخدم المسارات النسبية <strong>Relative paths</strong> أثناء الاختبار المحلي <em>during local testing</em> لضمان عمل الروابط دون اتصال بالإنترنت.</li>
158+
</ul>
159+
160+
<div class="questions">
161+
162+
<h4>أسئلة :</h4>
163+
164+
<h5>ماهما نوعا المسارات types of paths ؟</h5>
165+
166+
<p>١. المسارات الحاسمة والمطلقة Resolute and absolute paths . ❌</p>
167+
<p>٢. المسارات المطلقة والنهائية Absolute and ultimate paths . ❌</p>
168+
<p>٣. المسارات النسبية والفريدة Relative and unique paths. ❌</p>
169+
<p><mark>٤. المسارات المطلقة والنسبية Absolute and relative paths . ✅</mark></p>
170+
171+
<br>
172+
173+
<h5>كيف يمكنك الربط بمورد resource متوفر فقط available only على الإنترنت on the internet ؟</h5>
174+
<p><mark>١. المسار المطلق Absolute path. ✅</mark></p>
175+
<p>٢. المسار النسبي Relative path. ❌</p>
176+
<p>٢. المساران النسبي والمطلق Both relative and absolute paths. ❌</p>
177+
<p>٤. لا شيء مما سبق. ❌</p>
178+
179+
<br>
180+
181+
<h5>ما البروتوكول protocol المستخدم للمسار المطلق absolute path على جهاز محلي local machine ؟</h5>
182+
<p>١. <code class="br">//:http</code> ❌</p>
183+
<p>٢. <code class="br">//:https</code> ❌</p>
184+
<p><mark>٣. <code class="br">//:file</code> ✅</mark></p>
185+
<p>٤. <code class="br">localhost</code> ❌</p>
186+
187+
188+
189+
190+
</div>
93191

94192

95193
</section>
96194

97-
<section id="3">
98-
<h3>ج. ما الفرق بين الخطوط المائلة Slashes، والنقطة المفردة Single Dot، والنقطة المزدوجة Double Dot في بناء جملة المسار Path Syntax ؟</h3>
195+
<section id="3">
196+
<h3>ج. ما الفرق بين الخطوط المائلة Slashes، والنقطة المفردة Single Dot، والنقطة المزدوجة Double Dot في بناء جملة المسار Path Syntax ؟</h3>
99197

100198

101199

‎basic/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ <h1>أساسيات اتش.تي.إم.إل</h1>
162162
<a href="./basic18.html#1">أ. ما هي أنواع سمات "الهدف" Target المختلفة، وكيف تعمل؟</a>
163163
</li>
164164
<li>
165-
<a href="./basic18.html#2">ب. ما الفرق بين المسارات المطلقة Absolute والنسبية Relative ؟</a>
165+
<a href="./basic18.html#2">ب. ما الفرق بين المسارات المطلقة Absolute paths والنسبية Relative paths ؟</a>
166166
</li>
167167
<li>
168168
<a href="./basic18.html#3">ج. ما الفرق بين الخطوط المائلة Slashes، والنقطة المفردة Single Dot، والنقطة المزدوجة Double Dot في بناء جملة المسار Path Syntax ؟</a>

0 commit comments

Comments
 (0)