إكتشف أخطاء التصميم الموجودة في موقعك

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

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

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

 الطرق المتوفرة لدراسة 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 الجزء6

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

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

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

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

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

تحميل الملف المستعمل في الشرح

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

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

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

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

الدرس25 : تغيير نوع الخط في لغة css3

 تغيير نوع الخط:

لتغيير الخط في نستعمل النمط 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 الفرق بينهما يكون في علامات الوصل فقط .

وعند إحتواء إسم الخط على فراغ يجرى كتابته بين "" كما فعلت في "Arial Black" .
و بهدا نكون قد إنتهينا من درس اليوم نلتقي في الدرس القادم ننتظر تعليقاتكم و السلام عليكم.

الدرس24 : تغيير حجم الخط في لغة css3

تغيير حجم الخط بلغة 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 */
}

لاحظ معي النتيجة:

يمكنك أيضا تبديل البيكسل بالملمتر أو السنتمتر كما دكرت في أول الدرس.

طريقة الحجم الغير مطلق:

هده الطريقة جميلة تمكن من عرض الكتابة بطريقة أحسن رغم تغير حجم الشاشة.

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

xx-small : تسمى minuscule لا أعرف إسمها بالعربية.

x-small : صغير جدا .

small : صغير .

large : كبير .

x-large : كبير جدا.

xx-large : كبير جدا جدا.

و يمكنك تجربتها بالكود التالي:

p{
font-size: small;
}h1
{
font-size: large;
}

لكن لن نعمل بهذه الخاصية لأنها تحتوي على سبع كلمات فقط. لاكن توجد طريقة أخرى و هي إختيار الحجم ب em .عند 1em فإن الخط يكون عادي. أكبر من واحد متلا 1.5em يكون الخط كبير, أصغر من واحد ك 0.6em يكون النص صغير. بين الرقمين تكون نقطة و ليست فاصلة.لتجربة هذه الطريقة يمكنك إستعمال الكود التالي:

p{
font-size: 0.8em;
}h
1
{
font-size: 1.3em;
}

كما يمكنك إستعمال طرق أخرى ك ex و النسبة 60% , 90%... لأي سؤال إستفسار أو تشجيع ننتظر تعليقاتكم وشكرا.

الدرس23 : تطبيق نمط باستعمال محددات css3 المتقدمة

المحددات و هي الكلمات التي تحدد لنا الكتابة أو الصورة أو أي شيء آخر نريد تغييره، لقد استعملنا سابقا بعض هده المحددات سندكرها تم ندكر المحددات الأخرى المتقدمة.

محددات css3 التي سبق ورأيناها:

 يجب أن تحفظها لأننا نحتاجها كثيرا و لا تخف لأنها سهلة و سنبدأ بالسهل:

p{
}

هذه كما سبق و دكرنا تعني أريد جميع النصوص بالشكل أو الون فلاني.

h1, p
{
}

هده تعني كما سبق الدكر أنه نفس التعديل سيطرأ على العناوين و النصوص. و أيضا كنا قد رأينا class و id فهي تحدد لنا عنصرا محددا للتعديل عليه: كلمة ,جملة, صورة... :

.class
{
}
#id
{
}

يوجد العديد من المحددات الأخرى لكن سندكر منها البعض فقط نظرا لأننا لا نشتغل بها كلها.

 محددات css3 المتقدمة:

جميع الوسوم:

*{
}

هدا المحدد يقوم بالتعديل على جميع وسوم الصفحة دون إستتناء.

وسم داخل وسم:

h3 em
{
}

ستتغير فقط وسوم الموجودة داخل

. هذا فقط متال يمكنك التعامل بأي وسوم أخرى. وهذا مثال:

Titre texte important

وسم يوجد بعد وسم آخر:

h2 + p
{
}

سيتم تغيير

الموجودة بعد

فقط كما يبين الكود التالي:

Titre

Paragraphe

محددات css3 أخرى:

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

وبهذا نكون قد إنتهينا من درس اليوم. لأي سؤال يمكنك تركه بتعليقك و شكرا.

الدرس22 : تطبيق نمط class و id في لغة html5 و 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 يجب أن يسبق بنقطة كما يبين الكود التالي الدي سنحول به هذا النص للأزرق:

.tarhib
{
color: blue;
}

وهذه هي النتيجة:

كما نلاحظ فقط النص الدي يحمل "class="tarhib هو الدي تغير لونه للأزرق .

 تطبيق نمط id :

له نفس دور class تقريبا . لكن لا يمكن إعطاء إسم id معين أكتر من مرة. و هو يستعمل أيضا في JavaScript. ولقد سبق ورأينا هدا السمة في درس الروابط. و باتصار سنستعمل في الأشياء التي توجد مرة واحدة في الصفحة كلوجو متلا وهذا متال:

src="images/logo.png" alt="Logo alkhabire" id="logo" />

و لإدراج هدا الإسم الذي أعطينا id إياه في لغة css يجب كتابة قبل الإسم # كما يبين الكود التالي:

#logo
{
/* الأكواد تضاف هنا: */
}

لم نجرب id لأنها تعمل متل class يمكنك تجربة ذلك بنفسك. فالفرق بينهما هو ما دكرته سابقا.و كان هذا درس بسيط لكنه مهم لأننا سنحتاجه كتيرا في الدروس السابقة. لأي إستفسار أو تشجيع يمكنك ترك تعليقك و شكرا.

الدرس19 : إنشاء أول صفحة CSS3

إدراج أكواد css3 :

توجد تلات طرق لكتابة أكواد css3 :

1- داخل صفحة css3.

2- داخلة وسم .

3- مباشرة في الوسم الذي نريد التعديل عليه.

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

الآن إنس جميع الملفات التي كنا قد أنشأناها و أنشئ صفحة html التالية:

charset="utf-8" />
rel="stylesheet" href="style.css" />

مدونة الخبير

مرحبا بكم جميعا

آسف لأني لم أكمل موقعي.
بعد سيكون جاهزا قريبا

السطر5 لم نره سابقا. "link rel="stylesheet" href="style.css> هذا السطر هو الدي يجمع بين صفحة html و صفحة css. إحفظ الكود السابق و لنسميه جميعا page.html . لما تدخل له عن طريق جوجل كروم متلا ستجد الصفحة لازالت كما هي.

الآن نعود إلى ++notepad و ننشأ صفحة جديدة و نختار أننا سنتكلم لغة css عن طريق CSSثم أكتب الكود التالي: 

p{
color: blue;
}

الآن إحفظه تحت إسم style.css .لأنه في الكود السابق نادينا كود css الذي بهذا الإسم  "link rel="stylesheet" href="style.css>. و ذلك في نفس الملف الذي حفظنا به صفحة html . و إذا وضعته في ملف آخر يجب عليك تعديل الرابط كما تعلمنا في درس الروابط. و هذه الصور تبدي ما كنت أتحدت عنه:

حفض الصفحتين في ملف واحد:

و هذه هي النتيجة التي يجب أن تحصل عليها:

تنبيه: لايمكنك فتح ملف في المتصفح فقط ملف هو الدي نفتحه أما نعدل عليه فقط.
ننتظر تعليقاتكم و شكرا.

الدرس17 : إدراج صورة داخل صفحة html

إدراج صورة بلغة html5 

لإدراج صورة بلغة html5 نستعمل وسم يتيم و هو .  و يجب أن يحتوي هذا الوسم على سمتين أساسيتين هما:

- src : نضع فيها رابط تواجد الصورة سواء في ملف html5 أو مباشرة من الإنترنيت كما تعلمنا سابقا في درس الروابط و لمراجعته من هنا .

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

 كملاحظة الصور لا تدرج وحدها بل يلزم أن تدرج داخل نص كما يبين الكود التالي :

مرحبا بكل الزوار في معرض صوري:

src="image.png" alt="mon image" />

عند حفظك للصورة لا تكتب فراغات أو حروف كبيرة في الإسم.

إظهار سحابة عند وضع الفأرة على صورة:

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

مرحبا بكل الزوار في معرض صوري:

src="image.png" alt="mon image" title="تصميم رائع" />

إضافة صورة مصغرة للنقر:

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

مرحبا بكل الزوار في معرض صوري:

href="image.png"> src="mini/image.png" alt="mon image"  />

و بهدا نكون قد إنتهينا من درس اليوم بقي درس آخر عن الصور. ننتظر تعليقاتكم و السلام عليكم و رحمت الله تعالى و بركاته.

