بسم الله الرحمن الرحيم
اللهم صل على سيدنا محمد الوصف والوحي والرسالة والحكمة وعلى آله وصحبه وسلم تسليما
السلام عليكم
نبدأ اليوم درسنا الأول لتعلم لغة HTML5 ، وهي أحدث إصدار من لغة HTML متوافق مع web 2.0
ولقد اطلعت على بعض المواقع العربية والأجنبية وتعلمت منها ما يلي :-
لغة HTML5 تهتم بتنسيق وتنظيم المحتوى من نصوص وفقرات وعناوين
أما لغة CSS3 فتهتم بتنسيق المظهر الخارجي من ألوان وخطوط وخلفيات
أما لماذا نتعلم اللغتان معا فلأن أحدهما تكمل الأخرى .
تتألف لغة HTML5 من مجموعة من الوسوم Tags ولكل وسم بداية ونهاية وسنتعرف بالبداية على الوسوم التالية :
وسم html وهو الوسم الأساسي الذي يجمع بين بدايته ونهايته جميع الوسوم الأخرى
ويكتب <html> عند البداية ويكتب <html/> عند النهاية
وسم head ومن خلاله يتم تنسيق الجزء العلوي من الصفحة كالعنوان ووصف الموقع
ويكتب <head> عند البداية ويكتب <head/> عند النهاية
وسم title ومن خلاله يتم كتابة عنوان الصفحة الظاهر في أعلى المتصفح
ويكتب <title> عند البداية ويكتب <title/> عند النهاية
وسم body وهو الوسم الذي يضم بين طرفيه جميع الوسوم التي يبنى منها متن الصفحة
ويكتب <body> عند البداية ويكتب <body/> عند النهاية
ولكي نبدأ بتعلم لغة HTML5 علينا القيام بتحميل برنامج ++ Notepad من الرابط التالي : http://notepad-plus-plus.org/
والآن قم بتنصيب البرنامج وافتح صفحة جديدة ولنبدأ معاً بكتابة الكود الأول .
أول ما علينا القيام به هو الذهاب إلى قائمة الترميز Encoding واختيار الترميز Encode in UTF-8 لكي نتمكن من الكتابة باللغة العربية .
ثم اكتب معي هذا الوسم
<! DOCTYPE html >
وهو بمثابة إعلام للحاسوب بأنك ستتحدث معه بلغة html وليس بلغة أخرى .واكتب بعده الوسوم التالية :
<html>
<head>
<title>
عنوان الصفحة
</title>
</head>
<body>
متن الصفحة
</body>
</html>
وستظهر هيكلية الكود في برنامج ++ Notepad كالتالي :
وإذا سألت كيف تم ترتيب الوسوم بهذا الشكل ولماذا فالجواب بسيط فقد تم إزاحتها بواسطة مفتاح Tab من أجل التوضيح ولتكون سهلة الفهم فقط لا غير .
الآن إذهب معي إلى قائمة Run واختر منها Launch in Chrome , Firefox, IE وحسب المتصفح لديك لعرض الصفحة وستظهر كما يلي :-
تهانينا للجميع ، لقد قمنا بإنشاء صفحتنا الأولى بلغة HTML5 .
وسأكتفي بهذا القدر من المعلومات للدرس الأول علني أكون قد أفدتك بها كما استفدت منها، وسأحاول ما استطعت أن لا أتوقف وأن أستمر في التعلم وتعليمك معي درسا آخر .
فإذا مررت من هنا أعلمني بمرورك لعلي إن وجدت معي رفقة شجعني ذلك على مواصلة المسير .
ليست هناك تعليقات:
إرسال تعليق