ط¨ط§ظ‚ظ‰ ط¯ط±ظˆط³ ط¯ظˆط±ظ‡ HTML - [ط£ظƒطھظ…ظ„طھ ]



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

قررت بأن أقوم بتجميع كافة الدروس من أجل أن نبدأ فى الدوره التالية وهى دوره CSS
ولكى نقوم أيضا بإكمال الدورات التعليمية إن شاء الله
و هذه مجموعه الدورات التى سوف أقدمها إن شاء الله
HTML
CSS
HTML5
CSS3
JQUERRY
JAVASCRIPT
PHP


وماتوفيقى إلا بالله

فالنتوكل على الله

ونشرح طريقة كافة الدوره حتى تعم الفائده إن شاء الله وعلى العلم راح تكون هذه مرجع شامل للجميع إن شاء الله


الدرس مفصل الثانى : TAGS



بسم الله الرحمن الرحيم
السلام عليكم ورحمه الله وبركاته
الدرس مفصل الثانى من لغة HTML
الدرس مفصل عباره عن شرح طريقة لتاريخ لغة HTML و تطويرها و هذا جزء للاطلاع فقط
الجزء الاخر عباره عن شرح طريقة لاساسيات الوسومات TAGS و التعرف على عدد كبير من الوسومات
نتوكل على الله و نبدأ
تاريخ لغة HTML
الوسومات TAGS ماهى ؟
عباره عن أكواد متفق عليها عالميا و يتعامل معها المتصفحات الخاصه بالإنترنت و تقوم بفهم الاكواد و عرضها فى صوره مرئية
مما يتكون الوسم
عاده يكون الوسم عباره عن بداية و نهاية
مثل
<START><START/>
فهمنا من المثال السابق أن الوسم START بدايته <START> و نهايته </START>
هل يوجد نوع اخر من الوسومات ؟ بالطبع يوجد
فمثلا هناك وسومات يتم فتحها و اغلاقها فى نفس البدايه
مثلا كود code ال META
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
فلو تلاحظ <META /> هكذا تم فتح الوسم و تم اغلاقة
اذن يوجد نوعين من الوسومات احدهما يتم فتحه واغلاقه من خلال امرين و الاخر يتم فتحه واغلاقة من امر واحد

أمثلة لوسومات لغة HTML (تحفظ بالتكرار لأهميتها)
<p>وسم خاص بالكتابة البرغراف</p>
<h1>وسم خاص بالعنوانين كبيره الخط</h1>
<h2>وسم خاص بالعنوانين متوسطة الخط</h2>
<h3>وسم خاص بالعنوانين صغيرة الخط</h3>
<a>وسم خاص بالروابط</a>
<img /> وسم خاص بالصور
<body> وسم خاص بمحتويات الصفحة </body>
<html> وصف خاص بمحتويات كل الصفحة </html>
<head>وسم خاص بمحتويات الهيد يوضع به اكواد الميتا و الاستايل style</head>
<meta /> وصف خاص بالميتا
<link /> وسم خاص بالروابط فى وسم الهيد
<title>وسم خاص بأسم الصفحة </title>
يوجد المزيد و المزيد بالوسومات وسوف يتم استعراضها فى الدروس التالية بالتبسيط
اخر الدرس مفصل
لغه HTML لغة ليست معقده و تعتبر ابسط اللغات البرمجية من حيث الاستخدام
اتاحت لغة ال HTML إمكانية عمل وسم خاص بكـ
فمثلا
يمكننا عمل وسم خاص بنا مثل AL3ALAMY
نريد عمل وسم بهذا الاسم
فنقم بعمل بداية و نهاية للوسم
<AL3ALAMY> لقد تم إنشاء الوسم بنجاح </AL3ALAMY>
انتهى الدرس مفصل




الدرس مفصل الثالث : Properties Of Tags



بسم الله الرحمن الرحيم
السلام عليكم و رحمه الله و بركاته
درس مفصل اليوم بسيط للغاية و لكن مهم جدا
محتويات الدرس مفصل :

  • خصائص الوسومات و كيفية و ضع خاصية لكل وسم و أمثلة
  • تعريف الكلاس و الأى دى ||CLASS|| , ||ID||

ماهى خصائص الوسومات ؟
طبيعى فى هذا الكون أن كل شئ له مميزاته و خصائصه و ايضا له عيوبة
الوسوم كما اتفقنا أن يوجد أنواع عديده ويوجد لكل نوع رمز و الآن يتوجب علينا أن ندرك أن لكل وسم خاصية تميزه عن غيره و ايضا يشترك فيها مع غيره
على سبيل المثال
خصائص وسم الروابط <a></a>
يوجد فى الروابط خاصية HREF التى تتميز بها عن باقى الوسومات … ماهى فائدتها ؟ فائدتها أنها هى المسار الذى يذهب إلى الرابط فمثلا
<a href=”www.al3alamy.net”></a>
لو نلاحظ أن الخاصية href تساوى ما بداخل علامات التنصيص “” و هنا تساوى الصفحة الرئيسية - العالمى لخدمات الويب المتكاملة إذن ماذا يحدث عند الضغط على الرابط سوف يتوجه إلى الصفحة الرئيسية - العالمى لخدمات الويب المتكاملة
هكذا هى وظيفه خاصية href التى تستخدم مع وسم الروابط
هل يوجد هناك خصائص آخرى؟ أى نعم
Target : خاصية تحدد طريقة الذهاب للرابط مثلا فى صفحة جديده أو نفس الصفحة أو صفحة خارجيه
name : خاصية تحدد إسم الرابط فنحن نعلم بأن لكل شئ فى الكون إسم و لهذا فى لغة html يوجد هذه الخاصية فيمكننا أن نعطي للروابط إسما و هذه الخاصية مشتركة مع كافة الوسومات فيمكننا تنفيذها مع أى وسم بشرط أن لكل وسم إسم واحد فقط ولا يبدأ بأرقام أو أسماء محجوزه
إذن فالنجمع هذه الخصائص فى صوره واحده لكى نشاهد
<a href=”www.al3alamy.netâ€‌ target=”_blank” name=”al3alamy”></a>
ماذا يعنى الكود code السابق ؟
بسيط هذا الكود code ما تخف كل الكود code يأخذ خاصية href سبق تعريفها و خاصية target بها القيمه _blank أى أن الرابط سوف يتم فتحه فى صفحه خارجية و بها خاصية Name و هذا يدل على اسم الرابط فأعطيناه اسم al3alamy
إذن الآن تعلمنا بأن لكل وسم له خصائص و يجب معرفة خصائص كل وسم حتى تستطيع التعامل مع كل وسم بطريقة صحيحة و فى هذه الدوره قررنا بأن كل درس مفصل سوف يتم إدراج بعض الخصائص فى دروس مفصله حتى لا يصعب على الدارس تعلم الخصائص
الجزء الثانى من الدرس مفصل
ماذا يعنى ب class و id ؟ و هل يوجد فرق بينهم وبين خاصية name ؟
class: متغير يمكن أن نستخدمة مع وسومات عديده بخصائص معينه
id : متغير لا يمكن أن نستخدمة الا مع وسم واحد فقط ولا يصح للعديد
فمثلا
مثال طبيعى بعيد عن الدوره
كم شمس توجد فى الكون ؟
شمس واحده إذن فلا يصح أستخدام class مع الشمس و يجب أن يتم إستخدام id لان الشمس واحده فقط
مثال آخر
كم دولة توجد فى الكون ؟
كثير إذن فيتم إستخدام class بدلا من id لتعدد الدول
إذن الخلاصه : ال class يستخدم لإعطاء خصائص معينه لمجموعه من الوسومات و ال ID يستخدم لإعطاء خصائص معينه لوسم واحد
الفرق بين name , class,id
الحقيقة يوجد فرق شاسع بين الثلاث
name : مخصص فقط لإعطاء خاصية الإسم للوسم ولا يصلح من خلاله إعطاء خصائص للوسم ويستخدم فى لغات البرمجة سوف يتم توضيحها فى الدروس التالية
class: يعطى إسم للوسم ومن خلال إسم الوسم يتم إعطاءة الخصائص
id : نفس class ولكن لا يصلح إلا لوسم واحد فقط
مثال على class و Id
نريد إنشاء رابط واحد فقط يحتوى على إسم شركة العالمى
نلاحظ رابط واحد فقط إذن سوف نستخدم id
<a id=”al3alamy”></a>
إذن فهمنا من المثال أن يوجد رابط واحد فقط له id واحد ولكن لا يمكن إستخدام الكلاس
اذا كن ا نريد إنشاء أكثر من رابط إذن فنستخدم class
<a class=”al3alamy”></a>
<a class=”al3alamy”></a>
<a class=”al3alamy”></a>
<a class=”al3alamy”></a>
هذا الفرق الاول id لا يصح فى كامل التصميم أن يكون هناك رابط آخر أو اى وسم آخر يحتوى على اسم al3alamy أما الثانى فيوجد العديد من الوسومات تحتوى على اسم al3alamy و ذلك لأنه يستخدم class
انتهى الدرس مفصل



