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 م، في بداية حياته عمل في محل والده لنحت الأحجار، تتميز أعمال ميس بالبساطة والوضوح، ثم ظهرت موهبته سريعا وبدأ في أعماله الخاصة على الرغم من عدم دراسته بشكل أكاديمي في مجال للعمارة.

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

إقرأ المزيد

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

التنسيق 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

العناوين والفقرات 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

الدرس الرابع السمات 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

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> فهو لا يحتوي علي وسم اغلاق.

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

إقرأ المزيد

2- الوسوم Tags - دورة تعلم لغة HTML

الوسوم Tags
دورة تعلم لغة HTML

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

وسوم لغة هتمل HTML Tags

• وسوم HTML هي كلمات محاطة بعلامتي أكبر من وأصغر من "< >" مثل: <html>
• عادة ما تكون وسوم HTML علي جزئين مثل: <title> و <title/>
• الوسم الأول يسمي وسم البداية "start tag" والوسم الثاني يسمي وسم النهاية "end tag" ، ويطلق عليهما أيضا اسم وسم الافتتاح "opening tag" و وسم الاغلاق "closing tag".
• هناك وسوم مفردة اي ليس لها وسم اغلاق (نهاية) مثل:  <br>.
• وسوم HTML غير حساسة لحالة الأحرف أي يمكن كتابتها بحروف كبيرة "UPPERCASE " أو حروف صغيرة "lowercase"، مثلا: ليس هناك فرق بين <body> و <BODY> ولكن يفضل كتابتها بحروف صغيرة. .

صورة توضح تكوين ملف HTML

• ملف HTML يجب أن يبدأ بوسم <html> وينتهي بوسم <html/>.
• الوسم <head> يحدد بداية الجزء الخاص بكتابة معلومات عن الصفحة مثل العنوان الذي يكون موجود بين الوسمين "<title/>العنوان<title>"، أما الوسم <head/> فيحدد نهاية هذا الجزء.
• أما الوسم <body> فيحدد بداية الجزء الخاص بكتابة محتوي الصفحة من نصوص وصور وجداول وقوائم، والوسم <body/> يحدد نهاية هذا الجزء.

الآن لنقم بتجربة ما سبق .. قم بانشاء ملف HTML واذا واجهتك مشكلة راجع الدرس السابق واكتب بداخلة ما يأتي:

<html>
<head>
<title>test</title>
</head>
<body>
Hello!!
<br>
This Is My First Web Page ..
</body>
</html>

=> وسم <br> يبدأ سطر جديد ..

 # تدريب:

قم بعمل صفحة ويب يكون عنوانها "My Web"  وأن يكون محتواها :

Hello!!

My First Page...

حاول كتابة الكود بنفسك واستعن بالمثال السابق اذا واجهتك مشاكل..

إقرأ المزيد

1- مقدمة Introduction - دورة تعلم لغة HTML

مقدمة Introduction
دورة تعلم لغة HTML

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

1. ماذا تحتاج لتبدأ تعلم لغة HTML ؟
2. ما هي لغة HTML ؟
3. ملفات HTML والتعامل معها

---

ماذا تحتاج لتبدأ تعلم لغة HTML ؟

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

كتابة وتحرير ملفات HTML (صفحات الويب):

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

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

---

ما هي لغة HTML ؟

HTML هي لغة لوصف صفحات الويب .

• HTML هي اختصار لـ "HyperText Markup Language" بمعني "لغة ترميز النص الفائق".
• HTML ليست لغة برمجة ولكنها لغة توصيف (ترميز) "Markup Language".
• لغة الترميز هي مجموعة من الوسوم Tags.
• HTML تستخدم الوسوم لتصف صفحات الويب.

---

ملفات HTML والتعامل معها:

- لكتابة صفحة HTML جديدة :

قم بفتح برنامج المفكرة واكتب بداخلة الآتي:

<html>

<head>

<title>test</title>

</head>

<body>

This Is My First Web Page ..

</body>

</html>

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

ثم قم بالتوجة الي قائمة ملف File ثم اختار حفظ باسم save as ثم قم بتسمية الملف باي اسم بشرط ان يكون امتدادة (html. أو htm. ) مثال: test.html أو test.htm
الآن قم بفتح الملف الذي قمنا بحفظة ستجدة عبارة عن صفحة انترنت مكتوب بداخلها This Is My First Web Page ..

- لتحرير صفحة أنشأناها من قبل: 

قم بفتح برنامج المفكرة Notepad ومن قائمة ملف File قم باختيار فتح Open وحدد الملف المراد فتحة وعدل عليه كما تشاء ولا تنسي ان تحفظ تعديلك عن طريق الضغط علي ctrl+s او من قائمة ملف File اختار حفظ Save

إقرأ المزيد

دورة تعليم لغة HTML

دورة تعليم لغة HTML

لغة HTML تستخدم في تصميم مواقع الانترنت وهي من أكثر اللغات استخداماً في تصميم مواقع الإنترنت، وهي لغة سهلة وبسيطة يمكنك تعلمها بسرعة، وكلما تدربت عليها وزاد استخدامك لها ستجد درجة اتقانك لها في ازدياد مستمر. ( من هنا المزيد حول لغة HTML )

