الدرس الثاني من الHTML : العناصر و الوسوم + انشاء أول صفحة ويب
السلام عليكم و رحمة الله تعالى و بركاته في موضوع جديد من مواضيعنا في دورة برمجة الويب ...
موضوع اليوم هو أساس الدورة يث أننا الأن بصدد التعرف على جوهر "HTML"
ألا وهي العناصر أو ما يطلق عليه (من الأفضل حفظها بلانجليزية) "tag" هذه الأخيرة هي عبارة عن أوامر تخبر المتصفح ع كيفية عرض الصفحة ...
و مبدأها واحد كالاتي :
تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">":
مثال :
العنصر
مثال :
العنصر
em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)<em>نص مائل.</em>
سيظهر في المتصفح بهذا الشكل:
نص مائل.
و كقاعدة أساسية في البرمجة فان جميع صفحات الويب تبتدأ بوسم : <html> ثم وسم الإغلاق </html>
"/" الفرق هو علامة
اذن فان الوسوم الأخرى تو ضع بين الاثنين
لدينا و سوم أخرى مثلا :
العناصر
مثال:
العناصر
h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر. مثال:
<h1>هذا عنوان</h1>
<h2>هذا عنوان فرعي</h2>
هذا عنوان
هذا عنوان فرعي
ملاحظة :
ليست كل الوسوم تعتمد على الاغلاق و البداية .... فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل:
ليست كل الوسوم تعتمد على الاغلاق و البداية .... فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل:
<br />.
و هذه الوسوم لا تعتمد الحروف الكبيرة أو الصغيرة عند كتابتها لذالك اختر منهجا لأسلوب برمجتك أنا شخصيا أفضل الحروف الصغيرة ...
هكذا نكون قد انتهينا من أمر الوسوم (اذا أغفلت شيئا فاطرحه في تعليق لتحديث الموضوع و ادراك الخطأ)
الان مرحلت انشاء أول صفحة من برمجتك
هل أنت جاهز ... كما ذكرا مسبقا حاول تتبع المراحل بتطبيقها ... لهذا ارتأيت عدم وضعها على شكل فيديو ...فقط الاكتفاء بالصور...
الان لا حظ معي يا أخي و حاول استعاب ألية عمل البرمجة... و اجتناب الأخطاء لأن هذا المشروع الأولي هو الذي سيطور و يستعمل كالية عمل في الموضوعات اللاحقة
الخطوات الأولية:
- أولا افتح المفكرة "notepad"
سنقوم بانشاء صفحة تقول " مرحى !سأصير مبرمجا "
تابع معي أخي بتمعن ... المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.
أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم
<html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.
كما تتذكر من الدروس الماضية،
<html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.
الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (
<head>و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).
يجب أن تكون برمجتك بهذا الشكل:
<html>
<head>
</head>
<body>
</body>
</html>
أنصحك أخي بنسخها و حفظها... لأنها ثابتة لا تتغير...
الان الوسوم التي نحتاجها...
لتسمية الصفحة نحتاج الى :
<title>موقعي الأول</title>
لكتابة المحتوى :
<p>مرحى !سأصير مبرمجا</p>
<p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
اذا كنت قد نجحت في النقل يجب أن تكون الوسوم بهذا الشكل:
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<p>سأصير مبرمجا</p>
</body>
</html>
طريقة الحفظ :
الان قم بفتح و اختبر النتيجة ...
يجب أن تكون عبارة عن جملة واحدة "سأصير مبرمجا و اسم الصفحة أعلى المتصفح يجب أن يكون نموقعي الأول
الى هنا ينتهي درس اليوم في دورة ال html
لاتقرأ و تغادر ضع تعليقا حتى نعرف "كم من متابع لدورة "
عن مدونة بوابة العلم .... بوابتنا على النت بألواننا
Lah yjazik b lkhir choran khoya
ردحذفالعفو أخي
ردحذف