حياة الفتح
’,، أهلاً .. وسهلاً .. ,’،

,’، (( اسم العضو )) ,’،

,’، نحن سعداء بتشريفك لمنتدانا
’,، فأهلاً بك عطْراً فوَّاحاً ينثرُ شذاه في كلِّ الأَرجاء ,’،
,’، وأهلاً بك قلماً راقياً وفكراً واعياً نشتاقُ لنزفه ’,،
’,، وكلنا أملٌ بأن تجد هنا ,’،
,’، مايسعدك ويطَيِّب خاطرك ’,،
’,، فِي إنْتظَارِ هطولِ سحابة إبداعك ,’،
,’، نتمنى لَك التوفيق ومزيداً من التوهج ’,،
’,، تَحيّاتِي وَتَقْديرِي ,’،
حياة الفتح
’,، أهلاً .. وسهلاً .. ,’،

,’، (( اسم العضو )) ,’،

,’، نحن سعداء بتشريفك لمنتدانا
’,، فأهلاً بك عطْراً فوَّاحاً ينثرُ شذاه في كلِّ الأَرجاء ,’،
,’، وأهلاً بك قلماً راقياً وفكراً واعياً نشتاقُ لنزفه ’,،
’,، وكلنا أملٌ بأن تجد هنا ,’،
,’، مايسعدك ويطَيِّب خاطرك ’,،
’,، فِي إنْتظَارِ هطولِ سحابة إبداعك ,’،
,’، نتمنى لَك التوفيق ومزيداً من التوهج ’,،
’,، تَحيّاتِي وَتَقْديرِي ,’،
حياة الفتح
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

حياة الفتح

حياة الفتح في فلسطين والظل العربية
 
الرئيسيةأحدث الصورالتسجيلمرحبا بك  من جديد في منتدى الفتحتسجيل دخول

 

 لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي

اذهب الى الأسفل 
كاتب الموضوعرسالة
الصاعقة
المراقب العام
المراقب العام
الصاعقة


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:27 am

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:29 am

مقدمة - درس HTML

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:31 am

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

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

في الغالب أنت تملك كل الأدوات التي تحتاجها.لديك "متصفح"، وهو البرنامج الذي يمكنك من تصفح المواقع والتجول فيها، الآن أنت تنظر إلى هذه الصفحة من خلال متصفحك.ليس مهماً أي متصفح تستخدم، المتصفح الأكثر انتشاراً هو مايكروسوفتإنترنت إكسبلورر، لكن هناك متصفحات أخرى مثل أوبيرا وموزيلا فايرفوكسوكلها قابلة للاستخدام.ربما سمعت أو حتى استخدمت برامج مثل مايكروسوفت فرونت بيج أوماكروميديا دريمويفر أو حتى مايكروسوفت وورد، هذه البرامج تستطيع - أوتدعي أنها تستطيع - إنشاء المواقع لك، انسى هذه البرامج الآن! لأنها لنتساعدك على تعلم كيفية كتابة صفحات موقعك.بدلاً من ذلك ستحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوزيمكنك أن تستخدم المفكرة "Notepad" والذي يمكنك أن تجده في قائمة إبدأ"start" ثم قائمة البرامج "Program" ثم في قائمة الأدوات "Accessories":لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Notepadإذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيلالأخرى، فمثلاً لينكس يحوي برنامج بيكو "Pico" ونظام ماك يحوي برنامجTextEdit.برنامج المفكرة هو محرر نصي بسيط جداً وهو مناسب جداً لكتابة الصفحاتلأنه لا يتدخل عند كتابتك لأي شيء ويعطيك تحكماً كاملاً، المشكلة فيالعديد من البرامج التي تدعي أنها تقوم بإنشاء المواقع هو أنه تحوي العديدمن الخصائص القياسية التي يمكنك أن تختار من بينها، المشكلة في هذاالأسلوب أن كل شيء يجب أن يتناسب مع هذه الخصائص، لذلك هذه البرامج لايمكنها أن تقوم بإنشاء المواقع تماماً كما تدري، أو أنها تغير الأوامرالتي كتبتها بنفسك، مع برنامج المفكرة أو أي محرر نصي بسيط يمكنك أن توجهالشكر لنفسك على أي نجاح أو أية أخطاء.متصفح وبرنامج المفكرة أو أي محرر نصي بسيط، هذا كل ما تحتاجه لكي تكمل الدرس وتقوم بإنشاء موقعك.هل أحتاج بأن أكون على اتصال بالشبكة؟

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

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:32 am

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

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

