كيفية تنسيق صفحة الويب فى لغة اتش تى ام ال html

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

تنسيق صفحة الويب فى لغة اتش تى ام ال html

تنسيق صفحة الويب فى لغة HTML

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

تنسيق النصوص فى صفحة الويب بلغة html

1- العناوين ( HTML Headings ) : وتستخدم العناوين في صفحات الويب لتمييز وتنسيق المحتوى داخل الصفحة ولضبط السيو في الموقع. وترتب العناوين حسب أهميتها من H1 حتى H6 وتكتب داخل القسم <body>.

2- الفقرات (p> (paragraph> : تمثل فقره نصية لها بداية تعرف بالوسم <p> ونهاية </p> وتعرض الفقرات علي شكل أقسام يفصل بينها بمسافه رأسية.

3- (pre> (preformatted text> : نص منسق يتيح هذا العنصر استخدام مسافات بين الكلمات ويعرض النص كما هو مكتوب في الملف حيث يقرأ التنسيقات وهذا ما يميزه عن البراجراف.

4- (b>(bold> : يمثل نص يختلف عن باقي النصوص حيث يعرض بخط عريض ولا تكون له أهميه بخلاف العنصر الذى يليه.

5- < strong> : يعرض النص بخط عريض وعادة ما يكون النص مهم.

6- (i>(italic> : يمثل نص متميز عن باقي النصوص ويكتب بخط مائل.

7- (em>(emphasized>: يعرض النص بخط مائل ويعطى تأكيد للعنصر وكلما زاد التشعب زاد التأكيد علي العنصر.

8- (mark>(marked text>: يستعمل العنصر لعمل إضاءة علي الكلمة المراد تحديدها لأن له أهميه في سياق معين.

9- (small>(smaller text>: يؤدي هذا العنصر إلي تقليل حجم الخط بدرجه عن المتوسط.

10- (del>(deleted text>: يمثل نص حذف من الصفحة ويعرض غالباً ويتوسطه خط وتستخدم في حالة عمل خصم مثلاً على منتج معين مع إظهار السعر القديم قبل الخصم مشطوب عليه.

11- (ins>(inserted text>: يمثل نص أضيف إلي الصفحة ويعرض وتحته خط.

12- (sub>(sub script>: يمثل جزء من النص الذى يعرض في مستوى أدني من المستوى الرئيسي وعادة ما تكون في المعادلات الكيميائية.

13- (sup>(super script>: يمثل جزء من النص الذى يعرض في مستوي أعلي من المستوي الرئيسي وعادة ما تستخدم في كتابة المعادلات الرياضية.

14- (br>(break line>: يقوم بعمل سطر جديد أو مسافة رأسية بين الجزء الذي تمت كتابته و الجزء الذي يليه.

15- (hr>(horozintal line>: يقوم بعمل خط أفقي إلي النهاية العرضية للصفحة.

تنسيق الصور فى صفحة الويب بلغة اتش تى ام ال

يمكن عرض الصور داخل صفحه HTML وذلك من خلال إضافة الوسم <img>.

حيث يقوم بعرض الصور اعتمادا علي مصدر الصورة source ( src ) فمثلا لعرض صوره اسمها Tiger. وامتداد الصورة ( jpg ) ومكان الصورة بجانب الصفحة تطبق الحالة الأولي.

وإذا كانت الصورة موجودة في فولدر بجانب الصفحة تطبق الحالة الثانية . ويمكن إضافة بعض الخاصيات مثل (width): وهي خاصية تقوم بتحديد عرض الصورة، وأيضاً يمكن إضافة خاصية (height): وتقوم بتحديد ارتفاع الصورة.

وكذلك يمكن إضافة خاصية (alt) ويمكن من خلالها وضع نص يظهر في حالة عدم ظهور الصورة.
وأخيراً يمكن إضافة خاصية (title) وتعمل كـ شادو للصورة عند الوقوف على الصورة بالماوس يظهر الكلام.

في الحالة الأولي إذا كانت الصورة في نفس ملف الصفحة.

”Img src=”photo name.photo extention :

الحالة الثانية إذا كانت الصورة في فولدر بجانب الصفحة.

”Img src=”folder name/photo name.photo extention :
تنسيق الصور فى صفحات الويب بلغة html

تنسيق الروابط فى صفحات الويب بلغة html

يمكن عرض الروابط داخل صفحه HTML وذلك من خلال إضافة الوسم <a> وهو اختصار (anchor). حيث يقوم بعرض اللينكات اعتمادا على (href) اختصار (hyper link reference).

فمثلا لعرض ملف أو موقع في نفس الصفحة نطبق الحالة الأولي. وإذا كنت مستخدماً (target”_blank ”) يعرض الملف أو الموقع في صفحه أخري وتطبق الحالة الثانية.

ويمكن إضافة صورة وذلك عن طريق إضافة الوسم < img > بعد نهاية  attribute href وبذلك يفتح الموقع عند الضغط علي الصورة.


 a href=”index.html” target”_self ”> open index file <

يفتح الملف في نفس الصفحة  :</a>


a href=”index.html” target”_blank ”> open index< 

           الملف يفتح في صفحة أخري  :<file</a 


<” a href=”https://www.google.com” target”_self >

  يفتح الموقع في نفس الصفحة وإذا كانت :<open index file </a

 يفتح في صفحة أخري   target”_blank”


a href=”index.html” target”_blank ><img src>

:<tiger.jpg” width=”42px” height=”42px”></a

في هذه الحالة يفتح الملف عند الضغط علي الصورة

تنسيق الروابط فى صفحات الويب بلغة html
الدروس السابقة:

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -