مقدمة في تصميم المواقع باستخدام لغة HTML
تصمم موقع على الانترنت لا يتطلب الكثير ويمكنك ان تستخدم برامج ومعالجات متوفره على جهازك بطبيعة الحالة مثل معالج Notepad الذي يمكنك من كتابة أوسمه لغة HTML وحفظ الملفات بامتداد " html." وهذه الملفات تتحول بشكل تلقائي الى ايقونة متصفح انترنت مثل (Google Chrome, Internet Explorer, Firefox) الى أخره من المتصفحات التي تخولك من الولوج الى الشبكة العنكبوتة، فما هي لغة HTML هذه وما هي أوسمتها Tag والخصائص داخل هذه الأوسمة.HTML: اختصار لـ Hyper Text Markup Language
هي لغة لتصميم صفحات الإنترنت عن طريق شيفرات تسمى الأوسمة Tag هذه الأوسمة فيها محتويات متنوعة تُكون صفحات الإنترنت ولها خصائص فنيه تميزها وتحدد طبيعة عملها وشكله مثل لون الخلفية، المحاذاة الى أخره ويرمز للأوسمة بكلمة مميزه للوسم داخل اقواس من هذا النوع < > ومثال ذلك وسم الرأس <head> ووسم جسم الصفحه <body>لنبدا بذلك بشكل سريع
1- علينا اولاً ان ننشئ مجلد على سطح المكتب ليحتوي الملف Notepad الذي سنكتب داخلة أوسمة بلغة HTML لاحظ علميات إنشاء المجلد HTMLFirstProject في الصور:
2- نقوم بفتح برنامج Notepad وانشاء ملف وحفظة بالاسم الذي نرغبه والامتداد html. كما في الصور داخل المجلد الذي انشأناه في الخطوة 1
لاحظ اننا قمنا بحفظ الملف باسم first.html
3- نعود الى الملف الذي قمنا بانشائه ونبدأ بكتابة الأوسمة Tags واهمها
أ- وسم اللغة <html>
ب- وسم الرأس <head>
ج- وسم الجسم <body>
الأوسمة الثلاث لها قسمين وسم البداية وهو بشكل الوسم الطبيعي و وسم أخر للتحديد نهاية مجال عمل هذا الوسم وتكب بالشكل التالي:
أ- وسم اللغة <html/>
ب- وسم الرأس <head/>
ج- وسم الجسم <body/>
لاحظ اشارة / التي تحول الوسم من وسم البداية لمجال عمل شيء الى وسم النهاية
4- علينا اولاً ان ندرك مجال عمل كل من هذه الأوسمه التي أسلفناها وهي تشبه في تكوينها جسم الإنسان فالإنسان له رأس وجسم رأسه يبداء وينتهي قبل ان يبدأ الجسم والرأس والجسم جميعهم داخل كونه انسان، وكذلك صفحة الإنترنت فلها رأس ينتهي قبل ان يبدأ الجسم وينتهي الجسم في نهاية الصفحة وجميع أوسمة البداية والنهاية لكل من الرأس و الجسم داخل بداية ونهاية وسم لغة الصفحة وهي <html>
لاحظ حدود أوسمة البداية والنهاية في الصورة
يمكن تغير محتوى الكلام بين وسم البداية ووسم النهاية لكل من رأس الصفحة وجسم الصفحة
5- الان قم بحفظ ما كتبته Ctrl+s
6- عد للمجلد الذي خصصته لحفظ الملف وسيحمل الملف شكل ايقونة المتصفح الرئيسي على جهازك انقر عليه نقر مزدوج وسيظهر لك اول موقع قمت بتصميمة.
الان ستجد جملة جسم الصفحة هنا لكن لن تجد جملة رأس الصفحه هنا لماذا؟
الجواب: لان وسم <head> لا يحمل الكلمات ولتحميل الكلام عليه علينا ان نستخدم وسم جديد هو وسم <title> ولهذا الوسم بداية ونهاية داخل حدود الرأس <title/>
لاحظ التغير الذي أجريناه
الان قم بالحفظ وتشغيل الموقع
ويفضل ان توقم بتشغيلة على متصفح Google Chrome لان بعض المتصفحات لا تدعم اللغة العربية اذهب الى الملف واضغط بالزر الأيسر للفأرة كما في الصورة التالية
هل يمكنني تغير لون الخط وحجمه وما الى ذلك من الخصائص ؟
نعم وهذا ما سنتعلمه في الدرس القادم إن شاء الله .. فإلى لقاء قريب.