رد: الدورة رقم 1 لغة (html)
معا نبدأ التجربة
بإمكانك البدء الان بأي محرر للنصوص وانا سأبد العمل بالبرنامج الخاص بالتصميم
اطبع النص القادم في المحرر
يمكنك نسخه ولصقه .
كود PHP:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
احفظ هذه البيانات بأي اسم على ان يكون له امتداد .html
يمكن تخزين الصفحة بإسم mypage.htm او اي اسم آخر .
شرح جمل الHtml السابقة
- الوسم هو كل ما يكون شكله على <????> وهذا الوسم له وظيفة معينة يؤديها في المستعرض كإظهار النص بلون معين أو تغير نوع الخط للنص أو إظهار عنوان الصفحة أو رسم جدول معين.
- بداية الوسم تكون على الشكل <؟؟؟؟> والنهاية للوسم يكون <????/>
- الجمل التي كانت بين <head> و الوسم <head/> هي الجمل الرأسية وهذه الجمل لا تظهر في المستعرض.
- العبارة Title of page الموجود بين الوسم <title> و الوسم <title/> سوف تظهر على الشريط العلوي وكل ما يأتي في الوسم <title> سيظهر في الشريط العلوي للمستعرض .
- الجمل التي بين وسم ال<body> هي الجمل التي ستظهر في مستعرض صفحات الإنترنت.
- الجمل التي بين <b> والوسم <b/> تعني أن النص الذي يقع في منصف هذه الوسوم سيظهر باللون الغامق .
رد: الدورة رقم 1 لغة (html)
ماذا يحدث بالضبط داخل الجهاز
الوسم الاول <html> يخبر المتصفح بأن هذه البداية لصفحة انترنت أو صفحة html والوسم الاخير وهو </html> يخبر المتصفح بأن هذه الصفحة قد انتهت .
الوسوم الواقعة في منطقة <head> وهي المعلومات التي تظهر في رأس السفحة وتظهر في الشريط العلوي تماما .
الوسم <title> يخبر المستعرض بكتابة النص في الشريط العلوي تماما.
الوسم <body> المسؤول عن كل ما يظهر في صفحة الإنترنت ..
رد: الدورة رقم 1 لغة (html)
إذا كانت هذه المرة الأولى لك في كتابة html فهذه إجابات ضرورية لك
س: بعد أن كتبت الصفحة وخزنتها، لم يظهر شيء؟
تأكد تماماً انك قد خزنت الصفحة بإسم مقبول وان يكون على شريط الرابط العنوان الصحيح لصفحة الإنترنت مثل c:\first_page.htm.
س: لقد قمت بالتعديل على الصفحة، ولكن التعديل لم يظهر؟
بالتأكيد التعديلات سوف تظهر عند الضغط على زر تحديث الصفحة بعد التعديلات.
س: ما نوع المتصفح الذي يجب أن أستخدمه؟
[COLOR="RoyalBlue"] لا يهم نوع المتصفح، جميع انواع المتصفحات تؤدي المهمة في التدريب.[/
COLOR]
س: هل هذه الدورة فقط لنظام ويندوز، ما هو حال الMac؟
يمكنك ان تقوم بهذه الدورة على نظام الMac بنفس الطريقة.
رد: الدورة رقم 1 لغة (html)
مكونات HTML
يوجد هناك منطقة الhead ومنطقة الbody
منطقة الhead التي تبدأ بوسم البداية <head> والتي تنتهي بوسم النهاية <head/>
منطقة الbodu التي تبدأ بوسم البداية <body> تنتهي بوسم النهاية <body/>
وقد بينت الفرق بين هذه المناطق بال head الجزء العلوي مثل الشريط العلوي جدا والذي يكتب عليه اسم الصفحة أما بجزء الbody فيظهر جميع ما يمكن ان تراه في الصفحة من نصوص وألوان وجداول وبيانات متعددة.
سوف نأخذ الوسم التالي
<b>This text is bold</b>
عنصر الhtml يبدأ بـوسم البداية مثل <b>
اما محتوى عنصر الhtml في جملة الhtml السابقة هو This text is bold
اما عنصر الhtml ينتهي بوسم النهاية مثل <b/>
أما الهدف من هذه الجملة هو أن يظهر النص This text is bold بالغط العريض.
(يمكنك التجربة بوضع هذه الجملة في منطقة الbody).
رد: الدورة رقم 1 لغة (html)
ال Attributes
وهي صفات تكتب داخل وسم البداية لتوضيح بعض الخصائص للوسم مثل اللون او الحجم ...
مثل
<body bgcolor= "blue" > </body>
فالـ Attributes هو bgcolor ومهمة هذا الـAttributes تحديد لون خلفية الشاشة
أما كلمة blue التي جائت بين " " فهي لون الخلفية وهو اللون الأزرق.
يمكنك الان التجربة ووضع صفة bgcolor في صفحة الإنترنت التي قمت بتخزينها مسبقا واستبدل القيمة blue بالقيم التالية yellow red green وشاهد الفرق.
رد: الدورة رقم 1 لغة (html)
صورة (صورة عن برنامج بسيط جدا).
https://www.arabsoftware.net/uploads...GnUh4jXhy3.jpg
اخذت هذه الصورة وانا اجهز الدورة بواسطة برنامج Microsoft Expression Web
رد: الدورة رقم 1 لغة (html)
المزيد من الوسوم
اعتقد الان قد اصبح لديك معلومات جيدة حول ترتيب صفحة الـHtml والان سنتحدث عن المزيد من الوسوم ولكن يجب ان تكون قد طبقت ما سبق بطريقة عملية ...
وسم الـHeadings
يمكن تعريف وسم العناوين بواسطة <h1> وهذا يعني ان يكون محتوى هذا الوسم عنوان وهناك 6 درجات لهذا الوسم من الرقم 1 حتى الرقم 6 .
وسم الفقرة <p>
يجب التميز بين الفقرات بالوسم <p> وهذا لضمان ترتيب وجمال الصفحة.
وسم ال سطر جديد <br>
يمكنك استعمال هذا الوسم عندما تريد الكتابة على سطر جديد دون انهاء الفقرة .
أما الصورة التالية توضح لنا المزيد
https://www.arabsoftware.net/uploads...bSXDBidkhD.gif
والصورة التالية هي عند الإستعراض على متصفح الإنترنت
https://www.arabsoftware.net/uploads...cpbMCRX3eL.gif
رد: الدورة رقم 1 لغة (html)
المزيد من الوسوم مع تعريفها
يجب تجربتها بشكل عملي
<b> كتابة نص غامق
<big> كتابة نص كبير
<i> كتابة نص مائل
<small> كتابة نص صغير
<strong> كتابة نص مميز
<sub> النص يكون على مستوى اقل في السطر
<sup> النص يكون على مستوى اعلى من السطر
<ins> وضع سطر اسفل الكلمة
<u> نفس الدالة السابقة وضع خط اسفل الكلام
<del> وضع الكلام على هيئة حذف
<s> نفس الدالة السابقة وضع خط في منتصف الكلمة
<strike> نفس الدالة السابقة وضع خط اسفل الكلمة
<code> كتابة النص على شكل كود برمجي
<kbd> كتابة نص بنفس الخط الاساسي للكيبورد
<samp> كتابة نص برمجي بسيط
<tt> كتابة نص بخط الطابة
<var> كتابة نص على شكل متغير
<abbr> كتابة نص على شكل مختصر
<address> كتابة النص على شكل عنوان
<bdo> كتابة نص الإتجاهات
<blockquote> كتابة نص مقتبس
<q> نفس التعريف السابق
رد: الدورة رقم 1 لغة (html)
إضافة صورة
- يمكن إضافة الصورة للصفحة بواسطة الوسم <img> الخاص بالصور.
- الوسم <img> وسم فارغ بمعنى لا يتم إضافة محتوى له وليس له نهاية.
- من أحد الصفات(الـattribute) الخاصة بالوسم <img> الصفة src المسؤولة عن تحديد مكان الصورة.
- يمكن الكتابة بهذا الشكل <img src="url"> حيث يجب استبدال "url" بمكان الصورة ولا تنسى ان يكون مكان الصورة بين " ".
مثلا السطر التالي
<img src="images/arabsoftware_up_01.gif">
هو إضافة للصورة على الصفحة التي اسمها arabsoftware_up_01.gif ومكانها في المجلد images وهذا المجلد الاخير يوجد في نفس المجلد التي تم تخزين الصفحة فيه
الصورة التالية توضح اكثر
https://www.arabsoftware.net/uploads...skzTRttcfn.gif
وهذه الصورة عند التفيذ على متصفح الويب
https://www.arabsoftware.net/uploads...JDUCRq3uuk.gif
رد: الدورة رقم 1 لغة (html)
المزيد عن الصور
في هذا السطر <body background="background.jpg">
هو جعل الصورة background.jpg خلفية الشاشة
رد: الدورة رقم 1 لغة (html)
كيفية إضافة الروابط
الروابط أو Links هي العبارات التي تنقلنا من صفحة لصفحة عند الضغط عليها..
ويمكن إضافة الرابط بواسطة الوسم <a>.
وهناك عدة أشكال للروابط
والكود التالي يوضح شكل الرابط
كود:
<a href="www.arabsoftware.net">Arab Software Web site</a>
يتم وضع الرابط في الصفة (الـAttributes) href
في الكود البرمجي السابق
الرابط الذي سيتم الإنتقال له هو www.arabsoftware.net
والعبارة التي ستظهر على الشاشة للمستخدم Arab Software Web site
أما كيفية اضافة رابط في صورة
يتم جعل الصورة كرابط عند الضغط عليها تنقلنا لصفحة أخرى كما المثال التالي
كود:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
قد تم في المثال السابق إضافة وسم الصورة بدلا في منطقة ما سيظهر على الشاشة من الرابط
رد: الدورة رقم 1 لغة (html)
وسائل الإدخال المختلفة الـForms
الForms هي المنطقة التي تتيح للمستخدم ادخال معلومات مختلفة وهناك عدة انواع مثل
منطقة ادخال النص textarea fields، القائمة المنسدلة drop-down menus، تحديد خيار من عدة خيارات radio buttons، تحديد عدة خيارات checkboxes، إداخال كلمة سر أو نص ظاهر.
الصورة التالية توضح كيف يمكنك استعمال جميع وسائل الادخال بواسطة اكسبريشن ويب أو مايكروسوفت اوفس شير بوينت
https://ikbis.com/system/production/...gif?1185526496
يكون عادة الشكل البرمجي للـForms
كود:
<form>
<input>
<input>
</form>
ملاحظات من الكود السابق ..
نبدأ الفورم بواسطة الوسم <form>
الوسم <input> هو احد وسائل الإدخال المختلفة .
يمكن وضع (وسيلة ادخال واحدة)<input> أو اكثر في الفورم الواحد.
رد: الدورة رقم 1 لغة (html)
أشكال متعددة من الـForms
هناك اشكال متعددة من الفورم لمعظم وسائل الادخال
مثلا الـText Fields
هذه الوسيلة تستخدم في ادخال اسم مستخدم أو ادخال الإسم الأول او الإسم الاخير
ضع الكود التالي في الفورم لديك وشاهد النتيجة
كود:
<input type="text" name="firstname">
وسيلة الإدخال Radio Buttons
تستخدم عند الخيارات المتعددة التي لا تقبل إلا اجابة واحدة مثل الجنس (ذكر أم انثى)
ضع الكود التالي في صفحتك السابقة وشاهد النتيجة
كود:
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
وسيلة الإدخال Checkboxes
والتي تستخدم عند الخيارات التي تقبل أكثر من إجابة مثل اختر خمسة اسماء مجلات تحبها من عشرة مجلات
ضع الكود التالي في صفحتك وشاهد النتيجة
كود:
اختر اسماء المجلات التي تحبها
<form>
مجلة عرب سوفتوير
<input type="checkbox" name="vehicle" value="ArbS" />
<br />
مجلة عرب هاردوير
<input type="checkbox" name="vehicle" value="ArbH" />
<br />
مجلة بي سي مجازين
<input type="checkbox" name="vehicle" value="PcM" />
</form>