لابد وان تعلم ان ال HTML او الهتمل هى اللغة المستخدمة فى الانترنت و هى وسيلتك لاحتراف عالم تصميم المواقع فهى نافذتك لتعلم الكثير عن انشاء و تصميم وتطوير المواقع .
ما هى HTML ؟
اختصار ل (Hyper Text Markup Language)
وهى ليست لغة برمجة بالمعنى المعروف ك C++ , JAVA وغيرهم فهى لغة سهلة و بسيطة يسهل لاى كان تعلمها و اتقانها و لا تحتوى على شفرات كثيرة و لا تحتاج الى مترجم compiler و لا تحتاج الى نظام تشغيل معين لانه يتم تفسيرها و تنفيذها مباشرة من قبل متصفح الانترنت و لا تحتاج لمعرفة مسبقة باى لغة برمجة لكن تحتاج الى القليل من المنطق و ترتيب الافكار و تطبيق عملى لما سوف ندرسه باذن الله .
كيف نبدأ؟
لايتطلب الHTML اى برامج خاصة بل تحتاج الى محرر نصوص بسيط و برنامج المفكرة Notepad الموجود فى Windows يفى بالغرض و كذلك الى احد متصفحات الانترنت مثل Netscape او Internet Explorer لمعاينة الصفحات التى تقوم بانشائها كل ما عليك فعله هو فتح صفحة Notepad ثم حفظها باى اسم و كتابة الامتداد HTML. او HTM.
اولا : الاساسيات
تكتب لغة HTML برموز تسمى الوسوم اوTAGS و تكتب بالضيغة التالية :
<TAG/> النص يكتب بين الوسمين<TAG>
لكل وسم من وسوم اللغة وسم بداية و وسم نهاية كما موضح فى المثال التالى :
<B>Text </B>
و هناك بعض الوسوم المنفردة مثل<BR> وهذا الوسم لاضافة سطر جديد.
سنقوم الان بمعرفة الوسوم الاساسية لصفحة الويب و مناقشتها واحدا تلو الاخر
اذا فملف ال HTML لابد و ان يبدا ب <HTML > و ينتهى ب <HTML/> لا تنسى هذا ابدا .
اما الوسم <HEAD> فيحدد بداية المقطع الذى يحوى المعلومات الخاصة بالصفحة كالعنوان الظاهر على شريط عنوان المتصفح و حقوق النشر و غيرها من الامور التى سنتطرق اليها لاحقا .
عنوان الصفحة يكتب بين الوسمين <TITLE> و <TITLE/>
ثم نغلق وسم head ب <head/>
ثم ناتى للوسم الاكثر اهمية و هو وسم body حيث يكتب فيه محتوى صفحة الويب و ما يظهر للمستخدم user ويغلق فى النهاية ب <body/> .
ما رايك اذا طبقنا ما قرأنا الى الان ؟ …قم بفتح صفحة فى المفكرة Notepad واكتب بها الاتى :
<html>
<head>
<title> My first web page </title>
</head>
<body>
I'm writing my first web page
</body>
</html>
الان قم بحفظ ما كتبت باى اسم تختاره و لا تنسى الامتداد html.
لكى تشاهد ما كتبت ادخل على متصفحك فاذا كان Internet explorer فاختار open من قائمة file و اذا كان Netscape فاختار open file وكذلك فى Mozilla Firefox ثم حدد المسار الذى يوجد به الملف .
ستجد النتيجة كالاتى:
هل حصلت على نفس النتيجة ؟ اذن مبروووووووووك فقد قمت بانشاء اول صفحة لك على الويب .
و الان بعض الملاحظات الهامة التى قد تفيدك عند كتابة اللغة
لا يوجد فرق عند كتابة الوسوم بالحروف الكبيرة Uppercase او بالحروف الصغيرة Lowercase .
المتصفحات لا تاخذ بعين الاعتبار المسافات او اشارات نهاية الفقرات (اى عند الضغط على Enter لن ينتقل لسطر جديد) ولذلك يمكن كتابة البرنامج السابق كله على سطر واحد و ستكون النتيجة كما هى (جرب بنفسك.)
<html><head><title> My first web page </title></head><body>I'm writing my first web page </body></html>
او باى شكل تريد و ستكون النتيجة واحدة .
هذه تعتبر مشكلة المتصفح لا يفهم اشارات السطر الجديد فماذا افعل؟ … الامر سهل باستخدام الوسم
كما اشارنا مسبقا هذا الوسم منفرد لتحديد نهاية السطر فاذا اضفنا هذا الوسم الى البرنامج السابق لنرى على ماذا سنحصل؟
<html>
<head>
<title> My first web page </title>
</head>
<body>
I'm writing <br>my first <br>web page
</body>
</html>
وهناك ايضا الوسم <p> ويقوم تقريبا بنفس عمل الوسم السابق
<html>
<head>
<title> My first web page </title>
</head>
<body>
I'm writing <p>my first </p>web page
</body>
</html>
اما بالنسبة للفراغات فلها رمز خاص و هو; nbsp& وهى اختصار لNon Breakable SPace و على حسب عددها تكون عدد الفراغات و تكتب فى المكان المراد احداث فراغ فيه مثل :
<html>
<head>
<title> My first web page </title>
</head>
<body>
I'm writing   my first   web page
</body>
</html>
و بذلك نكون انتهينا من الدرس الاول وفى الدرس القادم باذن الله سنتعلم كيفية اضافة حيوية لصفحة الويب باستخدام الالوان .
