HTML مراجعة درس ((1))

موضوع: HTML مراجعة درس ((1)) 10/9/2010, 11:47

مراجعة حول اللغة HTML

1-1: مقدمة.
جاءت التسمية HTML من الاسم (Hyper Text Markup Language) أي لغة تأشير النصوص الفائقة, حيث تتكون هذه اللغة من مجموعة من الأكواد التي تنسق في ملف نصي و يحفظ بأحد الامتدادين (.html) أو (.htm) ليتم استعراضه على أحد مستعرضات الويب (مثلاً Internet Explorer), و هناك العديد من محررات لغة الـ HTML و الرائد بينها هو برنامج MS Front Page, تسمى أكواد هذه اللغة أوسمة و تتألف كل مجموعة من زوج من الأوسمة, وسم بداية شكله<tag>, و وسم نهاية</tag>, حيث يدل المحرف (/) على أن هذا الوسم هو وسم إغلاق, هناك العديد من الأوسمة ليس لها وسم إغلاق سنتعرف عليها لاحقاً.

1-2: البنية العامة لملف الـ HTML.
تتألف البنية العامة لملف الـ HTML من الأجزاء المبينة في الشكل التالي:
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
جسم الصفحة, و كافة ما سيعرض على المستعرض
</body>
</html>
يحصر الزوج <html> و </html> ملف الـ HTML كاملاً بما فيه من الترويسة و العنوان و جسم الملف, فلا بد أن نبدأ و ننتهي بهذا الزوج, أما الزوج <head> و </head> فيحدد ترويسة الملف و يحتوي مجموعة من الأوسمة أهمها <title> و </title> الذي يحدد عنوان الصفحة الذي سيعرض في شريط العنوان للمستعرض عند عرض الصفحة, أما الزوج <body> و </body> فيحتوي جسم الملف الذي سيترجم و يعرض في المستعرض.

1-3: أوسمة تنسيق النصوص.
1. وسم الفقرة <p>…..</p> و الذي يحدد فقرة من النص تنسق كلها حسب ما ورد من خواص ضمن هذا الوسم, مثلاً:
<p align="center" dir="rtl">
جسم الفقرة
</p>
سيتم عرض هذه الفقرة و تكون محاذاتها في المنتصف, و جهة النص من اليمين إلى اليسار.

2. وسم السطر الجديد <br>, و الذي ينشئ سطر جديد ضمن النص الذي ورد فيه و في مكان وروده, مثلاً:
You can take any of: <br> red <br> blue <br> green
سيعرض كما يلي:
You can take any of:
Red
Blue
green

3. وسم الخط <font…>…</font> الذي يأخذ الشكل التالي:
<font face="Tahoma" size="3" color="#ff0000">
النص الذي نريد أن يكون بهذا التنسيق
</font>
سيعرض النص بخط Tahoma و بالحجم 3 و سيكون لونه أحمر.

4. الوسوم الثلاثة المعروفة <b>…</b> و <i>…</i> و <u>…</u>, و التي تجعل النص عريض و مائل و مسطر على الترتيب, مثلاً:
<b><i><u>I am Bilal</u></i></b>
سيعرض الجملة بالتنسيق:
I am Bilal
انتبه تغلق الوسوم بترتيب معاكس لترتيب فتحها.

5. الحجوم المعرفة للنصوص بالوسوم <h1>…</h1> و<h2>…</h2> و ذلك حتى <h7>…</h7>, و التي تجعل الخط بحجوم مختلفة (1 الصغير 2 أكبر فأكبر حتى 7 أكبر حجم خط), مثلاً:
<h1>Size1</h1><br>
<h2>Size2</h2><br>
<h3>Size3</h3><br>
<h4>Size4</h4><br>
<h5>Size5</h5><br>
<h6>Size6</h6><br>
<h7>Size6</h7><br>

سيكون لها الخرج التالي:
Size1
Size2
Size3
Size4
Size5
Size6
Size7

توجد أيضاً وسوم أخرى متعددة لتنسيق النص و لكن ما سبق أهمها.

1-4: وسوم الارتباط.
و التي تعتبر من الأساسيات التي لا غنى عنها في الموقع إذ تستخدم للتنقل بين الصفحات و للتنقل في الصفحة الواحدة عندما تكون طويلة,مثلاً:
<a href="page1.html" >Go To Page1</a>
سيولد في الصفحة الحالية الارتباط Go To Page و عند النقر عليه ننتقل إلى الصفحة Pgae1.html المحددة ضمن href="….", و هذا رابط بين صفحتين, أما الرابط بين موقعين ضمن الصفحة فله الشكل:
<a href="#position">Go To Position</a>
…….
…….
…….
…….
<a name="position">Here Is The Position</a>
يولد الكود السابق ارتباط Go To Position ضمن الصفحة, و عند النقر عليه ننتقل إلى العبارة Here Is The Position.
انتبه إلى أن خاصتي href و name لهما نفس القيمة ما عدا أن href تزيد بـ # قبل القيمة.
إن الرابط الذي يقوم بإرسال بريد الكتروني له الشكل:
<a href="mailto:Name@WebSite.com">Send To Name</a>
يولد الكود السابق عبارة Send To Name و التي بالنقر عليها يتم فتح برنامج البريد الافتراضي (مثلاً: Outlook Express), و في حقل Send to قد كتب البريد الالكتروني المحدد ضمن الارتباط (Name@WebSite.com).