لغة HTML

من ويكي الجامعة, مركز التعليم الحر
اذهب إلى التنقل اذهب إلى البحث

قالب:ويكيبيديا

شكل صفحة البرمجة

تعريف[عدل]

تيم بيرنرز لي

HTML:[عدل]

لغة ترميز النص الفائق (HTML) هي اللغة الأساسية للويب لإنشاء الوثائق والتطبيقات للنشر من خلال شبكه الانترنت .

  • HTML اختصار ل HyperText Markup Language او لغه الترميز النصى التشعبى .
  • تتكون من مجموعه من الاوسمه (tag) .
  • كل وسم من وسوم HTML يصف محتوى مختلف من الوثيقه .

تاريخ لغة HTML[عدل]

  • النسخة الأولى: أنشأ النسخة الأولى من HTML تيم بيرنرز لي ، مخترع شبكة الإنترنت، في أواخر عام 1991.
  • الاصدار المستقر الحالى : نشرت النسة HTML 4.01 في ديسمبر كانون الاول عام 1999.
  • العمل الحالي والمستقبلي: يتم نشر المشروع القادم HTML5 بواسطة منظمة W3C

وسوم HTML[عدل]

وسوم HTML هي كلمات (tags) محاطه بأقواس زاوية وتكون بالشكل التالى :

<tagname> المحتوى </ tagname>

  • علامات HTML تأتي عادة في أزواج مثل <P> و </ P>
  • العلامة الأولى في الزوج هي وسم البداية، والعلامة الثانية هي وسم النهاية
  • يكتب وسم النهايه مثل البداية، ولكن مع شرطه مائلة قبل اسم العلامة
  • بعض الوسوم تصنف بأنها ذاتية الإغلاق أي أنها لا تحتاج إلى وسم إغلاق مثل وسم السطر الجديد
  • بعض الأوسمة يمكن أن تكون متداخلة أي أن محتوى الوسم عبارة عن وسم فرعي [1]


بنية وثيقة HTML[عدل]

<DOCTYPE html!>                 هذه التعلمية للإشارة على أن الملف بصيغة 5 HTML.
<html>                          الإعلان عن بداية الوثيقة
<head>                           بداية رأس الوثيقة  
<title>Page Title</title>       عنوان الوثيقة
<head/>                         إغلاق رأس الوثيقة
<body>                          بداية جسم الوثيقة
<body/>                         إغلاق جسم الوثيقة
<html/>                         إغلاق الوثيقة

أساسيات[عدل]

تعلميات أساسية[عدل]

  • نبدأ بالتعليمة:
<DOCTYPE html!> 

هذه التعلمية تستخدم للتعرف على أن الملف بصيغة 5HTML.

  • نعرف أن اللغة هي HTML بالوسم التالي الذي نغلقه بـ /
<html> فتح 
<html/> إغلاق

الرأس والجسد[عدل]

وكما أن للإنسان رأس وجسد أيضاً لصفحة الويب رأس وجسد وأيضاً هي من الوسوم التي تفتح وتغلق :

<head>  فتح 
<head/> إغلاق
<body>  فتح 
<body/> إغلاق

فقرة[عدل]

لإضافة فقرة نستخدم الوسم الذي هو من الوسوم التي تفتح وتغلق (من دون فواصل ):

إضافة النص الذي نريده
< p/>

الترويسات[عدل]

الترويسات تستخدم غالباً للعناوين، فيما يلي طريقة كتابة الترويسات من الأكبر إلى الأصغر:

<h1/>ترويسة 1<h1>
<h2/>ترويسة 2<h2>
<h3/>ترويسة 3<h3>
<h4/>ترويسة 4<h4>
<h5/>ترويسة 5<h5>
<h6/>ترويسة 6<h6>

الصورة[عدل]

هذه من الوسوم التلقائية الإغلاق (لاحظ إغلاقها) أما الـ src لوضع الرابط لمكان تواجد الصورة كالتالي:

<img src="image.png" alt="وصف لصورتي" />

الربط التشعبي[عدل]

<a href="https://www.google.com" title="google">اضغط هنا تذهب إلى جوجل</a>

القوائم الغير متسلسلة[عدل]

<ul>
<li>flower</li>
<li>زهرة</li>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ul>

القوائم المتسلسلة[عدل]

<ol>
<li>flower</li>
<li>زهرة</li>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ol>

التعليقات[عدل]

<!-- المتصفّح سيتجاهل كلّ هذا
وهذا -->

نمط العناصر[عدل]

<style color="red" font-family="serief" >
محمّد صلّى اللّه عليه و سلّم
</style>

وصلات خارجية[عدل]