مدخل الى HTML - Start with HTML

في البوست دا هنقدملك تمهيد او “تعريف” مختصر للـ HTML

وهنحاول ان شاء الله نلم الدنيا كلها ومن خلال الموضوع دا ونهايته

هتكون فاهم بنسبة كبيرة جدًا ايه هي الـHTML وتقدر تبتدي فيها.

ما هي الـ”HTML“:-

في الأول هنتعرف على الاختصار :

H –> Hyper
T –> Text
M –> mark up
L –> language

هي الصفحات الترميزية القياسية لصفحات الويب، هي مش لغة برمجة هي مدخل لكل لغات البرمجة، يعني مش هقدر استغنى عنها في أي لغة من لغات البرمجة بالعكس دا انا لازم اتعلمها كويس واكون على علم بيها عشان اقدر ادخل مجال البرمجة اصلًا كمان الـHTML لغة سهلة جدًا للتعلم ولغة ممتعة جدًا في تعلمها.

احب اقلك ان لغة HTML هي تعمل كدور مترجم لصفحات الويب، يعني بتصف او تشرح للبراوزر ان دي صفحة ويب بشكل معين من خلال الهيكل الي اتعمل بيها الي هي مجموعة او سلسلة من العناصر – عناصر الHTML اسمها تاجات tags هنشرحها قدام – التابعة للغة، البراوزر بيقرأ العناصر أو التاجات “Tags” الخاصة باللغة كمحتوى يعني اكيد مش هيظهر زي مهتتكتب هنشوف أمثلة دلوقت.

ما هو شكل صفحة الـHTML:-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

الكود السابق بيوضح شكل صفحة “HTML” عادية جدًا دا بيبقا شكلها

نبتدي نشرحه مع بعض سطر سطر بس قبل منشرح المثال هنتعرف على حاجه الأول يعني ايه وسم او تاج

ما هي عناصر الـ HTML الـوسوم أو Tags :-

لغة الHTML هي لغة “وسوم” تاجات، بتتكون من وسوم “تاجات” وبيكون المحتوى بين الوسوم دي يعني وسم هنكتبه بيبقا له قافلة أو نهاية مثال:-

<tagname>Content</tagname>

ودا بيبقا شكل الوسم، وزي م شفنا لازم نهاية للوسم بتنتهي بـ

</ + اسم الوسم + >

شرح كود صفحة الـ HTML:

في مثال صفحة الاتش تي ام ال قدمنا كود بسيط بيشرح شكل صفحة الـHTML نبتدي زي مقلنا نشرحه سطر سطر

<!DOCTYPE html> دا كود بيعرف البراوزر ان دي صفحة HTML بيتكتب بالشكل دا بالظبط، يعتبر زي كود تعريفي ودا الكود المختصر المتعارف عليه دلوقت.
<html> دا وسم بداية صفحة الـHTML وطبعًا الوسم دا له نهاية أو اغلاق ولازم الوسوم كلها أو محتوى الموقع تكون بداخل الوسم دا يعني الاغلاق بتاعه يبقى اخر صفحة الHTML ونهايتها تمامًا.
<head> وسم الهيد دا مهم جدًا رغم ان الاكواد الي جواه مش هتظهر في الموقع بطريقة مباشرة يعني ايه؟ مثلا بالنسبة للسيو SEO او محركات البحث أكوادها بتبقى هنا ودي بتبقى اكواد خاصة زي الميتا تاج كود الجافا سكربت والسي اس اس.

<meta />, <script></script>, <style></style> and <title></title>

<title> دا وسم مختص باسم الموقع .. هنكتب اسم الموقع ودا مش بيتكتب الا داخل وسم الـhead الي سبق وشرحناه وبيكون له نهاية يعني بنقفل الوسم بعد كتابة اسم الموقع </title> بالشكل دا –> <title>Careerians</title>
<body> ودا بقا القسم الي بيبقا فيه الشغل كلو أي كود هنكتبه هنا هيظهر في صفحة الويب بتاعتنا دا يعتبر المحتوى بتاع الموقع.

<h1>وسم الهيدينج الوسم دا بيستخدم لكتابة عناوين المقالات، مينفعش اكبر بيه الخط، استخداماته هي كتابة عناوين المقالات فقط. وطبعًا هنقفله </h1>
<p> وسم البراجراف والوسم دا خاص بكتابة المواضيع، يعني لو ف مقال حابب تكتبه هنكتب العنوان بوسم الهيدينج الي فات ثم كتابة محتوى المقال هنا في الوسم دا وطبعًا هنقفله </p>