(إتش تي إم إل HTML)، هي لغة ترميز تستخدم في إنشاء وتصميم صفحات الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. HTML هيكل صفحة الويب وتعطي متصفّح الإنترنت وصفا لكيفيّة عرضه للمحتوياتها. وتستخدم الـ HTML مايعرف بالوسوم ('tags') لإصدار التعليمات إلى المتصفّح، هذه الوسوم توضع بين علامتى أكبر من '>' وأصغر من '<' الّتي تنقسم إلى نوعين:
وسم البداية كـ <html> , <p> , <h1> , <body>
وسم النهاية كـ <html> , </p> , </h1> , </body/>
بتجميع وسم البداية و وسم النهاية نحصل على عنصر HTML .
تبدأ أكواد HTML بالوسم <html>، وتنتهى بالوسم</html> .يقوم متصفح الوب بترجمة السطور البرمجيّة بلغة HTML إلى محتوى مرئي سهل القراءة لزوار الموقع.
عرفت بعدم حساسيتها لحالة الأحرف أو لترتيب بعض الخصائص؛لكلّ عنصر HTML خصائص تتحكّم في كيفيّة ظهوره. وذلك لكي تكون عمليّة تصميم المواقع عمليّة سهلة ولينة وبدون أي تعقيدات.HTML من اللّغات المدعومة بمعايير قياسيّة محددّه يفضّل الالتزام بها من قبل W3C فالإلتزام بمعايير الـ HTML أثناء تصميم المواقع يمنح الصفحة قابليّة أكثر للعرض والاستخدام على أنواع وإصدارات مختلفة من المتصفحات. من ناحية أخرى فإن HTML مركبة بشكل نحوي يدعى DOM ؛الّذي يحدّد معيارا للوصول والتلاعب بملفّات HTML، عمليّة تصميم المواقع مع DOM تجعل صفحة الموقع تظهر وكأنّها شجرة من الوسوم.
تعلميات أساسية
CSS3 و HTML5
نبدأ بالتعليمة:
<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>
مثال عن الترويسة h2:
الصورة
هذه من الوسوم التلقائية الإغلاق (لاحظ إغلاقها) أما الـ src لوضع الرابط لمكان تواجد الصورة كالتالي:
<img src="image.png" alt="وصف لصورتي" />
الربط التشعبي
<a href="https://www.google.com" title="google">اضغط هنا تذهب إلى جوجل</a>
القوائم الغير متسلسلة
<ul>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ul>
القوائم المتسلسلة
<ol>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ol>
التعليقات
<!-- المتصفّح سيتجاهل كلّ هذا -->
التقسيم و التوزيع
وسم البداية <div>
وسم النهاية </div>
نمط العناصر
<style color="red" font-family="serief" >
محمّد صلّى اللّه عليه و سلّم
</style>
الجداول
<table>
<tr>
<td>القسم 1</td>
<td>القسم 2</td>
</tr>
<tr>
<td>القسم 3</td>
<td>القسم 4</td>
</tr>
</table>
وسم البداية كـ <html> , <p> , <h1> , <body>
وسم النهاية كـ <html> , </p> , </h1> , </body/>
بتجميع وسم البداية و وسم النهاية نحصل على عنصر HTML .
تبدأ أكواد HTML بالوسم <html>، وتنتهى بالوسم</html> .يقوم متصفح الوب بترجمة السطور البرمجيّة بلغة HTML إلى محتوى مرئي سهل القراءة لزوار الموقع.
عرفت بعدم حساسيتها لحالة الأحرف أو لترتيب بعض الخصائص؛لكلّ عنصر HTML خصائص تتحكّم في كيفيّة ظهوره. وذلك لكي تكون عمليّة تصميم المواقع عمليّة سهلة ولينة وبدون أي تعقيدات.HTML من اللّغات المدعومة بمعايير قياسيّة محددّه يفضّل الالتزام بها من قبل W3C فالإلتزام بمعايير الـ HTML أثناء تصميم المواقع يمنح الصفحة قابليّة أكثر للعرض والاستخدام على أنواع وإصدارات مختلفة من المتصفحات. من ناحية أخرى فإن HTML مركبة بشكل نحوي يدعى DOM ؛الّذي يحدّد معيارا للوصول والتلاعب بملفّات HTML، عمليّة تصميم المواقع مع DOM تجعل صفحة الموقع تظهر وكأنّها شجرة من الوسوم.
تعلميات أساسية
CSS3 و HTML5
نبدأ بالتعليمة:
<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>
مثال عن الترويسة h2:
الصورة
هذه من الوسوم التلقائية الإغلاق (لاحظ إغلاقها) أما الـ src لوضع الرابط لمكان تواجد الصورة كالتالي:
<img src="image.png" alt="وصف لصورتي" />
الربط التشعبي
<a href="https://www.google.com" title="google">اضغط هنا تذهب إلى جوجل</a>
القوائم الغير متسلسلة
<ul>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ul>
القوائم المتسلسلة
<ol>
<li>محمّد صلّى اللّه عليه و سلّم</li>
</ol>
التعليقات
<!-- المتصفّح سيتجاهل كلّ هذا -->
التقسيم و التوزيع
وسم البداية <div>
وسم النهاية </div>
نمط العناصر
<style color="red" font-family="serief" >
محمّد صلّى اللّه عليه و سلّم
</style>
الجداول
<table>
<tr>
<td>القسم 1</td>
<td>القسم 2</td>
</tr>
<tr>
<td>القسم 3</td>
<td>القسم 4</td>
</tr>
</table>
مسموح بنقل الموضوع بشرط ذكر المصدر :
لغة ترميز النص الفائق HTML
|
مكتبتي حياتي
