بسم الله الرحمان الرحيم السلام عليكم ورحمة الله وبركاته معلومات عن الكتاب العنوان بتاریخ تعلم html للمبتدي ین 2014 الھدف الكاتب إنشاء موقع شخصي بواسطة html sîmô sîîmôx درجة الصعوبة سھل جدا(للمبتدي ین) لا تنسوني من خالص دعاي كم ملاحظة هامة يمكن نسخ الكتاب ونشره بدون علم المو لف لا توجد أي مشكلة الكريم : ا ذا كانت هناك ي ملاحظة و ي خط في هذا الك اب الر اء ا رسا ا لى وساي ل الا تصال المدونة في خر الك اب و ش ك را
الا هداء إلى كل من لدیھ الرغبة إلى كل من لدیھ طموح إلى كل من یرید إنشاء موقع إلكتروني و كل من یرید تعلم HTML أھدیھ ھذا الكتاب بتواضع و حسن نیة و عن طیب خاطر. بعد الا نتهاء من الدورة ) إن شاء الله) سيتمكن كل شخصن ممن إطلع على هذا الكتاب من إنشاء موقعه الشخصي من عدة صفحات من برمجته الخاصة وفق طريقته و أسلوبه. وفقكم الله. إعداد و تقديم sîmô sîîmôx ماذا نحتاج أولا نحتاج إلى برنامج لتحریر النصوص البسیطة ومعالجتھا مثل برنامج الword أو bloc-notes وكذلك إلى متصفح الا نترنت لمعاینة الصفحات كchrome google أو mozilla firefox أو internet explorer أو...netscepe navigator علیك فقط أن تقوم بحفض النص المكتوب بملف یحمل الصیغة أو الا مداد html. أو htm. 1 -مقدمة و تعريف بسيط عن html لغة html ھي اختصار لجملة Language) (Hyper Text Markup وقد صنعة لعرض المعلومات و الروابط في صفحة الا نترنت وتقوم ھذه اللغة في وصف و ھیكلة المحتویات بشكل و تنسیق مناسبین وذلك من خلال الTAGS الخاصة بھا لتظھر لنا بالشكل الذي نراه في صفحات الویب فھي إذا لیسة لغة برمجة كما یظن البعض. ولقد إبتكرة من قبل مخترع الوب Tim) (Berners-Lee ثم طورة من قبل منظمت (IETF) والا ن أصبحة منظمة الویب العالمیة (W3C) ھي الراعیة لھذه اللغة والمسؤولة عنھا. 2 -العلامات العلامات balises" "les وھي كلمة مفتاحیة في html تبدأ بعلامة أصغر > وتحدد إحدى الكلمات المفتاحیة (نراھا لاحقا) و تنتھي بعلامة أكبر < و تكون على شكل balise 3 -الا ساسيات لنا خذ الوسوم التالیة
ماذا تلاحظ أن كل منھا یتا لف من زوج من الوسوم إحداھما وسم البدایة و الا خر وسم النھایة. بوجود الرمز /. تا مل الرسم التالي فھو یعطي فكرة عن ترتیب ملف html إذن فملف html یبدأ داي ما بالوسم HTML و ینتھي بالوسم /HTML أما الوسم HEAD فیحدد بدایة المقطع الذي یحتوي على معلومات خاصة بتعریف الصفحة كالعنوان الظاھر على شریط عنوان المتصفح. وھذا العنوان بدوره یحتاج لا ن یوضع داخل الوسمین title... /title وبالطبع یجب كتابة الوسم /HEAD كي ننھي ھذا المقطع. نا تي إلى الوسم BODY والذي یتم كتابة نصوص صفحة الویب ضمنھ بالا ضافة إلى إدراج صور و جداول و باقي المحتویات و ھو أیضا یحتاج إلى وسم الا نھاء /BODY و الا ن سنحاول تطبیق ما رأیناه قم بفتح برنامج تحریر النصوص مثلا 'word' أو 'Bloc-notes' وأكتب ما یلي HTML HEAD TITLE Bienvenue /TITLE /HEAD BODY Wow
/BODY /HTML و الا ن قم بحفض ملف و با ي إسم تختاره ولكن لا تنس أن الصیغة أو الا متداد المستخدم ھو simo.htm مثلا أنا إخترت الا سم htm. أو html. و الا ن قم بتشغیل ذلك الملف بمتصفح الا نترنت لدیك (إضغط علیھ) وھذا ما ستحصل علیھ و قبل أن نستمر أرید أن أنبھك إلى بعض الملاحضات عند كتابة صفحات الویب: لا یوجد فرق بین كتابة الوسوم بالحروف الكبیرة HTML والحروف الصغیرة html 4 -علامات الشكل والمضهر 4.1 -شكل الصفحة شرح الوسوم المستخدمة في المثال أعلاه : : Bgcolor لون خلفیة الصفحة : Text لون النص في الصفحة : Link لون الروابط في الصفحة : Vlink لون الروابط التي تم زیارتھا : Alink لون الروابط النشطة في الصفحة html لوضع مكانھا أكواد الا لوان في : #xxxxxx 4.2 -شكل النص
4.3 -الجداول من أجل إنشاء جدول في html علینا الا ستعانة بالعلامات التالیة /TABLE... TABLE من أجل تعیین عنوان للجدول /CAPTION... CAPTION من أجل إنشاء أسطر في الجدول /TR... TR من اجل إنشاء خانات في الجدول /TD... TD مثلا ملاحظة : في الجدول أعلاه لا تظھر خطوط الجدول وذلك لوجود تنسیقات تحدد ذلك تنسیقات على الجدول : width لتحدید عرض الجدول مثال '400' أو النسبة المؤویة من قیاس الشاشة '75' : bgcolor تحدید خلفیة الجدول : align لتحدید محادات الجدول : border عرض الحافة ببیكسل : rules التخطیط في الجدول تنسیقات على السطر
: bgcolor لتحدید خلفیة السطر : align لتحدید محادات النص في السطر تنسیقات على الخانات : width لتحدید عرض الخانة : bgcolor لتحدید خلفیة الخانة : align لتحدید محادات النص أفقیا في الخانة : valign لتحدید محادات النص عمودیا في الخانة top في أعلى الخانة middle في وسط الخانة bottom في أسفل الخانة : colspan تجمع عدة خانات N للجھة الیمنى : rowspan تجمع عدة أسطر N للا سفل مثال لجدول الا كواد المستخدمة img src='sîmô sîîmôx/images/images et temps/wallpapers/wallpapers (145).jpg' 5 -الصور من أجل إضافة صور إلى صفحة html علینا تطبیق الطریقة التالیة : src='...' img : src ھو مصدر الصورة أو مكانھا فنضع بین '...' مصدر أو مكان الصورة مثلا img src='images/1.jpg' 5,1 -تنسيقات على الصور img src='...' border='2' : لوضع حدود للصورة مثلا : border img src='...' title='my photo' : عنوان الصورة مثلا : title
: width عرض الصورة ب البیكسل height : طول الصورة بالبیكسل 6 -الروابط الشكل العام لا ضافة رابط : a href="adress" texte ou image /a مثلا a href="http://www.google.com" google /a وإذا أردت أن یفتح الرابط في بوابة جدیدة علیك إضافة target="_blank" عند الحرف a مثال a target="_blank" href="http://www.google.com" google /a 7 -الا لوان ھناك ثلاثة ألوان أساسیة ھى الا حمر والا خضر والا زرق ولكل منھا یوجد 256 درجة لونیة ویعبر عن ھذه الدرجات بالا رقام من 000 وحتى 255 ومن خلال مزج ھذه الا لوان بدرجاتھا اللونیة المختلفة نحصل على الا لوان الا خرى. إنأيلونھومزيج -وبنسبةمعینةمنالدرجات -منھذهالا لوانالثلاثة فمثلا اللون الا سود مكون من الدرجة 000 من كل من اللون الا حمر والا خضر والا زرق واللون الا بیض مكون من الدرجة 255 من كل من اللون الا حمر والا خضر والا زرق أما اللون الا صفر فھو مكون من الدرجة 255 للون الا حمر والدرجة 255 للون الا خضر والدرجة 000 من اللون الا زرق وھكذا بنفس الطریقة یتم تكوین باقي الا لوان. وبعملية حسابية بسيطة 256*256*256 ينتج لدينا أن عدد الا لوان التي يمكن الحصول عليها بمزج الا لوان الثلاثة السابقة هو 16777216 بالضبط. مثال F0F8FF# #7FFFD4 FFE4C4# A52A2A# FAEBD7# F0FFFF# #000000 #8A2BE2 #00FFFF F5F5DC# FFEBCD# #0000FF
ھل ھذا یكفي أعني ھل یكفي ما رأیناه لتكون من الا واي ل داي ما على صفحات محركات البحث نعم ولكن ھناك داي ما جھود إضافیة علیك بدلھا وھذه المرة علیك التوجھ إلى ھذه المحركات و البحث عن الوصلات التشعیبیة الخاصة با ضافة المواقع الجدیدة. في Altavista ستجد أنھى تسمى page' 'add وفي Infoseek و Excite و HotBot ستجدھا add' 'URL أما في Yahoo فھي Site' '?How To Suggest a كذلك ستجد مثل ھذه الوصلات في المواقع العربیة و عادة تعرف ب 'أضف موقعك'. على أیة حال قم بالنقر علیھا لكي تقودك إلى نموذج بسیط علیك ملؤه ببعض المعلومات عن موقعك ولا تخف فا ن طریقة التعامل مع ھذه النماذج ھي أبسط مما تتصورإ. لكن لا تتوقع أن ترى موقعك وقد تمت إضافتھ في الدقاي ق التالیة لھذه العملیة فھذا یحتاج في معظم الا حوال إلى عدة أیام. أعرف أنك ستقول عن ھذه العملیة با نھا صعبة وشاقة. لذلك سوف أدلك على طریفة أسھل وأسرع بكتیر ھناك برامج خاصة لا دراج المعلومات عن المواقع والصفحات بحیث نقوم بملا نموذج خاص لمرة واحدة فقط بكل ما نزیده من معلومات ثم یقوم ھذا البرنامج با رسالھا إلى المي ات من محركات وأدلة البحث... ھكذا ببساطة وبدقاي ق معدودة. إعداد و تقديم sîmô sîîmôx لكل من أراد التواصل معي بریدي الا لكتروني: simo_siimox@outlook.com رقم ھاتفي الشخصي: (212+)17841639 أو (212+)26551753 دمتم با لف خير و السلام عليكم ورحمة الله وبركاته.