تعرف على لغة Html وكيفية ربط اللغات الأخرى بها.
تعرف على لغة Html وكيفية ربط اللغات الأخرى بها.
هي اللغة الأساسية في إنشاء صفحات الويب.
تعد اللغة التي تقوم ببناء هيكل الصفحة ثم يتم تعديل مظهر هذا الهيكل بلغة Css وإضافة التفاعلية والوظائف البرمجية باستخدام لغة Javascript.
قم بإنشاء ملف مع اللاحقة html
قم بكتابة <DOCTYPE html!> لتحديد إصدار Html5
تتكون الصفحة من قسمين رئيسيين body & head
إن ال <body>
هو العنصر الذي نكتب داخله العناصر التي تظهر للمستخدم في الصفحة.
أما ال <head>
فيحتوي على بعض إعدادات الصفحة وسنتناول الحديث عنه في هذا الفصل.
عنصر / Element
خاصية / Attribute
قيمة / Value
* انتبه لاستخدام الألوان فهي ثابتة على مدار الكتاب
تستخدم التعليقات لشرح موضوع ما أثناء كتابة الكود حتى
نبتعد عن الحيرة في سبب كتابة كل سطر.
لكتابة تعليق بلغة Html نقوم بكتابة <-- --!>
ونكتب التعليق داخلهما كما في المثال :
<-- This is a comment --!>
نبدأ الحديث عن عناصر ال head بعنصر meta تقوم ال meta tags بضبط الإعدادات التعريفية للصفحة ومن أهمها :
<meta charset=”UTF-8”/>
<!-- تقوم بضبط ترميز الصفحة (ضرورية لدعم اللغة العربية) -->
<meta name=”description” content=”my page” />
<!-- تقوم بضبط وصف الصفحة (في محركات البحث) -->
<meta name=”viewport” content=”width=devicewidth, initial-scale=1”>
<!-- تقوم بضبط عرض الشاشة (ضرورية لتصميم متجاوب) -->
يستخدم هذا العنصر لتنسيق الصفحة بلغة css كما ويوجد طرق أخرى للتنسيق :
<style> p {color: red} </style>
<!-- Style tag -->
<link rel=”stylesheet” href=”./style.css” />
<!-- استدعاء ملف تنسيق خارجي -->
<p style=”color: red”></p>
<!-- Style attribute -->
يستخدم هذا العنصر لكتابة برمجة الصفحة بلغة Javascript أو لاستدعاء ملف خارجي :
<script>
// Javascript code here
</script>
<script src=”./main.js”></script>
<!-- Page Title -->
<title> عنوان الصفحة </title>
<!-- Page Icon-->
<link rel=”icon” src=”./icon.png”>
قسم التعليقات