سنقوم من خلال السلسة المطروحة هنا بوضع الدروس التي يقمها موقع VTEAM في أحد المعاهد وهذه الدورة التي تم الإعلان عنها مسبقا، لذا ولكي نبقى مع تواصل مع بقية الطلاب من باقي المحافظات سنقوم بوضع الدروس هنا، وسنبدأ معكم بدورة تصميم الموقع ولقد بدأن بلغة HTML.
أرجو ان تنالوا الفائدة المرجوة من المقرر.
يمكنكم تحميل الملف من المرفقات، او متابعة الدرس من هنا.
صفحتي الأولى
الأوسمه :- الأوسمه هي الأشياء التي بين هذين القوسين <> بالتأكيد أنت لم تري أكواد تبدأ بهذين الشكلين من قبل حسنن من قائمة View أختار Source ، أنت تري الآن النص الذي تقرأه ومحاط في أغلب الأحوال بـ <> هذه الأكواد هي التي صنعت هذه الصفحة التي أمامك
أغلب الأوسمة تبدأ <> من اليسار وتنتهي</> في اليمين
<HTML>
<HEAD>
<TITLE>My first HTML page</TITLE>
<HEAD/>
<BODY>
Wow I am Writing My First Page
<BODY/>
</HTML>
• لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.
التنسيق الأساسي
[ نهايه سطر | أضافة سطر | الفرغات | الخواص | تنسيق النص]
نهايه سطر وبدايه سطر جديد:-
وسوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
الآن كيف أضيف سطر جديد ؟
ولفعل هذا نستخدم الوسم <P><P/> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات. ( يلاحظ ان هذا الوسم لديه وسم نهايه لكن من الممكن أستخدامة بدون وسم النهايه )
الفراغات: تعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم والأحرف هي اختصار للعبارة Non Breakable Space
تنسيق النص
• نتحدث الآن عن كيفيه جعل النص عريض أو مائل أو تحته خط وكيف نجعله في وسط الصفحة أو يمين أو يسار الصفحة.
• العناوين | حجم الخط
FONT SIZE="X">
.......النص يكتب هنا ............
</FONT>
• [ Face | تغيير لون الخط | أمثله ]
خاصيه FACE تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، و الخط الإفتراضي في جميع المستعرضات هو 12pt Black Times New Roman
<FONT COLOR="#FF0000">النص</FONT>
• نظام الألوان للإطلاع فقط:
هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.
وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط.
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: CC6699 أما اللون الأسود فرقمه هو 000000
الوصلات
وهو الوسم الأساسي لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية HREF
<A HREF="mailto:d4a@f2s.com">أرسل لي</A>
لآن فسنتحدث علي نوع أخر من الوصلات و هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة، إلى أولها مثلاً أو إلى آخرها أو أي مكان آخر نريده
والمبدأ هنا هو أن تقوم بتعريف أو تسمية هذا المكان بإسم معين سوف تقوم لاحقا باستخدامه في الوصلة التشعبية. وفي هذه الحالة يتحتم عليك استخدام الخاصية الثانية للوسم <A> وهي NAME
أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم <A> ... </A>
<A NAME="attrib1">LINKS</A>
الخطوة الثانية هي إدراج الوصلة التشعبية لهذه الفقرة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي:
<A HREF="#attrib1">1st Paragraph</A>
القوائم
تحتوي لغة HTML على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم:
• أولهما المتسلسلة Ordered Lists.
• وثانيهما القوائم غير المتسلسلة Unordered Lists
ولتعيين كل بند من بنود القائمة نستخدم الوسم <LI> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند List Item.
<LI>دمشق
<LI>حلب
<LI>حمص
<LI>حماة
</OL>
<UL>
<LI>دمشق
<LI>حلب
<LI>حمص
<LI>حماة
</UL>
الخاصية الوحيدة التي تستخدم مع هذه الوسوم هي TYPE ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة. ولكن نستطيع استخدامها أيضاً مع وسم البنود <LI> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند.
فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الأرقام العادية الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية
| المرفق | الحجم |
|---|---|
| fisrtoage.rar | 19.69 كيلوبايت |

شكرا كتييييييير سيد أنس
والله الدرس روووووعة ...
شباب .. يلي ما سجل دورة ال PHP بمشروع الدورات التقنية فنفس الدرس يلي أخدناه موجود هون ...
الله يعطيك ألف عافية .. ع فكرة الكل طاير عقلو بإعطائك ..
الله يعطيك العافية أنس فكرة كتير ظريفة هيك منخلي بقية الشباب يلي ما سجلو معنا يعرفو شو آخدنا
وهيك مابيكون راح عليهن شي
شكرا انس بيك
درس ممتع وسهل جدا
مشكور كتير سيد أنس..
بالفعل شرح وافي و مبسط..
و الله يعطيك العافية..
جد شرح رائع..ووافي..ومبسط..
واكيد حنكون من المتابعين لكل دروسك..
وبإنتظار الدرس القادم..
تقبــــــــــــل تحيــــــــــــاتي..
شكرا كتيير عالدرس سهل كتيير حاسس أنه لغه ال html أسهل من الباقي

لسا ما جربت أكتبها بس أكتبها أنشالله ألي رجعه
شكرا لكل من علق وإذا حدا عندو سؤال يا ريت يطرحوا منشان اقدر جاوبوا عليه بإذن الله بشرط يكون السؤال متعلق بالدرس:)
had 2el dares raw3a walla ,,, wallah ya36ek 2el 3afeeeeh !!!!
السيد admin ، بالفعل درس راائع ، مممتع ، مفيد ، قيم ، شكراً جزيلا لك .