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

برمجة و تصميم و تطوير المواقع

مقدمة HTML

حجم الخط

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

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

 

ما هي  HTML ؟

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


معنى H-T-M-L

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

 HyperText هى التحرك على صفحات الانترنت بالضغط على نص معين اسمه  HyperLink   وهى وسيلة للتنقل لاى مكان فى شبكة الانترنت بالضغط على  Link وتعتمد على اللى داخل الاوسمة التى تسمى الـ Tags و هي تشبه اكواد HTML . مما يشير الى ان HTML  هي لغة كاى لغة آخرى .
 Markup  هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتصف العناوين والنقاط والنص السميك وغيرها.
  Language  وهى تعنى اللغة.


ايه هي الـ HTML

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


متطلبات تعلم  HTML

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

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

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

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

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

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


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

 

 


مفردات HTML

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

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

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

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


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

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

investolife

 

وسم النهاية

وسم البداية

html/

html

head/

head

title/

title

body/

body

 



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

والشكل يعطى فكرة عن شكل ملف HTML 

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

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

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


 ملحوظة هامة

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

 

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

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

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

alt



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

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

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

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



investolife



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

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

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



investolife



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

 

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

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


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

<html>
<body>
The content of the body element is displayed  in your browser.
</body>
</html>

و هذا تنفيذه

 

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

ما ابسطها !

الخطوط و الكتابة HTML

 

الموضوع  :  مقدمة HTML المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468