لغ ا يت : عبارة عن صفحة ويب Web Page أو أكثر مترابطة مع بعضها تحت اسم معين موقع الويب له عنوان على شبكة االنترنت يسمى بعنوان الموقع Web Address ويمكن زيارة موقع الويب من خالل الكمبيوتر أو الهاتف المحمول. طفسخ ا يت : Web page هى مستند به محتوى إلكترونى ينشر على شبكة االنترنت ويتم عرضه من خالل مستعرض االنترنت. ا ظفسخ ا شئيغخ :Home Page هى أول صفحة بموقع الويب والتى من خالله يتم االنتقال لباقى صفحات الموقع. عناصر صفحة الويب : صور نصوص صوت فيديو ارتباط تشعبى أ اع طفسبد ا يت :- -1 صفحات الويب الثابتة : Static Web Pages محتواها معد مسبقا بواسطة مصمم الصفحة ويظل هذا المحتوى ثابتا وتستخدم صفحات الويب الثابتة لعرض المعلومات يتم االطالع عليها فقط بدون إمكانية إجراء أى معالجة من الزائرين لمحتواها وتستخدم أوامر HTML فى تصميم الصفحات مكونات صفحة الويب الثابتة ( نصوص صور لقطات فيديو (. -2 صفحة الويب التفاعلية : Interactive Web Page هى صفحة معلومات تعرض محتوى يتيح للزائرين التفاعل والمعالجة ولتصميم هذا النوع من صفحات الويب تستخدم أوامر HTML باالضافة للغات اخرى مثل Java Script و لغة PHP وغيرها مكونات صفحة الويب التفاعلية هى صفحة تستقبل بيانات وتقوم بمعالجة واخراج نتائج للمستخدم شاز رظ ي ئ شبء لغ ا يت : المرحلة االولى : التخطيط لبناء موقع الويب المرحلة الثانية : تصميم صفحات الويب للموقع المرحلة الثالثة : اإلعداد والتجهيز لصفحات الويب المرحلة الرابعة : مرحلة تنفيذ صفحات الويب المرحلة الخامسة : نشر الموقع عبر االنترنت 1
ا شز خ اال : ا زخطيؾ ج بء لغ ا يت : عمل رسم تخطيطى بسيط على الورق يتضمن صفحات الموقع الصفحة الرئيسة للموقع وصفحات الويب المرتبطة بها تحديد البيانات والمعلومات التى تتضمنها صفحات الويب كمعلومات وخدمات تقدم من خالل الموقع مثال تصميم موقع للمدرسة تخطيط للموقع من خالل االسم والموضوع الذى سوف يعرض بالموقع تحديد صفات الموقع من صفحة رئيسية وصفحات الموقع ووضع تخطيط للصفحات المرحلة الثانية : تصميم صفحات الويب الموقع: تصميم شكل الصفحة الرئيسية وصفحات الموقع تحديد التنسيقات المختلفة لصفحات الويب مثل لون الخلفية وحجم الخط ونوعه وأماكن وضع النصوص والصور ولقطات الفيديو بصفحات الويب تحديد االرتباطات التشعبية داخل الصفحة الرئيسية وصفحات الموقع المرحلة الثالثة : األعداد والتجهيز لصفحات الويب : 1- إعداد وتجهيز النصوص : أعداد وتجهيز البيانات النصية وحفظ النص داخل ملف نص ووضعه داخل مجلد 2- إعداد وتجهيز الصور : إعداد وتجهيز ملفات الصور وحفظها داخل مجلد 3- إعداد وتجهيز الصوت والفيديو : إعداد وتجهيز ملفات الصوت والفيديو وحفظها داخل احد المجلدات جميع الملفات تكون داخل مجلد واحد المرحلة الرابعة : مرحلة تنفيذ صفحات الويب -: هى مرحلة تحويل التصميم الورقى بالمراحل السابقة إلى صفحات ويب يمكن عرضها من خالل أحد برامج متصفحات االنترنت اضافة البيانات ( نصوص صور صوت فيديو ) فى صفحات الويب إنشاء االرتباطات التشعبية بين صفحات الويب حتى يسهل التنقل بين صفحات الموقع من خالل أوامر HTML المرحلة الخامسة : نشر الموقع عبر االنترنت هذه المرحلة تتضمن حجز عنوان للموقع وتخصيص مساحة تخزينية للموقع على أحد أجهزة الخادم ونشر الموقع باالنترنت. 2
أوال : مرحلة االعداد والتجهيز إلنشاء ملف الصوت : -1-2 -3 اإلعداد والتجهيز بجمع بيانات عن المدرسة أو موضوع تصميم الموقع مثل اسم المدرسة االدارة التعليمية المحافظة المسابقات التى اشتركت بها المدرسة المراكز التى حصلت عليها المدرسة بالمسابقات شهادات تقدير االنشطة الصفية الرحالت المدرسية ثم كتابة البيانات ببرنامج منسقات النصوص والتنسيق لها وحفظ البيانات داخل ملف نصى اإلعداد والتجهيز للبرمجيات تثبيت أحد برامج إنشاء ومعالجة الصوت على الكمبيوتر مثل Audacity اإلعداد والتجهيز المكونات المادية توصيل الميكروفون Mic بالكمبيوتر توصيل السماعة Speakers بالكمبيوتر ثانيا : مرحلة التنفيذ إلنشاء ملف الصوت : اوال : تحميل برنامج إنشاء ومعالجة الصوت : تحميل برنامج Audacity وهو أحد برامج مفتوحة المصدر ويعمل على انظمة التشغيل مثل Windows Linux من خالل الرابط.http://audacity.Sourceforge.net/ الشاشة االفتتاحية : ثانيا : تسجيل الصوت : 1- الضغط على ر تسجيل Record button 2- قراءة البيانات التى تم حفظها بملف نصى باستخدام الميكروفون 3
3- االنتهاء من التسجيل الضغط على زر ايقاف Stop 4- الضغط على زر التشغيل Play لالستماع الى الصوت من خالل السماعات ثالثا : التعديل فى الصوت أو بمقطع الصوت : إضافة تاثير على مقطع الصوت : 1- تشغيل الصوت بالضغط على زر الشغيل Play واالستماع اليه 2- تحديد مقطع الصوت المطلوب إضافة التاثير له وذلك بالضغط والسحب على الجزء المطلوب بالصوت باستخدام مؤشر الفارة على ال شريط الزمنى من قائمة Effect اختار أحد التاثيرات المطلوبة مثل ( تاثير التكرار Repeat و تاثير االنعكاس ) Reverse إعادة تشغيل الصوت بعد إضافة التاثير -3-4 قص ولصق مقطع صوتى : تحديد المقطع الصوتى المطلوب قصه فتح قائمة Edit اختر االمر Cut تحريك مؤشر الفارة بالشريط الزمنى الى المكان المطلوب عمل لصق للمقطع الصوتى من قائمة Edit اختر االمر Paste حذف مقطع من الصوت : تحديد المقطع الصوتى المطلوب حذفه 4
الضغط على مفتاح Delete من لوحة المفاتيح ثالثا : تصدير ملف الصوت : Export Audio اختار File من قائمة اختيار المكان وتحديد االمتداد المناسب لملف الصوت وكتابة اسم للملف OK كتابة معلومات عن الملف ثن أضغط أنواع أمتداد ملفات الصوت : هناك أنواع مختلفة المتداد الصوت مثل WAV وMP3 وهى تختلف فى جودة ونقاء الصوت والمساحة التخزينية وتحديد نزع االمتداد يكون حسب الملف ملف الصوت ذو االمتداد WAV يتميز بالجودة والوضوح له سعة تخزينية كبيرة وهو غير مالئم للنشر عبر مواقع االنترنت ملف الصوت ذو االمتداد MP3 يكون فيه الصوت أقل نقاء بالمقارنة مع الملف ذو االمتداد WAV له. - - - برامج إنشاء ومعالجة الفيديو هى تلك البرامج التى تمكن المستخدم من إنشاء وتعديل ملفات الفيديو من خالل احتوائها على العديد من األدوات والوسائل والتأثيرات التى تساعد المستخدم فى إنشاء ومعالجة لقطات الفيديو بطريقة سهلة وسريعة ومنها برنامج Open shot وهى برامج مفتوحة المصدر وتعمل على نظام التشغيل. Movie Maker وهناك برامج اخره مثل Windows ونظام التشغيل Linux تحميل برنامج إنشاء ومعالجة الفيديو والتعرف على واجهته : رس ي ثش ب ح Open shot إل شبء ؼب دخ ا فذي خالي ا شاثؾ WWW://.Openshot.org يضاد ثش ب ح : Open Shot 1- يمكن من انتاج فيديو ذات جودة عالية من الصور والخلفيات وإضافة مقاطع صوتية 2- سهولة واجهة البرنامج 5
3- اضافة التاثيرات والمراحل االنتقالية كفواصل بين الصور 4- إضافة النصوص ى بد اخ خ ا جش ب ح : -1 الشريط الرئيسى.Main Toolbar -2 ملفات المشروع.Project Files 3- تبويب الوظائف Function Tab لتنقل بين ملفات المشروع ملفات الصور ملفات الصوت -4 معاينة الفيديو.Preview Window -5 شريط التحرير.Edit Toolbar -6 التصغير والتكبير Zoom Slider -7 راس القراءة Play head/ruler 8- الشريط الزمنى Timeline ا ششيؾ ا ض Timeline جش ب ح : 1- المسطرة Ruler تظهر المدى الزمنى الحالى بالشريط الزمنى 2- رأس القراءة Play Head يقرأ الكليب الحالى الذى يقف عليه فى الشريط الزمنى ليظهر فى نافذة معاينة الفيديو 3- الكليب الحالى يكون صورة أو صوت أو فيديو 4- المسارات Tracks المسارات تشبه الطبقات حيث يتم وضع صورة أو صوت أو لقطة الفيديو على المسار ويمكن استخدام عدد غير محدد من المسارات بالمشروع ويجب مالحظة أن المسار األعلى له الولوية فى القراءة بمؤشر القراءة ليظهر ما به فى الفيديو ثم يليه المسار الذى اسفله وهكذا 6
خط اد ئ شبء شب ذ فيذي :Video Clips ا ال : رس ي ثش ب ح Open shot اعزيشاد فبد ا ظ س داخ ا جش ب ح خالي ا ؼغؾ ػ ىضس اعزيشاد فبد أ فزر لبئ خ File اخزش Import Files اعزيشاد فبد ا ظ س د ذ ذسعز زظ ش ف رج يت Project Files ثب جش ب ح ثب يب : رشريت ا ظ س ػ ا ششيؾ ا ض :Timeline ثب ؼغؾ غ ا غست ظ س ف بفزح فبد ا شش ع Project Files يز ػغ و ط سح ف ا غبس Track ا خبص ث ب غ رشريج ب ػ زغت ا شغجخ ف ا ظ س رظ ش ا ظ س ف بفزح ا ؼبي خ ا فيذي رشريت ثبل ا ظ س ف ا غبساد Track ػ ا ششيؾ ا ض. ثب ثب : اعزيشاد ف ا ظ د داخ ا جش ب ح : دؼ ا فيذي أوثش خبرثيخ ربثيش يز ئػبفخ عيم أ رؼ يك ط ر ا ي الػبفخ ف ا ظ د يز ا ؼغؾ ػ ئػبفخ ف ثب ششيؾ ا شئيغ ث اخزيبس ا ظ د ا غد ا ا عيم اػبفخ ف ا ظ د 7
ثب ؼغؾ غ ا غست ػ س ض ف ا ظ د ئدساخ ف أزذ ا غبساد Track ساثؼب : ؼبي خ ا فيذي : ؼ ا ؼبي خ ثب ؼغؾ ػ صس ا زشغي Play ف بفزح ا ؼبي خ. -1-2 -3-4 -5 زفع شش ع ا فيذي : Save Project زفع خ يغ فبد ا ظ س ا ظ د ا غزخذ خ ف ا فيذي داخ د ذ سذد save Project As اخزش File فزر لبئ خ رغ يخ ا شش ع ثأع Sch" " يدت ا يى األع بء ا غزخذ خ ثب غخ اال د يضيخ " "pro1" رسذيذ ىب ا سفع داخ د ذ ئغالق ا جش ب ح Open shot ئ شبء ؼب دخ ا فيذي "Sch" ث فزر ا شش ع Open shot العزى بي ا ؼ ف شش ع ا فيذي شح اخش يز رس ي ثش ب ح داخ ا د ذ "Pro1" الزظخ ب خ : أث بء ا ؼ ػ ثش ب ح Open shot خالي ظب ا زشغي Windows زفع ا شش ع الزع أ س ض ا ف "Sch" يى غيش ؼشف شثؾ ا ف ثجش ب ح Open shot يز ػ الزشا خالي : ا ؼغؾ ثضس ا فبسح االي ػ س ض ا ف " Sch " رظ ش لبئ خ فشػيخ. اخزش ا مبئ خ ا فشػيخ Properties ث Change ث. More Options اخزيبس.Look for another app on this PC ا جسث ػجش خ بص ا ى جي رش ػ ا د ذ ا ز ر رثجيذ ثش ب ح Open shot ث. اخزيبس الزشا ا ف Association ثب ف ا ز فيز. 8
الزع ا ا ف يظ ش Sch" " تعديل مشاهد الفيديو : ا ال : ا زسى ثب فزشح ا ض يخ ا خظظخ ؼشع ش ذ ا فيذي :Video Clip ػ ذ ػ ؼبي خ شب ذ ا فيذي ط د ط سح لذ يى ا ظ د فزشر ا ض يخ ؼشع أوجش ا ظ س يغز ش ا ظ د غ ا ز بء ػشع ا ظ س اليمبف ا ظ د زز يزالئ غ ا ظ س خالي 1- رسشيه إشش ا مشاءح ثب ؼغؾ ا غست ػ ساع أ االع ث زخ ا فبرير زز يظ الخش ىب ػ ا ششيؾ ا ض ي ز ػ ذ ظ س اخش ط سح 2- ا ؼغؾ ػ غبس Track ثب ضس االي فبسح رظ ش لبئ خ خزظشح -3 ا مبئ خ ا خزظشح اخزش ششيسخ ا ى يت Slic Clip ث keep left slide ػ ذ اخزيبس ششيسخ ا ى يت Slice Clip رظ ش االخزيبساد ا زب يخ : 1- ػ ذ اخزيبس Keep Both Slides يز ػ ا مغب ف ا ى يت ا ز ػ ا غبس ا ششززي غ االززفبظ ث ب. 2- ػ اخزيبس Keep Left slide يز ػ ا مغب ف ا ى يت ا ز ثب غبس ا ششززي ئثمبء ا ششيسخ ا يغش غر ا ششيسخ ثب ي ي 3- ػ ذ اخزيبس Keep Right slide يز ػ ا مغب ف ا ى يت ػ ا غبس ا ششززي غ غجمبء ا ششيسخ ا ز ثب ي ي غر ا ششيسخ ثب يغبس 9
ثب يب : ئػبفخ ربثيشاد Effects شب ذ ا فيذي : 1- ا ؼغؾ ػ رج يت Effects ال زمبي ا ا زبثيشاد 2- اخزيبس ازذ ا زبثيشاد ثب ؼغؾ ا غست اػبفز فيذي ػ ؼبي خ 11
ثب ثب :ئػبفخ شاز ا زمب يخ Transitions شب ذ ا فيذي : 1- ا ؼغؾ ػ رج يت اال زمبالد Transitions رظ ش ا شاز اال زمب يخ 2- ا ؼغؾ غ ا غست ئػبفز ش ذ ا ط ة -3-4 ػغ ا شز خ اال زمب يخ ف ثذايخ أ بيخ ا ش ذ ا زسى ف ا فزشح ا ض يخ ؼشع ا شاز اال زمب يخ ثب ؼغؾ ا غست ػ ي ب أ صيبدح ا فزشح ا ض يخ ب ثب ؼشع 11
ساثؼب : ئػبفخ ض ئ ا فيذي : ثؼذ رسذيذ ا ظ ص ا ط ة ئػبفز ب رسذيذ اال بو ا ز ع ف يؼبف ا ي ب ا ض ف ا جذايخ ا بيخ ا عؾ ا فيذي خالي زغيش زد ع ا خؾ : ا خؾ : ا خ فيخ : 12
زفع ا ض : Save داخ ف ا شش ع ثب شثغ ا س اس ا ؼغؾ ػ صس زفع يدت رغ يخ ا ف ا ظ ث غخ اال د يضيخ Project Files يظ ش ا ف ا ظ ف فبد ا شش ع ئػبفخ ا ف ا ظ ا شب ذ ا فيذي ثب ؼغؾ غ ا غست ػ ف ا ض ئػبفز ا أزذ ا غبساد. رظذيش ا فيذي ئ ف ثب زذاد بعت : ثؼذ اال ز بء ا شش ع ػغ خ يغ شب ذ ا فيذي ا زؼذي ػغ ا زبثيشاد ا شز اال زمب يخ م ثزظذيش ا ف ثب زذاد بعت 1- ا ؼغؾ ػ صس ا زظذيش ا فيذي Export Video ف ا مبئ خ ا شئيغخ أ خالي لبئ خ File اخزش Export Video يظ ش شثغ ز اس 2- اوزت اع ا ف ا فيذي File Name 3- رسذيذ ىب ا سفع ػ خ بص ا ى جي رش ف أزذ عبئؾ ا زخضي Folder Path 4- رسذيذ ع ا زذاد ا ف ا فيذي Target 5- رسذيذ غز خ دح ا ف ( ػب ا د دح ز عؾ ا د دح ل ي ا د دح Qualify 6- ا ؼغؾ ػ صس رظذيش ا فيذي Export Video 7- رشغي ف ا فيذي شب ذر أ اع فبد ا فيذي راد اال زذاداد ا خز فخ : اال زذاد : MP4 زد ز عؾ دسخخ ػ ذ ط سح ا فيذي أػ 3gp رغزطيغ ا زظ يش ثأزدب خز فخ اال زذاد : AVI زد وجيش خ دح ط سح اػ MP4 ي بعت أخ ضح ا ى جي رش وب يشاد ا فيذي 13
لغة الترميز : غخ رى يذ رغزخذ إل شبء طفسبد لغ اإل زش ذ ا ثبثزخ ا ز يز ػشػ ب ثبعزخذا أزذ ثشا ح غزؼشػبد اإل زش ذ. أوامر لغة : HTML إل شبء طفسخ ا يت يز اعزخذا أ ا ش غخ HTML رغ ز األ ا ش ثبي Tags يم غزؼشع اال زش ذ ثز فيز ب القواعد االساسية الستخدام أوامر :HTML ئ شبء ف ظ ثبعزخذا أزذ ثشا ح رسشيش ا ظ ص ر ه ىزبثخ أ ا ش HTML رؼذي ب وزبثخ أ ا ش HTML زيث يز ػغ اال ش ثي ا ؼال زي " > < " ؼظ األ ا ش ب ثذايخ > < بيخ > / < خفع ا ف ا ظ ا ز يسز ػ أ ا ش HTML ثب زذاد HTM أ HTML فزر ا ف ا سف ظ ثبعزخذا غزؼشع اال زش ذ ؼشع طفسخ ا يت شب ذح زيدخ ر فيز ب ال يشزشؽ أ رىزت أ ا ش HTML ثسش ف وجيشح Capital أ طغيشح Small التركيب البنائى إلنشاء صفحة الويب باستخدام :HTML خطوات إنشاء صفحة ويب باستخدام أوامر :HTML 1- فزر ثش ب ح رسشيش ظ ص ث ( Notepad ) 2- اوزت األ ش HTML ف ثذايخ ا ى د يشيش ا أ ا غز ذ ىز ة ثب غخ HTML ي مغ ا ى د ا :Head ا طمخ ا خبطخ ثىزبثخ ا ؼ بد غزؼشع ز ي ا ظفسخ ث ػ ا ا ظفسخ :body ا طمخ ا خبطخ ثىزبثخ ا سز ا ز عيظ ش داخ ا ظفسخ 14
إضافة عنوان لصفحة الويب باألمر </Title> <title> : يظ ش ػ ا طفسخ ا يت داخ ششيؾ ا ؼ ا أػ ا ظفسخ خطوات إضافة عنوان لصفحة الويب : 1- فزر ثش ب ح رسشيش ظ ص ث ( Notepad ) 2- وزبثخ ا زشويت ا ج بئ إل شبء طفسخ يت ثأ ا ش HTML 3- وزبثخ آ ش </title> ذسعز <title> ف ا دضء ا خظض ثي </head> <head> 15
4- زفع ا ف ثبع School.htm خالي فزر لبئ خ File أخزش اال ش Save As ث اوزت اع ا ف School.htm 5- أفزر طفسخ ا يت School.htm خالي غزؼشع اال زش ذ شب ذح ر فيز األ ا ش ثب ؼغؾ ػ زيدخ ر فيز اال ش </title> ذسعز <title> <Body> </Body> مالحظة: ػ ذ وزبثخ زشف ا غبفخ صيبدح ع ف يزغيش ر فيز اال ش. خطوات إضافة محتوى لصفحة الويب : ي ى أ رسز طفسخ ا يت ػ ض ط سح فيذي اسرجبؽ رشؼج 1 -ف ا ف ا غبثك أوزت ا ؼجبسح " ذسعز خ ي خ ظيفخ زط سح " داخ اال ش 2- ث ازفع ا ف ثب ؼغؾ ػ Save لبئ خ File 3 -افزر غزؼشع اال زش ذ School.htm شب ذح ر فيز اال ش. زيدخ ر فيز اال ش وزبثخ ػجبسح ذسعز خ ي خ ظيفخ زط سح مالحظات : Small أو صغيرة Capital ثسش ف وجيشح HTML ي ى وزبثخ أ ا ش غزؼشع اال زش ذ ال يزبثش ثب غبفبد ا زش وخ أ اال زمبي غطش خذيذ ثؼغؾ ػ فزبذ Enter داخ ف األ ا ش. 16
تغير اتجاه صفحة الويب باستخدام الخاصية :dir رغزخذ ا خبطيخ dir زسذيذ اردب طفسخ ا يت زغت ا مي خ ا خظظخ خبطيخ dir و ب ثب دذ ي ا زب ربثيش ب لي خ ا خبطيخ اردب طفسخ ا ي ي ا ا يغبس rtl اردب طفسخ ا يغبس ا ا ي ي ltr خطوات تغير اتجاه صفحة الويب من اليمين إلى اليسار: 1- ا زؼذي ثب ى د ا غبثك ثاػبفخ ا خبطيخ dir أل ش </Body> <Body> 2- رخظيض ا مي خ rtl خبطيخ dir ثىزبثخ اال ش dir="rtl"> <Body 3- زفع ا زؼذي اخزش Save لبئ خ file 4- افزر طفسخ ا يت خالي غزؼشع اال زش ذ شب ذح ر فيز ا ى د زيدخ ر فيز اال ش رخظيض ا مي خ rti خبطيخ <Body dir="rtl"> ثىزبثخ اال ش dir خطوات تغير اتجاه صفحة الويب من اليسار إلى اليمين: فظ ا خط اد ا غبثمخ ى ثزؼذي ltr"> <body dir" 17
ر غيمبد طفسخ ا يت أوال : تنسيق الصفحة بصفحة الويب : الكتابة بداية من سطر جديد باألمر <br> : خط اد وزبثخ عطش خذيذ notepad رشغي ثش ب ح وزبثخ و د HTML و ب عجك <br> وزبثخ عطشي ثي زيدخ ر فيز اال ش خذيذ <br> ىزبثخ ثغطش :<center> </center> محاذاة النص توسيط باألمر فزر ا ف ا ظ ا غبثك ئػبفخ األ ش </center> لغ ا ذسعخ <center> زفع ا زؼذي file اخزش save فزر ا ف خالي غزؼشع اال زش ذ 18
زيدخ ر فيز اال ش >/center< لغ ا ذسعخ >center/< إضافة فراغات بين الكلمات باألمر : ػ ذ رشن ا ػذد ا غبفبد ثي ا ى بد داخ ف األ ا ش ع ف يزؼب ؼ ب غزؼشع اال زش ذ ػ ا ب غبفخ ازذح زسى ف ػذد ا غبفبد ثي ا ى بد غزخذ ا ش ض زيث يز رىشاس ثؼذد ا فشاغبد ا ط ثخ ثي ا ى بد. ا خط اد : فزر ا ف ا ظ ا غبثك وزبثخ ا ى د لغ ا ذسعخ زفع ا زؼذي file اخزش save فزر ا ف خالي غزؼشع اال زش ذ زيدخ ر فيز اال ش لغ ا ذسعخ زشن غبفبد ثي ا ى بد 19
4- أ تنسيق الخط فى صفحة الويب باألمر </font> :<font> زسى ف ع زد ا خؾ ثبعزخذا األ ش <font> د ػخ خظبئض ب : ا ظيفخ ا خبطيخ face رسذيذ ع ا خؾ color رسذيذ ا خؾ size رسذيذ زد ا خؾ الزظخ : يزؼشف ا غزؼشع ػ 7 أزدب خز فخ ا خط ؽ ا ز يز رسذيذ ب ث اعطخ ا خبطيخ Size زيث رزشا ذ لي خ ز ا خبطيخ 1 ا 7 خطوات تغير نوع الخط الى andalus ولون الخط احمر والحجم الخط 6: فزر ا ف ا ظ ا غبثك ا زؼذي في <font face=" Andalus " color="red" size="6" > وزبثخ ا ى د save اخزش file زفع ا زؼذي فزر ا ف خالي غزؼشع اال زش ذ الزظبد : ثؼذ اعزخذا أ ش االغالق </font> ي ز ا زبثيش األ ش ػ ر غيمبد أ ض يىزت ثؼذ ف زب خ ػذ اعزخذا األ ش <font> يظ ش ع ا خؾ ػ طفسخ ا يت ثب شى االفزشاػ ب/ 4 وزبثخ ا ى د <font face="andals"color="red" size="6" > تنسيق الخط فى صفحة الويب : ي خذ ا ؼذيذ األ ا ش ا ز خال ب يز ر غيك ا خؾ ب األ ا ش األأ ش > u < > B < > I < ا ػسخ ثب دذ ي ا زب ا ظيفخ ػغ خؾ رسذ ا ض ( غطش ) Underline خؾ ػشيغ Bold( ( خؾ بئ ( Italic ) 21
خطوات تنسيق الخط بصفحة الويب لوضع خط تحت العبارة: فزر ا ف ا ظ ا غبثك ا زؼذي في <u> ذسعز خ ي خ ظيفخ زط سح <u/> وزبثخ ا ى د زفع ا زؼذي file اخزش save فزر ا ف خالي غزؼشع اال زش ذ وزبثخ ا ى د <u/> ذسعز خ ي خ ظيفخ زط سح <u> ػغ خؾ رسذ ا د خ 21
ثانيا : تنسيق خلفية صفحة الويب :.1 تحديد لون الخلفية لصفحة الويب بالخاصية رغزخذ ا خبطيخ bgcolor ا زبثؼخ أل ش <body> خط اد رسذيذ ا خ فيخ : :bgcolor زسذيذ ا خ فيخ. وزبثخ و د دؼ اخؾ بئ ػشيغ رسز خؾ >u></i></b/< ذسعز خ ي خ ظيفخ زط سح >u><i><b< فزر ا ف ا ظ ا غبثك وزبثخ ا ى د Purple"< >body bgcolor=" زفع ا زؼذي file اخزش save فزر ا ف خالي غزؼشع اال زش ذ شب ذح ا زسذيذ خ فيخ طفسخ ا يت وزبثخ ا ى د Purple"< >body bgcolor=" 22
2. وضع صورة كخلفية لصفحة الويب بالخاصية :Background رغزخذ ا خبطيخ Background ا زبثؼخ أل ش <body> خط اد ػغ ط سح وخ فيخ ظفسخ ا يت: ئػذاد رد يض أزذ فبد ا ظ س ػؼ ب وخ فيخ ظفسخ ا يت زفع ف ا ظ سح داخ د ذ وزبثخ ا ى د ا الص ػغ ا ظ سح "amal.jpg"< >body background = وخبفيخ ظفسخ ا يت زفع ا ف ا ظ ثب زذاد htm ف فظ د ذ زفع ف ا ظ سح فزر ا ف ف غزؼشع اال زش ذ وزبثخ ا ى د ا الص ػغ ا ظ سح وخ فيخ ظفسخ ا يت >body background = "amal.jpg"< خط اد اظ بس اع ع ف ا ظ سح : اػغؾ ثضس ا فبسح االي ػ ا ظ سح اخزش Properties ا مبئ خ ا فشػيخ ا شثغ ا س اس ردذ اع ا زذاد ا ظ سح التعامل مع الصور فى صفحات الويب : 1- إدراج صورة داخل صفحة الويب : - رغزطيغ ئدساج ط سح ثظفسخ ا يت ثبعزخذا ا خبطيخ src ا زبثؼخ أل ش <img> يزط ت رسذيذ اع ف ا ظ سح ىب زفظ 23
خط اد ادساج ط سح ثظفسخ ا يت اظ بس ا ض اػ ا ظ سح : ػغ ا ظ سح ث ف ؼشفخ اع ا ظ سح و ب عجك وزبثخ ا ى د ا الص الدساج ا ظ سح src="amal.jpg< >"img زفع ا ف ا ظ ثب زذاد htm ف فظ د ذ زفع ف ا ظ سح فزر ا ف ف غزؼشع اال زش ذ وزبثخ ا ى د ا الص الدساج ا ظ سح >"img src="amal.jpg< 1/2 ا زسى ف اثؼبد ا ظ سح ثظفسخ ا يت : يز ا زسى ف اثؼبد ا ظ سح ػشع اسرفبع خالي خظبئض األ ش <img> height="200" اسرفبع ا ظ سح ث height ا خبطيخ width="300" ػشع ا ظ سح ثبي width ا خبطيخ يز اعزخذا زذح ا ميبط ا جىغ Pixel ميبط االثؼبد خط اد أدساج ط سح ثبثؼبد ا ؼشع 811 االسرفبع 451 ثىغ ػغ ا ظ سح ث ف ؼشفخ اع ا ظ سح و ب عجك وزبثخ ا ى د ا الص زسذيذ اثؼبد ا ظ سح ػشع 811 اسرفبع 451 زفع ا ف ا ظ ثب زذاد htm ف فظ د ذ زفع ف ا ظ سح فزر ا ف ف غزؼشع اال زش ذ 24
2/2 سبراح ا ظ سح داخ طفسخ ا يت : يز ا زسى ف سبراح ا ظ سح خالي ا خبطيخ Align أل ش <img> رأخز ا خبطيخ ا مي اآلريخ ا مي خ Right Left Middle Bottom Top ا ظيفخ سبراح ا ظ سح اللظ ي ي طفسخ ا يت سبراح ا ظ سح اللظ يغبس طفسخ ا يت ا ض يمغ ث سبراح زظف ا ظ سح ا ض يمغ ث سبراح ا سبفخ ا غف ا ظ سح ا ض يمغ ث سبراح ا سبفخ ا ؼ يب ا ظ سح ف عؾ طفسخ ا ثيت : خط اد ا زؼذي ثظ سح ى رظ ش ر غيك ا ظ سح ا ض وزبثخ ا ى د ا الص الظ بس ا ظ سح عؾ طفسخ ا يت زفع ا ف ا ظ فزر ا ف ف غزؼشع اال زش ذ الزظبد :.align="right" سبراح ا ظ سح أللظ ا ي ي ظفسخ ا يت غزخذ ا ى د align="top" سبراح ا ظ سح يمغ ا ض ث سبراح ا سبفخ ا ؼ يب ظ سح غزخذ ا ى د 25
التعامل مع الصوت فى صفحات الويب:- إدراج الصوت كخلفية صوتية لصفحة باألمر :<bgsound> ي ى ئدساج ا ظ د وخ فيخ ظفسخ ا يت زيث يز االعز بع ئ ي ػ ذ رس ي طفسخ ا يت ثب غزؼشع الزظخ ب خ : ثش ب ح غزؼشع اإل زش ذ Internet Explorer ا غزؼشع ا زيذ ا ز يذػ ر فيز األ ش <bgsound> ا خبطيخ Src ا ظبزجخ يز ئدساج ا ظ د وخ فيخ ط ريخ ظفسخ ا يت ا خبطيخ src أل ش رأخز لي خ اع ا ف ا ظ د ا زذاد ر ه ف زب خ زفع ف ا ظ د غ ف طفسخ ا يت ف فغ ا د ذ غيش ر ه يدت وزبثخ غبس ا ف ا ظ د وب ال خط اد ئدساج ا ظ د وخ فيخ ظفسخ ا يت : وزبثخ ا ى د و ب ثب شى ا ػر ثب ظ سح داخ ثش ب ح noetpad Internet زفع ا ف ا ظ فزر ف طفسخ ا يت ثب غزؼشع Explorer التعامل مع الفيديو داخل صفحة الويب : ئدساج فيذي داخ طفسخ ا يت ثبأل ش <embed> يغزخذ اال ش< <embed الدساج فيذي ثظفسخ ا يت زا اال ش يذػ فبد ا فيذي ا ع -.avi.swf -.mov ا خبطيخ src أل ش > <embed رأخز اع ا ف ا فيذي ا زذاد ر ه ف زب خ زفع ف ا فيذي ف فغ ا د ذ غيش ر ه يدت وزبثخ غبس ا ف ا ظ د وب ال خط اد ئدساج ا فيذي داخ طفسخ ا يت : noetpad وزبثخ ا ى د و ب ثب شى ا ػر ثب ظ سح داخ ثش ب ح زفع ا ف ا ظ فزر ف طفسخ ا يت 26
ئدساج اسرجبؽ رشؼج ثظفسخ ا يت ثبأل ش </a> <a> االرتباط التشعبى :Hyperlink االسرجبؽ ا زشؼج ػجبسح ػ ط سح أ ض شرجؾ ثؼ ا ػ ذ ا ؼغؾ ػ ي يز اال زمبي ئ زا ا ؼ ا ي ى أ يى داخ فظ ا ظفسخ أ ثظفسخ أخش داخ فظ ا لغ أ ف لغ آخش. إدراج ارتباط تشعبى :Hyperlink الدساج اسرجبؽ رشؼج رغزخذ ا خبطيخ href أل ش <a> ا ز رسذد لي ز ب ا ؼ ا ا ط ة اال زمبي ئ ي يى شى األ ش بآلر 1- ادراج ارتباط تشعبى نصى باألمر </> <a>: الدساج اسرجبؽ رشؼج ظ ثبعزخذا ا خبطيخ href أل ش <a> أ شبء طفسخ يت رسز ػ اسرجبؽ رشؼج ظ " صاسح ا زشثيخ ا زؼ ي " ػ ذ ا ؼغؾ ػ ي يز اال زمبي ا ا ظفسخ ا شئيغخ لغ صاسح ا زشثيخ ا زؼ ي خالي ا ى د ا زب خط اد ادساج اسرجبؽ رشؼج ر فيز اسرجبؽ ا زشؼج ػ يئخ ض : 1- وزبثخ ا ى د ف ثش ب ح notepad 2- فزر طفسخ ا يت ف ا غزؼشع 3- ا ؼغؾ ػ ا ض ا فبئك " صاسح ا زشثيخ ا زؼ ي " 4- يز رس ي لغ صاسح ا زشثيخ ا زؼ ي 27
2- ادراج ارتباط تشعبى لصورة : خط اد ادساج اسرجبؽ رشؼج ط سح : 1- وزبثخ ا ى د ف ثش ب ح notepad فزر طفسخ ا يت ف ا غزؼشع ػ ذ ا ؼغؾ ػ ا ظ سح ا فبئمخ يز رس ي طفسخ ا يت يز رس ي طفسخ ا يت ا سذد ثب ى د -2-3 28
ا خظبئض ا ظبزجخ dir bgcolor - background Face color -- size Src height width align src src اhref بعض أوامر HTML إلنشاء صفحة ويب: ظيفز األ ش يىزت ف ثذايخ ا ى د يشيش ا أ ا غز ذ ىز ة ث غخ html > < html ا طمخ ا خبطخ ثىزبثخ ؼ بد زظفر ػ ا ظفسخ ث < head > ػ ا ا ظفسخ ا طمخ ا خبطخ ثىزبثخ ا سز ا ز عيظ ش داخ < body > ا ظفسخ رسذيذ ػ ا ظفسخ ا يت > title < ا بء ا ىزبثخ ف ا غطش ا سب ثذء ا ىزبثخ ف عطش خذيذ < br > ػغ ض ف زظف ا غطش > center < ادساج فشاؽ ( غبفخ ) ثي ا ى بد ػ ا غزؼشع ا ش ض   زسى ف ر غيك ا خط ؽ > font < ػغ خؾ رسذ ا ىزبثخ > u < خؾ اع د ػشيغ > b < خؾ بئ > I < إلظ بس ط سح ػ طفسخ ا يت > img < إلدساج ط د وخ فيخ ظفسخ > bgsound < ئػبفخ ط د أ فيذي ظفسخ ا يت > embed < إل شبء اسرجبؽ رشؼج > a < 29
مكونات صفحة الموقع مدرستى : 1- طفسخ ا يت ا شئيغخ " ذسعز " رسفع ثذاخ ف Home.htm 2- طفسخ ا يت " ػ ا ذسعخ " رسفع داخ ف about.htm 3- طفسخ ا يت " ا ج ا ظ س " رسفع ثذاخ ف Photo.htm 4- طفسخ ا يت " ا شؤيخ ا شعب خ " رسفع ثذاخ ف Vision.htm ع ف يز ئ شبء زفع و طفسخ يت داخ ف ظ ثبعزخذا أ ا ش HTML 1- أوال إنشاء صفحة الويب " الرئيسة " Home.htm 31
أ/ رظ ي طفسخ ا يت ا شئيغخ : 31
ة/ رظ ي طفسخ ا يت " ػ ا ذسعخ " about.htm : رزى طفسخ ا يت ػ ا ذسعخ : ظ ص " ربسيخ شئخ ا ذسعخ ػ ا ا ذسعخ ر يف ا ذسعخ " ا خؾ " از ش ػ tahome زد 6 فيذي خ/ اسرجبؽ رغؼج ظ سح 32
د/ رظ ي طفسخ ا يت " ا ج ا ذسعخ " photo.htm : رزى طفسخ ا يت ػ ا ذسعخ : ا ض ا ج ا ظ س ا خؾ " از ش ػ tahoma زد 6 ػذد 3 ط س اسرجبؽ رشؼج ظ سح ا غ 33
/ رظ ي طفسخ ا يت " ا شؤيخ ا شعب خ " Vision.htm رزى طفسخ ا يت ػ ا ذسعخ : ا ض " ا شؤيخ ا شعب خ ا خؾ " از ش ػ tahoma زد "6 ا ض " سؤيخ ا ذسعخ " ا خؾ " ػ tahoma زد 6 : 34 أ/ أػذاد آ بي ظطف