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

مشاهدة النسخة كاملة : الدرس الثاني: في الدورة المتقدمة في Html...


المهره الأصيله
05-17-2007, 04:12 PM
الخطوط والألوان
الأنماط الأساسية
أولا: العناوين وهي من ستة مستويات، العنوان الأول h1 والثاني h2 وهكذا حتى h6 .. <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
http://img255.imageshack.us/img255/2530/99465180aq9.png

لتحديد الفقرات يتم إحاطتها بالوسم P
<p>Paragraph </p>
http://img213.imageshack.us/img213/671/71363166ef1.png

لتحديد اتجاه الفقرة استخدم الخاصية align في الوسم P
<p align="left">Left aligned paragraph</p>
<p align="center">Centered paragraph</p>
<p align="right">Right aligned paragraph</p>
http://img521.imageshack.us/img521/3646/44540970uq3.png

لعمل وصلة استخدم الوسم a مع الخاصية href لتحديد الوجهة، الوجهة قد تكون صفحة html وعندها يبدأ العنوان بـ http: وقد يكون عنوان موقع ftp وعندها يبدأ بـ ftp: وقد يكون بريدا إلكترونيا وعندها يبدأ بـ mailto: ،ستعرف المزيد عن المسارات عندما يأتي الحديث عن الصور في الدرس القادم، وبين وسمي الفتح والإغلاق ضع المحتويات الساخنة أو الوصلة نفسها، وهي قد تكون نصوصا أو صورا.
<a href="http://www.microsoft.com/">Microsoft Corp.</a><br>
<a href="mailto:mubarmej@hotmail.com">My E-mail</a>

http://img206.imageshack.us/img206/3646/14834599rc0.png

يوجد أيضا استخدام آخر للوسم a باستعمال الخاصية name بدلا من href (يمكن استعمال الإثنين معا)، وبعد ذلك تستطيع أن تدرج وصلة عادية تشير إلى المكان الذي به <a name="">، وذلك بجعل خاصية href الوصلة العادية تشير إلى الإسم المحدد في name مسبوقا بعلامة #، مثال ذلك إذا أردت أن تضع وصلة تقودك إلى جزء معين من المستند الحالي، ستقوم بعمل <a name="myname"></a> في المكان المطلوب، ثم تدرج وصلة في أي مكان آخر كالتالي <a href="#myname">إسمي</a>، ويمكنك أيضا عمل ذلك عبر المستندات (من مستند إلى مستند آخر) بحيث تحدد بالضبط المكان الذي تريده من المستند الوجهة هكذا <a href="salem.html#myname">إسم سالم</a>.

يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع #top في الخاصية href.

لإجبار النص على الإنتقال إلى السطر التالي استخدم <br> .

لإضافة مسافة استخدم &nbsp; (لعمل أكثر من مسافة واحدة)

يمكنك استخدام الوسم pre لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب المسافة مسافة والثلاث مسافات ثلاث مسافات والسطر الجديد سطرا جديدا، فقط بين الوسمين <pre> و </pre> .

يمكنك توسيط أي شيء بوضعه بين الوسمين <center> و </center>

الوسم Font
يعمل الوسم font دائما مع مجموعة من الخصائص، فهو لا يمتلك أي تأثير لوحده، وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه والتي تحدد حجمه.

أول خصائص الوسم font هي الخاصية face التي تحدد نوع الخط المستخدم
<font face="verdana">Verdana ****</font><br>
<font face="Courier New">Courier New ****</font>
http://img209.imageshack.us/img209/7486/14844743tk1.png

بعد ذلك هنالك الخاصية color المستخدمة لتحديد لون الخط (أنظر إلى الألوان في الأسفل)

This is <font color="red">Red</font>
and this is <font color="blue">Blue</font>
http://img209.imageshack.us/img209/341/99056087pb6.png

