ماهي لغة تصميم صفحات الإنترنت و المواقع الإلكترونية

ماهي لغة تصميم صفحات الإنترنت و المواقع الإلكترونية

ماهي لغة تصميم صفحات الإنترنت و المواقع الإلكترونية

شرح لغة تصميم المواقع الإلكترونية وصفات الإنترنت 

السلام عليكم ورحمه الله وبركاته
مرحباً بك عزيزي القارئ في مدونة تقني برو 
في هذا المقال سوف تستفيد بشكل عام وبشكل خاص عن لغة تصميم صفحات الإنترنت والمواقع الإلكترونية
مثل فيسبوك وغيرها 
وهي لغة html 
وسوف نقوم بشرحها بالتفصيل وشرح كل ما يخصها 
أريدك أن تكون مستعداً للدخول في مجال التصميم والبرمجة المحال الممتع والمفيد
أريدك ان تطبق كل ما تقراه او تفهمه من هذا المجال في الهاتف او اللابتوب
وسوف تلاحظ أن كل معلومة تقراها وتطبقها ترا مفعولها 
طبعاً برمجة وتطوير المواقع الإلكترونية تحتاج إلى ثلاث لغات برمجة يجب أن 
تتقنها لتصبح مبرمج ومطور ويب فريد من نوعك وهذه الثلاث اللغات هي :
1-لغة HTML 
لغة اساسية في تصميم المواقع الإلكترونية 
2-لغة CSS
لغة css لغة مساعدة للغة الرسمية تقوم بعمل ستايل وتزين الصفحة 
3-لغة JavaScript 
هذه اللغة تقوم بعمل اوامر للصفحة وتفاعل 
وهي ضرورية جدا 
في هذا المقال سوف نقوم بشرح لغة html بالتفصيل 
وسوف نتطرق بشكل بسيط للغة JavaScript
واما لغة css سوف نتطرق لها في قسم آخر إن شاء الله تعالى..
بسم الله نبدأ 

أولا: طرق البداية في كتابة اكواد لغة  Html

1-بالهاتف المحمول 

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

2-الجهاز او اللابتوب

تقوم بفتح المفكرة وإنشاء ملف وتقوم بتسميته
وضروري ان تنسيق الملف يكون .html
وتقوم بحفظ الملف وفتح باستخدام اي متصفح في الجهاز
ركز  في قراءة الاتي وطبق وسترى ناتج تعبك .

عناوين المقرر الاتي شرحها:

 مقدمة عامة عن الإنترنت ومفاهيم عامة حول الإنترنت ولغة تصميم صفحات الإنترنت.

 تاريخ HTML + هيكلة برنامج HTML

 أوامر التحكم بالخط+ أوامر التحكم بالصفحة

 أوامر التحكم بالفقرات +القوائم

 الصور+الروابط الشعبية 

 الجداول وتنسيقها

 الاطارات+النماذج

 اختبار نصف الفصل

JAVA SCRIPT عن مقدمة 

 هيكلية كتابة البرنامج في SCRIPT JAVA+المتغيرات

 الدوال

 جمل التحكم

 جمل التكرار +الأحداث

.........................

مفاهيم عامه:

-1 شبكة الإنترنت (Network Internet):

عبارة عن شبكة عاملية تربط بين ملايين الشبكات حول العالم, وتحتوي على كم هائل من المعلوماتية في بشتى مجالات المختلفة.

ولذا يطلق عليها (شبكة الشبكات).

-2 مواقع الويب )Sites Web):

عبارة عن صفحة أو مجموعة من الصفحات الإلكترونية المتصلة مع بعضها البعض والتنقل فيما بين تلك الصفحات يتم عبر

عناوين تسمى (الروابط التشعبية).

-3 الروابط التشعبية (Hyper links):

عبارة عن نصوص او صور او ازرار عنصر من عناصر صفحة الويب عند النقر عليه يتم الإنتقال إلى صفحة أخرى أو موقع

أخر أو ملف مرفق أو أي مكان داخل الصفحة.

...........

مفاهيم عامه:

-4 لغات برمجة الإنترنت (Languages Programming Internet):

لغات برمجية خاصة تستخدم أوامرها وقواعدها للتعامل مع صفحات الويب وتصميم برامج خاصة تتعامل مع مواقع الإنترنت

وهي نوعان:

-1 لغات تصميم صفحات تفاعلية .

-2 لغات تصميم صفحات غير تفاعلية.

إي بي إل .

نشيط

.

أسب جافا سكريبت..

.

نشط

.

مفاهيم عامه:

- 5-لغات تصميم صفحات الإنترنت الغري تفاعلية (Languages Active Un):

تستخدم لتصميم الصفحات ومحتوياتها بدون أوامر برمجية والا تحتاج إلى مترجمات والصفحات المصممة بها تكون ثابتة )

Static )وبنفس الوقت من أجل تصميم واستخدام اللغات التفاعلية يجب استخدام اللغة الغير تفاعلية.

من أشهر هذه اللغات هي (HTML).

- لغات تصميم صفحات الإنترنت التفاعلية 

(اللغات النشطة):

هي لغات برمجية لها أوامرها الخاصة وكل لغة لها هيكلتها الخاصة مترجمها الخاص وتستخدم مع اللغات السابقة والصفحات

المصممة بها تكون قابلة للتحديث المستمر (Dynamic )و من هذه اللغات هي ) ,JavaScript.)ASP,PHP,……

لغة البرمجة:

إحدى اللغات الغير التفاعلية لتصميم صفحات الإنترنت وتعني لغة النص التشعبي.

لغة ترميز النصوص التشعبية.

مكونات HTML:

تتكون مفرادات HTML من مجموعة من الوسوم (Tags )حيث كل وسم (Tag )يقوم بمهمة معينة .

مثال:

وسوم HTML الرئيسية:

هنا كأربع وسوم تكاد ال تخلو منها صفحات HTML وهي:

-1 (HTML)وسم البداية ويكتب دائما في البداية ويغلق في النهاية.

-2 (HEAD)وسم لتحديد أن ما بعده عنوان صفحة الإنترنت حيث يتبعه 

الوسم (TITLE)ويغلق بعده.

-3 (TITLE)وسم يتبع الوسم (HEAD )مباشرة ويكتب بعده عنوان 

صفحة الإنترنت ثم يغلق قبل الوسم (HEAD).

-4 (BODY)وسم خاص يتضمن فيه محتويات صفحة الإنترنت ويغلق قبل الوسم (HTML).

مثال:

<أتش تي أم أل>

<الرأس>

<العنوان>

صفحتي

</العنوان>

</الرأس>

<الجسم>

هذه صفحتي الشخصية في الموقع.

</الجسم>

</HTML> 

.................................

الرسوم والأوامر الرئيسية لتصميم صفحات الإنترنت باستخدام Html:

كل وسم(Tag )له مجموعة من الخصائص(Attributes ) وكل خاصية لها قيمة محدد 

فمثال:

أهم خصائص الوسم <body>:

الوسوم والأوامر الرئيسية لتصميم صفحات الإنترنت باستخدام HTML :

أوامر التحكم بالنصوص والخطوط في الصفحة:

<Font> .............</font> الوسم

يستخدم للتحكم بخصائص خط النصوص في الصفحة ولكي يؤدي مهمته يجب تغيير قيم الخصائص التابعة له وهي :

أهم خصائص الوسم <Font>:

Face=استخدام هذه الخاصية لتغير نوع الخط

color=استخدام هذه الخاصية لتغير نوع اللون

size=استخدام هذه الخاصية لتغير حجم الخط 

سوف نأخذ الان مثال لأهم خصائص الوسم فونت وسم الخطوط 

مثال:

<أتش تي أم أل>

<الرأس>

<العنوان>

صفحتي

</العنوان>

</الرأس>

<BODY text = "#d43344" الرابط = "" Alink = "" vlink = "" bgcolor = "#aabbcc">

<Font Face=“Times New Roman” اللون=“أخضر” الحجم=“6”>

هذه صفحتي الشخصية في الموقع.

</الخط>

</الجسم>

</HTML> 

لتغيري خصائص الخط لكامل الصفحة :

نستخدم الوسم <BaseFont>

وهو يأخذ نفس خصائص الوسم <Font <مع تغيير خاصية نوع الخط إلى name.

<اسم الخط الأساسي="Arial" اللون="الأزرق" الحجم="4">

 وسم العناوين: </Hn>............<Hn >

يستخدم لتمييز عناوين الفقرات حيث:

ن=(1….6)

<h1> ………</h1>

<h2> ………</h2>

<h3> ………</h3>

<h4> ………</h4>

<h5> ………</h5>

<h16> ………</h6>

.............................................

وسوم تنسيقات النصوص:

يستخدم كل وسم مما يلي إلي إضافة تنسيقات معينة للنصوص كالتالي:

............

سوف نقوم بأخذ مثال على التنسيقات في الصفحة 

مثال:

<HTML> _ _

<الرأس>

<العنوان>

صفحتي

</العنوان>

</الرأس>

<BODY text = "#d43344" الرابط = "" Alink = "" vlink = "" bgcolor = "#aabbcc">

<Font Face=“Times New Roman” اللون=“

أخضر

الحجم="6"

>

<ب><ش><أنا>

هذه صفحتي الشخصية في الموقع.

</i></u></b><br><br>

<big> هذه صفحتي الشخصية في الموقع.</big><br><br>

<h5><S>البيانات الشخصية: </s></h5>

</الخط>

</الجسم>

</ HTML > 

......

وسوم التحكم في الفقرات المذكوره في الأعلى:

وسوم التحكم بالفقرات:

الوسم <P>

يستخدم لتنسيق الفقرات ومحا ذاتها.

خصائص الوسم <P>:

<ف دير = "RTL">

<P محاذاة = "المركز" >

........

عزيزي القارئ الطالب/الطالبة إن شاء الله تعالى تكون استفدت من هذه المقالة المتواضعة الذي قمنا من خلالها بتعلم جزء بسيط من المعلومات الخاصة بلغة تصميم صفحات الإنترنت والمواقع الإلكترونية

وسوف نكتفي الي هنا بشرح هذا اللغة لكن سنكتفي في المقالة اما في اللغة فلا تقلقوا لأن مدونة تقني برو لن تتوقف عن دعم زوارها طالبين العلم فلذالك سوف اترك لكم رابط تحميل كتاب pdf الكتروني يقوم بإكمال شرحنا من حيث ما وقفنا بالظبط وبشرح تفصيلي .

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

وسوف تتعلمون في الكتاب الالكتروني الذي هو بسيغة pdf الى: 

1-اضافة صورة او فيديو الي الصفحة الالكترونية

2-تحريك هذا الفيديو او الصورة المضافة وأيضاً

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

3-اضافة روابط تنتقل من صفحة الي أخرى او في اي جزء من الصفحة

4-اضافة جداول الي الصفحة 

5-تقسيم الصفحة الي مجموعة من الصفحات 

6-تريك النصوص في الصفحة وتحديد اتجاهها 

7-ربطها بصفحة أخري 

8-تغير لون خلفيات الصفحة وإضافة صورة خلفية للصفحة الرئيسية 

9-وغير ذالك الكثير والكثير من المعلومات المثيره و الكثيرة 

10-وسوف نتطرق الي جزء من لغة ال JavaScript المذكورة في الاعلى 

...................

شكراً جزيلاً لك عزيزي القارئ على اختيارك مدونتنا

مدونة تقني برو الحديثة 

اذا عجبتكم المقالة يرجى مشاركتها مع الأخرين ليستفيد الجميع .....