مدونة منير

مقدمة في لغة Html

البرمجة
a pic of منير
2024/02/07
706

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

مقدمة في لغة Html
مقدمة في لغة Html
#HowToFrontend

؟HTMLما هي لغة

هي اللغة الأساسية في إنشاء صفحات الويب.

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

#HowToFrontend

إنشاء الملف

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

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

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

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

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

#HowToFrontend

أقسام الكود

<html lang="en">

Element (عنصر) Attribute (خاصية) Value (قيمة)

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

#HowToFrontend

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

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

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

نقوم بكتابة <-- --!> ونكتب التعليقHtmlلكتابة تعليق بلغة

داخلهما كما في المثال :

--!>This is a comment<--

#HowToFrontend

<meta/>

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

<meta charset=”UTF-8”/>

<-- تقوم بضبط ترميز الصفحة(ضرورية لدعم اللغة العربية) --!>

<meta name=”description” content=”my page” />

<-- تقوم بضبط وصف الصفحة (يظهر في محركات البحث) --!>

<meta name=”viewport” content=”width=devicewidth, ini-tial-scale=1”>

<-- تقوم بضبط عرض الشاشة (ضرورية لتصميم متجاوب) --!>

#HowToFrontend

<style></style>

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

أخرى للتنسيق :

<style> p {color: red} </style>

--!>Style tag<--

<link rel=”stylesheet” href=”./style.css” />

<-- استدعاء ملف تنسيق خارجي --!>

<p style=”color: red”></p>

--!>Style attribute<--

#HowToFrontend

<script></script>

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

الستدعاء ملف خارجي :

<script>

// Javascript code here

</script>

<script src=”./main.js”></script>

#HowToFrontend

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

<title> عنوان الصفحة </title>

<link rel=”icon” src=”./icon.png”>