الدرس رقم واحد
مقدمة في لغة HTML


-

مقدمة في لغة HTML

standard markup language(HTML) 

HTML هي لغة الترميز القياسية لصفحات الويب standard markup language. والي من خلالها بنقدر نعمل مواقع وصفحات الانترنت. وترمز الى Hyper Text Markup Language ويتم من خلالها تحديد بنية structure لصفحات الويب.وهي ضرورية جدا لبناء مواقع الانترنت

يحدد HTML هيكل structure لصفحات الويب. هذا الهيكل structure وحده لا يكفي لجعل صفحة الويب تبدو جيدة وتفاعلية. لذلك يجب استخدام التقنيات المساعدة مثل CSS و JavaScript لجعل HTML  جميلًا وتفاعلي. ويتكون HTML من سلسلة من العناصرelements، وتعمل HTML elements على اخبار المتصفح بكيفية عرض المحتوى


قبل البدء انت بحاجة الى برنامج لغاية بناء الصفحات وكتابة الأكواد

سنستخدم هنا برنامج Visual Studio Code رابط التحميل من هنا  "https://code.visualstudio.com"


قم بتحميل البرنامج وتثبيته على جهاز الكمبيوتر الخاص بك

خطوات التثبيت والتحميل: 



انقر فوق File ثم New File  
ثم اختر اللغة HTML (لاحظ الصورة في الأسفل)


افتح ملف جديد من نوع HTML وبعدها ضيف الكود التالي الي هو مثال بسيط لصفحة HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>
احفظ الملف باسم Index.html داخل مجلد (يمكنك اختيار المكان والاسم المناسب لك للمجلد
شغل الصفحة وشوف النتيجة:


تمام نفهم الكود وشو عملنا.

<!DOCTYPE html> يحدد نوع الصفحه وهي من نوع HTML5 document
html> element> هو root element في HTML page
head> element> يحتوي على meta information معلومات وصفية حول صفحة HTML 
title> element>   يحدد عنوان صفحة HTML (والذي يظهر في شريط عنوان المتصفح أو في علامة تبويب الصفحة)
body> element> يحدد document@@#s body الي هو عبارة عن container لجميع المحتويات المرئية ، headings, paragraphs, images, hyperlinks, tables, lists, etc. وما إلى ذلك.
h1> element> هو عبارة عن  large heading اضافة عنوان بحجم كبير 
p> element>  يستخدم للتعامل مع الفقرات 

ما هو HTML Element 
يتم تعريف HTML element  بالشكل التالي 

<tagname> Content goes here... </tagname>

حيث HTML element  هو هو كل شيء من علامة البداية إلى علامة النهاية
من الامثلة على ذلك : 
<h1>My First Heading</h1>
<p>My first paragraph.</p>

شو هل Empty elements
هي HTML elements ما فيها محتوى ولا تنتهي ب end tag من الامثلة عليها
<br>

يكتب بهذا الشكل فقط. والهدف منه سطر فارغ.

تركيب صفحة HTML 




تعمل المتصفحات على مثل (Chrome و Edge و Firefox و Safari) على قراءة مستندات HTML وعرضها بشكل صحيح. واكيد لا يعرض المستعرض HTML tags ، ولكنه يستخدمها لتحديد كيفية عرض حسب نوع Tag مثلا tag الخاص بالصور يستخدم لعرض الصور، tag الخاص بالفقرات يستخدم لعرض النصوص في فقرات ... الخ