السلام عليكم ورحمة الله وبركاته
اليووووم أتحدث عن موضوع من المستوى الرابع وهو مادة لغة برمجة الانترنت
المااادة مبدئيا جدا جدا سهلة وممتعة
راح ابدا معاكم ان شاء الله اسبوع باسبوع
والان اترككم مع اول درس وان شاء يستفيد الجميع
ما هي برمجة HTML ؟
إن كلمة HTML هي اختصار لـ Hyper Text Markup Language
drawGradient()، وهي عبارة عن علامات (رموز) Tags تكتب محصورة بين <> ، ويوجد لكل رمز عمل معين يقوم به ليؤدي وظيفة ما ، ولبعض الرموز وسوم تخصص أعمال معينه من خلالها مثل علامة font والتي من ضمن وسومها وسم face .
والعلامات Tags : هي أوامر يتم توجيهها إلى مستعرض الويب تحدد كيفية تنسيق (عرض) عناصر الصفحة ومنها الوسوم. وهي ثنائية دائماً حيث يبدأ احد طرفيها التعليمات والطرف الآخر ينهيها ، ولإنهاء الوسم أي لتكوين الطرف الثاني فيه نكتب نفس الوسم مضيفين في بدايته / ، وهناك علامات استثنائية لا تحتاج لنهاية.
ما هو البرنامج الذي تكتب به ؟
لا تحتاج هذه اللغة إلى برنامج معين بل كل ما تحتاجه عبارة عن محرر لكتابة النصوص مثل برنامج المفكرة أو الدفتر أو الوورد ومتصفح لكي تظهر عليه النتيجة وترى ثمار تعبكم مثل متصفح انترنت ا**بلورر أو نتسكايب نفيجيتور.
قبل تعلم هذه اللغة عليك أن تعلم
إنه بعد كتابة البرمجة في احد برامج معالجة النصوص وعندما تعمل على حفظ المستند الذي كتبتها فيه فعليك حفظه بامتداد html أو htm> فتكون صيغة الحفظ
هي: اسم الملف. html أو اسم الملف<html.
ثم انتقل للمتصفح وافتح المستند الذي حفظت به برمجتك من خلاله ترى النتيجة والشكل النهائي للبرمجة وليس شرطا أن تكون متصلا بالانترنت لكي ترى النتيجة لأن المستند أساسا على حاسبك.
كما إنك تستطيع تطبيق عدة وسوم على نفس الجملة أو الكلمة أو الصورة مع ملاحظة إن آخر وسم فتحته هو أول وسم تقوم بإغلاقه. كما عليك فتح كافة الوسوم التي ستطبقها على الجملة متتالية ثم كتابة الجملة وبعدها تغلق تلك الوسوم
اساسيات لغة html
drawGradient()
التركيب الأساسي لأي ملف HTML
هو كالتالي
<html>
فتح البرمجة بـلغة HTML
<head>
فتح البرمجة لشريط المتصفح (برمجة الرأس)
<title>
فتح برمجة إضافة عنوان لشريط المتصفح
هنا نكتب العنوان الذي تريد أن يظهر في شريط المتصفح
<title/>إنهاء برمجة عنوان المتصفح
<head/>
إنهاء برمجة شريط المتصفح
<body>
فتح برمجة جسم الصفحة
هنا نكتب كل ما نريد إدراجه في صفحات الموقع من صور ومواضيع _مستعينين بالعلامات والوسوم الخاصة بالبرمجة
<br>
يستخدم هذا الوسم لنهاية السطر والبدء بسطر جديد
<p>
يقوم هذا الوسم بترك سطر فارغ بين الفقرات
<body/>
إنهاء برمجة جسم الصفحة
<html/>
إنهاء البرمجة بـ HTML
تنسيقات الخط بلغة html
drawGradient()
وسم <B> لجعل الخط كثيف(مغمق)
ووسم <u> يستخدم لتسطير اسفل الجملة
بينما الوسم <I> يعمل على إمالة الخط المكتوبة به الجملة
ووسم <font> لتنسيق خصائص الخط من لون ونوع وحجم
حيث لكل منها خاصية تستخدم داخل هذا الوسم
فخاصية اللون color وتساويها بمكون اللون أو اسم اللون ومكون اللون عبارة عن مجموعة من الحروف والأرقام ترمز للون فمثلا مكون كلمة color السابقة هو 6633CC
وخاصية النوع face وتساويها باسم الخط الذي تريد أن تظهر به جملتك ، وينصح باستخدام نوع خط معروف
وخاصية الحجم size وتساوى بعدد من 1 إلى 7
وإليك التطبيق التالي إنسخه ولصقه في برنامج المفكرة أو الدفتر ثم احفظه بامتداد
html
drawGradient()
مثلا باسم: تنسيقات الخط .html
<HTML>
<HEAD>
<TITLE>مثال على تنسيقات الخط </TITLE>
</HEAD>
<BODY>
هذا هو نصّ الصفحة: <B>مرحبا بك</B>
<p>
<U> أرجو ان تكون استفدت </u>
<P>
<i> مع تحياتي لك </i>
<P>
<font color=red face=Andalus size=7> أحلـ زهـر ـى
القلب الحزين
زهراء القلب
</font>
</BODY>
</HTML>
بعد تخزين الملف
قم بفتحه عن طريق المتصفح
لاحظ إن احجام الخط المتوفرة هي من 1 إلى 7 حيث واحد ه هو الأصغر و7 هو الأكبر وما بينهما متفاوت ولك تجريب كافة الأحجام
المحاذاة في Html
drawGradient()
والمحاذاة هي هي مكان النص أو الصورة أو الزر أو الإرتباط في الصفحة
ولها ثلاث حالات:في الوسط center ، في اليمين right ، في اليسار left .
والمحاذاة صفة alignتدرج داخل أحد الوسوم التالية:
وسم الصورة <img> وسم الفقرة <p> ، وسم الجدول <table> حيث تساوى مع الإتجاه المراد وهي صفه
وإليك هذا المثال بإدراج صفة المحاذاة داخل وسم الفقرة ، ومستقبلا سنستخدمه مع الوسوم الأخرى في وقت شرحنا لها:
<html>
<bady>
<b>
<font size="5">
<p align="center"> سبحان الله العلي العظيم </p>
<P align="right"> سبحان الله العلي العظيم </p>
<P align="left"> سبحان الله العلي العظيم </p>
</font>
</b>
</bady>
</html>
تذكر:
الملف يحفظ بمتداد html
نهاية الدرس الاول
تحيااتي
العمل/الترفيه