الملاحظات
ركن لغات البرمجه
:: لغات البرمجه php و asp و Ajax و Java و غيرها

الدرس الثاني: مقدمة إلى Html

بسم الله الرحمن الرحيم إخوتي الكرام أهلا بكم في الدرس الثاني من الدورة .. لنبدأ الدرس مباشرة : ماهي الشبكة العالمية World Wide Web ؟

Like Tree2معجبون
  • 2 أضيفت بواسطة ~ النسر ~

اضافة رد
رقم المشاركة # 1  
أضيفت بتاريخ 25 - 10 - 2006 عند الساعة 07:55
صورة '~ النسر ~' الرمزية
~ النسر ~
:: عضو نشيط ::
~ النسر ~ غير متواجد حاليآ بالمنتدى
بيانات موقعي
اسم الموقع: لحن
اصدار المنتدى: 3.7.0
تاريخ الإنضمام: 26 - 08 - 2005
رقم العضوية : 7673
الإقامة: حــــائل
المشاركات: 3,322
قوة السمعة : 927
أرسل رسالة بواسطة MSN إلى ~ النسر ~
افتراضي

الدرس الثاني: مقدمة إلى Html


بسم الله الرحمن الرحيم

إخوتي الكرام أهلا بكم في الدرس الثاني من الدورة ..
لنبدأ الدرس مباشرة :

ماهي الشبكة العالمية World Wide Web ؟

كلكم يكتب ثلاث حروف في بداية كل عناوين المواقع
التي يزورها على الانترنت ألا وهي (www)
وهذه الحروف هي اختصار لجملة World Wide Web أو ختصارا Web أو W3.


الويب Web هي شبكة تربط جميع أجهزة العالم ، مما يتيح لجميع الأجهزة المربوطة مع بعضها البعض في الشبكة (الويب Web) للإتصال ببعضها ،

وهذه الأجهزة مربوطة ببعضها عبر بروتوكول معتمد متعارف عليه في الشبكة Web ألا وهو HTTP والذي يرمز إلى Hyper Text Transfer Protocol.

ولذلك نحن نكتب في بداية عنوان أي موقع نريد أن نزوره هذه الحروف ..
http://www

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

والبروتوكول هو عبارة عن طريقة أساسية لا بد منها لدخول المواقع ، و

يوجد أيضا بروتوكولات أخرى تهم أصحاب المواقع مثل بروتوكول : FTP والتي ترمز إلى File Transfer Protocol وهو يستخدم لنقل الملفات من الجهاز إلى السيرفر والعكس.


أما الجملة التي نقوم بكتابتها بعد http://www على سبيل المثال :
http://www.islammen.net تنقسم إلى قسمين ، القسم الأول هو اسم النطاق الدومين islammen والقسم الثاني هو الامتداد .com وهو عبارة عن تصانيف لفهرسة المواقع وتمييزها عن بعضها:

فمثلا com يرمز إلى commercial أي (تجارة) و net ترمز إلى network أي (شبكة) و org ترمز إلى organization أي (منظمة) و edu أي (education) أي تعليم ..


وهناك الكثير من الامتدادات التي يمكن استخدامها.
وأخيرا يسمى هذا السطر كله URL اختصارا لـ Uniform Resource Locator.

الدرس الثاني: مقدمة إلى Html

كيف تعمل الـ(WWW)؟


والآن بعد أن عرفنا ما هي الـWWW وما هو HTTP

نود أن نعرف كيف تعمل الشبكة ، فكما وضحنا سابقا أن WWW :

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


أما الأجهزة التي تقوم بتصفح البيانات الموجودة في أجهزة السيرفر تسمى العميل Client ، وأجهزة العميل حتى تتصفح البيانات الموجودة على الخوادم (السيرفرات) تحتاج إلى برنامج يسمى المتصفح Explorer وهناك عدة أنواع من المتصفحات ،

