تعلم لغة HTML لتصميم المواقع # الدرس الثاني.
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
والصلاة والسلام على أشرف الأنبياء والمرسلين سيدنا محمد وعلى آله وصحبه أجمعين.
سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم <BODY> من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان .
إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:
لمن فاته الدرس الاول هذا الراابط:
تعلم لغة HTML لتصميم المواقع # الدرس الاول
<html>
<head>
<title/>الصفحة الرئيسية<title>
<head/>اهلا وسهلا بك في موقعي الاول.</p>
<body/>
<html/>
كما قلنا في الدرس السابق في قسم رأس الصفحة اكتب دائماً العنوان:
</title>عنوان صفحتك<title>
في جسم الصفحة اكتب محتويات صفحتك,
<body>
<p/>اهلا وسهلا بك في موقعي الاول.<p>
<body/>
صفحة بسيطة بخلفية بيضاء وخط صغير نسبياً لونه أسود. وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى.
الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
تأمل الكود التالية:
<BODY BGCOLOR="FFFFFF">
...
</BODY>
لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي " " )
تلاحظ أن القيم السابقة مكونة من ستة رموز، وهي مكتوبة بالصيغة التالية:-
وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.
| ABCDEF | FFFF00 | ||
| FEDCBA | 336699 | ||
| 773466 | 112233 | ||
| FF1122 | 666666 | ||
| 0033FF | 663333 | ||
| AABBAA | 00FF00 | ||
| 800800 | FF6600 | ||
| 008008 | 993366 | ||
| 020769 | 123456 | ||
| 111111 | 654321 |
أملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.
وبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن استخدام أسماء هذه
الألوان مباشرة بدلاً من الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان
ومسمياتها:
| Black | White | ||
| Red | Green | ||
| Marron | Purple | ||
| Navy | Blue | ||
| Teal | Lime | ||
| Gray | Silver | ||
| Olive | Aqua | ||
| Fuchsia | Yellow |
ونعود إلى الوسوم و خصائصها ...
<BODY BACKGROUND="image.jpg">
...
</BODY>
وقد استخدمت الصورة والمسماة
image
في الملف لموجود به صفحتى لاحظ اني كتبت
image.jpg وهذ يعني نطاق الصورة وهو امر مهم <B<BODY BACKGROUND="backimag.jpg"TEXT="#000066"
ننتقل الي وسم اخر
لاحظ اني كتب الامر text داخل ال BODY وهذا يعني
تحديد لون النص الأساسي للصفحة اي ان اي شي تكتبه في الصفحة يبقى بنفس اللون الذي حددته في الكود
الان ننتقل الوسوم اللخاصة بالخطوط
الوسم الأول الخاص بالخطوط هو
<FONT> ... </FONT>
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى للخطوط فهي كالتالي:
Face
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده، وقد نقوم بتحديد أكثر من
نوع معاً. وفي هذه الحالة إذا لم يتواجد الخط المحدد أولاً على جهاز الشخص
الذي يتصفح الموقع يتم إعتماد الخط الثاني ... وهكذا
<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic">
... Text .</FONT>
طبعاً لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً.
Color
أما هذه الخاصية فتحدد لون الخط، وذلك بنفس مبادئ تحديد الألوان التي تحدثنا في الاعلى
<FONT COLOR="#FF0000">
... Text ...
</FONT>
Size
نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تستطيع المتصفحات التعرف عليها.
ونقوم بتحديد الحجم المطلوب حيث يتم كتابة رقم يتراوح ما بين 1-7. أي أننا نختار الحجم الذي نريده مباشرة.
<FONT SIZE="4">
... Text ...
</FONT>
وإليك نماذج بأحجام الخطوط
خط بحجم 1
خط بحجم 2
خط بحجم 3 (الخط الافتراضي)
خط بحجم 4
خط بحجم 5
خط بحجم 6
خط بحجم 7
وهذه بعض الأمثلة لتوضح لك كيفية استخدام هذا الوسم، وسوف أرفق نتيجة كل مثال بعده مباشرة.
<FONT FACE="arial" SIZE="6" COLOR="#FF0000">
This font is Arial, Size is 6, Color is Red
</FONT>
<FONT FACE="courier" SIZE="2" COLOR="#800000">
This font is Courier, Size is 2, Color is Maroon
</FONT>
This font is Courier, Size is 2, Color is Maroon
<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is </FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi </FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, </FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi </FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, </FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and </FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi </FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes </FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text </FONT>
This
is
multi
colors,
multi
faces,
and
multi
sizes
text
<FONT FACE="Impact" SIZE="6" COLOR="#000000">C </FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R</FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S</FONT>
C
O
L
O
R
S
هناك وسوم خاصة تستخدم لتمييز العناوين
Headings
في صفحات الإنترنت وهي:
<Hn> ... </Hn>
وحرف n هو رقم بين 1-6 يمثل مستوى العنوان.
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
<H5> Heading 5 </H5>
<H6> Heading 6 </H6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال ونتيجته:
* الخط الغامق (الأسود العريض)، ونستخدم له الوسوم التالية:
<B> ... </B>
<STRONG> ... </STRONG>
| <B> Bold Text </B> | This is Bold Text |
| <STRONG> Strong Text </STRONG> | This is Strong Text |
* الخط المائل
<I> ... </I>
<EM> ... </EM>
<EM> ... </EM>
| <I> Italic Text </I> | This is Italic Text |
| <EM> Emphasized Text </EM> | This is Emphasized Text |
* الخط المسطر
<U> ... </U>
| <U> Undelined Text </U> | This is Undelined Text |
* الخط المرتفع
<SUP> ... </SUP>
| <SUP> Superscript Text </SUP> | This is Superscript Text |
* الخط المنخفض
<SUB> ... </SUB>
| <SUB> Subscript Text </SUB> | This is Subscript Text |
* خط كبير
<BIG> ... </BIG>
| <BIG> Big Text </BIG> | This is Big Text |
* خط صغير
<SMALL> ... </SMALL>
| <SMALL> Small Text </SMALL> | This is Small Text |
* نص يعترضه خط
<STRIKE> ... </STRIKE>
<S> ... </S>
<S> ... </S>
| <STRIKE> Striked Text </SRTIKE> | This is |
| <S> Striked Text </S> | This is |
اود توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة
وسوم وتنسيقات معاً في نفس الوقت ولنفس المقطع من النص. (وذلك لجميع
الوسوم وليس فقط لوسوم الخطوط)، لا أهمية لترتيب هذه الوسوم ولا أيها ورد أولاً...
لكن
عند استخدام الوسوم المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟ أنظر إلى الصورة التالي:
0 التعليقات