HTML

مقدمة في لغة HTML

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

ان تعلم لغة HTML امر رائع و مفيد وستعرف كذلك یا عزیزي المتدرب. لقد كنت أيضا مبتدئ لكن بعون آلله ورعایته صرت مصمم مواقع ویب ناجح.

في حالة وجدت اي اخطاء في ھذا الكتاب یمكنك مراسلتنا

أھلاً بك إلى مقدمة لغة HTML أو كما یسمیھا البعض لغة الھتمل .

حسناً فلنقم بالشرح ولكن بداية سأجيب على بعض من أسئلتك واتوقع أن أول سؤال من أسئلتك هو :

ما معنى لغة HTML ؟

ان لغة HTML وھي اختصار لكلمة (Hyper Text Markup Language)
وھي إحدى الطرق في تصمیم صفحات و مواقع على الانترنت أو تزیین الرسائل الإلكترونية التي تبعث عبر
البرید الالكتروني.

ان لغة HTML لیست لغة برمجیة كلغة ++C أو JAVA أو C فھي لغة سھلة
وغیر معقدة ولا تحتوي على شیفرات كثیرة كذلك فھي لا تحتاج إلى مترجم .

لذلك فهي لغة سهلة جداً، يسيرة الفھم والتعلم ولا تستدعي فھما و معرفة مسبقة بلغات البرمجة
والهیكلیة المستخدمة فیها.

تحتاج دائماً إلى تطبیق ما تتعلمھ بصورة عملیة أكثر من مجرد الأمثلة المدرجة في
الدرس.

حسناً فلننطلق في الشرح تكتب لغة HTML برموزخاصة و مختصرة اسمها باللغة الانجلیزیة Tags
وتسمى باللغة العربیة الوسوم .

<tag> النص يكتب بين الوسمين </tag>

و لكل وسم من وسوم لغة الـHTML وسم بدایة ووسم نھایة وسوف امثلھ لك من

وسم نھایة وسم بدایة
</html> <html>
</head> <head>
</title> <title>
</body> <body>

سوف أشرح كل وسم على حدى :

والوسم الأول ھو الوسم < HTML> الذي كما ذكرت سابقاً أنھ أھم الوسوم
المستخدمة في بناء الصفحات المستخدم فیھا لغة الـ HTML ، لأنھ یقوم بتعریف
للمتصفح أن ھذه الصفحة مصنوعة بلغة الـ HTML ویوضع ھذا الوسم في أول
المستند المصنوع بلغة الـ HTML ولولا ھذا الوسم لما ظھرت محتویات الصفحة كما يجب
باهتة وغیر مفهومة ، وسم النھایة وھو ط </HTML> الذي یوضع في نهاية الملف

المصنوع بلغة الـHTML.
أما الآن فسنمر للوسم <HEAD> الذي یستخدم لتعریف معلومات الصفحة واللغة والعدید من الأشیاء التي سوف </HEAD> نقوم بشرحھا في الدروس القادمة إن شاء آلله . وأذكرك أن وسم النھایة الخاص به ھو

نأتي الآن إلى الوسم <TITLE> الذي یمثل الجملة التي توضع أعلى الشاشة على
الیسار ، ووسم النھایة الخاص بھ ھو </TITLE> ، ملاحظة یوضع ھذا الوسم بین
الوسمین <HEAD> و </HEAD>

نأتي الآن إلى الوسم <BODY> الذي ھو لب الدروس بأكملھا ، حیث یمثل ھذا
الوسم محتویات الصفحة بأكملھا حیث تضع فیھ الجداول والصور و المواضیع وكل
ماتریده أن یظھر على الصفحة .

إذن ملف Html يبدأ دائماً بالوسم <HTML>وينتهي بالوسم
</HTML> لا تنسى ذلك!

اذن عزیزي المتدرب ما رأیك لو نطبق ذلك بصورة عملیة :
ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML ھو htm .أو html.

مثال :

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY>
hello world !!
</BODY>
</HTML> 

ھل توصلت لنفس النتیجة؟ إذن مبروك لقد قمت بإنشاء أول صفحة لك على الویب خاصة بك بلغة HTML.

يمكنك كتابة الوسوم سوائا بالأحرف الإنجلیزیة الكبیرة UPPERCASE أو
الأحرف الصغیرة lowercase .لذلك يمكنك الكتابة بحرية بأي شكل تريد أو حتى الكتابة بكلیھما.
كما أن المتصفحات لا تأخذ بعین الاعتبار الفراغات أو العودة إلى السطر (أي
عند الضغط على مفتاح ENTER(التي تجدھا ھذه المتصفحات في ملف HTML.
بمعنى آخر فإن باستطاعتك كتابة ملفك السابق على الشكل التالي:

مثال :

<HTML><HEAD><TITLE> first page web
</TITLE></HEAD><BODY>
hello world !! </BODY></HTML>

أو بالشكل التالي:

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>
<BODY>
hello 
world
!!
</BODY>
</HTML> 

النتيجة :

hello
world
!!

وفي كل الحالات ستحصل على نفس النتیجة.
إذن كیف یمكن التحكم بمقدار النص المكتوب في كل سطر وكیف یمكن تحدید نھایة
الفقرة وبدایة الفقرة التي تلیھا؟
سوف نستخدم الوسم <BR> لتحدید النھایة للسطر. والبدء بسطر جدید (لاحظ أن ھذا
الوسم مفرد، أي لیس لھ وسم نھایة).
قم بتعدیل الملف السابق لكي یصبح بالشكل التالي :

مثال :

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>

<BODY>
hello <BR> world <BR> !!
</BODY>
</HTML>

النتيجة :

hello
world
!!

وهناك أیضا الوسم <P> الذي يعمل بنفس عمل الوسم <BR> أي أنه يقوم بإنهاء
السطر أو الفقرة ویبدأ بسطر جدید إلا أنه يقوم بإضافة سطر جدید فارغ بین الفقرات.

مثال :

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>

<BODY>
hello <p> world <p> !!
</BODY>
</HTML> 

النتيجة :

hello
world
!!

يمكن التحكم بالفراغات وبعددھا باستخدام الوسم &;nbsp) والأحرف ھي اختصار للعبارة Space Breakable Non .(وإذا
إدا أردت إضافة عدة فراغات بین نص وآخر فما علیك إلا إضافة ھذا الوسم بنفس عدد
الفراغات المطلوب.

مثال :

<HTML>
<HEAD>
<TITLE>
first page web
</TITLE>
</HEAD>

<BODY>
hello &nbsp; &nbsp; world &nbsp; &nbsp; !!
</BODY>
</HTML> 

النتيجة :

hello     world     !!

ھناك العدید من الرموز التي یجب أن لا تكتب بصورة مباشرة و إنما باستخدام الوسوم
كل ھاته الرموز تستخدم أصلاً مع الوسوم فهي محجوزه في مفردات لغة HTML. أيضا فإن هناك مجموعة من الرموز غیر موجودة أساساً على لوحة المفاتیح كرمز
حقوق الطبع © ورمز العلامة المسجلة R ونحتاج إلى ھذه الطریقة(طریقة الوسوم)
لكتابتھا.
ھي في الجدول وبدون إشارتي < >