الرئيسية / HTML / تعلم لغة HTML في يوم واحد - الجزء الأول

تعلم لغة HTML في يوم واحد - الجزء الأول

مبرمج يصمم موقع الكتروني

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

الوسم:

<html>  و <body>

شرحه:

<html> يعلن عن بدء صفحة HTML و وسم <body> هو الجزء الذي فيه المحتويات الظاهرة للمستخدم.

مثال:

<!DOCTYPE html>
<html>
<body>
<h1>العنوان الأول</h1>
<p>الفقرة الاولى.</p>

</body>
</html>


الوسم:

<h1> الى <h6>

شرحه:

تستخدم للعناوين الرئيسية و الفرعية و الأهمية تبدأ من رقم 1 حتى 6 الأقل أهمية وهي مفيدة فيما يعرف بتهيئة المواقع لمحركات البحث SEO

مثال:

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


الوسم:

<p>

شرحه:

يستخدم لعرض الفقرات النصية.

مثال:

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


الوسم: 

<a>

شرحه:

يستخدم في عمل روابط سواء لمواقع أو اي شيء على الانترنت.

مثال:

<a href="http://www.w3schools.com">This is a link</a>


الوسم:

<img>

شرحه:

يستخدم لعرض الصور في الصفحة.

مثال:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

الوسم:

<table>

شرحه:

يستخدم لبدء عمل جدول و تتبع الوسوم التالية:

<tr> : لعمل صف داخل الجدول
<th> : يستخدم لعمل خلية في رأس الجدول أو عنوان العمود
<td> : لعمل خلية داخل الجدول أو بمعنى آخر عمود داخل الجدول

مثال:

<table border="1">
  <tr>
    <th>عنوان العمود الأول</th>
    <th>عنوان العمود الثاني</th>
  </tr>
  <tr>
    <td>معلومة في الخلية الاولى</td>
    <td>معلومة في الخلية الثانية</td>
  </tr>
 </table>

الى هنا انتهى الجزء الأول من هذه السلسلة المختصرة, و يمكنك مواصلة قراءة الجزء الثاني من هذه التدوينة.
 اذا كنت جيداً في اللغة الانجليزية بإمكانك البدء في هذا الموقع لتعلم HTML
http://www.w3schools.com/html/ 



تعلم لغة HTML في يوم واحد - الجزء الأول تعلم لغة HTML في يوم واحد - الجزء الأول تمت مراجعته من قبل احمد ادم في يناير 21, 2016 تقييم: 5

ربما يعجبك أيضا

الاشتراك في: تعليقات الرسالة ( Atom )

أضف تعليقs

هناك 3 تعليقات:

  1. Unknown25 أغسطس 2016 في 9:14 م

    اقسم انكم تساعدون الذي يريد ان يتعلم هذه التقنيه باخلاص وتفاني ولكن المقالات لا تعطي الشيء الكثير ارجوا التفاعل مع من يريد التعلم باعطاء اوفر للمعلومات وشكرا لكم واتمنى لكم النجاح الباهر المفعم بالحب والاخترام

    ردحذف
  2. M119 ديسمبر 2017 في 7:55 م

    متواجد

    ردحذف
  3. Sami Ben Chayar17 يوليو 2018 في 7:16 م

    عند وضع الصورة على هذا النحو
    كيف أحدد الصورة التي أريد أظهرها ؟

    ردحذف