دورة لغة HTML : الدرس الرابع الفقرات والقوائم

دورة لغة HTML : الدرس الرابع الفقرات والقوائم

دورات برمجية HTML

السلام عليكم ورحمة الله وبركاته وكل عام وانتم بخير اهلاً بكم الى درس جديد من دورة HTML وسنتعلم اليوم ترتيب وتنسيق الصفحات بشكل عام ان شاءالله
صحیح أن استخدامك للألوان والرسومات في الصفحة یضفي علیھا نوعاً من الحیویة، وأن الخطوط تعطي صفحتك رونقاً وجمالاً. لكنك إن لم تھتم بترتیب صفحتك أو تقضي بعض الوقت في تنسیق ھیكلھا العام وتنظیم فقراتھا وقوائمھا، فإنه من الصعب علیك لحصول على صفحة ویب ناجحة. فالترتیب ھو الخطوة الأولى لجذب اھتمام الزائر أو القارئ لصفحتك وتسھل علیه فھم الخطوط العریضة للصفحة.
للتذكير هناك بعض الوسوم المهمة التي تعرفنا عليها سابقاً وهي اولاً الوسم < P > الذي يقوم بانهاء الفقرة. وثانياً الوسم < BR > الذي يقوم بانهاء السطر الحالي وبدء سطر جديد.

لقد تعلمنا سابقاً ان الوسم < P > هو وسم مفرد لكن يمكن استخدامه كوسم مزدوج ( < P >...< P/ > ) وفي هذه الحالة يصبح بإمكاننا استخدامه لتحديد اتجاه الفقرة واتجاه النص فيها
وسنستحدم معه الخصائص DIR ،ALIGN.

الخاصية ALIGN تحدد محاذات الفقرة وهي تأخذ القيم (LEFT,RIGHT,CENTER) وسأوضحها لكم ببعض الامثلة

مــثـــال:
ـــــــــ
المثال الاول

المثال الثاني

المثال الثالث والأخير

وايضاً يوجد وسوم اخرى نستخدمها لتنسيق الفقرات وهي الوسوم < BLOCKQUOTE > ... < BLOCKQUOTE/ > (وسوم الفقرات المقتبسة), ووظيفتها تمييز الفقرة او النص من خلال ادراج مسافة اضافية على الهامشين الايمن والايسر لها.
والحقیقة أنك تستطیع وضع عدة وسوم معاً إذا أردت إدراج ھوامش أكبر. كما في المثال التالي:

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

والآن تأمل ھذا الشكل وحاول أن تستنتج كیف قمت بإعداده...!؟

.
ربما توصلت إلى أني استخدمت عدداً كبیراً من وسوم الفراغات &;nbsp ونھایة
السطر< BR >.
حسناً، إستنتاجك لا بأس به ولكنه لیس دقیقاً فأنا لم أستخدم أیاً من ھذه الوسوم ھنا.
بل كل ما فعلته بعد إعداد ھذا الشكل ھو وضعه ضمن:
< PRE > ... < /PRE >
وھما اختصار لكلمة Preformated أي المنسق مسبقاً. وبالفعل فقد احتفظ ھذا الشكل بالتنسیق المسبق الذي تم إعداده به. لكن تم تحویل الخط إلى خط موحد المسافات (راجع الدرس السابق) ولو لم أقم بوضعه ضمن ھذه الوسوم لكانت النتیجة كالتالي:
A B C D E F G H I J K L M N O P Q R S T
لاحظ أن ھذا الوسم یستخدم مع الفقرات التي لا نحتاج فیھا إلى تنسیقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات العادیة موحدة الخط والتنسیقات.
ــــــــــــــــــــــــــ
الــقــوائــم
ــــــــــــــــــــــــــ
تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظیم البیانات في قوائم وباستخدام عدة خیارات. وھناك نوعین من القوائم:
1-أولھما المتسلسلة Lists Ordered.
والیك المثال التالي علیھا
أسماء بعض المدن

القدس
1. 
   عمان
   
2. 
   بيروت
   
3. 
   دمشق
   
4. 
   الرياض
   
5. 
   

... 2-وثانیھما القوائم غیر المتسلسلة Unordered Lists وھذا مثال علیھا: أسماء بعض الدول:

الاردن
• 
  فلسطين
  
• 
  سوريا
  
• 
  لبنان
  
