تعرف على لغة Html لتصمم موقعك الخاص, موضوع مفيد للمبتدئين

#1 05-06-21, 05:23 PM

°ˆ~*¤®§(*§السلام عليكم§*)§®¤*~ˆ°

اليوم سوف نتطرق للغة HTML و هي مجموعة من الاوامر التي تساعد في تصميم اي صفحة على الانترنيت

بسم الله الرحمن الرحيم نبدء

هي اختصار لكلمات: Hyper ديناميكي - Text نص - Markabel معلم - Language لغة. كما يرمز لها بلغة ترميز النص المترابط.

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

خذ مثلا:

 كيف الحال 

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

لاحظ ان العلامات أو الواصفات "Tags" هي عادة عبارة عن حرف أو حرفين أو كلمة باللغة الإنجليزية ترمز لنمط معين ، كما في مثالنا السابق ، رمزت الكلمة strong إلى نمط السماكة للحرف.

الشكل الذي يجب أن تكون عليه الصفحة!

<HTML>
<HEAD>
<TITLE>عنوان صفحتي</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

فالخطوة الأولى هي وضع <HTML> في بداية المستند و وضع <HTML/> في نهاية المستند. وتلك علامات تعلم برنامج المستعرض بأنه سوف يتعامل هنا مع صفحة مكتوبة بال HTML.

اما الخطوة الثانية فهي تقسيمنا المستند إلى قسمين. القسم الأول وضعنا له علامة <HEAD> و انهيناه ايضا بعلامة <HEAD/> . وهو القسم الخاص بمقدمة الصفحة أو راس الصفحة ان صح التعبير.

لا حض أننا وضعنا في القسم السابق -اعنى قسم الراس- العلامة <TITLE> والخاصة بعنوان المستند أو الصفحة ، و وضعنا داخلها العنوان ثم انهينا علامة العنوان بكتابة <TITLE/> .

الخطوة الثالثة و الآخيرة هي وضعنا للقسم الثاني من المستند أو الصفحة وهو القسم الذي سيظهر فيه نصك أو صورك أو وصلاتك ...الخ. و علامة هذا القسم هي <BODY> والتى تدل على جسم الصفحة أو محتواها. و كما فعلنا بجميع العلامات السابقة يجب أن ننهي هذا القسم ايظا باستخدام العلامة نفسها ولكن بكنابة <BODY/> .

مثال بسيط:

هل تفهم هذا

اليك شرح المثال:

العلامة الأولى ترمز إلى بداية مقطع جديد ، انهينا المقطع في آخر السطر بوضع العلامة .

العلامة الثانية خاصة بالبنط الذي سنستخدمه لعرض النص ، و انهينا إستخدام البنط بوضع .

العلامة الثالثة لجعل النص يبدو سميكا، وانهينا حالة سمك النص باستخدام .

اما هل تفهم هذا فهو النص الذي سيعرض في مقطع جديد و باستخدام البنط ARABIC وبحالة سميكة.

الوصلات

<A HREF="http:///www.2ms-tuning.com"> وصلة لموقعي الخاص </A>

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

<a href="file:///E:/NabNet/Sea01.gif">صورة</a>
<a href="mailto:]Dragon_Z@mail.com">بريد</a>

الصور

<img src="file:///C:/pic.gif" width="38" height="60"alt="نص يظهر خلال تحميل الصورة أو الإشارة إليها">

بعد كلمة src والتى ترمز إلى المصدر يوجد اسم ملف الصورة ثم يليه عرضها و إرتفاعها. كما استخدمنا alt والتي ستظهر نص مكتوب اثناء تحميل الصورة أو عند عدم عرض الصورة.

النص

 النص 

العلامة خاصة بخط تحت النص و العلامة خاصة بالخط المائل و العلامة خاصة بالخط السميك.

اتجاه النص "للمستعرضات التى تدعم ذلك فقط ":



لاحظ أننا وضعنا العلامة dir والخاصة بالاتجاه بعد علامة المقطع أو الفقرة ، ثم حددنا العلامة بوضع "rtl" والتى تعني من اليمين إلى الشمال. و بالطبع لعكس العملية فقط استبدل "rtl" بوضع "ltr" . يمكن وضع العلامة السابقة في البداية <"html dir="rtl> وعندها سيتم تغير اتجاه الصفحة كاملة لتعرض من اليميم إلى الشمال.

التعداد الرقمي و النقطي و التعريفات المصطلحية:

<ul>
<li>تعداد نقطي</li>
<li>تعداد نقطي</li>
</ul>

<ol>
<li>تعداد رقمي</li>
<li>تعداد رقمي</li>
</ol>

<dl>
<dt>مصطلح</dt>
<dd>تعريف المصطلح أو بياناته</dd>
<dt>مصطلح ثاني</dt>
<dd>تعريف المصطلح أو بياناته</dd>
</dl>

خاتمة

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

ولكن و بالرغم من ذلك يجب أن تفهم ماذا يدور في الخلف .. لكي تستطيع أن تقوم بتعديل الأخطاء ان وقعت

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[ شرح ] : شرح جديد : أنشئ نظام ويندوز خاص بك + مدمج معه Sp3 + [شرح بأكثر من 35 صورة] للمبتدئين!	الفهد	منتدى الأنترنت والكمبيوتر	0	08-10-16 08:07 AM
أنشئ نظام ويندوز خاص بك + مدمج معه Sp3 + [شرح بأكثر من 35 صورة] للمبتدئين!	الفهد	منتدى الأنترنت والكمبيوتر	0	08-09-24 03:33 PM
[شرح] : بالفيديو للمبتدئين فقـط ! كيفية اضافة قسم جديد للمنتدى	الفهد	منتدى تطوير vBulletin	0	08-09-05 04:37 AM

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)