مدونة مينا

فيديو: شرح إضافة عنوان ونص بديل للصور في مدونات بلوجر

2012-05-22T12:37:00.003-07:00

خاصية جديدة أضافتها بلوجر الي محرر التدوينات الخاص بها ، الخاصية الجديدة تتيح لك امكانية اضافة عنوان ونص بديل للصور، النص البديل له اهمية كبيرة في تهيئة موقعك لمحركات البحث، فإضافة السمة alt و title للصور تمكن محرك البحث من قراءة الصورة مثل النصوص، اي أن الصور تكون قابلة للبحث.

خطوات اضافة السمة "title" والسمة "alt":

قم بإضافة الصورة بأي طريقة سواء رفعها من جهازك او عن طريق رابط لها.
بعد ادراج الصورة قم بالضغط عليها واختار "خصائص Properties" .
سيظهر لك صندوق حواري يمكنك من خلالة اضافة سمتي "title" و "alt".

شاهد الفيديو:

جوجل يحتفل بعيد العمال

2012-04-30T20:13:00.000-07:00

إحتفل محرك بحث جوجل اليوم الثلاثاء 1\5\2012 بعيد العمال، وغير شعارة الي عامل يرفع شعار جوجل.

عيد العمال:

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

بالفيديو محرك بحث جوجل يحتفل بالذكري الـ 132 لميلاد مطور السوستة

2012-04-23T16:31:00.001-07:00

اليوم 24 ابريل 2012 م، إحتفل محرك البحث جوجل بالذكري الـ 132 لميلاد المهندس الامريكي من أصل سويدي جيدون صندباك Gideon Sundback ، والذي يرجع له الفضل في تطوير السوستة.

شاهد الفيديو:

جيدون صندباك Gideon Sundback:

جيدون صندباك من مواليد 24 ابريل 1980 م بالسويد، وبعد أن أتم صندباك دراسته في السويد، انتقل إلى ألمانيا حيث درس في معهد الفنون التطبيقية في مدينة بنجن آم راين. وفي عام 1903، أتم صندباك دراسة الهندسة، ثم هاجر في عام 1905 متجهًا إلى الولايات المتحدة.
ويرتبط اسمة بتطوير السوستة فهو صاحب الفضل في شكلها الحالي، بداية تطويرة للسوسته كانت ما بين عامي 1906 و 1914 ، توفي صندباك في 21 يونيو 1954 م بالولايات المتحدة الامريكية.

بالفيدو جوجل يحتفل بيوم الأرض ويتزين بالعشب والزهور

2012-04-21T18:16:00.000-07:00

إحتفل محرك بحث جوجل بيوم الأرض 22/4/2012 وذلك بتغير شعارة المعتاد بصورة متحركة يظهر فيها شعار جوجل مكتوبا علي الأرض بالعشب الأخضر ... ثم تنمو به زهور لتنزين الشعار بألوان جميلة.

شاهد الفيديو:

يوم الأرض:

يوم الأرض أسسه السيناتور الأمريكي جايلورد نيلسون كيوم في 22/4/1970 ، ويهدف يوم الأرض الي نشر الوعي للإهتمام ببيئة كوكبنا

NewsNet قالب اخباري معرب لمدونات بلوجر

2012-04-19T18:31:00.000-07:00

قالب NewsNet - قالب اخباري معرب لمدونات بلوجر، قالب مناسب للمدونات الاخبارية ذات الأخبار المتخصصة أو الأخبار المتنوعة.

مميزات قالب NewsNet :

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

حول القالب:

تعريب وتطوير: مينا

تصميم: Lasantha Bandara

معاينة النسخة الإنجليزية: من هنا

تحميل القالب معرب + سلايد شو : حمل من هنا

تحميل القالب معرب بدون سلايد شو : حمل من هنا

صور القالب:

إعداد القالب:

1- تعديل السلايد شو:

من تبويب القالب Template اختار تحرير HTML
قم بالبحث عن الكود التالي:

<div class='imageElement'>

ستجدة مكرر 5 مرات كل مرة بهذا الشكل:

<div class='imageElement'>
<h3>عنوان الموضوع هنا</h3>
<p>هنا وصف ليظهر في السلايدشو أسفل العنوان</p>
<a class='open' href='#' title='مدونة مينا'/>
<img alt='نص بديل' class='full' src='رابط الصورة هنا'/>
</div>

لتغير العنوان قم باستبدال النص المحدد باللون الأزرق بعناوينك.
لتغير الوصف قم باستبدال النص المكتوب باللون الأحمر بوصفك.
قم بتغير # برابط الموضوع واستبدل مدونة مينا بعنوان الرابط او اي نص.
لتغير الصورة قم بتغير ما هو مكتوب باللون البني برابط الصورة، يمكنك بعد alt ادخال نص بديل. ( مزيد من المعلومات حول النص البديل )

2- تهيئة القالب لمحركات البحث:

- من تبويب القالب Template اختار تحرير HTML
- ثم قم بالبحث عن : وصف قصير عن موقعك ،واستبدلها بوصف لمدونتك وبعدها سيصبح العنوان افضل لمحركات البحث حيث سيظهر بهذا الشكل:
اسم المدونة | الوصف الذي كتبته

فيديو: حفظ نسخة احتياطية من قالب بلوجر

2012-04-16T12:47:00.001-07:00

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

الفيديو التالي هو شرح لكيفية حفظ نسخة احتياطية من قالب بلوجر ..

جوجل يحتفل بالذكرى الـ 100 لميلاد المصور الفرنسي روبير دوانو

2012-04-13T17:28:00.001-07:00

إحتفالا بالذكري الـ 100 لميلاد المصور الفرنسي روبير دانو Robert Doisneau ، قام محرك البحث جوجل بتغير شعارة بمجموعة من صور دانو تتخللها كلمة Google .

ولد روبير دانو Robert Doisneau في 14 ابريل 1912 م في باريس، وتوفي 1 ابريل 1994 م في مونروج بباريس.

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

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

من صور Robert Doisneau :

جوجل تحتفل بذكري ميلاد رائد الرسوم المتحركة إدوارد مويبريدج

2012-04-09T04:52:00.000-07:00

إحتفالا بالذكري الـ 182 لميلاد رائد الرسوم المتحركة إدوارد مويبريدج "Eadweard Muybridge" ، قام محرك البحث جوجل بتغير شعارة بأحد أشهر رسوم مويبريدج، ويمكنك مشاهدتها تتحرك بمجرد الضغط عليها .

ولد المصور الإنجليزي إدوارد مويبريدج "Eadweard Muybridge" ، ذات الأصول الهولندية في 9 ابريل 1830، ولقد قضي معظم حياتة في الولايات المتحدة الأمريكية، وهو مخترع جهاز Zoopraxiscope وهو عبارة عن قرص دائري ومع تحريك القرص بسرعة يعطي ايحاء أن الشكل يتحرك.

صورة توضح القرص الدائري لجهاز جهاز Zoopraxiscope

صورة توضح القرص بعد تحريكة يعطي انطباعا بالحركة

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

من أشهر أعمال إدوارد مويبريدج Eadweard Muybridge:

توفي إدوارد مويبريدج في 8 مايو 1904 م عن عمر ناهز 74 عاما بإنجلترا.

جوجل تصلح 12 ثغرة في متصفح كروم

2012-04-07T13:40:00.001-07:00

للمرة الثانية خلال ثمانية أيام قامت شركة جوجل Google بإصدار تحديثا جديدا لمتصفح كروم Chrome، وقامت بإصلاح 12 ثغرة أمنية في هذا التحديث.

وتم تصنيف الـ 12 ثغرة، فمنهم سبع ثغرات خطورتهم عالية، و خمس ثغرات متعلقين بالذاكرة تتراوح درجة خطورتهم ما بين المتوسطة والخفيفة.

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

فلقد دفعت جوجل لثلاثة إكتشفوا سبعة ثغرات 60,000 دولار اما باقي الثغرات فلقد اكتشفها فريق جوجل الأمني ... كما دفعت جوجل منذ بداية العام 216,000 دولار لمكتشفي الثغرات.

قالب Schedule معرب لمدونات بلوجر

2012-04-07T07:32:00.000-07:00

قالب Schedule معرب لمدونات بلوجر Blogger

قالب Schedule يتميز بالبساطة مميزاته تجعلة مناسب للعديد من المجالات المختلفة ..

مميزات قالب Schedule :

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

حول القالب:

القالب من تعريب وتطوير : مينا

تصميم: Deluxe Template

النسخة الغير معربة: هنا

تحميل القالب معرب : من هنا

صور القالب:

إعداد القالب:

1- للإضافة السلايد شو:

من تخطيط Layout --> اختار اضافة اداة جديدة Add a Gadget
ثم اختار HTML/JavaScript وقم باضافة الكود التالي:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/_Ax-O2ayi6kU/TSGsLt4NWOI/AAAAAAAABCg/3Uukug-mi0w/s1600/1.jpg" />
<span><strong><a href="#">عنوان 1</a></strong>

<p>وصف 1 هنا</p>
</span>
</li>

<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/_Ax-O2ayi6kU/TSGsL1QJGcI/AAAAAAAABCo/0SmBzB_AvBE/s1600/2.jpg" />
<span><strong><a href="#">عنوان 2</a></strong>

<p>وصف قصير هنا ليظهر في السلايد شو</p>
</span>
</li>

<li class="s3sliderImage">

<img src="http://1.bp.blogspot.com/_Ax-O2ayi6kU/TSGsL0JWogI/AAAAAAAABCw/9iGwmQyS8qo/s1600/3.jpg" />
<span><strong><a href="#">عنوان 3</a></strong>

