| 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".


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



اقرأ المزيد

| 0 التعليقات ]

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


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

وجاء في ثنايا الخبر "ابتكرت شركة جوجل نظاماً جديداً للسيارات يتيح للمكفوفين قيادة السيارة بأنفسهم دون تدخل من أحد أو الاضطرار للمس عجلة القيادة. وكشفت جوجل لأول مرة عن مشروع القيادة الذاتية عام 2010".

وقد استمر تداول الكذبة التي انطلت أيضاً على شاشة "العربية" وصدقها الجميع، حتى المُعلِّقون على الخبر في "العربية.نت"، حتى فاجأت جوجل الجميع بأن "سيارة المكفوفين" كانت "كذبة أبريل".

اقرأ المزيد

| 0 التعليقات ]


أعلنت "جوجل" اليوم عن شراكتها مع متحف المتحف ومتحف الفن الإسلامي في إطار مشروع الفنون "Art Project" الذي تطلقه في دولة قطر.

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

ولكي نذكر كافة المعلومات المرتبطة بهذا المشروع، فإننا نذكر أن عدد الأعمال الفنية ذات الجودة العالية قد ارتفع من 1,000 إلى أكثر من 30,000 صورة لأعمال فنية مختلفة في 9 متاحف. وتوجد أيضاً صور فوتوغرافية تستعرض الشوارع التي يتواجد بها 46 متحف، مع العمل على زيادة هذا الرقم في الفترة القادمة.  

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

وقد أطلقت "جوجل" عربة مصممة خصيصاً ومزوده بتقنية "ستريت فيو" لالتقاط مشاهد وصور بزاوية 360 درجة من داخل صالات العرض المختارة والتي يتصل بعضها ببعض فيما بعد، بما يتيح للمستخدمين التنقل السلس داخل أكثر من 385 غرفة داخل المتاحف. ويمكن أيضاً استكشاف المتاحف من الداخل مباشرة من خلال Street View in Google Maps.
لمزيد من المعلومات يمكن زيارة هذا الرابط
http://www.youtube.com/watch?v=4ZdCByYeNRU
اقرأ المزيد

| 0 التعليقات ]

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.
العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.

"وسوم"؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.
كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".
بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.
لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

هل يمكنك أن تريني بعض الأمثلة؟

حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)
المثال 1:
 
 
<em>نص مائل.</em>
سيظهر بهذا الشكل في المتصفح:
نص مائل

العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.
مثال 2:
 
 
<h1>هذا عنوان</h1>
 <h2>هذا عنوان فرعي</h2>
ستظهر بهذا الشكل في المتصفح:
هذا عنوان                  
  هذا عنوان فرعي

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: <br />.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>، <html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.

أين أضع كل هذه الوسوم؟

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

الدرس الرابع: إنشاء موقعك الأول.
اقرأ المزيد

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