متصفح مجموعة خليج القراصنة الخارق .

خليج القراصنة هو موقع مثل الكثير من المواقع التي تلقت تهديدات وشكاوي من شركات ومنظمات عالمية لوقف ما يسمونه انتهاك لحقوق الملكية أو الفكرية ، وبالفعل شاهدنا بعض المواقع المشهورة التي اغلقت بقوة القانون تحت هذا الشعار ، وفرضت على أصحابها غرمات بملايين الدولارات ، فالحرية على الإنترنت قد لا تكون كما نتصورها ، لكن في المقابل هناك الكثير من المستخدمين الذي يرون أن تقييد حرية الإنترنت شيء لا يمكن القبول به مهما كان ، ولعل الجدل الذي صاحب قانون وقف القرصنة على الإنترنت الذي اقترح في الكونغرس الأمريكي سنة 2011 ، أبرز مثال على هذا الرفض. ويبقى أيضا خليج القراصنة رمزا للصمود وللحرية في الإنترنت .

ومن أجل تشجيع الحرية على الانترنت قام موقع خليج القراصنة باطلاق متصفح خاص تحت إسم piratebrowser، وهو متصفح مبني على فايرفوكس 23 مع استخدام شبكة تور و كذلك البروكسي ، تم تصميم هذا المتصفح للبلدان التي تفرض قيود على تصفح الانترنت بشكل كامل .وخليج القراصنة واحد من المواقع المحجوبة.

piratebrowser هو في الحقيقة وسيلة سهلة لتصفح الإنترنت إذا كنت في بلدان مثل المملكة المتحدة وكوريا الشمالية، وهولندا، فينلاندا والدنمارك وبلجيكا وإيطاليا وإيران ...وأي بلد في العالم يقوم بحظر أحد المواقع على شكبة الانترنت :)

إذا كنت ترغب في التأكد من أنك تتصفح كمجهول ، فقط تقوم بالذهاب الى اي موقع تحديد IP وسترى ان عنوانك مختلف تماما عن البلد الذي تتصفح منه .

الجدير بالذكر أن هذا المتصفح حقق خمسة ملايين تحميل منذ أن أعلن عنه ، وهذا الإنجاز الرائع يظهر الاهتمام الشديد لهذه المبادرة . وبينما لم يتم تحديث المتصفح منذ ظهوره لأول مرة، أكد موقع خليج القراصنة أنه يعمل بالفعل على التحسينات التي سوف تجعل المتصفح يحقق تجربة أكثر سلاسة للمستخدمين.

تابع القراءه »

ضع تعليقات في برامجك (php)

4:54 ص 0 التعليقات

كما قد لاحظت، برامج PHP يمكنها أن تبدو مثيرة للحيرة، في هذا الدرس سنتحدث عن أهمية التعليقات وكيف تضعها في برامجك.

لماذا من المهم أن تضع تعليقات في برامجك؟

عندما تبرمج فأنت تكتب لمزود أو حاسوب وتحتاج لكتابة لغة منهجية قد لا تعبر عن أفكارك عندما تكتب البرنامج.
لذلك قد يكون من الصعب على الآخرين وعليك أن تفهم هيكل البرنامج وبالتالي من الصعب تصحيح الأخطاء في البرنامج.
التعليقات تساعد على كتابة نص قصير يشرح جزء من البرنامج، المزود سيتجاهل هذا التعليق ولن يؤثر التعليق على وظائف البرنامج.
في عالم الأعمال، يكون من متطلبات مواصفات البرامج أن تحوي تعليقات وإلا ستكون مخاطرة كبيرة من الشركة أن تستلم برنامجاً تجد صعوبة في إيجاد وتصحيح أخطاءه.

كيف تضع التعليقات؟