فهرس الدورة:

أ - مستوي مبتدئ:

1. مقدمة - Introduction
2. وسوم لغة هتمل - HTML Tags
3. عناصر لغة هتمل - HTML Elements  
4. سمات لغة هتمل - HTML Attributes
5. العناوين والفقرات - Headings & Paragraphs
6. التنسيق - Formatting
7. الخطوط - Fonts
8. الروابط - Links
9. الصور - Images
10. الجداول - Tables
11. القوائم - Lists
12. النماذج - Forms
13. الاطارات - Frames
14. الالوان - Colors
15. HTML & CSS
    

إقرأ المزيد

أهم الإختلافات بين HTML & XHTML

أهم الإختلافات بين HTML & XHTML

في البداية HTML هي إختصار لـ "HyperText Markup Language" وتترجم الي "لغة ترميز النص الفائق" ، أما XHTML فهي إختصار لـ "eXtensible HyperText Markup Language" وتترجم الي "لغة ترميز النص الفائق القابلة للتمديد" .

أهم الإختلافات بين HTML و XHTML:

1- في لغة  XHTML يجب ترتيب الوسوم مثال:

الكود التالي مقبول في لغة HTML ولكنة غي مقبول في XHTML لعدم ترتيب الوسوم به.

<b><i>Bold and italic text</b></i>

الكود الصحيح يكون هكذا:

 <b><i>Bold and italic text</i></b>

2- في لغة  XHTML يجب غلق جميع الوسوم ..

مثال:

<p>This is first paragraph
<p>This is second paragraph

فيكون الكود الصحيح:

<p>This is first paragraph</p>
<p>This is second paragraph</p>

- وحتي الـ Empty tag فهذه الأكواد تقبلها HTML ولكن لا تقبلها XHTML

A horizontal rule: <hr>

A break: <br>
An image: <img src="happy.gif" alt="Happy face">

فيكون الكود الصحيح:

A horizontal rule: <hr />

A break: <br />
An image: <img src="happy.gif" alt="Happy face" />

3 - في لغة  XHTML يجب أن تكون أسماء الوسوم بحروف صغيرة lowercase

 فهذا الكود مثلا مقبول في HTML ولكنه غير مقبول في XHTML

<BODY>
<P>Paragraph</P>
</BODY>

فيكون الكود الصحيح:

<body>
<p>Paragraph</p>
</body>

هذه من أهم الإختلافات بين HTML و XHTML ...

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

إقرأ المزيد

قالب Blue Business ، قالب مجاني

قالب Blue Business

قالب Blue Business ، مجاني، قالب مناسب للشركات..

مميزات قالب Blue Business :

الصفحة الرئيسية:

1. هيدر
2. قائمة
3. قسم مخصص لوضع صورة + نص "يمكن استخدامة لوضع اخر الأخبار"..
4. قسم المحتوي وهو مقسم الي 3 أجزاء متجاورة متمددة علي حسب حجم المحتوي..
5. الفوتر مقسم الي جزئين متجاورين..

الصفحات الفرعية:

1. هيدر
2. قائمة
3. قسم المحتوي
4. الفوتر مقسم الي جزئين متجاورين..

حول  قالب blue business :

• اسم القالب: Blue Business
• رقم الاصدار: 1.0
• اللغة : English
• المصمم: مينا
• www.mina-wd.com
• متوافق مع: 

صور القالب:

اضغط علي الصورة لتراها بحجمها الطبيعي:

قالب Blue Business الصفحة الرئيسية

قالب Blue Business صفحة فرعية

 مشاهدة حية | تحميل القالب

جميع الحقوق محفوظة لمدونة مينا

إقرأ المزيد

قالب MY CV ، قالب HTML بسيط مناسب للأفراد والشركات

قالب MY CV

قالب MY CV ، قالب HTML بسيط مناسب للأفراد والشركات، في صفحة واحدة يمكنك ضم ما تريد من معلومات وبمجرد أن تقف بمؤشر القأرة علي اي قسم ستظهر البيانات التي بداخلة...

مميزات قالب MY CV

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

حول قالب MY CV

1. اسم القالب : MY CV
2. رقم النسخة : 1.0
3. المصمم: مينا
4. www.mina-wd.com

صور القالب:

اضغط علي الصورة لتراها بحجمها الطبيعي:

مشاهدة حية | تحميل القالب

إقرأ المزيد

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

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

خصائص قالب Movie Show :

• قالب بثلاثة أعمدة.
• صديق لمحركات البحث.
• يحتوي علي سلايد شو slideshow .
• ملخص تلقائي مع صورة مصغرة في الرئيسية.
• خاصية إقرأ المزيد تلقائية.
• تمييز تعليق الكاتب.
• متوافق مع أحدث الإصدارات من  IE, Chrome , Firefox .
• مرفق ملف PSD للوجو وأيضا أيقونة favicon.

