Advanced Search

المحرر موضوع: أساسيات في لغة html  (زيارة 9807 مرات)

0 الأعضاء و 1 ضيف يشاهدون هذا الموضوع.

نوفمبر 16, 2004, 05:57:30 صباحاً
زيارة 9807 مرات

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« في: نوفمبر 16, 2004, 05:57:30 صباحاً »
السلام عليكم ورحمة الله وبركاته

لغة ال html  أو Hyper Text Markup Language بمعنى لغة ترميز النصوص ,

هي لغة مستخدمة لانشاء صفحات الانترنت .




* ما الفرق بين ال html  ولغات برمجة أخرى ؟

- أنها بسيطة ورموزها سهلة .

- أنها ليست لغة برمجة بالضبط , فهي لا تحتاج لبرنامج يترجمها للغة الحاسب وهو ما يسمى

ال compiler  بل يتم تنفيذ تعليماتها مباشرة عبر متصفح الانترنت .

* لماذا نتعلم ال html وليس ال frontpage  ؟

الفرونت بيج هو برنامج يقدم لنا أكواد لغة ال html  على طبق من ذهب ومن الواجب تعلمه لمن

يريد انشاء موقع على الانترنت ؛ لأنه يسهل العمل كثيرا حيث أنه يحول النصوص العادية التي

نكتبها الى أكواد html  جاهزة .

لكن . .إذا أردنا تعلم اللغة من أساسها , وأن نمتلك قدرات أكثر في بناء المواقع , وأن نحترف

أكثر , يغدو من واجبنا أن نتعلم ال html  .. وبعد تعلُمها يصبح فهم ال frontpage  

أسرع من لمح البصر .

وبعد جولة متمعنة في الانترنت , وجدتُ موقعا ممتازا باللغة الانجليزية يحوي دروساً لهذه اللغة من

أول حرف فيها . والدروس مشروحة بشكل مبسّط  ومع أمثلة وفيرة ومفيدة جدا لمن يرغب

بانشاء موقع غزير الامكانيات . وسأقوم بإذن الله تعالى بترجمته في هذا الموضوع مع تمنياتي أن

يكون مفيدا .  وها هو الموقع :  

هنا

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

المرعبة '<img'>


* ألا توجد مواقع لتعلم ال html   باللغة العربية ؟
 
بلى , توجد .. لكنها لا تحوي هذا الكم من الأمثلة والأكواد الجاهزة التي يحويها هذا الموقع .

وللوصول لمواقع عربية يمكننا استغلال محرك البحث google   .


* ملحوظة : ستكون الترجمة بتصرف .


* متى سأنتهي من الثرثرة  وأبدأ بالترجمة  ؟

نبدأ الان على بركة الله


 ':laugh:'


 





نوفمبر 16, 2004, 06:04:35 صباحاً
رد #1

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #1 في: نوفمبر 16, 2004, 06:04:35 صباحاً »
* ما هو نظام الشبكة العالمية  www  ؟
    
World Wide Web وتُسمى اختصارا : الشبكة web  عبارة عن أجهزة كومبيوتر منتشرة في شتى أرجاء العالم

ومتصلة ببعضها البعض .

تستخدم أجهزة الكومبيوتر هذه معيار اتصال يدعى http وهو اختصار ل hyper text transfer protocol.


*كيف تعمل الويب ؟
 
- معلومات الويب مخزنة في مستندات تُدعى صفحات الويب web pages  .
      
- صفحات الويب هي ملفات مخزنة في أجهزة الحاسب تدعى خادمات الويب web servers .
      
-  أجهزة الحاسب التي تقرأ صفحات الويب تدعى زبائن الويب  Web clients .
    
- زبائن الويب تعرض لنا الصفحات عن طريق برنامج يسمى متصفح الشبكة Web browser
      
ومن أكثر متصفحات الانترنت شيوعا ال Internet Explorer  و  Netscape Navigator.



 * كيف يجلب المتصفحُ الصفحات ؟
 
