التعليم والتعلم

header ads new

Hot

Post Top Ad

LightBlog

Post Top Ad

Your Ad Spot

الاثنين، 8 مايو 2023

أفضل ألعاب هواتف ايفون iPhone 2023

مايو 08, 2023

 إن ألعاب الهواتف الذكية قد أصبحت من أكثر التطبيقات شعبية في الوقت الحالي، وهذا يشمل العاب الـiPhone. في عام 2023، توجد العديد من الألعاب المثيرة والتي تستحق التجربة على هاتف iPhone الخاص بك. في هذا المقال، سنعرض لك أفضل ألعاب هواتف ايفون المتوفرة على الـApp Store.
اقرأ المزيد
مرسلة بواسطة في

الجمعة، 5 مايو 2023

افضل العاب الموبايل لعام 2023 اندرويد , iOS وbest mobile games for android

مايو 05, 2023

 هناك العديد من الالعاب الممتعة والشيقة التى يمكن تحميلها على هاتفك المحمول ، وفيما يلى نقدم لكم على موقع اون تايم نيوز لاخبار التكنولوجيا بعض هذة الالعاب التى يمكن تجربتها على الموبايل نتعرف الان على افضل العاب الموبايل لعام 2023 :
اقرأ المزيد
مرسلة بواسطة في

الأربعاء، 26 أبريل 2023

افضل برامج المونتاج المجانية لعام 2023: لتصميم وتعديل الفيديو ( بدون علامة مائية )

أبريل 26, 2023

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

الثلاثاء، 25 أبريل 2023

افضل الطابعات لعام 2023 : أحدث أنواع طابعات الليزر و inkjet في العالم

أبريل 25, 2023

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

افضل الطابعات لعام 2023 : أحدث أنواع طابعات الليزر و inkjet في العالم - OnTimeNews 2023 (ontime-news.com)
اقرأ المزيد
مرسلة بواسطة في

الاثنين، 24 أبريل 2023

افضل برنامج مضاد فيروسات للكمبيوتر لعام 2023 Best antivirus for PC انتى فيروس

أبريل 24, 2023

 مع التطور المستمر للتهديدات الأمنية والفيروسات التي تستهدف أجهزة الكمبيوتر، يصبح اختيار مضاد فيروسات موثوق وفعال أمرًا بالغ الأهمية لحماية جهازك وبياناتك الشخصية. في هذه المدونة، سنسلط الضوء على افضل برنامج مضاد فيروسات للكمبيوتر لعام 2023 Best antivirus for PC انتى فيروس .
اقرأ المزيد
مرسلة بواسطة في

الأحد، 23 أبريل 2023

أفضل برامج تحميل وتحديث التعريفات مجانا لعام 2023 للكمبيوتر واللاب توب

أبريل 23, 2023

 

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

الأربعاء، 11 يوليو 2018

تعريفات الالوان في لغة css

يوليو 11, 2018

الالوان هي روح صفحات الويب وهي ماتعطيه الحيوية والمرونة لشكل صفحة الويب

ومن خلال هذا الموضوع سنرى 

ماهي طريقة تحديد الالوان على الرغم من وجود العديد من الطرق حتى نقوم بذلك
المقصود بمعجم الالوان وبعض المفردات اليت ينحصر دورها في كيفية اختيار الالوان
ماهي الالوان الخلفية سواء لكامل الصفحة او جزء منها
دروس لغة css ,الصندوق ,Boxes ,برمجة , تصميم مواقع ,width ,height ,كود , code ,دورة ,تعلم ,تعليم ,صفحة ويب ,موقع الكترونى ,تكنولوجيا ,انترنت ,text ,حجم الخط font-size ,pixel ,تزيين الخط ,الروابط Links ,الخط ,كمبيوتر ,الشفافية Opacity

الالوان الامامية او forground colors

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

قيمة RGB

تعني مثلا كمية اللون الاحمر , الاخضر ثم الازرق المستخدم حتى نصنع ذلك اللون على سبيل المثال
 rgb(100,100,90)

اكواد HEX

والتي تتكون من عدد 6 اكواد والتي تقوم بتقديم كمية الاحمر والخضر والازرق في ذلك اللون ويكتب بعد ذلك رمز هاش
على سبيل المثال
#ee3e80

اسماء الالوان