الدرس16 : صيغ الصور المختلفة في لغة html5

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

صيغ الصور المختلفة في html5 :

يوجد العديد من صيغ الصور حجمها غالبا ما يقاس ب ko و Mo و يرتفع هذا الحجم حسب جودة الصورة. فمثلا عندما تريد حفظ صورة معينة ببرنامج ما يعطيك العديد من الصيغ كما تبين الصورة أسفله:

فأصحاب المواقع يحاولون جاهدين وضع الصور في حجم صغير لتسريع تحميل الصفحة و لكن أيضا بجودة جيدة. و هذه بعض صيغ الصور الأكثر إستعمالا على الويب:

الصور ذات الصيغة: JPEG

و هو إختصار لكلمة (Joint Photographic Expert Group) تستعمل كثيرا في الويب لأنها تضغط حجم الصورة وتحتوي على 16 مليون لون مختلف، و من الأحسن إستعمال هذه الصيغة لحفظ الصور المأخوذة بالمصورة فقط و ليست المرسومة...

الصور ذات الصيغة: PNG

و هو إختصار لكلمة (Portable Network Graphics) و هي أحدت صيغة و يستعملها كثيرا المصممون، و الجميل فيها أنه يمكن أن تصبح الصورة شفافة دون فقدان جودتها. وهو يحتوي على عدة ألوان بين 256 و 16مليون لون.

الصور ذات الصيغة: GIF

نسخة قديمة لم تعد تستعمل كثيرا أصبح بدلها png لأن جودته أحسن. تحتوي على 256 لونا. و الجميل في هذه الصيغة أن الصورة قد تصبح متحركة.

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

و لأي سؤال يمكنك وضعه في تعليقك و شكرا.

الدرس15 : إنشاء الروابط بلغة html5 الجزء الرابع

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

رابط لتحميل ملف:

يستعمل في مواقع تحميل الأفلام والألعاب و غيرها... و لتجربته ضع ملف من نوع zip أوrar في ملف الموقع الدي سبق و أنشأناه تم إجعل رابطا موجها له لكن لن يختم ب html. بل حسب نوع الملف كما يبين الكود التالي:

href="الملف.zip">تحميل الملف

و هكذا بعد الضغط عليه فإن المتصفح سيعمل تحميلا أوتوماتيكي للملف.

لأي سؤال حول روابط html5 أو شيء آخر ضعه في تعليقك و سأكون سعيدا بالإجابة عليه.

الدرس14 : إنشاء الروابط بلغة html5 الجزء الثالث

في هذا الدرس إنشاء الله سنتعلم كيفية إنشاء رابط يؤدي إلى مكان محدد على صفحة html5 .

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

الرابط لمكان يوجد في نفس الصفحة:

تستطيع صنع هذه الروابط بإعطائك للوسم سمة تسمى id وتعطي هذا id في قيمته أي إسم تريده شرط أن لا يكرر هدا الإسم في id آخر، ويكتب كما يبين كود التالي:

id="id-nom"> إسم الرابط

ومن ثم أنشأ رابط و في السمة href ضع إسم id مسبوقا بعلامة # كما يبين اكود التالي:

href="#id-nom">idالدهاب إلى

ولتجربة هده الخاصية أنشأ صفحة طويلة بحيث تستطيع الصعود و النزول تم ضع للعنوان id و ضع الرابط في الأسفل أكتب عليه متلا الصعود لأعلى و ستلاحظ أنك بعد الضغط عليه ستتحول مباشرة للأعلى.

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

الرابط لمكان يوجد في صفحة أخرى:

فلإنشاء رابط لمكان محدد لكن في صفحة أخرى، يكفي كتابة رابط تلك الصفحة كما تعلمنا في الدروس السابقة لروابط html5 متبوعا بإسم id للشيء أو المكان الدي نريد الدهاب له كما هو في الكود التالي:

href="page2.html#id-nom">idالدهاب إلى 

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

الدرس13 : إنشاء الروابط بلغة html5 الجزء الثاني

تحدتنا في الدرس السابق عن الروابط التي تجمع بين صفحتي html5 في نفس الملف، أما في هذا الدرس سنتحدت عن:

الروابط بين صفحتي html5 في ملفات مختلفة: 

