لعبة من سيربح المليون لعبة عربية رائعة من خلال هذه اللعبة ستدخل عالم الأسئلة والأجوبة. وبالتأكيد اللعبة محاكاة للبرنامج الشهير والمعروف من سيربح المليون ،
وهذه اللعبة حقا رائعة فهي تفيدنا في الثقافة العامة
للتحميل
لعبة من سيربح المليون
إظهار الرسائل ذات التسميات لغات البرمجة. إظهار كافة الرسائل
إظهار الرسائل ذات التسميات لغات البرمجة. إظهار كافة الرسائل
الجمعة، 6 ديسمبر 2013
السبت، 30 نوفمبر 2013
دورة لتعليم لغة البرمجة php
بسم الله الرحمن الرحيم اليوم سيكون بداية وضع دورة لتعليم لغة البرمجة php
على مدونة حاسوبي
من تقديم سمير سلطاني
من اجل العمل على تطوير القدرات العربية في مجال تصميم المواقع والسكريبتات
الدورة ستكون مكونة من 27 درس اي 27 يوم انشاء الله
سنحاول ان نأخذ ولو فكرة بسيطة عن عمل هذه اللغة
هي لغة برمجة نصية صممت أساسا من أجل استخدامها لتطوير
وبرمجة تطبيقاتالوب. كما يمكن استخدامها لإنتاج برامج
قائمة بذاتها وليس لها علاقة بالوب فقط
بي إتش بي لغة مفتوحة المصدر ويطورها فريق من المتطوعين
تحت رخصة PHP، تدعمالبرمجة كائنية التوجه وتركيبها النحوي
يشبه كثيرا التركيب النحوي للغة السي هذا بالإضافة إلى أنها تعمل على أنظمة تشغيل متعددة مثل لينكس وويندوز.و
وهي تحتاج الى سيرفر لتشغيل تطبيقاتها والسكريبتات الخاصة بها
الخميس، 28 نوفمبر 2013
البداية مع لغة html
عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:
أنت جاهز الآن!
لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك.
لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.
أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم
<html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.
كما تتذكر من الدروس الماضية،
<html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.
الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (
<head>و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).
صفحتك يجب أن تكون بهذا الشكل:
<html>
<head>
</head>
<body>
</body>
</html>
لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.
إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.
جميل, لكن كيف أضيف المحتويات للموقع؟
كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..
مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو
title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:
<title>موقعي الأول</title>
لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة
كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::
<p>مرحى! هذا هو موقعي الأول.</p>
الحرف p في
<p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي:
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>
</html>
انتهينا! لديك الآن أول موقع حقيقي!
كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:
- في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
- اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
- احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.
الآن إذهب إلى متصفحك:
- في القائمة العلوية اختر "Open" من قائمة "File" (CTRL+O).
- إضغط على "Browse" في النافذة التي ستظهر لك.
- إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!
إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، خلافاً لذلك اصبر وأكمل قراءة الدروس
الأحد، 27 أكتوبر 2013
html الدرس الحادي عشر
تعلم و إصنع أزرار html
كيفية عمل زر :
يكفي وضع
كود:
<input type="button">
كيفية عمل زر :
<"input type="button" value="samir soltani>
لكن عندما تظغط عليه تظهر
يكفي وصع هذا الكود
<" (!'input type="button" value="samir soltani" onclick="alert('samir>
************************************************************************
الان مع شرح عمل قائمة بلغة html
<ul>
<li>samir</li>
<li>soltani</li>
<ul/>
*********************************************************************
كيفية عمل إختيارات بلغة html
input type="radio" name="choix" value"mi">samir>
input type="radio" name="choix" value"ro">soltani>
input type="radio" name="choix" value"ma">algeria>
*******************************************************************
كيفية عمل checkbox ب html
input type="checkbox">samir>
input type="checkbox">soltani>
input type="checkbox">algeria>
********************************************************************
كيفية عمل إدخال بيانات التسجيل ب html
Votre pseudo
<"input type="text" name ="nome" size="13>
Votre e-mail
<"input type="text" name ="mail>
لا تقم بنسخ الاكواد بل اكتبها مثلما هي لتفادي تغيرها عند نسخها من الموقع
html الدرس العاشر
عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه.
خاصيتان هما
colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:
مثال
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>خلية 2</td>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| خلية 1 | ||
| خلية 2 | خلية 3 | خلية 4 |
بتحديد
colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspanستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية
مثال
<table border="1">
<tr>
<td colspan="2">خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
<td>خلية 5</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| خلية 1 | خلية 2 | |
| خلية 3 | خلية 4 | خلية 5 |
ما هي خاصية rowspan
كما ربما خمنت،
rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:
مثال
<table border="1">
<tr>
<td rowspan="3">خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
</tr>
<tr>
<td>خلية 4</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| خلية 1 | خلية 2 |
| خلية 3 | |
| خلية 4 |
في المثال أعلاه أعطينا الخاصية
rowspan القيمة "3" للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.
هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع في التفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورق قبل أن تطبقه على HTML.
html الدرس التاسع
إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.
ما الفرق بين
مثال
<table>
<tr>
<td>الاسم </td>
<td>اللقب </td>
</tr>
<tr>
<td>سمير </td>
<td>سلطاني </td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| الاسم | اللقب |
| سمير | سلطاني |
ما الفرق بين <tr> و<td>
كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:
هناك ثلاث عناصر تستخدم لإنشاء أي جدول:
- وسم البداية
<table>ووسم الإغلاق</table>يبدأ من بينهما الجدول وينتهي، منطقي. <tr>تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.<td>هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.
هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم
<table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.
فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:
| الاسم | اللقب |
| سمير | سلطاني |
خلية 1و خلية 2 تشكلان صفاً التي تحتوي على كلمتي الاسم واللقب ، خلية 1 وخلية 3 تشكلان عموداً
في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.
مثال
<table>
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
<tr>
<td>خلية 5</td>
<td>خلية 6</td>
<td>خلية 7</td>
<td>خلية 8</td>
</tr>
<tr>
<td>خلية 9</td>
<td>خلية 10</td>
<td>خلية 11</td>
<td>خلية 12</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| خلية 1 | خلية 2 | خلية 3 | خلية 4 |
| خلية 5 | خلية 6 | خلية 7 | خلية 8 |
| خلية 9 | خلية 10 | خلية 11 | خلية 12 |
هل هناك أية خصائص للجداول
بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:
مثال
<table border="1">
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
</tr>
<tr>
<td>خلية 3</td>
<td>خلية 4</td>
</tr>
</table>
سيظهر بهذا الشكل في متصفحك
| خلية 1 | خلية 2 |
| خلية 3 | خلية 4 |
سمك إطار الجدول يحدد بمقياس البكسل
وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالبكسل أو بالنسبة المؤية لمقياس الشاشة:
مثال
<table border="1" width="30%">
هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.
المزيد من الخصائص
هناك خصائص كثيرة للجداول، هذان اثنان منها:
- align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
- يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.
مثال
<td align="right" valign="top">Cell 1</td>
ماذا يمكن أن أضع في الجداول
نظرياً يمكن أن تضع أي شيء في الجداول، النصوص والصور والروابط، لكن الجداول مخصصة لعرض البيانات مجدولة،، لذلك لا تستخدمها لوضع أي شيء لأنك تريد ببساطة أن تجعل الأشياء تظهر بجانب بعضها البعض،.
قبل سنوات معدودة كانت الجداول تستخدم غالباً كأداة للتصميم، لكن إذا أردت أن تتحكم بطريقة عرض النصوص والجداول هناك طريقة أفضل بكثير
html الدرس الثامن
وضع صورة في منتصف صفحتك
هذا يبدو كتحد...
يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:
مثال
ستظهر بهذا الشكل في متصفحك:
كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (
img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟
لاحظ كيف أن عنصر
img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1K-8BirIEt11RGtWPN0eAftadfiBJEIhmiGQ51A01FPlvtTHsvkB32VdpzWRQZj-mAFSuo14-5b08uWA1Fo3VZICSQOduXhZN17t8LCIcpkdzOW1ivFfop_mx_M4Xg_kNMm1iyQ_UHk/s320/Sans+titre.JPG"
هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".jpg" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".jpg" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي ملايين الألوان، والسبب الثاني هو أن GIF هي صيغة ملف أفضل لضغط الصور البسيطة أما JPEG فهي أفضل للصور المعقدة التي تحوي تفاصيل كثيرة، وكلما زاد ضغط الصورة صغر حجمها، وهذا يعني أن صفحتك ستظهر بسرعة أكبر، وربما تعرف من خبرتك في المواقع أن الصفحات الثقيلة يمكنها أن تكون بطيئة بشكل كبير لدرجة تزعج الزائر.
في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.
من أين آتي بالصور
إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.
للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.
عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس
أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:
- إضغط بالزر الأيمن على أي صورة في أي موقع.
- اختر "Save picture as..." في القائمة التي ستظهر لك.
- اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".
إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:
الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.
هل هذا كل ما أحتاجه لمعرفته حول الصور
هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:
مثال
مثال
ثانياً، يمكن للصور أن تكون روابط:
مثال
ستظهر في المتصفح بهذا الشكل
هل هناك أي خصائص يجب أن أعرفها
عندما تريد وضع صورة فأنت تحتاج خاصية
src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور
خاصية
alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:
مثال
بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية
alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.
الخاصية
title يمكن استخدامها لتقديم معلومات إضافية للصورة:
مثال
سيظهر بهذا الشكل في متصفحك
إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "www.mastredz.tk" يظهر لك في مربع صغير.
هناك خاصيتان مهمتان وهما
width وheight:
مثال
سيظهر بهذا الشكل في متصفحك
الخاصية
width وheight يمكن استخدامها لتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديه شاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن في شاشة أخرى قد تساوي 1.5 سنتميتر.
إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:
مثال
سيظهر بهذا الشكل في متصفحك
عموماً، انتبه إلى أن حجم الصورة بالكيلوبايت سيبقى كما هو وستأخذ الصورة نفس الوقت لتظهر للمستخدم حتى لو كانت صغيرة الحجم من ناحية المظهر، لذلك عليك ألا تصغر مقياس صورة باستخدام خاصيتي الطول والعرض، بدلاً من ذلك قم بتصغير الصور من خلال برنامج محرر صور لكي تجعلها أصغر حجماً
مع ذلك، تظل فكرة جيدة أن تستخدم خاصيتي الطول والعرض لأن المتصفحات تستطيع أن تعرف كم مساحة الصورة التي يجب أن تظهر في الصفحة فتسرع بذلك ظهور الصفحة للمستخدم.
يكفينا الآن ما رأيناه من صور samir soltani
html الدرس السابع
الروابط
ما الذي أحتاجه لإنشاء رابط
لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:
مثال
سيظهر في المتصفح بهذا الشكل:
العنصر
a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية
href تحوي القيمة "http://www.mastredz.tk"، وهي العنوان الكامل لموقع samir soltani ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "حاسوبي" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.ماذا عن الروابط بين الصفحات في موقعي
إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:
مثال
إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "samir" فالرابط سيظهر بهذا الشكل:
مثال
لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:
مثال
"../" تشير إلى مجلد واحد في مستوى أعلى من الملف الذي يحوي الرابط، بنفس النظام يمكن الإشارة إلى مستويين أو أكثر من المجلدات بكتابة "../../".
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.
ماذا عن الروابط الداخلية في نفس الصفحة
بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى
id أو "identification" والعلامة "#".
استخدم خاصية
id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة
id للعنصر الذي تريد الربط له، مثال:
كل هذا سيتضح مع هذا المثال:
مثال
<html> <head> </head> <body> <p><a href="#heading1">Link to heading 1</a></p> <p><a href="#heading2">Link to heading 2</a></p> <h1 id="heading1">heading 1</h1> <p>www.mastredz.tk</p> <h1 id="heading2">heading 2</h1> <p>soltani samir</p> </body> </html>
سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):
Link to heading 1
Link to heading 2
Heading 1
mastredz.tk
Heading 2
solyani samir
ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.
هل يمكن أن أضع رابطاً لأي شيء آخر
بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:
مثال
سيظهر بهذا الشكل في متصفحك
الاختلاف الوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة
mailto: متبوعاً بعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريد الإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!هل هناك خصائص أخرى يجب علي أن أعرفها
لإنشاء رابط استخدام دائماً الخاصية
href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:مثال
سيظهر بهذا الشكل في المتصفح:
خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.
الاشتراك في:
الرسائل (Atom)