تعلم لغة HTML في درس واحد

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

html فقط لغة لتصميم الادوات واحدة تلو الاخرى ، أما اذا اردت تنسيقها واظهارها بشكر جذاب فتحتا الى لغة CSS التي تقوم بعمل ستايلات للتضميم الذي كتبته داخل صفحة HTML .

المهم لا داعي للتعرف أكثر على أكثر من ذلك حول HTML فدعونا ندخل كيف تصمم اول صفحة والتي سنشغلها مثلا على متصفح جوجل كروم.

1 - البدأ في كتابة أول كود html والمحرر المفضل للتحرير :

تحتاج الى محرر نصوص لكتابة الكود وأفضلها وأوخف برنامج هو Notepad++ حمله من الموقع الرسمي :

https://notepad-plus-plus.org/downloads/v7.8.9

تم تبدأ في كتابة أول كود -قم بنسخ الكود بالاسفل- ثم أخبر المحرر انك تعمل كود html بالصورة الموالية :

قم بنسخ الكود بدل الموجود بالصورة بالاسفل الكود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>صفحة اختبار</title>
  </head>
  <body>
    <p>مرحبــا!</p>
  </body>
</html>

ربما لاحظت <!DOCTYPE html> وهي تعني انك تصرح باستخدام اخر اصدار من html 5 المهم ضعه في بداية أول الكود دائما.

ثم <html> هنا يتم كتابة الاكواد ثم تغلق بـ </html> ، وتذكر انها جميع اوسم html تفتح وتغلق باضافة / .

لاضافة تنسيق للكود مثل اضافة عنوان للصفة او او اضافة اسم الكاتب او المحرر والكلمات المفتاحية لمحركات البحث تضعهم بين الامر <head> هنا تضع الكود ثم تغلق بـ </head> ، وهذه الاوامر لن تظهر عند اختبار او فتح الصفحة.

"utf-8"   هذا الامر للترميز الى استخدام اللغة العربية بالكود .

<title>صفحة اختبار</title>   هذا العنوان الذ يظهر بالفوق بالمتصفح .

لبدأ التصميم تكتب الاكواد داخل <body> هنا تكتب اكواد التصميم </body> مثلا لطباعة النصوص :

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

<p>مربحــا!</p>   هذه أول كلمة سيم طباعتها على الصفحة عند فتحها.

هذا كل شيئ في بداية كتابة أي كود لا أكثر .

ملاحظة : لتغيير ستايل محرر نوتباد بلس وهذا لتسهل عملية التحرير اكثر بالبرنامج :

ثم تحفظ الملف باسم index.html :

لماذا سميت الملف index.html

هذا الاسم هو الصفحة الرئيسية عند طلب اي موقع ، فعند الدخول او طلب موقع مثلا igli92.com فمباشرة يتم البحث عن ملف اندكس وقد يكون على الشكل التالي index.html او index.php او index.asp فيم عرض محتواه بدل ان يعرف لك فهرس ملفات الموق ويمكنك الاطلاع على المواقع التي ليس لديها اندكس بكتابة الامر index of على جوجل وستطلع لك عدة مواقع لا تحتوي على الاندكس وتظهر بها Index of / .

لتجربة الكود افتح الملف بعد حفظه مثلا على سطح المكتب عن طريق جوجل كروم :

بهذه الطريقة دائما يتم تجربة ما قمنا بكتابته .

إلى هنا عليك أتقان الخطوات السابقة ثم الانتقال الى الدرس الموالي .

2 - التعامل مع العناوين والنصوص والفقرات في Html :

ضع الكود :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>صفحة اختبار html</title>
  </head>
  <body>
    <p>مرحبـــا!</p>
<h1>العنوان الأول :</h1>
<h2>العنوان الثاني :</h2>
<h3>العنوان الثالث :</h3>
<h4>العنوان الرابع  :</h4>
<h5>العنوان الخامس :</h5>
  </body>
</html>

هنا أضفنا وسم جديد <h1> وكلما كان الرقم واحد اكبر كلما صغر العنوان ولا تنسى ان تغير الرقم كذلك على </h1>

عند فتح الملف على جوجل كروم :

