عالم التكنولوجيا

 الطرق المتوفرة لدراسة html5 و css3 video معلومات عن الدورة الصعوبة : سهلة جدا      المدة : 20 يوما      الوسيلة : فيديو دور و معنى html و css ما معنى هذه الكلمات؟ وما الفائدة منها؟ css و هي إختصار كلمة  Cascading Style Sheets أي  أوراق الأنماط المتتالية أما html فهي إختصار hypertext markup language هذه اللغات ستساعدنا في تصميم مواقع الويب أو المنتديات أو المدونة الخاصة بنا على الإنترنيت... في هذه الدورة سنتعلم هذه اللغات جيدا تم بعد ذلك نصمم موقع ويب خاص بنا عن طريقها عن طريقها. فيديوهات الدورة تقديم الدورة تاريخ html و css تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء1 تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء2 تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء3 تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء4 تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء5 تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء6

في هذا الجزء السادس و الأخير سنستطيع تصميم أول موقع ويب خاص بنا بأنفسنا، وهذا بفضل تطبيق html5 و css3 التي تعلمناها في دروس التصميم السابقة. هذا الموقع كما سبق و دكرت فهو تجريبي فقط لتتعلم توضيف html و css ، وبعدها يمكنك تصميم ما تشاء. تابع الشرح أسفله  و لأي شيء واجهتك به صعوبة أو لم تفهمه ماعليك إلا ترك تعليقك بالأسفل أو مراسلتي و سأكون سعيدا بالإجابة عليه.

في هذا الجزء سنتمكن من إنشاء أول موقع ويب خاص بنا، هذا الموقع قد تعرض فيه تصاميمك أو يجعل الناس يطلبون منك تصاميم و غيرها من الأفكار الأخرى، كل شخص و كيف سيوضف هذه الأفكار لتنفعه في تصميم موقع ب html5 و css3 ليفيده في الإنترنيت. كمثال سنصنع معا موقع أخبار بسيط حتى تستطيع بعدها تصميم ما تشاء من الأفكار الموجود في بالك. تابع معي الشرح و إذا كان عندك أي سؤال يمكنك وضعه في تعليق. تحميل الملف المستعمل في الشرح

في الحلقة الرابعة من دورة إنشاء موقع ويب باستعمال html5 و css3 سنرى كيف سنستطيع وضع العناصر في أي مكان نريد في الصفحة وسط، فوق، تحث، يمين، يسار... وهذا هو ما نراه في المواقع السيدبار يكون في جهة و الكتابة وسط وغيرها . هذا الدرس هو الأخير قبل أن نشرع في تصميم موقع الويب الخاص بنا وسيكون أيضا فيديو خاص على ذلك. هذا الموقع الدي سنعتمد فيه على لغتي html و css .حيث يمكنك صنع موقع خاص بأي مجال تحبه.

بعد أن تعلمنا كيف ننشئ صفحة html و كتابة أكواد css في هذا الجزء سنتعلم كيف تقصيم صفحة html تقصيما صحيحا عن طريق مجموعة من الأوسمة التي جاءة من أجل هذا، فمع التحديث الأخير ل html5 أضافة مجموعة من الأوسمة لتصبح الصفحة أكثر وضوحا لأصحاب المواقع و كذلك محركات البحث. فهذه الحلقة مهمة جدا، لماذا؟ لأنه و كأننا نقول هي خطة لإنشاء موقع ويب خالي من الأخطاء و مفهوم لأي مصمم يقرأه.

ماذا سنرى في هذا الدرس؟ في هذا و هو الجزء التاني من دورة تعلم تصميم موقع ويب بفضل html5 و css3 سنرى كيف نستطيع كتابة أكواد و إنشاء صفحات، إضافة الألوان، التعديل على الخطوط إضافة خلفيات و غيرها من الأشياء الأخرى. و ذلك بشرح بسيط و إحترافي و جودة عالية في كل من الصوت و الصورة. و على كل من لم يشاهد درس  تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3  أن يرجع له و يفهمه جيدا ليستطيع التماشي مع هذا الجزء الثاني، و الذي بعد رؤيته ستحس بأنه التصميم هو شيء سهل يلزمه فقط بعض الممارسة:

ما هي html ؟ html عبارة عن لغة وصفية ظهرة سنة 1991 من طرف العبقري Timberner-lee و هي أختصار لكلمة hypertext markup language . ما هي css ؟ ظهرت css في سنة 1996 من طرف نفس الشخص لتقدم صفحة الويب بأشكال أفضل لمستعمل الإنترنيت. كيف سأتعلمهما و في ماذا سينفعاني؟ html5 و css3  تتعلقان ب web يعني تصميم مواقع الويب. إذن سنتعلم في هذه الدورة كيف نصنع موقع ويب خاص بنا . في هذا الجزء الأول سندرس كيف نقوم بعمل صفحات و إدراج عدة أشياء بها كالصور و النصوص و كذلك التلاعب بالروابط... هذا الفيديو سبق وشرحته لكن كتابيا ليكون سهل في الفهم:

 المظاهر الديناميكية css يمكننا أيضا من إضافة تأثيرات بطريقة حيوية أو بديناميكية. يعني تغيير الأشكال دون إعادة تحميل الصفحة وهذه ميزة جميلة في css . سنرى اليوم أربع طرق: - الماوس فوق العنصر؛ - عند الضغط؛ - عند الإختيار؛ - شيء سبق وزرناه؛ ف css عالم جميل كل يوم تكتشف شيء يبهرك. الماوس فوق العنصر لتغيير مظهر عنصر فقط عند مرور الماوس عليه نضيف الصيغة الزائفة hover: لأي وسم أو class كهذا الشكل: a :hover { } hover:   تغيير العنصر الدي فوقه ماوس.  a :hover  ستطرجم إلى تغيير الرابط الدي فوقه الفأرة  الآن يمكنك التلاعب بالروابط لأنه لا حدود لما قد تضيفه لها أنت و دوق أما أنا فهذا ما اخترته: a { text-decoration: none ; color: red ; font-style: italic ; } a :hover { text-decoration: underline ; color: green ; } هنا أضافنا خاصيتين: الإفتراضي الذي يظهر مباشرة للزائر. عند مرور الفأرة عليه. هكذا سيظهر: أنا أضفت المتال على الروابط ولكن يمكن أن تجربها على أي شيء مثلا على النصوص: p :hover   { } عند الضغط الآن كيف نضع شكل خاص بالضغط تستعمل فقط في الروابط عن طريق active:  الرابط يحتفظ على الشكل ما دام أ...

إضافة  مربع الظل  box-shadow  : box-shadow تسمح لنا بعمل ظل عن طريق أربع قيم تعطى لوسم معين بواسطة css3: 1- إزاحة أفقية. 2- إزاحة عمودية. 3- تدريج الظل. 4- لون الظل. لتطبيق  box-shadow بحجم 6px على اليمين و 6px تحت و لونه يكون أسود، يعني بعده عن الجسم نكتب: p{ box-shadow: 6px 6px 0px black ; } و هكذا يجب أن تظهر لكم النتيجة، للعلم فقط فقد أضفت border أسود للنص كما تلاحظون لكي يكون الظل واضحا: الآن أريد إضافة تدريج ل box-shadow لكي يصبح أقل حدة من حوافه، فبكل بساطة نضيف نسبة الحدة في القيمة الثالثة: p{ box-shadow: 6px 6px 6px black ; } و يوجد أيضا  inset  هذا الأخير نضيفه إذا ما أردنا أن يكون الظل للداخل بدل الخارج . p{ box-shadow: 6px 6px 6px black inset ; }  عمل ظل للنص  text-shadow ب css : مع  text-shadow  يمكنك إضافة ظل مباشرة للحروف نص معين. و هي تعمل بنفس طريقة التي اخذناها في box-shadow  يعني بعد الظل و الحدة و اللون. p { text-shadow:  2px 2px 4px black ; } و يصبح الخط هكذا :  بالنسبة ل box-shadow فهو مدعومة من طرف معظم المتصفحات الجديدة إبتداءا من IE9. أما text-shadow فهو مدعوم...

الزوايا المدورة css : الحواف التي توجد في جوانب الصور، النصوص أو  الفيديوهات ... كان من الصعب إضافة  زوايا مدورة في الأول و كان يعاني منها كثيرا أصحاب المواقع لكن مع ظهور css3 أصبح من السهل إضافتها ، عن طريق  border-radius ، و هي تسمح لنا بالتعديل على زوايا عنصر ما في الصفحة بسهولة تامة عن طريق إعطائه قيمة ب px: p{ border: 2px solid #000 ; border-radius: 10px ; } جميع الزوايا ستدور بقياس 10px لأننا وضعنا قيمة واحدة إدن فستطبق على جميع الزوايا أنا لم أضف خلفية يمكنك أنت إضافة backgroun للنص لتراه بشكل أوضح كما يمكنك تغيير نوع border كما رأينا في الدرس السابق  : كما يمكنك إعطاء قيمة معينة لكل زاوية على حدة : p{ border-radius: 10px 5px 10px 5px ; } القيم التي وضعناها هي كالتالي: 1- فوق يسار.  2- فوق يمين. 3- تحت يمين. 4- تحت يسار. كما توجد طريقة أخرى نعطيها قيمتين نفصل بينهما بالرمز( / ) الأولى تتحكم في دوران الخط الأفقي والثانية في العمودي. p{  border-radius: 20px /10px ; } لتفهم هذه الأخيرة وجب عليك تجربتها أكتر من مرة حثى تتمكن منها، فالتصميم هو هذا أنا أريك الأساس و أنت تجرب مرة و اث...

إضافة الحدود border : css يسمح لنا بإضافة العديد من الحدود bordures لإضافة جمالية على صفحاتنا html، و يوفر أيضا عدة إضافات لتغيير مظهر هذه الحدود، لكن نحن سنستعمل فقط border لأنها تجمع لنا جميع تلك الخاصيات الأخرى كما رأينا في درس background  من هنا . و بالنسبة ل border فنعطيها ثلاث قيم وهي كالتالي: - La largeur : تتحكم في عرض الحدود و تكون ب px - La couleur : تحدد لون الحدود و تكون بأحد الطرق التي تعلمناها في درس الألوان يمكنك مراجعته  تغيير لون الخط في css . - Le type de bordure : وهي التي تحدد شكل الحدود، هل هي عادية أم منقطة...    - none : إفتراضي لا يوجد حدود.    -  solid : عادي.    -  dotted : منقط.    -  dashed : شرطات.    -  double : الحدود مزدوجة.    -  groove : منقوش.    -  ridge : منقوش بطريقة أخرى.    -  inset : التأثير الكلي 3D  للأسفل.    -  outset : التأثير الكلي 3D لأعلى. و هذا مثال عن طريقة كتابتها: h1 { border: 3px red dashed ; } وهذه صورة من موقع جنبي تبين كل إسم و كيف يظهر الحد على المتصفح. يمكنك تجربتها كلها على نص متلا و ترى كيف ستظهر لك: أتمنا أن يكون الدرس قد ن...

شفافية css3 لقد جاءت css3 بطريقتين جديدتين لإضافة الشفافية لعناصر صفحة html. هاتين الخاصيتين هما: opacity  و RGBa . خاصية التعتيم opacity : هذه الطريقة  opacity  تسمح لنا بتحديد نسبة غموض عنصر معين في صفحة html وهي ضد الشفافية. وتأخذ قيمة بين 0 و 1 . - بقيمة 1 : سيكون العنصر غامض 100% ، يعني إفتراضي. - بقيمة 0 : سيكون العنصر شفاف ولن يظهر حتى. ولهذا يجب وضع قيمة بينهما لنظهر الشفافية هكذا: p{ opacity: 0.6 ; } و لتجربة هذه الطريقة اعمل كود css متل التالي لكن ضع رابط صحيح للصور. body { background: url('image.png') ; } p{ background-color: black ; color: white; opacity: 0.3 ; } و هذه نتيجة الفقرات لا تظهر سوداء بل شفافة وتظهر الخلفية/ opacity هي الغمود عكس الشفافية، يعني كلما زادت قيمتها زاد الغمود وكلما نقصت زادت الشفافية. خاصية RGBa : RGBa و هي طريقة أخرى للتلاعب بالشفافية . تقريبا قد رأيناها سابقا ولكن كانت دون حرف a. وهو الذي يتحكم في الشفافية.و تعمل مثل الطريقة السابقة رقم واحد يعني قاتم، وأقل فهو شفاف. p{ background-color: rgba(255, 0, 0, 0.5) ; } يمكنك تجربة هذه الطريقة...

صورة الخلفية: سنتعلم اليوم كيف نظيف صورة كخلفية لموقع بذلا من الألوان. أنا سأشرحها كخلفية للموقع لكن يمكنك أنت وضعها كخلفية لعنوان أو نص أو ما تشاء. لإظافة خلفية نستعمل  background-image  و نعطيها قيمة (" url ("image.png   فتصبح هكذا: body { background-image: url("word.png") ; } وهذا ما تبينه الصورة التالية: و كما نرى تمة إضافة تلك الصورة كخلفية. يمكنك إضافة الصورة من ملفات موقعك أو عن طريق رابط الصورة إن لم تفهم ما أقول عليك مراجعة هذا الدرس.  و دروس الروابط الأخرى. الخيارات المتاحة لصورة الخلفية css : تتيح لنا css التغيير على صورة الخلفية بعدة طرق ندكر منها: background-attachment  وهي طريقة تسمح لنا بإقاف الصورة و النص فقط هو الذي يصعد وينزل وتأخد قيمتين: -  fixed :  الصورة تبقى تابتة. -  scroll :  عادي كجميع المواقع الصورة تتحرك مع النص. body { background-image: url("neige.png") ; background-attachment: fixed ; } background-repeat  إدا لم تعمل بهذه القيمة فالصورة تكرر في جميع الإتجاهات كالموزاييك. لكن يمكنك تكرار الصورة في الإتجاه الدي تريده فقط بإعطائه...

لتغيير لون خلفية موقع ما نستعمل  background-color  و   نعدل عليها بنفس الطريقة التي عدلنا بها على color في الدرس السابق من هذه الدورة.  لتغيير خلفية الموقع ككل يجب التعديل على body   و كما سترى سأغير له لون الخلفية و الخط هكذا: body { background-color: black ; color: white ; } وهذه النتيجة: نلاحظ الخلفية بالأسود وجميع الكتابات بيضاء. هذا طبيعي لأننا أعطينا اللون الأبيض ل body هو يشمل جميع الوسوم، إذن الوسوم التي ليس لها css خاص بها ستأخد css الخاص ب body. وهذا ما يسمى بميراث css . CSS والميراث : لو أعطيت قيمة css لوسم معين، فجميع الوسوم التي داخله تأخد تلك القيمة. لأنهم يعتبروا أبناءه ولهدا في المثال السابق ظهرت لنا   و باللون الأبيض. ولهذا سمية ب css وهي إختصار Cascading Style Sheets وتعني أوراق الأنماط المتتالية. لكن متلا في المثال السابق لو وضعنا العنوان بالأزرق فلن يؤثر عليه body و سيظهر بالأزرق. و هذا متال عن ماذا أتكلم: body { background-color: black ; color: white ; } p { color: red ; } و هكذا العنوان سيبقى أبيض أما النص سيصبح باللون الأحمر. نلتقي في الدرس القادم والسلام عليك...

 لون الخط css : نعلم مسبقا الخاصية التي تغير اللون و هي color .  سنتعلم اليوم ما هي القيم التي يمكن إعطاؤها ل color  وذلك لأنه يوجد العديد منها. إدخال إسم اللون طريقة سهلة يكفي إدخال إسم اللون باللغة الإنجليزية  لكن المشكل أن الألوان أسماؤها محدودة و كل متصفح يظهرها بالشكل الذي يريد.  ولمن أراد أسماء الألوان فهي متوفرة من هنا .  يمكنك حفظها إن أردت تطوير الإنجليزية عندك لكن هذا غير ضروري بتاتا. الآن سأضع العنوان في اللون الأحمر : h1 { color: red ; } وهذه النتيجة بعد إضافة css : اللون سداسي النطام css : بما أن الشاشات الحديثة تستطيع عرض ملايين الألوان فقد جاء هذا النظام لتوفير ذلك.و يوجد أيضا نظام آخر سنراه قريبا . لكن يبقى عندي أن هذا النظام هو الأفضل حاليا. سداسي النطام متل هذا #F3F6FE . يتكون من أرقام بين 0 و 9 وحروف بين A وF و يسبق ب (#) . الرقمين الأولين يمتلان نسبة اللون الأحمر أم الثالث و الرابع يمتلان نسبة اللون الأخضر و الأخيرين اللون الأزرق. و بطبيعة الحال لن تحفظ كل هذه الأكواد لكن يوجد برامج توفرها كالفوتوشوب. أو مواقع يمكنك البحت عنها في جوجل بكتابة code color . p { color:...

  عمل float لصورة ب css : وهو جعل شيء كصورة في اليمين أو اليسار ... فلاحظ هذا النص الذي تقرأ فيه الآن توجد به صورة على اليسار و هي عن طريق float . تستعمل هذه الطريقة كثيرا في css لهذا يجب أن تركز معي. لتطبيقها نستعمل float التي تأخد قيمتين: - right : نحو اليمين. - left : نحو اليسار . الآن لنقم بتجربتها: image.gif " class=" imagefloat " alt=" Image float " /> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى. الصورة يجب أن تكون قبل النص وليس العكس. .imagefloat { float: left ; } لو أردت الصورة في اليمين عليك فقط تغييرleft ب right. إنهاء float : بعد تطبيق float لن ينتهي إلا بعد إتمام طول الصورة . لكن أنا أريد كتابة سطرين فقط والعودة للكتابة تحت الصورة. قد تقول لي نستعمل  لا ليس هذا هو الحل بل توجد طريقة أخرى وهي clear الآن سنتعلم فقط clear: both  فهي تعمل مع اليمين واليسار و هي تخبر المتصفح بإتمام الكتابة تحت الصورة لاحظ معي : code html : "image.gif...

المحاذاة css : هذه الخاصية من خاصيات  css وهي تسمح لنا بعمل محادات للنص سواء ل: اليسار، اليمين، الوسط،يأخد طول الصفحة. وبهذه الطريقة نستطيع جعل الكتابة العربية من اليمين إلى اليسار، وجعل التوقيع على اليمين أو اليسار، كتابة متل الجرائد و غيرها من الأشياء الأخرى حسب الضرورة. لتطبيقها نستعمل خاصية  text-align  ونظيف المحاذاة المطلوب. left :  النص محادي  لليسار. center : النص في الوسط. right :  النص محادي  لليمين. justify : النص يستغل كل السطر لا يترك أي فراغات. وهذا المتال يوضح الأمر جيدا  : h1 { text-align: center ; } p { text-align: justify ; } .signature { text-align: right ; } والنتيجة تظهر هكذا: فكمايلاحظ العنوان جاء في الوسط والنص تعمدت أن أجعله justify لترى الخطأ يمكنك أنت جعله من اليمين لليسار تم بعد دلك إعمل له justify لو أردت، أما التوقيع فهو محادي لليمين كما نرى في الصورة. بهذا نكون قد إنتهينا من درس اليوم و نصيحة يجب أن تفهم جيدا جميع الدروس لأنك ستحتاجها عاجلا أم آجلا. ننتظر تعليقاتكم وشكرا.

كما قلت لكم سابقا لا تتدخل html في تنسيق النص بل لغة css، وفي هذا الدرس سنتعلم بعض الأشياء كتكبير الخط والتشطيب عليه و التسطير... النص المائل Italique : لجعل النص مائل لا نستعمل وسم كما يظن البعض، هذا الوسم فقط لإعطاء قيمة زائدة للكلمة و المتصفحات تعرضها بخط مائل. لكن أنا أريد فقط وضعه بخط مائل لا أريد إعطائه قيمة، لهذا نستعمل  font-style   والتي تأخد تلات قيم : -   italic :   النص مائل. -  oblique :  مائل في الجهه المعاكسة ل italic . - normal :  النص يعرض بخط عادي. و هذا مثال عن طريقة كتابة  الخط بال italique : h1 { font-style: italic ; } النص  البدين gras : كما قلنا لن نستعمل وسم ،  بل   font-weight  التي تأخد قيمتين: - bold :  النص البدين . -  normal :  النص يعرض بخط عادي . وهذ مثال إدراج خط بدين: h1 { font-weight: bold ; } التسطير على النص و التنصيقات الأخرى: لكل هاته الأشياء نستعمل  text-decoration  أما القيم التي تأخدها فهي كتيرة : -  underline :  تحته خط. -  line-through :  يتوسطه خط. -  overline:  السطر أعلاه. -  blink:  وامض  لا تعمل في جميع المتصفحات. - none:  الخط عادي. وه...

كما تعلمنا في الدرس السابق يوجد صيغ مختلفة للخطوط . كل صيغة تتناسب مع نوع معين من المتصفحات، لهدا سنحاول عند إضافة خط ما أن نضيفه بعدة صيغ حثي يتناسب مع جميع المتصفحات . لاحظ معي الكود التالي: @font-face { font-family: 'SuperPolice' ; src: url( 'SuperPolice.eot' ) format( 'eot' ), url( 'SuperPolice.woff' ) format( 'woff' ), url( 'SuperPolice.ttf' ) format( 'truetype' ), url( 'SuperPolice.svg' ) format( 'svg' ); } هده هي المنهجية، الآن لنجرب بخط ما يمكنك تحميل هذا الخط من هنا للتجربة لأنه متوفر مجانا. @font-face { /* نوع خط جديد*/ font-family: 'ArchitectsDaughter' ; src: url( 'ArchitectsDaughter.ttf' ) format( 'truetype' ); } h1  /* تطبيق الخط*/ { font-family: 'ArchitectsDaughter' , Arial, serif; } وهكدا ستضهر النتيجة لكن عليك كتابة العنوان بحروف أجنبية لأن الخط ليس عربي. @font-face هي التي مكنتنا من إدراج خط جديد. font-family أعطيناها إسم ArchitectsDaughter  و نفس الإسم وضعناه في ...

خط مخصص مع font-face@ : هذا الدرس معقد قليلا لكن فقط تابعه خطوة بخطوة و ستفهمه إنشاء الله. هذه الخاصية جاءت مع css3 وهي تسمح لنا بوضع أي نوع خط على موقعنا. و تعمل على جميع المتصفحات تقريبا. لكن قبل دلك يجب أن تعلم بعض الأشياء.  - يجب أن لا يكون حجم الخط أكتر من 1MO حثى يستطيع متعفح الزائر تحميله. - معظم الخطوط تحمل حقوق ملكية صانعيها. لهذا يمكنك تحميل خطوط مجانية من هذا الموقع  fontsquirrel.com . - الخطوط بها العديد من الصيغ و هي على الشكل التالي: ttf : TrueType Font. : تعمل في جميع المتصفحات + IE9 . eot : Embedded OpenType. : تعمل على جميع إصدارات IE لأنها من صنع Microsoft. otf : OpenType Font. : لا تعمل على IE . svg : SVG Font. : تعمل حاليا 02/08/2013 على iPhones وiPads . woff : Web Open Font Format. : صيغة جديدة تعمل على جميع المتصفحات و IE9. في لغة css3 نكتب الكود مثلا هكدا للتجربة و التوضيح فقط : @font-face { font-family: 'Police' ; src: url( 'Police.eot' ); } ملف  Police.eot  يجب أن تحفظه في نفس الملف الدي به صفحة css . إدا وضعته في مكان آخر يجب أن تراجع درس الرو...