فن الربح

الجمعة، 2 سبتمبر 2016

العناوين في لغة HTML

تحدثنا في تدوينتنا السابقة عن خواص عناصر HTML بشئ من التفصيل واليوم بإذن الله نتحدث عن العناوين " Headings " في لغة HTML .
لا شك أن استخدام العناوين في وثائق HTML شئ لا غنى عنه و خصوصاً في الوثائق الطويلة التي بها عناوين رئيسية ثم عناوين فرعية ثم عناوين ثانوية وهكذا٬ وبالطبع يختلف حجم الخط من عنوان إلى آخر حسب أهميته في الوثيقة.

وسوم العناوين داخل HTML :

تُعَرَّف العناوين داخل HTML بالوسوم من <h1> إلى <h6> .
حيث أن <h1> تُعَرِّف العنوان الأكثر أهمية و <h6> تُعَرِّف العنوان الأقل أهمية.

وكنا قد تحدثنا عن ذلك بشئ بسيط حين التحدث عن هيكل صفحة HTML وكذلك في تدوينة سابقة بعنوان مُعرَّفات العناوين داخل بلوجر.

مثال :

<h1>عنوان رقم 1</h1>

<h2>عنوان رقم 2</h2>

<h3>عنوان رقم 3</h3>

<h4>عنوان رقم 4</h4>

<h5>عنوان رقم 5</h5>

<h6>عنوان رقم 6</h6>

وتكون النتيجة كما بالصورة التالية :

* لاحظ معي تدرج حجم الخط من عنوان لآخر مع ملاحظة أن العنوان الأكثر أهمية وهو صاحب الوسم <h1> هو الأكبر حجماً مع تدرج حجم الخط للعناوين حتى نصل إلى العنوان صاحب الوسم <h6> وهو الأقل أهمية مع ملاحظة أن المتصفحات تضيف مسافة فاصلة تلقائياً قبل وبعد كل عنوان.

أهمية العناوين :

كما سبق وتحدثنا عن أهمية العناوين داخل الوثائق٬ فإنه من الجدير بالذكر أن محركات البحث تستخدم العناوين لعمل فهرسة وبناء للمحتوى الخاص بموقعك لذلك لا يمكن إغفال أهميتها.

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

لذلك لابد من استخدام الوسم <h1> للعناوين الرئيسية ثم <h2> للأقل أهمية ثم <h3> وهكذا حتى <h6>.

ملاحظة هامة : لا تستخدم وسوم العناوين إلا مع العناوين فقط بمعنى آخر أي أنك لا تستخدمها إذا أردت الكتابة بخط كبير " big " أو عريض " bold ".

الأسطر الأفقية في لغة HTML :

يمكننا استخدام الأسطر الأفقية للفصل ما بين الفقرات وبعضها وذلك باستخدام العنصر <hr> ٬ ويظهر على هيئة خط أفقي.

مثال :

<h1>عنوان رقم 1</h1>

<p>فقرة رقم 1</p>

<hr>

<h2>عنوان رقم 2</h2>

<p>فقرة رقم 2</p>

<hr>

والنتيجة كالتالي :

* ولاحظ وجود الأسطر كفواصل بين المواضيع وبعضها.
* لاحظ أيضاً أن العنصر <hr> من عناصر HTML الفارغة أي أنه ليس له وسم إغلاق.

العنصر " head " في لغة HTML :

تكلمنا سابقاً عن العنصر " head " وليس له علاقة بالعناوين " headings " نظراً لتشابه التسمية.
وقلنا سابقاً أنه مجرد وعاء لإعدادات الصفحة من تحديد اللغة وتوصيف مجال الصفحة والكلمات المفتاحية والخطوط المستخدمة والتنسيقات ... إلخ وهي لا تظهر في الوثيقة.
وقلنا أيضاً أنه يتم وضعه بين الوسمين <html> و <body> هكذا :

<!DOCTYPE html>

<html>

<head>

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

<meta charset="UTF-8">

</head>

<body>

.

.

.

يكفي هذا حالياً في موضوع العناوين في HTML.

وانتظرونا في التدوينة القادمة بإذن الله تعالى