من السهل أن تضع تعليقات في برنامجك، ببساطة ابدأ التعليق بعلامة: "//".
ألقي نظرة على هذا المثال من الدرس الخامس ، أضفنا فيه تعليقات:

 <html>
 <head>
 <title>Loops</title>
 </head>
 <body>

 <?php

 // Here we write color codes using three loops

 // Red can be between 0 and 255 
 for ($intRed=0; $intRed<=255; $intRed=$intRed+30) {

    // Green can be between 0 and 255
    for ($intGreen=0; $ intGreen<=255; $intGreen=$intGreen+30) {

       // Blue can be between 0 and 255
       for ($ intBlue=0; $intBlue<=255; $intBlue=$intBlue+30) {

       // The color code is made on the form rgb(red,green,blue)
    strColor = "rgb(" . intRed . "," . intGreen . "," . intBlue . ")"

       // Now we write the color code to the client
    echo "<span style='color:" . $strColor . "'> " . $ strColor . " </span>";

       // Closes the loops
       }
    }
 }

 ?>

من أجل هذا المثال أضفنا المزيد من التعليقات لنوضح كيف أنك تستطيع تصحيح البرنامج بسهولة مع وجود التعليقات.

تابع القراءه »

الشروط للغة php

4:52 ص 0 التعليقات

الشروط تستخدم لتنفيذ أجزاء من البرنامج فقط عندما تستوفى متطلبات محددة مسبقاً، فمثلاً الشرط يمكن أن يكون تاريخ بعد الأول من يناير 2012 أو متغير أكبر من 7.

If...

أول نوع من الشروط سنلقي نظرة عليه هو

if، وهو يكتب بهذا الشكل:

 if (condition) {
    statement
 }

مرة أخرى، طريقة كتابة الأمر قريبة جداً من اللغة الطبيعية، إذا (If) تحقق شرط فنفذ كذا وكذا، لنلقي نظرة على مثال بسيط:

 <html>

 <head>
 <title>Loops </title>
 </head>
 <body>

 <?php

 $x = 2;

 if ($x > 1) {
    echo "<p>variable $x is greater than 1 </p>";
 }
  
 ?>

 </body>
 </html>

if ... else ...

النوع التالي من الشروط الذي سنلقي نظرة عليه هو توثيق

else، وهو ما يمكن أن يكتب بهذا الشكل:

 
 if (condition) {
    statement
 }
 else {
    statement
 }

مرة أخرى، أسلوب كتابة الأمر قريب من اللغة الطبيعية: إذا (if) تحقق شرط نفذ كذا وكذا، وإلا else نفذ شيئاً آخر.
في الدرس الرابع تعلمت كيف تجد رقم الشهر، في المثال التالي سنستخدم رقم الشهر في حلقة

if و

else والشرط وضعت لمعرفة الموسم:

 <html>
 <head>
 <title>Conditions</title>
 </head>
 <body>

 <?php

 if (date ("m") == 3) {
    echo "<p>Now it's spring!</p> ";
 }
 else {
    echo "<p>I do not know what season it is!</p> "; 
 }

 ?>

 </body>
 </html>

شاهد المثال

كما ترى، الشرط ليس شرطاً ذكياً وفقط يعمل إن كان الشهر مارس!
على أي حال هناك كثير من الطرق لتحسين الشرط وزيادة دقته، أدناه قائمة العوامل (operators) التي يمكن استخدامها في الشروط:
== يساوي
< أقل من
> أكبر من
<= أقل من أو يساوي
>= أكبر من أو يساوي
!= لا يساوي
بالإضافة إلى ذلك هناك عوامل منطق:
&& و
|| أو
! لا
العوامل يمكن استخدامها لوضع شروط أكثر دقة، الآن يمكن توسيع المثال أعلاه لإدراج كل شهور الربيع:

 <html>
 <head>
 <title>Conditions</title>

 </head>
 <body>

 <?php
 
 if (date("m") >= 3 && date("m") <= 5) {
    echo "<p> Now it's spring!</p> ";
 }
 else {
    echo "<p> Now it's either winter, summer or autumn!</p> ";
 }
  
 ?>

 </body>
 </html>

لنلقي نظرة مقربة على الشرط المحسن::

 date("m") >= 3 && date("m") <= 5

يمكن ترجمة الشرط إلى:

 إن كان الشهر أكبر من أو يساوي 3، والشهر أقل من أو يساوي 5