ومن الجدير بالذكر انه يوجد 147 من الألوان التي ىتم تحديدها بالاسم على سبيل المثال
DarkCyan
/* إسم اللون */
h1 {
color: DarkCyan;}
/* hex كود */
h2 {
color: #ee3e80;}
/* rgb قيمة */
p {
color: rgb(100,100,90);}

الالوان الخلفية Background colors

من الممكن تحديد لون الخلفية كما تم في الاعلى وبنفس الطريقة
body {
background-color: rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p {
background-color: white;}

الشفافية Opacity

ومن الممكن ايضا جعل تلك الخلفية بشكل شفاف حسبما تريد ويكون ذلك باستخدام تلك الطريقة أو باستعمال RGB

p.one {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.two {
background-color: rgb(0,0,0);
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

الاثنين، 9 يوليو 2018

الهيكل من خلال دورة تصميم المواقع

يوليو 09, 2018

من الجدير بالذكر ان درسنا اليوم عن دورة تصميم المواقع بلغة html و css ولابد ان نعرف ان العناصر المطلوبة منا لتصميم اي صفحة ويب هي :
صفحة الويب ,html ,لغة برمجة , تعليم ,تعلم ,تصميم ,انشاء ,عناصر , وسوم , صفحة ,تقسيم ,دروس ,elements ,class ,inline,div ,دورة ,كورس ,css ,الهيكل ,layout ,FLOAT ,HTML

Block

وهي التي تظهر على السطر لوحدها وذلك مثل العناوين والفقرات.

Inline

وهو مايمكن لعناصر أخرى الظهور بجانبها وذلك مثل الصور.

Boxes

1وهي تلك العناصر التي يمكن من خلالها احتواء بعض العناصر الاخرى على سبيل المثال يمكن وضع صورة وفقرة نصية داخل نفس الصندوق

التحكم في توجيه العناصر


التوجيه العادي

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

التوجيه النسبي

لابد من استخدام تلك القاعدة التالية:
يمكن التحكم في نسبة العنصر والذي يوجد هذا العنصر بداخله 
على سبيل المثال فقرة P داخل صندوق div وذلك بعد اختيار القيم للتحكم للاعلى وكذلك اليمين او اليسار

p.example {
position: relative;
top: 10px;
left: 100px;}

التوجيه المطلق

  ومن خلال هذه القاعدة سيكون لديك السماح بتوجيه ذلك العنصر لاي مكان في الصفحة مما يعني ذلك عدم الاهتمام بالعناصر الاخرى الموجودة بل يمكن الذهاب لاي مكان بدون الاهتمام ببقية العناصر ومكانها
p.example {
position: absolute;
top: 10px;
left: 100px;} 


التوجيه الثابت

وهو بقاء الجزء ثابتا في مكانه وذلك حين النزول لاسفل الصفحة .
.example {
position: fixed
} 
التحكم في الداخل
وذلك حين استخدام القواعد الموجودة في الاعلى تقوم العناصر بالتداخل فيما بينها ولذلك وجب اختيار الاجزاء التي لديها كل الاولوية في الظهور اعلىة العنوان مما يعني ذلك انه سيظهر فوق نفس الفقرة  z-index

h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 100%;
background-color: #efefef;
z-index: 10;}
p {
position: relative;
top: 70px;
left: 70px;}

التعويم

يمكن استعمال تلك القاعدة المعروفة FLOAT ليتم توجيه تلك العناصر يمينا ويسارا 
ومن الجدير بالذكر ان تلك العناصر تأخذ نفس مكان العنصر المعوم
 
img{
float: right:
}

قاعدة Clear هي القاعدة التي يتم استخدامها لاخلاء العناصر حينما لاتريد احاطة العنصر المعوم بالعناصر الاخرى

من خلال هذه الصورة لن يتم القبول بوجود اي عنصر آخر على اليسار
img{
float: right:
clear: left;
}
 يمكنك استخدام التعويم كذلك لتقوم بانشاء مربعات بجانب بعضها البعض

يمكن استعمال قاعدة

كود css:

.column, .column2, .column3 {
width: 300px;
float: left;
margin: 10px;}

كود html:

<h1>The Evolution of the Bicycle</h1>
<div class="column1">
<h3>نص نص</h3> ...
</div>
<div class="column2">
<h3>نص نص</h3> ...
</div>
<div class="column3">
<h3>مص مص</h3> ...
</div>

ولكن مع ذلك لا ننصح باستخدام الطريقة السابقة لأن inline-block تعمل بشكل افضل

هيكل الصفحة باستخدام HTML5

 ولقد تم إضافة عناصر جديدة لتقوم بتنظيم محتوى الصفحة معHTML 5 ويذكر انها:
  • header  وهو ذلك الجزء العلوي والذي يحتوي في الاغلب على الشعار ويليه القائمة nav
  • main ويعد ذلك الجزء الرئيسي حيث يوجد به محتوى الصفحة
  • article وهي المواضيع
  • section وهو عبارة عن جزء من المحتوى
  • aside وهو ذلك الجزء الجانبي
  • footer ويعني الجزء السفلي
 
 
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

الجمعة، 6 يوليو 2018

درس مهم جدا عن النصوص في لغة css

يوليو 06, 2018

من خلال موضوعنا اليوم سوف نعرض اليكم النصوص text من خلال حجم الخط ونوعه وكذلك الخط العريض والمائل وأيضا الفراغ بين السطور والكلمات والحروف

دروس لغة css ,الصندوق ,Boxes ,برمجة , تصميم مواقع ,width ,height ,كود , code ,دورة ,تعلم ,تعليم ,صفحة ويب ,موقع الكترونى ,تكنولوجيا ,انترنت ,text ,حجم الخط font-size ,pixel ,تزيين الخط ,الروابط Links ,الخط ,كمبيوتر



كيفية تحديد نوع الخط وحجمه 

font-family هذه هي الخاصية التي يتم استخدامها ليتم تحديد نوع الخط المستخدم 
وهنا قد قمنا باختيار نوع الخط Arial ليتم تطبيقه على تلك الفقرة 
p{
font-family: Arial;
}
 هنا تم استخدام أكثر من خط:
حيث يقوم هنا المتصفح بتجربة خط Arial
وذلك حينما لا يكون الامر موجودا في حاسوب المستخدم و يقوم بالمرور للخط الثاني وهو Times New Roman
p{
font-family: Arial, Times New Roman;
}

حجم الخط font-size

من الجدير بالذكر انه يتم تحديد الخط بثلاث طرق وهي
pixel :
ويتم اختيار تلك القيمة بعدد يتبعه حروف pxكالتالي
h1{
font-size: 20px;
}

percentages : 
 يتم استخدام النسبة المئوية ومن الجدير بالذكر ان الخط العشوائي على المتصفح حينما لايتم تحديد الخط بنسبة 75 في المائة او مايعادل 12 px


h1{
font-size: 100%;
}

ومن الجدير بالذكر ان طريقة عمل النسبة المئوية مرتبطة بحجم الخط فمثلا لو افترضنا حجم الخط هو 16px
لو مثلا اخترنا نسبة 100 في المائة لكل العناوينh1 h2
سيكون الخط 16 px

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

استيراد الخطوط

 يتم توفر الخطوط التي يتم اختيبارها بشكل خاص في المتصفح الموجود بالحاسوب الخاص بك ولكن يمكنك تحميل خط غير موجود عن طريق قاعدة font-face@
والتي تكون عناصرها كالتالي


Src
format

الكود
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfive.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}

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

شكل النص 

يحتمل احدى القيمتين  Bold  أو Normal

p{
font-weight: bold;
}

p{
font-weight: normal;
}

تزيين الخط او Text Decoration

يمكنك اختيار تلك القيمة لهذه الخصوصية كما هو موضح :

p{
text-decoration: underline;
}
none
- لا يتم استخدام أي تزيين
underline
وهو عبارة عن اضافة خط تحت النص
overline
عبارة عن اضافة خط فوق النص
line-through
هو عبارة عن خط عبر النص

أسلوب النص Font-style

وهنا يحتمل ثلاث قيم Normal Italic Oblique كما هو موضح
p{
font-style: normal;
}

Line-height
p{
line-height: 1.5em;
}
اتجاه النص Text-align
وهو يحتمل ثلاث قيم عبارة عن
right بمعنى يمين
left بمعنى يسار 
center بمعنى وسط

p{
text-align: right;
}

المساحة بين الحروف والكلمات

Letter-spacing  و word-spacing
p{
letter-spacing: 1em;
word-spacing: 2em;
}

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

فراغ بداية الفقرة Text-indent

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

p{
text-indent: 10px;
}

الروابط Links

يمكنك التحكم في مظهر اوشكل الروابط عبر خيارات عدة وهي
link :
وهو عبارة عن التحكم في الروابط التي لم تقم بزيارتها بعد
visited:
وهي تلك الروابط التي يتم النقر عليها
hover:
ويحدث ذلك عنما يتم تمرير فأرة الحاسوب على رابط
focus:
ويكون عندما تحديد رابط أو استمارة ما
active:
ويحدث ذلك حينما تبقى في صفحة الرابط


روابط ذات صله


طريقة التحكم في الصور بلغة css
اهم دروس لغة css نظام الصندوق CSS Boxes


تعريفات الالوان في لغة css
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

Post Top Ad

Your Ad Spot
-رفع الصور-