منتدي عاشق ايجيبت


الدرس الثاني & الثالث : ما هي لغة الـ Html ؟ ولماذا نتعلمها ؟

اذهب الى الأسفل

الدرس الثاني & الثالث : ما هي لغة الـ Html ؟ ولماذا نتعلمها ؟ Empty الدرس الثاني & الثالث : ما هي لغة الـ Html ؟ ولماذا نتعلمها ؟

مُساهمة من طرف Admin الأربعاء فبراير 28, 2018 2:52 pm

بسم الله الرحمن الرحيم


عشان اوضحلكم معني لغة ال HTML اسمحولي أقولكم مثال بسيط ..

لو أنا بكلم واحد من أمريكا وعايز أقوله حاجة يعملها ....

لو قلتله الحاجة دي بالإنجليزي هيفهمها وينفذها ..

لو قلت نفس الحاجة بالعربي مش هيفهمها ولا هينفذها ..

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

نفس الحال بالنسبة لل BROWSER ..

اللي هو الصفحة اللي فاتحة قدامك .... هي في البداية بتقتح بيضة "فاضية" ...

الكلام والمعلومات اللي فيها بتظهر ازاي ؟

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

فبما أن ال BROWSER هو اللي بيستقبل المعلومات يبقي السيرفر لازم يبعتله المعلومات دي باللغة اللي هو بيفهما عشان يظهرها قدامنا... لو بعتله نفس الكلام باي اسلوب تاني مش هيرد

فالـ Browser زيه زي اي انسان ليه لغات بيفهمها ولو قلتله أي حاجة باللغات دي بينفذها فوراً .... بس هو احسن من الانسان في ان هو بيفهم لغات كتير ... وكمان لو قلتله اي حاجة وفهمها بينفذها فوراً

أول وأبسط لغة من اللغات اللي بيفهمها المتصفح هي لغة ال HTML ...

وهناك لغات أُُخري كثيرة أكثر تطوراً من ال HTML لكن الأساس هو ال HTML زي الإنجليزي بالنسبة للشخص الأمريكي ...

ولا يوجد اي موقع يخلو من لغة ال HTML .. بالرغم من أنها أقل اللغات تطوراً ...

وفي برامج حاليا تُغني عن لغة ال HTML وتقوم بكل وظائفها بصورة أسهل ومنها "FRONT PAGE , DREAMWEAVER".... ولكن ...

اللي ناوي ياخد HTML ويقف علي كده يبقي أحسنله يدرس البرامج دي لأنها اسهل منه ... لكن اللي عايز يحترف ويبقي فاهم هو بيعمل ايه أولاً ...


وكمان عايز يتقدم ويدرس لغات تانية بعد كده ويكمل في الطريق يبقي لازم يعرف HTML الأول ...

طيب دلوقتي احنا قلنا ان السيرفر بيبعت المعلومات للأجهزة باللغة دي ... طب واحنا مالنا احنا ..

ماحنا بنشوف المعلومات جاهزة وخلاص هنتعب نفسنا ليه ؟

وده لأننا عايزين نصمم مواقع .. يعني احنا اللي هنعمل الصفحة ونحطها علي السيرفر يبقي لازم نحطها باللغة دي لان السيرفر مش هيعمل أي حاجة غير أنه هيبعتها ..

فلازم نكون حاطينها عليه بلغة يفهما المتصفح لما يبعتهاله ...

يارب يكون الاسلوب واضح ..

إعذروني إذا طولت شوية المرة دي لأنها أول مرة ندخل في اللغة .. فممكن تحتاج تطويل شوية في الشرح لغاية ما نفهم اللغة دي ماشية إزاي ….

يعني كمية المعلومات المرة دي قليلة بس هتاخد شرح كتير.. وإن شاء الله هتلاقوه سهل مش صعب أبداً … وعشان العملية متسيحش .كل فترة هكتب خلاصة الكلام اللي اتقال وفي الأخر هكتب الخلاصة كلها ..

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

وأنا في الأخر خالص كاتب الخلاصة كلها في سطرين بس هتلم الموضوع كله إن شاء الله بس بعد متفهمه … كمل للآخر ..

الاول نعرف ايه معني الكلمة دي وليه سموها كده ..

مش معقول اول ما اخترعوا اللغة دي قالوا نسميها html ؟ أكيد في سبب

اختصار لهذه الجملة:

HTML : hyper text markup language

يعني لغة تقدر بيها تحط علي الانترنت texts بكميات كبيرة (hyper) بس الاسم ده كان لانها في بداية ماخترعوها كانت بس لوضع texts مش اكتر ..

انما دلوقتي تطورت كتير وممكن نحط texts وصور وفيديو واوديو وفلاشات وكل حاجة …

بس لما تطورت اللغة الاسم متغيرش فضل زي ماهو …