شرط ذكي، أليس كذلك؟ العوامل تلعب دوراً مهماً في كثير من أجزاء PHP.
لكن لا زال البرنامج يعمل لشهور مارس، أبريل ومايو، بقية الشهور لم تذكر في الشرط، لذلك دعنا نطور الشرط أكثر.

if ... elseif ... else...

باستخدام

elseif يمكننا توسيع الشرط ليعمل على كافة الشهور:

 <html>
 <head>
 <title>Conditions</title>

 </head>
 <body>

 <?php
 
 if (date("m") >= 3 && date("m") <= 5) {
    echo "<p>Now it's spring!</p>";
 }

 elseif (date("m") >= 6 && date("m") <= 8) {
    echo "<p>Now it's summer!</p>";
 }

 elseif (date("m") >= 9 && date("m") <= 11) {
    echo "<p>Now it's autumn!</p>";
 }

 else {
    echo "<p>Now is winter!</p>";
 }
  
 ?>

 </body>
 </html>

شاهد المثال

لكتابة الشروط عليك أن تفكر بشكل منطقي وتكون منهجياً، المثال أعلاه بسيط لكن الشروط يمكنها أن تصبح معقدة جداً.

switch ... case

هناك طريقة أخرى لكتاب الشروط باستخدام توثيق

switch:

 switch (expression) {
 
 case 1: 
    statement
    break; 
 case 2: 
    statement
    break; 
 default:
    statement
    break;
 }

هذه الطريقة تعتمد على الشرط أو expression ثم تضع قائمة بمختلف الأجوبة والقيم من خلال البيان أو statements، أسهل طريقة لشرح هذا الأمر هو من خلال مثال.
كما تتذكر في الدرس الرابع وظيفة توثيق

date("w") تعطينا رقم اليوم في الأسبوع، هذا يمكن استخدامه في المثال بكتابة اسم اليوم بدلاً من رقمه:

 <html>
 <head>
 <title>Conditions</title>
 </head>
 <body>

 <?php
 
 switch(date("w")) {
  
 case 1:
    echo "Now it's Monday";
    break;
 case 2:
    echo "Now it's Tuesday";
    break;
 case 3:
    echo "Now it's Wednesday";
    break;
 case 4:
    echo "Now it's Thursday";
    break;
 case 5:
    echo "Now it's Friday";
    break;
 case 6:
    echo "Now it's Saturday";
    break;
 default:
    echo "Now it's Sunday";
    break;
  
 }
  
 ?>

 </body>
 </html>

شاهد المثال

غالباً

switch تستخدم كبديل لأمر

if و

else، ما يجب عليك استخدامه في أي ظرف يعتمد على أي طريقة تجدها أسهل وأكثر منطقية، محاولة أن تجعل برنامجك منطقياً وواضحاً سيكون تحدياً كبيراً.

تابع القراءه »

إنشاء أول صفحة PHP

4:24 ص 0 التعليقات

من الدرس الأول والثاني تعلمت القليل حول ماهية لغة PHP، ثبت مزوداً على حاسوبك أو يمكنك الوصول لمزود يدعم هذه اللغة، الآن أنت جاهز لتبدأ في كتابة أول صفحة PHP، الدرس سيكون سهلاً وبسيطاً، لكن بعد أن تنجز الدرس ستفهم ما هي لغة PHP وماذا يمكنك إنجازه باستخدامها.
ببساطة ملف PHP هو ملف نصي بامتداد .php ويتألف من:

نص
وسوم HTML
برمجة بلغة PHP

أنت تعرف مسبقاً ما هو النص وما هي وسوم HTML، لذلك لنلقي نظرة على برمجة PHP.

برامج PHP

فريق توثيق PHP أصدر

وثائق مفصلة للغة PHP، خلال الدرس سنضع كثيراً من الروابط لهذه الوثائق، الهدف هو أن تعتاد على البحث وإيجاد الأجوبة لأسئلتك، PHP لغة واسعة ولا يمكنك أن تتعلم كل إمكانياتها في هذا الدرس، لكنها ليست لغة صعبة، على العكس، PHP تبدو في بعض الأحيان كاللغة الإنجليزية.
لنبدأ بإنشاء صفحة PHP الأولى.

مثال: Hello World!

ابدأ في إنشاء صفحة HTML عادية لكن أعطي للملف اسم page.php واحفظه في المجلد الرئيسي للموقع:

إن كنت تستخدم XAMPP (اقرأ الدرس 2)، المسار إلى المجلد الرئيسي هو "c:\xampp\htdocs\page.php" في حاسوبك الذي يعمل كمزود الآن. اقرأ المزيد حول حفظ ملفات PHP في XAMPP.
أن كنت تستخدم استضافة فببساطة ارفع الملف إلى مزود موقعك.

وسوم HTML يجب أن تكون بهذا الشكل:

 <html>
 <head>
 <title>My first PHP page</title>

 </head>
 <body>

 </body>
 </html>

كما تتذكر من الدرس الأول، كل شيء في PHP متعلق بكتابة أوامر للمزود، لذلك دعنا نكتب بعض الأوامر.
في البداية نحن بحاجة لأن نخبر المزود أين ستبدأ PHP ومتى ستتوقف. في PHP تستخدم وسوم <?php و?> لتحديد بداية ونهاية أوامر PHP التي يجب على المزود تنفيذها، في معظم المزودات استخدام <? كوسم بداية فقط سيكون كافياً لكن <?php هي الطريقة الأفضل لكي عندما تستخدم PHP لأول مرة في الملف.
الآن أضف التالي لوسوم HTML:

 <html>
 <head>
 <title>My first PHP page</title>
 </head>
 <body>

 <?php   

 echo "<h1>Hello World!</h1>";

 ?>

 </body>
 </html>

عندما تستعرض ملف PHP في المتصفح يجب أن يكون الملف بهذا الشكل:

الأمر يصبح مثيراً أكثر عندما تنظر لمصدر الصفحة في المتصفح باختيار "view source":

أوامر PHP ذهبت! كما تتكر في الدرس الأول المزود وحده الذي يستطيع أن يرى أوامر PHP، - الزبون (أي المتصفح) يرى النتائج فقط!
لنلقي نظرة على ما حدث، نحن طلبنا من المزود أن يكتب <h1> Hello World!</h1>، بلغة تقنية أكثر سنقول بأننا استخدمنا الوظيفة توثيق

echo لنكتب سلسلة محارف محددة للزبون (المتصفح) والفاصلة المنقوطة تنهي الأمر، لكن لا تخف، في هذا الدرس سنحاول أن نبقي اللغة التقنية في حدها الأدنى.
في مثالنا الأول من الواضح أنه ليس مثيراً للحماس، لكن انتظر فقط! من الآن وصاعداً ستزداد الأمور حماساً، لنلقي نظرة على مثال آخر.

مثال: الآن!

لنجعل المزود يكتب شيئاً آخر، يمكننا مثلاً أن نطلب منه أن يكتب تاريخ اليوم والوقت:

 <html>
 <head>
 <title>My first PHP page</title>

 </head>
 <body>

 <?php   

 echo date("r");

 ?>

 </body>
 </html>

هذا سيظهر بهذا الشكل في المتصفح:

ووسوم HTML في المقابل ستكون:

الآن الأمور تبدو مسلية أكثر، أليس كذلك؟
جعلنا المزود يكتب التاريخ والوقت عندما تعرض صفحة PHP، لاحظ أنك إذا جربت تحديث الصفحة سترى وقتاً جديداً يكتب، المزود يكتب التاريخ والوقت الحالي في كل مرة ترسل الصفحة إلى الزبون.
من المهم أيضاً أن تلاحظ بأن مصدر HTML يحتوي فقط التاريخ وليس أوامر PHP، لذلك المثال لا يتأثر بأي متصفح استخدم، في الحقيقة كل الخصائص التي تعتمد على تقنيات جهة المزود ستعمل في كل المتصفحات!
ومرة أخرى لاحظ الفاصلة المنقوطة بعد سطر الأمر، هذه الفاصلة مهمة جداً ويجب أن تضاف وإلا لن يعمل البرنامج.
في المثال استخدمنا وظيفة توثيق

