• adblock تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️

U3F1ZWV6ZTMyODE0Mjk1MzM4X0FjdGl2YXRpb24zNzE3NDA2OTI3MTc=
recent
أخبار ساخنة

تعلم اساسيات HTML من البداية


مقدمة إلى HTML:-

إنّ لغة HTML هي لغة الترميز الرئيسية لوصف بنية صفحات الويب.
جاءت تسمية لغة HTML بهذا الاسم من الأحرف الأولى لعبارةHyperText Markup Language والتي تعني "لغة توصيف النص التشعّبي"، وتُعتبر لغة HTML لبنة البناء الأساسية لشبكة الويب العالمية World Wide Web.
النص التشعبي Hypertext هو نص معروض على جهاز كمبيوتر أو جهاز إلكتروني آخر مع إشارات أو روابط إلى نص آخر يمكن للمستخدم الوصول إليه على الفور، وعادةً ما يتم ذلك عن طريق النقر بالفأرة أو الضغط على مفتاح من لوحة المفاتيح.
وبصرف النظر عن النص، فقد يحتوي النص التشعّبي على جداول وقوائم ونماذج وصور وعناصر تقديمية أخرى، إنه تنسيق سهل الاستخدام ومَرِن لمشاركة المعلومات عبر الإنترنت.
تستخدم لغات الترميز مجموعات من وسوم Tags الترميز لتوصيف عناصر النص داخل المستند، والتي تقدّم إرشادات لمتصفحات الويب حول الطريقة التي يجب أن يظهر فيها المستند.

تم تطوير لغة HTML في الأصل بواسطة Tim Berners-Lee في عام 1990، وهو المعروف أيضاً باسم والد الويب Father of the Web، في عام 1996 أصبح اتحاد شبكة الويب العالميةWorld Wide Web Consortium (W3C) المسؤول عن المحافظة على مواصفات لغة HTML، كما وأصبحت لغة HTML أيضاً معياراً دولياً (ISO) في عام 2000، مع العلم أن HTML5 هي الإصدار الأحدث من لغة HTML والتي توفّر نهجاً أسرع وأكثر قوة لتطوير الويب.



إرشاد: سيساعدك هذا الدليل التعليمي الخاص بلغة HTML على تعلّم الأساسيات الخاصة بلغة HTML5 الأحدث، وذلك بدءاً من المواضيع الأساسية وحتى الوصول إلى المواضيع المتقدّمة خطوة بخطوة، إذا كنت مبتدئاً في هذه اللغة، ابدأ بالقسم الأساسي وتقدّم بالتدريج إلى الأمام من خلال التعلم قليلاً حول هذه اللغة كل يوم.

ما الذي يمكنك القيام به مع HTML؟
هناك الكثير من الأشياء التي يمكنك القيام بها باستخدام لغة HTML.
  • يمكنك نشر المستندات عبر الإنترنت مع النصوص والصور والقوائم والجداول، إلخ.
  • يمكنك الوصول إلى موارد الويب مثل الصور ومقاطع الفيديو أو مستندات HTML الأخرى عبر الارتباطات التشعّبية.
  • يمكنك إنشاء نماذج لجمع البيانات من المستخدم مثل الاسم وعنوان البريد الإلكتروني والتعليقات وما إلى ذلك.
  • يمكنك تضمين الصور ومقاطع الفيديو ومقاطع الصوت والتطبيقات ومستندات HTML الأخرى مباشرةً داخل مستند HTML.
  • يمكنك إنشاء نسخة غير متصلة Offline لموقع الويب الخاص بك، والتي تعمل بدون اتصال بالإنترنت.
  • يمكنك تخزين البيانات في متصفح الويب الخاص بالمستخدم والوصول إليها لاحقاً.
  • يمكنك العثور على الموقع الحالي لزائر موقع الويب الخاص بك. لا تنتهي القائمة هنا، فهناك العديد من الأشياء الأخرى المثيرة للاهتمام التي يمكنك القيام بها باستخدام لغة HTML، وسوف تتعلم كل واحدة منها بالتفصيل في الفصول القادمة.

ملاحظة: لغة HTML كما هو موضح سابقاً هي لغة ترميز Markup Language وليست لغة برمجة، مثل لغات Java و Ruby و PHP وما إلى ذلك، ستكون بحاجة إلى متصفح ويب لعرض صفحات HTML، لا تعرض متصفحات الويب وسوم HTML، ولكنها تستخدم الوسوم لتفسير محتوى صفحات الويب.
اضغط التالي لمتابعة الشرح

