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

إنشاء المظاهر الديناميكية ب 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.

الدرس35 : إضافة الحدود border عن طريق css

إضافة الحدود 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;
}

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

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

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

الدرس34 : إضافة خاصية الشفافية للعناصر ب css

شفافية 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);
}

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

p{
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);
}

يمكنك تجربتها مرات عديدة حثى تفهمها جيدا، ننتظر الرد عليك.

الدرس33 : تطبيق صورة الخلفية في css

صورة الخلفية:

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

- no-repeat : الصورة ستظهر مرة واحدة.

- repeat-x : الصورة تكرر أفقيا.

- repeat-y : الصورة تكرر عموديا .

- repeat : افتراضي الصورة تكرر في جميع الإتجاهات.

body
{
background-image: url("lune.png");
background-repeat: no-repeat;
}

background-position هده تعمل فقط مع no-repeat نعتيها قيمتان يطرجمان إنطلاقا من أعلى يسار الصفحة.

background-position: 30px 50px;

وتعني 30px إلى اليسار و 50px إلى الأعلى.

ويمكن أيضا بالأسماء الإنجليزية كأن تكتب:

background-position: top right;

وبهده الطريقة متلا سأضيف قمرا لموقعي في الخلفية:

body
{
background-image: url("lune.png");
background-attachment: fixed;
background-repeat: no-repeat; 
background-position: top right; 
}

الجمع بين خصائص background :

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

body

{

background: url("soleil.png") fixed no-repeat top right;

}

وهذ جميل لتقليص حجم صفحة css .

أكتر من صورة في الخلفية css :

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

body
{
background: url("lune.png") fixed no-repeat top right,
url("image.png") fixed;
}

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

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

الدرس32 : تغيير لون الخلفية في css

لتغيير لون خلفية موقع ما نستعمل 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;
}

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

الدرس31 : تغيير لون الخط في css

 لون الخط css :

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

إدخال إسم اللون

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

الآن سأضع العنوان في اللون الأحمر :

h1
{
color: red;
}

وهذه النتيجة بعد إضافة css :

اللون سداسي النطام css :

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

سداسي النطام متل هذا #F3F6FE . يتكون من أرقام بين 0 و 9 وحروف بين A وF و يسبق ب (#) .

الرقمين الأولين يمتلان نسبة اللون الأحمر أم الثالث و الرابع يمتلان نسبة اللون الأخضر و الأخيرين اللون الأزرق.

و بطبيعة الحال لن تحفظ كل هذه الأكواد لكن يوجد برامج توفرها كالفوتوشوب. أو مواقع يمكنك البحت عنها في جوجل بكتابة code color .

p{
color: #E3E3E3;
}

طريقة RGB :

هي إختصار ل Red-Green-Blue . يمكنك الدخول لبرنامج dessin لمعرفة النسبة التي يجب إضافتها من كل لون للحصول على لونك المفضل.

p{
color: rgb(205,96,204);
}

فالرقم الأول يمتل نسبة اللون الأحمر تم الأخضر تم الأزرق. هذه النسب تتراوح بين 0 و255 .

ننتظر إستفساراتكم و تعليقاتكم و شكرا على المتابعة.

الدرس30 : عمل float ب css3

 عمل 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" class="imagefloat" alt="Image float"/>

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى،

"clear">حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى.

code css :

.imagefloat
{
float: left;
}
.clear
{
clear: both;
}

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

الدرس29 : عمل محاذاة للنصوص بلغة css

المحاذاة css :

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

لتطبيقها نستعمل خاصية text-align ونظيف المحاذاة المطلوب.

left : النص محادي لليسار.

center :النص في الوسط.

right : النص محادي لليمين.

justify :النص يستغل كل السطر لا يترك أي فراغات.

وهذا المتال يوضح الأمر جيدا :

h1
{
text-align: center;
}
p{
text-align: justify;
}
.signature
{
text-align: right;
}

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

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

الدرس28 : إضافة Italique, gras, souligné لنص بلغة css

كما قلت لكم سابقا لا تتدخل 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: الخط عادي.

وهذا متال عن إستعمال text-decoration : 

h1
{
text-decoration: blink;
}
.تحته خط
{
text-decoration: underline;
}
.يتوسطه خط
{
text-decoration: line-through;
}
.السطر أعلاه
{
text-decoration: overline;
}

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

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

الدرس27 : تغيير الخط باستخدام خط مخصص font-face@ الجزء2

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

@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 و نفس الإسم وضعناه في css الخاص ب

كي يتم التعديل عليه.

بعد رفع الضغط على  الملف الدي حملناه يجب وضع الخط في نفس ملف css .

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

الدرس26 : تغيير الخط باستخدام خط مخصص font-face@ الجزء1

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

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