الأربعاء، 3 أغسطس 2016

خواص عناصر HTML

استكمالاً لحديثنا المتواصل عن HTML كأحد أهم لغات برمجة المواقع٬ نتواصل معكم اليوم بإذن الله.
تكلمنا في تدوينتين سابقتين عن ما يسمى بعناصر HTML٬ واليوم بإذن الله نتحدث عن خواص تلك العناصر.

يمكنك مراجعة الموضوعين السابقين لتمام الاستيعاب بإذن الله :

* مقدمة عن أساسيات لغة HTML
* هيكل صفحة HTML

خواص عناصر HTML :

كل عناصر HTML لها خواص افتراضية " default attributes " بحيث لو تم إنشاء عنصر من تلك العناصر فإنه يأخذ تلك الخواص تلقائياً.
ماذا لو أردنا تغيير خاصية من تلك الخواص أثناء التصميم؟

ماذا لو أردنا إضافة معلومات أو خواص إضافية لتلك العناصر؟
الحل في درسنا اليوم بإذن الله.

ما هي صيغة خواص عناصر HTML ؟ وأين يتم وضعها ؟

تأخذ خواص العناصر في HTML تلك الصيغة : name="value"
حيث أن :
* " name " : تأخذ اسم الخاصية.

* " value " : تأخذ قيمة الخاصية.

وتوضع تلك الخواص بداخل وسم البداية للعنصر.

خاصية " lang " :

يمكن التعبير عن لغة وثيقة HTML عن طريق خاصية " lang " والتي يتم وضعها بداخل الوسم : <html>
وتبرز أهمية ذلك في ضرورة تعرف محركات البحث على لغة الوثيقة التي تقوم بعرضها.

مثال لذلك :

<!DOCTYPE html>

<html lang="ar-EG">

<body>

...

</body>

</html>

* لاحظ أولاً أن الخاصية تم وضعها بداخل وسم البداية - كما ذكرنا - للعنصر <html> .

* لاحظ معي : أن الحرفين الأولين " ar " يعبران عن اللغة - وهي هنا العربية. وفي حالة وجود أكثر من لهجة يتم استخدام حرفين آخرين " EG " - وتعني المصرية.

* يمكنك التعبير عن لغة الوثيقة كاللغة الانجليزية باللهجتين البريطانية " British English " أو الأمريكية " American English " بنفس الطريقة هكذا :

<html lang="en-BR">

أو

<html lang="en-US">

خاصية " title " :

هذه الخاصية يتم استخدامها عند إرادة التلميح بمعنى أو عنوان معين عن شئ ما٬ وعند المرور بالماوس على هذا الشئ يظهر هذا المعنى أو العنوان على هيئة تلميح.

ويتم استخدام هذه الخاصية داخل العنصر <p> .

مثال : تأمل معي الكود التالي :

<p title="الحث على إتقان العمل">

قال رسول الله صلى الله عليه وسلم : إن الله يحب إذا عمل أحدكم عملاً أن يتقنه

</p>

هذا الكود عبارة عن فقرة <p> لحديث نبوي شريف يحث على إتقان العمل٬ وعند الإشارة أو المرور بالماوس على هذه الفقرة يظهر هذه الجملة كتلميح : " الحث على إتقان العمل " كما بالصورة التالية :

ويمكنك تجربة ذلك عملياً بالمرور بالماوس على الحديث الشريف التالي ولاحظ التلميح :

قال رسول الله صلى الله عليه وسلم : إن الله يحب إذا عمل أحدكم عملاً أن يتقنه

خاصية " href " :

يتم استخدام خاصية <href> مع الروابط٬ ويتم التعبير عن الروابط في لغة HTML بالوسم <a> هكذا :

<a href="مثال لرابط<"عنوان الرابط</a>

لاحظ استخدام خاصية " href " في ذكر عنوان الرابط المراد الوصول إليه.

مثال :

<a href="http://profit-tech.blogspot.com">مثال لرابط</a>

