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

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

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

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

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

• مزيد من المعلومات عن السمات في لغة HTML
• مزيد من المعلومات عن الصور والسمة alt في لغة HTML

إقرأ المزيد

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

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

عيد العمال:

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

إقرأ المزيد

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

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

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

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

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

إقرأ المزيد

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

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

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

يوم الأرض:

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

إقرأ المزيد

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

قالب 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
- ثم قم بالبحث عن : وصف قصير عن موقعك ،واستبدلها بوصف لمدونتك وبعدها سيصبح العنوان افضل لمحركات البحث حيث سيظهر بهذا الشكل:
اسم المدونة | الوصف الذي كتبته

إقرأ المزيد

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

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

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

إقرأ المزيد

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

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

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

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

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

من صور Robert Doisneau :

إقرأ المزيد

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

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

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

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

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

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

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

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

إقرأ المزيد

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

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

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

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

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

إقرأ المزيد

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

قالب 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg95PeI8prsoFeeZyzFT3X85E4GX82AARPGd-L259yrSeZIr0Y01cxkXfptiYcsJHMoRK7u1RBgubbnpHXjOC7pjTgHGNv35y8SbMAmer_4ZZzWEaDDjcgta3h95D97CbDI4RJCj6h9mzbl/s1600/1.jpg" />
<span><strong><a href="#">عنوان 1</a></strong>

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

<li class="s3sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq3pPsrsHa62BgocPo3y70LJmGqbO-BAKjzC4NZYxrnuEYZwINcsaM-SnS5SPbh2bAJ0voql2pRrCMrqoxUH2hPvEAmESF5VIu-y2kblSGHYjL2PdHX4nglRmA97UKNWmCiWynTyDEWzig/s1600/2.jpg" />
<span><strong><a href="#">عنوان 2</a></strong>

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

<li class="s3sliderImage">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XIZWYvUOxbAmhz3GoiDMZhxTq707YrEEq9r1poHJe60CkYQV5cSGxwwf9jf7FzjWhf0Lg0kE_mbthiN919EVwIgQaPz6gseJNbcwdYVVAAvF3SW8ncpWCEXErnDZhKx_zfbVAP4wz0nT/s1600/3.jpg" />
<span><strong><a href="#">عنوان 3</a></strong>

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

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

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

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

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

إقرأ المزيد

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

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

HTML & CSS

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

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

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

1. من ملف CSS منفصل.
2. في عنصر <style> في رأس صفحة HTML .
3. في السمة 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

لغة CSS

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

مميزات لغة CSS :

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

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

إقرأ المزيد

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

الألوان 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

الإطارات 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

النماذج 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" ، وسيتم شرح أهم عناصر الإدخال فيما يلي..

1. الحقول النصية Text Fields 
2. حقل كلمة السر Password Field
3. أزرار الراديو Radio Buttons
4. خانات الإختيار  Checkboxes
5. زر الإرسال 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>

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

كلمة السر:

---

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

يتم تكوين Radio Buttons بهذا الشكل </ "input type="radio> ..

مثال:

<form>
<input type="radio" name="sex" value="male" /> ذكر<br />
<input type="radio" name="sex" value="female" /> أنثي
</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

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

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

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

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

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

---

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

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

مثال:

<ol>

<li>قهوة</li>

<li>شاي</li>

</ol>

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

1. قهوة
2. شاي

---

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

الجداول 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

الصور 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

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

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

1. الروابط .
2. طريقة كتابة روابط HTML.
3. الروابط و سمة "الهدف" Target Attribute.
4.  الروابط وسمة "الاسم" Name Attribute.

---

الروابط 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

الخطوط 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 لميلاد المصمم المعمارى ميس فان دير روه

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

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

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

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

إقرأ المزيد