محرر HTML :
(HTML EDITOR)
المحرر هو ذلك البرنامج الذي نستخدمة لانشاء صفحة الويب وكتابة لغة الـHTML والذي يساعدنا في برمجة صفحات الويب سوف نستخدم برنامج المفكرة او (NotePad) لبرمجة صفحات الويب وسوف يكون هو المحرر الذي سنستخدمة في لغة الـHTML.
للوصول إلية سيكون عن طريق:
قائمة إبدا-البرامج-البرامج الملحقة-المفكرة.
أو
بنقر بزر الفارة اليمين-جديد-المفكرة
عناوين الـHTML:
سوف نقوم اليوم بتعلم كيفية عمل عناوين صفحة الويب والذي يكون منها ما هو اكبر حجماً والاصغر من الاكبر والاصغر من الكل.
علامة ترميز العناوين في الـhtml بسيط ويمكن تذكره وهو <h1></h1> وهو إختصار كلمة heading والذي يعني عنوان والرقم 1 ماهو الا تحديد حجم الخط الذي الذي يتراوح بين 1 و 6.
مثال على ذلك:
وسسيكون نتيجة الكود السابق الذي تمت كتابتة :
كما نلاحظ بانه وضعنا في الكود ثلاثة عناوين كل عنوان يكون ذو حجم مختلف وستلاحظ اختلاف تفاوت الحجم من الاول الى الاصغر.
فقرات HTML:
لقد تم ذكر في شروحات سابقة عن رمز الفقرات في html ستلاحظ في دروس قادمة تكرر الرموز لذا فـرمز الفقررات <p></p> اختصار كلمة paragraph والتي تعني نص او فقرة والصورة التاليه هو عبارة عن مثال لكود الفقرة:
وستكون النتيجة:
يمكن كتابة اكثر من فقرة وتكرارها لتكون فقرات منفصلة عن بعضها ككتلة واحد او مقاله فقط بتكرار ترميز الفقرة .
روابط HTML:
كل صفحات مواقع الانترنت تحتوي على روابط حيث تجعلك تنتقل من صفحة الى اخرى في الموقع او الى مواقع اخرى.
سنقوم الان بعمل كود الروابط والانتقالات بين صفحات الانترنت والذي يستخدم الترميز <a></a> تابع المثال التالي:
لاحظ انه بعد كتابة علامة الترميز قمنا بعمل انتقال الى موقع قوقل ويمكنك عمل اي رابط تريدة ولكن قبل الرابط قمنا باضافة كلمة ""=herf وهي التي تقوم بتحديد مكان الذهاب بعد الضغط على الرابط وهي ثابتة لاتتغير ونضع بين علامتي التنصيص الرابط المراد الانتقال الية.
ملاحظة:
يمكن ان لا تعمل اللغة العربية بشكل صحيح لذلك قم بالخطوة التاليه التي سيتم إيضاحها في الصورة:
إضغط على ملف-حفظ باسم- اسم النوع الذي سيضهر لك ANSI قم بتغيره إلى UTF8 ..
بعد هذه الخطوة قم بالحفظ و إذا ضهرت لك رساله اضغط على موافق:
نلاحظ بعد ان ضغطنا على الرابط قام بفتح محرك بحث قوقل بنفس الصفحة لذا اذا اردنا ان يفتح لنا الرابط في صفحة اخرى عند النقر علية:
هناك خاصية نقوم باضافتها إلى تاق اللينك وإسم هذه الخاصية target والتي تعني هدف,نقوم بإضافتها كما ستشاهد في الصورة المقبله مع علامتي التنصيص:
ستلاحظ انه قمنا بإضافة الخاصية target وتتبعها بين تنصيصتين blank_ والتي تعني فراغ قم بتجربة ذلك...
إذا اردت ان تنشئ رابط ينقلك إلى صفحة في موقعك اسمه اتصل بنا سوف تقوم بعمل كل شي عملناه سابقاً ستنشئ صفحة اسمها contact . ضع فقرات تملئ فيهن معلوماتك الشخصية وبعد الانتهاء من ذلك تعود لصفحة الرئيسيه التي نعمل عليها وتنشئ رابط اليها:
بعد ذلك قم بالانتقال لرابط الصفحة التي قمت بعملها لتواصل معك.
التعامل مع الصور في HTML:
المواقع التي لا تحتوي على رسوم او صور او مقاطع فيديو لا تكون جذابه بل ما يميز المواقع و يجعلها انيقة هي الصور , لإضافة صورة نقوم باستخدام الرمز <img> مثثل المثال الاتي لدينا صورة اسمها pulpt سنقوم بإضافتها إلى صفحتنا وقبل ذلك عليك ان تقوم باضافة الصورة الى المجلد الذي نشتغل عليه حييث يجب على الصورة ان تكون موجودة بجانب المستند الذي انشأتة:
ستلاحظ أن ترميز الصورة لا يمتلك إغلاق مثل باقي الترميزات او وسوم الـHTML وستجد خاصية ""=src هذه الخاصية مهمتها هي اخبار المتصفح او السيرفر عن مكان الصورة حيث نكتب اسم الصورة مابين علامة التنصيص لاحظ اسم الصورة pulpit.jpg.
اضفنا نوع الصورة وهو .jpg وهي مهمة جدا كون الصور انواع فقط من يعرف هذه الانواع هو من يشتغل على برامج معالجة الصور.
وهناك ايضاً الخاصية ""=alt الذي تقوم بوصف الصورة اذا اردت باضافة شرح لها انظر الصورة الاتية...
وهناك ايضاً خصائص التحكم بحجم الصور الطول والعرض
""=width وهي مقاس عرض الصورة الذي نضع فيه رقم قياس العرض.
""=height وهو مقاس طول الصورة الذي نضع فيه رقم قياس الطول لصورة.
وهناك ايضاً الترميز <br> وهو الترميز الذي يستخدم لنزول سطر واحد:
