تعليم كيفيه تصميم موقع بلغه (HTML) الدرس الاول ~ الوان الويب

بسم الله الرحمن الرحيم

مقدمة :- ان تعلم تصمیم و برمجة المواقع لیس بالامر الصعب و انما یحتاج فقط لبعض الجھد و المثابرة ، ولذلك انصحك عزیزي القارئ ان تقوم بتنفیذ الامثلة الموجودة في ھذا الموضوع بشكل عملي لكي تتعلم من الاخطاء و لكي ترى بنفسك مدى سھولة الامر .

بدایة استطیع القول ان الاسلوب المناسب في شرح مثل ھذه المواضیع ھوالتركیزعلى الجانب العملي وضرب الامثلة وھذا ھو الاسلوب الذي ساحاول ان اتبعھا في الشرح.

اولا:- عليك عزيزى المصمم بتواجد برنامج لتحریر النصوص ولذلك یمكنك استخدام Notepad الذي ینزل تلقائیا عند تنزیل الویندوز وھناك برامج اخرى مثل
Text padبكونھا یعمل على تلوین العناصر الاساسیة للغة الھتمل والذي یمتاز عن Notepad و بالتالي يمكن اكتشاف الاخطاء الاملائیة حال حدوثھا و یمكن تنزیل البرنامج من الموقع التالي: www.textpad.com

نبدأ اولا: بالوسوم يتم كتابة أوامر اللغة HTML على شكل ما يعرف ب " الوسوم ".

الوسوم هي أقواس ذات شكل خاص .. لها الشكل التالي..

<الأمر>

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

<الأمر>

ووسم نهاية أو غلق مثل:

<الأمر/>

وهناك بعض الأوامر التي ليس لها سوى وسم بداية (فتح) فقط.

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

`وسم البداية`	`وسم النهاية`	وظيفة الأمر
`<html>`	`<html/>`	يستخدم هذا الأمر في كل صفحة كوسيلة للتعريف باللغة
`<head>`	`<head/>`	هذا الأمر يختص بإحداث تغييرات في شريط العنوان
`<title>`	`<title/>`	هذا الأمر لتغيير عنوان الصفحة العلوي في شريط العنوان
`<body>`	`<body/>`	هذا الأمر يختص بتغيير شكل الصفحة ومحتوياتها من نصوص وصور

قم بفتح برنامج notepad وسوف استعرض عليكم بعض الاكواد لتجربتها ولمعرفة
استخدام كل كود وماذا يفعل ولابد بتجريب الاوامر بطريقة عملية عليها لمعرفة استخدام كل منها وفيما يستخدم هذا الوسم ولابد بعمل save as لصفحة notepad وكتابة الامتداد باسم الموقع ثم html.
مثال : الصورة توضح طريقة حفظ العمل ينتهى اسم الموقع بى html.

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

<html>
<head>
<title>
صفحتي الأولى
</title>
</head>
<body>
<center>
أھلا وسھلا بكم
<br>
في موقعي
</center>
</body>
</html>

شرح استخدام كل كود

<html>~~~~~~~~~~~~~~~~~~~~~~ </html>

HTML یمثل كود </html> وبین ال <html> ما بین

<head>~~~~~~~~~~~~~~~~~~~~~~</head>
(head) یمثل ما سیكون في جزء الراس </head> و بین ال <head> ما بین

<title>~~~~~~~~~~~~~~~~~~~~~~~~~~ </title>
یمثل  العنوان و الذي سوف یكون في الراس وفي مثالنا سوف نطبع" صفحتي </title> و بین ال <title> ما بین
الاولى"

<body>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</body>
(body) یمثل ما ھو موجود في جزء الجسم </body> و بین ال <body> ما بین

<center>~~~~~~~~~~~~~~~~~~~~~~~~~~</center>
یتم لھ عملیة توسیط </center> وبین <center> ما بین
وھنا لاحظ ان العبارتین" أھلا وسھلا بكم " و عبارة" في موقعي" تم طباعتھن في منتصف الصفحة

<br>
او
<br />
(Enter وذلك للنزول الى السطر التالي ( اي تعمل عمل ال
السؤال الان : ماذا لو كتبنا الكود كما یلي
أھلا وسھلا بكم
في موقعي
ھل سیطبع" أھلا وسھلا بكم" ثم ینزل سطر الى الاسفل لیطبع "في موقعي" ؟ <br> دون استخدام
بالاضافة <br> الجواب: للاسف لا سوف یقوم بطباعة الجملتین في نفس السطر و لذلك نحن نقوم باستخدام
الى طرق اخرى سوف یتم ذكرھا

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

وبعد فتح notepad ووضع الاكواد لا تنسوا ان تحفظ ويوضع بعد اسم الموقع

html.

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

الدرس القادم سوف نستعرض فية طريقة كتابة النصوص وكيفية ادراج الالوان عليها وطريقة عمل الجداول .

نتمنى ان يكون نال الشرح اعجابكم

جديد الموقع

أقسام المدونة

أرشيف المدونة

شارك الموقع

مواقع صديقة

2013-07-02