أمثلة أساسية ل HTML

لا تقلق إذا كانت هذه الأمثلة تستخدم علامات لم تتعلمها.

سوف تتعلم عنها في الفصول القادمة.


مستندات HTML

يجب أن تبدأ كافة مستندات HTML بإعلان نوع المستند: .<!DOCTYPE html>

يبدأ مستند HTML نفسه ب .<html></html>

الجزء المرئي من مستند HTML بين و . <body></body>

مثال

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>

<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>

</body>
</html>

عناوين HTML

يتم تعريف عناوين HTML مع علامات إلى.<h1><h6>

<h1> يحدد العنوان الأكثر أهمية. يحدد العنوان الأقل أهمية: <h6>

مثل

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>

<h1>العنوان رقم 1</h1>
<h2>العنوان رقم 2</h2>
<h3>العنوان رقم 3</h3>
<h4>العنوان رقم 4</h4>
<h5>العنوان رقم 5</h5>
<h6>العنوان رقم 6</h6>

</body>

</html>


فقرات HTML

يتم تعريف فقرات HTML مع العلامة:<p>

مثل

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>

<p>هذه اول فقره</p>
<p>هذة الفقرة الثانية</p>

</body>
</html>

روابط HTML

يتم تعريف ارتباطات HTML مع العلامة:<a>

مثل

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
  
<a href="arschools.com">هذا رابط</a>
  
</body>
</html>

يتم وضع الرابط في السمة href بين علامتين التنصيص “”

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

ستتعرف على المزيد حول السمات في فصل لاحق.


صور HTML

  • لاحظ في مثال الصورة ادناه العنصر <img> لا يحوي عنصر اغلاق والصور لا تحتاج لعنصر اغلاق
  • يوضع رابط مباشر للصورة في الإسفل أو مكان الصورة في الملفات الخاصة بك في السمة src
  • السمة width تحدد عرض الصورة
  • السمة height تخدد طول الصورة

مثال

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
  <img src="https://vlive.xyz/AanoN" alt="ar web schhols" width="100" height="100">
</body>
</html>

أزرار HTML

يتم تعريف أزرار HTML مع العلامة:<button>

مثل

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
  <button>اضغط هنا</button>
</body>
</html>

قوائم HTML

يتم تعريف قوائم HTML ب قائمة مرتبة بالنقاط أو علامة مرتبة بالارقام ، متبوعة بعلامات :<ul><ol><li>

  • كما نري العناصر التالية يرمز الوسم <ul> الي وجود قائمة من النقاط
  • يرمز الوسم <li> الي محتويات القائمة
  • يرمز الوسم <ol> الي قائمة من الارقام
<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
<h2>قائمة من النقاط</h2>
<ul>
  <li>برتقال</li>
  <li>موز</li>
  <li>خوخ</li>
</ul>  
  
<h2>قائمة من الارقام</h2>
<ol>
  <li>شاي</li>
  <li>عصير</li>
  <li>حليب</li>
</ol> 
</body>
</html>

التعليقات

التعليقات هي ماهي الا وسم يمكنك ان تضعة في اي مكان في الصفحة لانشاء مرجع او تذكير او شرح عن الكود او بهدف الغاء احد الاكواد او تعطيلها

يكتب التعليق بهذا الشكل <-- --!> ويتم وضع النص في وسط الرموز كهذا <!-- مرحبا هذا تعليق -->

مثال 1

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
<h2>التعليق لا يظهر للمستخدم في الموقع</h2>

  <!--  مرحبا هذا تعليق وهذا الشكل الاول -->
  
<!--  

مرحبا هذا تعليق 
يمكن له ان يكون في عدة اشكال 
ويحتوي علي عدة سطور 

-->
  
  
</body>
</html>

كما تري لا يظهر التعليق في النتائق يظهر فقط في الصفحة لاستخدامه ك تعليق علي الرمز الخاص بك او الاشارة او التبيه لشئ ما او لتسهيل الامر لمن بعدك بفهم النص او لتذكيرك

مثال 2

<!DOCTYPE html>
<html>
<head>
<title>اول عنوان لي</title>
</head>
<body>
<h2>التعليق لا يظهر للمستخدم في الموقع</h2>

  <!--  مرحبا هذا تعليق وهذا الشكل الاول -->
  
    <!-- <h1>هذا عنصر تم اخفاءه بواسطة التعليق</h1> --> 
  
  <!-- 
<h2> 2 هذا عنصر تم اخفاءه بواسطة التعليق</h2>
--> 
</body> 
</html>

كما تري في المثال اعلاه ف ان هناك عناصر تم اخفاءها عن طريق وضعها في تعليق وهي لن تظهر للمستخدم وهذه احدي الطرق لتعطيل الرموز

تحوي كل اللغات تقريبا علي التعليقات والتي من خلالها يمكنك ترك تلميحات ومعلومات عن رموزك واكوادك

دعنا نشعل مصباح جديد 💡