الدرس الثاني عشر: التصميم (CSS)

web

هل تريد منتدى صغيرا PHP مجانا و هو رائع جدا و هذا مثال على ذلك:

اضغط هنا لمشاهدة المثال

الموضوع سهل جدا

اضغط هنا للحصول على المنتدى

انزل الى آخر الصفحة و اضغط على Accept

ثم املأ البيانات و هى بيانات عادية

و اضغط على create my forum

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

web

www.saifhost.com

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

الموقع سيف هوست لتصميم واستضافة المواقع مجان

www.saifhost.com

web

احسن وارواع اغاني أحمد سلطان

http://www.hibamusic.com/Maroc/ahmed-soultan/ahmed-soultan-95.htm

Said Senhaji - سعيد الصنهاجي

http://www.hibamusic.com/Maroc/said-senhaji/said-senhaji-27.htm

احسن وارواع اغاني عبد الله الداودي

http://www.hibamusic.com/Maroc/abdellah-daoudi/abdellah-daoudi-30.htm

web

موقع 100 ميجا +دردشه صوتيه+دردشه كتابيه مجانا

موقع 100 ميجا

درشه صوتيه 100 مستخدم مجانا (غرفه مشتركه)

درشه كتابيه مجانا

دومين مجانا

عدد غير محدود من صناديق البريد الإلكترونى
عدد غير محدود من اسماء النطاقات الفرعية
قواعد بيانات MySQL غير محدودة
دعم CGI, PHP, MySQL
دعم الفرونت بيج
تركيب منتدى + تصميم فلاش للصفحة الرئيسية مجانا

102 دولار سنوي عرض لفتره محدوده

شاهد العرض بالتفصيل علي

http://1plan4u.com

mail:sales@1plan4u.com
MSN neplan4u@hotmail.com

EGYPT: 0020106931666
0020105537789
0020237721097

web

Arabic Keyboard - Clavier arab -لوحة المفاتيح العربية

web

512 اكواد الالوان html

افتح الصور لرؤية الاكواد بوضوح (ouvrir)

web

الدرس الثاني عشر: التصميم (CSS)

أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟

بالتأكيد، لكن كيف؟

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

هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).

كما رأيت الدرس السابع، يمكن إضافة CSS من خلال خاصية، فمثلاً يمكنك أن تضع نوع الخط وحجمه:

مثال 1:



<p style="font-size:20px;">This is typed in size 20</p>
<p style="font-family:courier;">This is typed in Courier</p>
<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20</p>

سيظهر بهذا الشكل في متصفحك

This is typed in size 20

This is typed in Courier

This is typed in Courier size 20

في المثال أعلاه اسخدمنا خاصية style لتحديد نوع الخط الذي نريد استخدامه من خلال أمر font-family) وحددنا حجم الخط من خلال أمر font-size)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.

يبدو أن هذا يحتاج إلى الكثير من العمل؟

إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصية style لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:

مثال 2:



<html>

<head>
<title>My first CSS page</title>

<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>

</head>

<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>

</html>

عرض المثال

في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل الصفحة، لفعل ذلك عليك فقط أن تضع الوسم <style type="text/css"> الذي يخبر المتصفح بأنك تستخدم CSS.

في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية ستستخدم خطاً من نوع Courier بحجم 15 بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roma" بحجم 8 بكسل.

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

ماذا يمكن أن أفعل أيضاً في CSS؟

يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها::



<p style="color:green;">Green text</p>

<h1 style="background-color: blue;">Heading on blue background</h1>

<body style="background-image: url('http://www.html.net/logo.png');">

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

هل CSS مجرد ألوان وخطوط؟

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

مثال 3:



<p style="padding:25px;border:1px solid red;">I love CSS</p>

سيظهر بهذا الشكل في متصفحك

I love CSS

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

مثال 4:



<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>

سيظهر بهذا الشكل في متصفحك

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.

باستخدام الأمر position، يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:

مثال 5:


<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

عرض مثال

في المثال الصور وضعت على بعد 50 بكسل من الأسفل و10 بكسل من يمين المتصفح، لكن يمكنك أن تضعها بالضبط حيث تشاء، جرب، ستجد أن الأمر سهل ومثير.

جميل، لكن هل هي سهلة؟

لا يمكنك تعلم CSS في عشر دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم المزيد بنفسك في درس CSS.

الآن لنركز على HTML، ولنذهب إلى الدرس التالي حيث ستتعلم كيف تقوم بوضع موقعك على الشبكة لكي يستطيع كل الناس في العالم مشاهدته.

web

الدرس الحادي عشر: المزيد حول الجداول

عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه.

ماذا بقي إذاً؟

خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:

مثال 1:



<table border="1">
 <tr>
   <td colspan="3">Cell 1</td>
 </tr>
 <tr>
   <td>خلية 2</td>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1
خلية 2	خلية 3	خلية 4

بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية

مثال 2:



<table border="1">
 <tr>
   <td colspan="2">خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
   <td>خلية 5</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1		خلية 2
خلية 3	خلية 4	خلية 5

ما هي خاصية rowspan؟

كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:

مثال 3:



<table border="1">
 <tr>
   <td rowspan="3">خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
 </tr>
 <tr>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
	خلية 3
	خلية 4

في المثال أعلاه أعطينا الخاصية rowspan القيمة "3" للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقع فيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفس الصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.

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

ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.

web

الدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.

هل هي صعبة؟

إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML.

مثال 1:



<table>
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

ما الفرق بين `<tr>` و`<td>`؟

كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم:

هناك ثلاث عناصر تستخدم لإنشاء أي جدول:

وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.

<tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.

<td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.

هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم <table>، يتبعه وسم <tr> الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: <td>خلية 1</td> و<td>خلية 2</td>، ثم نغلق الصف بوسم الإغلاق </tr> ونبدأ آخر <tr> الذي يحوي أيضاً خليتين، ثم نغلق الجدول </table>.

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

خلية 1	خلية 2
خلية 3	خلية 4

خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً

في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.

مثال 2:



<table>
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
 <tr>
   <td>خلية 5</td>
   <td>خلية 6</td>
   <td>خلية 7</td>
   <td>خلية 8</td>
 </tr>
 <tr>
   <td>خلية 9</td>
   <td>خلية 10</td>
   <td>خلية 11</td>
   <td>خلية 12</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2	خلية 3	خلية 4
خلية 5	خلية 6	خلية 7	خلية 8
خلية 9	خلية 10	خلية 11	خلية 12

هل هناك أية خصائص للجداول؟

بالطبع هناك خصائص للجداول، هناك مثلاً خاصية الإطار التي تستخدم لتحديد سمك الإطار حول الجدول:

مثال 3:



<table border="1">
 <tr>
   <td>خلية 1</td>
   <td>خلية 2</td>
 </tr>
 <tr>
   <td>خلية 3</td>
   <td>خلية 4</td>
 </tr>
</table>

سيظهر بهذا الشكل في متصفحك

خلية 1	خلية 2
خلية 3	خلية 4

سمك إطار الجدول يحدد بمقياس البكسل (انظر الدرس التاسع)

وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:

مثال 4:



<table border="1" width="30%">

هذا المثال سيعرض في المتصفح جدولاً بعرض 30% من مقياس الشاشة، جرب ذلك بنفسك.

ماذا يمكن أن أضع في الجداول؟

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

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

الآن قم بتطبيق ما تعلمته وصمم عدداً من الجداول بمختلف القياسات ومختلف الخصائص والمحتويات، هذا يمكن أن يبقيك مشغولاً لساعات.

web

الدرس التاسع: الصور

ألن يكون رائعاً إذا تمكنت من وضع صورة المغني والممثل الشهير ديفيد هاسلهوف في منتصف صفحتك؟

هذا يبدو كتحد...

ربما، لكن في الحقيقة يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد:

مثال 1:



<img src="david.jpg" alt="David" />

ستظهر بهذا الشكل في متصفحك:

كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟

لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين.

"david.jpg" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".jpg" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تزظهر أن الملف هو وثيقة HTML، ".jpg" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك:

GIF (Graphics Interchange Format)

JPG / JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

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

في الماضي كانتا صيغة الصورة GIF وJPEG الأكثر استخداماً في صفحات المواقع، مؤخراً صيغة الصور PNG بدأت تكتسب شهرة أكثر وأكثر على حساب صيغة GIF، صيغة PNG تحوي عدة طرق تجمع بين مميزات GIF وJPEG، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.

من أين آتي بالصور؟

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

للأسف ليس هناك محرر صور يأتي مع نظام ويندوز أو مع أنظمة التشغيل الأخرى، لذلك عليك أن تشتري برنامج باينت شوب برو أو فوتوشوب أو مايكروميديا فايروركس، وهي أفضل محررات الصور في السوق.

عموماً، كما قلنا سابقاً، ليس من الضروري أن تشتري برامج غالية السعر لإنجاز هذا الدرس، الآن يمكنك إنزال برنامج جيد لتحرير الصور يسمى IfranView وهو برنامج مجاني ولا يكلف شيئاً.

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

إضغط بالزر الأيمن على أي صورة في أي موقع.

اختر "Save picture as..." في القائمة التي ستظهر لك.

اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".

إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:

الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك.

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هناك أشياء أخرى يجب أن تعرفها حول الصور، أولاً يمكنك أن تقوم بإضافة صورة من مجلد آخر أو حتى من موقع آخر:

مثال 2:



<img src="images/logo.png" />

مثال 3:



<img src="http://www.ar.html.net/tutorials/html/logo.png" />

ثانياً، يمكن للصور أن تكون روابط:

مثال 4:



<a href="http://www.html.net">
<img src="logo.png" /></a>

ستظهر في المتصفح بهذا الشكل (جرب أن تضغط على الصورة):

هل هناك أية خصائص يجب أن أعرفها؟

عندما تريد وضع صورة فأنت تحتاج خاصية src التي تخبر المتصفح عن مكان الصور، بجانب ذلك هناك عدد من الخصائص التي يمكن أن تكون مفيدة عند إضافة الصور

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

مثال 5:



<img src="logo.gif" alt="HTML.net logo" />

بعض المتصفحات تعرض النص البديل في مربع صغير يظهر للمستخدم عندما يضع مؤشر الفأرة على الصورة، لاحظ عند استخدام خاصية alt الهدف هو تقديم نص بديل يصف الصور، خاصية alt يجب ألا تستخدم لعرض الرسائل خاصة للمستخدم لأن الذين يعانون من الإعاقة البصرية سيسمعون النص البديل بدون أن يفهموا معناه أو يدركوا محتوى الصورة.

الخاصية title يمكن استخدامها لتقديم معلومات إضافية للصورة:

مثال 6:



<img src="logo.gif" title="Learn HTML from HTML.net" />

سيظهر بهذا الشكل في متصفحك

إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "Learn HTML from HTML.net" يظهر لك في مربع صغير.

هناك خاصيتان مهمتان وهما width وheight:

مثال 7:



<img src="logo.png" width="141" height="32" />

سيظهر بهذا الشكل في متصفحك

الخاصية width وheight يمكن استخدامها لتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل، والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلى عكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديه شاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن في شاشة أخرى قد تساوي 1.5 سنتميتر.

إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:

مثال 8:



<img src="logo.gif" width="32" height="32" />

سيظهر بهذا الشكل في متصفحك

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

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

يكفينا الآن ما رأيناه من صور ديفيد هاسلهوف.

web

الدرس الثامن: الروابط

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

ما الذي أحتاجه لإنشاء رابط؟

لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:

مثال 1:



<a href="http://www.html.net/">Here is a link to HTML.net</a>

سيظهر في المتصفح بهذا الشكل:

Here is a link to HTML.net

العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.

في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.

ماذا عن الروابط بين الصفحات في موقعي؟

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

مثال 2:



<a href="page2.htm">Click here to go to page 2</a>

إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:

مثال 3:



<a href="subfolder/page2.htm">Click here to go to page 2</a>

لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:

مثال 4:



<a href="../page1.htm">A link to page 1</a>

">"../../".

هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.

ماذا عن الروابط الداخلية في نفس الصفحة؟

بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".

استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له، مثال:



<h1 id="heading1">heading 1</h1>

بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:



<a href="#heading1">Link to heading 1</a>

كل هذا سيتضح مع هذا المثال:

مثال 5:



<html>

<head>
</head>

<body>

 <p><a href="#heading1">Link to heading 1</a></p>
 <p><a href="#heading2">Link to heading 2</a></p>

 <h1 id="heading1">heading 1</h1>
 <p>Text text text text</p>

 <h1 id="heading2">heading 2</h1>
 <p>Text text text text</p>

</body>

</html>

سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):

Link to heading 1

Link to heading 2

Heading 1

Text text text text

Heading 2

Text text text text

ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.

هل يمكن أن أضع رابطاً لأي شيء آخر؟

بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:

مثال 6:



<a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>

سيظهر بهذا الشكل في متصفحك

Send an e-mail to nobody at HTML.net

الاختلاف الوحيد بين الرابط لبريد إلكتروني ورابط لملف هو كتابة mailto: متبوعاً بعنوان البريد، عندما يضغط أحدهم على الرابط سيعمل برنامج البريد الإلكتروني ويعرض رسالة جديدة فارغة تحوي عنوان البريد الإلكتروني الذي وضعته في الرابط، سيحدث هذا في حال وجد برنامج بريد إلكتروني مثبت على الحاسوب، جرب ذلك الآن!

هل هناك خصائص أخرى يجب علي أن أعرفها؟

لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:

مثال 7:



<a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>

سيظهر بهذا الشكل في المتصفح:

HTML.net

خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.

web

الدرس السابع: الخصائص

هناك خصائص يمكنك أن تستخدمها لمعظم العناصر

ما هي الخاصية؟

أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص.

مثال 1:



<h2 style="background-color:#ff0000;">My friendship with HTML</h2>

الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق.

هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة:

مثال 2:



<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>

هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق.

لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة.

كيف أصبحت الصفحة حمراء؟

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

أبيض: #ffffff

أسود: #000000

أحمر: #ff0000

أزرق: #0000ff