وفي المثال السابق النتيجة تظهر كرابط باسم " مثال لرابط " - وهي الكلمة المذكورة في المثال بالأعلى والتي تظهر للمتصفح ويمكنك استبدالها بما تريد - وعند النقر عليه بالماوس يقودك إلى عنوان الرابط المراد الوصول إليه والمذكور في المثال وهو رابط مدونتنا ويظهر كما يلي :

مثال لرابط

وسنتعرض - بإذن الله تعالى - للروابط وتفاصيلها والعنصر <a> كثيراً خلال دورتنا تلك.

خاصية " src " في الصور :

يتم تعريف الصور في لغة HTML بالعنصر <img> .

ويمكن تعريف رابط أو مصدر الصورة " source " بالخاصية " src " كما يلي :

<img src="مصدر الصورة">

مثال لذلك :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjal-i1W-gg3ySAkmftZM3r0jeW-QxXdJAegXNaYDXVT2UO4jFeQE8Mk4n1g3SgaJGIChEsonsAQTMfAF54akdG6Pnln9l60ZzzSZHlnDiN_LhZHhRnOJJ7TbASN4R52SpFLq7g-njoJrLW/s260/Logo3.png">

وتكون النتيجة كما يلي :

خاصية " width " و " height " في الصور :

يمكنك ضبط أحجام الصور في لغة HTML عن طريق خاصيتي العرض " width " والارتفاع " height " هكذا :

<img src="رابط الصورة" width="x" height="y">

حيث أن : "x" : هو عرض الصورة و " y " : هو ارتفاع الصورة.

مثال لذلك :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjal-i1W-gg3ySAkmftZM3r0jeW-QxXdJAegXNaYDXVT2UO4jFeQE8Mk4n1g3SgaJGIChEsonsAQTMfAF54akdG6Pnln9l60ZzzSZHlnDiN_LhZHhRnOJJ7TbASN4R52SpFLq7g-njoJrLW/s260/Logo3.png" width="260" height="144">

* مع ملاحظة أن العرض والارتفاع هنا بالبيكسيل " pixel ".
وسنتطرق بإذن الله للمزيد من التفاصيل عن الصور والعنصر <img> لاحقاً في دروسنا القادمة.

خاصية " alt " في الصور :

يتم استخدام خاصية "alt" لعرض نص بديل للصورة " alternative text " في حالة تعذر عرضها نتيجة ضعف اتصال الانترنت أو كتابة رابط غير صحيح للصورة أو غيره من الأسباب.

ويتم التعبير عن هذه الخاصية هكذا :

<img src="رابط الصورة" alt="النص البديل" width="العرض" height="الارتفاع">

مثال لذلك :

<img src="https://lh3.googleusercontent.com/SNn/Logo3.png" alt="لوجو مدونة فن الربح" width="260" height="144">

وتكون النتيجة هكذا :

استخدام الأحرف الصغيرة في كتابة خواص عناصر HTML :

HTML5 لا تشترط استخدام الأحرف الصغيرة في كتابة أسماء خواص العناصر في HTML.
فمثلاً : خاصية " title " يمكن كتابتها بالأحرف الكبيرة " TITLE " أو الصغيرة " title ".

لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML .

ضرورة استخدام أقواس الاقتباس للتعبير عن قيم خواص عناصر HTML :

HTML5 لا تشترط استخدام أقواس الاقتباس حول قيم عناصر HTML هكذا : "value"name= .

فمثلاً : خاصية href التي تم شرحها بالأعلى تكتب هكذا - لاحظ الأقواس حول عنوان الرابط " " :

<a href="http://profit-tech.blogspot.com">

ويمكن كتابتها بدون أقواس اقتباس - كما يلي :

<a href=http://profit-tech.blogspot.com>

لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام أقواس الاقتباس في HTML وما شابهها مثل XHTML .

كذلك من الأهمية بمكان القول بضرورة استخدام أقواس الاقتباس في خواص عناصر HTML في بعض الحالات كمثال :

<p title=مدونة فن الربح>

مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر

</p>

والنتيجة تكون هكذا :

مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر

في نتيجة المثال السابق لو أشرت بالماوس على الفقرة المكتوبة سيظهر لك تلميح " مدونة " مع أن المفترض أن يظهر لك تلميح " مدونة فن الربح " حسب المثال بالأعلى.