<p>وصف 3 هنا.</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

لتغير الصور قم باستبدال الروابط المحددة باللون الأحمر بروابط صورك.
لتغير العنوان قم باستبدال المكتوب باللون الأخضر بعناوين اخري.
قم بتغير # برابط الموضوع .
لتغير الوصف قم بتغير ما هو مكتوب باللون الأزرق.

2- تهيئة القالب لمحركات البحث:

15- HTML & CSS - دورة تعلم لغة HTML

2012-04-03T06:47:00.000-07:00

تحدثنا في الدرس السابق عن الألوان Colors ، وفي هذا الدرس سنتحدث عن HTML & CSS .. وهو آخر درس في دورة تعلم HTML للمبتدئين ومن خلال هذا الدرس يمكنك الانتقال لمستوي أعلي في تعلم اللغة.

HTML & CSS

تستخدم CSS لتنسيق عناصر HTML ، وهناك توافق كبير بين HTML 4 و CSS لتقديم أفضل وسيلة لتنسيق عناصر HTML .

كيفية إستخدام CSS مع HTML :

يمكن إضافة تنسيق CSS الي HTML بثلاثة طريق:

من ملف CSS منفصل.
في عنصر <style> في رأس صفحة HTML .
في السمة style داخل كل عنصر علي حدة.

أمثلة علي اضافة تنسيق CSS لملف HTML بالثلاثة طرق:

1- من ملف CSS منفصل:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

2- في عنصر <style> في رأس صفحة HTML :

<head>
<style type="text/css">
body {background-color:black;}
p {color:red;}
</style>
</head>

3-في السمة style داخل كل عنصر علي حدة.

<p style="color:red;margin-right:15px;">This is a paragraph.</p>

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

تمت بحمد الله دورة لغة HTML للمستوي المبتدئ .. والي اللقاء في دروس ودورات قادمة..

لغة CSS

2012-04-03T06:02:00.000-07:00

لغة CSS

CSS هي اختصار لـ "Cascading Style Sheets" والتي تترجم الي "صفحات الطراز المتراصة"، وهي لغة تهتم بتنسيق الصفحات، وجاء تصميمها بهدف الفصل بين التنسيق عن المحتوي، مثلا فصل تنسيق (الالوان والخطوط والهوامش والمساحات ... الخ) عن صفحة تكون مكتوبة مثلا بالغة Html .

مميزات لغة CSS :

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

يمكنك كتابة ملف CSS بأي محرر نصوص مثل Notepad .

14- الألوان Colors - دورة تعلم لغة HTML

2012-04-02T14:16:00.000-07:00

الألوان Colors
دورة HTML

تحدثنا في الدرس السابق عن الإطارات Frames، وفي هذا الدرس سنتحدث عن الألوان Colors .

قيم الألوان Color Values :