أخضر: #00ff00

أصفر: #ffff00

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

بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.

مثال 3:



<body style="background-color: red;">

نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص.

أي العناصر تستطيع استخدام الخصائص؟

مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر.

الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص في سطر جديد لا يتطلب خصائص إضافية.

وكما هناك الكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعض الخصائص صممت لتستخدم لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعض العناصر يمكنه أن يحوي خصائص كثيرة بينما بعضها الآخر لا يمكنه سوى أن يحوي خاصية واحدة.

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

هذا الدرس سيعرض عليك أهم الخصائص.

ما هي مكونات العناصر؟

بشكل عام العناصر تتكون من وسم بداية تحوي خاصية أو أكثر أو قد لا تحوي أي خاصية، ثم هناك بعض المحتويات ثم وسم الإغلاق، هذه ببساطة هي مكونات العناصر، انظر إلى الشكل التوضيحي.

العناصر

web

الدرس السادس: المزيد من العناصر

هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:



<html>

 <head>
 <title>My website</title>
 </head>

 <body>
 <h1>A Heading</h1>
 <p>text, text text, text</p>
 <h2>Subhead</h2>
 <p>text, text text, text</p>
 </body>

</html>

ما التالي؟

حان الوقت الآن لتعلم سبعة عناصر جديدة.

بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong>.

مثال 1:



<strong>This should be stronger emphasis.</strong>

سيظهر بهذا الشكل في المتصفح:

This should be stronger emphasis.

بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:

مثال 2:



<small>This should be in small.</small>

سيظهر بهذا الشكل في متصفحك

This should be in small.

هل أستطيع استخدام عدة عناصر في نفس الوقت؟

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

مثال 3:

إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:



<em><small>Emphasised small text</small></em>

وليس بهذه الطريقة:



<em><small>Emphasise small text</em></small>

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

هل هذا كل شيء؟

نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:



<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>

web

الدرس الخامس: ماذا تعلمنا؟

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:



<html>
<head>
<title></title>
</head>

<body>
</body>

</html>

في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:

العنوان يعرض في المتصفح

العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.

العنوان يعرض في غوغل

في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:



<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>

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

ماذا يعني هذا؟

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

لذلك قم بتجربة ما تعلمته حتى الآن.

ما التالي؟

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

web

الدرس الرابع: إنشاء موقعك الأول

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

كيف؟

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

أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:

كيف تفتح برنامج المفكرة

أنت جاهز الآن!

ماذا أفعل؟

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

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

أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.

كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.

الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).

صفحتك يجب أن تكون بهذا الشكل:

لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.

إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.

جميل, لكن كيف أضيف المحتويات للموقع؟

كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..

مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:

لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة

كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::



<p>مرحى! هذا هو موقعي الأول.</p>

الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.

صفحة HTML يجب أن تكون لديك بالشكل التالي:



<html>

<head>
<title>موقعي الأول</title>
</head>

<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>

</html>

انتهينا! لديك الآن أول موقع حقيقي!

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

في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.

اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.

احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.

حفظ الصفحة

الآن إذهب إلى متصفحك:

في القائمة العلوية اختر "Open" من قائمة "File".

إضغط على "Browse" في النافذة التي ستظهر لك.

إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".

استعراض الصفحة

الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!

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

web

الدرس الثالث: العناصر والوسوم

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.

"وسوم"؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.

كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".

بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.

لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

هل يمكنك أن تريني بعض الأمثلة؟

حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)

المثال 1:

العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

مثال 2:

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: <br />.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>، <html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.

أين أضع كل هذه الوسوم؟

أكتب الوسوم في وثيقة HTML، المواقع تحوي وثيقة HTML أو أكثر، عندما تتصفح شبكة الويب أنت فقط تقوم بفتح وثائق HTML مختلفة.

إذا انتقلت إلى الدرس اللاحق ستتمكن من إنشاء موقعك خلال عشر دقائق.

web

الدرس الثاني: ما هي HTML؟

هذا الدرس سيعطيك مقدمة قصيرة عن صديقك الجديد، HTML.

ما هي HTML

HTML هي اللغة الأم لمتصفحك.

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

HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "View" ثم المصدر "Source".

استعرض المصدر

لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.

ما فائدة HTML؟

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

HTML تستخدم لإنشاء المواقع، هذا كل شيء ببساطة!

حسناً، ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في هذه المرحلة لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.

Text تعني النص، وهذه تشرح نفسها.

Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.

Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.

في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.

الآن أنت تعرف ماذا تعني HTML وXHTML، لنبدأ مع ما يهمنا هنا: إنشاء المواقع.

web

الدرس الأول: لنبدأ

في الدرس لأول سنتحدث بشكل مختصر عن الأدوات التي تحتاجها لإنشاء موقعك.

