المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة متقدمة في Html من الصفر للمية % إنشاء الله ::: الدرس الأول :::


جوزيف الصربي
28-03-2007, 04:04 AM
:4 (10): أولا مشان عدم الاحراج إزا حدا سأل شو معناها ::: بنحكي معناها
يشير الإختصار HTML إلى عبارة HyperText Markup *_**_**_**_**_**_**_**_* أو لغة الترميز المتشعبة، وهذه اللغة هي اللغة المستخدمة في تصميم جميع صفحات الويب الإحترافية، فهل تريد أن تصمم صفحات ويب احترافية
______________________
وهلأ نبدأ نحكي من المقدمة .:.:.:.:..:-
أكثر ما يميّز هذه اللغة على الاقل بالنسبة إلي ما يميزها عن غيرها :
إنها لغة بسيطة تعتمد على حفظ الكود أو ما يسمى بالامر
وإنها لغة بتمكنك تشوف نتائج عملك أول بأول يعني بتختلف عن باقي لغات البرمجة بإنه ما بتحتاج لتعمل RUN من برنامج وبياخد وقت
بس كل ما بيطلبه منك إنك يكون عندك نصوص بسيطة يعني word pad أو note pad
يعني اشياء موجوده عند الكل
وهل نبدأ ::::
تكتب ملفات HTML في صورة ملفات نصوص بسيطة (Plain Text)، تأخذ الإمتداد .html عادة، وتكتب في أي برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم SimpleText، جميع هذه البرامج مناسبة جدا لعمل صفحات HTML. (( منقول ))

الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت، ولن يكون أكثر من Internet Explorer أو Netscape Navigator أو الأثنين معا، وبما أنك الآن تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا، ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابها، ولأن المتصفحات تختلف من نوع إلى آخر لذا يفضل أن تقوم بمعاينة صفحتك بجميع المتصفحات الموجودة وتتأكد من أنها تظهر بشكل سليم في جميع المتصفحات، لأن الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أن الجمهور يستطيع رؤية الصفحة بمتصفحه أيا كان.

المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولا، ودعمها لآخر التقنيات ثانيا، يقدم متصفح Internet Explorer من Microsoft دعما رائعا للغة العربية، ولآخر تقنيات الويب مثل HTML 4.0 و CSS و XML وغيرها، وأما متصفح Netscape Navigator فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج Sindbad من شركة صخر، وفي كل الأحوال يظل متصفح Netscape Navigator متصفحا متعبا في التصميم، لهذه الأسباب جميعا اعتمدنا متصفح Internet Explorer 5.0 كمتصفح قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.

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

تتكون ملفات HTML من قسمين :

المحتوى : وهو ما يشاهده الجمهور في صفحتك.
الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق

مثال على ذلك هذا السطر من لغة HTML ..
خلونا نجرب سوى .... هلأ أفتح note pad
واكتب فيه ما يلي
HTML is a Great *_**_**_**_**_**_**_**_*
واحفظ الملف بأي اسم بس بشرط يكون الامتداد .html
على الدسكتوب مشان نشوف شو رح يطلع معنا وبعد هيك رح نلاقي في صفحة إنترنت محفوظة على المكان اللي حددنا فيه الحفظ
هلأ بتروح بتفتحه وبتلاقي نفس الكلمة مكتوبة بالصفحة
وهل مبروك إنت مشيت أول خطوة في إحتراف ال HTML
وبجد مو مزح هي خطوة تخيل قديش سهلة هاللغة :::::
حلو مو هيك
وطبعا فيك تخلي الكتابة عريضة أو ما ئلة أو بخط تحتي وملونه وكل شي بس خطوة خطوة
وهلأ لازم نبه على إنه هي اللغة بيلزمها شي اسمه وسم
وهلأ ما رح أحكي عن الوسم إلا إنه كل وسم بداية إله وسم نهاية
ورح عطيكوا الاوسام
<HTML> هادا وسم بداية ووسم النهاية اله ..... <‎/HTML>
<HEAD> وهادا وسم النهاية تبعه .... <‎/HEAD>
أكيد عرفتوا شو الفرق بين النهاية والبداية
صح الفرق بيكون في ال (( / ))
وهي صورة توضيحية
http://www.khayma.com/hpinarabic/images/htsketsh.gif
(( صورة منقولة ))
ومن هالشي رح نكتشف إنه
ملف Html يبدأ دائماً بالوسم <HTML> وينتهي بالوسم <‎/HTML>. لا تنسى ضروري ..
أما الوسم <HEAD> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين: <TITLE> … <‎/TITLE> وبالطبع يجب كتابة الوسم <‎/HEAD> لكي ننهي هذا المقطع.

