نحن في عصر الانترنت وأصبح من السهل إيجاد اكثر من مصدر وموقع اوفيدوهات التي تعمل على تعليم HTML للمبتدئين ، وهذا بفضل التطور المعلوماتي فالعصر الراهن ، ولكن هذا الانفتاح المعلوماتي له ايجابيات كما عليه سلبيات.
فوجود أعداد كبيرة من المعلومات و المواقع التعليمية، اصبح من الصعب الاختيار بين أفضلهم وأكثرهم إفادةً ، وهنا يكمن الخلل حيث يتشتت ذهن المبتدا و يترك ما بدأ ويعود لنقطة الصفر.
فيجب على المتعلم البداية تدريجيا و تتبع الدروس خطوة بخطوة حتى يتمكن و يصل الى الاحتراف في هذه اللغة البرمجية.
في هذه التدوينة ساختصر لك بعد الخطوات المهمة التي سترفع من مستواك فال html .
ما الذي تحتاجه فالhtml؟
اول اداة تحتاجها كمبتدا في عملك هو محرر html وهو برنامج لتكتب به أكواد ورموز HTML وتقوم عليه بتطبيق ما تعلمته، ويوجد العديد من البرامج ومن أشهرها وأفضلها:
Phase5 : مُحرر معروف و يدعم العديد من لغات البرمجة مثل php و Java Script جافا سكربت وجافا Java وغيرها ، ويمكّن المستخدم من العمل على مختلف البرمجيات والتعديل على مستندات مختلفة .
Notepad++ : برنامج تحرير كلاسيكي يدعم html وcssو لغات برمجة عديدة مثل جافا Java وجافا سكريبت Java Scipt وبايثون python وروبي Ruby وماتلاب Matlab والكثير من لغات البرمجة .
مُتصفّح للإنترنت : كل مستخدم للانترنت يستعمل متصفح. فهناك الكثير من برامج التصفّح التي تمكنك من العمل عليها، ويمن أشهرها وأكثرها استخدامًا Google Chrome وMozilla Firefox وOpera وSafari.
وهنا فقد حصلت على كل الادوات التي تحتاجها لبدا اول تجربة في برمجة html ، تابع معنا الخطوات .
سنقوم ببرمجة صفحة خطوة بخطوة :
* الخطوة الاولى افتح محرر notepad++ وانشا مجلد جديد.
* الخطوة الثانية قم بكتابة هذا الكود و سنتطرق لشرحه فيما بعد
<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
* الخطوة الثالثة احفظ الملف بصيغة html
على سطح المكتب او في اي مكان باسم "myfirstpage.html"
ملاحظة:
من المهم تغيير الامتداد .html ، لانه سيكون في المحرر notepad++ ، بإمتداد .txt .
و الان افتح الملف بنقر عليه مرتين او اسحب الملف الى المتصفح مباشرة ستفتح لك الصفحة ومبروك عليه اول عمل .
الان ناتي الى شرح الكود
1- السطر الاول <!DOCTYPE html> هو يشير الى نوع الصفحة. حيث يرشد متصفح الويب أن هذه الصفحة هي صفحة HTML5 .
2- ال <head>هو المحتوى البرمجي الذي يضم الوسوم التي توفر معلومات حول الصفحة ، مثال ، الوسم <title> نخصص للعناوين التي تظهر على الصفحة. و <p> ترمز للفقرة و......الخ
-3 ال <body> يدل على المحتوى الفعلي للصفحة الويب مثل الفقرات والصور و الروابط والجداول و غير ذلك .
نلاحظ ان الوسوم فالhtml تبدا ب <> وتنتهي ب </> مثال :
<Title> ****""</title>