ربما لاحظت اننا نطبع كلمات وجمل باللغة العربية على اليسار لذلك نحتاج الطباعة من اليمين الى اليسار وذلك فقط باضافة الامر على <body> ليصبح على الشكل التالي <body dir="rtl"> .

عندما تريد تكتب الان نص او جملة تكتبها داخل الوسم و .

مثال :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>صفحة اختبار html</title>
  </head>
  <body>
    <p>مرحبـــا!</p>
<h1>العنوان الأول :</h1>
<h2>العنوان الثاني :</h2>
<h3>العنوان الثالث :</h3>
<h4>العنوان الرابع  :</h4>
<h5>العنوان الخامس :</h5>
 <p>مرحبا بك صديقي في أسهل طريقة لتعلم لغة إتش تي إم إل</p>
  </body>
</html>

بعض الاوسمة تحتاجها داخل النصوص :

 للعودة إلى سطر جديد تضع الوسم في اي مكان تريد سواء وسط الجملة او اي مكان آخر ، هذا وسم أحادي .

 وغلقه هو هو لكتابة كلمة او جملة غليظة تضعها داخل الوسم .

 وغلقه هو لوضع خط أسفل جملة او كلمة تضعها داخل الوسم .

<hr> هذا الوسم لوضع خط أفقي بين الفقرات او الادوات ، هذا وسم أحادي .

سنضيف هذه الاوسمة وسنكمل الان فقط على اضافة الاكواد على الكود السابق ونضعه بالاسفل .

 <p>مرحبا بك صديقي في أسهل طريقة لتعلم لغة إتش تي إم إل</p>
 <hr>
<p> <b> أهلا وسهلا:</b> <br> نقوم بانشاء اول موقع الكتروني </p>
<p><u> أول صفحة ويب</u></p>
  </body>
</html>

التعليقات لشرح كود html :

أي لغة لها تعليقات يعني المطور عندما يكون يكتب الكود يضع امامه تعليق يدل على ما يفعله ذلك الامر ، وتعليقات html تكتب على الشكل التالي

إضافة الصورة والتحكم بها في Html :

قم بتحميل هذه الصورة وضعها بجانب ملف index.html

الصورة بجانب ملف html :

قم بإضافة الكود على الكود السابق :

<p><u> أول صفحة ويب</u></p>

<!--  إضافة صورة -->
<img src="tooroq.jpg" >

  </body>
</html>

ربما لاحظت كيف يتم كتابة تعليق ثم إضافة الصورة وسيتم طباعتها على المتصح بهذا الشكل :

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

<img src="tooroq.jpg" alt="طرق تقنية" width="240" height="60">

alt لاضافة وصف للصورة .

width للتحكم في عرض الصورة .

height للتحكم في طول الصورة .

أنواع القوائم في html :

لإضافة قوائم على شكل نقاط تضع الكود التالي :

<p> كتب تعلم البرمجة : </p>
<ul>
  <li> لغة سي اس اس </li>
  <li> لغة بي اتش بي</li>
  <li> لغة جافا</li>
  <li> لغة سي بلس بلس</li>
</ul>

لإضافة القوائم على شكل أرقام :

<p> أسماء الأطفال : </p>
<ol>
  <li> محمد</li>
  <li> ادم</li>
  <li> ايمن</li>
  <li> مصعب</li>
</ol>

سيصبح الكود على الشكل التالي بعد اضافته على الكود السابق :

<!--  إضافة صورة -->
<img src="tooroq.jpg" alt="طرق تقنية" width="240" height="60">

<p> كتب تعلم البرمجة : </p>
<ul>
  <li> لغة سي اس اس </li>
  <li> لغة بي اتش بي</li>
  <li> لغة جافا</li>
  <li> لغة سي بلس بلس</li>
</ul>

<p> أسماء الأطفال : </p>

<ol>
  <li> محمد</li>
  <li> ادم</li>
  <li> ايمن</li>
  <li> مصعب</li>
</ol>

  </body>
</html>



التعامل مع الروابط لينك في Html :
لوضع كود عندما تضغط على جملة او كلمة تأخذك إلى موقع معين تضع الكود التالي :
<a href="https://www.google.com" > الذهاب إلى موقع جوجل </a>
يظهر على الشكل التالي عند الطباعة :

