ما هي أساسيات لغة HTML؟

شاركShare on Facebook13Tweet about this on TwitterShare on Google+2Pin on Pinterest0Share on Tumblr0Share on StumbleUpon0Share on LinkedIn0

 

html basics

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

العناوين HTML Heading

  • اذا أردنا اضافة العناوين نستخدم  6 وسوم تبدأ من <h1> الى <h6>
  • نستخدم وسم <h1> للعناوين الأكثر أهمية و <h6> للعناوين الأقل أهمية.
  • عندما تقرأ صفحات HTML وتجد بها وسم Heading تقوم اوتوماتيكيا بترك مسافة بسيطة قبل وبعد العنوان.

أهمية استخدام HTML Heading

  • يستخدم وسم Heading للعناوين فقط ولا يستخدم لتكبير حجم الخط أو تعريضه.
  • تستخدم محركات البحث وسم Heading لفهرسة محتوى صفحات الويب.
  • قد يستخدم الزوار العناوين للتعرف على محتويات صفحة الويب لذلك من المهم أن تستخدم Heading لتوضيح محتوى صفحة الويب.
  • يستخدم <h1> للعناوين الرئيسية و يليه <h2> ومن ثم <h3> للأقل أهمية وهكذا.

واليك مثال:

<h1>هذا عنوان</h1>
<h2>هذا عنوان</h2>
<h3>هذا عنوان</h3>

الفقرة HTML Paragraph

  • اذا أردنا اضافة فقرة نستخدم وسم <p> واليك مثال:

<p>هذه فقرة</p>
<p>هذه فقرة أخرى</p>

وسم <br />

  • يستخدم وسم <br /> في حال أردنا تقسيم الفقرة الى سطور جديدة منفصلة واليك مثال:
<p>هذا<br />جزء<br />من فقرة</p>
ستكون النتيجة كالتالي:
هذه
جزء
من فقرة

الروابط HTML Hyperlinks

  • معنى Hyperlink قد تكون كلمة أو مجموعة من الكلمات أو صورة يضغط عليها لتقوم بنقل الزائر الى قسم آخر في الموقع أو ملف للتحميل.
  • عندما نقوم بتحريك مؤشر الماوس فوق Hyperlink فانها تتحول تلقائيا الى شكل يد صغيرة.
  • اذا أردنا اضافة رابط نستخدم  وسم <a> واليك المثال:

<a href=”http://arab-web-designer.com”>هذا رابط</a>

يستخدم وسم <a> بطريقتين :

  • انشاء رابط Link للربط بين صفحات الويب باستخدام خاصية href
  • انشاء مرجع Bookmark داخل الصفحة باستخدام خاصية name

 


يحدد عنوان الرابط عبر خاصية href ( سنتعرف أكثر على الخصائص لاحقا )

الصور HTML Images – خاصية Src

  • اذا أردنا اضافة الصور نستخدم  وسم <img>
  • يحتوي وسم <img> على خصائص Attribute فقط وليس لديه وسم اغلاق مثل باقي الوسوم ويسمى وسم فارغ.
  • تعرض الصور في صفحة HTML يجب استخدام خاصية src وهي اختصار لكلمة source ويكون URL هو قيمة الخاصية src.
  • قيمة URL تشير الى مكان تخزين الصورة

واليك مثال:

<img src=”arabwebdesign.jpg” width=”150″ height=”170″ />
اسم الصورة ومقاستها هي خصائص.

الصور HTML Images – خاصية ALT

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

واليك مثال:

<img src=”airplane.gif” alt=”طائرة” />
نصيحة مفيدة:
لا تستخدم صورا كثيرة في صفحة الويب حتى لا تؤثر على عملية التصفح وتبطئها.
شاركShare on Facebook13Tweet about this on TwitterShare on Google+2Pin on Pinterest0Share on Tumblr0Share on StumbleUpon0Share on LinkedIn0

Comments

comments

اضف رد

لن يتم نشر البريد الإلكتروني . الحقول المطلوبة مشار لها بـ *

*