الخاصية الثالثة هي الخاصية size وهي تحدد حجم الخط، توجد سبعة أحجام للخط، والخط الأساسي في الصفحة يأخذ أحد هذه الأحجام، وإذا أردت أن تغير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم font مع الخاصية size لزيادة حجم الخط أو إنقاصه بمقدار معين، إذا كا الخط الأساسي هو 3 فإنه يمكنك زيادة الخط 4 مرات حتى تصل إلى 7 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 1 وهو أصغر حجم للخط، الخط الأساسي القياسي هو 3 ما لم تقم بتغييره، يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة + قبل الرقم للزيادة و - قبل الرقم للنقصان، وعند الزيادة فوق الحجم 7 سيعرض المتصفح النص بالحجم 7 وكذلك عند النقصان إلى أقل من الواحد فسوف يتم إعتباره 1.
<font size="+4">Size 7</font><br>
<font size="+3">Size 6</font><br>
<font size="+2">Size 5</font><br>
<font size="+1">Size 4</font><br>
<font size="0">Size 3</font><br>
<font size="-1">Size 2</font><br>
<font size="-2">Size 1</font><br>
http://img209.imageshack.us/img209/3393/22783006ie2.png

توجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <big> و <small>
<big>size 4</big><br>
<small>size 2</small><br>
<big><big>size 5</big></big><br>
http://img205.imageshack.us/img205/9425/14750144bh7.png

الطرق السابقة لتغيير الخط تسمى طرقا نسبية relative لأنك تقوم بتغيير الخط بالنسبة للخط الأساسي، يمكنك أيضا تحديد الحجم الذي تريده للخط بالضبط دون الإعتماد على الخط الأساسي عن طريق الخاصية size ذاتها ولكن دون وضع إشارة + أو - مقابل الحجم المطلوب
<font size="7">Size 7</font><br>
<font size="6">Size 6</font><br>
<font size="5">Size 5</font><br>
<font size="4">Size 4</font><br>
<font size="3">Size 3</font><br>
<font size="2">Size 2</font><br>
<font size="1">Size 1</font>
http://img205.imageshack.us/img205/3915/95097912jx4.png

يمكنك كذلك تغيير حجم الخط الأساسي في المستند وهذا سيؤثر على جميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوط، ونغير الخط الأساسي باستخدام وسم يدعى <****font> ويمكن استخدامه لتغيير حجم الخط الأساسي في المستند أو لون الخط الأساسي أو نوع الخط الأساسي، وهو لا يأخد قيم نسبية في الحجم (لا ينسب إلى نفسه)، على سبيل المثال لتغيير الخط الأساسي إلى Verdana بحجم 3 ولون أخضر نضع السطر التالي في المستند
<"font color="Green" size="3" face="Verdana">

والوسم السابق لا يستخدم في جزء محدد من نصوص HTML بل يظهر تأثيره في الصفحة كلها لذلك فهو لا يحتاج إلى وسم إغلاق.

توجد أيضا وسوم أخرى للتنسيقات المختلفة، مثلا الوسم b أو strong للخط العريض والوسم i أو em للمائل ،و الوسم tt يستخدم لجعل الحروف متساوية في الحجم مثل نصوص الآلة الكاتبة
<b>This</b> is Bold **** and <strong>this</strong> to!<br>
but <i>This</i> is Italic **** and <em>this</em> to!<br>
And <tt>This</tt> is Typewriter ****
http://img205.imageshack.us/img205/1483/29685369go8.png

يوجد وسم خاص بوضع الخط الأفقي هو الوسم hr يمكنك تحديد عرض الخط بالخاصية width، حيث تأخذ width قيما مطلقة مثل 10 أو 293 وهي تحدد العرض بالبكسل، وقيما نسبية تقاس بالنسبة إلى عرض الصفحة، مثل 20% و 85%، توجد أيضا خاصية أخرى هي size تحدد ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة، وتوجد أيضا خاصية color لتحديد لون الخط، والخاصية noshade وهي خاصية بدون قيمة، وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية
This is the First Line
<hr>
This is the Secound Line
<hr color="Purple">
This is the Third Line
<hr width="30%">
This is the Fourth Line
<hr noshade size="40">
http://img205.imageshack.us/img205/3008/59344285hj6.png

