الأحد، 19 مايو 2013

تصميم صفحات المواقع بدون برامج نهائيا

السلام عليكم ورحمة الله وبركاته
تحيه طيبه للجميع

اليوم حبيت ابدأ دروس بسيطه لكل اخوانا بالعالم العربي
وهي مجموعه دروس html لتعليم تكويد ال html بكل بساطه وسهوله
وان شاء الله الجميع يستفيد من الدروس
في هذا الدرس سوف نتناول تصميم صفحات المواقع بدون برامج نهائيا
يمكنك تصميم موقعك عن طريق ال notepad
او اي محرر كتابي
نبدأ بسم الله الرحمن الرحيم
الاول قبل البدأ في تصميم صفحات الهتمل دعنا الاول نفهم ماذا تعني
HTML
وهي كلمه اختصار "HyperText Mark-up Language"
هذا اولاً
ولشرح تفاصيل الجمله عليكم بقرائه التالي

  • Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده.
  • Text تعني النص .
  • Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
  • Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.
اما بعد
سوف نتناول خطوه خطوه بكل سهوله وبسطه
الان افتح اي برنامج محرر عندك
وليكن نضرب مثالاً : برنامج Notepad
ويمكنك فتحه كما في الصوره التاليه
اضغط على الصورة لعرض أكبر

الاســـم: notepad.jpg
المشاهدات: 21
الحجـــم: 11.6 كيلوبايت
الرقم: 101
او اذ كنت لا تستخدم وندوز اكس بي يمكنك عن طريق اي وندوز اخر
فتح قائمه run وكتابه كلمه notepad
وبعدها سيفتح البرنامج تلقائي
ونقوم بكتابه الكود التالي وسوف نتناول شرحه وهو كود انشاء صفحه Xhtml فارغه

كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
الوسم الاول html هو يقوم بتعريف نوع الصفحه المكوده للمتصفح
الجزئ الاول العلوي يعني انك تقوم بانشاء ملف xhtml مطابق للمعاير القياسيه للويب2 المطابقه لشركه
www والمعروف موقعها ب w3.org
اما عن كود بداية ال head يقوم بتعريف المتصفح بكافة العمليات التهئيه مثل اكواد
الجافا سكربت وتعاريف الميتا .... الخ وسوف نتناول شرحها فيما بعد
اما الوسم الاول وهوه وسم الميتا التي تقوم بتعريف المتصفح نوع ترميز الصفحه التي تقومم بكتابها
ويمكنك الرجوع للدروس القديمه لمعرفه تفاصيل الترميز وفوائدها
اما وسم ال title وهوه وسم تقوم بتعريف اسم للصفحه الذي يظهر باعلي المتصفح
ووسم الاغلاق لل head هو الذي يعرف المستخدم انك انتهيت من الجزئ العلوي الذي يخاطب الكومبيلر
وننتقل ل وسم ال body واغلاقه وبين هذين الوسمين تقوم بكتابه كل ما تريده ان يظهر في صفحة الانترنت


مثلا تقوم بكتابة الكود <marquee>dzmastre</marquee>
اما عن وسم اغلاق الصفحه html فهو يعلم المتصفح انك قمت بانهاء عملياتك الكتابيه داخل الكود

وبعدها تقوم بامر الحفظ التالي
Save As
وتقوم بحفظ الصفحه باي اسم تريده وليكن
MYWEBSITE.html
ولكن عليك بكتابه الاكستنشن الخاص بصفحه الهتمل لتحويل النوت باد الي صفحه
HTML