شرح مفصل للغة Html قبل البدء بدورة Php - منتديات ArabiaWeather.Com

العودة   منتديات ArabiaWeather.Com > المنتدى التقني > منتدى التصوير والجرافيك و التصميم

منتدى التصوير والجرافيك و التصميم يختص بما هو جديد في عالم التصوير والكاميرات والجرافيك و التصميم من برامج و تقنيات جديدة

الاخبــــار

رد

[ 11-29-2008 ]   رقم المشاركة 1

مراسل طقس-الأردن في الطفيلة

 

 

الصورة الرمزية MRAYAT_BADER

تاريخ التسجيل: Sep 2008

رقم العضوية: 274

المشاركات: 1,699

الدولة/المدينة: الاردن - محافظة الطفيلة

الارتفاع عن سطح البحر: 980

شكراً: 486
تم شكره 1,630 مرة في 276 مشاركة

السلام عليكم ورحمة الله وبركاته

سوف اقوم هنا بشرح موجز للغة HTML قبل البدء بدورة PHP لتصميم مواقع الانترنت وهي لغة سهلة وبسيطة لكن يجب ان يكون لديك خلفية عن هذه اللغة .

بسم الله نبدأ .

إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.

تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين)


نقره لعرض الصورة في صفحة مستقلة



فعلى سبيل المثال الوسم <B> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:

<B> Text jordan weather.jo <‎/B>

وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر <BR> أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة <P>.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله

كيف نبدأ ببرمجة html .

لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن تقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد ‎.html أو ‎.htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.


الدرس الاول : الاساسيات في html

أولاً الوسوم :

هنالك العديد من الوسوم في لغة html وكل واحد منها يعطي نتيجة مختلفة .
الوسوم الاساسية في صفحة html هي

<html> ويكتب في بداية كل صفحة
<head> و هو رأس الصفحة ويكتب بداخله المعلومات الاساسية المعرفة للموقع وايضا يكتب بداخلة عنوان الصفحة <title>

<body> ما يكتب بداخل هذا الوسم هو ما سيظهر لدى المستخدم

لنعطي مثالاً الان بالصور .

-- قم اولاً بفتح برنامج المفكره Notepad .
-- ثانيا قم بكتابته الكود الاتي كما في الصوره .

نقره لعرض الصورة في صفحة مستقلة


- بعد ان انتهيت من عملية كتابة الكود نأتي لعملية الحفظ ويجب ان يكون امتداد الصفحةname.html

نقره لعرض الصورة في صفحة مستقلة


- لكي تشاهد النتيجة قم بفتح الصفحة التي انشأتها .

نقره لعرض الصورة في صفحة مستقلة


وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:


لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.

إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:

<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Wow, I'm writing my first webpage </BODY></HTML>


أو بالشكل التالي:

<HTML>
<HEAD>
<TITLE>
This
is a
test
Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow,
I'm
writing
my
first
webpage
<‎/BODY>
<‎/HTML>


أو حتى بهذا الشكل:

<HTML> <HEAD> <TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>


الى اللقاء في الدرس القادم نقره لعرض الصورة في صفحة مستقلة



{ أَلَمْ تَرَ أَنَّ اللَّهَ يُزْجِي سَحَابًا ثُمَّ يُؤَلِّفُ بَيْنَهُ ثُمَّ يَجْعَلُهُ رُكَامًا فَتَرَى الْوَدْقَ يَخْرُجُ مِنْ خِلَالِهِ وَيُنَزِّلُ مِنَ السَّمَاء مِن جِبَالٍ فِيهَا مِن بَرَدٍ فَيُصِيبُ بِهِ مَن يَشَاء وَيَصْرِفُهُ عَن مَّن يَشَاء يَكَادُ سَنَا بَرْقِهِ يَذْهَبُ بِالْأَبْصَارِ }صدق الله العظيم




اللهم صلى على سيدنا محمد


نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 2

متنبئ جوي

 

 

الصورة الرمزية Ibrahim Khlifat

تاريخ التسجيل: Oct 2008

رقم العضوية: 306

المشاركات: 12,381

الدولة/المدينة: البتراء - الطيبة

الارتفاع عن سطح البحر: 1470

شكراً: 3,288
تم شكره 37,018 مرة في 3,286 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

مشكووووووووووووووووووور يـــــــــــا كبير




نقره لعرض الصورة في صفحة مستقلة




  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 3

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,197

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 171
تم شكره 194 مرة في 50 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

رائع جدا اخي .. نعم اتمنى بالفعل ان يتعلم الكثير من شبابنا هذه اللغة الرائعة .
انا من المتابعين لك .
الى الامام .




  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 4

مراسل طقس-الأردن في الطفيلة

 

 

الصورة الرمزية MRAYAT_BADER

تاريخ التسجيل: Sep 2008

رقم العضوية: 274

المشاركات: 1,699

الدولة/المدينة: الاردن - محافظة الطفيلة

الارتفاع عن سطح البحر: 980

شكراً: 486
تم شكره 1,630 مرة في 276 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

الدرس الثاني : الألوان والتحكم بها

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

‎<BODY BGCOLOR="FFFFFF">‎
...
<‎/BODY>


تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية

نقره لعرض الصورة في صفحة مستقلة


هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.

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

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

حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.

وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.

نقره لعرض الصورة في صفحة مستقلة


***** ملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً
*****

وبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان ومسمياتها

نقره لعرض الصورة في صفحة مستقلة


اما اذا اردت ان تستخدم صورة بدلاً من الالوان كخلفية للصفحة فالكود التالي يوضح ذلك .

<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">‎
...
<‎/BODY>


تقوم الخاصية BACKGROUND بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت الصورة التالية:

نقره لعرض الصورة في صفحة مستقلة


وسوف تكون النتيجة كالاتي :

نقره لعرض الصورة في صفحة مستقلة


النتيجة النهائية

نقره لعرض الصورة في صفحة مستقلة


نهاية الدرس الثاني نقره لعرض الصورة في صفحة مستقلة



{ أَلَمْ تَرَ أَنَّ اللَّهَ يُزْجِي سَحَابًا ثُمَّ يُؤَلِّفُ بَيْنَهُ ثُمَّ يَجْعَلُهُ رُكَامًا فَتَرَى الْوَدْقَ يَخْرُجُ مِنْ خِلَالِهِ وَيُنَزِّلُ مِنَ السَّمَاء مِن جِبَالٍ فِيهَا مِن بَرَدٍ فَيُصِيبُ بِهِ مَن يَشَاء وَيَصْرِفُهُ عَن مَّن يَشَاء يَكَادُ سَنَا بَرْقِهِ يَذْهَبُ بِالْأَبْصَارِ }صدق الله العظيم




اللهم صلى على سيدنا محمد


نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 5

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,197

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 171
تم شكره 194 مرة في 50 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

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

http://www.khayma.com/HPINARAbic/htutor02.html

اتمنى يا اخي ان نزرع هنا بصمتنا الخاصة بنا حسب معرفتنا لهذه اللغات وشرحها بطريقتنا الخاصة بنا بناء على مدى الخبرة العملية لنا .
تحياتي .




  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 6

مراسل طقس-الأردن في الطفيلة

 

 

الصورة الرمزية MRAYAT_BADER

تاريخ التسجيل: Sep 2008

رقم العضوية: 274

المشاركات: 1,699

الدولة/المدينة: الاردن - محافظة الطفيلة

الارتفاع عن سطح البحر: 980

شكراً: 486
تم شكره 1,630 مرة في 276 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

اقتباس: المشاركة الأصلية كتبت بواسطة yasminah مشاهدة المشاركة

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

http://www.khayma.com/HPINARAbic/htutor02.html

اتمنى يا اخي ان نزرع هنا بصمتنا الخاصة بنا حسب معرفتنا لهذه اللغات وشرحها بطريقتنا الخاصة بنا بناء على مدى الخبرة العملية لنا .
تحياتي .

مشكورة على المشاركة ولكن للسرعة في عرض الموضوع لاني اريد ان ادخل في php على كلاً المشاركات القادمة ستكون منم اعدادي بالتفصيل



{ أَلَمْ تَرَ أَنَّ اللَّهَ يُزْجِي سَحَابًا ثُمَّ يُؤَلِّفُ بَيْنَهُ ثُمَّ يَجْعَلُهُ رُكَامًا فَتَرَى الْوَدْقَ يَخْرُجُ مِنْ خِلَالِهِ وَيُنَزِّلُ مِنَ السَّمَاء مِن جِبَالٍ فِيهَا مِن بَرَدٍ فَيُصِيبُ بِهِ مَن يَشَاء وَيَصْرِفُهُ عَن مَّن يَشَاء يَكَادُ سَنَا بَرْقِهِ يَذْهَبُ بِالْأَبْصَارِ }صدق الله العظيم




اللهم صلى على سيدنا محمد


نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 11-29-2008 ]   رقم المشاركة 7

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,197

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 171
تم شكره 194 مرة في 50 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

نعم اخي الكريم وامامك شروح طويلة في ال php لذلك ادخل بها مباشرة لان شروحات ال html انا كتبتها كاملة ووافية والاعضاء المتابعين اعتقد انهم اصبحوا فيها تمام ان شاء الله .
تحياتي




  رد مع اقتباس
[ 05-07-2009 ]   رقم المشاركة 8

 

 

الصورة الرمزية a_khlifat

تاريخ التسجيل: Mar 2009

رقم العضوية: 3205

المشاركات: 1,295

الدولة/المدينة: ضاحية الياسمين

الارتفاع عن سطح البحر: 900 - 1000 متر

شكراً: 0
تم شكره 2 مرة في 2 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

مشكور بدرنقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلة




نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 06-15-2009 ]   رقم المشاركة 9

 

 

الصورة الرمزية ابو يامن

تاريخ التسجيل: Apr 2009

رقم العضوية: 3397

المشاركات: 724

الدولة/المدينة: الرمثا / النقع

الارتفاع عن سطح البحر: 512 م

شكراً: 69
تم شكره 13 مرة في 13 مشاركة

افتراضي رد: شرح مفصل للغة Html قبل البدء بدورة Php

مشكور نقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلةنقره لعرض الصورة في صفحة مستقلة




نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
رد


أدوات الموضوع
طرق مشاهدة الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع إلى


جميع الأوقات بتوقيت GMT +2. الساعة الآن 07:49 AM.