كتابة أول موقع إلكتروني.

لغة (Html) تحتوي هذه اللغة على ثلاث مصطلحات

الوسام (Tag)	العنصر(Element).	التوصيف (attribute)
هو عبارة عن أمر نصي يتم وضعه بين علامتي أكبر من وأصغر من <TAG>	هو عبارة عن وسام يأتي بعده نص <Tag>text</tag> سنلاحظ هنا أن العنصر فتحناه بوسام وأغلقناه بنفس الوسام مع وضع شرطة مائلة في الوسام الثاني.	وهذا المصطلح يختص وصف الأوامر وتوضيح خصائص الأوسمة ومثال على ذلك <tag id= “My name”></tag> سنلاحظ هنا أن هناك وصف لأحد خصائص الوسام وهو (id)  وهذا الوصف يحتوي على عنوان خاص به وهو (My name)

قواع كتابة الأوسمة (Tags):

1-      لكل وسام بداية ونهاية.

2-      كل وسام من الممكن أن يحتوي بداخله وسام آخر أو أكثر.

3-      كل وسام له توصيف (Attribute) يحتوي على (ID) يكون هذا الـ (ID) مميز ولا يتكرر داخل الصفحة مرة أخرى.

4-      أي موقع على الإطلاق لابد ون أن يحتوي على ثلاثة أوسمة أساسية؛

<html> </html>	<head> </head>	<body> </body>
يكون الوسام الأول بمثابة الأب الذي يكون بداخله بقية الأوسمة الأخرى بهذا الشكل <html> <head>  </head> <body> </body> </html> وأي صفحة يكون فيها وسام واحد فقط من هذه الأوسمة فهي لا تتكرر

ماذا أحتاج لبداية موقع إلكتروني؟

في الحقيقة لن نحتاج إلا لبرنامج بسيط جدًا لمن يعملون على نظام ويندوز وهو (Notebad ++) ويمكنك الانتقال إلى الموقع لتنصيب البرنامج من هنا أو برنامج (Sublime) لمن يستخدمون نظام ماك ويمكنك الانتقال إلى الموقع لتنصيب البرنامج من هنا، وكلها برامج مجانية لا تكلفنا شئ.

أول موقع نقوم بكتابته.

في البداية سوف نضع الأوسمة الأساسية التي تعلمناها سابقًا بهذا الشكل

<html>

<head>

</head>

<body>

</body>

</html>

كما قلنا سابقًا أن أي موقع إلكتروني لابد وأن يحتوي على الأوسمة الأساسية السابقة.

لحفظ الملف من قائمة الملفات (File) نختار (Save) وسيظهر لنا صندوق حواري نستطيع منه أن نسمي ما نريد من تسمية ولكن يجب أن يكون في نهاية الاسم الامتداد الخاص بصفحات المواقع وهو(.html) مثل أن يكون (First.html) ثم نوافق.

سنلاحظ أن البرنامج تنبه لهذا الأمر وتغيير لون الكتابة كما أنه جمع كل وسام وربطه ببعض فإذا ضغط على بداية الوسام فسوف يشير إلى نهاية الوسام، ولاحظ أننا نتعامل مع برنامج (Notebad++).

إذهب إلى المكان الذي حفظت فيه الموقع وافتح الملف الذي قمت بحفظه فسوف يفتح على البرنامج المستخدم للتصفح، الآن أمامك موقع ولكنه فارغ، لماذا؟؟؟ لأننا الآن وضعنا الهيكل العام الذي سوف نستخدمه لتصميم الموقع، ولهذا سوف نعود إلى برنامج (Notebad++) ونبدأ في الإضافة.

داخل الوسام (body) سوف نكتب أي نص نريده

<html>

<head>

</head>

<body>

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

</body>

</html>

الآن سوف نحفظ ما كتب ثم نعود إلى الصفحة ونفتحها ليظهر لك أول جملة قمت بكتابتها وهي "بسم الله الرحمن الرحيم".

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

الدورة التخصصية في مجال تصميم المواقع باستخدام html5 مع CSS3 و JavaScript

المقدمة:

أهلاً ومرحبًا بكم في أول محاضرة في مقرر برمجة مواقع الإنترنت باستخدام (HTML5) و(CSS3) و(JAVA SCRIPT) على موقع رواق والتي يقدمها:

 ايمن احمد القضاة 

محاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام - Lecturer University of Dammam.

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