HTML هي اللغة الأم لمتصفحك.لكي نختصر القصة، HTML اخترعت في عام 1990م من قبل عالم يسمى تيمبيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعاتمختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرزلي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم.HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكةإنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامرHTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "View" ثمالمصدر "Source".لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Viewsourceلمن لم يعتد على رؤية هذه الأوامر، 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 HyperTextMark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML. الآن أنت تعرف ماذا تعني HTML وXHTML، لنبدأ مع ما يهمنا هنا: إنشاء المواقع.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الصاعقة
المراقب العام
المراقب العام
الصاعقة


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:35 am

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

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

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

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:38 am

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

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

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

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











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

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


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

مرحى! هذا هو موقعي الأول.




الحرف p في

هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.صفحة HTML يجب أن تكون لديك بالشكل التالي:



موقعي الأول



مرحى! هذا هو موقعي الأول.







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

  • في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
  • اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
  • احفظالصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملفهو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجةمتماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ماتشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمتتتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.
لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Saveasالآن إذهب إلى متصفحك:

  • في القائمة العلوية اختر "Open" من قائمة "File".
  • إضغط على "Browse" في النافذة التي ستظهر لك.
  • إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Openالآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرسالثالث عشر وتتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، خلافاً لذلكاصبر وأكمل قراءة الدروس
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الصاعقة
المراقب العام
المراقب العام
الصاعقة


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:39 am

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

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











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

Is used for paragraphs.


Emphasis text.

Heading


Subhead


Sub-subhead




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

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

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:40 am

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

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



My website



A Heading


text, text text, text


Subhead


text, text text, text







ما التالي؟

حان الوقت الآن لتعلم سبعة عناصر جديدة.بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية ووسم الإغلاق , يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية ووسم الإغلاق .مثال 1:
This should be stronger emphasis.


سيظهر بهذا الشكل في المتصفح:This should be stronger emphasis.
بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:مثال 2:
This should be in small.


سيظهر بهذا الشكل في متصفحكThis should be in small.
هل أستطيع استخدام عدة عناصر في نفس الوقت؟

بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:مثال 3:إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:
Emphasised small text


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


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

كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم
الذي يجبر النص على الظهور في سطر جديد:مثال 4:
Some text
and some more text in a new line


سيظهر بهذا الشكل في متصفحكSome text
and some more text in a new line
لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته:
.عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو
الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule":مثال 5:




:سيظهر بهذا الشكل في متصفحك
هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:مثال 7:

  • A list item

  • Another list item




سيظهر بهذا الشكل في متصفحك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الصاعقة
المراقب العام
المراقب العام
الصاعقة


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:41 am

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

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

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

My friendship with HTML




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











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

في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة:أبيض: #ffffff
أسود: #000000
أحمر: #ff0000
أزرق: #0000ff
أخضر: #00ff00
أصفر: #ffff00نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أوأحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشيرأي رقم، ولكي نبسط الأمر عليك، قمنا بعمل ملف يحوي 216 لون وهي من أكثرالألوان استعمالاً: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط].بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.مثال 3:



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

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

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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:41 am

????? ??????: ???????

?? ??? ????? ?????? ??? ???? ?????? ???? ??? ??????.?? ???? ?????? ?????? ?????

?????? ???? ??????? ?? ??????? ?????? ???? ????? HTML: ????? ???? ???? ?? ????? ????? ??????? ?? ????? ???? ??? ??? ??? ???? ???? ??? ?????? ????? ????? HTML.net ???? ????? ????:???? 1:


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


????? ?? ??????? ???? ?????:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
?????? a ?? ?????? "anchor" ???????? href ?? ?????? "hypertext reference"? ??? ???? ???? ??? ??? ????? ??????? ?????? ????? ?? ???????? ?? ??? ??? ??.?? ?????? ????? ??????? href ???? ??????"http://www.html.net"? ??? ??????? ?????? ????? HTML.net ????? ???????URL ??? ?????? "Uniform Resource Locator"? ???? ?? "http://"??? ?? ???? ?? ?? ?????? ??? ?????? "Here is a link to HTML.net" ??????? ???? ????? ?? ??????? ??? ??? ????? ???? ?? ???? ?????? ?????????? ??????? .???? ?? ??????? ??? ??????? ?? ??????

??? ???? ????? ???? ??? ?????? ?? ??? ?????? ??? ????? ??? ?? ??????? ??????? ??????? ?????? ??? ??? ?????? ?????? ???????? page1.htm?page2.htm ???? ??????? ?? ??? ?????? ?????? ?? ???? ?? ???? ??? ?????????? ??? ????? ?? ??????? ?????? ???? ?? ???? page1.htm ???? ???page2.htm ????? ???? ?????:???? 2:


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