الألوان التي يتم عرضها تجمع بين ثلاثة ألوان " الأحمر Red - الأخضر Green - الأزرق Blue " وبرمز لذلك بـ (RGB)، وعن طريق نظام يسمي الست عشري (hexadecimal (HEX تم تحديد لكل لون له كود يبدا الكود بعلامة # ثم ثلاث مجموعات من الأرقام كل زوج رقمين او حرفين.
مثال: كود اللون الأسود 000000# ، كود اللون الأبيض FFFFFF# .

أكثر من 16 مليون لون !!

الدمج بين الاحمر والاخضر والأزرق يعطي لنا تدرجات من 0 حتي 256 أي (256 *256 *256) ، أي أكثر من 16 مليون لون .

الوان الويب الأمنه Web Safe Colors :

منذ سنوات تم اعتماد 216 لون للويب وتم التأكد من توافقها مع جميع الأجهزة والمتصفحات، وتم اعداد قائمة بها.
قد لايكون هذا الأمر مهم الآن لأن معظم الأجهزة لها قدرة علي عرض ملايين الألوان المختلفة ... والجدول التالي يوضح الوان الويب الآمنة Web Safe Colors ..

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

13- الإطارات Frames - دورة تعلم لغة HTML

2012-04-02T05:11:00.000-07:00

الإطارات Frames
دورة لغة HTML

تحدثنا في الدرس السابق عن النماذج Forms، وفي هذا الدرس سنتحدث عن الإطارات Frames .

ما هي الاطارات Frames ؟ :

الإطارات Frames هي وسيلة تمكنك من عرض أكثر من وثيقة HTML (صفحة انترنت)، وكل صفحة تسمي إطار Frame، وكل إطار مستقل بذاته.

عيوب إستخدام الإطارات Frames :

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

عنصر Frameset :

عنصر Frameset يضم عناصر إطار أو أكثر، كما يحدد عنصر Frameset عدد الأعمدة أو الصفوف وتحدد مساحتهم بالنسبة المئوية أو بالبكسل.

عنصر الإطار Frame :

يحدد الوسم <frame> بداية اطار من ضمن مجموعة اطارات داخل frameset .

مثال شامل:

<frameset cols="25%,75%">
<frame src="frame_a.html" />
<frame src="frame_b.html" />
</frameset>

شرح المثال:

<frameset> : بداية عنصر frameset الذي سيضك اللإطارات Frames .

"cols="25%,75% : تعني ان يكون هناك عمودين الأول بمساحة 25% والآخر بمساحة 75%.

< / "frame src="frame_a.htm> : تم تحديد الاطار عن طريق <frame> وعن طريق السمة src تم تحديد الصفحة المراد عرضها في الاطار الأول ... وبالمثل الإطار الثاني.

<frameset/> : نهاية عنصر Frameset .

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

12- النماذج Forms - دورة تعلم لغة HTML

2012-04-01T16:06:00.000-07:00

النماذج Forms
دورة تعلم لغة HTML

تحدثنا في الدرس السابق عن القوائم Lists ، وفي درس اليوم سنتحدث عن النماذج Forms .

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

يمكن أن يحتوي الفورم علي عناصر ادخال مثل "text fields, radio-buttons, checkboxes, submit buttons" ، ويمكن أن يحتوي النموذج علي عناصر اخري مثل "select lists, fieldset, legend, textarea, label".

يبدأ تكوين النموذج بالوسم <form> .. مثل:

<form>
input elements عناصر الادخال
</form>

عناصر الادخال Input Elements :

أهم عناصر في النموذج هي عناصر الأدخال Input Elements، ووظيفتها تجميع المعلومات من المستخدم، عنصر الادخال يكون له أشكال متنوعة وذلك يعتمد علي نوع السمة المحددة له، بمعني انه يبدأ تكوين عنصر الادخال بالوسم <input> أما نوع العنصر فيحدد من خلال السمة type..

وكما ذكرنا انه من عناصر الإدخال "text fields, radio-buttons, checkboxes, submit buttons" ، وسيتم شرح أهم عناصر الإدخال فيما يلي..

الحقول النصية Text Fields
حقل كلمة السر Password Field
أزرار الراديو Radio Buttons
خانات الإختيار Checkboxes
زر الإرسال Submit Button

1- الحقول النصية Text Fields :

يتم تكوين الحقول النصية Text Fields التي تحتوي علي سطر واحد بهذا الشكل </ "input type="text> ويمكن للمستخدم كتابة اي نص بها ..

مثال:

<form>
الاسم : <input type="text" name="firstname" /><br />
العنوان : <input type="text" name="lastname" />
</form>

ستكون نتيجة المثال كالتالي:

ملحوظة: عدد الحروف الافتراضي في Text Fields يكون 20 حرف.

2- حقل كلمة السر Password Field :

حقل كلمة السر Password Field يشبه في شكلة الحقول النصية ولكن عند الكتابة داخلة تظهر الكتابة علي شكل دوائر سوداء، ويتم تكوين حقل كلمة السر Password Field بهذا الشكل </ "input type="password > .

مثال:

<form>
كلمة السر: <input type="password" name="pwd" />
</form>

ستكون نتيجة المثال كالتالي:

4- خانات الإختيار Checkboxes :

يتم تكوين Checkboxes بهذا الشكل </ "input type="checkbox>، و checkbox تتيح للمستخدم إختيار أكثر من اختيار بين عدد محدد من الاختيارات .

مثال:

<form>
<input type="checkbox" name="vehicle" value="Bike" /> أمتلك دراجة<br />
<input type="checkbox" name="vehicle" value="Car" /> أمتلك سيارة
</form>

ستكون نتيجة المثال كالتالي:

5- زر الإرسال Submit Button :

يتم تكوين زر الإرسال (التقديم) Submit Button بهذا الشكل </ "input type="submit>.
وهو من أهم Input Elements فهو المسؤول عن ارسال البيانات التي قمت بادخالها الي السيرفر، والصفحة التي يتم ارسال البينات اليها تكون محددة من خلال السمة action داخل الوسم <form> .

مثال:

<form name="input" action="html-tutorial.html">
<input type="submit" value="HTML دورة " />
</form>

ستكون نتيجة المثال كالتالي:

في المثال السابق الصفحة التي سيتم تحويلك لها هي التي محددة في السمة Action كما ذكرنا.

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

11- القوائم Lists - دورة تعلم لغة HTML

2012-04-01T04:54:00.000-07:00

القوائم Lists
دورة HTML

تحدثنا في الدرس السابق عن الجداول Tables، وفي هذا الدرس سوف نتحدث عن القوائم Lists.

تنقسم القوائم في لغة HTML الي ثلاثة أنواع :

قوائم مرتبة Ordered List .
قوائم غير مرتبة Unordered List .
قوائم التعريفات Definition Lists .

وتعد القوائم المرتبة Ordered Lists والقوائم الغير مرتبة Unordered Lists من أشهر الأنواع وأكثرها استخداما..

1- قوائم مرتبة Ordered Lists :

يبدأ تكوين القوائم المرتبة بالوسم <ol> ، وكل عنصر من عناصر القائمة يبدا بالوسم <li>، ويتم عرض العناصر مرقمة.

مثال:

<ol>
<li>قهوة</li>
<li>شاي</li>
</ol>

ستكون نتيجة المثال السابق كالتالي:

قهوة
شاي

2- قوائم غير مرتبة Unordered Lists :

يبدأ تكوين القوائم الغير مرتبة بالوسم <ul>، وكل عنصر من عناصر القائمة يبدا بوسم <li> ، ويتم عرض العناصر بدوائر صغيرة سوداء.

مثال:

<ul>
<li>قهوة</li>
<li>شاي</li>
</ul>

ستكون نتيجة المثال السابق كالتالي:

قهوة
شاي

3- قوائم التعريفات Definition Lists :

قوائم التعريفات هي قوائم تحتوي علي عناصر وكل عنصر له وصف .

تبدا قائمة التعريفات بالوسم <dl>، وكل عنصر يبدأ بالوسم <dt>، وكل وصف يبدأ بالوسم <dd>.

مثال:

<dl>
<dt>قهوة</dt>
<dd>قهوة سادة ساخنة</dd>
<dt>شاي</dt>
<dd>شاي ساخن بالنعناع</dd>
</dl>

ستكون نتيجة المثال السابق كالتالي:

قهوة: قهوة سادة ساخنة
شاي: شاي ساخن بالنعناع

* ملحوظة: يمكنك عمل قائمة تحتوي علي نصوص أو صور أو قوائم اخري .... الخ

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا ...

10- الجداول Tables - دورة تعلم لغة HTML

2012-03-30T13:04:00.000-07:00

الجداول Tables
دورة HTML

تحدثنا في الدرس السابق عن الصور Images، وفي درس اليوم سنتحدث عن الجداول Tables .

لإدراج جدول في لغة HTML نستخدم وسم <table>.

الجداول في لغة HTML :

ينقسم الجدول الي صفوف والتي تحدد بوسم <tr>، وكل صف يحتوي علي خلايا التي تحدد بوسم <td> إختصار لـ Table Data ، وذلك لأن الخلية تحتوي علي أي بيانات مثل: النصوص والروابط والصور والنماذج أو حتي جداول اخري.

مثال:

<table border="1">
<tr>
<td>صف 1, خلية1</td>
<td>صف 1, خلية 2</td>
</tr>
<tr>
<td>صف 2, خلية 1</td>
<td>صف 2, خلية 2</td>
</tr>
</table>

نتيجة الكود:

صف 1, خلية1	صف 1, خلية 2
صف 2, خلية 1	صف 2, خلية 2

الجداول وسمة border :

السمة border هي المسؤلة عن حجم الحدود، واذا لم تحدد قيمة للسمة border سيكون الجدول بغير حدود، وطريقة اضافة الحدود هو اسناد قيمة للسمة border في وسم البداية <table> .

مثال:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

رأس الجدول Table Header :

رؤوس الجدول تحدد بالوسم <th>، أغلب المتصفحات تعرض رؤوس الجداول بخط عريض وفي المنتصف.

مثال:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>صف1, خلية 1</td>
<td>صف1, خلية 2</td>
</tr>
<tr>
<td>صف 2, خلية 1</td>
<td>صف 2, خلية 2</td>
</tr>
</table>

النتيجة:

Header 1	Header 2
صف1, خلية 1	صف1, خلية 2
صف 2, خلية 1	صف 2, خلية 2

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

9- الصور Images - دورة تعلم لغة HTML

2012-03-30T08:32:00.000-07:00

الصور Images
دورة لغة HTML

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

لإدراج صورة في لغة HTML نستخدم الوسم <img> ، وهذا الوسم من النوع الفارغ "Empty Tag"، أي يحتوي علي سمات ولا يوجد له وسم نهاية "End Tag".

الوسم <img> والسمة src :

لادراج صورة في الصفحة يجب أن تستخدم السمة "src ، "src اختصار لـ "source" ، والقيمة التي تسند للسمة src تكون رابط الصورة المراد عرضها.

مثال علي ادراج صورة:

<img src="url"/>

الشرح :

img : وسم عرض الصور في لغة Html .

src : سمة المصدر وقيمتها تحتوي علي رابط الصورة .

url : هي قيمة السمة src ، قم باستبدال url برابط اي صورة وقم بتجربة الكود بنفسك.

الوسم <img> والسمة alt :

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

عدم اضافة السمة alt لا يؤثر علي ظهور الصورة، ولكن من الأفضل اضافته نظرا لأهميته الكبيرة في تهيئة موقعك لمحركات البحث.

مثال علي اضافة النص البديل:

<img src="url" alt="text"/>

تحديد عرض وارتفاع الصورة:

يمكنك تحديد عرض وارتفاع الصورة من خلال السمتين width , height ، والقيمة التي تسندها لهما تكون افتراضيا بالبكسل .

مثالعلي تحديد عرض وارتفاع صورة:

<img src="url" alt="text" width="300" height="200"/>

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

8- الروابط Links - دورة تعلم HTML

2012-03-29T11:26:00.000-07:00

الروابط Links
دورة HTML

تحدثنا في الدرس السابق عن الخطوط Fonts في لغة HTML ، وفي هذا الدرس سوف نتحدث عن جزء هام جدا وهو الروابط Links .

الروابط Links :

الروابط (الروابط التشعبية hyperlink) ، هو كلمة او مجموعة من الكلمات أو صورة عندما تضغط عليا تفتح لك صفحة معينة أو تنتقل بك لجزء معين في ذات الصفحة، وعندما تقف علي الرابط بمؤشر الفأرة ستجد شكل المؤشر تغير الي شكل يد.

يتم تحديد الروابط في لغة HTML عن طريق الوسم <a>.

الوسم <a> يستخدم بطريقتين:

ان تنشأ رابط الي صفحة اخري مستخدما السمة href .
ان تنشأ رابط (اشارة مرجعية) لجزء معين في نفس الصفحة.

طريقة كتابة رابط HTML :

طريقة كتابة الكود بسيطة جدا، شاهد المثال التالي:

<a href="url">Link text</a>

من خلال السمة href نحدد رابط الصفحة..

معلومة: يمكنك استبدال النص link text بصورة أو أي عنصر HTML .

مثال:

<a href="http://www.mina-wd.com">Mina</a>

ستجد نتيجة الكود السابق هكذا: Mina

الروابط و سمة "الهدف" Target Attribute :

سمة "الهدف" تحدد أين سيتم فتح الرابط في متصفح جديد أو في تبويب جديد.

مثال :

<a href="http://www.mina-wd.com" target="_blank">Mina</a>

النتيجة : Mina

قم بتجربته بنفسك ..

الروابط وسمة "الاسم" Name Attribute :

سمة "الاسم" تستخدم لتنشأ رابط لجزء معين داخل الصفحة.

مثال:

1- يتم تحديد الجزء بهذا الشكل:

<a name="first">First Section</a>

2- يتم انشاء رابط له بهذا الشكل:

<a href="#first">Visit the First Section</a>

الي اللقاء في الدرس القادم...

7- الخطوط Fonts - دورة تعلم لغة HTML

2012-03-28T14:42:00.000-07:00

الخطوط Fonts
دورة HTML

في درسنا السابق تحدثنا عن التنسيق Formatting ، وفي هذا الدرس سوف نتحدث عن الخطوط في لغة HTML .

كان السائد في التعامل مع الخطوط في لغة HTML استخدام وسم <font> والذي نتحكم من خلالة في نوع وحجم ولون الخط ، ولكن هذا الوسم يجب ان لا يتم استخدامة بعد الآن.

ما هو مصير وسم <font> ؟

وسم <font> تم اهمالة في HTML 4 كما تم الاستغناء عنه في HTML 5، كما قامت منظمة W3C (اختصار لـ World Wide Web Consortium) بحذف وسم <font> من توصياته.

والاتجاه الآن في HTML 4 هو استخدام الـ CSS في تخطيط وتحديد خصائص العديد من عناصر HTML وسوف نتحدث عن HTML & CSS في درس منفصل.

المثال التالي يشرح استخدام الوسم <font> :

<font size="5" face="arial" color="red">
This text is in Arial, size 5, and in red text color.
</font>
<br/>
<font size="3" face="فahoma" color="blue">
This paragraph is in Tahoma, size 3, and in blue text color.
</font>

شرح المثال:

تم استخدام السمات size, face, color لتحديد حجم الخط ونوعة ولونة، فمثلا الجزء الأول يحدد حجم الخط بـ 5، ونوع الخط arial ولونه red .

الوسم </br> لإضافة سطر فارغ..

# تدريب:

قم بكتابة نص يكون لونه أزرق وحجم الخط 4 ، ونوعة verdana .

اذا واجهتك أي مشكلة لا تتردد في ترك تعليق .

الي اللقاء في الدرس القادم

جوجل تحتفل بالذكري الـ 126 لميلاد المصمم المعمارى ميس فان دير روه

2012-03-27T06:27:00.000-07:00

شعار جوجل احتفالا بالذكري الـ 126 لميلاد المصمم المعمارى ميس فان دير روه

إحتفالا بالذكري الـ 126 لميلاد المصمم المعماري لودفيغ ميس فان دير روه "Ludwig Mies van der Rohe" ، قام محرك البحث جوجل بتغير شعارة بشعار علي شكل تصميم معماري تتخللة كلمة Google.

يعد ميس فان دير روه واحدا من أهم رواد العمارة الحديثة، ألماني الجنسية ولد في 27 مارس 1886 م، وتوفي في 17 أغسطس 1969 م، في بداية حياته عمل في محل والده لنحت الأحجار، تتميز أعمال ميس بالبساطة والوضوح، ثم ظهرت موهبته سريعا وبدأ في أعماله الخاصة على الرغم من عدم دراسته بشكل أكاديمي في مجال للعمارة.

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

6- التنسيق Formatting - دورة تعلم لغة HTML

2012-03-26T13:27:00.000-07:00

التنسيق Formatting
دورة HTML

تحدثنا في الدرس السابق عن العناوين والفقرات Headings & Paragraphs ، ومنه الي درس اليوم الخاص بالتنسيقات Formatting .

وسوم التنسيق Formatting Tags :

في لغة HTML هناك العديد من الوسوم Tags التي تتيح لك امكانية تنسيق صفحتك مثل أن تجعل الخط عريض <b> او مائل <i> ، وهذه الوسوم تسمي وسوم التنسيق Formatting Tags .

مجموعة من وسوم التنسيق Formatting Tags :

الوسوم Tags	الوصف	معاينة
<b>	نص عريض	نص عريض
<i>	نص مائل	نص مائل
<big>	نص كبير	نص كبير
<small>	نص صغير	نص صغير
<sub>	نص منخفض عن باقي النصوص	نص عادي _{نص منخفض}
<sup>	نص أعلي من باقي النصوص	نص عادي ^{نص مرتفع}
<ins>	نص تحته خط	نص تحته خط
<del>	نص مشطوب في منتصفة خط	نص مشطوب

5- العناوين والفقرات Headings & Paragraphs - دورة تعلم لغة HTML

2012-03-25T15:01:00.003-07:00

العناوين والفقرات Headings & Paragraphs
دورة HTML

في الدرس السابق تحدثنا عن السمات Attributes ، وفي هذا الدرس سوف نتحدث عن العناوين والفقرات Headings & Paragraphs .

1- العناوين Headings :

لكتابة عنوان في لغة HTML ، يمكنك استخدام الوسوم <h1> حتي <h6> ، وسم أكبر عنوان هو <h1> ووسم أصغر عنوان هو <h6> ..

مثال:

<h1>عنوان</h1>

ملاحظات هامة:

أستخدم وسوم العناوين عند كتابة عنوان فقط، ولا تستخدمها لتكبير جملة أو كلمة، لأن محركات البحث تعتمد علي العناوين لتحديد هيكلة صفحة الويب.
استخدامك للعناوين يتيح للزوار معرفة بنية مواضيعك.
استخدم عناوين h1 في العناوين المهمة، ثم عناوين h2 للأقل أهمية، ثم h3 للأقل وهكذا حتي h6 ..

2- الفقرات Paragraphs :

لتحديد الفقرات في HTML يتم استخدام وسم <p>، يتم اضافة سطر فارغ تلقائيا بين الفقرة و الأخري
مثال:

<p>هذه فقرة رقم 1</p>
<p>هذه فقرة رقم 2</p>
<p>هذه فقرة رقم 3</p>

لا تنسي وسم النهاية <p/>، اذا لم تكتب وسم النهاية ستظهر الفقرة بشكل طبيعي ولكن يستحسن كتابة وسم النهاية لتجنب أي مشاكل مستقبلا، فربما تجد التطويرات القادمة في اللغة تلزمك بذلك.

# تدريب:

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

الي اللقاء في الدرس القادم

4- السمات Attributes - دورة تعلم لغة HTML

2012-03-25T06:39:00.001-07:00

الدرس الرابع السمات Attributes
دورة HTML

تحدثنا في الدرس السابق عن العناصر Elements ، وفي هذا الدرس سوف نتحدث عن السمات Attributes ..

ما هي السمات Attributes ؟

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

سمات هتمل HTML Attributes :

يمكن للعناصر Elements أن يكون لها سمات Attributes .
السمات Attributes توفر معلومات اضافية عن العناصر Elements .
يجب كتابة السمات Attributes داخل وسم البداية.
تكتب السمات Attributes علي جزئين الاسم والقيمة مثل: "name="value
يجب أن توضع قيمة السمات بين علامتي تنصيص "..." أو '...' ولكن غالبا يتم استخدام علامات التنصيص الزوجية..
في بعض الحالات نضطر لاستخدام علامات التنصيص الفردية وذلك عندما تكون قيمة السمات تحتوي علامات تنصيص مثال:
'name = 'Sam "John" Mac

السمات Attributes غير حساسة لحالة الأحرف أي يمكن كتابتها بحروف كبيرة UPPERCASE أو حروف صغيرة lowercase ... ولكن يفضل استخدام الحروف الصغيرة.

مثال:

يتم تعريف الروابط في لغة HTML من خلال الوسم <a> ، ويتم تحديد عنوان الرابط من خلال السمة: href

<a href="http://www.mina-wd.com">مدونة مينا</a>

الي اللقاء في الدرس القادم

3- العناصر Elements - دورة تعلم لغة HTML

2012-03-24T15:21:00.002-07:00

3- العناصر Elements
دورة تعلم لغة HTML

تحدثنا في الدرس السابق عن الوسوم Tags، وفي هذا الدرس سوف نتحدث عن العناصر Element ...

ما هي العناصر Elements ؟

العناصر Elements في لغة HTML هي كل ما يقع بداية من وسم الافتتاح (وسم البداية) ووسم الاغلاق (وسم النهاية) ، كما توضح الصورة.

شروط كتابة عناصر لغة هتمل HTML Elements :

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

العناصر المتداخلة

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

مثال:

<html>
<body>
<b>Hello !!</b>
</body>
</html>

المثال السابق يحتوي علي 3 عناصر متداخلة .. وللشرح كل عنصر له لون...

العناصر الفارغة Empty Elements

عناصر HTML الفارغة هي تلك العناصر التي لا يكون بها محتوي، مثل <br> فهو لا يحتوي علي وسم اغلاق.

الي اللقاء في الدرس القادم

مدونة مينا

فيديو: شرح إضافة عنوان ونص بديل للصور في مدونات بلوجر

خطوات اضافة السمة "title" والسمة "alt":

شاهد الفيديو:

جوجل يحتفل بعيد العمال

عيد العمال:

بالفيديو محرك بحث جوجل يحتفل بالذكري الـ 132 لميلاد مطور السوستة

جيدون صندباك Gideon Sundback:

بالفيدو جوجل يحتفل بيوم الأرض ويتزين بالعشب والزهور

يوم الأرض:

NewsNet قالب اخباري معرب لمدونات بلوجر

مميزات قالب NewsNet :

حول القالب:

صور القالب:

إعداد القالب:

1- تعديل السلايد شو:

2- تهيئة القالب لمحركات البحث:

فيديو: حفظ نسخة احتياطية من قالب بلوجر

جوجل يحتفل بالذكرى الـ 100 لميلاد المصور الفرنسي روبير دوانو

من صور Robert Doisneau :

جوجل تحتفل بذكري ميلاد رائد الرسوم المتحركة إدوارد مويبريدج

جوجل تصلح 12 ثغرة في متصفح كروم

قالب Schedule معرب لمدونات بلوجر

مميزات قالب Schedule :

حول القالب:

صور القالب:

إعداد القالب:

1- للإضافة السلايد شو:

2- تهيئة القالب لمحركات البحث:

15- HTML & CSS - دورة تعلم لغة HTML

HTML & CSS

كيفية إستخدام CSS مع HTML :

أمثلة علي اضافة تنسيق CSS لملف HTML بالثلاثة طرق:

لغة CSS

مميزات لغة CSS :

14- الألوان Colors - دورة تعلم لغة HTML

قيم الألوان Color Values :

أكثر من 16 مليون لون !!

الوان الويب الأمنه Web Safe Colors :

13- الإطارات Frames - دورة تعلم لغة HTML

ما هي الاطارات Frames ؟ :

عيوب إستخدام الإطارات Frames :

عنصر Frameset :

عنصر الإطار Frame :

12- النماذج Forms - دورة تعلم لغة HTML

عناصر الادخال Input Elements :

1- الحقول النصية Text Fields :

2- حقل كلمة السر Password Field :

3- أزرار الراديو Radio Buttons :

4- خانات الإختيار Checkboxes :

5- زر الإرسال Submit Button :

11- القوائم Lists - دورة تعلم لغة HTML

1- قوائم مرتبة Ordered Lists :

2- قوائم غير مرتبة Unordered Lists :

3- قوائم التعريفات Definition Lists :

10- الجداول Tables - دورة تعلم لغة HTML

الجداول في لغة HTML :

الجداول وسمة border :

رأس الجدول Table Header :

9- الصور Images - دورة تعلم لغة HTML

الوسم <img> والسمة src :

الوسم <img> والسمة alt :

تحديد عرض وارتفاع الصورة:

8- الروابط Links - دورة تعلم HTML

الروابط Links :

الوسم <a> يستخدم بطريقتين:

طريقة كتابة رابط HTML :

الروابط و سمة "الهدف" Target Attribute :

الروابط وسمة "الاسم" Name Attribute :

7- الخطوط Fonts - دورة تعلم لغة HTML

ما هو مصير وسم <font> ؟

المثال التالي يشرح استخدام الوسم <font> :

جوجل تحتفل بالذكري الـ 126 لميلاد المصمم المعمارى ميس فان دير روه

6- التنسيق Formatting - دورة تعلم لغة HTML

وسوم التنسيق Formatting Tags :

مجموعة من وسوم التنسيق Formatting Tags :

5- العناوين والفقرات Headings & Paragraphs - دورة تعلم لغة HTML

1- العناوين Headings :

ملاحظات هامة:

2- الفقرات Paragraphs :