- المتصفح يحضر صفحات الانترنت من الخادم server  عن طريق طلب .
 
- الطلب هو معيار http  يحوي عنوان صفحة .
 
- عنوان الصفحة يكون بهذا الشكل :   http://www.someone.com/page.htm


  

* كيف يعرض المتصفحُ الصفحات ؟  

-  جميع صفحات الانترنت تحوي أوامر للعرض .

-  المتصفح يعرض الصفحات بواسطة قراءة هذه الأوامر .

-  أكثر أوامر العرض شيوعا تُدعى مؤشرات ( أو وسوم )  html  .

-  مؤشرات ال  html  تبدو هكذا :



مثلا :

نموذج كود
<p>This is a Paragraph</p>

 

* من يحدد معايير الانترنت ؟

-  هذه المعايير لا تُحدد عن طريق المتصفح وانما عن طريق ال w3c  وهي اختصار

ل World Wide Web Consortium بمعنى اتحاد الشبكة العالمية الواسعة .

 

 * ما هو ملف html  ؟  
    
-  هو ملف نص يحوي مؤشرات ترميز markup tags
    
-  مؤشرات الترميز هذه ( تخبر) المتصفح كيف يعرض الصفحات .
    
-  ملف ال html   يجب أن يكون ذا امتداد htm أو html  ( وسنتحدث عن هذا لاحقا )
    
-  يمكن انشاء ملف html   بواسطة محرر نصوص .



*ما الذي نحتاجه كي نبدأ تعلم وتطبيق لغة ال html  ؟

- نحتاج لمتصفح انترنت مثل  Netscape Navigator أو   Internet Explorer    

وأحدهما متوفر لدينا طبعا والا ما كنا لنقرأ هذا الموضوع .

- برنامح محرر نصوص :  ولدينا برنامجان مشهوران :
 
1. برنامج word ويأتي مع ال office  وهو مجموعة البرامج من انتاج شركة Microsoft  
والتي تحوي البرامج شائعة الاستخدام مثل word    powerpoint    excel    .. الخ

2 . برنامج المفكرة ال notepad    وهو موجود ضمن البرامج الملحقة بنظام التشغيل

الويندوز  , ويمكن الوصول له عن طريق قائمة   إبدأ start   كما يظهر بالصورة التالية :

http://bb.domaindlx.com/myn13/notepad2.jpg

ويبدو شكل البرنامج هكذا :




في الردود القادمة ان شاء الله نبدأ بصفحتنا الاولى في الانترنت .

يتبع ..

 




نوفمبر 16, 2004, 07:42:59 صباحاً
رد #2

bioComputer

  • عضو متقدم

  • ****

  • 746
    مشاركة

  • عضو مجلس الحاسب

    • مشاهدة الملف الشخصي
    • www.c4arab.com
أساسيات في لغة html
« رد #2 في: نوفمبر 16, 2004, 07:42:59 صباحاً »
السلام عليكم ورحمة الله وبركاته

اخى السفيربارك الله فيك وتقبل الله منا ومنكم
هذه تحية بسيطة من اخوك بمناسبة العيد ووفقك الله لما فيه الخير والرشاد ..
 وجزاك الله كل خير على هدا الموضوع الرائع .. '<img'>

وارجو ان تتقبل منى هدا الرابط استكمالا لجهودك ..:cool:
والدى كنت ساعمل على  نقله هنا ولكنك سيقتنى بموضوعك الرائع هدا ..:)

هنا هنا ... كل ما تريده عن برمجة المواقع و إدارتها ..

وبالنسبة لموقع عربى خاص بالهتمل :

http://www.html4arab.com/home/Fullindex.html


ارجو يا اخى السفير الا اكون ازعجتك او افسدت عليك تسلسل موضوعك ..ولكن اردت توفير الجهد عليك ..
وبانتظار بقية موضوعك ان شاء الله ..:)




