دورة تصميم المواقع....... سهلة ان شاء الله

**سـها** · 13-08-2006, 11:31 PM

ت / المقــــــــــــــــــــــــــــــــــــــــــــــ ـــــــدمـــــــــة

ت / المقدمة

الدرس الثاني

ما هي لغة ال Html ؟؟ولماذا نتعلمها؟؟
----------

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

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

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

نفس الحال بالنسبة لل BROWSER..
اللي هو صفحة الانترنت اكسبلورر اللي فاتحة قدامك....هي في البداية بتقتح بيضة"فاضية"...
الكلام والمعلومات اللي فيها بتظهر ازاي؟؟؟
ذكرنا قبل كده ان السيرفر بيقوم بارسال المعلومات إلي جهازك فيستقبلها البراوزر...
فبما ان ال BROWSER هو اللي بيستقبل المعلومات يبقي السيرفر لازم يبعتله المعلومات دي باللغة اللي هو بيفهما عشان يظهلرها قدامنا...لو بعتله نفس الكلام باي اسلوب تاني مش هيعبره
فالBrowser زيه زي اي انسان ليه لغات بيفهمها ولو قلتله اي حاجة باللغات دي بينفذها فورا....بس هو احسن من الانسان في ان هو بيفهم لغات كتير...وكمان لو قلتله اي حاجة وفهمها بينفذها علطول

اول وابسط لغة من اللغات اللي بيفهمها البراوزر هي لغة ال HTML ...
وهناك لغات اخري كثيرة اكثر تطور من ال HTML بس الاساس هو ال HTML زي الإنجليزي بالنسبة للشخص الأمريكي...
ولا يوجد اي موقع يخلو من لغة ال HTML ..بالرغم من انها اقل اللغات تطورا...
وفي برامج حاليا بتغني عن لغة ال HTML وبتقوم بكل وظائفها بصورة اسهل ومنها " FRONT PAGE ,DREAMWEAVER"....ولكن...
اللي ناوي ياخد HTML ويقف علي كده يبقي احسنله يدرس البرامج دي لانها اسهل منه...انما اللي عايز يحترف ويبقي فاهم هو بيعمل ايه اولا...وكمان عايز يتقدم ويدرس لغات تانية بعد كده ويكمل في الطريق يبقي لازم يعرف HTML الاول......

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

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

**The Matrix** · 13-08-2006, 11:54 PM

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

الأخت الفاضلة : سها

بداية موفقة و إلي الأمام

***الجوهرة المصونة*** · 14-08-2006, 04:11 PM

سهاا : أشكرك على الجهد الرائع
جزاك الله كل خير
أختك:
جوجو

**ملكة الأبتسامة** · 14-08-2006, 06:28 PM

الأخت الحبيبة / سـها
بدايه رائعه وجميله جدا ماشاء الله

جزاكي اله خير يارب

والله يوفقك

**المحبة للرسول** · 14-08-2006, 07:06 PM

جزاكى الله خيراً وفى انتظار باقى الشرح

**سـها** · 16-08-2006, 03:57 AM

الدرس الاول (1)

سلام عليكم

دا الدرس رقم واحد

خلاص هندخل فى الجد و هندخل فى لغة الهتمل

يلا شيدوا حيلكم

و و من المرةالجاية الدرس هتكون يوم السبت و الثلاثاء ان شاء الله

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

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

شاءالله

و دلوقتى ندخل فى اول درس .......

لازم تقروه اكتر من مرة حتى لو فهمتوه من اول مرة برده تقروه اكتر من مرة

يعنى مرتين او تلاتة كفاية

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

الدرس الاول (1)

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

الاول نعرف ايه معني الكلمة دي وليه سموها كده..
مش معقول اول ماخترعوا اللغة دي قالوا نسميها html؟؟؟ …….أكيد في سبب
html اختصار لهذه الجملة:
hyper text markup language
يعني لغة تقدر بيها تحط علي الانترنت texts بكميات كبيرة (hyper) بس الاسم ده كان لانها في بداية ماخترعوها كانت بس لوضع texts مش اكتر ..انما دلوقتي تطورت كتير وممكن نحط texts وصور وفيديو واوديو وفلاشات وكل حاجة…
بس لما تطورت اللغة الاسم متغيرش فضل زي ماهو……

