loulou ange
11-01-2013, بتوقيت غرينيتش 04:03 PM
http://www.dzbatna.com/images/icons/icon30.gif ظ…طھظپط±ظ‚ط§طھ ظپظٹ ط§ظ„HTML (ط¯ظˆط±ط© طھط¹ظ„ظ… ط§ظ„ط¨ط±ظ…ط¬ط© ) (http://www.dzbatna.com/t1888804/)
السلام عليكم ورحمة الله وبركاته
كتكملة للدرس مفصل السابق سنكمل اليوم دورتنا في تعلم البرمجة ، والآن درس مفصل في لغة الHTML
والدرس مفصل القادم سيكون بعض من الHTML والسي اس اس
الآن سنتعلم القليل عن الجداول والآي فريم والmetatags
نبدأ بالجداول .
وسم الجداول في الhtml هو table اي في البداية ضع هذا الكود code كوسم الtable
<table>
</table>
وهنالك خاصية يجب وضعها للجدول ليظهر بشكل صحيح وهي البوردر border
هي نفس فكرة الحدود ، حدوود الجدول ، وستكون تساوي ١
وكلما زودتها كل ما كانت حدود الجدول كبيرة أكثر .
الآن سنحدد العامود الأول عن طريق الوسم tr
داخل وسم الجدول هكذا :
<table border="1">
<tr></tr>
<tr></tr>
</table>
كما نري وضعت عامودين وداخل وسم كل عامود نضع صف ونستخدم الtr لوضع الصفوف
هكذا :
<tr><td>Name</td><td>Khalid</td></tr>
الكود code كبير لكن لا شئ به ! أضفنا صف عن طريق tr ثم اضفنا علي اليسار استخدمنا td لكي نضع كلمة name في العمود الأول ووضعنا قيمة الإسم وهي خالد في العمود الثاني عن طريق td أخري
الآن في الtd الثانية نضع نفس الكود code مع تغيير القيم
<tr><td>Age</td><td>13</td></tr>
غيرنا فقط الإسم وجعلناها العمر ووضعنا قيمته علي اليمين .
يمكنك إضافة المزيد من الtd علي راحتك
سنري النتيجة:
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/table-tut.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/table-tut.png)
ربما لم يفهم البعض للتعقيد ، مع ان الموضوع سهل جداً جداً .
لإضافة صفوف جديدة استخدم tr
لإضافة عواميد جديدة استخدم الtd داخل الصف الذي تريده
الآن ندخل في جزئية الآي فريم
الفريم يستخدم لإدراج صفحة ويب داخل صفحة موقعك ، كمثال انظر الصورة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe-300x118.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe.png)
كما نري في الصورة موقع ويب عادي وبه مربع صغير يعرض بداخله موقع w3schools
هذا هو الآي فريم . واستخدامه سهل جداً ويمكنك التحكم في حجمه كما تشآء . تغيير العرض او الطول.
وسم الآي فريم iframe
الخواص نفس خواص الصورة بالظبت .
src هو مصدر الموقع التي تريد عرضه داخل الآي فريم
width يعني العرض
height كما تعرفون الطول
ويمكنك إضافة اسم للآي فريم خاصية name
لنجرب مثلاً ونجعل موقعنا يظهر في آي فريم .
<iframe src="http://www.thedevdot.com/wordpress" width="300" height="300"></iframe>
سنحصل علي هذه النتيجة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe2-300x293.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe2.png)
حصلنا علي نتيجة جيدة . الآن ندخل في جزئية الكلمات المفتاحية والميتا تاج
الكلمات المفتاحية مهمة جداً لموقعك ومن دونها ستواجه مشاكل مع جوجل GOOGLE أدسنس ومشاكل مع قلة الزوار .
الكلمات المفتاحية هي التي تخبر محرك البحث Search Engine بمحتوي موقعك . ويجب ان تكون الكلمات المفتاحية مناسبة لمحتوي موقعك .
الكلمات المفتاحية تساعد الزوار في الوصول لموقعك عن طريق محركات البحث . أيضاً هي مهمة جداً في جوجل GOOGLE أدسنس
حيث أنها تتحكم في سعر الضغطة ولكن أيضاً كما قلت يجب ان تكون الكلمات المفتاحية متوافقة مع محتوي موقعك
لتحصل علي أرباح مرضية من أدسنس وزوار جيدين من محركات البحث .
الآن كيف تضيف هذه الكلمات المفتاحية او Keywords
بسيطة جداً ، اذهب لكود code الHTML الخاص بموقعك وفي الووردبريس ستجده في قالب template الهيدر header
في البلوجر ستجد كود code الHTML الخاص بمدونتك في تحرير HTML في جزئية تصميم
ابحث عن <head>
لإضافة الكلمات المفتاحية ووصف موقعك سنستخدم تاج ( وسم ) يسمي meta
اهم شئ هو تحديد خواص الوسم ، الخواص هما خاصتين الإسم والقيمة
الإسم name
سيكون إما كلمات مفتاحية او وصف
Keywords or Description
والمحتوي هو محتوي هذه القيم ، فلو كان النيم وصف سنكتب الوصف في المحتوي
ولو كان كلمات مفتاحية سنكتبها أيضاً في المحتوي :
Content
لنأخذ مثال .
<meta>
وضعنا التاج ، الآن نضع النوع او name
<meta name="keywords">
سنضع في النهاية / لأننا لن نضع وسم نهاية ونضع الآن قيمة الname وهي الكلمات المفتاحية
<meta name="keywords" content=""/>
الآن كيف نكتب الكلمات المفتاحية ؟
نفصل بين كل كلمة وكلمة بفاصلة هكذا :
<meta name="keywords" content="dev,dot,program,php,html,css"/>
ويجب علينا ان نحسن إختيار الkeywords
ولتعرف كمية البحث في جوجل GOOGLE عن كل كلمة من كلمات موقعك المفتاحية اذهب لهذا الرابط :
https://adwords (https://%3Cb%3Eadwords%3C/b%3E).google.com/select/KeywordToolExternal
الان بعد ما حددنا الكلمات المفتاحية سنحدد الوصف . سهل جداً . فقط غير قيمة الname من keywords الي description
هكذا :
<meta name="description" content="website that has good tutorials"/>
بعدا ما قمنا بعمل الأكواد نضعها كلها في جزء الhead في الموقع
كما قلنا . اهم شئ يكون هذا الكود code بين وسم الهيد <head></head>
إنتهينا من الدرس مفصل وان شاء الله يكون مفهوم .
الدرس مفصل القادم سنتعلم بعض تقنيات الCSS 2
وبعده ان شاء الله الCSS 3 ثم الPHP
بالتوفيق ..
المصدر : متفرقات في الHTML (دورة تعلم البرمجة ) | نقطة مطور (http://www.thedevdot.com/wordpress/?p=49)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله وبركاته
كتكملة للدرس مفصل السابق سنكمل اليوم دورتنا في تعلم البرمجة ، والآن درس مفصل في لغة الHTML
والدرس مفصل القادم سيكون بعض من الHTML والسي اس اس
الآن سنتعلم القليل عن الجداول والآي فريم والmetatags
نبدأ بالجداول .
وسم الجداول في الhtml هو table اي في البداية ضع هذا الكود code كوسم الtable
<table>
</table>
وهنالك خاصية يجب وضعها للجدول ليظهر بشكل صحيح وهي البوردر border
هي نفس فكرة الحدود ، حدوود الجدول ، وستكون تساوي ١
وكلما زودتها كل ما كانت حدود الجدول كبيرة أكثر .
الآن سنحدد العامود الأول عن طريق الوسم tr
داخل وسم الجدول هكذا :
<table border="1">
<tr></tr>
<tr></tr>
</table>
كما نري وضعت عامودين وداخل وسم كل عامود نضع صف ونستخدم الtr لوضع الصفوف
هكذا :
<tr><td>Name</td><td>Khalid</td></tr>
الكود code كبير لكن لا شئ به ! أضفنا صف عن طريق tr ثم اضفنا علي اليسار استخدمنا td لكي نضع كلمة name في العمود الأول ووضعنا قيمة الإسم وهي خالد في العمود الثاني عن طريق td أخري
الآن في الtd الثانية نضع نفس الكود code مع تغيير القيم
<tr><td>Age</td><td>13</td></tr>
غيرنا فقط الإسم وجعلناها العمر ووضعنا قيمته علي اليمين .
يمكنك إضافة المزيد من الtd علي راحتك
سنري النتيجة:
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/table-tut.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/table-tut.png)
ربما لم يفهم البعض للتعقيد ، مع ان الموضوع سهل جداً جداً .
لإضافة صفوف جديدة استخدم tr
لإضافة عواميد جديدة استخدم الtd داخل الصف الذي تريده
الآن ندخل في جزئية الآي فريم
الفريم يستخدم لإدراج صفحة ويب داخل صفحة موقعك ، كمثال انظر الصورة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe-300x118.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe.png)
كما نري في الصورة موقع ويب عادي وبه مربع صغير يعرض بداخله موقع w3schools
هذا هو الآي فريم . واستخدامه سهل جداً ويمكنك التحكم في حجمه كما تشآء . تغيير العرض او الطول.
وسم الآي فريم iframe
الخواص نفس خواص الصورة بالظبت .
src هو مصدر الموقع التي تريد عرضه داخل الآي فريم
width يعني العرض
height كما تعرفون الطول
ويمكنك إضافة اسم للآي فريم خاصية name
لنجرب مثلاً ونجعل موقعنا يظهر في آي فريم .
<iframe src="http://www.thedevdot.com/wordpress" width="300" height="300"></iframe>
سنحصل علي هذه النتيجة :
http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe2-300x293.png (http://www.thedevdot.com/wordpress/wp-content/uploads/2014/06/iframe2.png)
حصلنا علي نتيجة جيدة . الآن ندخل في جزئية الكلمات المفتاحية والميتا تاج
الكلمات المفتاحية مهمة جداً لموقعك ومن دونها ستواجه مشاكل مع جوجل GOOGLE أدسنس ومشاكل مع قلة الزوار .
الكلمات المفتاحية هي التي تخبر محرك البحث Search Engine بمحتوي موقعك . ويجب ان تكون الكلمات المفتاحية مناسبة لمحتوي موقعك .
الكلمات المفتاحية تساعد الزوار في الوصول لموقعك عن طريق محركات البحث . أيضاً هي مهمة جداً في جوجل GOOGLE أدسنس
حيث أنها تتحكم في سعر الضغطة ولكن أيضاً كما قلت يجب ان تكون الكلمات المفتاحية متوافقة مع محتوي موقعك
لتحصل علي أرباح مرضية من أدسنس وزوار جيدين من محركات البحث .
الآن كيف تضيف هذه الكلمات المفتاحية او Keywords
بسيطة جداً ، اذهب لكود code الHTML الخاص بموقعك وفي الووردبريس ستجده في قالب template الهيدر header
في البلوجر ستجد كود code الHTML الخاص بمدونتك في تحرير HTML في جزئية تصميم
ابحث عن <head>
لإضافة الكلمات المفتاحية ووصف موقعك سنستخدم تاج ( وسم ) يسمي meta
اهم شئ هو تحديد خواص الوسم ، الخواص هما خاصتين الإسم والقيمة
الإسم name
سيكون إما كلمات مفتاحية او وصف
Keywords or Description
والمحتوي هو محتوي هذه القيم ، فلو كان النيم وصف سنكتب الوصف في المحتوي
ولو كان كلمات مفتاحية سنكتبها أيضاً في المحتوي :
Content
لنأخذ مثال .
<meta>
وضعنا التاج ، الآن نضع النوع او name
<meta name="keywords">
سنضع في النهاية / لأننا لن نضع وسم نهاية ونضع الآن قيمة الname وهي الكلمات المفتاحية
<meta name="keywords" content=""/>
الآن كيف نكتب الكلمات المفتاحية ؟
نفصل بين كل كلمة وكلمة بفاصلة هكذا :
<meta name="keywords" content="dev,dot,program,php,html,css"/>
ويجب علينا ان نحسن إختيار الkeywords
ولتعرف كمية البحث في جوجل GOOGLE عن كل كلمة من كلمات موقعك المفتاحية اذهب لهذا الرابط :
https://adwords (https://%3Cb%3Eadwords%3C/b%3E).google.com/select/KeywordToolExternal
الان بعد ما حددنا الكلمات المفتاحية سنحدد الوصف . سهل جداً . فقط غير قيمة الname من keywords الي description
هكذا :
<meta name="description" content="website that has good tutorials"/>
بعدا ما قمنا بعمل الأكواد نضعها كلها في جزء الhead في الموقع
كما قلنا . اهم شئ يكون هذا الكود code بين وسم الهيد <head></head>
إنتهينا من الدرس مفصل وان شاء الله يكون مفهوم .
الدرس مفصل القادم سنتعلم بعض تقنيات الCSS 2
وبعده ان شاء الله الCSS 3 ثم الPHP
بالتوفيق ..
المصدر : متفرقات في الHTML (دورة تعلم البرمجة ) | نقطة مطور (http://www.thedevdot.com/wordpress/?p=49)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
