recent
أخبار ساخنة

اساس تعلم البرمجة هي لغة html



اساس تعلم البرمجة هي لغة html

تعلم أساسيات HTML

هل تشعر بالضياع قليلاً عندما يذكر شخص ما هذه الأحرف الأربعة ، "HTML"؟ حسنًا ، من السهل جدًا التعلم والفهم. سنتناول كيفية إعداد صفحة بسيطة وكيفية تنسيق النص وإدراج الصور وإدراج الروابط. لنبدأ بشرح ما هو بالضبط.

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

عندما تزور صفحة ما ، ترى أعمدة وصورًا وروابط وألوانًا مختلفة. كل هذا كتبه شخص ما (أو استخدم أحدهم برنامجًا لكتابته). وهو مكتوب بلغة HTML. يتم إرسال جميع صفحات الويب إلى متصفحك (مثل "Internet Explorer" أو "Firefox") بتنسيق HTML.

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

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

  1.                            <html>             

  2.                <head>

  3.           <title> عنوان الموقع </ title>

  4.               </head>

  5.               <body>

  6.             </p>مرحبا<p>

  7.              </body>

  8.               </html>

  9.     / تسمي باك سلاش وتوضع عند غلق كل  تاج


اساس تعلم البرمجة هي لغة html

بداية فتح التاج واغلاقة

كل العلامات تبدأ وتنتهي. تبدو علامة البداية بالشكل <xxx> وتبدو علامة النهاية بالشكل </xxx>. هناك العديد من العلامات - <u> لكتابة نص تحته خط </u> للتسطير ، 

<b> للخط الغامق وما إلى ذلك.</b> يكون النص حجمة اكبر من العادي

إذا عدنا إلى مثال الحرف ، فعادة ما تكتب عنوانك والتاريخ وعنوانهم وما إلى ذلك في الجزء العلوي. حسنًا ، هذا ما تبدو عليه الأسطر الأربعة الأولى. السطر الأول ، <html> (ملاحظة ، في html ، لا يهم عادةً ما إذا كانت الأحرف كبيرة أو صغيرة. في بعض التقنيات مثل xhtml ، فإنها تفعل ذلك ، ولكن في الوقت الحالي لا يهم) فقط يعلن ذلك بين ذلك html "الوسم" كما هو معروف ، وعلامة html النهائية في السطر 9 (لاحظ الشرطة المائلة الخلفية ، تشير إلى أنها انتهت) تحتوي على html بداخلها.

تاج<title>هو عنوان الصفحة الذي  يظهر اعلي المتصفح

يحتوي الرأس على معلومات لا يعرضها متصفحك مباشرة. تحتوي العلامة <title> على عنوان الصفحة الذي يظهر أعلى المتصفح. تدخل أشياء أخرى مثل الكلمات الرئيسية في علامة الرأس الخاصة بك ، ولكن هذا أكثر تقدمًا قليلاً.

تاج<body> وهو الذي يضم كل ماهو داخل الصفحة من نصوص وصور وفيديو

يجب أن تضع كل المحتوى الخاص بك في علامة <body> التي تريد أن يراها المستخدم داخل الجزء الرئيسي من متصفحه.

</p>هنا مثال للنص<p>توضع بداخلها فقره من النصوص

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

<a>هنا يوضع رابط <a/>

 الرابط هو شيء يتيح لك النقر فوقه ، وسيطلب صفحة جديدة. يمكنك استخدام علامة الارتساء لهذا:<a href=http://www.techneek.co.uk>هنا نكتب اسم للرابط</a>

هل ترى كيف سيعمل ذلك؟ سيعرض الكلمات "انقر هنا" ، والتي ترتبط بـ http://www.techneek.co.uk. هذه العلامة ، <a ...> لها مثال على سمة لها - href.

تحتوي جميع السمات تقريبًا على = "". إنه يشبه القول ، لدي علامة ارتساء. أريد أن أجعلها مرتبطة بشيء ما. لإخباره بالارتباط بشيء ما ، تحتاج إلى وضع href = ”yourlink”. تذكر أنه عند إنهاء هذه العلامة (</a>) ، لست بحاجة إلى وضع href. دائمًا ما يكون فقط </a>.
 

<b/> غامق < b>

  </ i> مائل <i>

  </ u>  تسطير  <u> 

إنها حقًا بسيطة - ربما تعرفها بالفعل. <b> نص غامق </ b> للخط الغامق أو <u> تسطير </ u> أو <i> مائل </ i>

اساس تعلم البرمجة هي لغة html

<.img src = 'yourimagelink'> "نضع هنا رابط الصور"

الصور حقا بسيطة. إنه <img src = ”yourimagelink> فقط. لا تحتاج حتى إلى علامة إنهاء (لا علامة </img>!). إذا كنت تريد تحديد الارتفاع / العرض ، فاستخدم الارتفاع = "120" العرض = "400" ؛
<img src = ”yourimagelink.jpg” height = ”99” width = ”89”>

في حالة تعذر تحميل الصورة لمستخدمك ، يجب عليك تقديم نص بديل. هذا مفيد أيضًا للأشخاص الذين يجدون صعوبة في رؤيته على الشاشة. للقيام بذلك ، أضف alt = ”وصفًا لصورتك”. أود شخصيا أن أوصي بما لا يزيد عن 6 كلمات.

<img src = ”youimagelink.jpg” width = ”200” height = ”100” alt = ”منظر للشاطئ”>
من المستحسن أن تكون أنواع الصور الوحيدة التي تستخدمها هي Gifs (.gif) أو Jpegs (.jpg) أو Portable Network Graphic (.png). حاول الاحتفاظ بأحجام الملفات منخفضة ، فبعض المستخدمين لديهم سرعات بطيئة للغاية.




 

google-playkhamsatmostaqlTechno like - تكنو لايك