المستودع التقني حمل ما تشاء كيفما تشاء مجاناً ومدى الحياة ;)
بسم الله الرحمن الرحيم
الدرس الأول من دورة 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>
في الدرس القادم سنقوم بشرح كيفية إضافة روابط وصور
نراكم في درس لاحق 🙂
تعليق واحد
تعقيبات: دورة HTML: (الدرس الثاني) الروابط + الصور | المستودع التقني