منها Internet Explorer التابع لشركة مايكروسوفت ويوجد Netscape ويوجد Mozilla ، حيث يستخدم المتصفح لإرسال عنوان الموقع URL إلى الشبكة Web ،

حيث تبحث الشبكة عن هذا العنوان والذي يكون مربوطا بالسيرفر ، فكل سيرفر على الانترنت له عنوان رقمي يسمى IP Address اختصارا لـ Internet Protocol ، يتم ربطه باسم النطاق الـ URL عبر وسيلة تسمى DNS اختصارا لـ Domain Name System ، وبعد أن تجد الشبكة web العنوان المطلوب تقوم بالدخول إلى السيرفر وإرسال البيانات المطلوبة إلى الجهاز العميل وتظهر له البيانات ضمن شاشة المتصفح ،

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



الدرس الثاني: مقدمة إلى Html

كيف يعرض المتصفح البيانات ؟


هنا يأتي دور لغة HTML والتي ترمز إلى Hyper Text Markup Language ، فهي المسئولة عن عرض البيانات على شكل صفحات في المتصفح أو المستعرض ، فلغة HTML هي عبارة عن مجموعة من الأوامر التي يفهمها المتصفح بطريقة خاصة ويحولها إلى صفحة بيانات يعرضها بشكل منسق وجميل للعميل.


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



الدرس الثاني: مقدمة إلى Html

ما هو ملف HTML ؟

هو ملف نصي يحتوي على أوسمة HTML التي تخبر المتصفح كيف يعرض الصفحة ويكون امتداد ملفات HTML كما يلي : PAGE.html أو PAGE.htm ..

طبعا كلمة PAGE هي اسم الصفحة.
يمكن استخدام أي محرر نصوص لكتابة أكواد HTML ولكن نحن سنستخدم كما اتفقنا في الدرس الأول PHP Coder أو أي محرر نصوص HTML و PHP وذلك لأمرين ،

الأول: أن المحررات المتخصصة هذه تقوم بتلوين الأكواد مما يسهل علينا قرائتها لاحقا
لتعديلها أو إصلاحها ،

وثانيا: تحتوي هذه المحررات على مرجع لأوسمة HTML
وذلك ليسهل عليك الرجوع إليها بدلا من حفظها ، فحفظها مستحيل على ما أظن!




لنبدأ البرمجة !

قم بتشغيل المحرر الذي تستخدمه ، ويفضل أن يكون PHP Coder .. اكتب الشفرة التالية :


كود PHP:
رمز PHP:
 <html
<
head
<
title>موضوع الصفحة</title
</
head

<
body
أول صفحة أكتبها بلغة HTML. <bهذا النص عريض.</b
</
body
</
html

احفظ الصفحة باسم mypage.html
،
داخل المجلد www الموجود داخل مجلد wamp الموجود في القرص C..



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

عند حفظ الملف لا تنسى أن تكتب اسم الملف مع الامتداد ..

الدرس الثاني: مقدمة إلى Html

لنشرح الأوسام التي كتبناها !

أول وسم تكتبه في ملف HTML هو <html> ، هذا الوسم يخبر المتصفح أن هذه هي بداية ملف HTML ، بينما تكون نهاية ملف HTML دائما بالوسم </html> ، فهذا الوسم يخبر المتصفح أن هذه هي نهاية ملف HTML.


هذين هما الوسمين الذين يجب أن تكتب جميع أوسام وشفرات HTML داخلهما ، أي شفرة خارج هذين الوسمين يعني أن المتصفح لن يعتبرها شفرة HTML.


الآن ينقسم كود HTML المكتوب داخل الوسمين <html></html> إلى قسمين رئيسيين :


1-قسم الهيدر (الرأس) header ويبدأ بالوسم <head> وينتهي بالوسم </head> ، الكود المكتوب داخل هذين الوسمين لن يظهر في المتصفح ، وهو عبارة عن معلومات وبيانات عن الملف المكتوب لا تظهر على الشاشة وتكون مخفية.