الأمور تتعقد قليلا إدا كانت الصفحات في ملفات مختلفة، لكن لا تخف سنتعلم دلك خطوة خطوة.  فمتلا قم بفتح ملف جديد و ضع به الصفحة التانية أنا أسميت الملف بكلمة web يمكنك تسميته ما تريد كما تبين الصورة: 

 بما أن صفحة html5 وملف web داخل نفس الملف يكفي أن نكتب كود التالي:

href="web/page2.html">

لو كان هناك متلا العديد من الملفات داخل ملف فقط نكتب أسمائها لغاية الوصول للصفحة التي نريد فيصبح الكود هكدا:

href="web/web2/web3/page3.html">

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

href="../page1.html">

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

وهكدا نكون قد إنتهينا من درس اليوم حول روابط html5 شكرا على المتابعة و لأي سؤال لا تتردد في وضع تعليقك.

الدرس11 : إنشاء قوائم بلغة html5

بسم الله الرحمن الرحيم في درسنا اليوم سنتكلم عن كيفية إنشاء قوائم بإستعمال لغة html5.

سنتكلم إنشاء الله عن نوعين من القوائم. القوائم العشوائية و القوائم المرتبة عدديا.
كل كلمة أو جملة في القوائم الغير مرتبة أو  القوائم المرتبة عدديا في html5 ، تكتب داخل الوسم التالي: 

 .

القوائم الغير مرتبة في html5 :

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

كلها داخل وسم

كما يوضح الكود التالي:

• خشب


• براغي


• غراء

وهذه هي النتيجة:

 القوائم المرتبة عدديا في html5 :

هي القوائم التي من الضروري عمل الترتيب لها، متلا لدينا سباق شارك فيه طفل و شاب و رجل.

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

داخل وسم

ليصبح الكود هكذا:

نتائج السباق

1. الشاب


2. الرجل


3.  الطفل

لتبدو النتيجة هكذا:

توجد بعض الأنواع الأخرى من القوائم لاكنها غير مهمة و لن تحتاجها، و يمكنك التلاعب بالكود كما تريد فقط إحترم منطق أي وسم فتح داخل وسم آخر يجب أن يغلق داخله.

و يمكنك فتح

داخل وسم
• . إدا كانت لك إختيارات عديدة في قائمتك المهم هو إحترام المنطق.

لا تبخل علينا بتعليقك و شكرا.

الدرس10 : إعطاء قيمة لكلمة داخل نص في لغة html5

بسم الله الرحمن الرحيم. اليوم سنتحدث عن كيف تعطي  قيمة لكلمة داخل نص معين في لغة html5 .

إعطاء كلمة ما القيمة في لغة html5 :

فلإعطاء كلمة ما القيمة في html5 . نستعمل وسم <strong> و الذي يعني أن هذه الكلمة قوية أو مهمة . و يمكن أيضا أن تستعمل وسم <em> لهذا الغرض. و هذه الأكواد مهمة لأنه من خلالها يستطيع محرك البحث التعرف على الكلمات المهمة في نصك . و بالتالي إظهار موقعك على محركات البحت في حين بحت شخص عليها.

و يكتب كود html5 مثلا هكذا:

       
             
              charset="utf-8" />
             
       

         
               
                  

إعطاء قيمة لكلمة معينة

                      اليوم نقدم درس حول إعطاء قيمة لكلمة في تصميم المواقع.و ذالك بالطريقة التالية: 

       

يمكنك إنشاء صفحة كما تعلمنا سابقا و كتابة هذا الكود عليها.

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

التأشير لكلمة معينة في html5 :

للتأشير على كلمة في لغة html5 نستعمل وسم <mark> دورها هو التأشير يعني: لما يبحت شخص في موقعك عن كلمة معينة فهذا الوسم يساعد الزائر على إجاد ما يبحت عنه بسرعة. و لتجربة هذا الوسم فقط أكتب الكود السابق و بذل كلمتي strong ب mark . تم إعمل حفظ . بعد فتحك للصفحة في أحد المتصفحات (google chrome) ستجد أنه يوجد فوق تلك الكلمة غالبا مارك بالأصفر. لكن كما أقول دائما دورها هو إعطاء تأشير للكلمة و ليس التلوين لأن التلوين يتم ب css .

سأكون سعيدا بترك تعليقك بترك أو تشجيعك أو إنتقادك و شكرا على المتابعة.