تصميم مواقع الانترنت

تصميم مواقع الانترنت-3 HTML Template


HTML TEMPLATE
في القسم السابق، كتبنا أبسط صفحة ويب يمكنك إنشائها. واما في هذا القسم فسوف نكتب صفحة الويب بقالبها الأساسي
افتح مستندا جديدا في محرر النص الخاص بك، واحفظه كما يلي template.html:
<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

</head>

<body>

This is the body of the document.

</body>

</html>
بعد فتح الملف المحفوظ عبر متصفح جوجل كروم نفتح أدوات مطوري البرامج (developer tools) كما تعلمنا في الدرس السابق، فستبدو الصفحة كما في الشكل

1

كما ترون، في هذه الحالة هناك توافق بين المحتوى الذي كتبناه في ملف الصفحة والبنية التي تم إنشاؤها بواسطة المتصفح.
دعونا الآن نمر على كل سطر في الملف ودراسة الغرض منه.
وفيما يلي السطر الأول في الملف

<!DOCTYPE html>

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

يحتوي السطر التالي على تاغ ال <HTML>الافتتاحية، التي تتضمن باقي الملف وتنتهي بآخر الملف على الشكل </HTML>


تحتوي هذه العلامة على سمة تسمى lang، والتي أعطيت القيمةen وممكن ان تعطى القيمة ar.

وتفيد في تحديد لغة الصفحة واتجاه النص.

توفر الخصائص آلية لتوفير معنى إضافي للواسمات او للتاغات (tags)
العنصر التالي في المستند هو عنصر الرأس<HEAD>

هذا هو القسم من الوثيقة حيث يمكنك تقديم بيانات مهمة عن الصفحة، جنبا إلى جنب مع روابط يمكن احتياجها من قبل الصفحة. لا يحتوي قسم الرأس مطلقا على أي مكونات مرئية لصفحة الويب. ولكنه يحتوي على
<meta charset=”utf-8″ />
وهذا يحدد أن ترميز الأحرف للصفحة هو utf-8
هناك عنصر آخر يتم إضافته عادة إلى عنصر الرأس: عنصر العنوان. هذا هو
النص الذي سيعرضه المتصفح في شريط العنوان عند تحميل صفحة الويب.

<title>Basic template</title>

2

بعد ذلك تأتي إلى عنصر <body> هذا هو المكان الذي ستكون فيه جميع العناصر المرئية للصفحة. في هذا المثال بالذات، يتكون الجسم من سلسلة نصية واحدة, وهنا سيكون مجال عملنا وإبداعنا…..

الى هنا ينتهي الدرس الثالث من هذه السلسلة الطويلة ان شاء الله وفي حالة وجود اي سؤال او استفسار فيرجى مراسلة الكاتب لهذه الدروس على الرابط التالي:

Yazan Aswad

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s