نبدأ بقي نعرف ازاي نعرف المتصفح المعلومات باللغة دي …

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

بمعني: أنا عندي فايل اسمه مثلا : Eslam.txt وعليه كلام مكتوب "بأي محرر كتابة زي ال notepad"

لو أنا قلتله rename وخليت اسمه Eslam.html هتلاقي شكله اتحول الي صفحة انترنت اكسبلورر واللي هيفتحه هو الانترنت اكسبلورر..

لأن أنا كده قلتله ان الكلام اللي عندك هنا مكتوب بلغة html فالجهاز هيحوله تلقائيا إلي البرنامج اللي بيفهم اللغة دي وهو يتعامل معاه .. إذا لقاه فعلا باللغة دي هيفهمه .. إذا لقاه مش بيها مش هيفهم فيه حاجة …

أقصد أقول من الكلام اللي فات ان اللي احنا بنعمله عشان نكتب صفحة بالاتش تي ام ال بنفتح صفحة أي محرر كتابي زي النوت باد مثلاً ونكتب فيها الكلام اللي احنا عاوزينه باللغة اللي هنتعلمها

وبعدين نحول امتداده الي .html هيروح البراوزر فاتحه وقاريه ….

إن شاء الله الكلام ده هيوضح أكتر بعدين …

الجملة الأخيرة دي ليا عليها تعليقين :

محررات الكتابة المتوفرة كتير وابسطها واسهلها هو ال notepad وهو ده اللي هنتسعمله ..

التعليق التاني انهم عملولنا حاجة بسيطة للتلخيص .. بدل متخلي الامتداد .html ممكن تخليه .htm بس من غير حرف ال" l " هتقول ايه بقي ... عالم فاضية ..

قال يعني الحرف ده هو اللي فارق معاهم اوي…  الدرس الثاني & الثالث : ما هي لغة الـ Html ؟ ولماذا نتعلمها ؟ 1f602 

خلاصة كل اللي فات ..

اقف في أي حتة فاضية في الشاشة واضغط كليك يمين..

واختار new واختارمنها text doccument …

هيفتحلك صفحة تكتب فيها الموضوع بتاع سيادتك ..

ازاي بقي بتكتب الموضوع بتاع سيادتك ؟

ناخد دلوقتي نبذة بسيطة عن الشكل لعام اللي بتكون عليه اللغة دي …

اللغة دي عبارة عن عدة أوامر كل أمر بينفذ حاجة … أوعي تقلق وتقول هو أنا هقعد أحفظ أوامر بقي ..


أنت مش هتحفظ حاجة خالص .. أنت بس هتكتب الأوامر دي عندك في ورقة وكل ما تحب تعمل حاجة تبص في الورقة دي تشوف ايه الأمر اللي بيعملها وتكتبه …

يعني مثلاً لو أنا بعمل موقع بسيط أوي فيه شوية كلام وصورة جنبه بس كده …

هقوله الأمر اللي بيفهمه اني هحط صورة … وبعدين أحطها ..

وعشان أحط الكلام مش محتاج أي أمر … يعني هو بيفهم أي حاجة مكتوبة علي أنها كلام مالم يذكر غير ذلك ..

يعني هو بيمشي يترجم الكلام المكتوب وينقله في صفحة الموقع زي ماهو مكتوب بالظبط كلام عادي …

لو لقي في طريقه أمر بيقوله أعمل حاجة معينة خلاص بيبطل ينقل الكلام المكتوب ويبدأ ينفذ الأمر ده …

طيب دلوقتي احنا هنكتبله الكلام وهنكتبله الأوامر … إزاي هيعرف أن ده كلام عادي عايزه يظهر وأن ده أمر بحطه لتنفيذ شئ معين ؟

للتفريق بين الكلام والأوامر بنحط الامر بين علامة اكبر من واصغر من <...>

هو اول ميشوف العلامتين دول بيعرف ان المكتوب في وسطهم امر هينفذه ...

في حاجة عايز اقولها ولو موضحتش اوي دلوقتي مش مشكلة … إن شاء الله لما نعرف أوامر هتوضح اكتر إن شاء الله …

أنا لما أقوله أمر وأكتبه بين < > مثلاً بقوله يغير لون الكلام .. يبقي لازم أقوله فين آخره … ما أنا لو سبتهاله كده هيغير لون الكلام ف الصفحة كلها لأن أنا مقلتلوش قف ...

بقوله كده ازاي ؟

بكتب نفس الامر بس بالمنظر ده

الكود:
</ >

يعني بزود العلامة دي / بيفهم هو أن الكلام المكتوب بين الأمر وإغلاقه علي أنه صورة …

بكتب علامة أكبر من وبعدين العلامة دي / وبعدين اسم الأمر وبعدين علامة أصغر من ....

طيب المنظر العام للصفحة ؟