2-قسم البودي (الجسم) body ويبدأ بالوسم <body> وينتهي بالوسم </body> ، الكود المكتوب داخل هذين الوسمين هو الكود الذي سيظهر على شاشة المتصفح ، ويحتوي النصوص والصور والجداول والروابط التشعبية والنماذج وكل ما إلى ذلك من الأمور التي تظهر للعميل.


لنعطيكم مثال واحد للشفرات التي تكتب في كل قسم :
أولا قسم الهيدر : لقد كتبنا الوسم : <title>موضوع الصفحة</title> داخل الوسم <head></head> ، ووظيفة هذا الوسم هو إظهار اسم أو موضوع الصفحة على رأس المتصفح في عمود الموضوع Title Bar.



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



قم بتشغيل سيرفر الأباتشي وافتح المتصفح إكسبلورر ثم اكتب عنوان الصفحة
في المكان الذي حفظتها به ..
http://localhost/mypage.html



الدرس الثاني: مقدمة إلى Html

يجب أن نخلص إلى ثلاث نتائج مهمة جدا ، ستنبني عليها دراستك للغة HTML كلها ،
وهي كما يلي :
أولا: جميع أوسام HTML تكتب داخل قوسين مثلثين < اسم الوسم >.



ثانيا: جميع أوسام HTML عبارة عن جزئين ، جزء يبدأ الوسم وجزء ينهيه ، الجزء الي ينهي الوسم هو نفس الجزء الذي يبدأ الوسم ولكن بفارق واحد بسيط هو وجود الشرطة المائلة قبل إسم الوسم.
البداية : <html> ، النهاية : </html>.



ثالثا: الأوسام تحوي بعضها حسب الأسبقية ، يعني وسم <b></b> موجود داخل وسم <body></body> والذي بدوره موجود داخل وسم <html></html> وهو أكبر أوسام HTML ولا يحويه أي وسم آخر إلا في حالات معينة سنشرحها لاحقا ، فيجب الانتباه متى تبدأ الوسم ومتى تنهيه ، انظر الشكل التالي :

الدرس الثاني: مقدمة إلى Html


إلى هنا نأتي لنهاية درسنا الثاني في سلسلة دورة PHP الشاملة ،
وما زلنا في المرحلة الأولى : دورة سريعة في HTML ...

أتمنى أن تكونوا قد استفدتم من الدرس الحالي ، وانتظرونا في الدرس القادم إن شاء الله ..

s777s.net و MasTeR.BoY معجبون بهذا .
أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 07:57
رقم المشاركة # 2
:: عضو نشيط ::
تاريخ الإنضمام: 09 - 12 - 2004
رقم العضوية : 660
الإقامة: ::ولاية تــرايـدنــت::
المشاركات: 297
قوة السمعة : 117
افتراضي

اشكر اخوي كل الشكر والله استفدت من الموضوع
شيء كثير كنت اجهله

يعطيك العافيه



تم التقييم

أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 08:03
رقم المشاركة # 3
:: عضو نشيط ::
صورة '~ النسر ~' الرمزية
تاريخ الإنضمام: 26 - 08 - 2005
رقم العضوية : 7673
الإقامة: حــــائل
المشاركات: 3,322
قوة السمعة : 927
أرسل رسالة بواسطة MSN إلى ~ النسر ~
أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 10:52
رقم المشاركة # 4
:: عضو نشيط ::
تاريخ الإنضمام: 14 - 11 - 2005
رقم العضوية : 12120
الإقامة: ::.traidnt::
المشاركات: 464
قوة السمعة : 95
افتراضي

يعطيك العافيه اخوي / جارح الشوق

أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 13:56
رقم المشاركة # 5
x_5
:: TRAIDNT ::
:: رفيق الدرب ::
صورة 'x_5' الرمزية
تاريخ الإنضمام: 20 - 09 - 2004
رقم العضوية : 11
الإقامة: :: UAE ::
المشاركات: 244,804
قوة السمعة : 11111
افتراضي

يعطيك العافية أخوي

أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 14:20
رقم المشاركة # 6
:: عضو نشيط ::
صورة 'روؤف ديك' الرمزية
تاريخ الإنضمام: 25 - 12 - 2005
رقم العضوية : 14748
الإقامة: الــكــويــت
العمر: 23
المشاركات: 322
قوة السمعة : 24
افتراضي

يعطيك العافيه اخوي / جارح الشوق .



وانا على فكرة سجلت بالدورة , والله استفد من موضوعك اشياء كثيرة غير php > html


وان شاء الله نشوف دروسك .

كــل عــام وانــتـم بــخــيــر
أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 16:12
رقم المشاركة # 7
:: عضو نشيط ::
صورة 'Code Man' الرمزية
تاريخ الإنضمام: 30 - 11 - 2005
رقم العضوية : 13121
الإقامة: :: TraidnT ::
المشاركات: 1,318
قوة السمعة : 517
أضيفت بتاريخ 25 - 10 - 2006 عند الساعة : 17:13
رقم المشاركة # 8
:: عضو جديد ::
تاريخ الإنضمام: 24 - 10 - 2006
رقم العضوية : 27306
المشاركات: 4
قوة السمعة : 50
افتراضي

موضوع رائع جدا جدا أتمنى الاستمرار وفقك الله أخي الكريم .

أضيفت بتاريخ 10 - 12 - 2006 عند الساعة : 19:05
رقم المشاركة # 9
:: عضو نشيط ::
تاريخ الإنضمام: 06 - 03 - 2006
رقم العضوية : 22323
المشاركات: 1,389
قوة السمعة : 942
أضيفت بتاريخ 12 - 12 - 2006 عند الساعة : 09:53
رقم المشاركة # 10
:: عضو نشيط ::
صورة 'ssdaa.com' الرمزية
تاريخ الإنضمام: 20 - 08 - 2005
رقم العضوية : 7428
الإقامة: الرياض
المشاركات: 1,641
قوة السمعة : 932
افتراضي

html عزيزي يحتاج اكثر من درس حتى يتقنها الشخص بدون الاعتماد على برامج امثال الفرونت بيج

وبحكم ارتباطها او اعتماد php عليها لابد يكون عند المتقدم للدوره درايه كافيه بها

اعتقد موضوع او موضوعين مايكفون لها <<<< وجهة نظر

تمناتي لك بالتوفيق في الدوره وان شاء الله تكون منفعتها عامه

بدئنا من جديد وبالله التوفيق


قالب ssdaa gv4 العاب لسكربت onarcade
أضيفت بتاريخ 12 - 12 - 2006 عند الساعة : 14:12
رقم المشاركة # 11
:: عضو نشيط ::
صورة 'MasTeR.BoY' الرمزية
تاريخ الإنضمام: 24 - 10 - 2006
رقم العضوية : 27125
الإقامة: بـلاد الـحرمـيـن
المشاركات: 750
قوة السمعة : 240
أرسل رسالة بواسطة MSN إلى MasTeR.BoY
افتراضي

الله لايضرك اخوي همس الجرووح

نحتاج مثل هذه الدروس

الله يباركـ فيكـ وكمل مشواركـ وكلنا معكـ متابعين

""""""

عسانا ماننحرم

اتمنى لك كل التوفيق

الحمدُ لله
اضافة رد

العلامات المرجعية

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

غلق/فتح (الكل) ضوابط المشاركة
لا يمكنك اضافة مواضيع جديدة
لا يمكنك اضافة مشاركات
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

رمز [IMG] : متاحة
رمز HTML : معطّلة
المراجع : معطّلة
Refbacks are متاحة



الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 11:02.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)


Powered by vBulletin® Version 3.8.7 .Copyright ©2000 - 2014, Jelsoft Enterprises Ltd
SEO by vBSEO 3.6.0 ©2011, Crawlability, Inc.
Google

SEO by vBSEO 3.6.0 ©2011, Crawlability, Inc.