التمرين الأول :
ستقوم الآن إن شاء الله بإنشاء أول صفحة إنترنت لك: قم بنسخ البرنامج أسفله في أحد برامج النصوص البسيطة في نظام التشغيل الويندوز مثلا واستخدم البرنامج Bloc-Note
| <html> <head> <title>عنوان الصفحة </title> </head> <body> السلام عليكم هذه هي صفحتي الأولى بلغة الترميز المتشعبة </body> </html> |
-
احفظ الملف باسم Ex1.html الامتداد .html يحول الملف إلى صفحة ويب. افتح الصفحة ولاحظ العنوان ومحتوى الصفحة.
يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <title> و <title/>، والمكان الصحيح لوسم الـ <title> هو الرأس،لأن هذا الوسم لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشفة كما في محركات البحث، ولا يمكنك وضع وسوم تنسيق أخرى بين وسمي الـ title. وتوجد أيضا وسوم أخرى تحدد صفات المستند تسمى وسومmeta توضع أيضا في منطقة الرأس، وسنأتي إليها في درس لاحق. أما باقي الوسوم فأغلبها يوضع في منطقة الجسم body.
لتحميل الملف أنقر هنا .
التمرين الثاني :
جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.إذا أردت مثلا أن تغير لون الخط في كلمة -السلام عليكم - في مثالنا السابق، سنحتاج إلى استخدام الوسم Font، حيث سنستخدم الوسم Font بأن نضبط خاصية لون الخط في هذه الكلمة إلى اللون الأحمر، ويتم هذا كالتالي:
|
<html> <head> <title>عنوان الصفحة </title> <head/> <body> <font color="red"> السلام عليكم </font> هذه هي صفحتي الأولى بلغة الترميز المتشعبة <body/> <html/> |
حيث ستبدو هكذا:
السلام عليكم هذه هي صفحتي الأولى بلغة الترميز المتشعبة
لتحميل الملف أنقر هنا.
ملاحظات :
-
لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبيرة UPPERCASE أو الأحرف الصغيرة lowercase. لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما.
-
إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html. وبعبارة أخرى يجب آستعمال بعض الوسوم التي تمكنك من الرجوع للسطر أو إنشاء بعض الفراغات.
لاشك أنّ الصفحة التي قمت بإنشائها لا تغري إبداعك و طموحاتك في إنشاء صفحات أكثر نضج و احترافية إلا أنّ هذه مجرد تمارين إحمائية و سيتأتى لك ذلك إذا تابعت باقي الدروس.