??? ???? ?????? 2 ???? ?? ???? ???? ?????? "subfolder" ??????? ????? ???? ?????:???? 3:


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


?? ????? ?? ??? ?????? ??????? ?? ?????? 2 ?? ?????? ?????? ??? ?????? 1 ????? ??? ?????? ????:???? 4:


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


"../../".?? ???? ??? ??????? ??????? ?????? ?? ???? ??????? ?????? ????? ??? ???? ??? ?????? ??????.???? ?? ??????? ???????? ?? ??? ???????

??????? ????? ????? ?????? ??? ??????? ?????? ????? ????? ?????????????? ???? ?????? ????? ????? ???? ??? ?? ??? ?? ??????? ?? ???????? ?? ????? ???? id ?? "identification" ???????? "#".?????? ????? id ???? ????? ?????? ???? ???? ??? ???? ??? ????:

heading 1




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


?? ??? ????? ?? ??? ??????:???? 5:









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


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



heading 1


Text text text text



heading 2


Text text text text








????? ???? ????? ?? ??????? (??? ?? ???? ??? ????????):[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]Heading 1

Text text text textHeading 2

Text text text text
??????: ???? ??????? id ??? ?? ???? ???? ???? ????. ?? ???? ?? ??? ?????? ??? ??? ????

??????? ????? ?? ??? ????? ??????? ???? ????????? ????? ??? ??? ?????? ?????? ?????? ??? ???? ????? ????:???? 6:


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


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

?????? ???? ??????? ?????? ??????? href ???????? ??? ??? ??????? ?? ??? ????? title ??????:???? 7:


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


????? ???? ????? ?? ???????:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
????? title ?????? ???? ??? ???? ?? ??????? ??? ???? ???? ?????? ????????? ??? ?? ???? ???? ???? ???? ???? ????? ?? ????? title ???? ??.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الصاعقة
المراقب العام
المراقب العام
الصاعقة


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:42 am

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

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

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


ستظهر بهذا الشكل في متصفحك:لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  David
كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، (img) وموقعها (src, هو اختصار "source")، هل فهمت ذلك؟لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل
لا يرتبط بنص معين."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، حيث يمكنها أن تحوي ملايين الصور وتقوم بضغطها بشكل فعال.من أين آتي بالصور؟

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

  1. إضغط بالزر الأيمن على أي صورة في أي موقع.
  2. اختر "Save picture as..." في القائمة التي ستظهر لك.
  3. اختر مكان حفظ الصورة في حاسوبك واضغط على "Save".
إفعل هذا للصورة أدناه، قم بحفظها في حاسوبك في نفس مكان ملفات HTML التي قمت بإنشاءها، لاحظ أن الشعار حفظ بصيغة PNG:لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Logo الآن يمكنك وضع الصورة في إحدة صفحاتك، جرب بنفسك. هل هذا كل ما أحتاجه لمعرفته حول الصور؟

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



مثال 3:



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




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

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


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



سيظهر بهذا الشكل في متصفحك لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Logo
إذا وضعت مؤشر الفأرة بدون أن تنقر على الصورة سترى النص "Learn HTML from HTML.net" يظهر لك في مربع صغير.هناك خاصيتان مهمتان وهما width وheight:مثال 7:



سيظهر بهذا الشكل في متصفحكلتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Logo
الخاصية width وheight يمكن استخدامهالتحديد طول وعرض الصورة، القيمة التي توضع للطول والعرض تقاس بالبكسل،والبكسل هو وحدة قياس دقة الشاشة، معظم الشاشات لها دقة 1024×768، وعلىعكس مقياس السنتميتر، البكسل يختلف حجمه بحسب دقة الشاشة، فمستخدم لديهشاشة ذات دقة عالية قد يكون السنتميتر يساوي في شاشته 25 بكسل، لكن فيشاشة أخرى قد تساوي 1.5 سنتميتر.إذا لم تضع مقياساً للعرض والطول فالصورة ستوضع بمقياسها، لكن بالخاصيتين يمكن التلاعب بحجم الصورة:مثال 8:



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


عدد الرسائل : 971
العمر : 36
سمعاتك وشهرتك : 9
تاريخ التسجيل : 11/05/2009

تسميتك
مجموعة كل فلسطيني :

لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
و تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
  • مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:43 am

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

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

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









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


    سيظهر بهذا الشكل في متصفحك
    خلية 1 خلية 2
    خلية 3 خلية 4
    ما الفرق بين
    ؟

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

    • وسم البداية ووسم الإغلاق
      يبدأ من بينهما الجدول وينتهي، منطقي.
    هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.
    هذا ما يحدث في المثال الأول، الجدول يبدأ بوسم ، يتبعه وسم الذي يدل على بداية صف جديد، وهناك خليتان في هذا السطر: و، ثم نغلق الصف بوسم الإغلاق ونبدأ آخر الذي يحوي أيضاً خليتين، ثم نغلق الجدول
    خلية 1خلية 2
    .فقط لنوضح الأمر أكثر: الصفوف تظهر بشكل خط أفقي من الخلايا، والأعمدة على شكل خط رأسي من الخلايا:
    خلية 1 خلية 2
    خلية 3 خلية 4
    خلية 1و خلية 2 تشكلان صفاً، خلية 1 وخلية 3 تشكلان عموداً في المثال أعلاه الحدول يحوي صفين وعمودين، ويمكن للجدول أن يحوي عدداً لا نهائياً من الصفوف والأعمدة.مثال 2:



















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


    سيظهر بهذا الشكل في متصفحك
    خلية 1 خلية 2 خلية 3 خلية 4
    خلية 5 خلية 6 خلية 7 خلية 8
    خلية 9 خلية 10 خلية 11 خلية 12
    هل هناك أية خصائص للجداول؟

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









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


    سيظهر بهذا الشكل في متصفحك
    خلية 1 خلية 2
    خلية 3 خلية 4
    سمك إطار الجدول يحدد بمقياس البكسل ([ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط])وكما هو الحال مع الصور، يمكنك أن تحدد عرض الجدول بالكبسل أو بالنسبة المؤية لمقياس الشاشة:مثال 4:



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

    هناك خصائص كثيرة للجداول، هذان اثنان منها:

    • align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
    • يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.
    مثال 5:



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

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


    عدد الرسائل : 971
    العمر : 36
    سمعاتك وشهرتك : 9
    تاريخ التسجيل : 11/05/2009

    تسميتك
    مجموعة كل فلسطيني :

    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Empty
    مُساهمةموضوع: رد: لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي    لتعلم لغة  دروس حول HTML وCSS و إنشاء موقعك الشخصي  Emptyالسبت سبتمبر 11, 2010 11:44 am

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

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

    خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة.Colspan هي اختصار "column span"، Colspan تستخدم في الوسم
    لتحدد عدد الأعمدة التي ستتمدد لها الخلية:مثال 1:









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


    سيظهر بهذا الشكل في متصفحك
    خلية 1
    خلية 2 خلية 3 خلية 4
    بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساويةمثال 2:










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


    سيظهر بهذا الشكل في متصفحك
    خلية 1 خلية 2
    خلية 3 خلية 4 خلية 5
    ما هي خاصية rowspan؟

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











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


    سيظهر بهذا الشكل في متصفحك
    خلية 1 خلية 2
    خلية 3
    خلية 4
    في المثال أعلاه أعطينا الخاصية rowspan القيمة "3"للخلية 1، هذا يعني أن الخلية يجب أن تتمدد فوق ثلاث صفوف، الصف الذي تقعفيه الخلية مع صفين آخرين أسفلها، الخلية 1 والخلية2 التان تقعان في نفسالصف، بينما الخلية 3 والخلية أربع تشكلان صفين منفصلين.هل تشعر بالحيرة؟ حسناً، الأمر ليس معقداً لكن من السهل أن تضيع فيالتفاصيل في بعض الأحيان، لذلك من الأفضل أن ترسم الجدول أولاً على الورققبل أن تطبقه على HTML.ربما لا تشعر بالحيرة، إذا قم بإنشاء جدولين واستخدام كل من colspan وrowspan بنفسك.
    الرجوع الى أعلى الصفحة اذهب الى الأسفل
     
    لتعلم لغة دروس حول HTML وCSS و إنشاء موقعك الشخصي
    الرجوع الى أعلى الصفحة 
    صفحة 1 من اصل 1
     مواضيع مماثلة
    -
    » أقوى أسطوآنة دروس عربية لتعلم الهكر وأختراق المواقع والأجهزة احترآف
    » كود اشهار موقعك
    »  كود نشرة أخبار موقعك
    »  اقوى الاسطوانات لتعلم الهكر
    » أقوى برنامج لتعلم اللغة الإنجليزية بشهر واحد فقط

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