date، وهي وظيفة تعطينا الوقت والتاريخ الحاليين في المزود.
لنجرب إضافة المزيد للمثال من خلال كتابة سلسلة محارف ووظيفة برمجية - يفصل بينهما "." (نقطة) - هكذا:

 <html>
 <head>
 <title>My first PHP document</title>
 </head>
 <body>

 <?php 
 
 echo "<p>Current date and time: " . date("r") . "</p>";

 ?>

 </body>
 </html>

ستظهر بهذا الشكل في المتصفح:

ووسوم HTML في المقابل ستكون:

تابع القراءه »

كيفية ادراج الصور في صفحات html بكل سهولة

11:35 م 0 التعليقات

ألن يكون رائعاً إذا تمكنت من وضع صورة المغني والممثل الشهير ديفيد هاسلهوف في منتصف صفحتك؟

هذا يبدو كتحد...

ربما، لكن في الحقيقة يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:
مثال 1:

 
 <img src="david.jpg" alt="David" />

ستظهر بهذا الشكل في متصفحك:

كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟
لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.
"david.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، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.

من أين آتي بالصور؟

إذا أردت أن تقوم بإنشاء صورك الخاصة فأنت بحاجة إلى برنامج محرر صور، محرر الصور هو أحد أهم الأدوات التي تحتاجها لإنشاء مواقع جميلة.
للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.
عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IrfanView وهو برنامج مجاني ولا يكلف شيئاً.
أو يمكنك إنزال الصور من مواقع مختلفة، لكن احذر من مخالفة قوانين حقوق النشر، مع ذلك، من المفيد أن تعرف كيف تقوم بإنزال الصور:

إضغط بالزر الأيمن على أي صورة في أي موقع.
اختر "Save picture as..." في القائمة التي ستظهر لك.
اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".

إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:

الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:
مثال 2:

 
 <img src="images/logo.png" />

مثال 3:

 
 <img src="http://www.html.net/logo.png" />

ثانياً، يمكن للصور أن تكون روابط:
مثال 4:

 
 <a href="http://www.html.net">
 <img src="logo.png" /></a>

ستظهر في المتصفح بهذا الشكل (جرب أن تضغط على الصورة):

هل هناك أي خصائص يجب أن أعرفها؟

عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور
خاصية alt تستخدم لتعطي وصفاً بديلاً للصورة إذا لم تظهر الصورة لأي سبب سيرى المستخدم نصاً بديلاً يشرح محتويات الصورة، هذه الخاصية مهمة خصوصاً لمن يعاني من أي إعاقة بصرية، وهي كذلك مفيدة في حال لم تظهر الصور بسرعة كافية، لذلك استخدم دائماً خاصية alt:
مثال 5:

 
 <img src="logo.gif" alt="HTML.net logo" />

بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.
الخاصية title يمكن استخدامها لتقديم معلومات إضافية للصورة:
مثال 6:

 
 <img src="logo.gif" title="Learn HTML from HTML.net" />

سيظهر بهذا الشكل في متصفحك

إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "Learn HTML from HTML.net" يظهر لك في مربع صغير.
هناك خاصيتان مهمتان وهما width وheight:
مثال 7:

 
 <img src="logo.png" width="141" height="32" />

سيظهر بهذا الشكل في متصفحك

الخاصية width وheight يمكن استخدامها لتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديه شاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن في شاشة أخرى قد تساوي 1.5 سنتميتر.
إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:
مثال 8:

 
 <img src="logo.gif" width="32" height="32" />

سيظهر بهذا الشكل في متصفحك

عموماً، انتبه إلى أن حجم الصورة بالكيلوبايت سيبقى كما هو وستأخذ الصورة نفس الوقت لتظهر للمستخدم حتى لو كانت صغيرة الحجم من ناحية المظهر، لذلك عليك ألا تصغر مقياس صورة باستخدام خاصيتي الطول والعرض، بدلاً من ذلك قم بتصغير الصور من خلال برنامج محرر صور لكي تجعلها أصغر حجماً
مع ذلك، تظل فكرة جيدة أن تستخدم خاصيتي الطول والعرض لأن المتصفحات تستطيع أن تعرف كم مساحة الصورة التي يجب أن تظهر في الصفحة فتسرع بذلك ظهور الصفحة للمستخدم.
يكفينا الآن ما رأيناه من صور ديفيد هاسلهوف.

