|
|
#1
02-07-2018, 12:55 AM
| ||
| | ||
| Learn the basics of designing web pages /lesones   فلوريسا ~  السلام عليكم و رحمة الله كيف الحال ي رواد القسم الجميلين  سفراء العلم الفخمين  كما قرأتم في العنوان انا العب دور المدرِّسة  قبل بدء درس التصميم ساتحدث قليلا عن تصميم و برمجة صفحات الويب. التصميم كما هو اسمه يشرح نفسه نعم المقصود و الهدف منه هو تحديد شكل الصفحة و بأي صورة ستبدو و ما هي العناصر المطلوبة ليكتمل بناء صفحة الويب  :" class="inlineimg" />اما البرمجة فهي التي تحدد كيف ستعمل الصفحة و ما عمل كل عنصر. بالتصميم مثلا بالصفحة اضفنا زر ارسال و بُرمجت ليقوم باخذ البيانات من صندوق النص الى قاعدة البيانات بالسلسلة هذه لن اتطرق للجانب البرمجي انما فقط ساكتفي وياكم بانشاء صفحات ساكنة نستمتع بادارتها ^^ تتساءلون ما المقصود من ساكنة ؟ الساكنة "static"تعني الصفحة التي لا تتغير محتوياتها ما لم يقم احد بتغييرها مثل المواضيع "بلا كتابة رد يظل بلا تغير" و عن الصفحات المقابلة اي المتحركة"dinamic"" فمثال لها "قائمة المتواجدين حاليا" لنكتفي بهذا القدر كمقدمة و نبدأ الدرس...  [/ALIGN][/CELL][/TABLETEXT][/ALIGN]
__________________
اريقاتو وسام سنباي   وَإِذَا سَئِمْتَ مِنَ (الوُجُودِ) لِبُرْهَةٍ ** فَـاجْـعَـلْ مِنَ (الْــوَاوِ) الْكَئِـيبَةِ (سِيـنَـا) وَإِذَا تَــعِبْتَ مِنَ (الصُّـــعُودِ) لِقِــمَّةٍ ** فَـاجْـعَـلْ مِنَ (الْعَيـنِ) الْبَئِيسَةِ (مِــيـمَا) صلوا على النبي التعديل الأخير تم بواسطة Florisa ; 04-14-2018 الساعة 10:55 AM |
|
#2
02-07-2018, 01:00 AM
| ||
| | ||
| 1
[ALIGN=CENTER][TABLETEXT="width:70%;"][CELL="filter:;"][ALIGN=center] المتطلبات: ملف ، مفكرة note pad ، او notepad++ بيكون افضل و جميل  .امم ممكن ملف وورد لكن لا افضله و اريد الذكر أن المفكرة اسلوب بدائي للتعليم فقط اما بالزمن الحالي قد طورت برامج جاهزة للتصميم مثل dream weaver امم هل ذكرت باي وسيلة او لغة سنصمم  <<لاااايا للخرف  سنستخدم ال html و هي نفسها المستخدمة في تصميم عيون العرب ^- ^ << سأععرفك عليها بيوم اخر يلا نبدأ *** اولا انشئ ملف باسمك او اي اسم تريد و احفظه في مكان امن ليكن باللغة الانجليزية افضل :" class="inlineimg" />افتح المفكرة notepad و احفظه باسم انجليزي او رقم و ليكن مكان الحفظ ملفك الذي انشأته قبل قليل :" class="inlineimg" />في الحفظ يجب الاتي الاسم .الامتداد "html او htm" انا اخترت a.html النوع "save as type "all file الترميز او "Unicode"UTF-8 الترميز هو الترميز المستخدم للغة العربية و يمكن المتصفح من التعرف على المحتوى باللغة العربية. قبل البدء بكتابة الاكواد سنتعرف على اجزاء صفحة الويب الهيدر و المحتوى و الفوتر لنعد للعمل... داخل المستند النصي اكتب التالي <html> <html/> و احفظ التغيير الكلمة مع اشارتي اكبر و اصغر من تسمى"وسم" الصفحة تتكون من مجموعة "وسوم" و علامة سلاش"/"تعني نهاية الوسم او وسم الاغلاق. وسم "<html>" هو الوسم الذي يجعل من المستند العادي صفحة ويب *افتح ملفك ستلاحظ أن مستندك اتخذ شكل متصفحك الافتراضي :" class="inlineimg" />*و الان لنشكل الرأس او الهيدر بالنسبة لصفحتنا .. تحت بين الوسمين السابقين اكتب التالي: <head> <head/> ليصبح <html> <head> <head/> <html/> الوسم "<head>" من وظائفه احتواء جل محتويات الصفحة من بينها العنوان و لاضافة عنوان نستخدم الوسم <title> و يتم كتابته بين <head> و <head/> <head> <title> <title/> <head/> لم ننتهي فهناك محتوى الصفحة أو جسمة "الترجمة الحرفية للوسم "<body>" يكتب <body> <body/> الشكل النهائي لترتيب الوسوم يكون كالتالي <html> <head> <title> <title/> <head/> <body> <body/> <html/> هكذا انهينا بناء صفحة الا من الفوتر لكن اذا فتحت الصفحة على المتصفح ستجدها فارغة... ___ ليكون للوسوم ما تعرض لنعطيها القيم لاعطاء العنوان نروح للوسم تايتل title <title/> هنا نضع عنوان الصفحة <title> <title/> صفحتي الاولى <title> او اي اسم تريد اها فهمتم الباقي؟ اجّل تمّاما و بال<body> نضع محتوى الصفحة <body> بسم الله الرحمن الرحيم عيون العرب <body/> انتهى الدرس الاول . بيان الامر اشبه باكواد تنسيق المواضيع و الردود :" class="inlineimg" />الدرس القادم سيكون كيفية التنسيق و اشياء اخرى ردودكم اقتراحات اسئلة تصحيح اي شيء ببالكم  ... طبقوا و احفظوا الشغل عندكم لحتى تجربوا القادم ....دروس قادمة ممتعة  [/ALIGN][/CELL][/TABLETEXT][/ALIGN]
__________________
اريقاتو وسام سنباي وَإِذَا سَئِمْتَ مِنَ (الوُجُودِ) لِبُرْهَةٍ ** فَـاجْـعَـلْ مِنَ (الْــوَاوِ) الْكَئِـيبَةِ (سِيـنَـا) وَإِذَا تَــعِبْتَ مِنَ (الصُّـــعُودِ) لِقِــمَّةٍ ** فَـاجْـعَـلْ مِنَ (الْعَيـنِ) الْبَئِيسَةِ (مِــيـمَا) صلوا على النبي التعديل الأخير تم بواسطة ℓιηαяα ; 04-28-2018 الساعة 05:47 PM |
|
#3
02-07-2018, 08:42 AM
| ||
| | ||
|
موضوع اللرد http://3rbseyes.com/t556878.html
__________________
اريقاتو وسام سنباي وَإِذَا سَئِمْتَ مِنَ (الوُجُودِ) لِبُرْهَةٍ ** فَـاجْـعَـلْ مِنَ (الْــوَاوِ) الْكَئِـيبَةِ (سِيـنَـا) وَإِذَا تَــعِبْتَ مِنَ (الصُّـــعُودِ) لِقِــمَّةٍ ** فَـاجْـعَـلْ مِنَ (الْعَيـنِ) الْبَئِيسَةِ (مِــيـمَا) صلوا على النبي |
|
#4
02-13-2018, 05:56 PM
| ||
| | ||
| 2
[ALIGN=CENTER][TABLETEXT="width:70%;"][CELL="filter:;"][ALIGN=center] السلام عليكم و رحمة الله اليوم نجدد اللقاء قبل البدء بالدرس اتجاه كتابة الكود يكون من اليسار لليمين كذا <"font face="Times New Roman"size="5"color="#FF0000> بسم الله <font/> اي اذا بدا العكس بالشرح ذي مشكلة تنسيق الدرس السابق تعرفنا على التصميم و الوسوم اللازمة لبناء صفحة :" class="inlineimg" />درس اليوم سيكون عملنا "مع \على ..الوسم <body> تطبيق محتوى الصفحة بالدرس السابق <body> بسم الله الرحمن الرحيم عيون العرب <body/> اعطى الناتج  بدرس اليوم سنضيف تنسيقات لتصبح الصفحة مرتبة أولا لنجعل كل جملة بسطر ... تستخدم الأمر <br> و هي من الوسوم المفردة التي لا يلزم اغلاقها كالتالي: <br>بسم الله الرحمن الرحيم و هو أمر بمعنى break النتيجة  ماذا ؟؟ لا اسمعكم.!!.. اتجاه الكتابة من اليسار لليمين؟ اذن لكم الحل :" class="inlineimg" />تذكرون الوسم <html>... له خاصية لتحديد اتجاه النص بالصفحة و تستخدم كالتالي.. < "قيمة الخاصية" = الخاصية الأمر> <"html dir="rtl> الخاصية "dir"... اختصار "direction".. تأخذ القيم right to left و left to right الناتج  هكذا انتهينا من انزال سطر و تحديد اتجاه كتابة تناسب و اللغة العربية و الان لنتعرف على أوامر جديدة لتنسيق الاسطر ^^ ** <center></center> لتوسيط النص <b></b> لجعل الخط عريض <i></i> لجعل الخط مائل <u></u> لعمل خط تحت النص و باستخدامها <br> <center> بسم الله الرحمن الرحيم </center> لتوسيط النص <b> بسم الله الرحمن الرحيم </b> لجعل الخط عريض <i> بسم الله الرحمن الرحيم </i> لجعل الخط مائل <u> بسم الله الرحمن الرحيم </u> لعمل خط تحت النص تعطي النتيجة  انهينا خيارات تشكيل النص و الان نضف الوانا على نصوصنا و نغير الحجم "حين اقول نصا اقصد المحتوى أياً كان نص أو رقم" للتعامل مع النصوص نستخدم الأمر font و الذي له خصائص ذات قيم و منها نوع الخط face لتحديد الخط مثل Arial ,New time roman ... الخ لون الخط color تلحق بعلامة "=" و توضع القيمة ك"red" و "blue" او بطريقة غير مباشرة "النظام الستعشري" #FF0000 "اللون الاحمر"و يسبق ب # لتمكين كل المتصفحات من قراءته حجم الخط size يأخذ قيمة عددية و تستخدم كالتالي عام <الامر خط خاصية 1 ="قيمتها"خاصية 2="قيمتها" .. الخ> الصيغة العامة اعلاها تنطبق على كل الأمر التي لها خصائص صيغة مختارة <الامر خط خاصية نوع خط ="اسم الخط"خاصية حجم="قيمة حجم الخط"خاصية لون="كود اللون أو اسمه"> <br> <font face="Times New Roman"size="5"color="#FF0000">بسم الله الرحمن الرحيم <font/> عيون العرب و النتيجة  يمكن استخدام خصائص font منفردة كذلك مثلا لتحديد نوع الخط <br> <font face="Georgia, Times New Roman, Times, serif" >بسم الله الرحمن الرحيم <font/> اللون <br><font color="green" >بسم الله الرحمن الرحيم</font> هل تتساءلون "ماذا إن اردنا كل الصفحة بلون واحد و تشكيل ألوان بعض الكلمات فقط ؟؟؟ هل نلون سطرا سطرا؟! مؤكد لا.. لذلك سنعود للوسم <body> لنسند خصائص و نعطيها قيم للوسم <body> خصائص كثيرة أبرزها الخلفية background و text "نص" للتحكم بالنص من حيث اللون . كالتالي <body bgcolor="#000000" text="#FFFFFF"> [U]لجعل لون للخلفية نستخدم bgcolor[U/] الناتج  الكود كامل <"html dir="rtl> <head> <title>صفحتي الاولى<title/> <head/> <"body bgcolor="#000000" text="#FFFFFF> <br> <center>بسم الله الرحمن الرحيم<center/> <br><b>بسم الله الرحمن الرحيم</b> <br><i>بسم الله الرحمن الرحيم</i> <br><u>بسم الله الرحمن الرحيم</u> <"br><font color="green >بسم الله الرحمن الرحيم <font/> <br> <"font face="Times New Roman"size="5"color="#FF0000> بسم الله الرحمن الرحيم <font/> عيون العرب <body/> <html/> انتهى الدرس #### التنسيق رفض يظبط #### اذا الدرس غير مفهوم فضلا أخبروني لأنسقه من جديد و اتخلص من مشكلة ترتيب العربي و الانجليزي :" class="inlineimg" />تحياتي [/ALIGN][/CELL][/TABLETEXT][/ALIGN]
__________________
اريقاتو وسام سنباي وَإِذَا سَئِمْتَ مِنَ (الوُجُودِ) لِبُرْهَةٍ ** فَـاجْـعَـلْ مِنَ (الْــوَاوِ) الْكَئِـيبَةِ (سِيـنَـا) وَإِذَا تَــعِبْتَ مِنَ (الصُّـــعُودِ) لِقِــمَّةٍ ** فَـاجْـعَـلْ مِنَ (الْعَيـنِ) الْبَئِيسَةِ (مِــيـمَا) صلوا على النبي التعديل الأخير تم بواسطة ديورين ; 02-13-2018 الساعة 08:41 PM |
|
#5
02-14-2018, 01:16 AM
| ||
| | ||
| ملخص 2 ههههه تمام حتى بالنسبة لي لم يكن واضحا  رغم اني كتبته بيدي ايي م كان صعب الدرس أنا الصعبت بشرحي السيء خ  الدرس القادم اراعي جوانب القصور و اعالجه :" class="inlineimg" />+ ملخص درس اليوم نزل سطر استخدمنا الوسم <br> استخدمنا الاوامر او الوسوم center B و I و u للتنسيق توسيط الكتابة و تعريض النص امالة او عمل خط مائل و نص تحته خط على التوالي استخدمنا الخاصية dir و اعطيناها القيمة rtl لجعل الكتابة من يمين لليسار <html dir = "rtl"> و استخدمنا الوسم أو الامر font لتنسيق النص للوسم font خصائص منها Face لنوع الخط Size لحجم الخط Color للون الخط طريقة الاستعمال نفتح الوسم <font> نضع النص المراد تنسيقه و نغلق الوسم </font> بداخل وسم البداية نضع الخصائص و القيم كالتالي: <font color = " " face=" "..etc> و اخيرا ضفنا خلفية للصفحة باستعمال الخاصية bgcolor اختصار ل backgroubd color و حددنا لون للخط بشكل عام باستخدام text و ذلك داخل الوسم <body> و بس وضح الدرس ؟؟  سارة سرسور and اميرة المعرفة like this.
__________________
اريقاتو وسام سنباي وَإِذَا سَئِمْتَ مِنَ (الوُجُودِ) لِبُرْهَةٍ ** فَـاجْـعَـلْ مِنَ (الْــوَاوِ) الْكَئِـيبَةِ (سِيـنَـا) وَإِذَا تَــعِبْتَ مِنَ (الصُّـــعُودِ) لِقِــمَّةٍ ** فَـاجْـعَـلْ مِنَ (الْعَيـنِ) الْبَئِيسَةِ (مِــيـمَا) صلوا على النبي |
 |
| مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| Learn the basics of designing web pages /assignments | ديورين | علم البرمجيات | 10 | 03-23-2018 03:39 PM |
| Basics of LED Strip Lights | op70oppj | أرشيف المواضيع الغير مكتمله او المكرره او المنقوله و المخالفه | 0 | 03-09-2011 10:29 PM |
30Likes
العرض العادي