حول القالب:

 قالب Movie Show مناسب للمدونات التي تهتم بـ الافلام - اخبار الفنانين - الفيديو - السنيما ، والقالب مناسب للعديد من المجالات الأخري.

القالب من تعريب وتطوير: مينا
تصميم : themesnack.net
النسخة الغير معربة: movie show
تحميل القالب معرب: حمل من هنا

صور القالب:
اضغط علي الصورة لتراها بحجمها الطبيعي

إعداد القالب والتحكم به:

1- التعديل علي السلايد شو Slideshow.

للتحكم بما يظهر في السلايد شو اتبع الآتي..

اذا كنت تستخدم لوحة التحكم الجديدة من بلوجر

Template >> Edit HTML

ثم قم بالبحث عن:

 <div id='slider-container'> 

ستجد كود السلايد شو بهذا الشكل:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='crosscol'>
<div id='slider-container'>

<div id='slider'>

  <a href='#' title='Introducing WP Theme'>

 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijoAdMV9wKZlg-K0DyI_IyO1Q1pC4URNT-hdVEVjsTbIn6fpFmfyf-RoHqueGuOuxdwKmcI8cNhjh6kT5_0sEyJLlOQyby-pNa2n8nL708EWEGSUBmmCnwoopO-STjIs2U2l9nh7A8Vwed/s1600/1.jpg' title='Introducing WP Theme'/>

 </a>

  <a href='#' title='Another image in a post'>

 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgq6JYIq2qJNsv4wrNZrvfiCm2YQOj6bOvt3rTjv4wibvP4oB0AJGjr5pQsGARESlAX1Ar5wd5MXSwAvTqZE3obH1UUhTySAhbfETEUwW1taGjScnfVuCNSDvCWgBj3G_4YvD3_xaqeZNO/s1600/2.jpg' title='Another image in a post'/>

 </a>

  <a href='#' title='An image in a post'>

 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv2ZmRcuQD4n25d_0IgQJGptYKJud2rm4jlySbu3gwTdEwKfg6dScFkc-uO7MiwR3xia3UbZRn8jDfI-4VqL_KLKhxrdyr9TW6ww2QE9SSNK7yyWBOG1HhaeD2BdKvVdUUa4nISPrk3VgA/s1600/3.jpg' title='An image in a post'/>

 </a>

  <a href='#' title='Testing HTML elements'>

 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgek5sCBTYKmzb1B_rTIEWpBh7Zid0vF2OUKaWPReRhcq2tYb4DSSqkL7wsB0MWy9_g3DlFyb8K3jpksKKbZZ8vUZK-uY4ZOZr0dd8DxFCA39mJxTvJ4vH9QsA5TVZ4rIWCC5sKVeeIOXei/s1600/4.jpg' title='Testing HTML elements'/>

 </a>

  <a href='#' title='Category Hierarchy'>

 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv-K7BAf4GWKU7bbXUd5whQzvcLkEi-u5JMNJbfc9qAgElMCgVbNyYJPn2R3RTMGy6jpm6poPln75YbzaA9JEKk6KKw9OPD_qFwBHhwrGszVnS2eLhX6UlkZWa8OIplVQb3JTNWBWTD4H/s1600/6.jpg' title='Category Hierarchy'/>

 </a>

 </div>

<br clear='all'/>

</div>

      </div>
</b:if>
</b:if>

ويمكنك استبدال الصور والوصف واللينكات الموجودة بالصور والوصف واللينكات التي تريدها ...

مثال :

<a href='رابط الموضوع' title='عنوان الموضوع'>
 
 <img alt='اسم للصورة' src='رابط الصورة' title='اسم للصورة'/>
 
 </a>

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

إقرأ المزيد

لغة HTML

لغة HTML

لغة هتمل  "HTML" هي اختصار لـ "HyperText Markup Language" تترجم أحيانا لـ "لغة ترميز النص الفائق"، تستخدم لغة HTML في تصميم مواقع الانترنت وهي من أكثر اللغات استخداماً في تصميم مواقع الإنترنت.

لغة HTML ليست لغة برمجة لكنها لغة توصيف "Markup Language" أي انها تقوم بإعطاء المتصفح "Browser" وصفا لكيفية عرض المحتوي، فمثلا تصف له حجم الخط، نوع الخط، عرض وارتفاع صورة ... الخ.

الوسوم Tags:

تستخدم لغة هتمل ما يعرف بـ الوسوم "Tags" لكي ترسل الاوامر الي المتصفح الذي يقوم بترجمتها الي نتائج مفهومة لنا، ويوضع الوسم بين علامتي <الوسم> مثال:

<HTML>

<title> </title>

<img>

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

لا تحتاج لبرنامج معين لتقوم بإستخدام لغة html فقط تحتاج لبرنامج لتحرير النصوص فيمكنك استخدام برنامج المفكرة Notepad وهو موجود في الويندوز، كما تحتاج لمتصفح لعرض ما تقوم بكتابتة مثل: (Internet Explorer - Firefox - Opera - Google Chrome - Safari)، فقط يجب عليك حفظ ماكتبته بامتداد html او htm ليصبح اسم الملف مثلا: index.html .

إقرأ المزيد