يمكن أيضا استخدام بعض المتغيرات في وسم الجسم <body>، وهذه المتغيرات تستخدم في تحديد تنسيق الصفحة مثل لون خلفية الصفحة bgcolor وصورة الخلفية المتكررة background، ولون النص **** ولون الوصلة الجديدة link والقديمة vlink والمحددة حاليا alink، وحاشية الصفحة العلوية topmargin والسفلية buttommargin واليسرى leftmargin واليمنى rightmargin.
<body alink="red" link="yellow" vlink="blue"
bgcolor="black" ****="white" topmargin="0">
This is some ****.<br>
And here are some links :<br>
<a href="http://www.download.com/">Great Downloads</a><br>
<a href="mailto:bgates@hotmail.com">Bill Gates!?</a><br>
<a href="http://www.msn.com/">Microsft Network</a><br>
<a href="http://www.hotmail.com">Free E-mail</a>
</body>

http://img205.imageshack.us/img205/570/46985838kr6.png

الألوان في HTML
الألوان في الكمبيوتر تنتج من خلط الألوان الأساسية الضوئية الثلاثة، وهي الأحمر والأخضر والأزرق، يأخذ كل لون من الألوان السابقة قيمة تتراوح بين 0 و 255، وهي مرتبة (أحمر،أخضر،أزرق) أو (Red,Green,Blue) أو rgb، في أي مكان نحتاج إلى أن نضع فيه لونا نقوم بوضع الجملة التالية

rgb(R,G,B)
فنضع قيمة الـR في مكانها المناسب، والـG والـB كذلك، يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية، نقوم بوضع الأرقام السابقة بالتتالي في صورها الستعشرية، حيث أن أعلى قيمة عشرية للألوان هي 255 فإن أعلى قيمة ستعشرية لها هي ff وأقل قيمة هي 00، لذا فإن كل رقم يأخذ خانتين كالتالي .. #RRGGBB ويفضل وضع علامة # قبل الأرقام في الصيغ الستعشرية حتى تتعرف عليها جميع المتصفحات، أغلب الناس يستخدمون الصيغ الستعشرية في تكوين الألوان، يمكن الحصول على القيمة الستعشرية من القيمة العشرية باستخدام الحاسبة التي تأتي مع الـ Windows.
تستطيع بالطريقة السابقة تكوين أكثر من 16.5 مليون لون، ولكن بعض الأجهزة القديمة لم تكن تدعم أكثر من 256 لون في نفس اللحظة، لذا فقد اتفق على 216 لون سميت بألوان المتصفح الآمنة، فإذا التزم الجميع بهذه الألوان سيستطيع المتصفحون أن يستعرضوا أكثر من صفحة واحدة في نفس الوقت دون مشاكل لأن عدد الألوان التي يحتاجها المتصفح هي 216 فقط والباقي احتياطي للأمور الأخرى مثل الواجهة وغيرها.

إضافة إلى ما سبق هنالك ألوان معروفة تستخدم بكثرة، ولها أسماء معروفة وعددها حوالي 141 لون، هذه الألوان يمكنك استخدامها بوضع اسمها فقط، وهي تنتمي جميعها للوح الألوان الآمن والجدول التالي يبين
أشهرها :
http://img205.imageshack.us/img205/2157/68635115ih6.png

أمثلة للتوضيح ..
<font size="+1">
<font color="Khaki"> Sample 1 </font><br>
<font color="#0066cc"> Sample 2 </font><br>
<font color="rgb(204,112,202)"> Sample 3 </font><br>
</font>
http://img205.imageshack.us/img205/9612/27858823dm6.png


وهذا تطبيقي من درسي
لعلكم تستفيدون كما استفدت
طبعا لكي ترون الكود كيف كُتب في المفكره
افتحوا فقط المرفق
7
7
ونشوف تطبيقاتكم ان شاء الله

ودمتم بخيردوما:
المهره الأصيله

الصقر الشمالي
05-19-2007, 08:05 PM
امممممممم

هلا اختي الكريمة

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

وباذن الله تعم الفائدة ع الاعضاء


دمتي بود

الصقر

Dr.B7R
05-19-2007, 10:08 PM
يسلموووو

تدصقي الان بديت افهم اكثرر
لك تحياتي

برق الشمال
05-20-2007, 01:51 PM
ما شاء الله تبارك الرحمن مبدعة اختي
هذا اللي كنا نتمناه وحصلنا عليه