تابع القراءه »

ما الذي أحتاجه لإنشاء رابط في صفحتي على html؟

11:32 م 0 التعليقات

لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:

مثال 1:

 
 <a href="http://www.html.net/">Here is a link to HTML.net</a>

سيظهر في المتصفح بهذا الشكل:

Here is a link to HTML.net

العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.

ماذا عن الروابط بين الصفحات في موقعي؟

إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:

مثال 2:

 
 <a href="page2.htm">Click here to go to page 2</a>

إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:

مثال 3:

 
 <a href="subfolder/page2.htm">Click here to go to page 2</a>

لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:

مثال 4:

 
 <a href="../page1.htm">A link to page 1</a>

"../" تشير إلى مجلد واحد في مستوى أعلى من الملف الذي يحوي الرابط، بنفس النظام يمكن الإشارة إلى مستويين أو أكثر من المجلدات بكتابة "../../".
points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.

ماذا عن الروابط الداخلية في نفس الصفحة؟

بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:

 
 <h1 id="heading1">heading 1</h1>

بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:

 
 <a href="#heading1">Link to heading 1</a>

كل هذا سيتضح مع هذا المثال:

مثال 5:

 
 <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>Text text text text</p>

  <h1 id="heading2">heading 2</h1>
  <p>Text text text text</p>
   
   </body>

 </html>

سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):

Link to heading 1
Link to heading 2

Heading 1

Text text text text

Heading 2

Text text text text

ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.

هل يمكن أن أضع رابطاً لأي شيء آخر؟

بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:

مثال 6:

 
 <a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>

سيظهر بهذا الشكل في متصفحك

Send an e-mail to nobody at HTML.net

الاختلاف الوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة mailto: متبوعاً بعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريد الإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!

هل هناك خصائص أخرى يجب علي أن أعرفها؟

لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:

مثال 7:

 
 <a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>

سيظهر بهذا الشكل في المتصفح:

HTML.net

خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.

تابع القراءه »

هناك خصائص يمكنك أن تستخدمها لمعظم العناصر في html .

11:27 م 0 التعليقات

ما هي الخاصية؟

أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص.
مثال 1:

 
 <h2 style="background-color:#ff0000;">My friendship with HTML</h2>

الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق.
هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة:
مثال 2:

 
 <html>
   
   <head>
   </head>

   <body style="background-color:#ff0000;">
   </body>

 </html>

هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق.
لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة.

كيف أصبحت الصفحة حمراء؟

في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة:
أبيض: #ffffff
أسود: #000000
أحمر: #ff0000
أزرق: #0000ff
أخضر: #00ff00
أصفر: #ffff00
نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أو أحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشير أي رقم، ولكي نبسط الأمر عليك، قمنا بعمل ملف يحوي 216 لون وهي من أكثر الألوان استعمالاً: 216 لون.
بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.
مثال 3:

 
 <body style="background-color: red;">

نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص.

أي العناصر تستطيع استخدام الخصائص؟

مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر.
الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص في سطر جديد لا يتطلب خصائص إضافية.
وكما هناك الكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعض الخصائص صممت لتستخدم لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعض العناصر يمكنه أن يحوي خصائص كثيرة بينما بعضها الآخر لا يمكنه سوى أن يحوي خاصية واحدة.
قد يبدو الأمر مثيراً للحيرة الآن، لكن ما أن تعتاد على التعامل مع الخصائص المختلفة لتجد أنها منطقية وسترى كم هي سهلة عند استخدامها.
هذا الدرس سيعرض عليك أهم الخصائص.

ما هي مكونات العناصر؟