• 
  السعودية
  
• 
  

........ عند التعامل مع القوائم بنوعیھما نحتاج إلى وسوم خاصة بتحدید بدایة ونھایة القائمة ووسوم تحدد بنود ھذه القائمة. بالنسبة للقوائم المتسلسلة نستخدم الوسوم: < OL > ... < OL/ > ــــــــــــــ أما بالنسبة للقوائم غیر المتسلسلة فنستخدم < /UL > ... < UL > ــــــــــــــ إذن عندما قمت بإنشاء القوائم السابقة استخدمت الأوسام التالیة:

عمان< LI > القدس< LI > دمشق< LI > بيروت< LI> الرياض< LI >

.. < UL > < LI > الأردن فلسطين< LI > سوريا< LI > بيروت< LI > السعودية< LI > .... والخاصیة الوحیدة التي تستخدم مع ھذه الوسوم ھي TYPE ووظیفتھا تحدید شكل الرمز الظاھر مع بنود القائمة، وعادة تستخدم مع وسوم بدایة القوائم

أو
وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطیع استخدامھا أیضاً مع وسم البنود < LI > لإعطاء تحكم أكبر في مظھر القائمة من خلال تحدید رمز مختلف لكل بند. عند وضعھا ضمن تعریف القوائم المتسلسلة تأخذ القیم: A, a, I, i التي تغیر رموز الترقیم من الأرقام العادیة الإفتراضیة (والتي رمزھا 1) إلى ترقیم باستخدام الأحرف اللاتینیة الكبیرة أو الصغیرة، أو باستخدام الأرقام الرومانیة كما ترى في الجدول التالي:

والحدیث عن ھذه الخاصیة یقودني إلى الحدیث عن مسألة مھمة في لغة HTML وھي مسألة الوسوم والخصائص المحددة بمتصفح معین دون غیره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غیره. والسبب في ذلك أن ھذه الخاصیة تستخدم أیضاً مع القوائم غیر المتسلسلة، لكن لیس بصورة مطلقة...كیف؟ أنت ترى أن الرمز الموجود عند كل بند في القائمة ھو عبارة عن نقطة سوداء یطلق علیھا اسم Disc وھي المعرفة ضمناً في خاصیة TYPE.لكن ھناك رموز أخرى یمكن إظھارھا وھي المربع square، والدائرة المفرغة circle وتعرف بالشكل التالي:

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

ھناك نوع خاص من القوائم یدعى قوائم الشرح أو التعریفات Definition Lists وكما یدل الإسم تستخدم عندما نرید إدراج قائمة من المصطلحات یتبع كل واحد منھا شرح أو تعلیق.

HTML

Hyper Text Markup Language


WWW

World Wide Web


FTP

File Transport Protocol


GIF

Graphical Interchange Format
www.dinaro.com/vb3
60


JPG, JPEG

Joint Photographic Experts Group


ونحتاج لإنشاء ھذه القوائم إلى ثلاثة وسوم: الأول < DL > ... < DL/ > لتعریف بدایة ونھایة القائمة. والثاني < DT > ویوضع قبل كل مصطلح لتحدیده، وھو وسم مفرد. ما الثالث فھو < DD > وھو وسم الشرح أو التعلیق وھو أیضا مفرد. ـــــــــــــــــــــــــ الى هنا ينتهي هذا الدرس والى اللقاء الى درس جديد والسلام عليكم ورحمة الله وبركاته

Ahmed alqaisi تمّ النشر بـ 9:34 ص أضف تعليق

دورة لغة HTML : الدرس الثالث الخطوط

دورة لغة HTML : الدرس الثالث الخطوط

دورات برمجية HTML

السلام عليكم ورحمة الله وبركاته اهلاً بكم في درس جديد نتعلم فيه كيف نخصص النصوص والخطوط في لغة HTML.
في الدرسين السابقين لم نتعامل مع الخطوط فلقد اهتممنا بالاساسيات وثم الالوان واليوم الخطوط ان شاءالله تعالى.
ونحن تركنا الخطوط على الاعدادات الافتراضية وكما تعلمون فهناك الكثير من الخطوط وقد تتسائلون ما الخطوط التي استخدامنها في الدروس السابقة؟
لقد استخدمنا خط نوعه Times New Roman وحجمه 3 (بمقیاس متصفحات الإنترنت).

