Mr. A7meD KaMeL

2- بداية انشاء صفحة ويب HTML.

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة الثانية: بداية انشاء صفحة ويب باستخدام لغة HTML

رأس صفحة html - head

بدايةً: انشاء ملف صفحة الويب بصيغة html.

انشئ مجلد ما في جهازك وقم بتسميته باسم مناسب مثل mysite مثلا.

ثم قم بفتح المجلد وانشاء ملف نصي بصيغة txt بداخله – وذلك من خلال الضغط بزر الفأرة الأيمن Right Click في مكان فارغ في المجلد -> ثم اختر الأمر New -> ثم Text Document.

سيتم انشاء الملف في المجلد بإسم New Text Document.txt

قم بتغيير اسم الملف ليكن index.html

ولاحظ ان امتداد الملف قد تغير من txt الى html – والامتداد (html) هو امتداد صفحة الويب.

واذا كان ليس بإمكانك رؤية امتداد الملف فهذا يعني ان خاصية اظهار الامتدادات غير مفعلة ولابد من تفعيلها – وذلك من خلال الخطوات التالية:

– افتح Computer ثم اضغط على الزر Organize من شريط الادوات.

– ثم اختر Folder and Search Options.

– ثم اضغط على التبويب View.

– ستجد اختيارات بعنوان Advanced Settings – ابحث عنها عن الامر Hide extensions for known file types – قم بإزالة علامة الصح التي بجانبها.

– ثم اضغط الزر OK من المربع الحواري.


وكما علمنا في المحاضرة الاولى ان التركيب الاساسي والصحيح لصفحة HTML هو:

<!DOCTYPE html>
<html>
<head>
 يتم هنا كتابة عناصر لاتظهر في المتصفح
</head>
<body>
 يتم هنا كتابة العناصر التي تظهر في المتصفح
</body>
</html>

اولا: تعريف اللغة التي سيتم انشاء الصفحة بها ولتكن اللغة العربية.

فعند كتابة وسم html يتم تحديد خاصية اللغة فيه حيث سيتم كتابة الوسم كما يلي:

<html lang="ar">

حيث ان: lang هي اختصار لكلمة language والتي تعني اللغة – والحرفين ar هي اختصار اللغة العربية arabic.


ثانيا: التعامل مع وسم head.

كل مايحتويه هذا الوسم من عناصر داخله، لايتم ظهورها في المتصفح – مثل عنصر اسم الصفحة title وعناصر الميتا meta التي تحدد بعض من تفاصيل الصفحة كوصف الصفحة والكلمات الدلالية وترميز الصفحة .. وغيرها – وسيتم دراسة ذلك بالتفصيل.


ومن العناصر الضرورية وسم الميتا Meta Tag

يعتبر وسم الميتا عنصر من عناصر تفاصيل صفحة الويب.

ومن اهم تلك التفاصيل ميتا ترميز صفحة الويب Character Set.

وهي الميتا التي تحدد وضع حروف النص التي سيتم كتابتها في تلك الصفحة … حيث انه قديما كانت بعض صفحات الانترنت تظهر بلغة غير مفهومة كرموز او علامات استفهام – كما يلي:

µºÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÑÒÓÔÕÖØÙÚÛÜßàáâãäåæçèéêëìíîïñòóôõöøùúûüÿıŒœŸƒ

ولتجنب حدوث ذلك – لابد من تعريف الصفحة بوسم الميتا هذا كما يلي:

<meta charset="UTF-8">

ومن وسوم الميتا ايضا (كمثال) .. ميتا الوصف Description وميتا المؤلف Author وميتا الكلمات الدلالية Keywords – ويتم كتابة الوسم كما يلي:

<meta name="description" content="هنا نص الوصف">
<meta name="keywords" content="هنا الكلمات الدلالية بين كل كلمة واخرى فاصلة">
<meta name="author" content="هنا اسم المؤلف">