<><>

البداية باستخدام HTML:-

ملف HTML هو ببساطة ملف نصّي يتم حفظه بلاحقة .html أو .htm .

البدء باستخدام HTML

ستتعلّم في هذا الدليل التعليمي مدى سهولة إنشاء مستند HTML أو صفحة ويب، لبدء كتابة الأكواد البرمجية بلغة HTML، تحتاج فقط إلى أمرين: محرر نص بسيط ومتصفح ويب. حسناً، لنبدأ بإنشاء أول صفحة HTML.

إنشاء مستند HTML الأول الخاص بك:

دعنا نسير عبر الخطوات التالية، وفي نهاية هذا الدليل التعليمي سيكون لديك ملف HTML يعرض رسالة "Hello World" في متصفح الويب الخاص بك.

الخطوة 1: إنشاء ملف HTML

افتح محرر النص العادي للكمبيوتر الخاص بك وقم بإنشاء ملف جديد.
إرشاد: نقترح عليك استخدام تطبيق المفكرة Notepad (على أجهزة ويندوز Windows) أو تطبيق TextEdit (على أجهزة ماك Mac) أو بعض برامج تحرير النصوص البسيطة الأخرى للقيام بذلك، لا تستخدم تطبيق Word أو الدفتر WordPad! بمجرد فهم المبادئ الأساسية، يمكنك التبديل إلى أدوات أكثر تقدماً مثل Adobe Dreamweaver.

الخطوة 2: كتابة بعض تعليمات HTML البرمجية

ابدأ مع نافذة فارغة واكتب الكود التالي:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

الخطوة 3: حفظ الملف

الآن احفظ الملف على سطح المكتب باسم "myfirstpage.html".


ملاحظة: من المهم أن يتم تحديد الامتداد .html – بعض برامج تحرير النصوص مثل المفكرة ستحفظه تلقائياً مع اللاحقة .txt.

لفتح الملف في المتصفح، انتقل إلى الملف الخاص بك ثم انقر عليه مرتين، سيتم فتحه في متصفح الويب الافتراضي الخاص بك، إذا لم يحدث ذلك افتح المستعرض واسحب الملف إليه.

شرح الكود

قد تفكر في معنى الكود البرمجي السابق، حسناً دعنا نكتشف ذلك.
السطر الأول <!DOCTYPE html> هو إعلان نوع المستند، والذي يرشد متصفح الويب أن هذا المستند هو مستند HTML5، وهو غير حساس لحالة الأحرف في حال تم الكتابة بأحرف صغيرة أو كبيرة.
يمثل العنصر <head> حاوية للوسوم التي توفر معلومات حول المستند، على سبيل المثال يحدد الوسم <title> عنوان المستند.
يحتوي العنصر <body> على المحتوى الفعلي للمستند (الفقرات والروابط والصور والجداول وما إلى ذلك) الذي يتم عرضه في مستعرض الويب وعرضه للمستخدم.


ملاحظة: يظهر إعلان DOCTYPE في أعلى صفحة الويب قبل جميع العناصر الأخرى، ومع ذلك فإن إعلان doctype نفسه ليس وسم HTML، يتطلب كل مستند HTML إعلان نوع المستند لضمان عرض صفحاتك بشكل صحيح. 


إرشاد: تشكّل الوسوم <html> و <head> و<body> الهيكل الأساسي لكل صفحة ويب، المحتوى داخل </head> و <head> غير مرئي للمستخدمين باستثناء أمر واحد: النص بين وسمي </title> و <title> والذي يظهر كعنوان في علامة تبويب المتصفح.
 اضغط التالي لمتابعة الشرح
<><>

وسوم وعناصر لغة HTML

يتم كتابة لغة HTML على شكل عناصر HTML تتكون من وسوم الترميز، وسوم الترميز هذه هي السمة الأساسية للغة HTML، يتكون كل وسم ترميز من كلمة أساسية محاطة بأقواس زاوية، مثل <html> و <head> و <body> و<title> و <p> وما إلى ذلك.


عادةً ما تأتي وسوم HTML في أزواج مثل <html> و <html/> وغالباً ما يسمى الوسم الأول في زوج ما بوسم الفتح (أو وسم البداية)، ويسمى الوسم الثاني بوسم الإغلاق (أو وسم النهاية).

