مدونة منير

ما هي لغة Html؟

تعرف على لغة Html وكيفية ربط اللغات الأخرى بها.

#html #web_development

ما هي لغة Html؟

تعرف على لغة Html وكيفية ربط اللغات الأخرى بها.

#HowToFrontend_HTML






ما هي لغة Html؟

هي اللغة الأساسية في إنشاء صفحات الويب.
تعد اللغة التي تقوم ببناء هيكل الصفحة ثم يتم تعديل مظهر هذا الهيكل بلغة Css وإضافة التفاعلية والوظائف البرمجية باستخدام لغة Javascript.


#HowToFrontend_HTML

إنشاء الملف

  1. قم بإنشاء ملف مع اللاحقة html

  2. قم بكتابة <DOCTYPE html!> لتحديد إصدار Html5

  3. تتكون الصفحة من قسمين رئيسيين body & head

إن ال <body> هو العنصر الذي نكتب داخله العناصر التي تظهر للمستخدم في الصفحة.

أما ال <head> فيحتوي على بعض إعدادات الصفحة وسنتناول الحديث عنه في هذا الفصل.

#HowToFrontend_HTML


أقسام الكود

<"html lang="en>

  1. عنصر / Element

  2. خاصية / Attribute

  3. قيمة / Value



* انتبه لاستخدام الألوان فهي ثابتة على مدار الكتاب

#HowToFrontend_HTML



كتابة التعليقات

تستخدم التعليقات لشرح موضوع ما أثناء كتابة الكود حتى

نبتعد عن الحيرة في سبب كتابة كل سطر.

لكتابة تعليق بلغة Html نقوم بكتابة <-- --!> ونكتب التعليق داخلهما كما في المثال :

<-- This is a comment --!>

#HowToFrontend_HTML

عنصر <meta/>

نبدأ الحديث عن عناصر ال head بعنصر meta تقوم ال meta tags بضبط الإعدادات التعريفية للصفحة ومن أهمها :

html
<meta charset=”UTF-8”/> <!-- تقوم بضبط ترميز الصفحة (ضرورية لدعم اللغة العربية) --> <meta name=”description” content=”my page” /> <!-- تقوم بضبط وصف الصفحة (في محركات البحث) --> <meta name=”viewport” content=”width=devicewidth, initial-scale=1”> <!-- تقوم بضبط عرض الشاشة (ضرورية لتصميم متجاوب) -->



#HowToFrontend_HTML

<style></style>

يستخدم هذا العنصر لتنسيق الصفحة بلغة css كما ويوجد طرق أخرى للتنسيق :

html
<style> p {color: red} </style> <!-- Style tag --> <link rel=”stylesheet” href=”./style.css” /> <!-- استدعاء ملف تنسيق خارجي --> <p style=”color: red”></p> <!-- Style attribute -->


#HowToFrontend_HTML


<script></script>

يستخدم هذا العنصر لكتابة برمجة الصفحة بلغة Javascript أو لاستدعاء ملف خارجي :

html
<script> // Javascript code here </script> <script src=”./main.js”></script>
#HowToFrontend_HTML



عناصر أخرى داخل ال head

html
<!-- Page Title --> <title> عنوان الصفحة </title> <!-- Page Icon--> <link rel=”icon” src=”./icon.png”>

والآن، اختبر معلوماتك!

قم بإجراء اختبارات سريعة للتحقق من فهمك لموضوع الفصل.

رابط الإختبارات >

قسم التعليقات

ابدأ المحادثة بكتابة أول تعليق

تابع مدونة منير

اطلع على آخر التحديثات، وشاهد محتوى حصري خاص لكل منصة