نبدأ بقي نعرف ازاي نعرف البراوزر المعلومات باللغة دي …
إحنا قلنا ان دي لغة البراوزر وده يترتب عليه إن أنا لو جيت علي أي فايل عندي علي الجهاز وعملت له rename وغيرت امتداده خليته .html يتحول البرنامج اللبيشغله الي الانترنت اكسبلورر…بمعني:
انا عندي فايل اسمه مثلا : mostafa.txt وعليه كلام مكتوب"بأي محرر كتابة زي ال notepad"
لو انا قلتله rename وخليت اسمه mostafa.html هتلاقي شكله اتحول الي صفحة انترنت اكسبلورر واللي هيفتحه هو الانترنت اكسبلورر..
لان انا كده قلتله ان الكلام اللي عندك هنا مكتوب بلغة html فالجهاز هيحوله تلقائيا الي البرنامج اللي بيفهم اللغة دي وهو يتعامل معاه..اذا لقاه فعلا باللغة دي هيفهمه ..اذا لقاه مش بيها مش هيفهم فيه حاجة …

اقصد اقول من الكلام اللي فات ان اللي احنا بنعمله عشان نكتب صفحة بالاتش تي ام ال بنفتح صفحة أي محرر كتابي زي النوتباد مثلا ونكتب فيها الكلام اللي احنا عاوزينه باللغة اللي هنتعلمها وبعدين نحول امتداده الي .html هيروح البراوزر فاتحه وقاريه….
ان شاء الله الكلام ده هيوضح اكتر بعدين…

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

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

التعليق التاني انهم عملولنا حاجة بسيطة للتلخيص ..بدل متخلي الامتداد .html ممكن تخليه .htm بس من غير حرف ال" l " هتقول ايه بقي... عالم فاضية ..ال يعني الحرف ده هو اللي فارق معاهم اوي…
خلاصة كل اللي فات..
اقف في أي حتة فاضية في الشاشة واضغط كليك يمين..
واختار new واختارمنها text doccument …
هيفتحلك صفحة تكتب فيها الموضوع بتاع سيادتك..
ازاي بقي بتكبتب الموضوع بتاع سيادتك.؟؟؟؟
ناخد دلوقتي نبذة بسيطة عن الشكل لعام اللي بتكون عليه اللغة دي…
اللغة دي عبارة عن عدة اوامر كل امر بينفذ حاجة…اوعي تقلق وتقول هو انا هقعد احفظ اوامر بقي..انت مش هتحفظ حاجة خالص..انت بس هتكتب الاوامر دي عندك في ورقة وكل متحب تعمل حاجة تبص في الورقة دي تشوف ايه الامر اللي بيعملها وتكتبه…
يعني مثلا لو انا بعمل موقع بسيط اوي فيه شوية كلام وصورة جنبه بس كده…
هقولله الامر اللي بيفهمه اني هحط صورة…وبعدين احطها ..
وعشان احط الكلام مش محتاج أي امر… يعني هو بيفهم أي حاجة مكتوبة علي انها كلام مالم يذكر غير ذلك..
يعني هو بيمشي يترجم الكلام المكتوب وينقله في صفحة الموقع زي ماهو مكتوب بالظبط كلام عادي…
لو لقي في طريقه امر بيقولله اعمل حاجة معينة بيبطل ينقل الكلام المكتوب ويدا ينفذ اللي الأمر ده …