ما حدث هو أن المتصفح ترجم التلميح على أنه أول كلمة فقط في الخاصية " title " بسبب وجود مسافة بين كلمات الخاصية٬ لكن لو تم وضع قيمة الخاصية " title " بين قوسي اقتباس لاعتبر كل ما بين قوسي الاقتباس - طال أم قصر - تلميحاً للفقرة و لظهر التلميح كاملاً " مدونة فن الربح " - كما بالمثال التالي :

<p title="مدونة فن الربح">

مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر

</p>

والنتيجة ستكون هكذا :

مدونة فن الربح مدونة تهدف للتعريف بطرق الربح عن طريق جوجل أدسنس وتطوير منصة بلوجر

لاحظ ظهور التلميح كاملاً " مدونة فن الربح " عند المرور بالماوس فوق الفقرة بالمثال بالأعلى بعكس المثال السابق له٬ لذلك وجب استخدام قوسي الاقتباس للتعبير عن قيمة خواص عناص HTML تفادياً لأخطاء مثل هذه وغيرها مما قد لا يخطر لك على بالٍ.

أقواس الاقتباس الزوجية أم الفردية ؟

استخدام أقواس الاقتباس الزوجية " " حول قيم خواص عناصر HTML هي الأكثر شيوعاً٬ وإن كان استخدام أقواس الاقتباس الفردية ' ' جائزاً هكذا :

<p title="مدونة فن الربح">

أو
<p title='مدونة فن الربح'>

لكن في بعض المواقف عندما يكون هناك أقواس اقتباس زوجية في قيم عناصر HTML نفسها٬ فإنه يتحتم علينا استخدام أقواس الاقتباس الفردية.

مثال لذلك :

<p title='فتح "سيف الله" بلاد فارس'>

أو هكذا

<p title="فتح 'سيف الله' بلاد فارس">

لاحظ استخدام أقواس الاقتباس بالتبادل وهي جائزة في الحالتين.

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

ونأسف على الإطالة ولكن أردت التفصيل ليسهل الفهم - والله المستعان.

وانتظرونا في التدوينة القادمة يإذن الله تعالى

الثلاثاء، 26 يوليو 2016

هيكل صفحة HTML

تكلمنا في تدوينتنا السابقة عن مقدمة تعلم أساسيات HTML وتكلمنا بشئ موجز عن هيكل وتركيب صفحة HTML٬ واليوم بإذن الله نتحدث بشئ أكثر تفصيلاً عن هذا الموضوع.

تركيب وهيكل صفحة HTML :

الصورة التالية توضح باختصار تركيب صفحة HTML.

* ويظهر في بداية الكود الموجود في الصورة الوسم التالي - باللون الأحمر : <!DOCTYPE html>

<!DOCTYPE> : تعني أن هذه الوثيقة صفحة HTML وذلك لتعدد أنواع الوثائق على الويب٬ وذكر هذا الوسم في كود HTML هام من أجل عرض صفحة الويب بطريقة صحيحة ومن أجل ذلك لابد من ذكر النوع والإصدار.

والوسم المناسب لإصدار HTML5 هو <!DOCTYPE html> وهو الأهم بالنسبة لنا ويلاحظ أنه يذكر في بداية الكود وليس لهذا الوسم كود إغلاق.

ومن الجدير بالذكر أنه غير حساس للأحرف الكبيرة أو الصغيرة " Capital or Small letters " أي أنه لا يهم كتابة الكود بالأحرف الكبيرة أو الصغيرة فكلا الأمرين سواء وجميع الحالات التالية تفي بالغرض :

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

* بعد هذا الوسم <!DOCTYPE html> مباشرة يتم كتابة هذا الوسم <html></html> وهو يعتبر كود الافتتاحية لوثيقة الويب الخاصة بـ HTML.

* بداخل هذا الوسم <html></html> يتم كتابة هذين الوسمين : <head></head> و <body></body>.