الدرس مفصل الرابع : Comments



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

السلام عليكم ورحمه الله وبركاته اخوانى الكريم

درس مفصل اليوم بسيط جدا جدا
COMMENTS

ماهى التعليقات ؟
التعليقات هى أكواد تكتب على شكل طريقة معينه و من خلالها يمكن فهم محتوى الاكواد الموجوده فى التصميم و معرفته وظيفه كل كود code
طريقة كتابة التعليقات
<!– هنا نضع التعليق المراد –>

مثلا
نريد وضع تعليق على رابط
فيكون
<!–تعليق على رابط العالمى –>
<a id=”al3alamy”></a>
هكذا تم وضع التعليق
فعند العمل على الاكواد سوف نلاحظ هذه التعليقات ومعرفه وظيفه كل كود code فى التصميم

هل يتم عرض التعليقات فى المتصفح ؟
لا فالمتصفح يتعامل معها على أنها أكواد وهميه فلا يقوم بعرضها ويعرض الاكواد الاساسيه التى بها وسومات

إذن الخلاصه : التعليقات تضاف من أجل توضيح التصميم وسهولة التعامل معه

انتهى الدرس مفصل



الدرس مفصل الخامس : Formatting Tags



بسم الله الرحمن الرحيم
الدرس مفصل الخامس من دوره تعليم لغة HTML
الدرس مفصل عباره عن وسومات الكتابة
كما نرى ان هناك أكثر من طريقة للكتابه فهناك طريقة للكتابه العريضه و الكتابه المائلة و ايضا فى لغة HTML يوجد وسومات تستخدم فى الكتابة فمثلا نلاحظ الأمثلة التالية
<p><b>وسم الكتابة العريضة </b></p>
<p><strong>وسم الكتابة العريضة</strong></p>
<p><i>وسم الكتابة المائلة</i></p>
<p><em>وسم الكتابة المائله المشدده</em></p>
<p><code>وسم كتابة الشفره </code></p>
<p><sub>وسم كتابة الكلام الفرعى</sub></p>
فنلاحظ كل هذه الوسومات تستخدم من أجل الوصول الى الطريقة اللازمه للكتابه فمثلا عنوان الصفحه يكتب بخط عريض و البرغراف فى الصفحه يكتب بخط طبيعى او مائل على حسب
إذن الخلاصه
وسومات HTML
هى
<B>
<STRONG>
<I>
<CODE>
<SUB>
وتم توضيح اهميه كل وسم



الدرس مفصل السادس : LINKS IN HTML



السلام عليكم ورحمه الله وبركاته

درس مفصل جديد فى دوره HTML

الدرس مفصل من أبسط ما يكون

الروابط فى لغه HTML
الروابط : هى الأماكن التى يذهب إليها المستخدم عن الضغط على الكلمة