حيث ان وسم ميتا الوصف والعديد من بعض وسوم الميتا تتكون من:

  • اسم الميتا => name
    مثل description.
  • محتوى الميتا => content
    ويتم كتابة فيه محتوى الميتا كنص الوصف او الكلمات الدلالية او اسم المؤلف.

وتعتبر ميتا الوصف هي مايظهر في نتائج البحث في جوجل اسفل عنوان نتيجة البحث كما يلي:

وصف صفحة الانترنت web page description


ومن العناصر الضرورية ايضا وسم عنوان الصفحة title

وهو الوسم الذي يحدد عنوان تلك الصفحة – ويظهر عنوان الصفحة تلك في تبويب الصفحة في المتصفح كما في الصورة التالية:

تبويب صفحة الانترنت web page tab

ويتم كتابته كما يلي:

<title>هنا عنوان الصفحة</title>

ومن اهم تلك العناصر ايضا – عنصر وسم ربط ملفات خارجية بتلك الصفحة

(كربط ملف تنسيقات صفحة الويب css. و الجافاسكريبت js.) وسيتم معرفة اهمية تلك الروابط لاحقاً.

وطريقة كتابة هذا الوسم هي مايلي:

<link rel="stylesheet" href="folder/file.css">

حيث انه في تلك الطريقة تم كتابة خاصية نوع علاقة الربط اولا وهي rel والتي تم كتابة القيمة فيها stylesheet حيث تحدد نوع العلاقة وهي ربط ملف تنسيقات css.

وتم ايضا تحديد مسار ملف التنسيقات المراد ربطه والذي هو باسم file.css وموجود في مجلد folder – وسيتم التعرف على طرق التعامل مع مسارات الملفات لاحقا.

كما يمكننا اختصار هذا الوسم وازالة الخاصية rel منه وذلك متاح في لغة HTM5 حيث ان اللغة تتعرف تلقائيا على نوع العلاقة – وسيكون الوسم المختصر كما يلي:

<link href="folder/file.css">

ومن ذلك نعلم بأن تنسيق صفحة HTML يكون موجودا في ملف CSS خارجي عن الصفحة، وبالتالي يتم ربطه في صفحة HTML كما تم توضيحه بالاعلى.

وأيضا بدلا من انشاء ملف تنسيقات خارجي – يمكن كتابة التنسيقات في وسم يدعى style – يتم كتابته داخل وسم head ايضا – ويتم كتابته كما يلي:

<style>
   وهنا تكتب اكواد التنسيقات
</style>

ومن العناصر التي توضع داخل وسم الـ head – وسم الجافاسكريبت

وهو وسم يتم وضع اكواد جافاسكريبت بداخله – ويتم كتابته كما يلي:

<script>
     وهنا يتم كتابة اكواد الجافا سكريبت
</script>

ولكن من المفضل ان يتم كتابة كود الجافاسكريبت قبل نهاية وسم body وذلك لتجنب بعض الاخطاء … إلا اذا تطلب كود الجافاسكريبت وضعه داخل وسم الـ head.


وفي نهاية هذا المحاضرة – اليكم الكود الملخص لصفحة HTML لجميع العناصر التي تم شرحها في هذه المحاضرة

<!DOCTYPE html>
<html lang="ar">
<head>
   <meta charset="UTF-8">
   <meta name="description" content="هنا وصف الصفحة">
   <meta name="keywords" content="الكلمة الاولى، الكلمة الثانية، الكلمة الثالثة،....">
   <meta name="author" content="هنا اسم المؤلف">
   <title>عنوان الصفحة هنا</title>
 <style>
    هنا يتم كتابة اكواد التنسيقات
 </style>
 <script>
    هنا يتم كتابة اكواد الجافاسكريبت
 </script>
</head>
<body>
    هنا العناصر التي ستظهر في المتصفح وسندرسها في المحاضرات القادمة
</body>
</html>

نهاية المحاضرة

تاريخ الموضوع: أبريل 1, 2017 4:27 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً