الدرس العاشر: دورة تعلم html للمبتدئين

أهلا وسهلا بكم زوارنا ومتابعينا الكرام في درسنا الاخير من دورة تعلم لغة html . في هذا الدرس لن نتعلم وسوم جديدة او خاصيات جديدة بل سيكون درسنا درس عام ومراجعة سريعة ونصائح مهمة مع خلاصة الدورة والمواضيع التي تعلمناها في الدروس التسعة السابقة .

الخلاصة

في دورتنا البسيطة لتعلم html للمبتدئين تعلمنا دروس ومواضيع مهمة وهي :

مقدمة عن اللغة وتعريفها والمتطلبات لتعلمها 

الهيكل العامل لصفحة html وشرح جميع الـ tags
وضع عنوان للصفحة وتغيير لون الخلفية
تعلم الوسوم الخاصة بالعناوين
تعلم كيفية اضافة الروابط التشعبية
تعلم كيفية اضافة صور
تعلم تنسيقات الخط وجعله مائل او عريض وغيرها من الامور
تعلم موضوع القوائم بنوعين النقطية والرقمية
تعلم موضوع الجداول وتنسيقاتها
مقدمة بسيطة لموضوع النماذج 

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

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


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

سؤال قد يخطر ببالك ويراودك كثيرا ماذا بعد تعلم  html ؟
اذا احببت ان تكمل طريقك وتتعلم تصميم وبرمجة المواقع ننصحك بتعلم لغة css  وهي لغة خاصة لتنسيق صفحات الويب التي تصممها بلغة html واعطائها مظهرا جميلا وجذابا وهي لغة سهلة ولايوجد بها اي تعقيد .

الى هنا نأتي الى ختام موضوعنا وختام دورتنا وجاهزون لأي استفسار او سؤال بخصوص الدورة او بخصوص الدروس . بأمكانك اضافة تعليق بسؤالك او استفسارك وستلقى الجواب أول بأول .  نتمنى ان الدورة نالت رضاكم وهي أول دورة في مدونتنا ولن تكون الاخيرة والقادم اعظم ان شاء الله .

مدونة التكنلوجيا باختصار

اقرء المزيد

الدرس التاسع: دورة تعلم html للمبتدئين

أهلا وسهلا بكم متابعينا الكرام في الدرس التاسع من دورة تعلم لغة html للمبتدئين . هذا الدرس سيكون الدرس قبل الأخير من دورتنا والتي سنختمها في درسها العاشر إن شاء الله . في هذا الدرس سنتكلم عن موضوع الفورم أو Form أو النماذج أو عناصر الادخال أو قم بتسميتها بما شئت لكن الاهم ان تعرف ماهي ؟ وما فوائدها ؟ وطرق استخدامها . والحقيقة إن موضوع النماذج ليس بالموضوع السهل وهو ليس للمبتدئين نهائيا لكن لابد من التطرق له ولو بشيء مختصر وبسيط واعطاء مقدمة بسيطة لهذا الموضوع .
موضوع النماذج لايختصhtml بقدر مايختص لغات اخرى مثل php وغيرها من اللغات التي ستتعامل مع قواعد البيانات لان موضوع النماذج يختص بالبيانات من اختيارها وارسالها وكتابتها و... الخ

كما قلنا في الاعلى ان هذا الموضوع ليس للمبتدئين لهذا قد تجد ان بعض الامور قد تبدو غير واضحة فلا تستغرب وخاصة اذا كنت مبتدىء وليس لك اي خبرة سابقة في html او php وبقية لغات تطوير مواقع الويب , وايضا نحن بدورنا لن نتكلم عن هذا الموضوع بالتفصيل بل ستكون مجرد مقدمة لتعلم بعض الوسوم وبعض الامور الجديدة التي قد تصادفك في مواقع الويب لتعرف معناها مستقبلا .
نبدأ بدرسنا ..
ماهي النماذج وماذا تشمل ؟؟
النماذج : هي اساس تطوير المواقع ولايوجد اي موقع في الانترنت يخلو منها وتشمل الازرار ومربعات النصوص وعناصر الاختيار وغيرها من الامور . ومن أهم النماذج والتي قد تجدها في معظم مواقع الويب هي ( نماذج اتصل بنا )

لبناء النموذج او الفورم يستخدم الوسم التالي :

<form>

.

.

عناصر النموذج

.

.

.

<form/>

ومن اهم الوسوم التي تسخدم مع الفورم هو وسم input والذي يحدد نوع العناصر التي نضعها داخل الفورم . ويحتوي على عدة خواص منها :