سيكون معنا مثال واقعي للأشخاص المتواجدين لأول مرة في مجال برمجة مواقع الإنترنت، سوف نعطيهم مثال يربط بين الواقع وبين ما سيدرسونه في هذا المقرر، وفي النهاية سوف نكتب أول موقع إلكتروني لنا من خلال هذا المقرر.

الخارطة الذهنية للمصمم والمبرمج:

للحصول على الخارطة الذهنية من هنا

الأسبوع الأول:

كما نعلم فكل شئ إلكتروني محيط بنا حاليًا ابتداءً من المحمول وانتهاءً بالمايكرويف هو عبارة عن شئ إلكتروني تم برمجته مسبقًا ليؤدي أوامر محددة تطلبها منه.

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

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

أي موقع لدينا يجب أن يحتوي على جزئين؛ الجزء الأول يكون ظاهر للمستخدم ويسمى (front end) ويتكون من ثلاث دعائم أساسية وهي (HTML5) و(CSS3) و(JAVA SCRIPT) وهذا الجزء فقط فهو يعرف بالـ (Static Web Site) وهو ما سوف نتعلمه خلال هذا المقرر.        

أما الجزء الثاني: يسمى (Back End) وهذا الجزء يقسم إلى قسمين القسم الأول يخص اللغة البرمجية (P. language) ومن أمثلة هذه اللغات (PHP) و(Java) و(C#)، أما الجزء الثاني فهو ما يعرف بقاعدة البيانات الخاصة بالموقع (Data Base) ومن أمثلة اللغات التي تتعامل مع قاعدة البينات (Oracle) و(My SQL) و(SQL Server)، وهذا الجزء بالإضافة إلى الجزء الأول فهو يعرف بالـ Dynamic web site

نستطيع أن نقسم مراحل الدراسة عمومًا إلى ثلاث مراحل:

المرحلة الأولى	المرحلة الثانية	المرحلة الثالثة
مرحلة دراسة الجزء الظاهر من الموقع أو ما يعرف بالـ Front End، وفيها نتعلم (HTML5) و(CSS3) و(JAVA SCRIPT)	في هذه المرحلة يجب أن تجيد التعامل مع إحدى لغات البرمجة مثل (PHP) و(Java) و(C#) و(Ruby) ومن المعلوم أن تعلم لغة من هذه اللغات سوف يوفر نصف الطريق لتعلم أي لغة أخرى	هذه المرحلة هي مرحلة التعامل مع قاعدة البيانات (Data Base) وفيه نتعلم كيفية التعامل مع (Oracle) و(My SQL) و(SQL Server)

البرامج التي يجب أن نتعلمها

المجموعة الأولى	المجموعة الثانية	المجموعة الثانية
برامج التصميمات وأهمها الفوتوشوب (Photoshop) والإليستريتور (Illustrator)	برامج التعامل مع الـ Front End	برامج الـ fram works  وهي تنقسم إلى (Boot Strap) و(Foundtion)
وهي إجباري التعلم	وهي إجباري التعلم	وهي اختيارية التعليم

كمثال واقعي وتقريبي لما نقول فلغة HTML  مثل الهيكل العام للبناء الذي تبنيه كما أنك عند البناء تقوم بطلاء البيت وهو بمثابة الشكل الجمالي ويماثله هنا في هذا المثال الواقعي لغة CSS  ثم أنك تريد أن تقسم البيت وتحديد فائدة كل مكان في البيت وهو ما يقوم به الـ Java Scrip في تصميم الموقع .

السؤال هنا أين دور (Back End)؟

كمثال تقريبي لفهم دور الـ (Back End) عند دخولك للمنزل تضغط على زر الإنارة، أنت فقط ضغط عليه فأنار المصباح ولكنك لا تعرف ماذا حدث حتى ينير المصباح، فأنت لا ترى السلوك الممتدة ولا ترى التيار الكهربائي الذي يسير في هذه السلوك، هذا ما نسمي بابـ (Back End) فهي العمليات التي لاتراها ولكنها تؤدي وظيفة بالنسبة لك، فمثلاً عند إدخال اسم المستخدم والشفرة لدخول البريد الإلكتروني سوف يتم تحويلك إلى صفحة البريد، أنت مجرد أدخلت بيانات فقط ولكنك لاتعرف ما هي العمليات التي حدثت حتى تتحول إلى صفحة البريد الإلكتروني.

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