تعلم كيفية إنشاء موقع الويب الخاص بك مع 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.

طريقة دمج صفحات فيسبوك دون تغيير الإسم

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

 تغيير البروكسي:

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

دمج صفحات فيسبوك :

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

تم ندهب للصفحة المراد دمجها و نتبع الشرح ثم ندخل للإعدادات و نختار الخيار الأول كما تبين الصورة

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

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

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

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

الآن ننزل للأسفل للإختيار ما قبل الأخير و نتبع الشرح بالصور:

و من ثم:

 ثم:

 ثم:

و الآن نختار الرابط الدي نريده للصفحة:

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

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

الدرس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 .

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

ثيمات وندوز بدون تنصيب روعه themes for Windows

السلام عليكم ورحمه الله وبركاته 

بدون الاطاله عليكم 

اليكم اخواني واخواتي ثيمات للوندوز من ارقي الثيمات والميزه فيها انها تعمل بدون تثبيت مما يلا يؤثر علي سرعه الجهاز

كما انها تتميز باجمل الاشكال ويمكنك التعديل عليها 

3مجموعات  من ارقي الثيمات 

كل ما عليك الضغط علي الثيم فقط كليك

 التحميل 

للتحميل ارجو الملاحظه يجب عليك بالضغط علي كلمه SKIP او تخطي الاعلان فاعلا الصفحه للدخول لصفحه التحميل

مثال

لتحميل3 مجموعات  مديا فاير 

المجموعه1

المجموعه2

المجموعه3

تحياتي لاي استفسار

صفحتي علي الفيس

http://www.facebook.com/mrelhlawany1

تحميل وتثبيت وتفعيل وتعريب اخر اصدار 2013. SonyVegasPro12

السلام عليكم ورحمه الله

تحميل وتثبيت وتفعيل وتعريب اخر اصدار   2013. SonyVegasPro12

بدون اطاله لان وقتكم ثمين 

اليكم اخواني شرح تحميل وتثبيت وتفعيل الاصدار النهائي من البرنامج الرائع لمونتاج الصوت والفديو 

البرنامج غني عن التعريف

2013. SonyVegasPro12

اولا شرح التحميل والتثبيت والتفعيل بالفديو 

ثانيا روابط التحميل وارجو الملاحظه يجب الضغط علي كلمه تخطي الاعلان او SKIP فاعلا الصفحه للدخول لصفحه التحميل

مثال

التحميل 

الان لتحميل البرنامج من  الموقع الرسمي للبرنامج 

اضط هنا 

لتحميل التفعيل والتعريب مركز الخليج 

اضغط هنا 

ومن فايل سواب

اضغط هنا

صفحتي علي الفيس

http://www.facebook.com/mrelhlawany1

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

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

الدرس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" .
و بهدا نكون قد إنتهينا من درس اليوم نلتقي في الدرس القادم ننتظر تعليقاتكم و السلام عليكم.