نوفمبر 16, 2004, 07:55:09 صباحاً
رد #3

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #3 في: نوفمبر 16, 2004, 07:55:09 صباحاً »
السلام عليكم

أهلا وسهلا بك أخي العزيز biocomputer .. اشتقنا لطلتك في منتدى الكومبيوتر .

شكرا جزيلا لك على موقع المرجع الكامل لتعلم ال html , وبارك الله فيك .

وحضورك يشرّف الموضوع '<img'>




نوفمبر 16, 2004, 01:16:25 مساءاً
رد #4

balsam

  • عضو خبير

  • *****

  • 1252
    مشاركة

  • أمينة المكتبة العلمية

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #4 في: نوفمبر 16, 2004, 01:16:25 مساءاً »
جزاكما الله خيرا أخواي الفاضلين "السفير" و "Biocomputer"

تحياتي،balsam '<img'>
كن بلسما إن صار دهرك أرقما
                وحلاوة إن صار غيرك علقما

نوفمبر 16, 2004, 03:34:42 مساءاً
رد #5

e.m.f

  • عضو خبير

  • *****

  • 3054
    مشاركة

  • عضو مجلس الفيزياء

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #5 في: نوفمبر 16, 2004, 03:34:42 مساءاً »
السلام عليكم:

لا اصدق عيني

 ':unclesam:'

دروس رائعة أخي العزيز السفير

لطالما اردت تعلم لغة من لغات البرمجة و منعني الكسل

الان لن يمنعني الكسل فانا تحت الامر الواقع  ':p'

انتظر بقية الموضوع بشوق........


فما كل من تهواه يهواك قلبــه ... ولا كل من صافيته لك قد صفا
إذا لم يكن صفو الوداد طبيعةٌ ... فلا خير في ودٍ يجيــــئ تكلفـا

نوفمبر 16, 2004, 07:35:48 مساءاً
رد #6

ابو يوسف

  • عضو خبير

  • *****

  • 10867
    مشاركة

  • مشرف اداري

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #6 في: نوفمبر 16, 2004, 07:35:48 مساءاً »
السلام عليكم

اخي الكريم السفير

جزاك الله كل خير على هذه السلسلة الرائعة والمفيدة

ننتظر بقية الدروس

'<img'>

نوفمبر 16, 2004, 08:18:29 مساءاً
رد #7

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #7 في: نوفمبر 16, 2004, 08:18:29 مساءاً »
السلام عليكم

شكرا جزيلا لكم إخوتي الكرام وبارك الله فيكم .

أخي اي ام اف .. لا للكسل ':p'   .. ويسعدني جدا أنك ستتابع الدروس وأتمنى أن تكون مفيدة للجميع .

تحياتي

نوفمبر 16, 2004, 09:10:10 مساءاً
رد #8

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #8 في: نوفمبر 16, 2004, 09:10:10 مساءاً »
السلام عليكم ورحمة الله وبركاته

قبل أن نبدأ بشرح رموز ال html دعونا ننشئ أول صفحة لنا بالانترنت وهنا علينا أن نتذكر أن

متصفحات الانترنت تختلف في عرض الصفحات أحيانا , وقد تظهر بعض الأمثلة بشكل مختلف من

جهاز لآخر .. أنا شخصيا لدي متصفح interner explorer الاصدار السادس .

ملحوظة مهمة يجب أن نتذكرها : أن طريقة عرض الأكواد في المنتدى تظهر الاشارة /  بعد

الرمز وليس قبله !  لكن لا حاجة لتعديلها عند النسخ واللصق .


نبدأ صفحتنا الاولى :

1. نذهب الى المفكرة notepad أو الى برنامج ال word  وننسخ فيه الكود التالي :

نموذج كود
<html>
<head>
<title>Title of page</title>
</head>
<body>
السلام عليكم

مرحبا بكم في المنتديات العلمية

