مدخل الى 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>
ودا هيبقى شكل الصفحة من خلال الbrowser :
وبكدا شرحنا الكود السابق وكل كود موجود فيه.
ازاي نكتب اكواد HTML او هنعدل صفحات HTML ازاي؟
طبعًا لما نتعمق في اللغة هنحتاج برنامج نكتب بيه الاكواد والبرامج دي بتتعرف بإسم: Editor أو محرر
ودي هنلاقي منها كتير في منها المجاني وفي منها المدفوع هقلكم واجبلكم كام برنامج بلينك التحميل المباشر بتاعه في اخر الموضوع.
حاول بنفسك:
قبل منسخدم المحررات وبعد معرفنا بشكل كويس اللغة هنحاول نكتب صفحة بسيطة باستخدم النوت باد Note Pad
طبعًا كلنا عارفين النوت باد وموجودة في اي نسخة، تابع الصور:
هتكون فاضية بالشكل دا:
انا هكتب معاك الكود هنا بس مش عايز copy and paste عايزين نمشي ايدينا على الكيبورد علشان نحفظ الاكواد.
الكود:
<!DOCTYPE html>
<html>
<head>
<title>Careerians</title>
</head>
<body>
<h1>Start with HTML</h1>
<p>this paragraph is talking about HTML</p>
</body>
</html>
ثم عند الحفظ نقوم بالآتي لكي تظهر لنا العناصر بشكل صحيح:
نقوم بحفظ الملف بصيغة html ليصبح الملف بهذا الشكل:
نقوم بفتح الملف ليظهر في المتصفح بهذا الشكل:
وبكدا احنا خلصنا الدرس التمهيدي للـ HTML وعملنا مثال بسيط بنفسنا، انتظروا الدرس القادم ان شاء الله لمعرفة عناصر الـ HTML
You may also like
مدخل الى لغة CSS