نأتي إلى الوسم <BODY> والذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة. وهو أيضاً يحتاج إلى وسم الإنهاء <‎/BODY>

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

<HTML>
<HEAD>
<TITLE>
this is my first page in mrasmh learning
<‎/TITLE>
<‎/HEAD>

<BODY>
Wow, I'm writing my first webpage
ya i hope to be programmer soon
<‎/BODY>
<‎/HTML>

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


وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب:


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

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

<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Wow, I'm writing my first webpage </BODY></HTML>‎

أو بالشكل التالي:

<HTML>
<HEAD>
<TITLE>
This
is a
test
Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow,
I'm
writing
my
first
webpage
<‎/BODY>
<‎/HTML>

أو حتى بهذا الشكل:

<HTML> <HEAD> <TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>

وفي كل الحالات ستحصل على نفس النتيجة. وإذا كنت من تلك النوعية من الناس التي لا تصدق كل ما يقال… تستطيع أن تجرب ذلك بنفسك!!! هيا جرب
سوف نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).

ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي

<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>


Wow, <BR> I'm writing my <BR>‎
first webpage
<‎/BODY>
<‎/HTML>

وهلأ لازم تجربوا كل شي ..::..::..::
وهلأ بالدرس هادا بنكتفي إلى لقاء في الدرس التاني اي
:4 (10): ردولي

HellScream
29-03-2007, 05:50 PM
مشكوور على مجهودك اخي

جوزيف الصربي
29-03-2007, 10:05 PM
شكراً لك اخي الكريم على مروووووووووووورك وتقبّل تحياتي
عن قريب الجزء الثاني وأرجو الفائدة للجميع

buffy
14-04-2007, 08:50 AM
مشكور يا ((جوجو)) شي حلووووووووووووو

جوزيف الصربي
14-04-2007, 08:52 AM
شكراً لك اخي الكريم على مرورك العطر أخي Buffy ويارب تستفيد ويستفيدوا إخواننا من الموضوع
ودمت في ود

SnIpEr_SyRiA
15-04-2007, 07:24 AM
مرحبا
مشكور يا غالي على الدورة
وانا محترف بلغة الـhtml
يعني مو محترف لكن مليح
وعم ادرس لغة php
تحياتي
القناص سوري
sniper_syria

SnIpEr_SyRiA
15-04-2007, 07:31 AM
اخي تدقيق صغير
عند كتابت العنون يكتب بهل شكل
<TITLE>SnIpEr_Sy</TITLE>
لا تستطيع دمج كلمة
<BODY>
مع كلمة
<TITEL>
وصلت الفكرة؟
ومشكور مرة تانية

جوزيف الصربي
16-04-2007, 06:49 AM
شكراً لك اخي الكريم أخي القنّاص ... على مرورك العطر ومنكم نستفيد أخوي الغالي ..

jree7
30-04-2007, 09:05 PM
تسلم اخوي الكريم الله لا يرحمنا من جديدك
شرح واافي تسلم

جوزيف الصربي
03-05-2007, 02:43 AM
بارك الله فيك يا غالي ...وإن شاء الله بس حدا يطلب الجزء التاني رح كون حاضر على طول ...

GOLDEN MAN
22-06-2007, 05:56 PM
اشكرك جدا اخوي جوزيف علي الدرس القيم ومتظرين الثاني

لكن عندي سؤال انا غبي في لغة الhtml وتعبت كثير وانا

احاول اتعلمها .. ياليت احصل التعاون منكم ..

سؤالي .. انا عملت كذا ... نسخت هذا

HTML> <HEAD> <TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>

وطبقت حرفيا بس لما افتحه يطلع لي حرف ال ي عربي معهم

هل الطريقه صحيحه ..؟

وثاني شي انت قلت اروح اضيف هذا <BR> لتحديد النهاية للسطر

وين احطه وهل احذف شي قبل ماحطه ..؟؟

وثالث شي واعذرني اخوي ..انت قلت !!

قم بتعديل الملف لكي يصبح بالشكل التالي
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>


