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

لعلك من أصحاب المواقع أو مصمم ويب و تريد أن تعرف الأخطاء التي قد تضعها عن غير قصد في تصميماتك و التي قد تؤثر سلبا على جودة موقعك، و لكن عندك أشغال كثيرة ولا تجد وقتا كاف لإعادة مراجعتها من الأول للآخر لأنه و بطبيعة الحال الأمر طويل و متعب، أو عندك كترة التصميمات ولا تستطيع إصلاحها كلها . مدونة حاسوبي تأتيك اليوم  بالحل و هو موقع   http://validator.w3.org/   من إنشاء شركة w3c و هي مؤسسة الويب web لمن لم يسمع بها من قبل، فبعد تحديدك لغة تصميمك (html5 ) ، ستستطيع إكتشاف كل  الأخطاء التي قد تكون متواجدة مع تحديد مكان وجودها بالتفصيل عن طريق تعين السطر. هذه العملية تتم إما عن طريق رابط url أو عن طريق ملف مخزن في حاسوبك .

 الطرق المتوفرة لدراسة 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 يعني تصميم مواقع الويب. إذن سنتعلم في هذه الدورة كيف نصنع موقع ويب خاص بنا . في هذا الجزء الأول سندرس كيف نقوم بعمل صفحات و إدراج عدة أشياء بها كالصور و النصوص و كذلك التلاعب بالروابط... هذا الفيديو سبق وشرحته لكن كتابيا ليكون سهل في الفهم:

 تغيير نوع الخط: لتغيير الخط في نستعمل النمط font-family ،   و دلك بالطريقة التالية: balise { font-family:  إسم الخط ; } و لتجنب مشكل عدم توفر حاسوب الزائر على ذلك الخط نكتب العديد من الخطوط هكذا: balise { font-family:  الخط4 ,  الخط3 ,  الخط2 ,  الخط1 ; } هكذا المتصفح سيعرض الخط الأول في حالة عدم توفره التاني و هكذا. و في الأخير أكتب كلمة serif أو sans-serif و هي تعني الخط الإفتراضي للمتصفح. أنواع الخطوط لن نستطيع إحصائها لكن سنتكلم الآن عن الأساسية لنعود لها لاحقا، هذه البعض منها: Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana. وتظهر على المتصفح هكذا : فإذا كتبت معي هذا الكود: p{ font-family: Impact, Verdana , "Arial Black", Arial , sans-serif; } هكدا سيظهر لنا على المتصفح خط impact في حالة عدم التوفر verdana و هكذا، وفي الأخير كتبت sans-serif ويعني في حالة عدم توفر أي خط يظهر الخط الإفتراضي للمتصفح و يمكن تبديلها بserif الفرق بينهما يكون في علامات الوصل فقط . وعند إحتواء إسم الخط على فراغ يجرى كتابته بين ...

تغيير حجم الخط بلغة css3 : كما سبق و دكرت فإن الديكورات لا علاقة لها ب html  فلتغيير حجم الخط نحتاج تطبيق نمط إسمه font-size  هدا نمط css يسمح لنا بتغيير حجم الخط بطريقتين إتنتين: - عن طريق الحجم المطلق:  و ذلك بإعطائه قيم ب البيكسل  px  أو السنتمتر cm أو الملمتر mm.  لا أنصح كتيرا بهذه الطريقة لأنها تظهر الخط صغيرا في بعض المتصفحات. - عن طريق الحجم   الغير مطلق :  تكون بالنسبة , em أو ex , و هي جيدة لأنها تتماشا مع معضم أحجام الشاشات.  و هكذا سيسهل على الزائر قراءة المواضيع. طريقة  الحجم المطلق: لإختيار الحجم هنا عادة نستعمل البيكسيل px متلا لجعل إرتفاع الخط 16px نكتب الكود التالي: font-size: 16px; سيصبح إرتفاع الخط 16px كما تبين الصورة التالية: لو وضعت الكود التالي في صفحتك css. ستلاحظ التغيير: p{ font-size: 14px; /* Paragraphes de 14 pixels */ }h 1 { font-size: 40px; /* Titres de 40 pixels */ } لاحظ معي النتيجة: يمكنك أيضا تبديل البيكسل بالملمتر أو السنتمتر كما دكرت في أول الدرس. طريقة  الحجم   الغير مطلق: هده الطريقة جميلة تمكن من عرض الكتابة بطريقة أحسن رغم تغير حجم الشاشة. توجد ط...

المحددات و هي الكلمات التي تحدد لنا الكتابة أو الصورة أو أي شيء آخر نريد تغييره، لقد استعملنا سابقا بعض هده المحددات سندكرها تم ندكر المحددات الأخرى المتقدمة. محددات css3 التي سبق ورأيناها:  يجب أن تحفظها لأننا نحتاجها كثيرا و لا تخف لأنها سهلة و سنبدأ بالسهل: p{ } هذه كما سبق و دكرنا تعني أريد جميع النصوص بالشكل أو الون فلاني. h1, p { } هده تعني كما سبق الدكر أنه نفس التعديل سيطرأ على العناوين و النصوص. و أيضا كنا قد رأينا class و id فهي تحدد لنا عنصرا محددا للتعديل عليه: كلمة ,جملة, صورة... : .class { } #id { } يوجد العديد من المحددات الأخرى لكن سندكر منها البعض فقط نظرا لأننا لا نشتغل بها كلها.  محددات css3 المتقدمة: جميع الوسوم: *{ } هدا المحدد يقوم بالتعديل على جميع وسوم الصفحة دون إستتناء. وسم داخل وسم: h3 em { } ستتغير فقط وسوم الموجودة داخل . هذا فقط متال يمكنك التعامل بأي وسوم أخرى. وهذا مثال: Titre texte important وسم يوجد بعد وسم آخر: h2 + p { } سيتم تغيير الموجودة بعد فقط كما يبين الكود التالي: Titre Paragraphe محددات css3 أخرى: بما أن محددات css3 كتيرة جدا و لن نستطيع ...

 تطبيق نمط class و id : ما تعلمناه سابقا صحيح لكن متلا عندما كتبنا أن النصوص تصبح بالأزرق فجميع النصوص سوف تصبح كدلك، ولكن أنا أريد نصا معينا  يصبح بالأزرق وآخر بالأحمر ... ستقول نضيف الستايل في الوسم كما تعلمنا سابقا. سأقول لك لا، لأنه قلت لك أحسن طريقة هي عمل صفحة css مستقلة. إدا الحل هو تطبيق سمات class و id . كلا هاتين السمتين تستعملان لإعطاء إسم لوسم ما لنستعمله في css . الفرق بينهما بسيط سأتكلم عليه في آخر هذا الدرس.  تطبيق نمط class : يدرج هذا النمط بالطريقة التالية: class= "" > class= "" > class= "" /> class= "" /> وفي قيمة ندرج أي إسم لا يهم المهم يكن له معنى لنتدكره و يبدأ بحرف. متلا لاحظ معي الكود التالي: charset= "utf-8"  /> rel= "stylesheet" href= "style.css" /> صفحة تجريبية متال لموقع class= "tarhib" > مرحبا بكل زوار موقعي /p> آسف لأن موقعي لم يكتمل بعد. الآن أصبح إسم هذه الجملة tarhib سندهب و نعدل عليها في css3 . وبما أنه class ففي css يجب أن يسبق بنقطة كما يبين ...

إدراج أكواد css3 : توجد تلات طرق لكتابة أكواد css3 : 1- داخل صفحة css3. 2- داخلة وسم . 3- مباشرة في الوسم الذي نريد التعديل عليه. لكن تبقى أحسن طريقة هي أن تصنع صفحة css3. لإنشاء صفحة سهل جدا فقط عليك إنشاء صفحة ب++notepad كما تعلمنا سابقا، لكن هذه المرة سيختم ب css. بدلا من html. .  و كما دكرت هده هي أحسن طريقة و ستعرف لماذا لاحقا.  الآن إنس جميع الملفات التي كنا قد أنشأناها و أنشئ صفحة html التالية: charset= "utf-8" /> rel= "stylesheet" href= "style.css" /> Premiers tests du CSS مدونة الخبير مرحبا بكم جميعا آسف لأني لم أكمل موقعي . بعد سيكون جاهزا قريبا السطر5 لم نره سابقا.  " link  rel= "stylesheet"  href= "style.css >   هذا السطر هو الدي يجمع بين صفحة html و صفحة css .  إحفظ الكود السابق و لنسميه جميعا page.html .  لما تدخل له عن طريق جوجل كروم متلا ستجد الصفحة لازالت كما هي. الآن نعود إلى ++notepad و ننشأ صفحة جديدة و نختار أننا سنتكلم لغة css عن طريق CSS ثم أكتب الكود التالي:  p { color: blue ; } الآن إحفظه تحت إسم ...

إدراج صورة بلغة html5  لإدراج صورة بلغة html5 نستعمل وسم يتيم و هو .  و يجب أن يحتوي هذا الوسم على سمتين أساسيتين هما: - src : نضع فيها رابط تواجد الصورة سواء في ملف html5 أو مباشرة من الإنترنيت كما تعلمنا سابقا في درس الروابط و لمراجعته من هنا  . - alt : الكثير من المصممين يتجاهلونه لكن هذا خطئ فادح فهو إجباري أن تكتبه و ليس اختياري، و دوره نكتب فيه ما هي هذه الصورة هل للبحر أم الطبيعة... و هذا النص يظهر في حالت تعدر تحميل صفحة html5 و يساعد أيضا عناكب محرك البحث من التعرف على الصورة مثلا هذه صورة كتاب و هذه تفاحة و هكذا يعرضها في نتائج البحث.  كملاحظة الصور لا تدرج وحدها بل يلزم أن تدرج داخل نص كما يبين الكود التالي : مرحبا بكل الزوار في معرض صوري: src= "image.png" alt= "mon image" /> عند حفظك للصورة لا تكتب فراغات أو حروف كبيرة في الإسم. إظهار سحابة عند وضع الفأرة على صورة: نعم أنت محق لقد  رأينا هذه الخاصية سابقا في دروس الروابط بلغة html5 ، و نستعملها لإعطاء تعليق يظهر للزائر بعد أن يضع الفأرة على الصورة. هي ليست مفروضة أن تضعها دائما يمكنك وضعها متى شئت  ...

من السهل إضافة الصور داخل صفحة html5 ،و دلك لعدة أغراض كإضافة جمالية لموضوعاتك و تسهيل فهم الموضوع من طرف الزائر دون قراءته له و غيرها، لكن أولا يجب أن نتكلم قليلا عن الصور. صيغ الصور المختلفة في html5 : يوجد العديد من صيغ الصور حجمها غالبا ما يقاس ب ko و Mo و يرتفع هذا الحجم حسب جودة الصورة. فمثلا عندما تريد حفظ صورة معينة ببرنامج ما يعطيك العديد من الصيغ كما تبين الصورة أسفله: فأصحاب المواقع يحاولون جاهدين وضع الصور في حجم صغير لتسريع تحميل الصفحة و لكن أيضا بجودة جيدة. و هذه بعض صيغ الصور الأكثر إستعمالا على الويب: الصور  ذ ات الصيغة: JPEG و هو إختصار لكلمة (Joint Photographic Expert Group) تستعمل كثيرا في الويب لأنها تضغط حجم الصورة وتحتوي على 16 مليون لون مختلف، و من الأحسن إستعمال هذه الصيغة لحفظ الصور المأخوذة بالمصورة فقط و ليست المرسومة... الصور  ذ ات الصيغة: PNG و هو إختصار لكلمة (Portable Network Graphics) و هي أحدت صيغة و يستعملها كثيرا المصممون، و الجميل فيها أنه يمكن أن تصبح الصورة شفافة دون فقدان جودتها. وهو يحتوي على عدة ألوان بين 256 و 16مليون لون. الصور  ذ ات الصيغة: ...

في هذا الجزء الأخير من دراسة روابط html5 . وندكر بعض الإضافات التي يمكننا إعطاؤها لرابط و أيضا بعض الأنواع الأخرى. إظهار سحابة عند وضع الفأرة على الرابط: في لغة html5 يمكن إستعمال سمة إسمها title لإظهار سحابة عند المرور بالفأرة فوق رابط معين و تستعمل هده الخاصية للإظهار للزائر على ماذا يحتوي هدا الرابط كما تبين الصورة التالية: و لتطبيق هده الخاصية يكتب كود html5 على الشكل التالي: مرحبا بك في مدونة href= "http://alkhabire.blogspot.com/" title= "alkhabire" > الخبير فتح الرابط في نافدة جديدة: تستعمل هذه الطريقة في الإعلانات و إدا وضعت رابط موقع آخر على موقعك كي لا تفقد زوارك. ولإضافتها نستعمل هذه الكلمة "target="_blank في كود الرابط كما هو موضح: href= " http://alkhabire.blogspot.com/ " target= "_blank"> الخبير  رابط لإرسال إيميل: هذا الرابط سندكره فقط للعلم لأنه يحتاج لغة php ليعمل جيدا و الكود الخاص به يكتب هكذا: href= " mailto :alkhabire@live.com" > أرسل لي رسالة الجديد هنا هي سمة mailto  وهي التي تخبر الحاسوب بأ...

