1:12 ص
رامي و قصي
للبدء بتطبيق أيّ درس من دروس هذه اللغة ، يتوجّب علينا أولاً فتح برنامج الـ Notepad
ومُتابعة الخطوات بشكلٍ حرفي ، أي نقصان لأي رمز أو شكل قد يقلب شكل الصّفحة رأساً على عقب
تكوين لغة الـ HTML يُشبه التكوين البشري
دعونا نرى المثال التّالي
ومُتابعة الخطوات بشكلٍ حرفي ، أي نقصان لأي رمز أو شكل قد يقلب شكل الصّفحة رأساً على عقب
تكوين لغة الـ HTML يُشبه التكوين البشري
دعونا نرى المثال التّالي
- مثال - 1 -
<html>
وتستخدم للتعرّيف أن هذا المُستند هو من نوع HTML ، ويحتوي على عناصر بلغة HTML
وتُستخدم كما ذكرنا سابقاً على شكل أزواج [ وسم للبداية ووسمٌ للنهاية ] ، وبينها تُدرج جميع عناصر هذه اللغة ؛
يعني كل ما يُكتب يكون بين الوسمين .
<head>
يحتوي على المعلومات التي تصف هذه الصّفحة ، وبالطبع يجب أن تبدأ الصفحة به
تماماً كما يبدأ جسم الإنسان بالرأس .تلاحظون أن الكتابة تمت داخل وسميّ الـ HTML ..
كما ذكرنا سابقاً .
<body>
ويستخدم لتعريف جسد الصفحة وكل ما تحتويه ، وبين هذين الوسمين يتم تعريف وإضافة
كافّة عناصر الصفحة ، و وسم الـ Body يكون بعد وسم الـ Head .. كما في جسم الإنسان
[ الرأس أولاً ثم الجسم ] .
الآن : تشكّل لدينا هيكل الصّفحة الذي سنبني على أساسه صفحة الويب الخاصّة بنا ..
من الجدير بالذّكر أنه في حال استعراض نتائج ما كتبناه حتى الآن كلّ ما سيظهر لنا هو صفحة بيضاء
فارغة .
لنجعل الصّفحة التي قمنا بكتابتها منطّقية أكثر وذات معنىً ، سنقوم بإضافة بعض الأمور البسيطة :
- بين وسميّ الـ Head سُنضيف خاصيّة وصفيّة للصفحة وهي <title> .. ويظهر هذا العنوان كإسم للصفحة
في شريط العنوان كما سنرى لاحقاً . فليكن عنوان الصّفحة ( Learn HTML )
- بين وسميّ الـ Body سنضيف عنوان رئيسي سيظهر في الصّفحة نفسها عن طريق وسم <h1> .
وليكن (HTML Tutorials )
النتيجة كالتّالي :
لاستعراض ما قمنا بكتابته حتى اللحظة علينا أن نقوم بحفظ الملف
عملية الحفظ تتم من خلال File << Save As
نختار الملف الذي قمنا بإنشائه سابقاً ونحفظ داخله هذه الصّفحة بامتداد html .. وقد أسمينا
الصّفحة Index لكون هذه الكلمة هي التسمية المعروفة للصفحات الرئيسية .
إذن العنوان سيكون كالتّالي :
Index.html
تماماً كما في الصّورة :
* في حال عدم حفظ الصّورة بهذه الطّريقة سوف لن تظهر لك النتيجة كصفحة ويب .
الآن ، قم بفتح الملف بواسطة متصفح الإنترنت الذي تستخدمه ،
والنتيجة :
على سبيل التوضيح :
HTML Headings | عناويـن HTML
ويتم تعريفها من وسوم الـ <h1> إلى <h2>
الآن : <h1> هو العنوان الأكبر حجماً ، <h2> أصغر من <h1> ، و <h6> هو الأصغر بينها جميعاً
لو أضفنا التّالي باستخدام الصفحة السّابقة التي قمنا بعملها [ طبعاً داخل الـ Body ] :
احفظ التغييرات التي قمنا بعملها ( Ctrl + S )
وقم باستعراضها في متصفّح الانترنت ، النتيجة :
لاحظوا ، من الأكبر للأصغر كما ذكرنا سابقاً
::
من المهمّ جداً تطبيق هذا الدّرس لما يحويه من أساسيات تسير عليها بقيّة الأمور
بانتظار اسئلتكم واستفساراتكم