ما الذي تحتاجه؟

في الغالب أنت تملك كل الأدوات التي تحتاجها.

لديك "متصفح"، وهو البرنامج الذي يمكنك من تصفح المواقع والتجول فيها، الآن أنت تنظر إلى هذه الصفحة من خلال متصفحك.

ليس مهماً أي متصفح تستخدم، المتصفح الأكثر انتشاراً هو مايكروسوفت إنترنت إكسبلورر، لكن هناك متصفحات أخرى مثل أوبيرا وموزيلا فايرفوكس وكلها قابلة للاستخدام.

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

بدلاً من ذلك ستحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوز يمكنك أن تستخدم المفكرة "Notepad" والذي يمكنك أن تجده في قائمة إبدأ "start" ثم قائمة البرامج "Program" ثم في قائمة الأدوات "Accessories":

كيف تجد برنامج المفكرة

إذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيل الأخرى، فمثلاً لينكس يحوي برنامج بيكو "Pico" ونظام ماك يحوي برنامج TextEdit.

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

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

هل أحتاج بأن أكون على اتصال بالشبكة؟

لا تحتاج إلى اتصال بالشبكة سواء عند قراءتك لهذا الدرس أو عند إنشاء موقعك.

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

ماذا بعد ذلك؟

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

web

مقدمة - درس HTML

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

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

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

لا يمكن لهذا الدرس أن يعلمك كل شيء، لذلك لا بد أن تجرب بنفسك وتثابر على التعلم، لكن لا تقلق، تعلم تطوير المواقع ممتع ويعطيك شعوراً بالرضى عندما تتعلمه بشكل صحيح.

كيف ستسخدم هذا الدرس؟ هذا أمر يعود لك، لكننا نقترح عليك أن تقرأ جزئين أو ثلاثة من هذا الدرس في اليوم وتخصص وقتاً للتجارب مع الأشياء الجديدة التي تعلمتها في كل جزء.

حسناً، لنبدأ في التعلم!

web

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

3tophost.ch

» 300 Megs of Web Space

» 10420 Megs of Transfer

» FTP Access

» CPANEL

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

املىء البيانات بالطريقة الموضحة فى الصورة

اضغط على الرابط الموضح فى الصورة

هذه اخر خطوة فى التسجيل

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

web

بسم الله الرحمن الرحيم .

الداتا سنتر :

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

س : هل يمكن أن تكون الداتا سنتر أقل من هذا العدد ؟

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

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

========================

السيرفرات :

طبعا كما هو معروف أن السيرفرات الموجودة لدينا نوعين (الويندوز ) و ( ليونيكس )

والاختلاف في برامج التشغيل والتنصيب والبرامج التي يمكن أن تعمل على هذا السيرفر .

مثال بسيط :

المنتديات Forums يلزمها نظام يدعم ال PHP وهنا يجب أن يكون السيرفر تحت نظام ليونيكس
الموضوع الأصلى من هنا: موقع ومنتديات بركه سوفت التقنية BarakaSoft http://www.barakasoft.com/vb/showthread.php?p=6212

نظام الدردشة الكتابية أو الصوتية يلزمها نظام aspx وهنا السيرفر يكون بنظام Windows .

ما هو السيرفر ؟

السيرفر هو جهاز ذو معالج أو أكثر وسعة تخزين كبيرة تبدأ غالبا من 80 جيجا بايت ورام تبدأ من 1 جيجا بايت يتم عليه استضافة المواقع والبرامج .

ما هو وجه اختلاف السيرفرات ؟

نعم يختلف السيرفر حسب المعالج cpu من سيرفر لآخر حسب الاستخدام والغاية من السيرفر ، وأيضا تعتمد الجودة على عدد المواقع المستضافة ومعدل إشغال الموقع ، والرام ، وسرعة خط الوصول إلى الإنترنت والأهم نوع المعالج وعددها .

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

سيرفر ال VPS :

س : أسمع عن سيرفرات ال VPS ما هي ؟؟

ج : سيرفر ال VPS هو سيرفر يكون جزء من سيرفر كبير مثل السيرفر في الرد السابق

أو virtual private server أو كما يقال سيرفر افتراضي .

ويقسم إلى نوعين هم :

1- سيرفر VPS قائم على الأجزاء الغير ملموسة : وهو النوع الذي يتعامل به غالبية موزعي السيرفرات الافتراضية ، بمعنى آخر هو السيرفر الذي يشترك في كافة الأجزاء للسيرفر الرئيسي لكن لا يستطيع الولوج إلى كافة أجزاء السيرفر مثل الرام أو وحدات التخزين لكن يملك نسبة 90 % تقريبا من خصائص السيرفر الكامل .

معلومة أكبر شوي ، السيرفر الرئيسي ذو معالج 2.4 ورام 2 جيجا وتخزين 250 جيجا ، السيرفر الافتراضي يكون 1.1 ورام 1 جيجا ومساحة تخزينية 40 جيجا ، هنا نلاحظ الإختلاف في التوزيع لموارد السيرفر الرئيسي .

س : أملك سيرفر كبير هل أستطيع توزيع سيرفر VPS حسب الأعلى ؟

ج : نعم ، لكن يتوجب عليك ترخيص برنامج خاص لعمل السيرفرات الافتراضية من الرابط التالي :
الموضوع الأصلى من هنا: موقع ومنتديات بركه سوفت التقنية BarakaSoft http://www.barakasoft.com/vb/showthread.php?p=6212

[عزيزي الزائر يتوجب عليك التسجيل للمشاهدة الرابطللتسجيل اضغط هنا]

وبعد ذلك هناك طرق لإعداد هذا السيرفر الإفتراضي .

2- سيرفر VPS قائم على الأجزاء الملموسة : عند التركيب يتم تركيب كل سيرفر بشكل مستقل في السيرفر الكبير (رام ومعالج وهارد ) مستقل . لا يفضله الأغلبية للمشاكل المحتملة منه .

وكمثال على هذا النوع : Microsoft Virtual Server .

الهدف من هذا السيرفر القدرة على توزيع المساحات والريسلر مع خواص وقدرات مميزة .

الماستر ريسلر

الماستر ريسلر هو مساحة على السيرفر الرئيسي أو السيرفر الافتراضي تمتلك خاصية مميزة وهي إعطاء ريسلر آخر من الريسلر الرئيسي .

أنت كمالك للماستر ريسلر تملك القدرة على توزيع ريسلرات ومساحات صغيره كذلك من هذا الحساب.

س : أملك سيرفر كيف أقدر أوزع ماستر ريسلر ؟

ج : يتوجب عليك تنزيل وتسطيب برنامج خاص يقوم بإعطاء هذه الميزة لمالك الماستر ريسلر .

=============================

الريسلر :

الريسلر من إسمه وهو الموزع . أي أنه الوسيط بين السيرفر وعميل الإستضافة .