طيب دلوقتي احنا هنكتبله الكلام وهنكتبله الاوامر…ازاي هيعرف ان ده كلام عادي عايزه يظهر ون ده امر بحطه لتنفيذ شئ معين؟؟؟
للتفريق بين الكلام والاوامر بنحط الامر بين علامة اكبر من واصغر من <…….>
هو اول ميشوف العلامتين دول بيعرف ان المكتوب في وسطهم امر هينفذه ….
..في حاجة عايز اقولها ولو موضحتش اوي دلوقتي مش مشكلة…إن شاء الله لما نعرف أوامر هتوضح اكتر إن شاء الله…
انا لما اقولله امر واكتبه مبين < > مثلا بقولله يغير لون الكلام ..يبقي لازم اقولله فين اخره…منا لو سبتهاله كده هيغير لون الكلام ف الصفحة كله لان انا مقلتلوش وقف ...
بقولله كده ازاي؟؟؟
بكتب نفس الامر بس بالمنظر ده
كود HTML:
< />
يعني بزود العلامة دي / بيفهم هو ان الكلام المكتوب بين الامر وإغلاقه علي انه صورة…
بكتب علامة اكبر من وبعدين العلامة دي / وبعدين اسم الامر وبعدين علامة اصغر من....

طيب المنظر العام للصفحة؟؟؟
احنا عرفنا ان في لغات كتير بيفهمها البراوزر يبقي اول حاجة لازم اعرفهاله ان انا بكتب بلغة ال html ..يبقي في عندنا أمر بيتكتب في اول الصفحة بيعرفه ان انا بكتب html
الامر ده صيغته :
<html>
طيب مش احنا قلنا أي امر لازم يتقفل بعد منخلص كل اللي هنعمله بيه؟؟؟؟
يبقي الامر ده بيتقفل فين؟؟؟؟؟؟
بيتقفل اخر حاجة خالص في الصفحة بعد منكتب كل للي احنا عاوزينه في النص بالمنظر ده:
كود HTML:
<html>
…………….
…………….
<html/>
طيب بعد معرفته اني هكتب html نعرف بقي شكل صفحة ال html عموما دلوقتي….

بتتقسم صفحة ال html الي جزاين
head و body
ال head بكتب فيه شوية كلام مش هيظهر في الصفحة زي عنوان الصفحة مثلا وشوية حاجات تانية كده هنعرفها في وقتها ان شاء الله
ال body بكتب فيه الكلام اللي هيظهر في الصفحة …فلازم اعرفها انا بكتب head ولا body ازاي؟؟
برده في امر بيفهمه الكلام ده…وكل واحد منهم امره بنفس اسمه….
يعني لما احب اعرفه اني هكتب head الامر شكله كده:
كود HTML:
<head>…………………</head>

لما احب اعرفه اني هكتب body الامر شكله كده
كود HTML:
<body>…………….</body>

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

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

هتفتح صفحة notepad
وتكتب فيها
كود HTML:

<html>
<head>……………………
.........
<head/>
<body>………………
…………
<body/>
<html/>

ان شاء الله المرة الجاية هناخد الاوامر اللي موجودة بين الكلام ده….
عشان تجربوا الكلام ده اكتبوا نفس المنظر العام الللي انا كاتبه واكتبوا مبين ال body وإغلاقها أي كلام يعجبكم "بياناتك مثلا"
وبعدين اقفل الصفحة وقولله save واطلع قولله rename وغير امتدادها خليها .html وبعدين افتحها…
هتلاقي الكلام اللي أنت كتبته ظهر والأوامر طبعا مش ظاهرة..هو بس فهم منها هو هيعمل ايه…
وعلي فكرة هتقابلكم مشكلة هتجننكوا في الكلام اللي هيظهر مش هقوللكوا دلوقتي هيه ايه..هبقي اقوللكوا في وقتها…خليها تجننكوا شوية..

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

**سـها** · 16-08-2006, 04:04 AM

ملــحـــــــــــــــــــــــــــــــــــــــــــــ ـــــوظة

خلوا بالكم ......هتلاقوا كلام كدا فى الشرح

كود HTML:
<html>
<head>……………………
.........
<head/>
<body>………………
…………
<body/>
<html/>

الكلمة اللى انا لونتها بلون ازرق و تحتها خط اللى هى (كود HTML)

احنا مش بنكتبها فى النوت باد

لأ

احنا بنكتب اللى بعدها بس

<html>
<head>……………………
.........
</head>
<body>………………
…………
</body>
</html>

