المتطلبات:
ملف ، مفكرة note pad ، او notepad++ بيكون افضل و جميل
.
امم ممكن ملف وورد لكن لا افضله
و اريد الذكر أن المفكرة اسلوب بدائي للتعليم فقط
اما بالزمن الحالي قد طورت برامج جاهزة للتصميم مثل dream weaver
امم هل ذكرت باي وسيلة او لغة سنصمم
<<لاااا
يا للخرف
سنستخدم ال html و هي نفسها المستخدمة في تصميم عيون العرب ^- ^ << سأععرفك عليها بيوم اخر
يلا نبدأ
***
اولا انشئ ملف باسمك او اي اسم تريد و احفظه في مكان امن
ليكن باللغة الانجليزية افضل:" class="inlineimg" /> افتح المفكرة notepad
و احفظه باسم انجليزي او رقم و ليكن مكان الحفظ ملفك الذي انشأته قبل قليل :" class="inlineimg" />
في الحفظ يجب الاتي
الاسم .
الامتداد "
html او
htm"
انا اخترت
a.
html
النوع "
save as type "
all file
الترميز او "Unicode"
UTF-8
الترميز هو الترميز المستخدم للغة العربية و يمكن المتصفح
من التعرف على المحتوى باللغة العربية.
قبل البدء بكتابة الاكواد سنتعرف على اجزاء صفحة الويب
الهيدر و المحتوى و الفوتر
لنعد للعمل...
داخل المستند النصي اكتب التالي
<html>
<html/>
و احفظ التغيير
الكلمة مع اشارتي اكبر و اصغر من تسمى"
وسم"
الصفحة تتكون من مجموعة "وسوم" و علامة سلاش"
/"تعني نهاية الوسم او وسم الاغلاق.
وسم "
<html>" هو الوسم الذي يجعل من المستند العادي صفحة ويب
*افتح ملفك ستلاحظ أن مستندك اتخذ شكل متصفحك الافتراضي
:" class="inlineimg" />*
و الان لنشكل الرأس او الهيدر بالنسبة لصفحتنا ..
تحت بين الوسمين السابقين اكتب التالي:
<head>
<head/>
ليصبح
<html> <head>
<head/> <html/>
الوسم "
<head>" من وظائفه احتواء جل محتويات الصفحة من بينها العنوان
و لاضافة عنوان نستخدم الوسم
<title>
و يتم كتابته بين
<head> و <head/> <head>
<title>
<title/>
<head/>
لم ننتهي فهناك محتوى الصفحة أو جسمة "الترجمة الحرفية للوسم "
<body>"
يكتب
<body>
<body/>
الشكل النهائي لترتيب الوسوم يكون كالتالي
<html>
<head> <title>
<title/>
<head/> <body>
<body/> <html/>
هكذا انهينا بناء صفحة الا من الفوتر
لكن اذا فتحت الصفحة على المتصفح ستجدها فارغة...
___
ليكون للوسوم ما تعرض لنعطيها القيم
لاعطاء العنوان نروح للوسم تايتل
title <title/>
هنا نضع عنوان الصفحة
<title> <title/> صفحتي الاولى
<title>
او اي اسم تريد
اها فهمتم الباقي؟
اجّل تمّاما و بال
<body> نضع محتوى الصفحة
<body> بسم الله الرحمن الرحيم
عيون العرب
<body/> انتهى الدرس الاول . بيان
الامر اشبه باكواد تنسيق المواضيع و الردود
:" class="inlineimg" />
الدرس القادم سيكون كيفية التنسيق و اشياء اخرى
ردودكم اقتراحات اسئلة تصحيح اي شيء ببالكم ...
طبقوا و احفظوا الشغل عندكم لحتى تجربوا القادم ....دروس قادمة ممتعة