دورة مميزات لتصميم المواقع

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

بداية أى دورة تعليمية دايما بتبقا صعبة .. وبالخصوص فى موضوع دورتنا ..
موضوع دورتنا مهم جدا بس الناس فاكره انه عادي جدا .. وان اهميته مش كبيرة
زى لغات البرمجة (…
PHP - ASP - etc) .. لكن قبل أى حاجة إعرف ياللى نفـسك تبقا مصمم مواقع .. انك لازم تتعلم XHTML, CSS
قبل أى حاجة .. وإن كل المواقع .. كل المواقع بلا استثناء .. أيا كانت
لغة برمجتها لازم تعدى فى الأول على المرحلة دى .. مش مصدقنى وعايز تتأكد
جرب افتح مايكروسوفت أو جوجل أو ياهو ..
ودوس CTRL + U أو اختار من view >> page Source .. هتلاقى ان مع
اختلاف المواقع دى كليا من حيث المحتوى ولغة البرمجة وطريقة العرض إلا إن
كلهم اتفقوا فى حاجة واحدة بس أول كلمة فى أول سطر doctype html ..

قول ورايا …

الحمد لله الذى بنعمته تتم الصالحات .. اللهم أخرجنا من ظلمات الوهم إلى
نور الفهم وامنن علينا بالعلم وزين أخلاقنا بالحلم .. اللهم صلى على محمد
وعلى آل محمد كما صليت على ابراهيم وعلى ابراهيم وبارك على محمد وعلى ال
محمد كما باركت على ابراهيم وعلى آل ابراهيم فى العالمين إنك حميد مجيد.

اكتب أول صفحة .. HTML

كفاية مقدمات .. نخش على الشغل .. كعادة كل مواقع الدنيا اللى اتكلمت عن الاتش تى ام ال أول حاجة قالتها ان الحروف دى اختصار لكلمة Hyper Text Markup Language وافضل ترجمة ليها لغة الترميز النصـية .. كما أشـرنا مسبقا مش ممكن أى موقع يتعمل من غير ميتكتب بدايتاً بالـ HTML .. هنكتب دلوقتى أول صفحة ونشـرح هي عبارة عن ايه ..

كود PHP:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>أول صفحة</title> >>>>> (1)
</head>
<body>
<h1>دورة مميزات لتصميم المواقع</h1> >>>>> (2)
<p> >>>>> (3)
دورة مميزات لتصميم المواقع من البداية عبارة عن أول خطوة فى احتراف تصميم المواقع
، الدورة متخصصة للمبتدئـين لمن لا يعلم شيئا إطلاقا عن تصـميم المواقع ..
أرجو من الله أن يستفيد بها أكبر قدر من المتابعين وأن تكون فى ميزان
حسناتنا يوم أن نلقى الله ..
</p>
<img src="Web-Designe-momizat.jpg"> >>>>> (4)
<h2>لكى تتعلم لابد أن تصـبر</h2> >>>>> (5)
<p> >>>>> (6)
لابد من الصـبر لتحصيل العلم ..
نتابع الدروس ونطبق ونعود ايدينا على كتابة الأكواد
ونصـبر للأخر بإذن الله نوصل لمبتغانا ..
وتذكر ان جوجل كان شركة ناشئة من عشر سنين ..
يعنى هما كمان بدأو صغيرين
</p>
</body>
</html>

اقتباس:

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

اسئلة مبتدئ (احسن طريقة للتعلم إنك تسأل)

-هل الـ
HTML عبارة عن أقواس تحيط بالنصوص ؟

فى البداية خليك فاكر ان HTML لغة يفهمها المتصفح عشان يظهر
موقعك بالشكل اللى انته عايزه لكن كتابة HTML فيها جوانب كتير لم تظهر بعد
.. والمثال لتوضـيح مبدأ الكتابة بـ HTML

- كيف يحدد المتصفح شكل الموقع ؟

المتصفح بيتعرف على النصوص اللى انته كاتبها من حيث نص للعنوان h1, h2,
etc … أو براجراف p وبيعرض النصوص على هذا الأساس .. أما بخصوص تخصيص شكل
الموقع فدى وظيفة الـ CSS ومتقلقش لازم نعدى عليها دايما وسيتم شرحها بالتفصيل مع أمثلة لإيصال المعلومة .

- هل تجاهل المتصفح للمسافات والسطور الجديدة اللى فى الكود دا طبيعى ؟

ملاحظة جيدة .. المتصفح بيفسر كل المسافات والتابات والسطور الجديدة على
انها مسافة واحدة بس .. لكن لكل حاجة Tags يعنى مثلا لو عايز سطر جديد
هاكتب br / .. طبعا جوا الأقواس المثلثة .. أما ليه بخلى الكود تحت بعضه
كدا مادام المتصفح بيتجاهل الكلام دا كله .. فدا عشـان تبقا سهلة عليا فى
القراءة .. وان الملف يكون منظم

- هل يوجد اكتر من مستوى للعناوين ولا هما مستويين بس
h1, h2 ؟

لا هما 6 مستويات h1 أكبر حاجة و h6 أصغر حاجة .. بس متقلقش من النقطة دى فى الغالب أقصى حاجة هتحتاجها h3 .

- كيف أصبح الملف
HTML ؟

بعد كتابة الكود بأى محرر نصوص بتحفظ الملف .html أو .htm لكن الأفضل انه يبقا .html .

- كتابة الأكواد باليد مملة مفيش برامج تسهل المسألة ؟

طبعا فى منها مثلا دريم ويفر لكن أفضل استخدام محرر نصوص لحد متتعود على الأكواد وتفهمها كويس بعد كدا استخدم أى برنامج انته عايزه .. انا بستخدم محرر نصوص الدريم ويفر و Notepad++

- هل يوجد طريقة لوضع ملاحظاتى فى الكود بدون التأثير على الصفحة ؟

طبعا اسمها التعليقات .. وتوضيحها فى الصورة اللى جاية

شرح الكود السابق بالتفصيل

اعتقد كدا الفكرة وضحت نسـبيا .. لما نشرح الكود هتوضح أكتر بإذن الله

الخلاصة

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