دروس في لغة ال HTML

مقدمة

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

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

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

Text <‎/B>

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

كيف نبدأ...

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

مستند الـHTML الأسـاسـي

كود:

يكتب عنوان الصفحـة هنـا

هنـا يتم كتابـة مـا تريد أن يظهر في الصفحـة

يجدر بنـا التنبيـه على خاصيـة غفلنـا عنهـا
وهـي lang وموجودة في جميـع الوسوم التي لها الخاصيـة dir

---
ثـاني خاصيـة من خواص وسم الـ
هي الخاصيـة : lang
وهي إختصار لـ : language وتعني " اللغة "

تستخدم في تحديد اللغة الأسـاسيـة المستخدمة في الصفحـة مثلا / اللغة العربيـة , اللغة الانجليزية . اللغة الفرنسية
ويتم كتابـة قيمهـا على شكل إختصار مكون من حرفين لإسم اللغة باللغة الإنجليزية ..
يعني مثـلاً ..

fr (French), de (German), it (Italian), nl (Dutch), el (Greek), es (Spanish), pt (Portuguese), ar (Arabic), he (Hebrew), ru (Russian), zh (Chinese), ja (Japanese), hi (Hindi), ur (Urdu), and sa (Sanskrit).

مثــال للشفرة .. كود:

شرح وسم الـ<html>

كل عام وأنتم بخيـر

---

وكذلك وبعد البحث في المرجع الأساسـي للـ HTML توصلنـا لتـالـي :

وسم الـ

كتابـة وسم البدايـة إختياري .. كتابـة وسم النهايـة إختياري
بمعنى إذا أردت كتابة خصائص لهذا الوسم فيجب كتابة الوسم والا فالأمـر إختياري

وسـم

كتابـة وسم البدايـة إختياري .. كتابـة وسم النهايـة إختياري
بمعنى إذا أردت كتابة خصائص لهذا الوسم فيجب كتابة الوسم والا فالأمـر إختياري

وسم كتابة وسم البدايـة واجب .. كتابـة وسم النهايـة واجب وسم <body> كتابـة وسم البدايـة إختياري .. كتابـة وسم النهايـة إختياري بمعنى إذا أردت كتابة خصائص لهذا الوسم فيجب كتابة الوسم والا فالأمـر إختياري يدلنـا هذا الأمـر على أن كتابـة شفرة الصفحـة بهذا الشكـل صحيحـة 100% ... كود: <title> عيد الفطر
كل عام وأنتم بخير
~~~~~~~~~~~~

عناصـر العنوان

كود:
أكبر عنوان

. . .

. . .

. . .

. . .

أصغر عنوان

~~~~~~~~~~~~

عناصـر النص

كود:
لكتابة فقرة

(سطر جديد)
(خط أفقي)
لكتابـة نص مهيء مسبقـاً

~~~~~~~~~~~~

تنسيق النص

مـن هذا الرابط /

الدرس الثالث

ولقد تم التعديـل عليـه .. راجعـوا الدرس و تنبهوا للإضافـات ..

~~~~~~~~~~~

عنصـر الروابـط .. وعنصـر الصور ..

كود:
This is a Link

Send e-mail

A named anchor:
Useful Tips Section
Jump to the Useful Tips Section
~~~~~~~~~~~

قـائمـة غير مرتبـة :

كود:

First item

Next item

Ordere

~~~~~~~~~~

قـائمـة مرتبـة :

كود:

First item

Next item

~~~~~~~~~~

قـائمـة تعريـف :

كود:

First term

Definition

Next term

Definition

~~~~~~~~~

الجداول :

كود:

someheader someheader
sometext sometext
~~~~~~~~

الإطـارات :

كود:

~~~~~~~~

النمـاذج :
كود:

~~~~~~~~~

الرمـوز :

الدرس( 4 )...Character Entities

~~~~~~~~~

وهـذه أخـر الدروس المتقدمـة :

مهمـة جداً .. يجب الإطلاع عليهـا وفهمهـا

الدرس ( 11 ) . .•°•. . HTML Layout - Using Tables . .•°•. .

الدرس ( 12 ) . .•°•. . HTML tag - The Head Element . .•°•. .

الدرس ( 13 ) . .•°•. . HTML URL-encode - HTML URLs. .•°•. .

~~~~~~~

ومـن لديـه سـؤال أو إستفسـار في أي درس من الدروس
فليتفضـل

ومـن ليس لديـه فيـرد بقـول
الحمد لله الذي أنعـم علينـا بتعلـم الـHMTL

» دروس في بعض لغات البرمجة
» دروس الرياضيات بالانجليزية
» دروس هامة لجميع المواد ش ع ط ح
» دروس هامة لجميع المواد ش آ ع إ
» المفاجئة الكبرى دروس جمع القراءات