Type

 name

 value

 size

Maxlength

كما يوجد وسم اخر مهم وهو وسم <select> الخاص بقائمة الاختيار والذي يرافقة الوسم <option> الخاص بعناصر القائمة وهو وسم لايحتاج الى اغلاق .
والوسوم والامور المتعلقة بموضوع النماذج كثيرة لانريد ان نشرحها بالتفصيل لانكم لن تستفيدوا منها اذا لم تعرف لغات برمجة اخرى
هذه صورة للكود الخاص بهذا الدرس ونتيجة التنفيذ في المتصفح و وضعنا كل العناصر المهمة والتي ستشاهدها في مواقع الويب
يرجى التركيز في الكود ومشاهدة النتيجة للتعلم اكثر وقد أرفقنا الكود بشكل ملف نصي للتحميل .

 نتيجة الكود السابق

لتحميل الكود  اضغط هنا

اقرء المزيد

الدرس الثامن: دورة تعلم html للمبتدئين

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

نبدأ درسنا بوسم جديد وهو وسم العنوان للجدول ويكون بالشكل التالي :

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

ويكون هذا الوسم اسفل وسم الـ <table> مباشرة لكي نضع عنوان معين للجدول .


ننتقل الى تعلم خاصية Bgcolor وقد سبق وتعلمناها في دروس سابقة وتعني لون الخلفية لكن هنا في هذا الدرس لن نضعها في وسم الـ body وانما في وسم table كذلك يمكن وضعها داخل وسم الصفوف وداخل وسم الاعمدة لتكون بالصيغة التالية :

<"table bgcolor="color name or code >

<"tr bgcolor="color name or code >

<"td bgcolor="color name or code >

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

كما سنتعلم خاصية اخرى وهي Align وفائدتها لتحديد محاذاة الجدول , في المنتصف او اليسار او اليمين

كما سبق وتعلمنا خاصية border والتي تعني حدود للجدول ويمكن التحكم بسمك حدود الجدول بزيادة رقم هذه الخاصية .

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

اضغط هنا لمتابعة الدرس التاسع

اقرء المزيد

الدرس السابع: دورة تعلم html للمبتدئين

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

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

اضغط هنا لمتابعة دورة excel

ماهو الجدول ؟؟
ببساطة يمكننا تعريف الجدول بأنه عبارة عن خطوط أفقية ( صفوف ) وخطوط عمودية ( أعمدة ) متقاطعة فيما بينها لينتج لدينا جدول .إذن الجدول بصورة عامة يتكون من صفوف وأعمدة .
نبدأ الان بالجزء الذي يخص html وكما تعلمنا في دروسنا السابقة ان اللغة بمجملها تتكون من وسوم tags ومجموعة من الخصائص لهذه الوسوم . فالجدول حاله حال بقية الامور التي تعلمناها فلديه وسم خاص لبنائه وهو :

<table>   وسم الفتح

<table/>   وسم الاغلاق

الان نأتي لتعلم الوسم الخاص بالصفوف وهو :

<tr>

<tr/>

اما الوسم الخاص بعدد الخلايا داخل الصف او الاعمدة فيكون بالشكل التالي :

<td>

<td/>

وهذا الوسم الاخير يكون بداخل الوسم الذي قبله .

فمثلا لو أردنا تكوين جدول يتكون من صفين سنكرر الوسم <tr> مرتين ولو اردنا ثلاثة صفوف سنكرره ثلاث مرات . اما عدد الاعمدة في كل صف فيمكن التحكم به بالوسم <td> وتكراره بقدر الاعمدة او الخلايا التي نريدها .
وكما تعودنا في كل درس سنرفق لكم صورة للكود مع النتيجة وتم التأشير بألون مختلفة على الصورة والتوضيح سيكون بحسب الالوان :

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

الخط الازرق يشير الى خاصية حدود الجدول ويمكننا تغيير الرقم 1 الى اي رقم اخر ونترك هذا لكم لمشاهدة الفرق .
المربع الاحمر هو الصف الاول للجدول مع احتوائه على ثلاثة اعمدة ويمكننا زيادتها بزيادة الوسم <td>
المربع الاخضر هو الصف الثاني مع احتوائه على ثلاثة اعمدة ايضا .
ويمكننا زيادة صف اخر بتكرار الوسم <tr > او بالاحرى تكرار المربع الاحمر او الاخضر بالكامل

هذه صورة لنتيجة التنفيذ .

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

اضغط هنا للتحميل

اضغط هنا لمتابعة الدرس الثامن

اقرء المزيد

الدرس السادس: دورة تعلم html للمبتدئين

نستكمل معكم دورتنا لتعلم HTML  للمبتدئين في درسها السادس والذي سنتعلم فيه موضوع القوائم . فلابد وانك شاهدت بعض المواقع أثناء تصفحك وهي تحتوي على قوائم جانبية في يمين ويسار الموقع أو قوائم في أسفل الموقع . إن القوائم من المواضيع المهمة والتي تتواجد في معظم صفحات الويب لذلك لابد من تعلم موضوع القوائم والتركيز عليه .
سنتعلم نوعين من القوائم وهي القوائم الرقمية والقوائم النقطية ويوجد أنواع اخرى لكن النوعين السابقين هما الاهم والاكثر استعمالا والقوائم حالها حال بقية المواضيع في html  فهي ايضا لديها وسوم ( tags  ) خاصة بها .
نبدأ بالقوائم الرقمية : لتمثيل القوائم الرقمية نستخدم الوسم التالي :

 <ol>

</ol>

هذا الوسم اعلاه هو وسم فتح ووسم اغلاق لتمثيل القائمة الرقمية اما عملية إضافة عنصر لهذه القائمة فيكون بالوسم التالي :

</li>عنصر القائمة <li>

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

ننتقل الى القوائم النقطية فهي ايضا لديها وسم خاص بها وهو :

<ul>

</ul>

أما عملية اضافة عناصر لهذه القائمة فيكون بنفس طريق القائمة الرقمية وبنفس الوسم أي كالتالي :</li>عنصر القائمة <li> 
 وهذا مثال للكود لكيفية تمثيل قائمة رقمية وقائمة نقطية مع نتيجة التنفيذ في المتصفح

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

 
 

انتهى الدرس السادس .

لمتابعة الدرس السابع اضغط هنا 

اقرء المزيد

الدرس الخامس: دورة تعلم html للمبتدئين

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

<a> فتح الوسم 

<a/> اغلاق الوسم

الوسم يحتوي على خاصية واحدة وهي href والتي سنضع فيها الرابط المراد الانتقال اليه .
حيث يكون الشكل النهائي للوسم يكون بالصيغة التالية :

< a href="www.google.com"> Google </a>

هذا مثال لاستخدام الوسم .

كل ماعليك فعله هو تغيير رابط الموقع من كوكل الى اي رابط تريده وكذالك تغيير الاسم حسب رغبتك .
الوسم الثاني الذي سنتعلمه هو وسم
<img> : وهو وسم خاص بأضافة الصور في الصفحة ويأخذ الخاصية SRC والتي نضع فيها رابط الصورة المراد استخدامها في الصفحة .
الشكل النهائي للوسم يكون بالصيغة التالية :

< img SRC ="photo link "></img >

غير photo link الى رابط الصورة في جهازك او موقعك او رابط الصورة من اي موقع . 

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

لمتابعة الدرس السادس اضغط هنا

اقرء المزيد

الدرس الرابع : دورة تعلم html للمبتدئين

نستكمل معكم دورتنا لتعلم html للمبتدئين في درسنا الرابع والذي سنتعلم فيه بعض الخواص الجديدة والوسوم tags الجديدة  . سنحاول ان نهتم في هذا الدرس بالوسوم والامور المتعلقة بالنص لان النص ومحتوى الصفحة من أهم الامور التي تجذب الزائر الى صفحتك . نبدأ بدرسنا لهذا اليوم والذي من المتوقع أن يكون سهل للجميع قبل ان ننتقل الى امور أصعب في الدروس القادمة والتي تخص التعامل مع الصور والروابط والجداول وغيرها من الامور .
سنتعلم في البداية كيفية تغيير لون نص الصفحة التي سنصممها الى لون معين غير الاسود لان اللون الافتراضي يكون الاسود
وتغييره عملية سهلة عن طريق اضافة بسيطة الى وسم <body>  ليصبح بالشكل التالي :

<" body text="blue  >

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

<B> : هذا الوسم يجعل النص عريض .

<strong> : هذا الوسم يجعل النص عريض ايضا وهو يقوم بنفس دور الوسم السابق . ويفضل استعماله .

<i> : هذا الوسم يجعل النص مائل .

<em> : هذا الوسم يجعل النص مائل ايضا وهو يقوم بنفس دور الوسم السابق . ويفضل استعماله .

<U> : هذا الوسم يجعل النص تحته خط .

<Center> : هذا الوسم يعمل على توسيط النص في الصفحة .

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

انتهى الدرس الرابع .

