تعلم شلون تسوي صفحات HTML من الصفر وحتى الاحتراف

اول شي نسوي رايت كلك عالماوس ونختار NotePad او TextPad او Text Document

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ونجي نكتب هذا الكود والي يمثل اجزاء الصفحة والي مكونه بالعادة من جزأين:
الاول:الي Head والي يتخزن بيه ال Title والي يمثل العنوان الي لمن تفتح الصفحة يطلعلكم وممكن يطلعلكم الtab مال تنصيب البرامج
الي موجودة بالنسخ الجديدة للInternet Explorer او الFirefox

الثاني:الBody والي يمثل اي شي اخر ينطبع للمستخدم ولكل واحد منهم بدايه والي تمثل الجزء من الكود مسبقوق ب"<الجزء>"
ومنتهي ب "<الجزء/>"

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هسة سويتلكم كود الHead والي دخلنا بيه من وين يبلش الTitle و وين ينتهي او بصيغة اخرى :الي بين حدود الTitle

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ونجي نخزن بصيغة ال "HTML." حتى نكدر نفتحها بأي متصفح انترنت
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هسة نجي نفتح الصفحة بأستخدام اي متصفح

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ومثل مدا تشوفون العنوان طلعلنا ولاحظوا انه العنون بالجهاز يعني السيرفر داخلي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

زين هسة نجي نبلش الكود مال Body ونكتبلكم جملة من عدنا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

والتنفيذ هيجي يكون وهيجي طلعتلنا الجمله

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ومثل مدا تشوفون:
الكتابة صارت ملزوكة وحدة بالثانيه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

Pargraph وعدنا همات ال br والي معناها ينزل سطر وهي نسبة الى Break Point وطبعا كتبتلكم جملة لخ حتى تلاحظون الفرق

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

زين هسة هيجي يصير التنفيذ

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بس تر ممعقولة انتوا متريدون تكبرون الخط
عالعموم احجام الخط تبلش من H1 وهو الاكبر لحد ال H5 وهو الاصغر

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وكالعادة التنفيذ هياته وشوفوا شكد منتدانا طاكــ

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نجي على انواع الخطوط والي هي:
u -------->underline
B-------->Bold
I-------->Italic

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

زين هسة نجي على موقع الكتابة من الصفحة وندخل الكود P Align
والي هي لو Right يمين لو Left يسار لو Center بالوسط

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

والتنفيذ هيجي يصير

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نجي لسالفة الالوان
الالوان تتمثل بنوعين:
النوع الاول:بأستخدام الاسماء الي تدل على اللون مثل :Blue,White,Green,Black والخ
النوع الثاني:بصيغة الهكسا والي مكونه من 4 خانات حيث اولها 0 لل9 وبعدين تبلش من A لحد الF ف مثلا
اول رقم يبلش من اللون الابيض 0000 لحد الاسود والي هو FFFF

ومثل مدا تشوفون انه احنا استخدمنا هذي الداله والي هي "اللون"=color
وبالطريقتين كتبنا الكود هيجي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ف الناتج هيجي راح يطلع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

زين هسة احنا اذا ردنا نسوي صفحة لخ ف من الارتب ان نسوي فايل نحط بيه الصفحات حتى نكدر نضيف صور وملاعيب داخل الصفحة من خلال تشغيل فدشي يفتح هالفايلات ويطلعلنياها بالصفحة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ف نجي نشيل الصفحة ونحطها بالفولدر الجديد الي سويناه

ونجي نسوي صفحة لخ ونسميها SecondPage من نوع HTML

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هسة نجي نسوي الكود مال العنوان مال الصفحة الي سويناها "SecondPAge.html"
ودخلنا بالbody كود مال لون الخلفيه وومكن تدخلون كود مال الخلفيه بصورة بس مو هسة
احنا وماشين راح تتعلمون شلون تضيفون صورة بس هيدي هيدي
وحطينا جملة ترحيب بالصفحة الثانيه حتى ندخللها من الصفحة الاولى والي هي bgcolor

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهيجي يطلع تنفيذ الكود

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وضفنالكم كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
حيث انه الa href تعريف بوجود صفحة ثانيه من خلال جملة الي هيMy Fav Web$!te والي حتطلعلنا بالازرك
والي لمن ندوس عليها ----------> راح تحولنا عالSecondPage وتكدرون تضيفون كوكل وياهو بحسب معرفتكم والي يعجبكم
وهنا احنا ممضطرين نسد الكود بالبدايه ونرجع نسوي الجملة مرة لخ ويا السلاش حتى نسد حدود الكود
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هسة احنا لمن ندوس عليها

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طربـ ودخلنا عالصفحة الثانيه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وبعد ما ضفنا الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نجي ندخل كود الي هو
كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
ومثل مدا تشوفون الكود هو مثل مال تحويلة الصفحة وهم تكدرون متسدوه ب لانه راح ينطبق على صورة وحدة بســـ والsrc تمثل موقع الصورة والي ترمز الى كلمة source وبما انه داخل الفولدر ف بس ندخل اسمها.
وفي حال ردتوا تركبون الصورة من غير مكان ف راح تضطرون تجطون السورس يساوي "C:\Documents and Settings\Desktop\My Web$!te\Toco toucan.jpg"

وعدكم ال Alt والي تمثل البديل في حال ما طلعت الصورة ف تكون بمكانها مكتوبة الجملة الي هيNice Picture
وطبعا عدكم الارتفاع والعرض

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وبالتنفيذ هيجي تطلعلنا الصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نجي نشوفكم التعداد والي ممكن يكون عادي مثل ما تشوفون او مدرج ضمن نوع
يعني مثل ابجدي او بالارقام او لاتيني
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
وهيجي يكون تنفيذ الكود

وللعلم اكو طرق ثانيه مثل الابجدي بحروف سمول كود:

Apples

Bananas

Lemons

Oranges

Letters list:

Apples

Bananas

Lemons

Oranges

Lowercase letters list:

Apples

Bananas

Lemons

Oranges

Roman numbers list:

Apples

Bananas

Lemons

Oranges

Lowercase Roman numbers list:

Apples

Bananas

Lemons

Oranges

Apples

Bananas

Lemons

Oranges

Circle bullets list:

Apples

Bananas

Lemons

Oranges

Square bullets list:

Apples

Bananas

Lemons

Oranges

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

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

» تعال تعلم شلون تسوي هاي الفيكه الحلوه بحاسبتك
» أهديلكم صفحات من كتابي المقدس(الكنزا ربا)
» شوف شكلك وره 30 سنه شلون يصير