دورة HTML: (الدرس الأول) مقدمة + إنشاء الصفحة + الفقرات

بسم الله الرحمن الرحيم

HTML Course

 

الدرس الأول من دورة HTML بدايتك في عالم تصميم صفحات الإنترنت

ماهي HTML؟

HTML هي لغة توصيف النص (ليست لغة برمجة) وظيفتها تنسيق الكتابة ووصفها ليستطيع المستخدم رؤيتها من خلال المتصفح بكل سهولة

 

كيف أتعلم HTML؟ ماذا يلزمني لأبدأ بالتعلم؟

لغة HTML تعد من أسهل اللغات ولا تحتاج لأي شيء سوى:

1- برنامج Notepad – المفكرة

2- متصفح إنترنت مثل: Firefox أو Chrome

فلنبدأ بالتعلم 🙂

قم بفتح برنامج المفكرة وانسخ الكود التالي:

<html>
<head>
<title> الدرس الأول | المستودع التقني </title>
</head>
<body>
<p>بسم الله الرحمن الرحيم</p>
<p>الدرس الأول في HTML مقدم من المستودع التقني</p>
</body>
</html>

ثم قم بالضغط على حفظ باسم >>> واحفظ الملف بأي اسم تريد ولكن يجب أن يحمل امتداد html أو htm

مثل: “First lesson.htm”

واختر نوع الملف: All Files أو جميع الملفات

وستكون النتيجة كالتالي (يمكنك فتح الملف المحفوظ بواسطة المتصفح):

بسم الله الرحمن الرحيم

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

والآن لنشرح ما قمنا بكتابته:

أولاً قمنا بكتابة:

<html>

وهذا الوسم نخبر المتصفح أننا قمنا بفتح صفحة HTML

وفي النهاية قمنا بكتابة:

</html>

مما يعني أننا أغلقنا الصفحة

من المهم أن تعلم أن صفحة HTML تتكون من قسمين Head و Body

القسم Head هو عبارة عن رأس الصفحة ولا يحتوي غالباً على أي وسوم سوى <title>

أما القسم Body فهو يحتوي على جميع محتويات الصفحة

نبدأ مع ال <head>

لفتح وسم head نقوم بكتابة:

ولإغلاقه:

وكما قلنا سابقاً فإن القسم head لا يحتوي غالباً إلا على وسم واحد وهو title

ما هي وظيفة <title>؟؟

الوسم <title> يقوم بتحديد عنوان الصفحة الذي سيظهر بشريط المتصفح في الأعلى

في حالة الكود الذي في الأعلى سيظهر عنوان الصفحة:

الدرس الأول | المستودع التقني

لكتابة title بداخل head نقوم بالتالي:

<html>
<head>
<title> الدرس الأول | المستودع التقني </title>
</head>
</html>

الآن ننتقل لـ Body

لفتح الـ Body نقوم بكتابة الوسم:

<body>

ولإغلاقه نقوم بكتابة الوسم:

</body>

وبينهما نقوم بكتابة محتوى الصفحة

ونستطيع بداخله إضافة العديد من الوسوم مثل:

  • <p>
  • <a>
  • <div>
  • <img>
  • <ul>
  • <ol>
  • وغيرها…

في المثال الذي في الأعلى قمنا بإضافة الوسم <p> والذي يقوم بكتابة فقرة

للفتح نكتب:

<p>

للإغلاق:

</p>

وبينهما تستطيع كتابة ما تشاء

يمكنك مراجعة المثال

<html>
<head>
<title> الدرس الأول | المستودع التقني </title>
</head>
<body>
<p>بسم الله الرحمن الرحيم</p>
<p>الدرس الأول في HTML مقدم من المستودع التقني</p>
</body>
</html>

في الدرس القادم سنقوم بشرح كيفية إضافة روابط وصور

نراكم في درس لاحق 🙂

عن Tec-Store

شاهد أيضاً

Linux2

الدخول إلى عالم لينكس: شرح أداة apt-get لتثبيت البرامج

بسم الله الرحمن الرحيم بعد أن شرحنا كيفية تثبيت توزيعة لينكس منت هاقد عدنا إليكم …

أضف تعليقاً

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