لمتابعة الدرس الخامس اضغط هنا

اقرء المزيد

الدرس الثالث : دورة تعلم html للمبتدئين

أهلا وسهلا بكم في الدرس الثالث لدورة تعلم html  للمبتدئين , في هذا الدرس سنتعلم تقنيات جديدة و وسوم جديدة ومفيدة جدا تتواجد في أغلب صفحات الويب .لكن قبل البدء في الدرس الثالث سنحاول أن نتذكر الوسوم التي درسناها في الدرس الثاني والتي كانت وسم لتعريف الصفحة كذلك وسم رأس الصفحة مع العنوان و وسم جسم الصفحة والذي سيعتمد عملنا في قادم الدروس عليه . نحب ان نؤكد عليكم بأن هذه الوسوم ( tags  ) الاربعة هي وسوم ثابتة في اي صفحة نصممها ولابد أن تكون موجودة  لان من غير المعقول ان نصمم صفحة ليس لها عنوان او ليس لها جسم  او لا نعرفها للمتصفح بأنها صفحة html  .

 بأختصار شديد .. لابد ان تتواجد هذه الوسوم في كل صفحة  نصممها .

<html>

<head>

<title>

<body> 

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

أول الأمور التي سنبدأ بتعلمها في هذا الدرس هو كيفية جعل محتوى الصفحة من اليمين الى اليسار لأننا غالبا سنصمم صفحات عربية واللغة العربية لابد ان تكون من اليمين الى اليسار وهذا يتم عن طريق إضافة بسيطة داخل وسم  <html>  لكي يصبح بالشكل التالي :

<html dir="rtl">

dir = direction

rtl= right to left

في بداية فتحنا لوسم <html> والذي هو وسم تعريف لصفحة html  أضفنا له خاصية الاتجاه واعطينا لها القيمة rtl لكي نعلم المتصفح بأن محتوى هذه الصفحة يجب ان يكون من اليمين الى اليسار وهذا فقط في تصميم الصفحات التي تعتمد على اللغة العربية اما اذا كانت الصفحة التي ستصممها غير عربية فلا داعي لهذه الاضافة ..

سنتعلم شيء جديد اخر وهو خاصية لون خلفية الصفحة والذي يمكن تحديده عن طريق الخاصية bgcolor والتي هي مختصر لـ    background color  والتي سنضعها داخل وسم  <body>  ليصبح بالشكل التالي :

<body bgcolor="color ">

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

هذه اهم الخواص التي تعلمناها في هذا الدرس وسنتعلم المزيد في الدروس القادمة . الان سنتعلم وسوم جديدة وسنبدأ بوسم العنوان .
عند كتابتك لموضوع معين او مقالة معينة لابد ان يكون عنوان هذه المقالة بارزا وواضحا بأنه عنوان كما في الصورة اعلاه . لذالك يوجد مجموعة من الـ tags الخاصة بالعناوين فقط وهي كالتالي :

<h1> </h1>

<h2> </h2>

<h3> </h3> 

<h4> </h4>

<h5> </h5>

<h6> </h6> 

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

سنتعلم وسم جديد وسهل  ومهم جدا ولايحتاج الى شرح طويل وهو <br> والذي يعني الانتقال الى سطر جديد 

<br> : وضيفته الانتقال الى سطر جديد في اي مكان يتواجد فيه هذا ال tag وتأثيره واضح في صفحتنا اعلاه . والملاحظة الوحيدة على هذا الوسم هي ( لايحتاج الى اغلاق ) حيث ذكرنا في دروسنا السابقة ان اي وسم يتم فتحه لابد ان يتم غلقه بأستثناء مجموعة من الوسوم وهذا واحد منها .

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

اضغط على الصورة لمشاهدة الكود

لمتابعة الدرس الرابع اضغط هنا

اقرء المزيد

الدرس الثاني : دورة تعلم html للمبتدئين

نستكمل دورتنا لتعلم لغة html  وفي هذا الدرس سنشرح الكود الذي كتبناه في الدرس الاول بالتفصيل الممل بالاضافة إلى أمور اخرى سنتعلمها في هذا الدرس . نتمنى التركيز لان فهم هذا الدرس يعني المدخل الصحيح لتعلم اللغة بالاضافة إلى إن الدروس القادمة جميعها تعتمد على هذا الدرس .

ذكرنا في الدرس السابق ان لغة html   تتكون من عنصر مهم وهو الـ tag  أو الوسم  ( و الوسم قد يكون كلمة معينة أو حرف واحد او اكثر من حرف واحد ) حيث تحتوي هذه اللغة على مجموعة كبيرة من الوسوم  tags  ولكل وسم وظيفته الخاصة التي يقوم بها في صفحة html  .
الصيغة القياسية للوسم أو الـ tag  يكون بهذا الشكل :

< open tags >   لفتح الوسم

</close tags>  لإغلاق الوسم

هذا يعني إن كل وسم من وسوم لغة html  اذا أردنا استخدامه في الصفحة لابد ان نفتحه ونضعه بين القوسين<…  >  ولكي نغلقه نضع قبل اسمه  /  اي يصبح هكذا </……>  

النقاط تعني اسم الوسم .

ملاحظة : كل وسم يتم فتحه لابد ان يتم اغلاقه الا بعض الوسوم لاتحتاج الى اغلاق وسنذكرها في الدروس القادمة .

بعد كل ماذكرنا اعلاه نستنتج ان الكود في الدرس السابق يحتوي على مجموعة من وسوم html وهي :

<html>

<head>

<title>

< <body

<p>

وكل وسم من هذه الوسوم تم فتحه وتم اغلاقه عند الانتهاء من عمله , لاحظ الصورة التوضيحية التالية :

الان نأتي الى شرح كل tag   بالتفصيل :

<html> :

 هذا الوسم الرئيسي في لغة html   وكل الصفحات لابد ان تحتوي هذا الوسم وفائدته انه يعلم المتصفح ان هذه الصفحة هي صفحة html  وبصيغة اخرى هو وسم لتعريف صفحة html

<head> :

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

<title> : 

هذا الوسم واضح من اسمه وهو يخص عنوان الصفحة والذي يظهر في اعلى المتصفح . ويكون داخل وسم الـ head

<body> : 

هذا الوسم يختص بجسم الصفحة وهو من الوسوم الرئيسية والتي لابد ان تتواجد بكل صفحات ال html حيث كل الصفحة وكل عملنا وكل ماسنكتب من وسوم وكودات ستكون داخل هذا الوسم 

<p> : 
هذا الوسم يخص الموضوع  او المقال أو الفقرة التي سنكتبها سواء كانت كلمة واحدة او جملة او موضوع طويل .

بعد فتح الصفحة السابقة بواسطة المتصفح نحصل على النتيجة التالية :

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

لمتابعة الدرس الثالث اضغط هنا

اقرء المزيد

الدرس الاول : دورة تعلم html للمبتدئين

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

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

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

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

نبدأ على بركة الله ..

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

ماهي لغة html ؟

لغة  html هي لغة لبرمجة وتصميم صفحات الويب ( الانترنت ) وهي اساس جميع صفحات الانترنت ولايوجد اي صفحة تخلو منها وهي مختصر لـ Hyper Text Markup Language . والصفحات التي تصمم بلغة  html  تكون صفحات ثابتة وليست ديناميكية وهي لاتحتاج الى سيرفر لترجمتها ويكفي فقط ان يكون لديك واحد من متصفحات الويب .
لغة html تتكون من عناصر و وسوم tags والوسوم اهم شيء في هذه اللغة ويوجد عشرات الوسوم ولكل وسم فائدة معينة حيث يوجد وسم يجعل الخط مائل ووسم لكتابة عنوان للصفحة و.. الخ  من الوسوم والتي سيأتي شرحها لاحقا .

ماذا احتاج لكي اتعلم لغة html ؟
تحتاج الى متصفح انترنت وهو موجود في كل حاسوب ولايهم ايا كان نوعه .
تحتاج الى محرر نصوص notepad وهو ايضا موجود في كل حاسوب ولكن ننصح بمحرر النصوص notepad ++
ولتحميله اضغط على الرابط التالي للتحميل المباشر :
اضغط هنا للتحميل

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

والان سنصمم اول صفحة لنا بلغة html
ملاحظات :
1-لغة html غير حساسة لحالة الاحرف سواء كانت كبيرة او صغيرة لايوجد فرق .
2- نتمنى ان تقوم بكتابة الكود بيدك لان النسخ واللصق لن يجعل منك مصمما أو مبرمجا بل سيجعل منك مقلدا فقط ! لذلك سنحاول قدر الامكان ان نضع الكود على شكل صورة لمنع النسخ واللصق .
3- صفحة html تكون اما بصيغة .htm او .html

تابع الصور:
اكتب المحتوى التالي واخزن الملف بصيغة html ثم افتحه بأي متصفح
ثم ارفق لنا النتيجة التي حصلت عليها ..







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

لمتابعة الدرس الثاني اضغط هنا

اقرء المزيد