* بداخل هذا الوسم <head></head> يتم كتابة معلومات عن الوثيقة مثل العنوان والخطوط المستخدمة والكلمات المفتاحية ... إلخ مثل وسم عنوان الصفحة <title></title> والذي يذكر بداخله عنوان الصفحة الذي يظهر بأعلى الصفحة كما بالصورة بالأسفل والمعلم حوله بإطار أحمر.

* بداخل هذا الوسم <body></body> يتم كتابة الأكواد التي تصف الجزء المرئي من الصفحة " محتوى أو جسم الصفحة أو الوثيقة ".

* يلاحظ أنه لايظهر في صفحة الويب إلا الأكواد الموجودة داخل وسم جسم الصفحة <body></body> والذي يظهر باللون الأبيض بالكود بالصورة الأولى أعلى الصفحة.

* هذا الوسم <h1></h1> خاص بالعناوين الرئيسية داخل الصفحة وقد جئنا على ذكرها في تدوينة سابقة بعنوان : معرفات العناوين داخل بلوجر.

وتأتي العناوين في HTML على عدة أشكال متدرجة في حجم الخط وهي ستة وسوم كما يلي :

<h1>عنوان رئيسي</h1>

<h2>عنوان فرعي</h2>

<h3>عنوان ثانوي</h3>

<h4>عنوان ثانوي أصغر</h4>

<h5>عنوان ثانوي أصغر</h5>

<h6>عنوان ثانوي أصغر</h6>

فتخيل معي لو تم تنفيذ الكود التالي :

<h1>عنوان رئيسي</h1>

<h2>عنوان فرعي</h2>

<h3>عنوان ثانوي</h3>

<h4>عنوان ثانوي أصغر</h4>

<h5>عنوان ثانوي أصغر</h5>

<h6>عنوان ثانوي أصغر</h6>

فإن النتيجة ستكون كما يلي :

لاحظ معي تدرج حجم الخط بين كل عنوان والذي يليه - كما بالأعلى.

* هذا الوسم <p></p> يعرِّف الفقرات " paragraphs " داخل HTML هكذا :

<p>هذه الفقرة رقم 1</p>

<p>هذه الفقرة رقم 2</p>

<p>هذه الفقرة رقم 3</p>

والنتيجة ستكون هكذا :

عناصر HTML " HTML Elements " :

تحدثنا في التدوينة السابقة عن أن عنصر HTML يتكون من ( وسم البداية + محتوى العنصر + وسم النهاية ) هكذا :

<tagname>content</tagname>

ومهما كان محتوى العنصر كبيراً٬ فإن العنصر عبارة عن وسمي البداية والنهاية وما بينهما طال أم قصر.

عناصر HTML المتداخلة " Nested HTML Elements " :

من خواص عناصر HTML أنها متداخلة " nested " - أي أن العناصر تحتوي بداخلها عناصر والتي بدورها من الممكن أن تحتوي بداخلها عناصر وهكذا.

وأبسط مثال لهذا الموضوع المثال بالصورة الأولى بالأعلى :

حيث نلاحظ أن :

* العنصر <html> يحتوي بداخله العنصرين <head> و <body> .

* العنصر <head> يحتوي بداخلى العنصر <title> .
* العنصر <body> يحتوي بداخله العناصر <h1> و <p> .

وهكذا.

ضرورة إغلاق الوسم " عدم نسيان وسم النهاية لعناصر HTML " :

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

فمثلاً الكود التالي :

<html>

<body>

<p>هذه هي الفقرة رقم 1

<p>هذه هي الفقرة رقم 2

</body>

</html>

يلاحظ غياب وسمي الإغلاق للوسمين <P> بالأعلى ومع ذلك لو قمت بحفظ الملف بالكود السابق بامتداد " .html " وعند الضغط عليه ستظهر النتيجة صحيحة كما يلي :

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

عناصر HTML الفارغة " Empty HTML Elements " :

بعض عناصر HTML ليس لها محتوى " have no content " وتسمى في هذه الحالة بالعناصر الفارغة " Empty Elements ".
فمثلاً العنصر <br> من العناصر الفارغة والذي لا يحتوي على وسم إغلاق ويعبر عن البدء من سطر جديد مثل " Enter " في لوحة المفاتيح.
ومن الممكن أيضاً أن يتم إغلاق تلك العناصر في نفس وسم البداية هكذا : <br /> .

