. . .html- color- codes . . . كود الالوان



HTML color codes
HTML color codes


كود  الالوان

 color- codes  HTML   
html color
  
موقع لا غنى للمطورين و للذين لديهم اهتمام بالالوان عنه .....
هو موقع   html-color-codes 
الموقع به 6 تبويبات مهمه و مفيده  . . . .

اولا : ادوات الالوان      color tools    
يتضمن اداتين عظيمتين هما . .
HTML Color Chart                       
خريطه الالوان   يمكنك الحصول على رموز  HTML   للألوان الأساسيه


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

 منتقى الالوان      
HTML Color Picker   
                 
قم بتحريك شريط التمرير العمودي لاختيار اللون ثم انقر في مربع اللون على اليسار للحصول على رمز اللون HTML لالمطلوب يلقي اللون.

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


ثانيا:  التبويب الثانى هواداه   للحصول على الالوان من الصور  

Get Colors from Image
مع سحر  HTML5
يمكنك الحصول على الألوان من أي صورة مع هذه الأداة بسيطة على الانترنت.

ثالثا:  التبويب الثالث أسماء الألوان
Color Names

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


رابعاا:  التبويب الرابع أسماء الوان امنه للوب
Web Safe Colors  
                  
                     
لوحه الوان تتكون من 216 لون . . الوان امنه للوب  . . اى انها تظهر هى نفسهاعلى  جميع المتصفحات

خامسا :  التبويب الخامس محرر HTML  على الانترنت مجانا
Free Online HTML Editor  
                                   
هذا محرر  HTML على الانترنت يمكن أن يساعدك على جعل محتوى الموقع بلغة
HTML دون معرفة أي من HTM

 موقع لا غنى للمطورين عنه

سادسا :  التبويب السادس  افضل   Software على الانترنت و مجانا


مجموعه ممتازه من البرامج المجانيه التى لا يستغنى عنها مطورو الويب مثل 
Notepad++ محرر نصوص

 هو محررنصوص مفتوح  المصدر مجاني و تدعم عدة لغات.و اضافات كبيرة مثل NppFTP وCompare يجعلها مفيدة حقا
ويمكن تحميل هذا البرنامج من هنا


ايضا برنامج  FileZilla

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







وغير ذلك كثير من البرامج الخدميه التى لها فائده عظيمه للمبرمين و للمطورين  .. .وكير من الخدمات  اون لاين مثل تحسين الصوره  وتحيين ترجمه جافا سكريب وغيرها

HTML color codes
في ليست هناك تعليقات:

مقدمه فى . . . Introduction to CSS


في الجزء الاول    HTML & CSS Tutorial - Part 1
وفى الجزء الثانى  نشر الموقع على الانترنت .... HTML & CSS Tutorial - Part 2
أنشأنا ونشرنا أول موقع لنا .نعم ان الموقع  الذى انشأناه يحتوي على محتوى قليل جدا ولا يبدو حتى الآن جذاب بشكل خاص
نحن نريد تغيير هذا الآن. في هذا الجزء سوف تتعلم كيف يمكننا استخدام  ال  css 

Structure and Style   البناء او الهيكل .  و النمط او الشكل


فقط للتذكير: يصف  HTML  هيكل صفحه الوب . . .  فى حين يحدد   CSS   مظهر الصفحه

فصل هيكل الصفحه اى ملف HTML  عن صفحه   css  هو أسلوب فيه العديد من المزايا، كما سنرى.

انها ليست إلزامية، و لكن   هو الأفضل أن تكتب  HTML  و   CSS  في ملفات منفصلة.
 مع العلم انه يمكن تضمين تعليمات  CSS  فى  أى ملف  HTML  بثلاث طرق
الطريقة الأولى: 
انشاء ملف  CSS  منفصل خارجي  ومن خلال هذا ىيم  تطبيق تعليمات ملف CSS على عدة صفحات في الموقع، كما يمكنك تغيير مظهر ويب بأكمله عن طريق تغيير ملف واحد، يتم ذلك من خلال ربط  ملف  CSS  في الصفحات من خلال tag اسمه <link> يوضع في جزء الـ head
ويمكنك تحرير ملف الـ CSS الخارجي بواسطة أي محرر نصوص على أن تقوم بإعطاءه الإمتداد " css. " 
  <link rel="stylesheet" href="main.css">
