دورة تعليم لغة HTML : الدرس الثالث
اضافه المحتويات على الموقع :
كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في
رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي
تشكل الصفحة..
مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية<title> ووسم الإغلاق <title/>:
مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية<title> ووسم الإغلاق <title/>:
<title/>موقعي الأول<title>
لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة
كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::
كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::
<p/>مرحبا هذا هو موقعي الأول.<p>
الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي :
صفحة HTML يجب أن تكون لديك بالشكل التالي :
<html>
<head>
<title/>موقعي الأول<title>
<head/>
<body>
<p/> مرحبا هذا هو موقعي الأول.<p>
<body/>
<body/>
<html/>
انتهينا ! لديك الآن أول موقع حقيقي!
كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك :
- في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية .
- اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
- احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها "html." وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى .
لآن إذهب إلى متصفحك :
- في القائمة العلوية اختر "File" ومن ثم اختر قائمة "Open" أو من الكيبورد ( Ctrl +O ) .
- إضغط على "Browse" في النافذة التي ستظهر لك .
- إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
الآن يجب أن تحوي الصفحة جملة "مرحبا هذا هو موقعي الأول." تهانينا !
ماذا تعلمنا حتى الان :
إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق :
<html>
هذا رأس الصفحة<head>
<title/>هنا عنوان الصفحة<title>
هذا نهاية الرأس <head/>
<body/> هنا محتويات الصفحة<body>
<html/>
في قسم رأس الصفحة اكتب دائماً العنوان: <title/>عنوان صفحتك<title> .
لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:
لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:
العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.
في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر :
<p> Is used for paragraphs. </p>
<b> Emphasis text. </b>
<h1> Heading </h1>
<h2> Subhead </h2>
<h3> Sub-subhead </h3>
تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت ! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.
ماذا يعني هذا؟
لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي.
لذلك قم بتجربة ما تعلمته حتى الآن.
ما التالي؟
جرب إنشاء صفحات أخرى بنفسك، قم بإنشاء صفحة تحوي عنواناً للصفحة وعناوين فرعية مع بعض النصوص، جرب أن تفعل ذلك بدون الرجوع إلى هذ االدرس .
ماذا يعني هذا؟
لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي.
لذلك قم بتجربة ما تعلمته حتى الآن.
ما التالي؟
جرب إنشاء صفحات أخرى بنفسك، قم بإنشاء صفحة تحوي عنواناً للصفحة وعناوين فرعية مع بعض النصوص، جرب أن تفعل ذلك بدون الرجوع إلى هذ االدرس .
دورة تعليم لغة HTML : الدرس الثالث
0 التعليقات :
إرسال تعليق