ان تعلم تصميم و برمجة المواقع ليس بالامر الصعب و انما يحتاج فقط لبعض الجھد و المثابرة ، ولذلك انصحك عزيزي القارئ ان تقوم بتنفيذ الامثلة الموجودة في ھذا الموضوع بشكل عملي لكي تتعلم من الاخطاء و لكي ترى بنفسك مدى سھولة الامر .
بداية استطيع القول ان الاسلوب المناسب في شرح مثل ھذه المواضيع ھوالتركيزعلى الجانب العملي وضرب الامثلة وھذا ھو الاسلوب الذي ساحاول ان اتبعھا في الشرح.
اولا:- عليك عزيزى المصمم بتواجد برنامج لتحرير النصوص ولذلك يمكنك استخدام 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.
يظهر العمل بهذا الشكل ولقدت نجحت عزيزى المصمم فى تصميم اول صفحة لك على الانترنت
المصدر شركة الرؤية النافذة لخدمات تصميم مواقع الانترنت
http://www.clearvision.com.sa/
05-31-2014, 01:46 PM
المواضيع المتشابهه
العرض العادي
