دروس فى لغة html للمبتداين

	مقدمة في لغة
	HTML

إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ
Hyper Text Markup
Language).
وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى
كلغة
C
. فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه
الجمل يجب تضمين شيفرات من لغات أخرى كـ
Java, Javascript, CGI
. كذلك فهي لا تحتاج إلى مترجم خاص به
Compiler
. وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها
مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة
بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة
والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير
المنطقي وترتيب الأفكار.

تتكون مفردات لغة

Html
من شيفرات تسمى
TAGS
أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى
اليمين) :-

دروس فى لغة html للمبتداين Tags

فعلى سبيل المثال الوسم

يستخدم لكتابة الكلمات بخط أسود عريض
Bold
وذلك بالشكل التالي:

Text <‎/B>

وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر

أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة
.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله

كيف نبدأ...

لا يتطلب كتابة ملف
HTML
أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط
إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في
Windows
يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت
Netscape Navigator
أو
MS Internet Explorer
لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب
بملف يحمل الاسم الممتد
‎.html
أو
‎.htm

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

قبل أن نبدأ

حسناً، لديك محرر نصوص ممتاز لكتابة ملفات
HTML
ولديك متصفح إنترنت لمعاينتها، ولديك هذه الدروس التي ستنطلق معها إلى عالم
تصميم صفحات الويب. هل هذا يكفي؟ برأيي المتواضع، لا.
تحتاج دائماً وأبداً إلى تطبيق ما تتعلمه بصورة عملية أكثر من مجرد
الأمثلة المدرجة في الدروس. ما رأيك في أن تفكر بموضوع ما يستهويك وتحب أن
تتعاطى به؟ وتخيل أنك ستقوم بإنشاء موقع ويب عنه بصورة واقعية. ومع تقدمك
في الدروس قم بتطبيق ما فيها على صفحاتك. ستجد الكثير من المتعة في هذا،
وستسر جداً عندما ترى صفحتك تتبلور أمام عينيك يوماً بعد يوم، والأهم من
هذا كله هو أنك ستكتشف أي ثغرات في استيعابك لهذه الدروس (وعندها من المؤكد
أنك ستقوم بتلافيها) وقد تكتشف كذلك ثغرات ارتكبها كاتب هذه الدروس. (وفي
هذه الحالة أرجو أن لا تتردد أبداً في الكتابة لي لكي أعمل على تلافيها).

والآن... لنبدأ

ضع تعليق بحسابك فى الفيس بوك

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

لنأخذ الوسوم التالية:

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

<‎/HTML>

<‎/HEAD>

</td> <td><‎/TITLE></td> </tr> <tr align="CENTER"> <td><BODY></td> <td><‎/BODY></td> </tr> </table> ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية. ويتميز وسم النهاية بوجود الرمز / . تأمل الرسم التالي، فهو يعطي فكرة عن تركيب ملف Html <img src="https://2img.net/h/www.khayma.com/hpinarabic/images/htsketsh.gif" style="width: 308;height: 312" border="0" alt="دروس فى لغة html للمبتداين Htsketsh"/> E إذن فملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ذلك! أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع. نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY> ما رأيك لو نبدأ بتطبيق هذه المعلومات بصورة عمليه؟ هيا… قم بفتح برنامج المفكرة واكتب ما يلي: <HTML> <HEAD> <TITLE> This is a test Webpage <‎/TITLE> <‎/HEAD> <BODY> Wow, I'm writing my first webpage <‎/BODY> <‎/HTML> والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html. مثلاً أنا اخترت الاسم ‎1st_file.htm ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث وليكن هذا المجلد مثلاً بالاسم C:\htmfiles (أو بأي اسم يحلو لك). حان وقت العرض، لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه. فإذا كان Netscape Navigator اختر الأمر Open File… من قائمة File. أما في MS Internet Explorer فاختر الأمر Open… من قائمة File. ثم حدد المسار الذي يوجد به الملف. أنا شخصياً قمت بتحديد المسار التالي: C:\htmfiles\1st_file.htm وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه: <img src="https://2img.net/h/www.khayma.com/hpinarabic/images/webpage1.gif" style="width: 476;height: 251" border="0" alt="دروس فى لغة html للمبتداين Webpage1"/> وماذا عنك؟ هل حصلت على نفس النتيجة؟ إذن مبروك J لقد قمت بإنشاء أول صفحة ويب خاصة بك. (وإلا، إذا لم تحصل على نفس النتيجة قم بالنقر <a href="http://www.khayma.com/hpinarabic/htutor01.html#begining" class="postlink" target="_blank" rel="nofollow">هنا</a>) وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب: <ul> <li> لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما. </li><li> إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي: </li></ul> <HTML><HEAD><TITLE> This is a test Webpage 
Wow, I'm writing my first webpage ‎
ضع تعليق بحسابك فى الفيس بوك

دروس فى لغة html للمبتداين

Heading 1 <‎/H1>

Heading 2 <‎/H2>

Heading 3 <‎/H3>

Heading 4 <‎/H4>

Heading 5 <‎/H5>

دروس فى لغة html للمبتداين

مواضيع مماثلة

مواضيع مماثلة