اذا كما تعلمون فلكل جزء في لغة HTML وسم يتحكم فيه والوسم الخاص بالخط هو < FONT > ... < FONT/ >. وھو یقوم بالتحكم بالخطوط من حیث النوع اللون والحجم. أما الخصائص التي نستخدمھا مع ھذا الوسم والوسوم الأخرى للخطوط فھي كالتالي:

الان قد تقول اننا ثبتنا حجم الخط في الحد الاعلى عند الدرجة +4 وعلى +2 للحد الادنى فما فائدة وجود درجات اقل من الحد الادنى ودرجات اكبر من الحد الاعلى؟
ستحتاج الى هذه الدرجات في حال انك غيرت الحجم الافتراضي للخط لنقل على سبيل المثال الى 1 بدلاً من 3 ففي هذه الحالة ستحتاج الى تلك الدرجات لتمثيل الحجم الاكبر منه واذا غيرت الحجم الافتراضي الى 7 ستحتاج لتلك الدرجات لتمثيل الاحجام الاصغر منه.

بعض الأمثلة:
ـــــــــــ
طبعاً النتيجة مع كل مثال

الان سننتقل الى الوسم الاخر المتعلق بالخطوط وهو الوسم < BASEFONT >.
طبعاً ستتسائلون ما وظيفة هذا الوسم؟
وظيفته هي التحكم بكامل اعدادات الخط في كامل الصفحة من لون الخط الى حجمه الى نوعه.
طبعاً قد لاحظتم انه وسم مفرد فلا حاجة الى وسم البداية او النهاية طالما انه يتعامل مع الصفحة ككل او كامل الصفحة ان صح التعبير,طبعاً يفضل وضعه مباشرة بعد الوسم < BODY >.طبعاً سنستخدم معه نفس الخصائص التي استخدمناها مع الوسم السابق < FONT > (نستطیع استخدام الخاصیة Name معه بدلاً من Face)
وايضاً سنستخدمه بنفس الطريقة من دون اي اختلاف وسأوضح لكم بمثال بسيط:
< BASEFONT Name=" Arial " COLOR=" #FF0000 " SIZE=" 5 " >
وبدراسة ھذا المثال نستنتج أنه یقوم بتعدیل الخط الافتراضي للصفحة بحیث یصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سیطبق علیھا ھذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم < Font > ... < Font/ > لتعدیلھا والتحكم بمظھرھا كما فعلنا في الأمثلة السابقة، فھي أكثر تحدیداً وأكثر مرونة من الوسم < BASEFONT > .
طبعاً بالحديث عن الالوان فلقد ذكرت لكم في الدرس السابق بعض الخصائص التي تتعلق باللون الاساسي للنص في الصفحة وهي الخاصية TEXT التي تكتب مع الوسم < Body > والتي استخدمناھا لتحدید لون نص الصفحة.
لا یوجد تعارض بین ھذه الخاصیة وخاصیة Color في الوسم < BASEFONT > فأنت بكل بساطة تستطیع استخدام أي منھما في صفحتك. وإذا حدث واستخدمت كلاھما
فإن اللون المحدد مع الوسم < BASEFONT > ھو الذي سیطبقه المتصفح ویعتمده.

ھناك وسوم خاصة تستخدم لتمییز العناوین Headings في صفحات الإنترنت وھي:
< Hn > < Hn/ >
وحرف n ھو رقم بین 6-1 یمثل مستوى العنوان.

الان سننتقل الى التأثيرات التي يمكننا اضافتها الى الخطوط:
1-الخط الغامق والعريض الاسود
لتطبيق التأثير سنستعمل وسمين وهما :
< b >...< b/ >
ولجعل النص عريض وغامق عليك وضع النص او كتابته بين الوسمين بالضبط
وأيضاً سنستعمل وسم < STRONG > ... < STRONG/ >
وللتوضيح اكثر :

2-الخط المائل:

3-الخط المسطر(اسفله سطر):

4-الخط المرتفع:

5-الخط المنخفض:

6-الخط الكبير:

7-الخط الصغير:

8- نص يتوسطه خط:
< b>< strike >هنا النص< /strike >
وايضاً يمكنكم استخدام وسم < s/ >...< s >

الان ساقدم مثال ونتيجته وسأشرحه:

المثال:

النتيجة:

نستنتج من المثال انه يمكننا استخدام اكثر من وسم وخاصية وتنسيق في نفس الوقت ولنفس النص وذلك لجميع الوسوم ليس فقط للخطوط وايضاً نستنتج انه لا اهمية لترتيب الوسوم فالنتيجة نفسها.
وكما تلا حظون من المثال فقد كانت النتيجة نص مائل وعريض ومسطر وذلك لاننا استخدمنا الوسوم :
< /B >< i >< U >...< U/ > < I/ > < B >< b >

مثال اخر:

كما تلاحظون قد تحكمنا في اللون من خلال خاصية FONT COLOR ولكن قد تقولون انه مكتوب this color is red لا يهم المكتوب المهم هوالكود بعد خاصية FONT COLOR فهو الذي يحدد اللون كما شرحنا في الدرس السابق.
عند استخدام الوسوم المتعددة في مقطع واحد یجب مراعاة عدم التداخل بینھا.كيف ذلك؟
عليك ان تعتمد قاعدة بسيطة وهي ان الوسم الذي تبدأ به اولاً تنهيه اخيراً ولا يجب ان تكون الوسوم تبدأ وتنتهي بنفس الترتيب.

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

Ahmed alqaisi تمّ النشر بـ 5:25 ص أضف تعليق

دورة لغة HTML : الدرس الثاني الألوان

دورة لغة HTML : الدرس الثاني الألوان

دورات برمجية HTML

بسم الله الرحمن الرحيم اعتذر عن التأخر في تقديم هذا الدرس ان شاءالله اليوم سنتعلم الخصائص التي سنتقوم باضافتها للوسم < BODY > لتخصيص الشكل العام للصفحة وايضاً الألوان.

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

طبعاً سنستخدم الصفحة التي صممناها وولكن قد تقول اين هي هذه الصفحة وكيف سأحفظها بتطبيقك للدرس الاول يمكنك نسخ جميع الاكواد والوسوم ونقلها الى اي محرر نصوص وطبعاً عند الضغط على حفظ سيقوم محرر النصوص باختيار صيغة HTML تلقائياً ويمكنك التعديل عليها متى شئت وهناك العديد من محررات النصوص اذكر لك اشهرها:

Sublime text 3
واحد من افضل محرر النصوص سهل الاستخدام وخفيف وصغير الحجم ومتواجد على معظم الانظمة ويوجد منه نسخة مجانية واخرى مدفوعة ولعل من اهم ميزاته التكملة التلقائية ويتيح لك تحرير النصوص البرمجية لكثير من لغات البرمجة من اهمها:
C, C , C#, CSS, D, Erlang, HTML,
Groovy, Haskell, HTML, Java,
LaTeX, Lisp, Lua, Markdown,
Matlab, OCaml, Perl, PHP, Python,
R, Ruby, SQL, TCL, Textile and XML

طبعاً لن أقوم بتكرار كتابة وسوم البدایة طالما أن عملنا یتركز في الجزء المخصص لمحتویات الصفحة نفسھا أي ضمن الوسمین < BODY > ... < BODY/ >.

طبعاً يمكنك ايضاً بعد حفظ صفحتك ان ترى النتيجة في المتصفح بعد ان تقوم بفتح ملف HTML عن طريق اختيار OPEN WITH (بعد الضغط بالزر الايمن) واختيار المتصفح.

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

مثال :

الان بعد كتابة هذه الاكواد كيف سنحولها الى صفحة للإجابة تابع الصور
في البداية نقوم بالدخول الى اي محرر نصوص ولكي اسهل عليكم الشرح سندخل الى notebad الموجود افتراضياً في الويندوز:

ثما كما تعلمنا نقوم بكتابة الوسوم التي تتكون منها اي صفحة الكترونية مع اضافة خاصية اللون كما المثال السابق:

ثم سنقوم بعمل حفظ لهذه الصفحة بصيغة html كما في الصورة:

ثم نقوم بتغير صيغة الملف من txt الى all files كما في الصورة:

الان نأتي لأهم خطوة في الحفظ الان تجعل اسم الملف اي شيء تريد ولكن يجب ان ينتهي ب .html كما في الصورة:

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

الان لرؤية النتيجة فقط اضغط على الايقونة للدخول الى الصفحة لتظهر لك بهذا الشكل:

لقد قمت بإضافة الخاصیة BGCOLOR إلى الوسم ، وھي تقوم بتحدید لون الخلفیة للصفحة. أما 00FF00 فھي القیمة التي تمثل اللون المختار
وھو ھنا اللون الأخضر، (لاحظ أنھا مكتوبھ بین إشارتي " " )
من أین جاءت ھذه القیم، وكیف؟
تلاحظ أن القیم السابقة مكونة من ستة رموز، وھي مكتوبة بالصیغة التالیة:

ھناك ثلاثة ألوان أساسیة ھي الأحمر والأخضر والأزرق، ولكل منھا یوجد 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 من اللون الأزرق.

وعلى ھذا المنوال یعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: CC6699 أما اللون الأسود فرقمه ھو 000000.

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

ملاحظة مھمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل ھذه الرموز،لذلك من الأفضل استخدامھا دائماً.
الان سنقوم بتغيير خلفية الصفحة الى صورة من اختيارك
مثال:
< HTML >
< HEAD >
< TITLE >
first page web
< /TITLE >
< /HEAD >
< BODY BGCOLOR =" #000000 " BACKGROUND= " http://www.m5zn.com/newuploads/2015/08/23/png//fb9dd47f74bef60.png " >
الصفحة الاولى
< /BODY >
< /HTML >
كما تلاحظن فإننا استخدمنا خاصية BACKGROUND لتغيير خلفية الصورة وقد وضعت رابط لصورة لكي اجعلها خلفية وبعد ذلك قم بحفظ الصفحة وشاهد النتيجة

كما تلاحظون تغيرت خلفية الصفحة الى الصورة التي اخترتها بعد ما وضعت رابطاً لها

ولنكمل مع باقي الخصائص في وسم < BODY >: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبیة (Links) التي تنقر علیھا لتنقلك إلى صفحات أو مواقع أخرى على الشبكة ھي دائماً ممیزة باللون الأزرق، وأن الوصلات التي قمت بزیارتھا فعلاً قد تحول لونھا إلى القرمزي. حسناً، ھذه ھي الألوان الإفتراضیة التي تعتمدھا المتصفحات. لكن قد لا یعجبك ذلك وترید تغییر ھذا النظام. أو ببساطة ربما ترید استخدام لون أو صورة غامقة لخلفیة الصفحة بما سیؤدي إلى اختفاء ھذه الوصلات أوحتى اختفاء نص الصفحة نفسھا. فما العمل؟


إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:

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

Ahmed alqaisi تمّ النشر بـ 11:34 م أضف تعليق

دورة لغة HTML : الدرس الأول المقدمة + الأساسيات

دورة لغة HTML : الدرس الأول المقدمة + الأساسيات

دورات برمجية شروحات HTML

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

1-المقدمة
ــــــــــــــــ
ما معنى لغة HTML ؟
ان لغة HTML وھي اختصار لكلمة (Hyper Text Markup Language)
وھي إحدى الطرق في تصمیم صفحات على الانترنت أو تزیین الرسائل التي تبعث عبر
البریدالالكتروني.

ان لغة HTML لیست لغة برمجیة كلغة ++C أو JAVA أو C فھي لغة سھلة
وغیر معقدة ولا تحتوي على شیفرات كثیرة كذلك فھي لا تحتاج إلى مترجم . لذلك فھي
لغة بسیطة جداً، وسھلة الفھم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة
والھیكلیة المستخدمة فیھا.
ــــــــــــــــ
2-الأساسيات
ــــــــــــــــ
تكتب لغة HTML برموز غریبة وكثیرة اسمھا باللغة الانجلیزیة
الـTags وتسمى باللغة العربیة الوسوم .

مثال توضيحي :

< TAG/>هنا يكتب النص< tag >

اذاً كما تلاحظون فهناك وسم في البداية ووسم في النهاية.
ان الوسم < tag > هو وسم البداية والوسم < TAG/ > هو وسم النهاية والنص يكتب بينهما ولعلك لاحظت وجود اشارة / في وسم النهاية.

ولكل كود من لغة htlml وسم بداية ووسم نهاية وسأمثلها لك في الرسم الاتي:

الوسم الأول ھو الوسم < HTML > أنه أھم الوسوم المستخدمة في بناء الصفحات المستخدم فیھا لغة HTML ،لأنه یقوم بتعریف للمتصفح أن ھذه الصفحة مصنوعة بلغة الـHTML ویوضع ھذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا ھذا الوسم لظھرت محتویات الصفحة بصورة باھتة وغیر مفھومة ، وسم النھایة ھو < HTML/ > الذي یوضع أخر المستند المصنوع بلغة الـHTML .

الوسم < head > يستخدم لتعريف صاحب الصفحة واللغة ومعلومات عديدة اخرى ان شاءالله سنتطرق لها في الشروحات القادمة, ووسم النهاية الخاص به هو < head/ >.

نأتي الآن إلى الوسم < TITLE > الذي یمثل الجملة التي توضع أعلى الشاشة على الیسار ، ووسم النھایة الخاص بھ ھو < TITLE/ > ، ملاحظة یوضع ھذا الوسم بین الوسمین < HEAD > و < HEAD/ >

نأتي الآن إلى الوسم < BODY > الذي ھو محور الدروس بأكملھا ، حیث یمثل ھذا الوسم محتویات الصفحة بأكملھا حیث تضع فیھ الجداول والصور و المواضیع وكل ماتریده أن یظھر على الصفحة . سوف أبسط لك كل ما ذكرت في ھذا الدرس داخل ھذا الرسم التبیاني :

مثال:
< html >
< head >
< title >
any thing
< TITLE/ >
< HEAD/ >

< body >
any thing
< BODY/ >
< HTML/ >
ملاحظات مهمة:
ـــــــــــ
1-ملف Html يبدأ دائماً بالوسم وينتهي بالوسم .
2-الامتداد المستخدم في أسماء ملفات HTML ھو htm. أو html.
3-لا يوجود اي مشكلة في كتابة الوسوم بالاحرف الصغيرة او الكبيرة.
4-لا يهم وجود الفراغات الزائدة او عدم وجودها (الفراغات الناتجة عن زر space او enter) لذا يمكنك كتابة المثال السابق بهذه الطريقة:
< html >< head >< title > any thing< /TITLE >< /HEAD >< body > any thing < /BODY >< /HTML >
والنتيجة نفسها

الان كيف سنحدد مقدار النص الموجود في كل سطر وكيف نحدد نهاية او بداية النص الذي يليه؟
سنستخدم هذا الوسم < BR > لتحديد نهاية السطر الحالي والبدء بسطر جديد وللعلم هذا الوسم مفرد ( أي ليس له وسم بداية او نهاية).
مثال :
< html >
< head >
< title >
any thing
< TITLE/ >
< HEAD/ >
< body >
أي < BR > شيء
هنا < BR >
< BODY/ >
< HTML/ >

لاحظ اننا استخدمنا وسم < br > لتحديد نهاية فقرة أي وبداية فقرة شيء وايضاً نهاية فقرة شيء وبداية فقرة هنا.
ايضاً يمكنك استخدام وسم اخر للاشارة الى نهاية او بادية الاسطور والفرقات وهو وسم < p >
ووظيفته نفس وظيفة الوسم السابق اي انه ينهي الفقرة او السطر ويبدأ واحد جديد لكنه يترك سطر اضافي فارغ بين الفقرات.

أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطیع التحكم بھا وبعددھا إلا باستخدام الوسم &;nbsp (والأحرف ھي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بین نص وآخر ما علیك إلا كتابة ھذا الوسم بنفس عدد الفراغات المطلوب. كما یجب علیك التقید بالأحرف الصغیرة ھنا.

ھناك العدید من ھذه الرموز والتي یجب أن تكتب بصورة معینة وباستخدام الوسوم ولیس مباشرة بصورتھا العادیة.
كل ھذه الإشارات تستخدم أصلاً مع الوسوم فھي محجوزه ضمن مفردات لغة HTML ومن الخطأ استخدامھا بصورتھا الصریحة لئلا یؤدي ذلك إلى حدوث مشاكل في طریقة عرض الصفحة. كذلك فإن ھناك رموزاً غیر موجودة أساساً على لوحة المفاتیح كرمز حقوق الطبع © ورمز العلامة المسجلة R ونحتاج إلى ھذه الطریقة(طریقة الوسوم) لكتابتھا.

مثال:

لاحظت ان كل كود يعني رمز معين وينفذه من دون اشاراتي <>.

مثال آخر:

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

Ahmed alqaisi تمّ النشر بـ 2:44 ص أضف تعليق