صلاحيات الريسلر محدودة وهي توزيع المساحات للعملاء أو له فقط . لا يملك الدخول على السيرفر أو سيرفر الVPS . وهناك أحيانا حسب ما {ايت يتم إعطائه صلاحيات كبيرة لا أدري بسببها ... :crazy:

بالنسبة لأداء الريسلر فهو يعتمد على مواصفات وجودة سيرفر VPS المرتبط به أو السيرفر الرئيسي . وتختلف صلاحيات الريسلر من شركة لأخرى .

الإستضافة المشتركة ( مساحة لموقع واحد فقط )

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

وتختلف الصلاحيات من سيرفر لأخر .

وهناك ما يسمى الإستضافة الخاصة

وهي عدد من المواقع محددة بين ال 10 إلى ال 30 موقع على سيرفر واحد بهدف تخفيف الضغط على السيرفر وبالتالي إعطاء سرعة التصفح وسرعة للمعلومات من السيرفر ، وبالعادة تعطى للموقع ذات الحمل الزائد load . بدلا من سيرفر خاص للموقع .

copy

web

السلام عليكم ورحمة الله وبركاته

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

1 - عنوان بروتوكول الأنترنت IP

إذا كانت الضغطات تأتي من نفس IP الذي يتم الدخول منه على حساب ادسنس ، تتم مراقبتك .

2 - نسبة الضغطات CTR

عادة نسبتها لا يجب أن تتجاوز 10 بالمائة ، و إلا سوف تتم مراقبتك ، فالنسبة يجب أن تكون بين 0.5 و10 % .

3 - المكان الجغرافي

لدى google برامج وتكنولوجيا متطورة تمكنها من تحديد مصدر الزوار لموقعك ، لذلك فإستعمال حواسيب متعددة بIP مختلف ، مثال الضغط على الإعلانات في مقاهي الأنترنت في منطقتك ، سوف يؤدي إلى طردك مباشرة ولن تتمكن من المشاركة مرة أخرى .

4 - ال****ز

لا يتم الإتصال بالإنترنت من المنزل بنفس IP ، فبمجرد أن تعيد الإتصال تحصل على IP مختلف ، ولكن تذكر أن google لديها ****ز في حاسوبك ، بذلك تستطيع أن تحدد إن كان نفس الحاسوب .

5 - منوال الضغط 1

أن يتم الضغط على الإعلانات ومن تم مغادرة الموقع بشكل مباشر يعتبر أمرا مريبا ، لأن الزائر للموقع يقوم بتصفحه أولا ومن تم يضغط على الإعلان الذي يهمه .

6 - منوال الضغط 2

لماذا صاحب هذا IP يضغط على الإعلانات في هذا الموقع ولا يضغط على الإعلانات في المواقع الأخرى ؟

7 - منوال الضغط 3

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

8 - خدمات google الأخرى

يقدم google خدمات متعددة – بعيدا عن ادسنس - ، لذلك لا تعتقد أنك في مأمن لمجرد أنك لا تدخل على حساب ادسنس من مقهى الأنترنت ومن تم تضغط على إعلاناتك . هذه بعض الخدمات التابعة لgoogle : بريد Gmail ، Google Earth ، Google Calendar ، Google Search ، Google Toolbar ، Google Talk ، Google Sitemap ، Google Desktop ، Blogger ، أو حتى Youtube .

9 - تصنيف محرك البحث

زوار موقعك كثر، ويقومون بالضغط على الإعلانات بشكل دوري ، و موقعك ليس مفهرسا في أي محرك بحث ولا في أي موقع مميز، كيف يمكن ذلك ؟ هذا يعتبر أمرا مريبا .

10 - تصميم الموقع

عبارة " رجاءا إضغط على الإعلانات " أو " ساعدنا بالضغط على الإعلانات " هذا النوع من التشجيعات يعتبر مخالفا لشروط إستخدام ادسنس ، و google تستطيع إستخدام محركات البحث المتطورة لإكتشافها بل وحتى الدخول المباشر على الموقع من طرف مراقبي ادسنس بشكل دوري .

11 - نسبة تحويل المعلنين

الضغط على الإعلانات شيء جيد لكن هل يعود بالفائدة على المعلنين ، إذا لم يكن كذلك فأنت في ورطة

web

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

أشرح طريقة تركيب خدمة الـ RSS في المنتدى

أتمنى ان ينال الشرح اعجابكم

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

الناشر الاكتروني او الناشر الالي او العضو الالي او اي اسم يحلو لك.

وضيفته هو جلب الاخبار وانزالها كمواضيع في منتداك من مواقع انت تختارها..

خدمة rss

هذي خدمه تقدمها مواقع كثيره مجانا مثل الجزيره والعربيه و الياهو والـ BBC والعديد من المواقع الاخباريه
الخدمه عبار عن جالب لاخبار المواقع وتستطيع ان تستخدمها في منتداك عضو الي يضيف الاخبار كأنه موضوع لحاله او بموافقتك...ولك الحريه في الخيار

طريقة استخدام خاصية rss في منتداك

أولا : ادخل الى لوحة تحكم الإدارة > خيارات المنتدى > خيارات المنتدى > مجهز البيانات الخارجي

كما في الصورة

ثانيا : بعد الانتهاء من تفعيل الخاصيه اذهب الى تغذية RSS >> اضف تغذية RSS جديده

ثالثاً : وهذي صوره لطريقة الاضافه..اختار مايناسبك من خيارات..مثلا ردود الاعضاء او الابتسامات اوغيرها

الان نعمل حفظ بعد الانتهاء من الخيارات

رابعا : بعد الانتهاء من الخيارات واضافة مايحلو لكم من المواقع..نذهب التحكم بتغذية RSS

ونضغط على شغل مهام الجدوله الان

اخيرا : اذهب الى منتداك وشوف النتيجه

والسلام عليكم ورحمة الله وبركاته

web

شرح عام:

ما هي خدمة RSS؟
كيف يمكنني الاستفادة من خدمة RSS؟
كيف أحصل على برنامج News Reader؟
كيف يمكنني الاشتراك في خدمة RSS من بي بي سي؟
استخدام أخبار بي بي سي التي تبث باستخدام خدمة RSS على موقعك

ما هي خدمة RSS؟

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

وتقدم لك بي بي سي العربية خدمة RSS لأغلب صفحات الموقع مثل: أخبار العالم، والاقتصاد والأعمال، إلخ.

كيف يمكنني الاستفادة من خدمة RSS؟

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

وبعد الحصول على برنامج News Reader لا يتبقى سوى تحديد
المواقع والصفحات التي تريد الحصول منها على خدمة RSS. وعلى
سبيل المثال يمكنك أن تختار الحصول على آخر أخبار صفحة الشرق
الأوسط من بي بي سي العربية.

كيف أحصل على برنامج News Reader؟

هناك نسخ عديدة من برنامج News Reader متاحة على شبكة الإنترنت. ولتنزيل إحداها على جهازك، اضغط على الوصلات المقترحة والموجودة على يسار الصفحة.

لاحظ أنه يجب عليك اختيار برامج News Reader التي تناسب نظام
التشغيل المستخدم في جهاز الكمبيوتر الخاص بك (نظام ويندوز أو ماك).

الوصلات الثلاث الأولى المقترحة (على يسار الصفحة) تناسب نظام ويندوز، أما الوصلة الأخيرة فهي لنظام ماك.

كيف يمكنني الاشتراك في خدمة RSS من بي بي سي؟

اختر الصفحة التي تريد الحصول على آخر الأخبار الواردة بها
كصفحة أخبار العالم مثلاً على موقع bbcarabic.com. اضغط على
وصلة "خدمة RSS" الموجودة على الشريط الأزرق في أسفل الصفحة.

عليك بعد ذلك اتباع تعليمات استخدام برنامج News Reader وذلك
لإضافة الصفحات المختارة لقائمة RSS الخاصة بك لتبدأ استقبال
ما يطلق عليه إرسال XML لكل من تلك الصفحات.

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

نحن نشجع استخدام خدمة بث RSS لعرض أخبار بي بي سي

لشروط وبنود الاستخدام.

لكن ذلك يستلزم عرض محتويات ومواد بي بي سي أن تنسب هذه المواد لبي بي سي وأن تعرض بشكل مناسب. ويجب أن يشار إلى أن هذه محتويات بي بي سي كالتالي "أخبار بي بي سي" أو "من موقع بي بي سي الإخباري". ولا يحق لك استخدام أي شعار لبي بي سي أو أي علامة تجارية أخرى لبي بي سي.

نحن نحتفظ بحقنا في وقف توزيع محتويات موقع بي بي سي الإخباري. لمزيد من التعليمات، فضلا اقرأ شروط وبنود الاستخدام.

لا تقبل بي بي سي أية مسؤولية قانونية عن استخدام خدمات بث RSS الخاصة بها. لمزيد من التفاصيل، فضلا راجع شروط وبنود الاستخدام.

القائمة الموجود في أسفل الصفحة هي لمجموعة مختارة من صفحاتنا
التي تقدم لك خدمة RSS.

web

اولا ادخل من هنا

ثم اتبع الصور

هذه الصورة تم اعادة تحجيمها اضغط على الشريط الاصفر للحصول على الحجم الاصلي

الأحد، 12 يوليو 2009

الثلاثاء، 30 يونيو 2009

الأحد، 28 يونيو 2009

الدرس الثاني عشر: التصميم (CSS)

بالتأكيد، لكن كيف؟

يبدو أن هذا يحتاج إلى الكثير من العمل؟

ماذا يمكن أن أفعل أيضاً في CSS؟

هل CSS مجرد ألوان وخطوط؟

جميل، لكن هل هي سهلة؟

الدرس الحادي عشر: المزيد حول الجداول

ماذا بقي إذاً؟

ما هي خاصية rowspan؟

الدرس العاشر: الجداول

هل هي صعبة؟

ما الفرق بين <tr> و<td>؟

هل هناك أية خصائص للجداول؟

المزيد من الخصائص

ماذا يمكن أن أضع في الجداول؟

الدرس التاسع: الصور

هذا يبدو كتحد...

من أين آتي بالصور؟

هل هذا كل ما أحتاجه لمعرفته حول الصور؟

هل هناك أية خصائص يجب أن أعرفها؟

الدرس الثامن: الروابط

ما الذي أحتاجه لإنشاء رابط؟

مثال 1:

ماذا عن الروابط بين الصفحات في موقعي؟

مثال 2:

مثال 3:

مثال 4:

ماذا عن الروابط الداخلية في نفس الصفحة؟

مثال 5:

Heading 1

Heading 2

هل يمكن أن أضع رابطاً لأي شيء آخر؟

مثال 6:

هل هناك خصائص أخرى يجب علي أن أعرفها؟

مثال 7:

الدرس السابع: الخصائص

ما هي الخاصية؟

كيف أصبحت الصفحة حمراء؟

أي العناصر تستطيع استخدام الخصائص؟

ما هي مكونات العناصر؟

الدرس السادس: المزيد من العناصر

ما التالي؟

هل أستطيع استخدام عدة عناصر في نفس الوقت؟

المزيد من العناصر!

هل هذا كل شيء؟

الدرس الخامس: ماذا تعلمنا؟

ماذا يعني هذا؟

ما التالي؟

السبت، 27 يونيو 2009

الدرس الرابع: إنشاء موقعك الأول

كيف؟

ماذا أفعل؟

جميل, لكن كيف أضيف المحتويات للموقع؟

الدرس الثالث: العناصر والوسوم

"وسوم"؟

هل يمكنك أن تريني بعض الأمثلة؟

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

أين أضع كل هذه الوسوم؟

الدرس الثاني: ما هي HTML؟

ما هي HTML

ما فائدة HTML؟

حسناً، ماذا تعني H-T-M-L؟

الدرس الأول: لنبدأ

ما الذي تحتاجه؟

هل أحتاج بأن أكون على اتصال بالشبكة؟

ماذا بعد ذلك؟

مقدمة - درس HTML

الثلاثاء، 23 يونيو 2009

المقالات مصنفة في مجموعات

أرشيف المدونة الإلكترونية

المتابعون

ما الفرق بين `<tr>` و`<td>`؟