* في HTML5 لا يتطلب إغلاق العناصر الفارغة لكن من الاحتياط إغلاق العناصر الفارغة لأنه لا يناسب بعض الحالات و الإصدارات.

استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم :

وسوم HTML ليست حساسة لحالة الأحرف - كبيرة أم صغيرة " Lowercase or Uppercase Letters ".
فمثلاً : <p> هي تماماً <P> .HTML5 لا تشترط استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم٬ لكن رابطة الشبكة العالمية " WC3 " تنصح باستخدام الحروف الصغيرة في HTML وما شابهها مثل XHTML لذلك وجب التنويه.

ويكفي هذا في تدوينتنا هذه حتى لا نطيل ويصيبكم الملل - أعزائي.

وانتظرونا في التدوينة القادمة بإذن الله تعالى

الاثنين، 18 يوليو 2016

مقدمة عن أساسيات لغة HTML

لغة HTML من اللغات البرمجية الأساسية المستخدمة في تصميم مواقع الويب ولذلك سنبدأ بها بإذن الله تعالى - كما وعدناكم - بتفصيل كبير بحيث تناسب المبتدئين وذلك قدر الإمكان والله المستعان.

ماذا تعني كلمة HTML؟

HTML : هي اختصار للجملة التالية : Hyper Text Markup Language
وتعني " لغة ترميز أو توصيف النص التشعبي "٬ دعك من الترجمة الحرفية فهي لا تعنينا كثيراً.
وتعتبر هذه اللغة من أقدم اللغات المستخدمة في تصميم صفحات الويب وتستخدم في تشكيل هيكل صفحة الويب ومحتوياتها وتميييز العناوين من الفقرات من غيرها.

وأخذت هذه اللغة العديد من المراحل والإصدارات من HTML عام 1991م حتى وصلت إلى HTML5 عام 2014 م.
وتستخدم هذه اللغة مجموعة من الوسوم " tags " لإصدار التعليمات إلى المتصفح والذي يقوم بدوره بترجمتها وتنفيذها.

ما هي الوسوم " tags "؟

الوسوم أو " tags " بالإنجليزية عبارة عن الأكواد التي يتم من خلالها إصدار التعليمات البرمجية للمتصفح ليقوم بتنفيذها - كما ذكرنا بالأعلى.
ويوضع الوسم بين علامتي أكبر من " > " وأصغر من " < ".

وتنقسم الوسوم إلى نوعين :

1- وسم بداية " Start Tag " : ويكون على الصورة : <tag name>
مثل : <html> و <body> و <h1> و <h2> و <p> و <div> ... إلخ
2- وسم نهاية " End Tag " : ويكون على الصورة : </tag name>
مثل : </html> و </body> و </h1> و </h2> و </p> و </div> ... إلخ

* ملاحظة : يتم كتابة وسم النهاية " End Tag " مثل وسم البداية " Start Tag " أي أنهما متشابهان مع اختلاف بسيط وهو إضافة شارطة مائلة " Slash " في حالة وسم النهاية " End Tag ".
* ملاحظة : يسمى أيضاً وسم البداية " Start Tag " بوسم الفتح أو الافتتاح " Opening Tag " و وسم النهاية " End Tag " بوسم الإغلاق " Closing Tag ".

ويتكون عنصر HTML من : وسم البداية " Start Tag " + محتوى العنصر " Content " + وسم النهاية " End Tag ".

هكذا :

<tagname>content</tagname>

ولا يقوم متصفح الويب بإظهار الوسوم " Tags " كما هي ولكن يقوم بتنفيذ الأمر الخاص بالوسم على المحتوى الموجود بين وسمي البداية والنهاية كما بصفحة الويب البسيطة التالية :

وهي تنفيذ لكود HTML التالي :

<html>

<head>

<title>

My first page

</title>

</head>

<body>

<h1>My first heading</h1>

<p> This is my first paragraph</p>

</body>

</html>

تركيب وهيكل صفحة HTML :

فيما يلي تصور لهيكل صفحة HTML :

