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