استثمر للحياة investolife

HTML مقدمة

يظن الناس أن انشاء المواقع حاجة صعبة و معقدة لكن دواً سهل جدا ممكن لاى حد يتعلم ايزاى يعمل موقع و حد تانى يقول أن إنشاء المواقع يحتاج إلى برامج غالية ومتقدمة بس ده مش صح، انتا ممكن تبدا فى بداية تعليمك بدون اى برامج علشان تعرف تكوين الصفحة ايزاى وبعد فهمك للاساسيات ممكن تستخدم برامج زى الدريم ويفر او فرنت بيج او اى برنامج تانى  بعد كدة بس مش فى الاول و عملية تطوير المواقع بسيطة وسهلة جداً .

الهدف من هذه الدروس نعطيك مقدمة سهلة وصحيحة وشاملة عن إنشاء المواقع، هذه الدروس تبدأ من نقطة الصفر و مش محتاجه أي معرفة قبل كدة منك عن البرمجة أو تطوير المواقع .

HTMLتعالوا نعرف اول حاجة ايه قصة

HTML هي اللغة المستخدمة لانشاء صفحات الانترنت و اللغة الأم لمتصفحك لكي نختصر القصة اخترعت HTML وفى عام1990 م

1990م من قبل عالم يسمى تيم بيرنرز لي، كان الهدف منها هو تبسيط عملية وصول العلماء فى جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي قام تيم بوضع أساس شبكة الويب HTML كما نعرفها اليوم .

معنى H-T-M-L

HTML هي اختصار "  HyperText Mark-up Language "

HyperText هى التحرك على صفحات الانترنت بالضغط على نص معين اسمه HyperLink وهى وسيلة للتنقل لاى مكان فى شبكة الانترنت بالضغط على  Link وتعتمد على اللى داخل الاسمة التى تسمى الـ Tags يعنى انها تحتوى على اكواد كاى لغة تانية .

Markup هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتصف العناوين والنقاط والنص السميك وغيرها.

Language وهى تعنى اللغة.

ايه هيا الـ HTML

لغة html هى لغة تصميم مواقع وهى اول لغه تم استخدامها فى تصميم صفحات المواقع وليس لها اى علاقة ببرمجة المواقع وهى تتميز بالسهوله ويمكن لاى شخص تعلمها بسهوله .

HTML حاجة  كمان عوزين نعرفها احنا محتاجين ايه علشان نبدا تعليم

محرر النصوص البسيط الموجود فى الويندوز اللى ممكن تلاقيه في قائمة إبدأ "start" ثم قائمة البرامج "Program" ثم في قائمة الأدوات "Accessories"

مستعرض الانترنت هو مايكروسوفت إنترنت إكسبلورر او اى متصفحات أخرى مثل أوبيرا وموزيلا او فايرفوكس وكلها قابلة للاستخدام و فائدتها عرض الصفحات اللى بنصممها كل اللى علينا هو حفظ النص فى الصفحة بتاعت Notebad باحد  الامتددادين htm او html

كتير ممكن يسال هل لازم اكون متصل بالانترنت ؟

طبعاً لا احنا بنقوم بكتابة الصفحات ولاكواد وكل صفحات موقعك دون الاتصال بالانترنت بس احنا هانحتاج النت فى حالة واحدة بس هى اننا نرفع او ننقل موقعنا على النت كى يراه اى شخص او تعديل فى صفحة من الصفحات بعد نقلها على النت وده هنعرفة بعد كده فى الدروس .

محرر للصور انتا محتاج لبرنامج محرر للصور علشان تخلى موقعك اكثر جاذبية للزائرين فممكن تستخدم برنامج ادوبى الفوتوشوب او اى برنامج اخر .

استثمر للحياة investolife

العناصر والوسوم

أصبح عندنا محرر النصوص لكتابة HTML وكمان متصفح الانترنت لعرض الصفحة ومجموعة الدروس اللى هانطبقها سوا يلا ننطلق مع بعض و نتعلم عالم تصميم المواقع يلا نبـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــدأ

اول حاجة ايه العناصر

العناصرتعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة بشكل عام. وكمانالعناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الاغلاق .

تانى حاجة ايه الوسوم

هي الاشياء او اكواد التى بين القوسين “ ” اكيد مش شفتم اكواد تبدا بهذا الشكل من قبل طب يلا تعالوا نشوفها منين . من قائمة  "View" ثم المصدر  "Page Source" زى ما انتم شايفين امامكم .

وتكون صفحة الكود زى كدة ان النص الذى تقراه محاط  بين القوسين الاكواد ديا هيا اللى خرجت الصفحة اللى امامكم

كدة عرفنا ان الاوسمة تبدا من اليسار وتنتهى الى اليمين ممكن تكون واضحة اكتر فى الشكل التالى :

و بشكل أخر

زى ماحنا شايفين ان كل وسم بتكون من زوج من الوسوم  وسم بداية وسم نهاية ويتميز وسم النهاية بالرمز / والشكل التالى بيعطى فكرة عن شكل ملف HTML

صفحة HTML يبدا دائما بالوسم وينتهى بالوسم مش تنسوا لان ده مهم جدا .

الوسم فيحدد بداية المقطع الذى يحتوى على المعلومات الخاصةبتعريف الصفحة  وكمان بيكون داخله ويحدد العنوان الظاهر على شريط عنوان المتصفح وبعد كده نقفل وسم وكمان نقفل وسم كده نكون خلصنا الوسم .

الوسم واللى بنكتب فيه نصوص صفحة الويب فيها وكمان اضافة الصور والجداول وكل المحتويات وباقى الصفحة وزى مااحنا عارفين اننا نقفله .

ملحوظة هامة

زى ما بنقول لكل قاعدة شواذ وهو عندنا فى عناصر HTML وسم البداية ووسم الإغلاق في نفس الوقت وتسمى بالعناصر الفارغة لأنها غير مرتبطة بنص معين بل عناصر مستقلة تمام فمثلاًهناك وسم لجعل النص يظهر في سطر جديد اجبارى اسم هذا الوسم <br>

الدرس القادم هو انشاء موقعك الاول

تابعونـــــــــــــــــــــــــــــــــــا

استثمر للحياة investolife

إنشاء موقعك الأول

ها ياترى مستعدين لعمل  الموقع الخاص بك يلا نفتح برنامج Notepad محرر النصوص زى ماعرفنا فى الاول في قائمة إبدأ ثم برامج ثم أدوات كما هو بالاعلى

واكتب فيها التالى

انتهينا! انتادلوقتى عندك أول موقع حقيقي !

كل اللى عليك دلوقتى هو حفظ الصفحة  فى ملف وباى اسم تختاره ليكن my page ومش تنسوا يكون امتداد الصفحة htm او html

خطواط حفظ الملف

في برنامج المفكرة اختر "Save as..." من قائمة "File"   في القائمة العلوية

اختر "All Files" من نافذة  "Save as type" هذا مهم جداً،  لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML كما هو بالشكل التالى :

و الان لكى تشاهد تنفيذ ما كتبته .

علينا بالضغط مرتين يسار على اسم الملف .

او بضغط مرة يمين و تختيار open with ثم اسم المتصفح .

او افتح المتصفح الخاص بك ثم file ثم open

و نرى تنفيذه كما بالصورة

إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات . (أي عندما تقوم بضغط مفتاح Enter) التي تجدها هذه المتصفحات في ملف Html.
وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق بالشكل التالي:

<HTML><HEAD><TITLE> This is my Webpage </TITLE></HEAD><BODY> investolife I like it </BODY></HTML>‎

في كلا الحالتين سيظهر نفس الناتج .

مثال بسيط و مختصر

و هذا تنفيذه

The content of the body element is displayed in your browser .

ما ابسطها !