بسم الله الرحمن الرحيم
HTML
هذه اللغة التي هي من لغات الانترنت بل تعتبر من أهمها
والتي لطالما سمعنا بها ولكنّ لم ندقق بمعناها بل كنا نمر عليها مرور الكرام
اليوم وبإذن الله عز وجل سنقدم لكم شرحاً موجزاً لما تعنيه
بسم الله نبدأ
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
ماهي ال HTML ؟
هي اختصار لكلمات :
Hyper ديناميكي
Text نص
Markabel معلم
Language لغة
كما يرمز لها بلغة ترميز النص المترابط .
و هي ببساطة عبارة عن نص تكتبه بأي منسق كلمات, حتى ولو استخدمت المفكرة.
ولكن ليس تماما كأي نص عادي، فالبرغم من كتابتك للنص العادي إلا أنك تحتاج إلى وضع
علامات او "واصفات" تدعى Tags
وتلك العلامات التى تضعها هي التى ستفسر كيفية عرض النص
والتعامل معه بالنسبة إلى برنامج مستعرض الإنترنت .
مثال :
<strong> كيف الحال </strong>
فالنص العادي هو "كيف الحال" بينما ما يسبقه <strong> فهو العلامة التى ستترجم في برنامج المستعرض
وتعلمه بأن النص الذي سيليها يجب أن يكون بنمط سميك.
والعلامة الموجودة في النهاية وهي <strong/> ستعلم المستعرض بأن حالة النمط السميك قد إنتهت،
فالشرطة المائلة هي اذا علامة لنهاية النمط .
لاحظ ان العلامات أو الواصفات "Tags" هي عادة عبارة عن
حرف أو حرفين أو كلمة باللغة الإنجليزية ترمز لنمط معين،
كما في مثالنا السابق ، رمزت الكلمة strong إلى نمط السماكة للحرف .
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
الشكل الذي يجب أن تكون عليه الصفحة !
<HTML>
<HEAD>
<TITLE>عنوان صفحتي</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
فالخطوة الأولى هي وضع <HTML> في بداية المستند و وضع <HTML/> في نهاية المستند.
وتلك علامات تعلم برنامج المستعرض بأنه سوف يتعامل هنا مع صفحة مكتوبة بال HTML.
اما الخطوة الثانية فهي تقسيمنا المستند إلى قسمين.
القسم الأول وضعنا له علامة <HEAD> و انهيناه ايضا بعلامة <HEAD/> .
وهو القسم الخاص بمقدمة الصفحة أو راس الصفحة ان صح التعبير.
لا حض أننا وضعنا في القسم السابق -اعنى قسم الراس- العلامة <TITLE> والخاصة بعنوان
المستند أو الصفحة، و وضعنا داخلها العنوان ثم انهينا علامة العنوان بكتابة <TITLE/> .
الخطوة الثالثة و الآخيرة هي وضعنا للقسم الثاني من المستند أو الصفحة وهو القسم الذي سيظهر فيه نصك أو صورك أو وصلاتك ...الخ.
و علامة هذا القسم هي <BODY> والتى تدل على جسم الصفحة أو محتواها.
وكما فعلنا بجميع العلامات السابقة يجب أن ننهي هذا القسم ايظا باستخدام العلامة نفسها ولكن بكنابة <BODY/> .
مثال بسيط :
<P><FONT FACE="ARABIC"><STRONG>هل تفهم هذا</STRONG></FONT></P>
شرح المثال :
العلامة الأولى <P> ترمز إلى بداية مقطع جديد ، انهينا المقطع في آخر السطر بوضع العلامة <P/> .
العلامة الثانية <FONT FACE="ARABIC"> خاصة بالبنط الذي سنستخدمه لعرض النص ، و انهينا إستخدام البنط بوضع <FONT/> .
العلامة الثالثة <STRONG> لجعل النص يبدو سميكا، وانهينا حالة سمك النص باستخدام <STRONG/> .
اما هل تفهم هذا فهو النص الذي سيعرض في مقطع جديد و باستخدام البنط ARABIC وبحالة سميكة.
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
الوصلات
<A HREF="http:///www.ttfnn.com"> وصلة لموقع بوابة تتفنن </A>
الوصلات ليس بالضرورة أن تكون لموقع أو لصفحة معينة بل قد تكون لملف في جهازك أو صورة أو بريد.
<a href="file:///E:/Ttfnn/SSS09.gif">صورة</a>
<a href="mailto:ttfnn@ttfnn. com">بريد</a>
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
الصور
<img src="file:///C:/pic.gif" width="120" height="60"alt="نص يظهر خلال تحميل الصورة أو الإشارة إليها">
بعد كلمة src والتى ترمز إلى المصدر يوجد اسم ملف الصورة ثم يليه عرضها و إرتفاعها.
كما استخدمنا alt والتي ستظهر نص مكتوب اثناء تحميل الصورة أو عند عدم عرض الصورة.
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
النص
<u><em><strong> النص </strong></em></u>
العلامة <u> خاصة بخط تحت النص
والعلامة <em> خاصة بالخط المائل
والعلامة <strong> خاصة بالخط السميك.
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
اتجاه النص "للمستعرضات التى تدعم ذلك فقط "
<p dir="rtl">
لاحظوا أننا وضعنا العلامة dir والخاصة بالاتجاه بعد علامة المقطع أو الفقرة ،
ثم حددنا العلامة بوضع "rtl" والتى تعني من اليمين إلى الشمال.
ولعكس العملية فقط استبدل "rtl" بوضع "ltr" .
يمكن وضع العلامة السابقة في البداية <"html dir="rtl> عندها
سيتم تغير اتجاه الصفحة كاملة لتعرض من اليمين إلى الشمال.
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
التعداد الرقمي و النقطي و التعريفات المصطلحية
<ul>
<li>تعداد نقطي</li>
<li>تعداد نقطي</li>
</ul>
<ol>
<li>تعداد رقمي</li>
<li>تعداد رقمي</li>
</ol>
<dl>
<dt>مصطلح</dt>
<dd>تعريف المصطلح أو بياناته</dd>
<dt>مصطلح ثاني</dt>
<dd>تعريف المصطلح أو بياناته</dd>
</dl>
ْْْْXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXX
كل ما قيل سابقا قد يعتبر هراء أو لغو لا فائدة منه..!!
لأنه حالياً يوجد العديد من البرامج التي يمكن أن تصمم كل ما قيل سابقا و تزيد عليه بدون أدنى كتابة.
أي كل ما عليك فعله هو أن تحدد خياراتك أو تقوم بضغط هذا أو ذاك ..
و تكون قد اتممت بناء صفحة كان لا يقدر عليها سابقا إلا المحترفين .
ولكنّا و بالرغم من ذلك رغبنا بأن تفهم ماذا يدور في الخلف ..
لكي تستطيع أن تقوم بتعديل الأخطاء ان وقعت لاسمح الله.
لعلنا وفقنا ولو بشيء بسيط ..
وفقكم الله جميعاً لما يحب ويرضى ..
شكرا لكم
فريق عمل تتفنن