لفتح صفحة الموقع في صفحة جديدة عليك اضافة وسمtarget="_blank"
ليصبح بهذا الشكل :<a href="https://www.google.com" target="_blank"> الذهاب إلى موقع جوجل </a>


التوجه الى الفقرات عن طريق div في html :
هذا الوسم يفتح هكذا <div>  ويغلق هكذا </div> ويتم وضع داخله مجموعة من أدوات html لإعطائها شكل معين او ستايل والتحكم بها كاملة .
فمثلا سنضع الكود هذا داخل وسم div وسيصبح بهذا الشكل :
 <div>
<p> <b> أهلا وسهلا:</b> <br> نقوم بانشاء اول موقع الكتروني </p>
<p><u> أول صفحة ويب</u></p>

<!--  إضافة صورة --><img src="tooroq.jpg" alt="طرق تقنية" width="240" height="60"> </div>
إذا نحن الآن في بداية الصفحة سنضع عنوان عند الضغط عليه يأخذك إلى هذه الفقرة سنضيف id="image" ليصبح بالشكل التالي :
<div id="image" >
<p> <b> أهلا وسهلا:</b> <br> نقوم بانشاء اول موقع الكتروني </p>
<p><u> أول صفحة ويب</u></p>

<!--  إضافة صورة --><img src="tooroq.jpg" alt="طرق تقنية" width="240" height="60"> </div>
الآن ضع مثلا هذا الأمر في بداية الصفحة أسف body
<a href="#image" target="_blank"> الذهاب إلى الصورة </a>
هذا الكود النهائي مع الاشارة للأكواد التي اضفناها مؤخرا


عند الضغط على  الذهاب إلى الصورة  سيأخذك إلى الفقرة التي تحتوب على الصورة والبضبط الى div الذي يحمل id باسم image ، ومن الافضل ان تكون الصفحة ممتلأة بالفقرات وكبيرة لكي تفهم عمل هذه الخاصية .
فيديو تعليمي حول لغة Html لفهم ما سبق :
بعد تطبيق ما سبق يمكنك التعرف أكثر حول الذي ذكرناه في تعلم لغة html من المبرمج خالد السعداني بهذا الشرح على يوتيوب :
https://www.youtube.com/watch?v=jjRZHLVJiJE

أفضل موقع مرجعي لتعلم لغة HTML هو w3schools وهذا الرابط الرسمي للموقع :
https://www.w3schools.com/html

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

كيف تربط مع html :
هناك ثلاث طرق :
اما كتابة اكواد css داخل وسم <style> و </style> وهذا بين  <head> و </head>
او كتابة اكواد css مباشرة مع الوسم مثل : <h1 style="background-color:DodgerBlue;">مرحبا</h1> هنا يتم تغيير خلفة مرحبا.
او تكتب اكواد سي اس اس داخل ملف تسميه مثلا style.css وتستدعيه الى ملف html .
هنا في هذا الكود استخدمت طريقتين في استخدام ستايل :
<!DOCTYPE html>
<html>
  <head>
  <style> 
  
  body {
       background: gray;
       }

  h1 {
      color: green;
     }
 </style>
    <meta charset="utf-8">
    <title>صفحة اختبار html</title>
  </head>
  
  
  <body dir="rtl" >
<a href="#image" target="_blank"> الذهاب إلى الصورة </a>

<h1 style="background-color:DodgerBlue;">مرحبا</h1>
.........................
غيرت خلفية body الى الرمادي وخلفية مرحبا وأي نص داخل الوسم h1 الى الللون الاخضر الى اللون الازرق وستطلع بهذا الشكل :


الاماكن التي استخدمت بها كود css


عندما تريد اضافة اي تنسيق على اداة او جملة على html ما عليك الا البحث في جوجل ويطلع لك اكواد قم بتجربتها .

أترككم مع هذا الشرح لخالد السعداني لتعرفو حول طريق ربط css مع html أكثر :
https://www.youtube.com/watch?v=l-7Tb-b-pLE

.