في هذا الدرس إنشاء الله سنتعلم كيفية إنشاء رابط يؤدي إلى مكان محدد على صفحة html5 . نستعمل هذه الخاصية في عدة أمور كأن تكون صفحتك html5 طويلة جدا و تضع متلا زر إدا ضغط عليه شخص يتحول إلى أسفل الصفحة أو وسطها أو صناعة زر الصعود للأعلى... الرابط لمكان يوجد في نفس الصفحة: تستطيع صنع هذه الروابط بإعطائك للوسم سمة تسمى id وتعطي هذا id في قيمته أي إسم تريده شرط أن لا يكرر هدا الإسم في id آخر، ويكتب كما يبين كود التالي: id= "id-nom" > إسم الرابط ومن ثم أنشأ رابط و في السمة href ضع إسم id مسبوقا بعلامة # كما يبين اكود التالي: href= "#id-nom" > idالدهاب إلى ولتجربة هده الخاصية أنشأ صفحة طويلة بحيث تستطيع الصعود و النزول تم ضع للعنوان id و ضع الرابط في الأسفل أكتب عليه متلا الصعود لأعلى و ستلاحظ أنك بعد الضغط عليه ستتحول مباشرة للأعلى. ملاحظة فإن هده السمة لا تصلح فقط للروابط بل لأشياء أخرى أيضا سنراها في المستقبل. الرابط لمكان يوجد في صفحة أخرى: فلإنشاء رابط لمكان محدد لكن في صفحة أخرى، يكفي كتابة رابط تلك الصفحة كما تعلمنا في الدروس السابقة لروابط html5 متبوعا ...

تحدتنا في الدرس السابق عن الروابط التي تجمع بين صفحتي html5 في نفس الملف، أما في هذا الدرس سنتحدت عن: الروابط بين صفحتي html5 في ملفات مختلفة:  الأمور تتعقد قليلا إدا كانت الصفحات في ملفات مختلفة، لكن لا تخف سنتعلم دلك خطوة خطوة.  فمتلا قم بفتح ملف جديد و ضع به الصفحة التانية أنا أسميت الملف بكلمة web يمكنك تسميته ما تريد كما تبين الصورة:   بما أن صفحة html5 وملف web داخل نفس الملف يكفي أن نكتب كود التالي: href= "web/page2.html" > لو كان هناك متلا العديد من الملفات داخل ملف فقط نكتب أسمائها لغاية الوصول للصفحة التي نريد فيصبح الكود هكدا: href= "web/web2/web3/page3.html" > أما لو أرضنا متلا الدهاب من الصفحة التانية إلى الأولى في الصورة السابقة فعلينا أولا الرجوع إلى الصفحة الأب ب كتابت .. في الرابط تم كتابت إسم الصفحة أو الملف الدي نريد الدهاب إليه و متال عن الصورة السابقة يجب كتابة الكود التالي: href= "../page1.html" > فقط مع الممارسة ستتعود على هذه الأشياء و هذه صورة توضح الأمر. وهذا ملخص على شكل خطاة وكما سترى فإن روابط html5 ليست بداك التعقيد...

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

بسم الله الرحمن الرحيم. اليوم سنتحدث عن كيف تعطي  قيمة لكلمة داخل نص معين في لغة html5 . إعطاء كلمة ما القيمة في لغة html5 : فلإعطاء كلمة ما القيمة في html5 . نستعمل وسم strong > و الذي يعني أن هذه الكلمة قوية أو مهمة . و يمكن أيضا أن تستعمل وسم em > لهذا الغرض. و هذه الأكواد مهمة لأنه من خلالها يستطيع محرك البحث التعرف على الكلمات المهمة في نصك . و بالتالي إظهار موقعك على محركات البحت في حين بحت شخص عليها. و يكتب كود html5 مثلا هكذا:                                     charset= "utf-8" />               العنوان                                                      إعطاء قيمة لكلمة معينة                        اليوم نقدم درس حول إعطاء قيمة لكلمة في تصميم المواقع .و ذالك بالطريقة التالية:           يمكنك إنشاء صفحة كما تعلمنا سابقا و كتابة هذا الكود عليها. بعد فتحك للصفحة على أحد المتصفحات ستلاحظ أن الكلمة التي كتبناها داخل ،تظهر بخط كبير هي تظهر كذلك فقط لأن المتصفح يفهم أنها مهمة و يميزها عن باقي الكلمات لكن ليس هذا هو دورها في لغة html5 . فدورها الحقيقي هو إعط...