عناصر HTML

العناصر والرموز الأكثر استعمالاً لبناء موقع ويب وتطويره بلغة HTML هذه الصفحة هي عبارة عن قـوائـم  تشمل عدداً مهماً من علامات HTML الأكثر استعمالاً . إذا أحسنت استعمالها،سَهُلَ عليك ما بعدهـا. لقد رأينا الكثير منها خلال دروس دورة HTML . ولكن هناك وسوم أخرى لم تتح لنا الفرصة للتطرق إليها. اقرأ المزيد…

إنشاء جدول في HTML

إنشاء جدول بلغة HTML من الصفر إلى الإثقان     هل حَضَـرَتْكَ فكرة إنشاء جدول على أحد صفحات موقعك بلغة HTML؟  في مقالة هذا اليوم، أقترح عليك إنشاء جدول HTML خطوة بخطوة من الصفر إلى الإثقان. ولكن ما جدوى الجداول على صفحات الويب؟  مما لا شك فيه أن أصحاب المواقع اقرأ المزيد…

تغيير خلفيات الجداول على صفحات HTML

السلام عليكم ورحمة الله تغيير خلفيات الجداول والخلايا على صفحات HTML باستخدام  background-color   🌓 إذا كنتم مازلتم تذكرون درس إضافة الخلفية في CSS، الذي تطرقت فيه إلى كيفية تغيير خلفية صفحات الويب سواء كانت الخلفية باللــون أو الصورة، في الحقيقة كان درساً رائعاً !🏅🎖 واليوم ومع ظهور CSS3 تغير الحال اقرأ المزيد…

كيف تصمم هيكلة موقع ويب؟

السلام عليكم ورحمة الله ما هو تقييمك للخطوات التي مررنا بها في الدورة التدريبية لتعلم لغة HTML5 و CSS3 ؟ بمعنى آخر،  « كيف كُنَّــا و أين وصلنا؟ »💡 مهما كان تقييمك فإنّني أجزم لك أننا وصلنا  إلى مرحلة متقدمة في تعلم أدوات تصميم موقع  الويب! وما زالَتْ أمامنا مراحل اقرأ المزيد…

إدراج الصور في صفحة HTML

السلام عليكم ورحمة الله اليوم سنتعرف على مزية أخرى من مزايا لغة HTML، إنها إدراج الصور في صفحة الويب! 💡  عليك أولاً أن تعلم أن عملية إدراج الصور لا تحدث بطريقة سحرية ، فقد تكون قد تعودت على إدراج الصور في صفحتك على الفايسبوك أو تويتر أو انستجرام  🙂  تلك اقرأ المزيد…

إنشاء الروابط ب HTML

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

تنظيم و ترتيب النّص ب HTML

بانر لدروس html

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

مرحباً بكم مرة أخرى!

HTML دروس

حسنًا ، قد لا يعجبك شكل الصفحة التي أنشأناها في الحلقة السابقة 🙁  ومن ذا الذي ستعجبه ؟

إنها  أشبه ما يكون بورقة تلميذ كسول  😛  فهل شكلها سيكون جذاباً للزوار ؟ لا أعتقد،  فشكلها لم يعجبني ! و لن يشجعني على زيارته  مستقبلاً إذا بقي على هذا الحال 😯

إذن يلزمنا أن  ننظم صفحتنا ونرتبها و ننسق شكلها حتى لا نصبح أضحوكة أمام المبحرين على النت .

ماذا علينا  أن نفعل إذن؟ لا شيئ ! فقط علينا أن نكتشف  عالم HTML و نتعلم كيفية استعمال علاماته  التي تساعدنا على ترتيب و تنسيق موقعنا ليصبح أنيقاً و جذاباًً  .

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

سنكتشف سوياً كيف  نستعمل لغة HTML  في كتابة العناوين و الكلمات ثم  الفقرات  وصولاً إلى  القوائم. 😆 

عـلى بركـة الله

      • – كيفية كتابة الفقرات
      • – كيفية تنظيم صفحتك مع العناوين
      • – كيف نعطي أهمية لبعض الكلمات في النص.
      • -كيفية تنظيم المعلومات في شكل قوائم.

طبعاً لن يكون الأمر معقداً كما يعتقد البعض،فقط قليل من التـركيز وسنرى كم هي سهلة عملية تنظيم النص 😉

الفقــرات:

كما قلنا في  الحلقة السابقة ، أن صفحات الويب مليئة بعلامات HTML ، فعند كتابة فقرة  تقترح علينا  لغة  HTML علامة <P> لتحديد الفقرات.

 

 

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

ما يهمنا الآن هو العلامتين: <p> و </p>

لذا سنكرر كتابة نفس الكود السابق ثم نضيف العلامتين إلى الفقرات:

الآن بعد كتابة  هاتين الفقرتين ، جرب ، و سترى النتيجة!
طَـيِّب،  لا تفرح كثيراً، إنها ليس كل شيء و لكنها بداية جيدة.  💡 

نعم إنها بداية جيدة  لنستمر، لا أن نكتفي  بما فعلنا ، فالقادم أجمل 🙂  .  سنرى الآن شيئًا خاصًا حول HTML:  كيف ننتقل من سطر إلى آخر؟  قد تقول لي  أن الأمر سهل  😛

لا يا حبيبي ! نحن لا نكتب على « الأوفيس – وورد »    هنا الأمر مختلف تماماً   😯  .

الرجوع للسطر في HTML ، لا يحتاج كالعادة إلى  الضغط على المفتاح  Entée  كي تنشئ سطراً جديداً   .

جرب هذا الكود و سترى :

عند تسجيل الصفحة سيظهر  النص على نفس السطر! 
لكن باستعمال علامات HTML  التي ذكرنا آنقاً   <p>   سيتبين لك أن  مفتاح  Entée  في محرر النصوص لا يعني شيئًا. 💡 

لذلك سيكون عليك اتباع دروس HTML ، حتى تظفر   بنص جميل ، منسق ، مرتب ومنظم . 😆 

في الواقع ، إذا كنت تريد كتابة فقرة ثانية ، فما عليك سوى استخدام علامة <p> ثانيةً كي تنتقل إلى سطر آخر مع ترك فراغ بين الفقرتين 🙄 .

لا يمكنك تجاوز  لغة HTML  في تنظيم النصوص و الفقرات .. إحفظها جيداً  💡 

مثال :

 

و عند تسجيل الصفحة بامتداد HTML ستكون النتيجة على  الشكل التالي:
 
دروس HTML

هنا نلاحظ أن الفقرات لم تعد في سطر واحد كالسابق، وذلك بفضل اسعتعمال علامات <p>

هذا جيد  🙂  ولـــــــكن نريد أحياناً الانتقال إلى السطر داخل الفقرة دون أن نحدث هذا الفاصل بين السطور  🙄  ما ذا نفعل ؟

حسناً ! كل شيء متوفر عند HTML ، توجد علامة  الإنتقال إلى الخط  الموالي دون المساس بجمالية  الفقرة !
<br />  هي العلامة  اليتمية التي  تخبرنا أن الفقرة  التي نحن بصدد كتابتها ستكتمل في السطر الموالي .  لذا يجب وضعها داخل  الفقرة وليس في مكان آخر.

لاحظ  كيف سنستعملها في هاته الشفيرة :

النتيجة كما ترى الرجوع الى السطر داخل الفقرة الواحدة لا يترك مسافة كبيرة مثل الفاصل بين الفقرات:

دروس HTML

خـلاصـة

إلى هنا نكون قد عرفنا كيف نكتب الفقرات ونعود للسطر بعد اكتمال الفقرة باستعمال  علامة <p>

، وتعلمنا أيضاً كيف ننتقل  إلى السطر الموالي  قبل أن تنتهي الفقرة باستعمال   علامة  <br/>

أرجو متابعة الدرس 

 

(المزيد…)

إنشاء أول صفحة ويب بلغة HTML

أهــلاً ومرحباً بكم  في أول خطوة لبناء موقع على الويب بلغة HTML! اليوم سنتعلم شيئاً جديداً و شيقاً أيضاً، لكن قبل أن نُـقْـلِع .. عفواً قبل أن نبدأ .. أريد أن أعرف، هل ثبتتم البرامج الضرورية ؟ و المتصفحات أيضاً  لاختبار موقعك هل يعمل جيداً على كل المتصفحات مثلاً : Google اقرأ المزيد…

إكتشف كيف تعمل مواقع الويب

أهلا ومرحبا بكم جميعا! اليوم سنكتشف  كيف تعمل المواقع الإلكرونية سنبدأ دورتنا هذه في فصلها الأول من الألف إلى الياء  ، و خلالها سنتعلم كيفية إنشاء موقع ويب الخاص بك! الكثير من المتتبعين سيسألون: متى سنتعلم إنشاء موقع إلكتروني؟ و ما هي المدة التي تلزمنا لذلك؟ الجواب : لا تتسرع اقرأ المزيد…

تعلم كيف تنشئ موقعك بلغة HTML

هل فكرت يوماً في إنشاء موقع ويب خاص بك؟ هل أعياك التفكير في طريقة سحرية لإنشاء هذا الموقع؟ هل أصابك الدوران و أنت تقرأ الأكواد التي تبرمج المواقع، فانتابك شعور بالإحباط؟ كل تخميناتك الضبابية ستتبدد هنا وأحلامك ستتحقق معنا !  🙂   إذن لا تضخم الأمر فأنت في المكان المناسب للتعلم اقرأ المزيد…