احنا عرفنا أن في لغات كتير بيفهمها المتصفح يبقي أول حاجة لازم أعرفهاله أن أنا بكتب بلغة الـ html ..


يبقي في عندنا أمر بيتكتب في أول الصفحة بيعرفه أن أنا بكتب html الأمر ده صيغته :

طيب مش احنا قلنا أي أمر لازم يتقفل بعد منخلص كل اللي هنعمله بيه ؟

يبقي الأمر ده بيتقفل فين ؟

بيتقفل آخر حاجة خالص في الصفحة بعد منكتب كل اللي احنا عاوزينه في النص بالمنظر ده :


الكود:
<html>
…………….
…………….
</html>

طيب بعد معرفته إني هكتب html نعرف بقي شكل صفحة الـ html عموما دلوقتي ….

بتتقسم صفحة ال html الي جزئين

head و body

ال head بكتب فيه شوية كلام مش هيظهر في الصفحة زي عنوان الصفحة مثلاً وشوية حاجات تانية كده هنعرفها في وقتها إن شاء الله

ال body بكتب فيه الكلام اللي هيظهر في الصفحة … فلازم أعرف أنا بكتب head ولا body ازاي ؟

برده في أمر بيفهمه الكلام ده … وكل واحد منهم أمره بنفس إسمه ….

يعني لما أحب أعرفه إني هكتب head الامر شكله كده:

الكود:
<head>…………………</head>

لما أحب أعرفه إني هكتب body الأمر شكله كده

الكود:
<body>…………….</body>

يلا اطلع اقرأ الكلام ده مرة تانية بعد ما أخدت فكرة عنه .. في المرة التانية إن شاء الله هتفهمه كويس أوي ….

يبقي الملخص الشكل العام:

هتفتح صفحة notepad

وتكتب فيها

الكود:
<html>
<head>......</head>
<body>......</body>
</html>

إن شاء الله المرة الجاية هناخد الأوامر اللي موجودة بين الكلام ده ….

عشان تجربوا الكلام ده اكتبوا نفس المنظر العام اللي أنا كاتبه واكتبوا ما بين ال body وإغلاقها أي كلام يعجبكم "بياناتك مثلا"

وبعدين اقفل الصفحة وقوله save واطلع قوله rename وغير امتدادها خليها .html وبعدين افتحها …

هتلاقي الكلام اللي أنت كتبته ظهر والأوامر طبعا مش ظاهرة .. هو بس فهم منها هو هيعمل ايه …

وعلي فكرة هتقابلكم مشكلة هتجننكوا في الكلام اللي هيظهر مش هقوللكوا دلوقتي هي ايه .. هبقي اقولكوا في وقتها … خليها تجننكوا شوية ..

يلا ربنا معاكوا ..

و أي إستفسار أو مشكل أنا في الخدمة يا شباب …

بعد هذا الدرس ورد تساؤل من الكثير أنه لا يوجد عندهم امتداد للملف notebad وبالتالى عند قيامهم بتغير الامتداد يظل الملف notebad دون تغيير .....

والإجابة علي هذا السؤال .....

- فى حاله مافيش امتداد يبقى فى خاصية فى الويندوز معمولة اسمها "hide the extension" يعني هو مش بيكتب امتداد اي برنامج خالص بس هو عارفه في نفسه ... معني الكلام ده ان اي حاجة مكتوبة وظاهرة تعتبر من الاسم .. حتي لو خليتيها .htm هيعتبرها برده جزء من الاسم انما الامتداد هو مخبيه زي ماهو .txt ...

ازاي نلغي الخاصية دي؟؟؟؟

اعمل الخطوات دي ....

افتح my computer

واختار منها من فوق خالص علي الشمال view واختار منها اخر اختيار folder options

هيتفحلك نافذة تختار منها من فوق view

هيطلعلك اختيارات كتييييييييير ...

بص فيهم كويس هتلاقي عندك منهم الاختيار ده:

hide file extention for known file types

اتاكد انه مش متعلم جنبه .....

لو لقيته متعلم جنبه إلغي العلامة دي وإعمل ok واطلع هتلاقي المشكلة دي راحت خالص ان شاء الله ....

تقدر بقي دلوقتي تغير الإمتداد براحتك

ياريت كله يعمل الحكاية دي ولو مش واضحة قولولي أوضحهالكم بالصور عشان دي مهمة أوي ...

وانتظرونا فى الدرس القادم بإذن الله
Admin
Admin
مؤسس المنتدي


المساهمات : 40
تاريخ التسجيل : 19/02/2018
العمر : 27

https://arb-dev.rigala.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

تواصل معنا

المبيعات

mail@mail.com

الدعم الفني

mail@mail.com

التواصل المباشر

تواصل معنا الآن

صفحة الفيسبوك

AsHeK EgYpT

موبايل / واتساب

+20 114 847 1282