اختي مبروك اشرافك على هذا القسم :)

المهره الأصيله
05-20-2007, 06:23 PM
امممممممم

هلا اختي الكريمة

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

وباذن الله تعم الفائدة ع الاعضاء


دمتي بود

الصقر



هلا فيك اخوي الصقر

ويعطيك الف عافيه على مرورك الطيب
والكريم
ونعم بالله ...آمين



ودمت بخير:
المهره الأصيله[/CENTER]

المهره الأصيله
05-20-2007, 06:27 PM
يسلموووو

تدصقي الان بديت افهم اكثرر
لك تحياتي



الله يسلمك اخوي
د.بحر

الحمد هذا هو المطلوب
ومشكور على مرورك الطيب




ودمت بخير:
المهره الأصيله

المهره الأصيله
05-20-2007, 06:40 PM
ما شاء الله تبارك الرحمن مبدعة اختي
هذا اللي كنا نتمناه وحصلنا عليه

اختي مبروك اشرافك على هذا القسم :)



هلا اخوي برق الشمال

الحمد لله.. والإبداع هو تواجدكم
الطيب والكريم وإستفادتكم
للدروس


اما بالنسبة إشرافي على القسم

ماادري وش اقول..

لكن الله يبارك فيك اخوي
وهذا وسام بتكليف لي مهمة وإن شاء الله
أكون عند حُسن ظنكم بي
وبإذن الله أُفيدكم ماهو مفيد وماهو
قيم...

والأجر والمثوبه من المولى عزوجل





ولك مني كل الشكر والتقدير:
المهره الأصيله

sweety
07-07-2007, 11:04 PM
الله يعطيك العافية اختي

ها الايام براجع ASP, فدرسك مرة فادني, على اعتبار ان asp تحوي اكواد html

بس عندي سؤال , في المثال اللي مرفقته كاتبة

<HTML Dir="Rtl">

ما هي وظيفة dir ؟

المهره الأصيله
07-08-2007, 04:23 AM
الله يعطيك العافية اختي

ها الايام براجع ASP, فدرسك مرة فادني, على اعتبار ان asp تحوي اكواد html

بس عندي سؤال , في المثال اللي مرفقته كاتبة

<HTML Dir="Rtl">

ما هي وظيفة dir ؟


هلا والله بسويتي

يعافيك ربي ويخليكِ

الحمدلله انه افداك



اما بالنسبة لسؤالك:
ماوظيفة dir؟؟

هذا كود وظيفته تحويل الكلام من اليمين إلى الشمال أو من الشمال إلى اليمين.
مثلاً:

نبي الكلام الموجود في الصفحه على جهة اليمين نكتب هذا الكود:

<"HTML dir="rtl>

أما اذا نبي الكلام يكون على جهة اليسار نكتب هذا الكود:

<"HTML dir="ltr>



وأي استفسار ثاني انا حاضره
ومشكوره على مرورك


اختك

المهره الإصيله

++c
12-31-2007, 09:03 PM
الىالمشرفة المهرة الاصيله في البداية اشكرك على هذا الموضوع
ولكن
ارجو منك المهره الإصيله
نصائح إرشادية لمن يريد ان يتعلم لغات البرمجة بصفه عامة ومن اين يبدأ
ودمتي علي خير

sweety
12-31-2007, 09:37 PM
الىالمشرفة المهرة الاصيله في البداية اشكرك على هذا الموضوع
ولكن
ارجو منك المهره الإصيله
نصائح إرشادية لمن يريد ان يتعلم لغات البرمجة بصفه عامة ومن اين يبدأ
ودمتي علي خير

يا هلا فيك اخوي في مجالس برق الشمال

ان شاء الله تفيد و تستفيد

بانتظار مشاركاتك القيمة

بالنسبة لسؤالك

في عدة مواضيع في القسم ممكن تفيدك

تعلم البرمجة: (لماذا ؟؟و كيف؟؟)

http://www.barqalshamal.com/vb/showthread.php?t=12405

=----> (( لا تتعلم لغات البرمجة ))<----=

http://www.barqalshamal.com/vb/showthread.php?

كيف تصبح مبرمجا

http://www.barqalshamal.com/vb/showthread.php?t=12117