بشكل عام العناصر تتكون من وسم بداية تحوي خاصية أو أكثر أو قد لا تحوي أي خاصية، ثم هناك بعض المحتويات ثم وسم الإغلاق، هذه ببساطة هي مكونات العناصر، انظر إلى الشكل التوضيحي.

تابع القراءه »

انشاء موقعك الأول معنا .

11:19 م 0 التعليقات

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

كيف؟

في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك.
أيضاً عليك أن تفتح برنامج المفكرة "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".

الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!
إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، خلافاً لذلك اصبر وأكمل قراءة الدروس

تابع القراءه »

ما هي HTML؟

11:15 م 0 التعليقات

هذا الدرس سيعطيك مقدمة قصيرة عن صديقك الجديد، HTML.

ما هي HTML

HTML هي اللغة الأم لمتصفحك.
لكي نختصر القصة، HTML اخترعت في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم.
HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "View" ثم المصدر "Source".
استعرض المصدر

لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.

ما فائدة HTML؟

إذا أردت إنشاء موقع فلا توجد طريقة أخرى غير استخدام لغة HTML، حتى لو استخدمت برنامجاً لإنشاء المواقع مثل دريمويفر، معرفتك للغة HTML ولو بشكل بسيط ستساعدك على إنشاء مواقع أفضل، الجميل أن هذه اللغة سهلة التعلم، في درسين فقط ستتعلم كيفية إنشاء موقعك الأول.
HTML تستخدم لإنشاء المواقع، هذا كل شيء ببساطة!

حسناً، ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في هذه المرحلة لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.
Text تعني النص، وهذه تشرح نفسها.
Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.

في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.
الآن أنت تعرف ماذا تعني HTML وXHTML

تابع القراءه »

تحول شكل ويندوز 7 الى شكل نظام اندرويد .

1:32 ص 0 التعليقات

Android Jelly Bean skinpac سهل في التتبيث فيكفي زيارتك لموقع التحميل اسفله ، ستجد ان البرنامج متاح في نسختين 64 و 32 بت ، كلما عليك إختيار النسخة الصحيحة لحاسوبك واشرع في تتبيثها حيث بعد الإنتهاء سيطلب منك إعادة تشغيل الحاسوب فلا تتردد .

اما إذا كنت على ويندوز starter او basic فيجب عليك تفعيل خاصية aero ليمكنك الإستفادة من مميزات الشكل الجديد الذي ويفره لك Android Jelly Bean skinpac ، اما إذا كنت تستعمل إصدارات قديمة من برنامج skinpac فوجب عليك حذفها قبل تتبيث النسخة الجديدة ، كما لاتحاول تتبيثه على ويندوز 8 لانه سيسبب في مشاكل Explorer .

تحميل : Android Jelly Bean skinpac

تابع القراءه »

لماذا من المهم أن تضع تعليقات في برامجك؟

كيف تضع التعليقات؟

If...

if ... else ...

if ... elseif ... else...

switch ... case

برامج PHP

مثال: Hello World!

مثال: الآن!

هذا يبدو كتحد...

من أين آتي بالصور؟

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هل هناك أي خصائص يجب أن أعرفها؟

مثال 1:

ماذا عن الروابط بين الصفحات في موقعي؟

مثال 2:

مثال 3:

مثال 4:

ماذا عن الروابط الداخلية في نفس الصفحة؟

مثال 5:

Heading 1

Heading 2

هل يمكن أن أضع رابطاً لأي شيء آخر؟

مثال 6:

هل هناك خصائص أخرى يجب علي أن أعرفها؟

مثال 7:

ما هي الخاصية؟

كيف أصبحت الصفحة حمراء؟

أي العناصر تستطيع استخدام الخصائص؟

ما هي مكونات العناصر؟

كيف؟

ماذا أفعل؟

جميل, لكن كيف أضيف المحتويات للموقع؟

ما هي HTML

ما فائدة HTML؟

حسناً، ماذا تعني H-T-M-L؟

احس موقع للربح من النت

اضافة معجبيين حقيقين الى صفحنك في الفيس بوك

المشاركات الشائعة

.