منتديات فرح


انضم إلى المنتدى ، فالأمر سريع وسهل

منتديات فرح
منتديات فرح
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.
بحـث
 
 

نتائج البحث
 


Rechercher بحث متقدم

المواضيع الأخيرة
» أفضل و أجمل طرق الجماع بالصور و شرح طرق الجماع بالصور
شرح لاكواد الhtml Emptyالثلاثاء ديسمبر 03, 2013 9:57 pm من طرف seif

» البيجامات الشتويه
شرح لاكواد الhtml Emptyالخميس نوفمبر 14, 2013 1:44 pm من طرف نفيسة النكادي

» تعالوا نتعلم التطريز خطوة بخطوة../ غرزة الظل
شرح لاكواد الhtml Emptyالثلاثاء أكتوبر 01, 2013 12:24 pm من طرف الوفاء اخلاص

» فيديو.. لحظة إطلاق الإخوان الخرطوش علي متظاهري الإسكندرية - See more at: http://almogaz.com/news/politics/2013/06/29/981646#sthash.LM2ITjLz.dpuf
شرح لاكواد الhtml Emptyالسبت يونيو 29, 2013 11:41 am من طرف ashraf

» عاجل| أجهزة الأمن تلقي القبض على 6 مسلحين من التيار الإسلامي بالإسكندرية والقاهرة والدقهلية - See more at: http://almogaz.com/news/politics/2013/06/28/980720#sthash.7YiLhZQE.dpuf
شرح لاكواد الhtml Emptyالجمعة يونيو 28, 2013 6:57 pm من طرف ashraf

» عودة القناصة بالآلي حول مقر الإخوان بالإسكندرية
شرح لاكواد الhtml Emptyالجمعة يونيو 28, 2013 6:55 pm من طرف ashraf

» عودة القناصة بالآلي حول مقر الإخوان بالإسكندرية
شرح لاكواد الhtml Emptyالجمعة يونيو 28, 2013 6:43 pm من طرف ashraf

» تحميل برنامج خاشع المؤذن للجوال نوكيا n73 - n95 - n70
شرح لاكواد الhtml Emptyالإثنين ديسمبر 10, 2012 9:55 am من طرف waleedclim

» الديكور الخارجي والحدائق ...
شرح لاكواد الhtml Emptyالخميس نوفمبر 15, 2012 1:17 pm من طرف steam84

التبادل الاعلاني
أفضل 10 أعضاء في هذا المنتدى
Admin
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
ايمان
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
محمد
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
ashraf
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
سهر الليالى
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
احمد
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
ابراهيم
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
nona
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
بهاء
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 
tete
شرح لاكواد الhtml Vote_rcapشرح لاكواد الhtml Voting_barشرح لاكواد الhtml Vote_lcap 

الجزء الثالث المنتظر من فيلم الكوميديا والرومانسية "عمر وسلمى 3 " للنجم تامر حسني ومي عزالدين بحجم 466 ميجا

الإثنين فبراير 13, 2012 8:50 pm من طرف smsm

[size=21]فيلم[/size]

عمر و سلمى 3
SCR

شرح لاكواد الhtml 330391374
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
شرح لاكواد الhtml 756048764

كالعادة وزي ما عودناكم وبعد عرضه مباشرة
باعلى صوت وصورة


[size=12]الجزء ده كوميدي جدا وحلو اوووي
انصح الجميع بمشاهدته


[/size]





ملحوظة : الفيلم كامل من اول دقيقة لحد اخر دقيقة ومدته
1 ساعة و 36 دقيقة


قصة …


[ قراءة كاملة ]

تعاليق: 0

فيلم الكوميديا " بنات العم " بطولة ثلاثي الضحك ابطال فيلم "سمير وشهير وبهير" بحجم 437 ميجا على اكثر من سيرفر

الإثنين فبراير 13, 2012 8:26 pm من طرف كامل

[size=21]فيلم[/size]

بنات العم

DVDSCR

شرح لاكواد الhtml 242109889

في الوقت الي كل الناس لسة بترفع فيه اعلان الفيلم
جبنالكم الفيلم كامل من اول ثانية لاخر تتر


( الفيلم ده بجد ضحك للركب )

EnJoy

قصة الفيلم

الحديث عن اللعنات
التي تصيب الإنسان كثيرة وغريبة واغربها ما حدث بفيلم (بنات العم) حيث
ثلاث صديقات تصبهن لعنة غريبة فيتحولن إلى رجال....وبين الصدمة والوعي
يحاولن طوال احداث الفيلم فك …