فمثلا
نريد ان يذهب المستخدم إلى واجهه الموقع الرئيسية فنقوم بعمل رابط وفيه امر الذهاب لواجهه الموقع الرئيسية
إذن فيوجد وسم لعمل هذا الامر
ماهو الوسم المستخدم ؟
وسم <A>

فلنأخذ الوسم بالتفصيل
<a href=”index.php” target=”_blank” title=”الواجهه”>الواجهه الرئيسية للموقع</a>
التفصيل
اسم الرابط : الواجهه الرئيسية للموقع و دائما اسم الرابط يوضع بين الوسم <a>هنا اسم الرابط</a>
خاصية TARGET : هذه خاصية الرابط هل سيفتح فى صفحه جديده ام فى نفس الصفحه أم فى صفحه صغيره
وهنا اخترنا _BLANK أى فى صفحه جديده ويوجد أيضا (_SELF , _TOP , _PARENT , New)
خاصية HREF : هذه الخاصية تستخدم من أجل وضع الرابط الذى سوف يذهب إليه المستخدم لذلك قمنا بوضع الرابط الخاص بالواجهه الرئيسية وهو INDEX.php
خاصية TITLE : هذه الخاصية تستخدم من اجل عرض اسم الرابط عند مرور الماوس فمثلا عندما اقف على الرابط هنا يظهر كلمة الواجهه فى إطار

و هكذا يكون انتهى الدرس مفصل



الدرس مفصل السابع : HEAD



الدرس مفصل يوتيوب
الدرس مفصل الثامن : IMAGES TAGS , TABlEs



السلام عليكم ورحمه الله وبركاته

اليوم بإذن الله سوف نشرح طريقة درس مفصل وسم الصور و الجداول فى لغة HTML


أولا وسم الصوره
لكى نقوم بإدراج صوره فى الHTML

نستخدم الوسم هذا
<img src=”path” alt=”image title” width=”num” height=”num ” >
شرح طريقة الوسم
SRC : يعنى مسار الصوره
ALT : هذا عند مرور الماوس على الصوره راح يظهر اسم الصوره
WIDTH , HEIGHT : مقاس الصوره فقط نضع ارقام المقاسات بدون PX او %



انتهى وسم الصوره

الجزء الثانى
الجداول

<table >
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>
وسم TABLE هو المسؤال عن إنشاء جدول
شرح طريقة الكود code
<TR> هو وسم من أجل إنشاء صف جديد فى الجدول
<TD> وسم من أجل إنشاء خليه جديده فى الجدول أو عمود
فنلاحظ ان الصفوف تتكون من اعمده والجدول يتكون من صفوف بداخلها اعمده

انتهى الدرس مفصل



الدرس مفصل التاسع : LIST



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

السلام عليكم ورحمه الله وبركاته

درس مفصل اليوم فى غايه الاهميه


تنقسم القوائم إلى نوعين قوائم طلبية وقوائم غير طلبية

فالقوائم الطلبيه هى التى تظهر بشكل مرقم ويكون لها وسم OL
مثال
<ol>
<li>COM</li>
<li>NET</li>
</ol>

النتيجه
COM
2. NET
القوائم غير الطلبيه وهى التى لا تظهر بشكل مرقم UL
<ul>
<li>COM</li>
<li>NET</li>
</ul>
فتظهر

  • COM
  • NET

يمكن ان تظهر بدل الدوائر هذه نقاط مربعه أو شرط أو يمكننا إخفائها وسوف يتم شرح طريقة كيف يتم ذلك ولكن فى دوره CSS قريبا ان شاء الله

شرح طريقة الأكواد
<OL> : وسم القائمه الطلبية
<LI> : وسم القائمه نفسها ويتم اضافته داخل القائمه سواء كانت طلبية او غير طلبية لكى يتم إضافة أشياء إلى القائمه

وبالمثل فى القائمه LI





انتهى الدرس مفصل









أنتهت الدوره إن شاء الله قريبا دوره CSS وبدايه جديده وراح تكون أفضل إن شاء الله

المصدر

إذا فى اى سؤال انا موجود
الامتحانات راح تكون فى الدورات القادمة إن شاء الله













©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©