حيث ان  main.css هو اسم ملف css الذى نريد ربطه بالصفحه
لاحظ أن:ملف الـ CSS يجب ألا يحتوي على أي وسم من وسوم الـ HTML .
هذه الطريقه تسمى  External Style Sheet 
الطريقة الثانية:
 يمكنك استخدام خصائص الـ css من خلال صفحة الـ html بوضع الكود في الـ head من خلال العلامة <style> 
مثال على ذلك 


وتسمى النمط   الداخلى  Internal Style Sheet  و هي تعني التضمين          " الإدراج " داخل رأس الصفحة ، و يجب عليك استخدام النمط الداخلي في حالة تطبيقه على مستند وحيد ، حيث تقوم بتحديد النمط في رأس الصفحة " head " عن طريق استخدام الوسم <style> 

 الطريقة الثالثة: 
وهي طريقة تضمين خصائص الـ css من خلال عنصر الـ html مباشرة.
  وتسمى النمط   الخطى Inline Styles

في هذه الطريقة يتم إدراج أوامر CSS داخل أكواد HTML مباشرة ، فعلى سبيل المثال يمكنك أن تختار فقرة ما أو سطر ما داخل صفحة HTML لتطبق عليها التنسيق ، و تستخدم هذه الطريقة لإدراج تنسيق خاص لا يتكرر كثيراً أو لتغيير التنسيق المدرج في صفحة الأنماط الخارجية ، و سوف يتم استخدام كلمة style كمنتقى يرسل المتغير و القيمة مع الوسم المراد تنسيقه .
مثال على ذلك 
<p style="color: red;"> MODOUNTIY </p>
في المثال السابق قمنا بإنشاء فقرة عن طريق الأمر p داخل ملف HTML ، و تم إدراج خاصية style و تم تحديد المتغير color و الذي يحدد اللون ، ثم تم اختيار القيمة red و هي تعني الأحمر، و بذلك تظهر تلك الفقرة ملونة باللون الأحمر
***
ملحوظه
تعدد الأنماط:
و السؤال الذي يتبادر إلى الذهن الآن ماذا يحدث لو تم استخدام أكثر من نمط داخل الموقع الواحد كأن يتم إنشاء ملف CSS مستقل و يتم تضمينه داخل الصفحة ، و في ذات الوقت يتم إدارج نمط CSS embedded style sheet ضمن رأس الصفحة ، و كذلك أوامر CSS داخل وسم HTML بطريقة inline . في هذه الحالة سيتم إعطاء أولوية لتنفيذ الكود inline أولاً ، ثم يليه يتم تطبيق embedded style sheet أي أوامر css ضمن رأس الصفحة ، ثم سيطبق أوامر css في الملف الخارجي ، هذه هي أولوية التنفيذ، يجب أن تتذكرها دائماً . .  
ملف CSS هو ملف نصي عادي مع الامتداد  CSS  وسوف نستخدم طريقه انشاء ملف خارجى External Style Sheet
نقوم بإنشاء ملف جديد في مجلد .Portfolio   باسم  main.css ملف نصى  باستخدام اى محرر نصوص . , لاحظ الامتداد css
الآن أفتح  ملف   index.html
نقوم بأضافه رابط لملف  CSS  فى القسم  head
 رابط لملف CSS
< link rel="stylesheet" href="main.css" >
مع ملاحظه ان الخاصيه  href  يجب ان تحتوى على المسار الصحيح للملف CSS
يكون ملف   ndex.html  كالاتى :



 **************
قواعد   CSS
قمنا بعمل ملف  CSS و ربطناه بملف ال   html الر ئيسى  
ولكن لايزال ملف CSS  فارغ ... الان نبد بكتابه اول تعليمات  واول سطور CSS
 على سبيل المثال، سوف نقوم بتغيير لون الخلفية ولون النص من العنوان الثاني. كتابة الأسطر التالية في ملف CSS الخاص بنا
main.css



والنتيجه تكون كالاتى :


