تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء3

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

فهذه الحلقة مهمة جدا، لماذا؟ لأنه و كأننا نقول هي خطة لإنشاء موقع ويب خالي من الأخطاء و مفهوم لأي مصمم يقرأه.

تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء2

ماذا سنرى في هذا الدرس؟

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

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

تعلم كيفية إنشاء موقع الويب الخاص بك مع HTML5 و CSS3 الجزء1

ما هي html ؟

html عبارة عن لغة وصفية ظهرة سنة 1991 من طرف العبقري Timberner-lee و هي أختصار لكلمة hypertext markup language .

ما هي css ؟

ظهرت css في سنة 1996 من طرف نفس الشخص لتقدم صفحة الويب بأشكال أفضل لمستعمل الإنترنيت.

كيف سأتعلمهما و في ماذا سينفعاني؟

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

تقديم دورة: تحسين موقعك في محرك البحث بفضل سيو seo

ماهو السيو seo؟

السيو هو إختصار كلمة search engine optimization و هو الذي يسمح لك بتهيأت موقعك لمحركات البحث  عبر كثير من الطرق  التي تجعله محبوبا لذا جوجل بوت googlebot، هذا الأخير عبارة عن روبوت من تطوير شركة جوجل و هو الذي يزور و يأرشف جميع مواقع العالم و التي تقدر حاليا بأكثر من مليارا موقع على شبكة الإنترنيت.

لهذا و جب علينا جعل موقعنا محبوب لذا جوجل بوت googlebot كي يأرشف موقعك سريعا و يجعله في الصفحات الأولى بإذن الله. قد تقول لي جوجل ليس المحرك الوحيد! نعم لكن هو الأقوى و أكثر من 90% عمليات البحث تتم عليه لهذا وجب التركيز عليه أما باقي المحركات فلن نعمل عليها كثيرا. أترككم مع هذا التقديم البسيط حول الدورة:

إنشاء المظاهر الديناميكية ب css (الحيوية )

 المظاهر الديناميكية

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: الرابط يحتفظ على الشكل ما دام أصبعك لا يزال فوق الزر الأيسر للفأرة:

a:active
{
background-color: #FFCF66;
}

عند تحديد العنصر

focus: تقوم بتطبيق النمط عند تحديد العنصر و هذه الطريقة تعمل مع أوسمة أخرى لم نراها بعد المهم لتجربتها أدخل من IE لأنها لا تعمل على جوجل كروم:

a:focus 
{
background-color: #FFCC66;
}

الروابط التي سبق زيارتها:

هذه الطريقة تكون إفترادية في معضم المتصفحات لكن يمكنك إضافتها و تغيير الألوان الإفترادية عن طريق visited:

a:visited 
{
color: #AAA; 
}

و هكذا ستظهر الروابط التي سبق زيارتها باللون الرمادي.لو أرت أن تظهر الروابط التي سبق زيارتها كالأخرى فاجعل لهم نفس اللون. لكن تبقى هذه الخاصية جميلة فحتى جوجل تستعملها. أتمنى أن يكون الدرس قد نال إعجابكم.

الدرس37 : إضافة box-shadow وtext-shadow ب css

إضافة مربع الظل 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 فهو مدعوم إبتداءا من IE10 و ليصبح متوافق مع المتصفحات القديمة التي يستعملها خصوصا الناس الكبار فسنرى هذا لاحقا.

الدرس36 : إضافة زوايا مدورة border-radius ب css

الزوايا المدورة 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;
}

لتفهم هذه الأخيرة وجب عليك تجربتها أكتر من مرة حثى تتمكن منها، فالتصميم هو هذا أنا أريك الأساس و أنت تجرب مرة و اثنين و ثلاث إلى أن تحس بأنك فهم ذاك الشيء جيدا .

هذه الأشياء تعمل على المتصفحات الجديدة أي تدعم . أما القديمة فلها أشياء خاصة بها لن ندرسها الآن لأنها معقدة قليلا. لا تتعب نفسك الآن مع المتصفحات القديمة سنتطرق لها بعد ضبط css3.