هنالك تطابق بين وسم الفتح ووسم الإغلاق، باستثناء وجود خط مائل (/) بعد قوس الزاوية الأول لوسم الإغلاق، وذلك لإعلام المستعرض بأن الأمر قد اكتمل.
بين وسمي البداية والنهاية، يمكنك وضع المحتويات المناسبة، على سبيل المثال تتم كتابة فقرة ما والتي يتم تمثيلها بواسطة العنصر p على النحو التالي:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>This is a paragraph.</p>
    <!-- Paragraph with nested element -->
    <p>
        This is <b>another</b> paragraph.
    </p>
</body>
</html>
 اضغط التالي لمتابعة الشرح
<><>  

العناصر Elements

في هذا الدليل التعليمي سوف تتعلّم حول وسوم وعناصر لغة HTML.

صياغة عنصر HTML:

عنصر HTML هو مكون فردي لمستند HTML وهو يمثل دلالات أو معنى، على سبيل المثال يمثل عنصر title عنوان المستند.

تتم كتابة معظم عناصر HTML مع وسم البداية (أو وسم الفتح) و وسم النهاية (أو وسم الإغلاق) مع وجود محتوى بين الوسمين، يمكن أن تحتوي العناصر أيضاً على خاصيات تحدد خصائصها الإضافية، على سبيل المثال سيتم كتابة فقرة يتم تمثيلها بواسطة العنصر p على النحو التالي:

ملاحظة: لا تتطلب جميع العناصر أن يكون وسم النهاية أو وسم الإغلاق موجود، يُشار إلى هذه العناصر على أنها عناصر فارغة empty elements أو عناصر ذاتية الإغلاق self-closing elements أو عناصر خالية void elements.

وسوم HTML مقابل عناصر HTML:

تقنياً، فإن عنصر HTML هو المجموعة المكوّنة من وسم البداية والخاصيات التابعة له ووسم النهاية وكل شيء بينهما، من ناحية أخرى يتم استخدام وسم HTML (سواء كان بداية أو نهاية) لتمييز بداية أو نهاية عنصر ما كما ترون في الصورة التوضيحية أعلاه.

ومع ذلك، في الاستخدام الشائع فإن مصطلحي عنصر HTML و وسم HTML قابلان للتبادل، أي أن الوسم هو عنصر يمثل وسم، من أجل البساطة في موقع الويب هذا، يتم استخدام مصطلحي "الوسم" و "العنصر" للإشارة إلى نفس الشيء - حيث إنه سيحدد شيئاً ما على صفحة الويب الخاصة بك.

الحساسية لحالة الأحرف في الوسوم والخاصيات في لغة HTML:

في لغة HTML، ليست أسماء الوسوم والخاصيات حساسة لحالة الأحرف (ولكن معظم قيم الخاصيات حساسة لحالة الأحرف)، أي أن الوسم <P> والوسم <p> يمثلان نفس الشيء في HTML وهو الفقرة. لكن في XHTML يكون هناك حساسية لحالة الأحرف، والوسم <P> مختلف عن الوسم <p>.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Case Insensitivity in HTML</title>
</head>
<body>
    <p>This is a paragraph.</p>
    <P>This is also a valid paragraph.</P>
</body>
</html>   
إرشاد: نوصي باستخدام أحرف صغيرة للوسوم وأسماء الخاصيات في HTML، حيث يمكنك من خلال القيام بذلك جعل المستند الخاص بك أكثر توافقاً مع الترقيات المستقبلية.

 اضغط التالي لمتابعة الشرح
<><> 

الخاصيات Attributes

في هذا الدليل التعليمي ستتعلم كيفية استخدام الخاصيات لإعطاء معنى أكبر لوسوم HTML.

ما هي الخاصيات؟

تحدد الخاصيات الخصائص أو الميزات الإضافية للعنصر مثل عرض الصورة وارتفاعها، يتم تحديد الخاصيات دائماً في وسم البداية (أو وسم الفتح) وعادةً ما تتكون من ثنائيات الاسم والقيمة مثل اسم = "قيمة" أو name = "value" كما ويجب دائماً إحاطة قيم الخاصيات بعلامات اقتباس.

أيضاً، بعض الخاصيات تكون مطلوبة لعناصر معينة، على سبيل المثال يجب أن يحتوي الوسم <img> على الخاصيتين src و alt، دعنا نلقي نظرة على بعض الأمثلة على استخدامات الخاصيات:



YQG37-CW4MK-HGJBZ-FG9CH 
         
تعديل المشاركة
author-img

Mazen~TQ

تعليقات
    ليست هناك تعليقات
    إرسال تعليق
      الاسمبريد إلكترونيرسالة