[ قراءة كاملة ]

تعاليق: 0

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

الثلاثاء نوفمبر 23, 2010 11:40 am من طرف ashraf

فيلم العيد
بجودة روووعـــة
ولن تجدها الا هنا وفقطـــ


عادل امام
فى

زهايمــــــــــر
NEAR DVD


الفيلم كامل من البداية للنهايــة ...
والصورة ثابتة وكاملة طوال الفيلم ,,,
والصوت واضح وكويس ..

فيما عدا اول دقيقة فقط لخلل الصوت داخل السينما نفسها شرح لاكواد الhtml 001_tongue




PosTer


شرح لاكواد الhtml 459387901

شرح لاكواد الhtml …


[ قراءة كاملة ]

تعاليق: 1

الفيلم الكوميدى الديكتاتور - نسخة فيديو سي دي فقط 236ميجا - على عدة سيرفرات

الجمعة أكتوبر 22, 2010 5:16 pm من طرف العنتيل

شرح لاكواد الhtml 632336633






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

بطوله
خالد سرحان - حسن حسنى
مايا نصرى - عزت ابو عوف
ادوارد - …


[ قراءة كاملة ]

تعاليق: 1

مجموعة من اقوي افلام نجم الكوميديا الرائع محمد هنيدي ( 12 فيلم ) نسخ DvDRip على اكثر من سيرفر ..

الأربعاء أكتوبر 20, 2010 11:06 am من طرف tete

مجموعة من اقوي افلام نجم الكوميديا الرائع محمد هنيدي 12 فيلم
شرح لاكواد الhtml 2291.imgcache
- - - - - - - -
اسماعيلية رايح جاي
شرح لاكواد الhtml 1

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

________________________

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


[ قراءة كاملة ]

تعاليق: 1

فيلم العيد :: الرجل الغامض بسلامته :: CaM H.Q :: جودة عالية Rmvb :: نسختين 300 ميجا + 700 ميجا :: تحميل مباشر وعلى أكثر من سيرفر

الأربعاء سبتمبر 29, 2010 3:42 pm من طرف tete

فيلم العيد
# الرجل الغامض بسلامته #

شرح لاكواد الhtml 18421327





القصة
شاب ( هاني رمزي) لا يجد مجال للوصول إلى النجاح إلا عن طريق ممارسة الكذب ، حيث يعتبر أن الكذب هو خير وسيلة للنجاح.
ورغم عمله كموظف في القطاع الخاص إلا أنه يراسل عدداً من الجهات الحكومية يطالبها بحل عدد من الأزمات العامة - مثل الرغيف والبطالة وأزمة الإسكان - وعندما تحدث المفاجأة و يصبح مشهوراً …


[ قراءة كاملة ]

تعاليق: 1

فيلم الرعب المصرى ايناب بجوده dvdrip 200 ميجا برابط واحد على اكثر من سيرفر

الخميس مايو 13, 2010 7:47 pm من طرف احساس غريب

انياب

شرح لاكواد الhtml A11vs6








تتعطل سيارة بشاب وشابة فى ليلة ممطرة عند أحد البيوت فيدخلانه طلباً
للنجدة

ويكتشفان أنه منزل دراكولا ويعرض الفيلم أساساً الشخصيات المستغلة

مثل السباك والجزار أما شخصية دراكولا ليست إلا رمز لهذه الشخصيات المستغلة

على الحجار

منى جبر

احمد عدوية ـ دراكولا

طلعت زين

عهدى صادق ـ شلف

حسن الإمام



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





[ قراءة كاملة ]

تعاليق: 2

اقوى مسلسلات رمضان - الكبير - احمد مكى - الحلقة 15 الاخيرة - على اكثر من سيرفر

الخميس سبتمبر 02, 2010 9:38 pm من طرف tete

تدور الاحداث فى احدى
قرى الصعيد ،عمدة القرية والملقب بالكبير قوى فى واخر ايامه يصارع الموت
ويحكى لابنه (الكبير) وهو وريثه الشرعى وشخص مفترى يستغل مكانة والده وهو
ينتظر اليوم الذى يحكم فيه البلد كعمدة بعدموت والده
يفاجئه الاب قبل موته بان له أخ توأم يعيش فى USA وان له 50% من الورث
الذى سوف يتركه له وفى العمودية كمان ،كما يحكى له كيف تعرف على والدته فى
احدى البارات وكيف انجبته هو وأخوه …


[ قراءة كاملة ]

