درس 3 تعلم html من 0

محمد84

:: عضو مميز ::
20 فبراير 2009
2,925
8
0
www.facebook.com
g4z4com12457479241.gif




user.aspx
الحمد الله وحد نحمده ونشكره ونستعين به ونستغفره ونعود بالله من شرور أنفسنا
user.aspx

user.aspx
ومن سيئات أعمالنا
user.aspx



user.aspx
من يهدي الله فلا مضل له ومن يضلل فلا هادية له
user.aspx





user.aspx
أشهد ان لا إلاه الى الله وحده لا شريك له
user.aspx




user.aspx
وأشهد أن محمدا عبده ورسوله
user.aspx


user.aspx
صلى الله عليه وسلم وعلى آله وصحبه أجمعين
user.aspx


user.aspx
ومن تبعهم بالإحسان الى يوم الدين
user.aspx


user.aspx
ربنا لا علم لنا إلا ما عمتنا إنك أنت العليم الخبير
user.aspx


user.aspx
ربنا لا فهم لنا إلى ما أفهمتنا إنك أنت الجواد الكريــم
user.aspx


user.aspx
ربي اشرح لي صدري ويسر لي أمري واحلل لي
user.aspx


user.aspx
عقدة لساني يفقهوا قولي...
user.aspx


12221803.gif



HTML

إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. (والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C . فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) :-

tags.gif


فعلى سبيل المثال الوسم <B> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:
<B> Text <‎/B>
وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر <BR> أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة <P>.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله


كيف نبدأ...

لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد ‎.html أو ‎.htm
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.


قبل أن نبدأ

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


12221803.gif

logoab.gif


12221803.gif

اما بعد .




درس 2 تعلم html من 0



13494022.gif




الدرس الثالث : تصميم اعلانات




اهلا بكم اخواني رواد هدا المنتدى العزيز


تطوير المواقع


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



وسنبدأ انشاء الله من المستوى الصفر ...



12221803.gif



13494022.gif



12221803.gif



نبدأ الدرس على بركة الله ....





html




بدايتها ونهايتها ....







2- نتوجه الى البرنامج





Microsoft Office FrontPage 2003






30122009172235.jpg


12221803.gif


نفتح صفحة جديدة

وندرج جدول

06012010120728.jpg


ندرج 4 جداول

2افقي و 2 عمودي مثلا

06012010121125.jpg



النتيجة

06012010121305.jpg



12221803.gif



الان ندرج صورة داخل المربع الاول

06012010121455.jpg



06012010121829.jpg


والنتيجة

06012010122123.jpg


12221803.gif




ونكرر العملية في ادراج الصور للمربع الثاني

06012010121455.jpg


06012010122357.jpg



والنتيجة

06012010122556.jpg



12221803.gif



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


لنتحصل على هذا الشكل

06012010122905.jpg


12221803.gif



ونروح نشوف المعاينة ما قمنا به


13877858.jpg



والنتيجة

06012010122905.jpg


12221803.gif



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

لكن الجدول كبير على الصور

الان نعدل حدود الجدول بوضع الفارة على سطر الجدول

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

06012010123331.jpg


والنتيجة

06012010123717.jpg



12221803.gif


هههههههههههههههه

بسيطة صح


اوكي فيهذا القدر كفاية

الدرس المقبل انشاء الله

نكمل العمل....الاعلانات
 

اسامة العزاوي

عضو جديد
3 مارس 2009
305
0
0
بسم الله الرحمن الرحيم

بارك الله اخي الكريم محمد

عن جد واله قد استفد جدا ..

وانا الحمد الله عندي بدايات عن الفرونت بيج ..

والان اتت لي معلومات اكثر واهم وجيدة

كما وضحتها الينا


وفيت وكفيت يا اخي الكريم

يبارك لك الرب

اخوك اسامة العزاوي