romaissa
10-19-2013, بتوقيت غرينيتش 08:02 PM
موضوع مقدم من منتديات ديزاد
منتديات ديزاد باتنة (http://www.dzbatna.com/vb)
بسم الله الرحمن الرحيـم
سنبـدأ هـذه الدروس لما لهـا من فائـده كبيــره .. وأنا بصــراحـه هذي الدروس درس مفصلـتها قبــل كــذا واستفــدت منهــا وحبيـت أنكم تستفيــدون منهــا وستكون الدروس على النحو التالي
1-مقدمة
2-الخطوط والألوان
3-الصور 2014
4-تنظيم المحتوى
5-النماذج
6-أمور إضافية
أولاً:
مقدمة
تكتب ملفات HTML في صور 2014ة ملفات نصوص بسيطة (Plain ****)، تأخذ الإمتداد عادة، وتكتب في أي تحميل برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم Simple****، جميع هذه الأحدث برامج مناسبة جدا لعمل صفحات HTML.
الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت، ولن يكون أكثر من Internet Explorer أو Netscape Navigator أو الأثنين معا، وبما أنك الآن تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا، ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابها، ولأن المتصفحات تختلف من نوع إلى آخر لذا يفضل أن تقوم بمعاينة صفحتك بجميع المتصفحات الموجودة وتتأكد من أنها تظهر بشكل سليم في جميع المتصفحات، لأن الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أن الجمهور يستطيع رؤية الصفحة بمتصفحه أيا كان.
المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولا، ودعمها لآخر التقنيات ثانيا، يقدم متصفح Internet Explorer من Microsoft دعما رائعا للغة العربية، ولآخر تقنيات الويب مثل HTML 4.0 و CSS و XML وغيرها، وأما متصفح Netscape Navigator فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى تحميل برنامج Sindbad من شركة صخر، وفي كل الأحوال يظل متصفح Netscape Navigator متصفحا متعبا في التصميم، لهذه الأسباب جميعا اعتمدنا متصفح Internet Explorer 5.0 كمتصفح قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.
ملحوظةآخر إصدارة من متصفح Netscape Navigator هي الإصدارة 4.72 وآخر إصدارة من تحميل برنامج Sindbad هي 4.51 وقد توقفت شركة صخر عن تعريب Navigator في الآونة الأخيرة لأسباب لا أعرفها
بعد كل هذا .. لغة HTML لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية، جميع الصفحات العالمية متقنة التصميم تم إعدادها باستخدام لغة HTML، تتميز HTML أيضا بأنها ذات قواعد سهلة ومعروفة، تستطيع أيضا في لغة HTML عمل الشيء نفسه بأكثر من شرح طريقة طريقة، لذلك ومهما كانت الشرح طريقة طريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط.
تتكون ملفات HTML من قسمين :
المحتوى : وهو ما يشاهده الجمهور في صفحتك.
الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق.
مثال على ذلك هذا السطر من لغة HTML ..
وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ..
HTML is a Great Language
في المثال السابق تبدو أجزاء ملف الـ HTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Language، والوسوم المحاطة بعلامتي < و >، في المثال السابق استخدمنا وسما يدعى b وهو اختصار لكلمة bold (عريض)، ويأتي في صور 2014ة زوج من الوسوم، وسم للفتح ووسم للإغلاق، ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسم، وسم الفتح يعني أن المتصفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق، مثل التشغيل والإطفاء .. وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأ هذه الميزة، وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل، وآخر لتغيير الخط، ووسوم أخرى للجداول والصور 2014، جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.
إذا أردت مثلا أن تغير الخط في كلمة Great في مثالنا السابق، سنحتاج إلى استخدام الوسم Font، حيث سنستخدم الوسم Font بأن نضبط خاصية لون الخط في كلمة Great إلى اللون الأحمر، ويتم هذا كالتالي ..
حيث ستبدو هكذا ..
HTML is a Great Language
في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي الـ< والـ> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء، وتكون الخصائص في صور 2014ة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية color للوسم font عند القيمة red، وإذا كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية والأخرى بمسافة، مثلا ..
التي ستظهر هكذا ..
HTML is a Great Language
أمور إضافية يجب أن تعرفها عن HTML ..
لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع <b> لا يختلف عن <B>.
يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )، ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف من كلمة واحدة دون مسافات.
بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه.
قد وقد لا يحتوي وسم الفتح على خصائص إضافية، ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.
لغة HTML لا تراعي المسافات البيضاء، وتعتبرها جميعا مسافة واحدة، أي أن وضع مسافة واحدة بين كلمتين، يساوي وضع مسافتين، ويساوي وضع ثلاثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة tab، كلها تترجم إلى مسافة.
توضع التعليقات بين <!-- و --> أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.
بنية ملف HTML
يتكون ملف HTML القياسي من جزئين رئيسيين هما :
الرأس Head : يحتوي على المعلومات الإضافية الخاصة بالمستند مثل عنوان الصفحة والكلمات المفتاحية فيها وغيرها من الأمور الخاصة بالصفحة والتي لا تعتبر من ضمن المحتوى.
الجسم Body : وهو يحتوي على المحتوى الذي يراه المستخدم.
المثال التالي يبين كيفية تقسيم ملف HTML ..
المثال السابق صريح، ولا يحتاج إلى المزيد من التوضيح، الأجزاء التابعة للرأس توضع بين <head> و </head>، أما الأجزاء التابعة للجسم فتوضع بين الوسمين <body> و </body> .
يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <title> و </title>، والمكان الصحيح لوسم الـ <title> هو الرأس، حيث أن الوسم title لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشفة كما في محركات البحث، ولا يمكنك وضع وسوم تنسيق أخرى بين وسمي الـ title.
وتوجد أيضا وسوم أخرى تحدد صفات المستند تمسى وسوم **** توضع أيضا في منطقة الرأس، وسنأتي إليها في أمور إضافية في هذه الدورة.
أما باقي الوسوم فأغلبها يوضع في منطقة الجسم body.
موضوع مقدم من منتديات ديزاد
منتديات ديزاد باتنة (http://www.dzbatna.com/vb)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com/vb)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com/vb)©
منتديات ديزاد باتنة (http://www.dzbatna.com/vb)
بسم الله الرحمن الرحيـم
سنبـدأ هـذه الدروس لما لهـا من فائـده كبيــره .. وأنا بصــراحـه هذي الدروس درس مفصلـتها قبــل كــذا واستفــدت منهــا وحبيـت أنكم تستفيــدون منهــا وستكون الدروس على النحو التالي
1-مقدمة
2-الخطوط والألوان
3-الصور 2014
4-تنظيم المحتوى
5-النماذج
6-أمور إضافية
أولاً:
مقدمة
تكتب ملفات HTML في صور 2014ة ملفات نصوص بسيطة (Plain ****)، تأخذ الإمتداد عادة، وتكتب في أي تحميل برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم Simple****، جميع هذه الأحدث برامج مناسبة جدا لعمل صفحات HTML.
الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت، ولن يكون أكثر من Internet Explorer أو Netscape Navigator أو الأثنين معا، وبما أنك الآن تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا، ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابها، ولأن المتصفحات تختلف من نوع إلى آخر لذا يفضل أن تقوم بمعاينة صفحتك بجميع المتصفحات الموجودة وتتأكد من أنها تظهر بشكل سليم في جميع المتصفحات، لأن الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أن الجمهور يستطيع رؤية الصفحة بمتصفحه أيا كان.
المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولا، ودعمها لآخر التقنيات ثانيا، يقدم متصفح Internet Explorer من Microsoft دعما رائعا للغة العربية، ولآخر تقنيات الويب مثل HTML 4.0 و CSS و XML وغيرها، وأما متصفح Netscape Navigator فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى تحميل برنامج Sindbad من شركة صخر، وفي كل الأحوال يظل متصفح Netscape Navigator متصفحا متعبا في التصميم، لهذه الأسباب جميعا اعتمدنا متصفح Internet Explorer 5.0 كمتصفح قياسي لصفحات موقعنا، فهي تظهر بشكل رائع فيه.
ملحوظةآخر إصدارة من متصفح Netscape Navigator هي الإصدارة 4.72 وآخر إصدارة من تحميل برنامج Sindbad هي 4.51 وقد توقفت شركة صخر عن تعريب Navigator في الآونة الأخيرة لأسباب لا أعرفها
بعد كل هذا .. لغة HTML لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية، جميع الصفحات العالمية متقنة التصميم تم إعدادها باستخدام لغة HTML، تتميز HTML أيضا بأنها ذات قواعد سهلة ومعروفة، تستطيع أيضا في لغة HTML عمل الشيء نفسه بأكثر من شرح طريقة طريقة، لذلك ومهما كانت الشرح طريقة طريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط.
تتكون ملفات HTML من قسمين :
المحتوى : وهو ما يشاهده الجمهور في صفحتك.
الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق، فهي تصف المحتوى من حيث التنسيق.
مثال على ذلك هذا السطر من لغة HTML ..
وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ..
HTML is a Great Language
في المثال السابق تبدو أجزاء ملف الـ HTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Language، والوسوم المحاطة بعلامتي < و >، في المثال السابق استخدمنا وسما يدعى b وهو اختصار لكلمة bold (عريض)، ويأتي في صور 2014ة زوج من الوسوم، وسم للفتح ووسم للإغلاق، ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسم، وسم الفتح يعني أن المتصفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق، مثل التشغيل والإطفاء .. وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأ هذه الميزة، وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل، وآخر لتغيير الخط، ووسوم أخرى للجداول والصور 2014، جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.
إذا أردت مثلا أن تغير الخط في كلمة Great في مثالنا السابق، سنحتاج إلى استخدام الوسم Font، حيث سنستخدم الوسم Font بأن نضبط خاصية لون الخط في كلمة Great إلى اللون الأحمر، ويتم هذا كالتالي ..
حيث ستبدو هكذا ..
HTML is a Great Language
في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي الـ< والـ> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء، وتكون الخصائص في صور 2014ة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية color للوسم font عند القيمة red، وإذا كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية والأخرى بمسافة، مثلا ..
التي ستظهر هكذا ..
HTML is a Great Language
أمور إضافية يجب أن تعرفها عن HTML ..
لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع <b> لا يختلف عن <B>.
يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )، ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف من كلمة واحدة دون مسافات.
بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه.
قد وقد لا يحتوي وسم الفتح على خصائص إضافية، ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.
لغة HTML لا تراعي المسافات البيضاء، وتعتبرها جميعا مسافة واحدة، أي أن وضع مسافة واحدة بين كلمتين، يساوي وضع مسافتين، ويساوي وضع ثلاثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة tab، كلها تترجم إلى مسافة.
توضع التعليقات بين <!-- و --> أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.
بنية ملف HTML
يتكون ملف HTML القياسي من جزئين رئيسيين هما :
الرأس Head : يحتوي على المعلومات الإضافية الخاصة بالمستند مثل عنوان الصفحة والكلمات المفتاحية فيها وغيرها من الأمور الخاصة بالصفحة والتي لا تعتبر من ضمن المحتوى.
الجسم Body : وهو يحتوي على المحتوى الذي يراه المستخدم.
المثال التالي يبين كيفية تقسيم ملف HTML ..
المثال السابق صريح، ولا يحتاج إلى المزيد من التوضيح، الأجزاء التابعة للرأس توضع بين <head> و </head>، أما الأجزاء التابعة للجسم فتوضع بين الوسمين <body> و </body> .
يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <title> و </title>، والمكان الصحيح لوسم الـ <title> هو الرأس، حيث أن الوسم title لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشفة كما في محركات البحث، ولا يمكنك وضع وسوم تنسيق أخرى بين وسمي الـ title.
وتوجد أيضا وسوم أخرى تحدد صفات المستند تمسى وسوم **** توضع أيضا في منطقة الرأس، وسنأتي إليها في أمور إضافية في هذه الدورة.
أما باقي الوسوم فأغلبها يوضع في منطقة الجسم body.
موضوع مقدم من منتديات ديزاد
منتديات ديزاد باتنة (http://www.dzbatna.com/vb)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com/vb)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com/vb)©