انما هى مش بتتكتب ..............الكلمة دى بتتكتب اتوماتيك فى صفحة المنتدى ... .المنتدى هو اللى بيكتبها لوحده لما حد بيكتب كود هتمل html بيكون فى حاجة منخصصة لكتابة الاكواد علشان تطلع مظبوطة

لأنها لو اتكتب كدا على صفحة المنتدى علطول هتطلع مش مظبوطة و الاكواد بتتقلب و بتبوز .........الكود دا بقى بيظبطها

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

ملحوظة تانية مهمة جدااااااااااااااااااااااااااااااااااااااااااا اا

الامر بيتقفل كدا

نكتب علامة اكبر من و بعدين الشرطة المايلة / و بعدين اسم الكود اللى هقفله و بعدين علامة اصغر من

يعنى كدا

<html/>

الشرطة الميلة فى الاول /

مش كدا
</html> ............كدا غلط

انا بقول الملحوظةدى لأن المنتدى هنا بيقلب الاوامر و يبوزها

فأنا عرفتكم الاساس علشان لما المنتدى هنا يقلب الاوامر او يعكسها تبقوا انتوا عارفين الصح و متغلطوش

**هنـــد** · 16-08-2006, 11:36 AM

بوركتِ على هذا الجهد الطيب

**itreza** · 16-08-2006, 06:46 PM

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

**قلبي الحنون** · 17-08-2006, 07:51 AM

تشكرين أختي الكريمه عالمجهود الطيب...

**سـها** · 17-08-2006, 12:13 PM

المشاركة الأصلية بواسطة itreza

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

الاخ الفاضل ما فيش ازعاج و لا حاجة ......... و انا تحت امركم

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

عموما حضرتك تؤمرنى يا فندم .........و ان شاء الله هحاول بكل اللى اقدر عليه انفذ طلب حضرتك

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

**غريب الهمس** · 17-08-2006, 08:31 PM

جزاكي الله خير أختي سـها . .
بداية رائعة ومبسطة ..
مشكوورة

**سـها** · 17-08-2006, 11:04 PM

يا جماعة لو فى حاجة صعبة او مش واضحة قولوا و لا يهمكم

عايزين قبل ما ندخل فى اى درس جديد نكون فهمنا القديم كويس اوى

يا ريت لو فى حاجة مش واضحة او صعبة تقولوا علطول

يلا سلام عليكم

**سـها** · 19-08-2006, 12:22 PM

الاخ الفاضل itreza

دا تطبيق الدرس السابق

احنا قولنا ان الكلام اللى عايزين نكتبه

بنكتبه ما بين الامر <......>

و اغلاقه <......../>

يعنى مثلا هنكتب حاجة فىالامر <body>

هنكتبها ما بين الامر<body> و بين اغلاقه <body/>

كدا

<body>
بسم الله الرحمن الرحيم
<body/>

و طبعا فى اكتر من طريقة لشكل صفحة النوتباد

يعنى مثلا الطريقة السابقة دى

و ممكن كدا
بسم الله الرحمن الرحيم<body>
<body/>

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

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

و انا موضحة دا فى ملف النوتباد اللى هتحمله و تفتحه ان شاء الله

المهم ان الفكرة الاساسية ان الكلام يكون بين الامر و اغلاقه

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

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

و دا رابط انا حطيت فيه صفحة الاوامر الاصلية ( النوتباد)
و حطيت صورة للنتيجة اللى هتظهر بعد ما نحول امتداد صفحة النوتباد من txt الى html علشان تصبح صفحة نت
بعد ما تحمله.....فك الضغط و افتح اللى جواه هتلاقى تطبيق كل حاجة

http://uae-master.com/up/v/4292067/New_Folder.rar.html

و لو فى مشكلة تانى عند حضرتك قول عليها و لا يهمك .....انا تحت امركم
و لو حد عنده مشكلة فى الامتدادات يقولى

و عموما انا كدا كدا هقول المشكلة اللى ممكن تقابلكم فىالامتدادات و هقول حلها ان شاء الله