دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2

**أبو آسر** · 14-04-2014 05:02 AM

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

ما هي لغة HTML ؟

HTML هي اللغة الأم لمتصفحك ، وهي اختصار لعبارة "HyperText Mark-up Language" .
فعند تصفحك لأي موقع وحين الضغط بزر الماوس الأيمن في أي منطقة فارغة بالصفحة واخترت View page source (في متصفح جوجل كروم كما اتفقنا على استخدامه)

أو (Ctrl+U)
ستجد صفحة مكونة من عدة أكواد أو وسوم Tags تبدأ بوسم بداية وهو

كود:

<html>

ووسم نهاية

كود:

</html>

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

كود:

وتنتهي بعلامة أكبر من

كود:

ولكتابة هذين الوسمين يجب أن تضغط على زر Shift من لوحة المفاتيح مع هذين الزرين (مع مراعاة أن تكون لغة الكتابة هي اللغة الإنجليزية)

ولكن وسم النهاية يجب أن يكون محتويا على علامة الشرطة المائلة

كود:

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

كود:

 <br/>

فهو وسم واحد ولا يحتاج إلى وسم آخر ليكون بداية أو نهاية.
مثال:
افتح برنامج ++Notepad الذي قمت بتحميله وتنصيبه مسبقا ، واكتب بداخله هذا الكود (اكتبه يدويا بنفسك ولا تنسخه ولاحظ مكان الشرطة المائلة / في وسم السطر الجديد br ومكانها في وسم إغلاق html)

كود:

<html>
This is the first line
<br/>
This is the second line
</html>

ثم اختر من قائمة البرنامج File ثم Save أو (Ctrl+S) واختر أي اسم وليكن test ثم أتبع هذا الاسم بنقطة (.) ومكانها كما هو موضح بالصورة التالية (تأكد دائما أن لغة الكتابة هي اللغة الإنجليزية)

ثم اكتب html بعد النقطة ليكون اسم الملف بالكامل test.html ثم اختر مكان لحفظ الملف وليكن سطح المكتب ثم اضغط Enter.
افتح الملف الذي سيكون ملف ويب وانظر إلى النتيجة ، ستجد أن هناك سطران وهما :

كود:

This is the first line
This is the second line

ولكن لا توجد أي أكواد ظاهرة من التي تم كتابتها لأن هذه الأكواد أو الوسوم تؤدي وظيفتها في تنسيق النصوص في الخلفية بدون الظهور ولكنك ترى نتيجتها والتي تمثلت في مثالنا السابق في كتابة سطرين مستقلين عن بعضهما بسبب وسم

كود:

<br/>

أما وسمي

كود:

<html>

و

كود:

</html>

فهما وسمي البداية والنهاية للملف نفسه.

جرّب الآن أن تحذف وسم

كود:

<br/>

واحفظ الملف (Ctrl+S) ثم قم بعمل تحديث Refresh لصفحة الويب عن طريق زر (F5) بالكيبورد ولاحظ النتيجة ، ستجد أن السطران ملتصقان ببعضهما وذلك لعدم وجود وسم عمل سطر جديد حتى وإن كتبت السطرين كل واحد منهما في سطر مستقل في برنامج Notepad عن طريق زر Enter ، فلغة html لا تعترف إلا بالوسوم.

هل تكتب الوسوم بأحرف كبيرة Capital أم صغيرة Small ؟
معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الاثنين ، كلها ستعطي نفس النتائج ، مع ذلك فالأسلوب الصحيح والاحترافي والمطابق للمعايير القياسية العالمية هو كتابة الوسوم بالأحرف الصغيرة ، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة فقط.
الآن بعد أن قمت بإنشاء أول صفحة ويب خاصة بك ، أدعوك الآن إلى أن تجرب الوسوم التالية وتكتشف وظائفها بنفسك !

كود:

<h1>Text</h1>

كود:

<b>Text</b>

كود:

<i>Text</i>

كود:

<u>Text</u>

كود:

<li>Text</li>

**canner** · 14-04-2014 10:49 AM

جزاك الله خيرا على الموضوع فكرتنى بالذى مضى

**prof2013** · 14-04-2014 03:44 PM

جاري التجربه
....loading

**prof2013** · 14-04-2014 04:31 PM

المشاركة الأصلية كتبت بواسطة prof2013

جاري التجربه
....loading

**أبو آسر** · 14-04-2014 04:36 PM

المشاركة الأصلية كتبت بواسطة prof2013

تمام
بس في غلطة واحدة بس
وهي إن كود إغلاق html

كود:

</html>

لازم يكون آخر كود في الملف

**prof2013** · 14-04-2014 05:37 PM

المشاركة الأصلية كتبت بواسطة أبو آسر

تمام
بس في غلطة واحدة بس
وهي إن كود إغلاق html

كود:

</html>

لازم يكون آخر كود في الملف

تمام كده ياريس
ثانكس ع التنبيه

**prof2013** · 15-04-2014 12:25 AM

المشاركة الأصلية كتبت بواسطة rapid

جزاك الله خير على تعبك معانا اخي الفاضل ابو اسر
ولكن عندما حاولت الكتابة بالعربي في مجموعة الاكواد الثانية ظهرت رموز غير مفهومة، لماذا؟

حدث معي نفس هذا الامر ولكن لم ارغب بسؤال الاستاذ ابو اسر لانه في اعتقادي انه لم ولن يترك شيئا دون توضيح

**AboELsoud** · 15-04-2014 03:37 AM

تمت التجربه بنجاح :)

عايزين الجزء التالت في اقرب وقت :)

الموضوع: دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2

LinkBack

أدوات الموضوع

عرض

دورة تصميم وتطوير مواقع الإنترنت للمبتدئين [html] (مقدمة) #2 - انشر الموضوع فى :

-

-

المواضيع المتشابهه

مواقع اعلانات بيع و شراء السيارات على الإنترنت

دورة تصميم وتطوير مواقع الإنترنت للمبتدئين (تمهيد) #1

أطرف وأغرب خمسة مواقع على الإنترنت

طرق الشراء من مواقع الإنترنت

هيونداي الثالثة عالميا في تصميم وتطوير ناقل حركة أوتوماتيكي سداسي النسب ...

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة