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

الدرس21 : التعليقات في لغة css

إضافة تعليقات في css3 :

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

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

/*
style.css
---------
ANAS MORAHHIB
*/
p{
color: blue; /*لون خط النصوص*/
}

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

و السلام عليكم.

الدرس20 : كيف تكتب أكواد css3

كتابة أكواد css3 :

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

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

وسم
{
قيمتها : سمة ;
}

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

h1{
color: blue;
}

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

كما توضح الصورة:

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

في الدرس القادم سنتعلم كيف تضيف هذه الأكواد على أكتر من وسم في آن واحد و الآن أنتظر تعليقاتكم والسلام عليكم و رحمة الله تعالى و بركاته.

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

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

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

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

الدرس18 : كلام عن لغة css3

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

(Cascading Style Sheets)  وهو إختصار الكلمة و رقم ثلاثة يعني النسخة الثالثة. في هده الدورة سنحاول دراسة css3 من جميع النواحي حثى نصبح إنشاء الله قادرين على التعامل معها بكل سهولة. و كنبدة عنه فهو الدي يسمح لنا بعمل الخلفيات و الألوان و حجم و نوع الخطوط و إضافة الإطارات و أيضا هو الدي يضع أي شيء في المكان الدي تريده على الصفحة و العديد من الأشياء الجميلة الأخرى.

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

و إنشاء الله الدرس القادم سيكون أول درس حول css3 . ننتظر تعليقاتكم و السلام عليكم و رحمة الله.

الدرس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 شكرا على المتابعة و لأي سؤال لا تتردد في وضع تعليقك.

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

 إنشاء روابط html5 :

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

ويوجد نوع آخر من الروابط وهو الدي يكون نحو موقع آخر غير موقعنا الإلكتروني.

والذي يتسائل عن ماهو الرابط، فمثلا رابط مدونة الخبير هو :( http://alkhabire.blogspot.com) .

روابط html5 الموجهة لموقع آخر:

 لكل من لم يقرأ الدرس الخامس عليه العودة له من هنا لأننا سنشتغل به.

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

href="http://alkhabire.blogspot.com/"> مدونة الخبير

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

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

تريد تعلم صنع المواقع ماعليك سوى الدخول ل href="http://alkhabire.blogspot.com"> مدونة الخبير  وستتعلم دالك

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

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

تنبيه: لو كان الرابط يحتوي على هذا الرمز « & » فعليك تغييره بهذا الرمز « & »، وهذا ضروري في لغة html5 .

الروابط التي تجمع بين صفحات html5 :

صفحتا html5 على نفس الملف:

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

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

بما أنهما يوجدان في نفس الملف فلعمل رابط من الصفحة الأولى إلى الصفحة التانية أو العكس. سنطبق الكود السابق لكن في مكان القيمة نكتب إسم الصفحة هكذا: <"a href="page2.html> .

فمتلا ضع عنوانا في الصفحة التانية كهذا:  

الصفحة التانية  

.

ثم أدرج النص التالي في الصفحة الأولى:

 يمكنك زيارة الصفحة href="page2.html"> الصفحة التانية  و شكرا

فبعد الدخول لصفحة 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 .

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

الدرس9 : العناوين في لغة html5

مرحبا بجميع زوار و متابعي مدونة الخبير التعليمية.

في درس اليوم سنتعلم التلاعب بالعناوين في لغة . يعني كيف نحدد العنوان الرئيسي و الثانوي...

العناوين في لغة html5

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

و توجد وسوم تسمح لك بتحديد درجة أهمية داك العنوان :

-

: تعني العنوان مهم جدا و تستعمل عموما كعنوان الموقع الرسمي.

-

: تعني العنوان مهم.

- 

: تعني أن العنوان أقل أهمية.

- 

:  تعني أن العنوان قليل وقليل الأهمية.

- 

: عنوان غير مهم.

- 

: عنوان منعدم الأهمية.

تنبيه!!! بالنسبة للوسم الذي سبق و رأيناه، فهذا هو العنوان الذي يظهر في عارضة المتصفح كما شرحنا في الدروس السابقة لل html5 . 

أن تستعمل كل هذه الدرجات الستة من عناوين html5 ليس ضروري أنا خصيصا أستعمل من ثلاث إلى أربع درجات.

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

و هذا مثال بسيط لكيفية إدراج هذه الوسوم على صفحة html5 :

       
              
               charset="utf-8" />
              
        

         
               
       
 html5الخبير و 
                
مرحبا بك في موقع الخبير
              
دور تعليمية
         
سنتعلم معا عدة أشياء تقنية 
سنتعلم معا عدة أشياء تقنية
        

بعد كتابتك كود html5 و حفظك للصفحة، أدخل لها عبر أي متصفح ستجدها هكذا: 

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