تعاليق: 1

حصريآ : فيلم صفر - واحد نسخه vcd ونسخه DVD بأعلى جوده على اكثر من سيرفر

الأحد مايو 30, 2010 2:19 pm من طرف tooooot

Film
O
ne - Zero

VCD &
DVD


--------

DVD

شرح لاكواد الhtml 484270854
-------------

VCD

شرح لاكواد الhtml 597904790

---------------------

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


سيدة تبحث
عن حياتها من جديد من خلال طلاق معلق في المحاكم ..فهل تفوز السيدة
بحياتها

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

أثار
الفيلم …


[ قراءة كاملة ]

تعاليق: 3


شرح لاكواد الhtml

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

شرح لاكواد الhtml Empty شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:02 pm






شرح لاكواد الhtml Quot-top-left:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10









الحلقه الاولى فى لغات البرمجه
HTML
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
السلام عليكم ورحمه الله وبركاته

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

يلا ياجماعة توكلنا على الله








بسم الله نبدأ ...





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10








اللغه البرمجيه الاولى الHTML
الدرس الاول

مقدمة فى لغة الـ HTML
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
إنها اللغة المستخدمة لإنشاء صفحات الإنترنت.(والكلمة إختصار لـ Hyper Text Markup Language). وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة C, فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ ****, **********, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler . وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً ، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار.
<و نظام التشغيل هو المعروف بال Operating System و هو مثلا الويندوز كما نعلم كلنا ..و غير الويندوز يوجد الماكنتوش و الليونيكس و اليونيكس و الدوس و البيوس>

مما تتكون مفردات الـ HTML ؟؟ ..يعنى عندنا مثلا فى ال++c بنقول c in و c out و هكذا
تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين) كما فى الصورة:-
شرح لاكواد الhtml 4bc188dac0
فعلى سبيل المثال الوسم يستخدم لكتابة عنوان الصفحة اللى احنا عايزينه وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر
أو قد تستخدم بكلتا الحالتين مثل وسم الفقرة
.
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله
انا ممكن اكون فهمت شويه حجات من الحجات الى انته بتقولهه دى ..يعنى مثلا امر نهايه السطر
بيعنى bransh وكمان
ممكن تكون point
جوكر/يا عم خليك معايه وحتعرف كل حاجه
**كيف نبدأ...؟؟؟
لا يتطلب كتابة ملف HTML أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط إلى برنامج لتحرير النصوص البسيطة ومعالجتها، وبرنامج المفكرة الموجود في Windows يفي بهذا الغرض. وكذلك إلى أحد متصفحات الإنترنت Netscape Navigator أو MS Internet Explorer لمعاينة الصفحات التي نقوم بتصميمها. وعليك فقط عند الحفظ يكون الامتداد ‎.html أو ‎.htm (( لاتنسى النقطة ))
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات Html. دون الحاجة لمعرفة هذه اللغة حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياً، إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه اللغة والتمكن منها.

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


كده بإذن الله نكون مؤهلين للبدء فى الدرووس على طووووول بس عايز طولة نفس والتعلم بهدوء مش بتسرع

لان بداية طريق الالف ميل ..خطوة واحدة بس ..!!
محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:08 pm

أهلاً وسهلاً بكم إلى الدرس الثانى من دروس HTM
.دلوقتى بعدما اتعرفنا على لغة Html وعرفنا مقدمة عنها سوف نقوم في هذا الدرس بسرد الوسوم الأساسية لصفحة الويب ومناقشتها معكم واحداً تلو الآخر
لنصل في النهاية إلى إنشاء صفحة ويب ناجحة وبسيطة .



لنأخذ اهم الوسوم على االاطلاق وهى هيكل اللغة نفسها الوسوم التالية :-


1**وسم النهاية وسم البداية
<‎/HTML>
<‎/HEAD>
<‎/TITLE> </font></span></strong><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong><****> <‎/****> </strong></span></font><br /></div><br /><br /><strong><font face="Arial"><span style="font-size: 16px; line-height: normal">.....</span></font></strong><br /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>فوسم <font color="royalblue"><HTML></font> يبدأ به العمل وحين ننتهى ننهى بـ <font color="royalblue"><‎/HTML></font></strong></span></font><br /><strong><font face="Arial"><span style="font-size: 16px; line-height: normal">والوسم<font color="royalblue"> <HEAD><TITLE></font>عنوان <font color="royalblue"><‎/TITLE> <‎/HEAD> </font></span></font></strong><br /><strong><font face="Arial"><span style="font-size: 16px; line-height: normal">والوسم <font color="royalblue"><****></font> محتوى الصفحة <font color="royalblue"><‎/****></font></span></font></strong><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البداية، والآخر وسم النهاية ويتميز وسم النهاية بوجود الرمز </strong></span></font><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>تأمل الرسم التالي، فهو يعطي فكرة دقيقة عن تركيب ملف Html </strong></span></font><br /><br /><img src="https://2img.net/h/www.m5zn.com/uploads/b522ffdf98.gif" alt="شرح لاكواد الhtml B522ffdf98" /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>…</strong></span></font><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>نقوم بفتح برنامج المفكرة واكتب ما يلي:- </strong></span></font><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong><html></strong></span></font><strong><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><head> </font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><title> تطبيق الدرس التانى

<****>
هل انت سعيد بما تعلمته اليوم ؟! ان شاء الله تكون كذلك



والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره.

****ولا تنسى أن الامتداد المستخدم في أسماء ملفات HTML هو htm. أو html.
ونختار المجلد الذى نريد الحفظ فيه ... وليكن مجلدا مخصصا لأعمالك على Html
ودلوقتى حان وقت العرض ، لكي نشاهد نتيجة ما كتبناه. نروح للمجلد اللى حفظنا فيه وهنلاقى الاسم اللى حفظنا بيه الملف موجود بس على صورة صفحة ويب
وذلك طبعاً حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه :-
شرح لاكواد الhtml 666e9d9d42
وماذا عنك؟ هل حصلت على نفس النتيجة؟ الحمدلله , كده كويس ..!!
لو العكس راجع نفسك مرة واتنين وتلاتة وبعدين حط معانا المشكلة ومع بعض نقدر نلاقيلها حل بإذن الله ..!

..


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

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

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

تطبيق الدرس التانى <****>
هل انت سعيد بما تعلمته اليوم ؟! ان شاء الله تكون كذلك

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



</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">تطبيق </font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">الدرس </font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">التانى</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/TITLE></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/HEAD></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><****></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">هل انت سعيد </font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">بما تعلمته اليوم ؟!</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">ان شاء الله</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">تكون كذلك</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/****></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/HTML> </font></span></strong><br /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>أو حتى بهذا الشكل :- </strong></span></font><br /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong><HTML><HEAD><TITLE>تطبيق الدرس التانى<‎/TITLE></strong></span></font><strong><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/HEAD></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><****></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">هل انت سعيد بما تعلمته اليوم ؟! ان شاء الله تكون كذلك</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/****></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><‎/HTML></font></span></strong><br />******************<br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>وفي كل الحالات ستحصل على نفس النتيجة بإذن الله...واذا كنت تشك ..جرب و مش هتخسر!!</strong></span></font><br /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>)</strong></span></font><strong><br /><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">........</font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><strong><br /><br /><br /><span style="font-size: 16px; line-height: normal"><font face="Arial">والآن قد تتساءل، إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية الفقرة التي تليها؟ سؤال وجيه!!! والإجابة عليه هي:</font></span></strong> </font></span></strong><div align="center"><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>***سوف نستخدم الوسم <br> لتحديد النهاية للسطر. والبدء بسطر جديد </strong></span></font><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>(لاحظ أن هذا الوسم مفرد، أي <u><i><font color="red">ليس له وسم نهاية</font></i></u>)</strong></span></font><br /></div><br /><br /><font face="Arial"><span style="font-size: 16px; line-height: normal"><strong>ونعود إلى المثال السابق، قم بتعديل الملف لكي يصبح بالشكل التالي :-</strong></span></font><strong><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><html></font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><head> </font></span><br /><span style="font-size: 16px; line-height: normal"><font face="Arial"><title> تطبيق الدرس التانى

<****>
هل انت سعيد
بما تعلمته اليوم ؟!
ان شاء الله




والان هذه هى النتيجة :-

شرح لاكواد الhtml 8f70d1da49


++c بس بنستخد فيه امر ال END


وهناك أيضا الوسم

الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.
كالتالى :-



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

<****>
هل انت سعيد

بما تعلمته اليوم ؟!

ان شاء الله



ودى بردوه نتيجته :-

شرح لاكواد الhtml Beb9a7b822

أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎ ‎ (والأحرف هي اختصار للعبارة Non Breakable Space).
وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا.

إذن لنعد إلى المفكرة ونكتب ملفنا بالشكل التالي:


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

<****>
هل  ‎انت  ‎سعيد  ‎ بما  ‎تعلمته  ‎اليوم ؟! ‎ ان  ‎شاء ‎ الله  ‎



(( لاحظ مع العربى الكتابة عامله ازاى ..!! جربها كده بالانجليزى ))

شرح لاكواد الhtml 2bea2aa273

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

وألفت نظرك إلى أنها تكتب كما هي وبدون إشارتي <> :-

> >
& &
" "
© ©

¼ ¼
½ ½
¾ ¾
® ®
± ±
µ µ

· ·
¢ ¢
£ £
¥ ¥
¿ ¿
° °
¦ ¦
§ §
¹ ¹
² ²
³ ³
« «
» »



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

...........................


شرح لاكواد الhtml Marsa138شرح لاكواد الhtml Marsa187

محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:10 pm

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

سوف نستمر باستخدام صفحتنا هذه لتوضيح أمثلة هذا الدرس أيضاً، لكن لن أقوم بتكرار كتابة وسوم البداية طالما أن عملنا يتركز في الجزء المخصص لمحتويات الصفحة نفسها أي ضمن الوسمين <****> ... <‎/****>.
إذن لنبدأ العمل!
نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
تأمل الشيفرة التالية:
‎< **** bgcolor ="FFFFFF">‎
...
<‎/****>
لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <****> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح......
فمن أين جاءت هذه القيم، وكيف؟...




تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-


شرح لاكواد الhtml Rrggbbfb1

هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255.
ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
*إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة *
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان.
أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان.
وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط.
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري
(نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ).





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10









و هنا يجب التنويه لنظام الارقام السادس عشرى hecsa decimal
و قد رايت ان يجب ان يتم فى حلقه خاصه به مع الانظمه الاخرى
و الى ان تحين هذه الحلقه ان شاء الله
اليكم ترجمه للارقام

0000----->0
0001----->1
0***----->2
0011----->3
***0----->4
***1----->5
0110----->6
0111----->7
1000----->8
1001---->9
1***---->10 ----->A
1011---->11 ----->B
1100----->12----->C
1101----->13----->D
1110----->14----->E
1111----->15----->F
مع تحياتى الشاعر__مسلم__
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.

وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري:-

شرح لاكواد الhtml 04qk5



أما كيف تعرف الرمز الخاص باللون الذي تريد اختياره، فيوجد برامج خاصة تستطيع من خلالها دمج الألوان الثلاثة بنسب مختلفة، ومن ثم يقوم البرنامج بتوليد الرمز السداس عشري المكافئ للون الناتج.
ملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.

وبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية.

وهذا جدول يوضح هذه الألوان ومسمياتها:

شرح لاكواد الhtml 05um9

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




((( نظرا لان لغة المنتدى العربية فسنجد ان الاكواد التالية معكوسة )))


1) وفى هذا الامر نحدد نوع الخط (( الفونت ))اللى هانكتب بيه يعنى مثلا (( arial / andulse.....)) ويوضع بين " " .

2) size=" " وفى هذا الامر نحدد حجم الخط فنكتب بين " " الرقم الذى نريده .

3) color=" "وفى هذا الامر نحدد لون الكتابة اللى احنا عايزينه سواء بكتابة اسم اللون او الكود الخاص به ويوضع بين " " .

4) اوامر
,,,فالأمر لجعل النص اعرض واثقل , والامر لجعل النص مائل , والامر لجعل النص تحته خط ,,,
وتنتهى كما يتنهى اى كود ((
)) وخده بالكم ممكن الوسم اللى نبدأ بيه ننتهى بيه واللى بعده هو اللى قبل الاخير يعنى زى كده

شرح لاكواد الhtml 02ja1

5)

وهذا الامر المحاذاة سواء كانت يمين او يسار او وسط ويكتب بين " " الاتجاه المراد (( center , right , left )) وينتهى بـ
دلوقتى نشوف الكود بقى شكله عامل ازاى ....










شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10















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

<****>
<**** bgcolor="#000000">



وقل ربى زدنى علما






شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right




وده تطبيقى
شرح لاكواد الhtml 01jh4

كده يبقى احنا عملنا تنسيق كامل مكمل للنص .... الدرس الجااى يعتبر تكملة للدرس ده

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

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:23 pm

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

. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي :



Face **
****تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10









الـنــص

(النص المراد اعتماد الخط له )
<‎/FONT>
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
**طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.
**********************
Color**
****أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في الدرس السابق





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10









الـنــص
<‎/FONT>
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
***************************
Size **
****ولتحديد حجم الخط نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.

ونقوم بتحديد الحجم المطلوب بأسلوبين: **أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10









الـنــص
<‎/FONT>
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right

**أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة -





شرح لاكواد الhtml Quot-top-leftاقتباس:شرح لاكواد الhtml Quot-top-right

شرح لاكواد الhtml Quot-top-right-10










الـنــص

<‎/FONT>
شرح لاكواد الhtml Quot-bot-leftشرح لاكواد الhtml Quot-bot-right
**وفي هذه الطريقة فإن الأرقام 1-6 تمثل درجات التكبير (+) أو التصغير (-) للخط وذلك نسبةً إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي وهو 3، أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي يصبح بالحجم 2.

**لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. حتى وإن حاولنا كتابة أرقام أكبر أو أصغر كما فعلت هنا بكتابة الحجم -3 أو +5.


***وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا الوسم، وسوف أرفق نتيجة كل مثال بعده مباشرة :-

‎‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>


شرح لاكواد الhtml F_1m_7de463e

**********************************


This font is Arial, Size is +3, Color is Red
<‎/FONT>

شرح لاكواد الhtml F_2m_96d520a
***************************************
محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:24 pm


This font is Times New Roman, Size is 5, Color is Blue

<‎/FONT>

[size=21]شرح لاكواد الhtml F_3m_274b160


***********************************



This font is Courier, Size is 2, Color is Maroon
<‎/FONT>



شرح لاكواد الhtml F_45m_76ec7f6


***************************************


This <‎/FONT>
is <‎/FONT>
multi <‎/FONT>
colors, <‎/FONT>
multi <‎/FONT>
faces, <‎/FONT>
and <‎/FONT>
multi <‎/FONT>
sizes <‎/FONT>
**** <‎/FONT>


شرح لاكواد الhtml F_5m_9972aad

***********************************

C <‎/FONT>
O<‎/FONT>
L<‎/FONT>
O<‎/FONT>
R<‎/FONT>
S<‎/FONT>
شرح لاكواد الhtml F_6m_0f83efc


[/size]

****************************

************************
*******************
**********





****ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو
.**وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه.

هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة ككل ومع الإعدادات الأساسية لها، وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملف، ويفضل مباشرة بعد وسم <****>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذكر مع ، (نستطيع استخدام الخاصية Name معه بدلاً من Face). وبنفس الطريقة وبدون أي اختلافات. وإليك هذه الشيفرة كمثال:


وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم ... لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلة السابقة، فهي أكثر تحديداً وأكثر مرونة من الوسم

وبمناسبة الحديث عن الألوان وتغيير اللون الأساسي لنص الصفحة. ألا تذكر أننا في الدرس السابق تكلمنا عن الخاصية **** التي تكتب مع الوسم
<****> والتي استخدمناها لتحديد لون نص الصفحة...
لا يوجد تعارض بين هذه الخاصية وخاصية Color في الوسم

فأنت بكل بساطة تستطيع استخدام أي منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم
هو الذي سيطبقه المتصفح ويعتمده.
وهنا أريد أن أذكرك بما قلته في بداية هذا الدرس:

*********يوجد دائماً أكثر من طريقة لأداء نفس العمل

هناك وسوم خاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي:
... <‎/Hn>******وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.

Heading 1 <‎/H1>

Heading 2 <‎/H2>

Heading 3 <‎/H3>

Heading 4 <‎/H4>
Heading 5 <‎/H5>
Heading 6 <‎/H6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

((( طبقتها من احجام المنتدى نفسه كى ترى مثال عليها )))


ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها :-
** الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية:

محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:26 pm

... <‎/B>
... <‎/STRONG>



شرح لاكواد الhtml F_1m_16e02d3

**************
** الخط المائل
... <‎/I>
... <‎/EM>
شرح لاكواد الhtml F_2m_873e020

****************
* الخط المسطر
... <‎/U>
شرح لاكواد الhtml F_3m_26b8ea8

****************
* الخط المرتفع
... <‎/SUP>
شرح لاكواد الhtml F_4m_2df4e9c
*****************
* الخط المنخفض
... <‎/SUB>
شرح لاكواد الhtml F_5m_6a95c73
*****************
* خط كبير
... <‎/BIG>
شرح لاكواد الhtml F_6m_03d86c0
*****************
* خط صغير
... <‎/SMALL>
شرح لاكواد الhtml F_7m_f31f0c2
*****************
* نص يعترضه خط
... <‎/STRIKE>
... <‎/S>
شرح لاكواد الhtml F_8m_eb71f7b
*****************
* نص الآلة الطابعة TeleType
... <‎/TT>
شرح لاكواد الhtml F_9m_b994cfb
*****************

وهذا النص يعرف أيضاً بالنص موحَد المسافات Monospaced ****. ولتوضيح هذا المفهوم إليك المثال التالي:
إذا أخذنا الحرفين m,i وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف m هي أضعاف المساحة التي شغلها الحرف i

iiiiiiiiii
mmmmmmmmmm

أما عند استخدام الوسم ... <‎/TT> فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة
iiiiiiiiii
محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

شرح لاكواد الhtml Empty رد: شرح لاكواد الhtml

مُساهمة من طرف محمد الثلاثاء سبتمبر 30, 2008 4:28 pm

أهلاً وسهلاً بك في الدرس الخامس من دروس HTML. في هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معها، بالإضافة إلى التعريف بأنواع الملفات الرسومية الدارجة في الإنترنت.
ان إدراج الصور ضمن الصفحات نفسها له حكايات مثل الف صورة وصورة قدصى الف ليلة وليلة...هههههههه

إن الوسم الرئيسي المستخدم لتعريف صورة ما داخل الصفحة هو وهو وسم مفرد.
لكن هل يكفي هذا لإدراج صورة؟ كلا، بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له SRC لتحديد موقع واسم الصورة.
بالطبع فى حالة أن يكون ملف HTML موجوداً في مجلد ما وتكون الصورة موجودة في مجلد آخر بنفس المستوى.
في هذه الحالة نكتب هذا الكود

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


لتوجيه المتصفح للخروج من المجلد الفرعي الحالي حيث يوجد ملف HT‎ML ومن ثم الدخول إلى المجلد حيث توجد الصورة.
ولكن كيف نأتى بعنوان الصورة ؟؟؟ لاحظ الاتى

شرح لاكواد الhtml 01xl5

والان شكل الكود اصبح
كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg">
بس الكتابة ملخبطة علشان مشكلة اللغة زى ماقلنا
وبشكل عام، مهما كانت أماكن تواجد الملفات فإن عملية تحديد مواقعها والوصول إليها لا تخرج عن نطاق هذا النمط من الشيفرة. أي كتابة النقطتين للخروج من مجلد فرعي، وكتابة اسم المجلد الذي يجب الدخول إليه.
الا هوه انتا ملاحظتش حااجة فى الكوود اللى فوق كده بتاع الصورة ؟؟!!

ملحوظة
النوع jpeg نكتبه jpg
--------------------------------------------------------------------------------

إن الأبعاد الأساسية لهذه الصورة هي 458×650 بيكسل Pixel
وكما تلاحظ تم إدراج الصورة مع المحافظة على هذه الأبعاد الاصلية ... ولكن ماذا لو جبيت تصغرها او تكبرها ؟؟!
نحن نستطيع التحكم بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم.
كيف؟ بإضافة الخصائص HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين.
لاحظ مكان الاوسمة
كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" width="150" height="150">

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

شرح لاكواد الhtml 02ob1


الخاصية التالية التي تستخدم مع هي ALT وفيها نحدد نصاً بديلاً يظهر مكان الصورة.
وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعال في المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقع بطيئة التحميل.
كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALT="انتظر قليلا...جارى التحميل">‎
--------------------------------------------------------------------------------

عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرة، مثلها مثل أي كلمة أو عبارة أخرى.
ونستخدم الخاصية ALIGN لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة أخرى:
تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم:
( BOTTOM, TOP, MIDDLE, LEFT, RIGHT )
وأوضح لك تأثير كل قيمة كما يلي:
في الحالة العادية وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي الصورة يظهر بمحاذاة الحافة السفلى لها.
وهذه هي الحالة الإفتراضية لظهور الصور والتي تمثلها القيمة

BOTTOM

‎‎ كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="BOTTOM">‎

TOP

وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها.

‎‎ كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="TOP">‎

MIDDLE

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

‎‎ كود:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="MIDDLE">‎

LEFT
هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة.

‎‎ كود PHP:
<img src="file:///J:\aYe 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="LEFT">


RIGHT
أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.

‎‎ كود PHP:
<img src="file:///J:\aYe 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="RIGHT">


--------------------------------------------------------------------------------

والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد المسافة الفاصلة بينها وبين النص الذي يجاورها. ونستخدم لذلك الخصائص التالية:
VSPACE: لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.
HSPACE: لتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.

مثال:


‎‎ كود:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">
النتيجة: هذه الشيفرة ستدرج الصورة مع محاذاتها ليمين الصفحة وإضافة مسافة فارغة مقدارها 20 بيكسل على الجهات الأربعة.
(قارن بين هذا الإطار والإطار السابق الذي وضحت فيه خاصية ALIGN مع القيمة RIGHT.ولاحظ المسافة بين الصورة والنص المرافق لها.)

--------------------------------------------------------------------------------

الخاصية الأخيرة والتي تستخدم مع الوسم هي BORDER ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه. وهذه الخاصية تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية. (أنظرالدرس السادس) ويتم التحكم بالسُمك من خلال إسناد رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة.
مثلاٌ لإضافة إطار سُمكه 5 بيكسل نكتب الشيفرة التالية:

كود:
‎‎[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] 7aGa hEna\ImaGeS\صور للتصميم\82ffd56312.jpg"" BORDER="12">‎
--------------------------------------------------------------------------------

والآن حان الوقت لكي نناقش معاً بعض الأمور التي تتعلق بالصور والرسومات بشكل عام.

* هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟
يزخر عالم الكمبيوتر بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره من عدة نواح، أذكر لك منها: الدقة، وعدد الألوان التي يستوعبها، والحجم التخزيني للملف. لكن هناك نوعين فقط من هذه الملفات يتم تداولهما حالياً في الإنترنت وهما:

JPG, JPEG
إختصار لـِ Joint Photographic Experts Group. ويدعم هذا التنسيق صوراً بعيار 24 بت (أي 16.7 مليون لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور صغيرة الحجم نسبياً.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة الضغط وصغر حجم الملف كان ذلك على حساب الجودة والوضوح.
GIF
إختصار لـِ Graphical Interchange Format وأقصى عدد للألوان في هذا التنسيق هو 265 لون. ومع ذلك فإن أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق JPG. لكن هناك مزايا رائعة ينفرد بها تنسيق GIF مما يستدعي استخدامه في صفحات الويب، أولها القدرة على تخزين صور بخلفيات شفافة Transparent Images وثانيها الصور المتحركة Animated Gifs
وتجد معلومات وافية ودروساً مفصلة حول هذه المواضيع ضمن دروس Paint Shop Pro.
والآن قد تسأل، أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين المعادلتين:
JPG= الصور الحقيقية ذات العدد الكبير من الألوان، وذات الأبعاد الكبيرة
GIF= الصور قليلة الألوان وصغيرة الأبعاد مثل الأزرار.

--------------------------------------------------------------------------------

* هل سبق لك وأن سمعت بمصطلح Thumbnail ضمن مصطلحات الإنترنت؟
حسناً، لا تلتفت إلى الترجمة الحرفية لهذه الكلمة، والتي تعني "ظفر الإبهام". ف
المقصود حقيقةً بها هي تلك الصورة الصغيرة جداً التي تقوم بالنقر عليها فتؤدي إلى عرض صورة بحجم أكبر. ل
ذلك قد يكون المصطلح الأنسب لوصفها هو "العيّنة".
فيتم عرض عينات وصور مصغرة للقطات االمرادة وعند النقر على العينة تظهر الصورة الأصلية.إذن أنت لست مجبراً على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم كبير لصورة لست معنياً بها
ومن الواضح أن استخدام العينات مفيد وعملي جداً وأن وضعها في المواقع التي تحتوي على العديد من الصور يؤدي إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم.
لأنها تعطي الزائر الحرية في النقر عليها إذا رغب في رؤية الأصل أو تجاهلها. أ
ما كيف يتم عمل هذه العينات؟ فذلك باستخدام أحد برامج معالجة الرسوم كبرنامج Paint Shop Pro.
من خلال تصغير أبعاد الصور الأصلية إلى النسبة المطلوبة. ثم ادراجها فى الصفحة مع الحاقها برابط تشعبى لكى تفتح عالصورة الاكبر ...

--------------------------------------------------------------------------------
محمد
محمد
المشرف العام
المشرف العام

عدد الرسائل : 2923
العمر : 54
نقاط : 2516
تاريخ التسجيل : 05/07/2008

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

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


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