هذه صفحتنا الاولى على الانترنت
</body>
</html>




2. بعد كتابة الكود نختار الخيار file من قائمة المفكرة ومن ثم لحفظ الملف نختار save as .

ونتذكر جيدا أين حفظنا الملف ولهذا أنصح بإنشاء مجلد جديد في المستندات my documents

بحيث نضع فيه الملفات التي سنتعامل معها خلال هذا الموضوع .




بعد أن نختار save as علينا أن نحفظ الملف بالامتداد html أو htm وهذه نقطة مهمة , لأننا

إن لم نفعل هذا , فلن يتم تطبيق الملف على المتصفح .  




3. نتوجه الى المتصفح ونختار الخيار : ملف file ومن ثم فتح open :




تظهر لنا النافذة التالية .. نضغط على استعراض أو browse :



ومنها نختار الملف الذي حفظناه . ونضغط على ok .


4. تكون النتيجة كالتالي :








- من المحبذ أن نخصص مجلدا للملفات التي سنعمل بها في هذا الموضوع .

- يجب أن نحفظ الملفات بالامتداد html أو htm .


* ماذا لو لم تظهر لنا صفحة الانترنت مثل الخطوة رقم4 ؟

في هذه الحالة علينا التأكد من أننا حفظنا الملف بالامتداد الصحيح وأننا اخترنا الملف المطلوب من

مجلداتنا في الخطوة 3 .

* هل يمكننا استخدام المتصفحين Internet Explorer و Netscape Navigator

معا ؟


نعم يمكن ذلك , لكن كما ذكرتُ أعلاه قد تظهر بعض الأمثلة بشكل يختلف عن الاخر من جهاز

لآخر .. كما يجب أن يكون المتصفح من الاصدار 3 وأعلى في كلا النوعين .

* هل تنفع هذه اللغة مع الأجهزة التي لا تملك نظام التشغيل Windows مثل الماكينتوش مثلا ؟

نعم ممكن .



في  الردود القادمة ان شاء الله نتعرف على رموز html الأولية ..

تحياتي  '<img'>




نوفمبر 16, 2004, 10:31:53 مساءاً
رد #9

e.m.f

  • عضو خبير

  • *****

  • 3054
    مشاركة

  • عضو مجلس الفيزياء

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #9 في: نوفمبر 16, 2004, 10:31:53 مساءاً »
السلام عليكم:

نجحت يا استاذ ':p'

فقط طبقت التطبيق الاول

':cool:'


فما كل من تهواه يهواك قلبــه ... ولا كل من صافيته لك قد صفا
إذا لم يكن صفو الوداد طبيعةٌ ... فلا خير في ودٍ يجيــــئ تكلفـا

نوفمبر 17, 2004, 05:42:33 صباحاً
رد #10

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #10 في: نوفمبر 17, 2004, 05:42:33 صباحاً »
السلام عليكم ورحمة الله وبركاته

ما شاء الله عليك أخي اي ام اف .. طالب مجتهد  ':laugh:'

========================

وسوم html

 
- مستندات html   هي ملفات نصية مكونة من عناصر html .

- عناصر ال html   تُعرَّف بواسطة وسوم ال html .

- وسوم ال html   تُستخدم لتكوين عناصر ال html  

- وسوم ال html   محاطة بالقوسين > و <  ويسميا بالانجليزية angle brackets .

- بشكل عام تأتي وسوم html  أزواجا لكن ليس دائما كما سنرى لاحقا .

- الوسم الأول في زوجي الوسوم يسمى وسم البداية والأخير يسمى وسم النهاية .

- النص بين وسمي البداية والنهاية يُسمى محتوى العنصر .

- لا فارق في الوسوم بين الحروف الكبيرة  UPPERCASE أو الحروف

الصغيرة lowercase.



الان فلنتأمل المثال في الرد السابق .. نميز الوسوم التالية :