كما نلاحظ جميعاً أن أبسط صفحة HTML تبدأ بالوسم <html> وتنتهي به أيضاً </html> وبداخله الوسمان <head></head> و <body></body> وبداخل الوسم " head " الوسم <title></title> .

وكما يظهر في الصورة بالأعلى أن الجزء الخاص بجسم الصفحة " body " والمعلم باللون الأبيض هو فقط ما يظهر بصفحة الويب الموجود بمنطقة رأس الصفحة " head " فإن به إعدادات الصفحة من تحديد اللغة وتوصيف مجال الصفحة والكلمات المفتاحية ... إلخ مما سنأتي على ذكره لاحقاً كل في حينه بإذن الله.

محرر أكواد HTML :

في المراحل المتقدمة من شروحاتنا في HTML ستكون الأكواد التي تقوم بتحريرها كثيرة وخصوصاً عند تصميم الإضافات أو القوالب كاملة٬ لذلك كان لزاماً علينا استخدام بعض البرامج التي تنظم شكل الأكواد وتميز بدايات الوسوم ونهاياتها بألوان مختلفة بحيث يسهل تحريرها و التعامل معها.

ومن أشهر تلك المحررات أو البرامج :

1- برنامج Notepad ++ : وقد سبق وتحدثنا عنه في تدوينة سابقة بعنوان : برنامج ++Notepad لعرض و تنسيق قوالب و إضافات بلوجر.

2- برنامج Komodo Edit : ويمكنك تحميله من الرابط التالي : http://komodo-edit.ar.uptodown.com

ملاحظة هامة : و جدير بالذكر في هذا المقام أنه بعد تحرير أي كود HTML داخل تلك المحررات التي ذكرناها بالأعلى٬ يتم حفظ الملف بامتداد " htm. " أو " .html " حتى يظهر كصفحة ويب عند النقر عليه لفتحه.

وهذا مثال صغير لكود html :

<html>

<head>

<title>

عنوان الصفحة

</title>

</head>

<body>

<h1>عنوان رئيسي</h1>

<p>مقال أو فقرة رقم 1</p>

<p>مقال أو فقرة رقم 2</p>

<p>مقال أو فقرة رقم 3</p>

<p>مقال أو فقرة رقم 4</p>

</body>

</html>

وهذه هي النتيجة عند النقر على الملف بعد حفظه بامتداد " .html " :

وانتظرونا في التدوينة القادمة بإذن الله تعالى

Banner 728

إعلانات تحت الهيدر

العناوين في لغة HTML

وسوم العناوين داخل HTML :

أهمية العناوين :

الأسطر الأفقية في لغة HTML :

العنصر " head " في لغة HTML :

خواص عناصر HTML

خواص عناصر HTML :

ما هي صيغة خواص عناصر HTML ؟ وأين يتم وضعها ؟

خاصية " lang " :

خاصية " title " :

خاصية " href " :

خاصية " src " في الصور :

خاصية " width " و " height " في الصور :

خاصية " alt " في الصور :

استخدام الأحرف الصغيرة في كتابة خواص عناصر HTML :

ضرورة استخدام أقواس الاقتباس للتعبير عن قيم خواص عناصر HTML :

أقواس الاقتباس الزوجية أم الفردية ؟

هيكل صفحة HTML

تركيب وهيكل صفحة HTML :

عناصر HTML " HTML Elements " :

عناصر HTML المتداخلة " Nested HTML Elements " :

ضرورة إغلاق الوسم " عدم نسيان وسم النهاية لعناصر HTML " :

عناصر HTML الفارغة " Empty HTML Elements " :

استخدام الحروف الصغيرة " Lowercase Letters " في كتابة الوسوم :

مقدمة عن أساسيات لغة HTML

ماذا تعني كلمة HTML؟

ما هي الوسوم " tags "؟

تركيب وهيكل صفحة HTML :

محرر أكواد HTML :

اشترك في خدمة البريد ليصلك جديدنا

اشترك في خدمات المتابعة

اشترك في قناة المدونة على يوتيوب

مواقع مفيدة

المشاركات الشائعة

مساحة إعلانية

مساحة إعلانية

التسميات