تعلُّم لغة HTML - الدرس الأول - أوغاريتي
برمجةكورسات

تعلُّم لغة HTML – الدرس الأول

دروس بسيطة في لغة الويب HTML

اقرأ في هذا المقال

  • تعرف على لغة HTML وأهم أساسياتها وأدواتها، وشاهد بنفسك نتائج موقعك البسيطة.

نقوم في أوغاريتي بعمل سلسلة من الدروس التعليمية للغة HTML ،

للتعريف بلغة HTML‬‬ علينا أن نبدأ بطرح الأسئلة التالية

HTML
دروس أوغاريتي في تعليم HTML

 

  • ما فائدة HTML‬‬ ؟

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

  • ماذا تعني HTML‬‬ ؟

ببساطة HTML‬‬ هي اختصار لكلمة ‪HyperText Mark-up Language Hyper‬‬

 

Hyper : تعني أن تنتقل من أي نقطة إلى أي نقطة من غير أن تتقيد في خط سير محدد، ولنفهم المقصود من ذلك لا بد أن نعلم أنه في الماضي كانت الحواسيب تعمل بشكل خاطئ، إذ تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكنَّ HTML‬‬ مختلفة؛

فيمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلا أن تزور موقع MSN.com قبل أن تزور google.com

Text: تعني النص، إذ هو مفتاح الارتباط بين النقاط.

Mark-up: هو ما تفعله بالنص فهذه الكلمة تعني توصيف النص، إذ أنك تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.

Language: تعني اللغة، فتقنية HTML‬‬ هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنکليزية.

البداية مع HTML‬‬ :

يجب أن تتكون لدينا بدايةً فكرةٌ عن جوهر الـ HTML‬‬ التي تعتمد بشكل أساسي على الوسوم ‪(tags)‬‬.

ما هي الوسوم؟

هي عبارة عن أوامر بسيطة يجب حفظها.
مثال : الوسم <html‬> هو لتنبيه البرنامج بأني سأبدأ بكتابة موقع باستخدام هذه اللغة والأمر </html‬> ينبه للانتهاء من كتابة البرنامج.
هناك أيضا الوسوم
<‎‪<head‬‬ رأس <‎‪</head‬‬
<‪<title‬‬ عنوان <‪</title‬‬
<p‬‬> فقرة </p‬‬>

<‪<body‬‬ محتويات الصفحة <‪</body‬‬
وهذه الوسوم الأساسية … وسنتعرف البقية في الأيام القادمة.

الخطوات لإنشاء الموقع باستخدام HTML :

  1. نفتح المفكرة (notepad)
  2. نبدأ بكتابة البرنامج
    فنكتب الأمر <html> نترك سطرين فارغين ثم نكتب الأمر </html>
    هكذا نكون أعلمنا المفكرة أننا نستخدم لغة HTML‬‬ وضمن الأسطر بين الأمرين تتم كتابة الأوامر الأخرى.
    نضيف ضمن السطرين أمر رأس الصفحة </head> <head> مع فراغ بينهما
    نضيف أمر بداية الصفحة وانتبه أن يكون كل شي قبل ‎ الأمر </html>
    ‏والآن أصبح بإمكاننا إضافة النص
    مثال: نكتب عنوان النص ويجب أن يكون ضمن رأس الصفحة أي بالشكل التالي:
    </title></head> عنوان الصفحة <head><title>
     نضيف النص الداخلي </p> <p>
    أصبح شكل الصفحة بالكامل كالتالي: 
    <html>
    <head><title>
    العنوان مثل: موقعي الأول 
    </title></head>
    <body><p>
    المضمون مثل: أرحب بكم في هذا الموقع المتواضع 
    </p></body>
    </html>
  3. نقوم بحفظ الملف باستخدام القائمة ملف ثم حفظ باسم (‎ ،(save as وفي المربع ‏نختار Save as type نختار النوع “All Files”
    ‏والآن نكتب اسم للملف ونضيف في النهاية اللاحقة .html أو .htm ثم نختار حفظ، وهذه الخطوة مهمة للغاية، وتجاهلها يفقد الوسوم خاصياتها ويجعلها نصّاً عاديّاً.‎
  4. والآن استعرض الصفحة التي صممتها بفتح متصفح الإنترنت‎ ‏واختيار فتح ثم ابحث عن الملف الذي أنشأته وانظر الى النتيجة‎، ‏أو بدل ذلك استعرض الصفحة بالنقر على الملف الذي صممته بالزر الأيمن للماوس واختيار فتح باستخدام (‎(Internet Explorer

 

 

تابعوا الأجزاء القادمة من الدروس، نتلقّی استفساراتكم بالتعليقات

 


 

هل أعجبك المقال؟

شاركونا آراءكم واقترحاتكم

اقرأ أيضاً:

 

الوسوم

رامة

طالبة في كلية الآداب، مهتمة بالتكنولوجيا ونشرها، كالبرمجة والذكاء الصنعي.

مقالات ذات صلة

‫2 تعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

ثمانية عشر + خمسة عشر =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

إغلاق