1. وسم البداية هو أول وسم في مستند ال html ويدل متصفح الانترنت لدينا أن هذا ملف html.

ووسم النهاية يدل المتصفح على أن المستند ينتهي هنا .

2. ما بين هذين الوسمين  توجد معلومات عن الصفحة , وهي لا تظهر في التطبيق .

3. النص بين هذين الوسمين هو عنوان الصفحة .

4. النص بين هذين الوسمين هو ما سيظهر في المتصفح عند التطبيق .

أي أن مبنى مستند ال html يبدو هكذا :





* ما هي عناصر html ؟

مثال :

نموذج كود
<title>Title of page</title>



يبدأ هذا المثال بوسم البداية

المحتوى هو هذه الكلمات :  Title of page

وينتهي بوسم النهاية :

إذن عنصر Html مكون من وسوم لها وظيفة معينة .





* عرفنا  أنه لا فرق بين الحروف الكبيرة والصغيرة لكن من المفضل الاعتياد على الكتابة

بالحروف الصغيرة وذلك لأن النسخ القادمة من html تتطلب الكتابة بالحروف الصغيرة .



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

المزيد من الوسومات .

يتبع إن شاء الله ..

تحياتي






نوفمبر 17, 2004, 09:57:43 صباحاً
رد #11

e.m.f

  • عضو خبير

  • *****

  • 3054
    مشاركة

  • عضو مجلس الفيزياء

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #11 في: نوفمبر 17, 2004, 09:57:43 صباحاً »
السلام عليكم:

نموذج كود

<title/>ما شاء الله شرح سهل و شيق<title>



 ':cool:'





فما كل من تهواه يهواك قلبــه ... ولا كل من صافيته لك قد صفا
إذا لم يكن صفو الوداد طبيعةٌ ... فلا خير في ودٍ يجيــــئ تكلفـا

نوفمبر 17, 2004, 03:32:43 مساءاً
رد #12

bioComputer

  • عضو متقدم

  • ****

  • 746
    مشاركة

  • عضو مجلس الحاسب

    • مشاهدة الملف الشخصي
    • www.c4arab.com
أساسيات في لغة html
« رد #12 في: نوفمبر 17, 2004, 03:32:43 مساءاً »
بارك الله جهودك اخى السفير .... استمر فالموضوع شيق خصوصاً انه على هيئة سؤال وجواب ..:cool:
لدى استفسار ... هل تسمح لى باقتباس بعض ردوددك ..

وشكرا لك'<img'> '<img'>




نوفمبر 17, 2004, 04:10:16 مساءاً
رد #13

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #13 في: نوفمبر 17, 2004, 04:10:16 مساءاً »
السلام عليكم

يمكنك ذلك بكل تأكيد أخي العزيز بيو كومبيوتر

أخي اي ام اف .. يسعدني جدا متابعتك للموضوع .. جزاك الله خيرا .

تحياتي




نوفمبر 17, 2004, 06:36:06 مساءاً
رد #14

الأحيائي الصغير

  • عضو خبير

  • *****

  • 6258
    مشاركة

  • مشرف علوم الأرض

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #14 في: نوفمبر 17, 2004, 06:36:06 مساءاً »
ما شاء الله تبارك الله

الله يعطيك ألف ألف عافية أخي العزيز "" السفير ""


و جزاك الله كل خير أخي الحبيب على الدروس الجميلة


 '<img'>
اللهم أنت الله الذي لا إله إلا أنت الأول فليس قبلك شيء و الآخر فليس بعدك شيء و الظاهر فليس فوقك شيء و الباطن فليس دونك شيء أسألك اللهم بأسمائك الحسنى و صفاتك العليا و باسمك الأعظم الذي إذا دعيت به أجبت و إذا سئلت به أعطيت أن تنتقم لنبينا و حبيبنا محمد عليه أفضل الصلاة و أتم التسليم من كل من أرد به و بدينه و بالمسلمين السوء إنك يا مولنا على كل شيء قدير