احتراف تصميم الويب من البداية للاحتراف

تعلم تصميم وتطوير الويب

سوف يتم تدوين مراحل تصميم الويب وذلك بالمرور من مرحلتين

المرحلة الاولى - المصمم :

نتعلم فيها

HTML

CSS

Photoshop

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

المرحلة الثانية - المطور :

نتعلم فيها

Java Script

PHP

MySql

هنا الجزء الصعب الذي يحتاج الكثير من التركيز يطلق عليها برمجة الموقع.

هنا المكان الذي يسمح لك باضافات كثيرة مثل التعليقات - المتابعة - الابلاغ وتصميم الاكشن والحركة للبيانات وتحفظ المعلومات وتقوم بالفورمات او تسجل بيانات الناس وغيرها من الاشياء الاخرى الكثيرة.

نبدا باسم الله على باركت الله

لغة HTML

هي اللغة البسيطة جدا لتصميم الويب وهي الاساسية كما انه يمكنك ان تصمم بها موقع بدون الحاجة الى CSS او Java script لهذا فهي الاساس هي المسؤلة عن الشكل و الالوان و النصوص .

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

اولا ندخل الى ملف txt او not pad ونغير اسم txt الى html ثم نفتحه سنلاحظ بانه اي شي نكتب في النوت باد سيظهر على متصفح الملف.

من خلال تلك النوت باد نتحكم بالموقع عن طريق كتابة الاوامر بداخلها

كود وضع اي نص في الوسط

<center>
تكتب النص هنا

</center>

بعد ان تكتب الامر في النوت اضغط على file ثم Save ثم قم باعادة تحديث المتصفح كي ترى التغيير الذي يحدث للنصوص.

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

الهوست هذا هو عباة عن مساحة من السيرفر و السيرفر Server معناه جهاز يشبه جهاز الحاسوب لكنه يكون اكبر و اقوى بسبب انه المسؤول على تشغيل مواقع الملايين من الناس . والدومين Domain .

الان كود كتابة سطر جديد br الن الموقع لا يقرا العودة للسطر بدون كتابة هذا الكود.

</br> تكتب النص هنا

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

وكي نجمع الجملة الاولى والثانية في الوسط نكتب الامر التالي

<center>

الجملة الاولى

</br> الجملة الثانية

</center>

انواع الوسمات او الاكواد

منها الفردية

وهي عبارة عن كلمة واحدة تنفذ الامر مثل وسام برايك br

وهناك اوسمة لها بداية ونهاية مثل Center

واغلب الوسمات تكون على النوع الثاني يعني لها بداية ونهاية.

النوع الثالث من الوسمات او الاكواد

وهي نوع من الاكواد التي تستعملها تزيد بها البراميترات او القيم او قياسات معينة

ومن هذه الانواع مثلا وسام الخط ويطلق عليه بالانجليزي فونت Font

وهذا النوع لا يكتب وحده فقط بل يكتب مع اضافات تلك القياسات.

مثلا

النص هنا

</font>

ال color بمعنى الالوان و تكتب اسم اللون بين المعقوفتين و Size بمعنى حجم النص.

ومثال اخر هذا النوع هو كود انشاء الايقونة على هذا الشكل.

ولها براميترات كثيرة جدا يمكن اضافتها داخل نفس الكود.

هيكلة الصفحة

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

اولاتخبره بان هذه الصفحة هي صفحة html يعني للموقع ونقول هذا للمتصفح بكتابة الامر التالي

<html>

هنا في الداخل عبارة عن جزئين اول الهيدر او الراس كما كتبنا

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

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

</header>

<body>

اما هنا يتم فيها تدوين اوامر المحتوى

</body>

</html>

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

اذا مثلا كي نبدا بالعمل في الخطاطة نكتب كود تغيير العنوان على شريط المتصفح

نكتب الكود title داخل الخطاطة في الراس او الهيد.

<html>

<title> نص العنوان </title>

</header>

<body>

</body>

</html>

الان نضيف مجموعة من المعلومات للخطاطة

<html>

<title> العنوان هنا </title>

</header>

<body>

<font size="10" face="arial"> النص الاول هنا</font>

النص الثاني هنا</font>

السطر الثالث هنا</font>

</center>

copyrighted by السطر الاخير هنا

</body>

</html>

وسام تغيير نوعية النص

وسام تغيير شكل النص الى نص سميك وهو على شكل حرف b وهو اختصار لكلمة blood التي تعني سميك بالانجليزي.

يكتب بالطريقة التالية

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

وسام وضع السطر تحت الكلمة او الجملة او النص.

وسام التشطيب على كلمة

وسام التحكم في حجم النص وله براميترات رقم1 نص كبير ورقم 2 اصغر منه وهكذا واصغر خط هو رقم 6 وايضا هذا الوسام يجعل اي نص كتبته فيه في سطر جديد تلقائيا.

يكتب بالشكل التالي

وسام جعل الكلمة على شكل جذر مربع يعني تكون فوق السطر

ولجعل النص اسفل السطر

وسام جعل النص او الموقع من اليسار الى اليمين ويحتوي هذا النوع على براميترات كثيرة انشاء الله سوف نراها لا حقا يمكنك ايضا تغيير كلمة right الى center التي تعني الوسط و غير ذلك.

<div style="text-align:right"> النص هنا

</div>

وسام لوضع سطر بين النصوص له كذلك براميترات كاللون و الطول و السمك ويغلق في نفسه.

نعلم جميعا الان انه كي تعود الى السطر لبد من استعمال وسام br ولان العديد من الناس يزعجهم هذا الامر هناك ايضا وسام اخر يسمح لك بكتابة الاسطر دون وسام br وهو وسام اخر pre ويكتب بالشكل التالي

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

<!-- نكتب ما نريد هنا -- >

وسام الحفاظ على ثبات المعلومات المتصفح اثناء القيام بتقليص النافذة او تصغيرها نكتب الوسام التالي

<nobr>المحتوى كله هنا </nobr>

وهناك برنماج سوف يساعدكم كثيرا على اكتشاف اكواد اخرى كثيرة مثل برنماج

Egy Editor

التحميل

من هنا

تتمة قريبا