Wow, <BR> I'm writing my <BR>‎
first webpage
<‎/BODY>
<‎/HTML>

كيف اعدله وكيف اخليه يصبح كما في الشكل اعلاه ..؟

ياليت مساعده من اهل الخبره لني جديد علي الهاك

وتعرفون لازم اتعلم هاللغه ومحتاجها ...

وشكرا تحياتي

GeRNaS
27-06-2007, 09:14 AM
يعطيك العافية على هالدرس وننتظر الجديد

جوزيف الصربي
27-06-2007, 09:01 PM
ولا يهمّك يا غالي ونحنا كلنا بالخدمة وحيّاك الله

hackerz89
04-07-2007, 01:58 AM
مشكووووووور على المجهود الرائع اخوي
وبارك الله فيك
وارجو تقبل مروري
وتحياتي لك

جوزيف الصربي
07-07-2007, 02:27 PM
الله من وراء القصد
أشكرك على مرورك الرائع

3n!Gma
23-09-2007, 12:43 AM
مشكووور كتير أخي

في انتظار الدروس القادمة

بس بدي أوضح للأخوة

<br> لكي تتخطى السطر
وهناك <p> لبداية فقرة جديدة

و بعد إذنك أخي أريد اظافة البعض

for police

<b></b> bold
<i></i> italic
<u<</u>underlined

to write on the center

<center>


<p align="center"> it's the same to put it on the center

ولا اذا كان بدك تكتبها عاليسار اكتب في مكان center>>> left


to put a picture on the link


<img src="link"> like that ...

لكي تحط صورة كخلفية

<"body background="file">

و هنا لتحط لينك عالبيج بتاعك

a href="link">Soumia</a>>


soumia
"
لما بننقر على هالاسم بيتوجه مباشرة الى اللينك اللي حطيتو

و شكرا ,,,,

جوزيف الصربي
05-10-2007, 04:38 AM
مشكورين على المرور العطر ...


ومشكووووورة Yume على الاضافة ...

evil_hacker
08-10-2007, 06:33 AM
مشكووور أخي على طرح هالموضوع ... حلو التقديم

اه يا يومي سبقتيني شطورة بالايتش تي ام ال
اوك انا اوضح للأخ GOLDEN MAN

اشكرك جدا اخوي جوزيف علي الدرس القيم ومتظرين الثاني

لكن عندي سؤال انا غبي في لغة الhtml وتعبت كثير وانا

احاول اتعلمها .. ياليت احصل التعاون منكم ..

سؤالي .. انا عملت كذا ... نسخت هذا

HTML> <HEAD> <TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>

وطبقت حرفيا بس لما افتحه يطلع لي حرف ال ي عربي معهم

هل الطريقه صحيحه ..؟

وثاني شي انت قلت اروح اضيف هذا <BR> لتحديد النهاية للسطر

وين احطه وهل احذف شي قبل ماحطه ..؟؟

وثالث شي واعذرني اخوي ..انت قلت !!

قم بتعديل الملف لكي يصبح بالشكل التالي
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>


Wow, <BR> I'm writing my <BR>‎
first webpage
<‎/BODY>
<‎/HTML>

كيف اعدله وكيف اخليه يصبح كما في الشكل اعلاه ..؟

ياليت مساعده من اهل الخبره لني جديد علي الهاك

وتعرفون لازم اتعلم هاللغه ومحتاجها ...

وشكرا تحياتي

أوك هلا أخي كيف الحال ... انا منيح هع

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

و اما بالنسبة

" اضيف هذا <BR> لتحديد النهاية للسطر

وين احطه وهل احذف شي قبل ماحطه ..؟؟
"
لا تحذف ولا شيئ اعمل كده
......
<body>
am a gentel man
<br>
<p>
can't be right cuz am devil
<br>
<body/>
و تجي هي وحدها ، لاحظت انها دون سلاش

اووك أظن الفكره وصلت ما هيك؟

و بالنسبة لسؤالك
"كيف اعدله وكيف اخليه يصبح كما في الشكل اعلاه ..؟"
مينو الشكل اللي تقصده ؟ :1 (78):

ما فهمت لكلامك
ارجو انك ترد و تفهمني لكي استطيع المساعده

و أخي جوزيف بعد إذنك ... ما وجدت رد للأخ فرديت .. لا تزعل فتعتبرها دخل

تحيااااتيييي