لقد قمنا بتغييرلون الخلفيه  للعنوان الثانى <h2> و ذلك باستخدام تعليمات css     
لتتّضح الأمور أكثر سنجرب كتابة كود فعلي لنرى كيف تكون النتيجة
{ ;  P  { font: arial 
هذا الكود سيجعل نوع الخط الموجود في أي وسم <p> في الصفحة يتحول إلى نوع Arial، ويمكننا كتابة أكثر من تنسيق ولكن مع نهاية كل تنسيق لابد من كتابة فاصلة منقوطة “;” وتسمى Semicolon، مع العلم أنه يمكنك ألا تكتبها إذا كنت تكتب تنسيقًا واحدًا، ولكن لابد من كتابتها إذا كنت تكتب أكثر من تنسيق، والأفضل كتابتها دائمًا حتى تعتاد عليها ولا تنساها


************
الالوان فى   CSS
يتم إنشاء الألوان على الشاشة من خلال مزيج من أجزاء مختلفة من الأحمر والأخضر والأزرق (RGB). ويمكن التعبير عن مزيج من الأحمر والأخضر والأزرق في CSS بطريقتين: كقيم RGB أو كقيم ستعشرية  و هو الأكثر شيوعا.

وغالبا ما تحددة الألوان في CSS باحد هذه الطرق :
الطريقه الاولى : اسم اللون صحيح - مثل " red "
الطريقه الثانيه : قيمة RGB -  مزيج من الأحمر والأخضر والأزرق ـ مثل "  ( RGB (255، 0، 0 "
الطريقه الثالثه : قيمة HEX  اى القيمه العدديه بالعدد الست عشرى - مثل " FF0000 # "

دعونا ننظر في مثالنا مع لون الخلفية زرقاء و رمادية :
وضعنا اللون كقيمه ست عشريه :  "  607d8b  # "
فى النظام الست عشرى يجب ان نلاحظ ان  أول رقمين تمثل اللون الاحمر، والحرفين المتوسطة تمثل اللون الاخضر، وآخر حرفين تمثل اللون الازرق.
كما يمكن ان نضعه كقيمه (  RGB   )   مثل :   للون الاحمر

(background-color:rgb(255,0,0  
العمل مع رموز اللون
التعبير عن الألوان  بالقيم الست عشرية تحظى بشعبية كبيرة لأنه مع ذلك يمكن ان تحصل على عدد ضخم من تركيبات الألوان (أكثر من 16.7 مليون). ومع ذلك، فإنه من الصعب إلى حد ما للعمل مع هذا النظام  . في معظم الحالات، سوف تحتاج إلى منتقي الألوان   color picker.
اذا كنت تستخدم محرر نصوص مثل  Brackets editor به منتقى الوان مدمج  بالمحرر هذا يجعل الامر سهل . . واما اذا كنت  محررنصوص عادى ـ  مثلى ـ حيث انى استخدم 
فانه يوجد كثير من منتقى الالوان على الشبكه و يمكنك أن تتقل إلى العديد من محددات اللون على الانترنت مثل :
ـ  
                      او غيرها
************
لوحات اللون على الانترنت  Online Color Palettes
في معظم الحالات سوف تحتاج إلى أكثر من لون واحد فقط لموقع الويب الخاص بك. عليك ان تحصل على لوحة الألوان. مع مجرد لون منتقى الوان بسيط من الصعب جدا لاختيار الألوان التي تعمل معا بشكل جيد.

هناك العديد من الأدوات التي تجعل العثور على لوحة الألوان أسهل. وفيما يلي بعض الأمثلة:
 لوحات الألوان  محددة مسبقا
  • Colour Lovers
  • Design Seeds
  • Google Color Palette






في ليست هناك تعليقات:

برنامج Wise Force Deleter

برنامج Wise Force Deleter

       
modounty


هناك العديد من البرامج التي بعد ان تقوم بتنصيبها على  نظام تشغيل الويندوز الخاص بك ، تجد صعوبة فيما بعد عندما ترغب في إزالتها ، حيث أن أغلب هذه البرامج التي لا تستطيع إزالتها تكون إما لإحتوائها على برمجيات خبيثة أو لكون نظام تشغيل الويندوز يعاني من خلل مع أحد ملفات البرنامج ، لهذا في هذه التدوينة اليوم على مدونة     modounty   سوف نتعرف على كيفية حذف البرامج المستعصية و إزالتها بشكل نهائي من الحاسوب بسهولة جدا  و  رغما عن أنفها و ذلك عبر إستخدام برنامج   المجاني .برنامج     Wise Force Deleter    هو عبارة عن أداة مجانية تتيح لمستخدمي نظام تشغيل الويندوز إمكانية التخلص من اي برنامج بسهولة جدا و بطريقة اسهل مما تتخيل ، حيث يعمل برنامج    Wise Force Deleter   على إضافة نفسه إلى زر الفأرة الأيمن و من أجل حذف أي برنامج بشكل نهائي و إزالته من على حاسوبك فإن كل ما عليك القيام به هو الذهاب إلى أيقونة البرنامج على حاسوبك ثم النقر عليها بزر الفأرة الأيمن و إختيار خيار Force Deleteالتي سوف تجدها بعد ان تقوم بتتبيث برنامج  Wise Force Deleter على الحاسوب الخاص بك  
MODOUNTIY

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

 Wise Force Deleter

في ليست هناك تعليقات:

نشر الموقع على الانترنت .... HTML & CSS Tutorial - Part 2



HTML & CSS Tutorial - Part 2: Publishing Your Website

نشر الموقع على الانترنت
في التدونه السابقه HTML & CSS Tutorial - Part 1
كنا قد أنشأنا أول موقع ويب خاص بنا. وسيكون من المؤسف أن هذا الموقع يبقى فقط على جهاز الكمبيوتر الخاص بنا ولايمكن أبدا أن يراه أي شخص آخر. ولذلك يجب ان نتعلم كيفية نشر موقعنا على الانترنت مباشرة ..
مع ملاحظة: لن يكون هناك الكثير من الزوار على موقع الويب الخاص بنا  من البداية 
المشروع
المشروع الذى بداناه  هو محفظة الويب الشخصية.
 وتتضمن هذه المحفظة صفحة البداية، بلوق، صفحة لاظهار مشاريع الويب الخاص بنا في المستقبل، وصفحة الاتصال
وقد اشأنا فولدر portfolio وانجزنا اول ملف HTML باسم  index.html

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


الاشتراك على    BitBalloon

انقر على اشترك ثم اختر تسجيل الدخول
ثم أدخل عنوان بريدك الإلكتروني وكلمة المرو ر 
وبمجرد دخولك إلى ، يمكنك ببساطة سحب مجلد الويب الخاص بك  (مجلد المحفظة الخاصة بنا )  في المكان المخصص

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

لتقصير URL الخاص بنا يمكننا النقر على اسم تحرير وأدخل اسم عشوائية 


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

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

اسم النطاق الخاص بك
وسيأتي الوقت عندما سترغب اسم النطاق الخاص بك الخاصة جدا مثل
 http://www.my-super-website.com
في بعض الحالات، يمكنك تسجيل اسم نطاق  في مزود استضافة الخاص بك على سبيل المثال في   BitBalloon
خلاف ذلك، هناك العديد من مواقع الاستضافة وخدمات التسجيل ... الامر يستحق المقارنه    . 
ماذا بعد؟
في الجزء القادم سوف نعمل على ترقية موقعنا مع بعض التصاميم 
هذاالمقال مترجم عن مقال

Marco Jakob





في ليست هناك تعليقات:

HTML & CSS Tutorial - Part 1



Modountiy
 تحدثنا فى تدوينه سابقه عن البرمجه بصفه عامه وعن برمجه الوب بصفه خاصه و البدايه بتعلم لغه  
                           jQuery            javascript          CSS              HTML
 وقد قدمنا نصحيه لاخواننا الراغبين فى تعلم البرمجه وتطوير انفسهم فى هذا المجال وهى اهميه الاعتماد على المواقع باللغه الانجليزيه...... حيث ان المواقع العربيه التى وجدتها فقيره جدا وهى تكرار ممل ومعلومات عامه ..... اليك مثال هو اختصار لما وجدته فى بعض المواقع العربيه .....
 يبدا بتعريف عام باللغه ثم  يتم ذكر الادوات التى نحتاجها و هى موجوده فى جميع اجهزه الكمبيوتر و هى ......
ـــ  محرر اكواد  مثل نوتباد notepad الموجود فى جميع الاجهزه  وندوز .
ـــ  برنامج تصفح .
.........
ويتم كتابه اول برنامج   " اهلا ايها العالم "  وهذا هو الكود الخاص به او يكون قريب من هذا..

 <!DOCTYPE html>
<html>
  <head>
       <title> أ ول صفحه </title>
  </head>
  <body>
    <p>اهلا ايها العالم </p>
  </body>
</html>

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

هذا الوسم يحدد نوع المستند
<! DOCTYPE>
وسم بداية ملف الاتش تى ام ال   لابد ان تبدا به اى صفحة      Html
<html>
هو وسم خاص برأس الصفحة ويحتوى على عنوان الموقع الذى يظهر فى تبويب الموقع
<head>
 هذا الوسم خاص بعنوان الموقع والذى يظهر فى التبويب بالمتصفح ويوضع هذا الوسم داخل الوسم   <  head > .... <  head/ >
<title>
نهايه الوسم
</title>
نهايه الوسم
</head>
هذاا الوسم يحتوى على جميع محتويات الموقع لديك كما ذكرنا ان الموقع يتكون من راس وجسم لذ فهذا الوسم هو جسم الموقع وبه كل محتوياته
<body>
نهايه الوسم
</body>
نهايه الصفحه
</html>

 ولكن هذا مثال مستهلك لا يفيد المتعلم فى شئ ... 
ولكنى فى هذه التدوينه قمت بشئ ارى انه اكثر افاده ........................... ذهبت لاحد المواقع وهو موقع   code.makery
Modountiy

هذا الموقع به من الدروس فى البرمجه وساقوم بترجمه درس فى كل تدوينه واحاول قدر جهدى الا تكون الترجمه حرفيه بل بالمعنى وكذلك ساضع رابط الدرس فى اول الترجمه حتى يمكن الرجوع للاصل وذلك لزياده الافاده.....
...الدرس الاول
HTML & CSS Tutorial - Part 1: Your First Website
رابط الدرس     HTML & CSS Tutorial - Part 1: Your                                     
======
دعونا نبدا لانشاء اول صفحه على النت
الادوات المطلوبه ..
اولا : محرر نصوص    Editor  
لإنشاء صفحات الويب، فإن محرر النص العادي مثل نوتباد  notepad لنظام ويندوز  يكون كافيا. ولكن هناك برامج  متطوره يمكن  أن تبسط عملك بشكل كبير  .
وينصح كاتب الدرس باستخدام  محرر نصوص حديث و يقترح   كاتب الدروس محرر نصوص براكتس  BracketS   وهو محرر مجانى من شركه ادوبى  adobe  ىمكن تنزيله من   هنا

يمكنك أن تستخدم أي محرّر نصوص  تريده، ولكنّني في هذه الدرس سأُشير أحيانًا إلى بعض وظائف تطبيق براكتس  Brackets 
ثانيا : المتصفح     browser
   يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية مثل  
Internet Explorer, Firefox, Chrome and Safari
وينصح كاتب الدرس بالمتصفح كروم لأغراض التطوير والبرمجه وىملك كروم أدوات مفيدة للغاية لمطوّر الويب والتي سيستخدمها على نحو متكرّر. بالإضافة إلى ذلك، يدعم المحرر براكتس
-------------
بدايه العمل ...... انشاء مستند  اتش تى ام ال
Creating an HTML Document
معنا محرر نصوص و مستعرض .... نبدا الان بأنشاء اول صفحه لنا لموقعنا على النت.
1- انشئ مجلد فى جهازك للمشروع  و سمه بأى اسم  وقد تم تسميته  فى هذا المشروع                                          Portfolio                                                                              
2ـ افتح محرر النصوص  براكتس  او اى محرر نصوص اخر
Modountiy

3- اخترالامر  open Folder   من القائمه  File... ثم ... open   لفتح المجلد الذى انشأناه سابقا ثم نفتحه ..
4- كليك يمين تحت الفولدر ثم اختار ملف جديد و سميه أى اسم  و تم تسميته index.html               
Modountiy
                                                              
                                                                               
5- الان لدينا ملف نصى فارغ اسمه
                                                                    index.html
                    

Viewing and Refreshing

العرض والتحديث


الان نملاء المستند بالمحتوى .. اكتب الاسطر الاتيه فى المستند


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

تهانينا، لقد أنشأت موقعك  الأوّل

HTML Elements

 عنا صر    HTML                                                                                              

الوسوم     Tags                              
فى المثال السابق رأينا رموز وكلمات مكتوبه ضمن رمزى <  >  هذه الرموز تسمى وسوم  ....
تتألف عناصر    html   عادةً ولكن ليس دائما من وسمين، وسم للفتح ووسم للإغلاق .....  في مثالنا السابق كان  < html  >  هو وسم للفتح، أمّا    < html/  >   هو وسم للإغلاق حيث نلاحظ وجود سلاش شرطه مائله قبل اسم الوسم. 
      ي نص موجود بين وسمي الفتح والإغلاق يُعتبر محتوى لعنصرهذا. فمثلاً بالنسبة للوسمين   < html  >  و < html/  >  نُخبر متصفّح الويب عن بداية ونهاية مستند صفحة الويب الخاصة بنا

أمّا الوسم الثاني الذي صادفناه هو  الوسم <body>   يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح   <body>  والإغلاق  <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسية من نافذة المتصفّح

السمات

 Attributes   

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

يحتوى على سمه ولها قيمه والمتصفح يعرف ذلك ويعرض الرابط بالاعلى  <a>  العنصر
Modountiy


Basic Structure of an HTML Page

التركيبة الأساسية لصفحةالاتش تى ام ال

لقد رأينا  عنصرين من عناصر       وهما  <html>   <body>   ولكن بنية صفحة  html  تتكوّن عادةً من المزيد من العناصر.... استبدل محتويات الملف                 بالكود الاتى    


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h1>Web Portfolio of Marco</h1>
    <p>Write anything you want to tell the world.</p>
  </body>
</html>

Explanations                                                                                                        الشرح   


ـــ دائما ضع الوسم        <!DOCTYPE html>      فهذا يخبر المتصفح عن نوع المستند
ــ يشير الوسم       <html>   الى بدايه المستند والوسم      </html/>   الى نهايته
ـــ   يحتوي العنصر    <head> على معلومات إضافية حول الصفحة. وعلى النقيض من  العنصر  < body> لا تظهر هذه المعلومات في الصفحه الرئيسية من المتصفح
ـ ضمن العنصر <meta>  يجب أن يكون هناك مؤشرا حول الترميز   إذا لم تقم بتحديد الترميز بعض الأحرف الخاصة قد لا يتم عرض بشكل صحيح. و قد تبين أن هذا العنصر  لا يوجد لديه علامة إغلاق. هناك عدد قليل من العناصر من دون علامات إغلاق،و هي استثناء

 ــ العنصر التالي      <title>.....</title>   يتم عرض العنوان في شريط العنوان في أعلى نافذة المتصفح
Modountiy

ــ يتم عرض كل شيء داخل العنصر  <body>  في المنطقة الرئيسية من المتصفح
      تحدد العنوان الرئيسي. يمكن إنشاء العناوين الفرعية مع     ...<h6>....<h2>.. < h1>   
 ــ النص بين      <p>و  </p>   هو فقره برجراف
مع هذه العناصر الأساسية   ...   نحن مستعدون لتقديم موقعنا على الانترنت إلى مستوى جديد ولكن  يجب ان  نضيف صورة حتى تكون  الصفحة الرئيسية لموقعنا أكثر إثارة للاهتمام

Inserting an Image

أضافه صوره
لإدراج صورة نستخدم عنصر       <IMG>      والمثال التالي إدراج صورة             

<img src="marco.jpg" alt="Picture of me">
Modountiy

عنصر ..<IMG> ..   لديها وسم افتتاح فقط و بدون  وسم الإغلاق  . وهو يحتوي على  سمه  ..Src.  وسمة ....alt. تحدد سمة  .src.. عنوان .URLs...، وهذا هو الموقع واسم الملف للصورة. السمة ...alt. هو "نص بديل"، الذي يصف مضمون الصورة. ويستخدم هذا النص عن طريق محركات البحث، وذلك فى حاله لسبب ما لم تعرض الصورة، وكذلك على سبيل المثال على قارئ الشاشة للمكفوفين

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

هذا هو الكود للملف       قد اكتمل
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Portfolio of Marco</title>
  </head>
  <body>
    <h1>Web Portfolio of Marco</h1>
 
    <h2>Welcome!</h2>
 
    <p>Please have a look around. In the blog section I document</p>
 my experiences in programming
  You may also look at my web projects. Have Fun.</p>

    <p>Thanks for stopping by.</p>


 


    <img src=" http://f.top4top.net/p_338clm551.png">


 


    <p>Marco :-)</p>


  </body>


</html>





لاحظ رابط الصوره حيث اننا استخد منا  الصوره بعد رفعها على احد مراكز رفع الصور حتى ىمكن استخدامها فى اى مكان ......



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





Modountiy







في الجزء التالي سوف تتعلم كيفية نشر موقع الويب الخاص بك على شبكة الانترنت. 

الجزء الثانى ......  هنا



هذاالمقال مترجم عن مقال





Marco Jakob






















في







ليست هناك تعليقات: