أذكار: HTML5

‏إظهار الرسائل ذات التسميات HTML5. إظهار كافة الرسائل

2017-03-29

ما هي البنية الأساسية لتصميم صفحة باستخدام HTML ؟

أين سنكتب الوسوم التالية ؟ في برنامج المفكرة , مع العلم انه يوجد برامج عديد للتحرير والتعديل باستخدام لغة HTML5 لكن ابدأ بالتعلم على برنامج المفكرة فهي متوفرة في جميع اصدارات ويندوز.

الوسوم التالية هي البنية الاساسية : افتح المفكرة والصقها فيها.

<!DOCTYPE HTML>

معاني الوسوم :

<!DOCTYPE HTML>

لا يؤثر استخدمه أو عدمه , فهو عبارة عن توقيع او اتفاقية , كأنك تخبر محركات البحث أنك ستستخدم لغة HTML

وسم ثنائي وهو الاساسي وستكون كل الوسوم بداخله .
_______________

<head> <title> </title> </head>

هنا وسمين وسم الرأس , وبداخله وسم العنوان , وهو العنوان الذي يظهر على شريط المتصفح أو اللسان .

_______________________

<body>

</body>

وسم الجسم وبداخله نستخدم وسوم أخرى

مزيد من المعلومات »

معاني وسوم HTML5

<!DOCTYPE HTML>

<title> </title>
<p> </p>
<meta>
<br>
<h1> </h1>
<b> </b>
<i> </i>
<pre> </pre>
<blockquote>
<kbd>  </kbd>
<code> </code>
<samp> </samp>

<ol><li> </li></ol>

<img src=" ">

<a href="past the link"> go visit </a>
target=_blank

2015-07-09

تطبيق تصميم موقع (سما )

هنا محاولات للإجابة على أسئلة التمارين هنا , ولكن تغيير بعض الأسماء كاسم الموقع والصفحات والروابط وغيرها .
الموقع ليس رسمي , بل للتدرب فقط على ما تعلمناه هنا ( Microsoft Expression Web Tutorials )
- نفتح برنامج مايكروسوفت اكسبريشن ويب4
- site - new site -Empty site -
- نسمي الموقع بكتابة الامتداد مثلا : \sma
- ok

ننشيء الملفات الرئيسية
images - JS - Css

2015-07-05

13- مرحلة تخطيط الموقع | CSS Box Mode

فهرس الدروس ( Microsoft Expression Web )

الدرس السابق ( Microsoft Web )

كنا في الدرس العاشر ExpressionWeb -
قد تحدثنا على الكتلة التغليفية wrapper والتي تضم كتل أخرى , كل الكتل هذه عبارة عن أقسام توسم بـ div

الوسم ككل كان كالتالي :

<body>
<div id="wrapper">
<div id="top">
<div id="logo"> </div>
<div id="social-media"> </div>
</div>

<div id="topnav">
<ul>
<li><a href="index.html"> أهلا وسهلا </a> </li>
<li><a href="about.html"> عن موقعنا </a> </li>
<li><a href="products.html"> المنتجات </a> </li>
<li><a href="services.html"> الخدمات </a> </li>
<li><a href="contact.html"> اتصل بنا </a> </li>
</ul>
</div>

<div id="banner">
<li> <img src="../ويب/صورة العنوان/Banner.jpg" /> </li>
</div>

<div id="subbanner">
<h3> العلم نـور وفي الأجواء منتشر والفخر بالعلم لا بالمال نفتخـرُ </h3>
</div>

<div id="content">
<h2> فوائد القراءة </h2>
<p> إن القراءة ترفع الجهل, وتطرد الحزن والهم , وتنور العقل, وتُكسب القارئ التجارب.</p>
<img src="book%201.jpg" />
<img src="book%202.jpg" />
<img src="book%203.jpg" />
<h2> من أقوال الدكتور سوس عن القراءة </h2>
<p> كلما قرأت أكثر كلما عرفت أشياء أكثر،كلما تعلمت أكثر كلما حققت إنجازات أكثر </p>
</div>

<div id="rightside">
<h2 class="auto-style1"> حكمة اليوم </h2>
<p> العلم نور والجهل ظلام </p>
<img src="صورة%20تقويم.jpg" />
</div>

<div id="footer">
<p>© copyright 2016 </p>
</div>
</div>
</body>

سأربط به صفحة منسقة بورقة الأنماط css :

CSS Box Modelهناك ما يُسمى بـ

أي نموذج صندوق ورقة الأنماط

إن ما يخص هذا الصندوق هو 3 أمور , نلخصها في كلمات مفتاحية ألا وهي:

border الحدود
margin الهامش

الـ padding :

- يحيط بالكائن object والذي يمكن أن يكون كتلة div , نص p , رأس heading , أي عنصر من عناصر html

- الـ padding يقع بين الكائن والحدود border

- الـ padding يصيغ خلفية الكائن

الـ margin :

وهو أخير يحيط بالحدود .

وهو المنطقة العازلة buffer حول الكائن.

لنقل أن لدينا

5px padding

5px margin

1px border

لنطبق :

سنقوم بتنسيق ورقة css لنطبق على الكتلة التغليفية wrapper ,

سنستخدم صفة العرض width

#wrapper { width:900px; }

إذا استخدمت قيمة واحدة على الهامش فإنه سيتطبق على كافة الحدود الأربعة من أعلى وأسفل, يمين ويسار.

مثلا:

margin:20px;

أما لو استخدمت قيميتن , مثلا:

margin:20px 10px;

فإن سيطبق القيمة الأولى على الأعلى والاسفل والثانية على اليسار واليمين.

أما لو استخدمت أربعة قيم فإنه سيطبقها بأتجاه عقارب الساعة ( أعلى , يمين , أسفل , يسار )

مثلا:

margin:20px 10px 5px 30px;

أما إن أردت تعيين هامش محدد فقط وترك البقية على الـ default , مثلا نريد تعيين اليسار فقط- أو تعيين كل على حده

سيكون هكذا :

margin-left:30px;
margin-top:20px;
margin-right:5px;
margin-bottom:20px;

ما سبق يمكن تطبيقه أيضا على التبطين (الحاشية) padding .

إذا لم ترد أي حاشية في ( الأعلى والأسفل) فستكون القيمة صفر مثال:

#wrapper { width:900px; margin:0px; }

أما إن أردت تعيين اليمين واليسار بنفس المسافة ليكون الوضع متوسط فسنستخدم الصفة auto بدون قيمة

يبدو ذلك cryptic أي (خفي, مشفر, مبهم )

مثال:

#wrapper { width:900px; margin:0px auto;}

لاحظ أن كلمة auto لم تُسبق بفاصلة منقوطة .

تلك الكلمة ستقوم أوتوماتيكيا بضبط الهامش الأيمن والأيسر بنفس المسافة

لتلوين البانر :

#banner { background-color:#FFFF99; }

إذا أردنا جعل البانر أكبر , سنطبق الحشو padding

مثلا سيكون الأعلى والأسفل 30 بكسل , واليمين واليسار صفر

سنجد أن البانر أصبح أكبر

هكذا :

#banner { background-color:#FFFF99; padding:30px 0px; }

أما لتعيين بقية الجهات فكما تعلمنا كعقارب الساعة :

مثال:

#banner { background-color:#FFFF99; padding:30px 0px 100px 0px; }

ولتطبيق الحدود سيكون هكذا:

#banner { background-color:#FFFF99; padding:30px 0px 100px 0px;

border:1px #FF6600 solid; }

الحشو هو الحافة بين الكائن والحدود .. (يعني من الداخل ) ..

لنجرب الهامش margin بنفس الكود لكن نغير مفردة padding بـ margin :

هكذا :

#banner { background-color:#FFFF99; margin:30px 0px 100px 0px;

border:1px #FF6600 solid; }

وعليه فالهامش سيكون المنطقة من الخارج ..

22:5

2015-06-17

6- مشهد الـ code الشيفرة | القليل من Microsoft Expression Web | html

عودة لـ فهرس المواضيع ( Microsoft Expression Web )

الدرس السابق : ( Expression-Web )

سنركز في هذا الدرس على مشهد الـ شفرة Code

قد تحتاج إلى معرفة القليل من لغة html وهي لغة سهلة للتعلم. لا تقلق لست مضطرا إلى اتقاها فقط القليل منها.
على الأقل من 20 - 30 وسم من وسوم html
وبعض قواعد كتابة html .

لنتأكد من إعدادات مايكروسوفت اكسبريشن ويب للصفحة المنشأة سنزيل علامة صح من 3 مربعات ألا وهي:
من قائمة tools
page editor options
intellSense

- في قسم Auto insert
أزل علامة الصح من مربعي
clost tag
HTML attribute value quotes

- في قسم Code Hyperlinks
أزل علامة الصح من المربع الأول
Enable Code Hyperlinks for following elements
Ok

page Editor Options, page Editor Options,

سأفتح الآن صفحة index الرئيسية

تذكر أن لديك مشهدين
- مشهد التصميم design
- مشهد الكود code

مشهد التصميم design - مشهد التكويد code

سأضغط على الـ code لتظهر لي الشيفرة المُعدة افتراضيا, سأحددها , ثم امسحها.

عليك أن تفهم هناك نوعين من وسوم html وهما :
1- التركيبية أو (البنيوية) Structural tags
مثل سوم البنية الأساسية للمنزل , اسميته منزل لانها كأعمدة تركيب المنزل. وهنا أعمدة إنشاء الموقع الاكتروني.
2- المعنوية أو (اللفظية) Semantic tags
مثل وسم النص , وسم العنوان , وسم التعداد | أي تلك التي لها علاقة تقريبا بـ texts النصوص.

الوسم tag :
هو عبارة عن كود يخبر المتصفح ما يقوم به العنصر.
- وله فتح وإغلاق
مثلا وسم المقطع لكتابة جملة أو نص هو التالي :
<p> </p>
تغلق الوسم بـ slash أي الشرطة المائلة
تحصر النص أو المقطع بداخل هذين الوسمين . مثال:

<p> أهلا وسهلا بكم </p>

وسم العناوين الرئيسية هو :
<h1> </h1> وكل ما يكبر الرقم , يصغر الخط .

الوسو التركيبية أو (البنيوية) Structural tags
علينا معرفة أهم الوسوم البنوية الأساسية , وهي : الشسفرة الرئيسة html الرأس head , الجسم body
ما تبدأ به عادة عند تصميم أي صفحة نتية بلغة html هنا ( الوسوم البنيوية )

- لا يهم الفراغات البيضاء في صفحة الشيفرة فهي للتصميم فقط. .
- أي شيء تضعة في الرأس فسيكون في المتصفح. مثلا : لغة التنسيق css , العنوان على الشريط , الكلمات المفاحية
- أما ما تضعه في الجسم فهو الذي يراه الزوار . مثلا المحتويات كالمقالات والجداول والعناوين الرئيسية , والصور

داخل الرأس head :
وسم العنوان الظاهر على شريط المتصفح ولا أعني عناوين المقالات الظاهر في الصفحة.
<title> </title>

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

الفرق بين وسوم البنية , والمعنى هو :
البنوية : تعرف التركيب للشيفرة والـ outline
المعنوية : تعرف المحتويات

- لا يمكن أبدا أن تكون الوسوم المعنوية بداخل وسم قسم الرأس head

- يمكنك من خلال برنامج microsoft expression web أن تكتب في مشاهدة design وتراها في مشاهدة code

وسوم القائمة :
النوع الأول: وسم التعداد الرقمي ol
النوع الثاني: وسم التعداد لكن بدون أرقام ul فقد يكون نقطي
وبداخلها لكل تعداد il- وسوم نصيةوهي تتعلق بالتعداد , جد درس خاص بها هنا :
( الوسوم الأساسية للتعداد الرقمي والنقطي )

الدرس التالي 7 ( Microsoft Web )

2015-06-14

3- إدراج صورة | ربط الصفحات تشعبيا داخلي وخارجي| المعاينة على المتصفح |جدول | Microsoft Expression Web

فهرس المواضيع ( Microsoft Expression Web )

الدرس السابق ( انشئ موقع جديد )

نتعلم كيف نضيف نص , صور , روابط تشعبية نصية وصورية , روابط داخلية أو خارجية , جداول

بالنسبة للكتابة , سنفتح الصفحة التي أنشأنها لنجرب الكتابة فيها.

ملاحظة:
إذا كنت تريد نسخ نص من مايكروسوفت وورد وكان منسقا بـ الألوان وأحجام الخطوط ..الخ. وانت لا تريده منسق فيمكنك لصقه على المفكرة notepad ومن ثم تنسخة المفكرة إلى برنامج مايكروسوفت أوفيس. (ليكون خال من الألوان والتنسيقات الأخرى)

إضافة صورة لصفحة ويب : (طريقتين)
قبل أن تضيف أي صورة لصفحة ويب يجب أن تكون محفوظة في ملف الصور.

الطريقة الأولى:
لذا سأذهب إلى مكان ملف الموقع والذي بداخله ملف الصور لاضع صورة بداخلة, ثم أعود لبرنامج اكسبريشن ويب لاجدها في الملف تلقائيا, وإن لم نجدها نختار من قائمة view الخيار refresh . ولكن انتبه قبل عمل refresh يجب أن تكون قد ضغطت على الملف المعني وهو ملف الصور حتى لا تذهب تنسيقاتك الأخر. لان هذا الخيار هو للتجديد.

الطريقة :
نسحب الصورة من الملف إلى مكان العمل على الصفحة.
فيظهر مربع حوار Accessibilty Properties
Alternate text النص البديل , وهو جيد لمحركات البحث لتعرف مسمى الصورة.
Long description الوصف الطويل: إن شئنا يمكننا كتابة وصف أطول للصورة أو تركه فارغا
نضغط Ok

فتندرج الصورة:

الطريقة الثانية :

من قائمة from file < picture < insert

( ثم نختار الصورة من المكان المحفوظة فيه )

الرابط التشعبي : قد يكون الرابط داخلي أو خارجي فالداخلي يخص صفحات موقعك والخارجي لمواقع أخرى.

(روابط داخلية : أي تربط صفحات من داخل الموقع ذاته )

- قبل القيام بذلك سننشئ مزيدا من الصفحات , سأنشئ صفحة (حول ) واسميها about.html
- يمكن جعل الرابط على النص , أو الصور
- مثلا سأكتب الصفحة الرئيسية ثم اضع شرطة أو خط عمودي مثلا هكذا:
الصفحة الرئيسية | عن موقعنا | اتصل بنا
ثم أعلم على عبارة ( الصفحة الرئيسية ) لاجعلها رابط .
من قائمة insert - ثم نختار hyper link


حدد العبارة - hyperlink - insert

ليظهر مربع حوار يوجد بها الصفحات التي أنشأناها داخل ملف الموقع , وعليه فإن نص ( الصفحة الرئيسية ) سأختار له صفحة index.html

ملاحظة:
إذا اخطأت وأردت الرجوع حركة فستجد زر التراجع من قائمة Edit - ثم undo Typing

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

كيف أرى ما قمت به على المتصفح ؟
file
breview in prowser
نختار المتصفح الذي نريد ان نرى عليه

إنشاء رابط خارجي :
- نحدد النص
- insert
- hyperlink
- يظهر مربع حوار بدالخه صفحات داخلية , لكننا لا نريدها بل سنلصق مكان العنوان عنوان الرابط الخارجي.
- ok

نلصق رابط الموقع الخارجي ثم نضغط ok

كيف اجعل الرابط يفتح في صفحة جديدة مع بقائي في نفس الصفحة ؟
ساضغط على الرابط كلك يمين
- hyperlink properties
- target frame
- new window نافذة جديدة
- ok
- ok

يمكنك معاينة الحركة على المتصفح بعد الحفظ , file -save
file -preview in prowser

كيف أجعل الصورة على شكل رابط ؟
إذا أردنا جعلها رابط تشعبي فإننا نضغط عليها وبنفس الطريقة من قائمة insert
Hyperlink
نلصق عنوان الموقع في الفراغ
وليفتح في نافذة جديدة
Target fram
New Window
Ok
Ok

تستخدم الجداول لهدفين :
- وضع المعلومات في صفوف وأعمدة
- للتصميم Layout أي إن الصفحة عبارة عن صفوف وأعمده فالصف الأول مثلا نجده فيه الرأس header والصف الوسطي للمحتويات و الأعمدة الجانبية و الصف السفلي للـ footer .

كيف ننشئ جدول ؟
من قائمة table
insert table
تظهر نافذة لملئ معلومات كعدد الصفوف rows وعدد الأعمدة columns
مثلا سأجعل عدد الأعمدة 3 وعدد الصفوف 4
نملأ الجدول بالبيانات
نسحب أطراف الأعمدة لتصغيير الحجم
لا تقلق من حجم الجدول والاعمدة لانها إلى الان تتغير بحجم النص سنتعلم كيف نثبتها في الدروس القادمة .

كيف ننشئ جدول؟ - طريقة إنشاء جدول - سحب وإفلات حجم الجدول

2015-06-13

أسئلة وتدريبات | تعلم بالممارسة | Microsoft Expression Web

فهرس الدروس ( Microsoft Expression Web )

أسئلة التدريبات :

- أسئلة على إنشاء الملفات والصفحات الأساسية للموقع -

س1) من خلال برنامج مايكروسوفت اكسبريشن أنشئ موقع جديد ,
أ-أولا ضع الملف الرئيسي على سطح المكتب وقم بتسميته cool
ب-انشيء بداخله 3 ملفات 1- ملف للصور , 2-ملف لأوراق الأنماط , 3- ملف للجافا سكريبت
جـ -أنشئ 3صفحات ولتكن الأولى الرئيسية , والثانية ( عن الموقع ) , والثالثة ( اتصل بنا )
سيساعدك هذا الدرس على معرفة الحل . انشئ موقع جديد

س2) كيف تفتح ملف موقع موجود مسبقا؟

open site < site

                                                     نحضره من المكان الذي حفظناه عليه > دبل كلك > open

- هناك رمزان يمكن استخدامهما عند تسمية الملفات هما _______ و _________ .   ( الإجابة )

- ما الذي يلزمك لربط الصفحات ببعضها ؟

1) إنشاء صفحات بصيغة html وتسميتها بشكل صحيح مثلا

الصفحة الرئيسية وهي عادة default.html

صفحة (حول) وهي about.html

صفحة اتصل بنا وهي contact.html

2) كتابة أسماء تلك الصفحات في الصفحة الرئيسية defaul

3) عملية الربط من قائمة insert ثم hyperlink ثم اختيار الصفحة

4) ننسخ التنسيق إلى باقي الصفحات الأخرى

5) حفظ save

س3) في الصفحة الرئيسية للموقع :
- اكتب نصوصا تشعبية بأسماء الصفحات الأخرى.
- انسخ كل النصوص المرتبطة تشعبيا إلى بقية الصفحات
- انشيء رابط خارجي واجعله يفتح في نافذة جديدة
- أضف أي صورة
- اجعل الصورة مرتبطة برابط خارجي يفتح في نافذة جديدة

س4 ) أنشئ جدول عدد صفوفه 4 والأعمدة 2
وأملأه بأي بيانات

س5 ) كيف تضيف متصفح جديد إلى ويب اكسبريش لمعانية ما تقوم به ؟ من ملف ..

س6 ) - ما هي أهم 3 أمور يجب أخذها بعين الاعتبار عن تصميم موقع؟
الحل ( Expression Web )

س7 ) ما هي أنواع وسوم html , وما هو الوسم , وكيف يكون شكله , ما هو وسم المقطع أو النص , وسم العناوين الرئيسية , أنواع التعداد ووسومها.
الحل ( Microsoft )

س8 ) اذكر وسم الرابط التشعبي مع سمتيه الاثنتين

س9 ) اذكر وسم الصورة وطريقة كتابة سمة جلب الصورة من الجهاز , ثم اجعلها على شكل رابط .

س10) اذكر وسوم الجدول الاربعة
الوسم التغليفي table , وسم الصف tr , وسم العمود td , وسم الصف الأول كعناوين أساسية th

- تُطبق الأقسام في قسم ( الرأس , الجسم , القدم )
س) ما الذي ينقص وسم القسم االتالي<div> المقالات</div> ليصبح حقا قسم ذا قيمة ؟
الحل: ينقصة إعطاؤه هوية id وهي سمة وبداخلها قيمة مثال:

<div id="content"> هنا المقالات</div> هكذا

س11) قم بتطبيق وسم تقسيم الصفحة 4 أقسام مرة كـ (كتلة ) ومرة كـ (أسطر)

س12 ) ما الفرق بين وسم div و span ؟
كلاهما للتقسيم وكلاهما يحتاجان إلى سمة هوية id لكن ..
div يكون على مستوى الكتل أي تجد الأقسام أثناء التصميمتحت بعضها البعض ,
و span يكون على مستوى السطر أي تجد الأقسام على نفس السطر

س13) اذكر أمثلة لمواقع متخصصة بالصور

س ) أين و كيف تُنشيء 4 كُتل , و أعطها هوية بالاسماء التالية banner, sidebar, contenet, footer ؟
                                                   أين ؟ في قسم الجسم
                                                   كيف؟ كالتالي :

<div id="banner"> هنا أعلى الصفحة أهلا وسهلا بكم</div>
<div id="sideBar"> هنا الجانب الأيسر </div>
<div id="content"> المقالات</div>
<div id="footer">أسفل الصفحة </div>

راجع هذا الدرس ( Microsoft Expression )

- أسئلة على إنشاء الأقسام ( الكتل ) -

س) هل يمكن وضع كتل بداخل كل أخرى ؟ نعم

س ) في الصفحة الرئيسية قسمها إلى 10 (كُتل) كالتالي مع إعطاؤها هويات :
1- الكتلة الأولى وهي الكلتة التغليفية اعطها هوية id بتسميتها wrapper تغلف الكتل التالية.
2- كتلة الأعلى top وبداخلها كتلتين
3 - أ) كتلة الشعار logo
4 - ب) كتلة أزرار المواقع الاجتماعية social-media
5) كتلة الـ الشريط العلوي topnav
6) كتلة العنوان banner
7) كتلة العنوان الفرعي subbanner
8) كتلة المحتويات content ( النصوص كالعنوان الرئيسي , والمقال , والصور )
9) كتلة شرريط جانبي أيمن sideBar
10 ) كتلة الجزء الأسفل footer

- أسئلة على ملئ محتويات الكُتل -

س ) املأ محتويات الكتلة العلوية top بصورة شعار في كتلة الشعار
-ثم أنشئ في كتلة social-media وسم تعداد قائمة غير مرتبة ul لتضع بداخلها 3 صور أزرار للمواقع الاجتماعية

س ) املأ محتويات كتلة topnav كالتالي :
أنشئ تعداد غير رقمي ul فقراته بعدد الصفحات لإضافة رابط كل صفحة في تعداد

س ) املأ محتويات كتلة البانر banner كالتالي:
أضف صورة للبانر قياسها عرض 700 في طول 200 إنش

س ) املأ محتويات كتلة subbanner كالتالي:
اكتب عبارة ترويسة بحجم h3

س ) املأ محتويات كتلة content كالتالي :
اكتب نصا في ترويسه , أضف صورة

س ) املأ محتويات كتلة sideBar كالتالي :
اكتب نصا في ترويسة , أضف صورة

س ) املأ محتويات القدم footer كالتالي :
اكتب حفظ حقوق الموقع بذكر عبارة "كل الحقوق محفوظة " وعلامة حفظ الحقوق والعام .

الحل : ( Microsoft Expression Web )

________________________________________________________

س )

أ - أنشئ صفحة html , وأنشيء في ملف css صفحة نوعها css وقم بتسميتها styles (انتبه لامتدادات الصفحات) واربطها بصفحة html .

ب - في صفحة html أنشئ كود يحتوي على كتلتين في كل كتلة :
أنشئ في الكتلة الأولى :
1- ترويسة مقاسها h1 مع نص لها
2- ترويسة مقاسها h2 مع نص لها
3- تعداد غير رقمي بثلاث عناصر
5- تحت ما سبق رابط نصي , ( اكتب أي نص )

أنشئ في الكتلة الثانية :
6- ترويسة مقاسها h1 مع نصها لها
7- ترويسة مقاسها h2 مع نص لها
8- تعداد رقمي بثلاث عناصر
9- تحت ما سبق صورة

جـ - على صفحة html السابقة طبق عليها ورقة أنماط css . افتح ورقة الأنماط :
- قم بتنسيق خط الترويسة h1 بالصفات التالية ( أختر أي عائلة خطوط , حجم الخط 35px , لونه رمادي )
- قم بتنسيق نص اسمه reem صفاته اللون الأزرق والخط المائل
ثم قم بتطبيق في ورقة html على خط الترويسة h1 وأحد التعدادات الرقمية والنص في الكلتة الثانية .
- أنشئ صنف لتنسيق خلفية الكتل.
- أنشئ هوية لتنسيق الكلتة الثانية فقط

الحل ( برمجة مواقع )

س ) ما الأنواع الرئيسية الـ 3 لأساليب ورقة الأنماط ؟   الحل ( تعلم css)

س) صح أم خطأ :                الحل ( برمجة مواقع )
1- يبدأ ينتهي اسم الصفة في تنسيق css بنقطتين رأسيتين ولا تنتهي قيمتها بأي علامة ترقيم . (خطأ)
القيمة تنتهي بفاصلة منقوطة semicolon

س) لماذا تحدد قيمة صفة عائلة الخطوط font-family بأكثر من خط ؟ احتياط لتوافر أكثر من خط في متصفح الزائر بحيث إذا لم يظهر له الخط الأول فيمكن أن يظهر له الخط الثاني فالثالث وهكذا.    الحل ( ورقة تنسيق الأنماط ccc)

س) قم بتطبيق شيفرة css داخليا في صفحة html
اجعل الترويسة h1 بالخط 12px   والترويسة h2 باللون الأحمر
.............................................
س) لماذا تفضل طريقة css الخارجية عن الفردية ؟ ( tutorial )
consistency التوافق :أي أنها تطبق على كافة وسوم الصفحات لكن مع الفردية ستضطر إلى تنسيق سطر سطر.

س) ماذا يحدث لو طبقت التنسيق بطريقة خارجية وسطرية (فردية ) في نفس الوقت ؟ ( tutorial )
ستكون الأسبقية precedence للأقرب وهو الفردي حتى وإن كان على نفس الوسم.

س)لماذا يظهر الخط مختلفا من متصفح لآخر؟ ( tutorial )
لأن كل متصفح له طريقة معدة افتراضيا default

س) كيف تعطي تكتب تنسيق له نفس الصفات في ورقة css ؟ ( tutorial )
سنعمل Group Selectorمجموعة من الوسوم تفصلها فاصلة ثم الاقواس المتعرجة بداخلها القيمة (الصفات). مثال:

h1, h2, h3 {color:#FF0000; }

س) ما هي أنواع الـ selectors ؟ ( tutorial )
group-individual- descendant

س) أي توجد Parent Child Relationship مع ذكر مثال: ( tutorial )
في الـ descendant مثال:

#block1 p {color:#FF0000; }

وهي تعني وسم النص (الابن) داخل وسم (الكلتة الاولى ) بالتحديد وهي (الأب)

..................
أسئلة على الدرس 13
س) مما يتألف نموذج صنوق css ؟

1-content , 2-padding , 3-border , 4-margin

س) اذكر مثال لتعيين حدود الهامش بشكل عقارب الساعة ؟

margin:20px 10px 5px 30px;

هنا تطبيقات قد تكون متشابه
- مايكروسوفت ويب - Microsoft Expression -

مايكروسوفت اكسبريشن ويب | Microsoft Expression Web

13- مرحلة تخطيط الموقع | CSS Box Mode

أسئلة وتدريبات | تعلم بالممارسة | Microsoft Expression Web

2- إنشاء موقع جديد وبداخله صفحات | Microsoft Expression Web ~ Create a new site

الدرس السابق ( تعرف على مايكروسوفت اكسبريشن ويب )

نتعلم في هذا الدرس : أن الموقع عبارة عن مجموعة ملفات داخل ملف رئيسي

كيف ننشئ موقع جديد من خلال برنامج مايكروسوفت اكسبريشن ويب. والذي يتطلب ملف أساسي .
كما نتعلم كيف ننشيء ملفات أخرى للموقع لترتيب ملف خاص بـ الصور وورقة التنسيق scc , وملف الجافا, والصفحات ..الخ.

html = تركيب الموقع structure

css = التنسيق presentation

JS = الحركة action

إنشاء الملف الرئيسي :
هناك فيدوات مفيدة تشرح طريقة عمل والتعامل مع مايكرسوفت اكسبريشن ويب ومنها قناة
حيث يُقدم لنا 21 , أول فيدو عبارة عن مُقدمة عن البرنامج والهدف منه وما إلى ذلك , لذلك سأبدأ بالتعليق على الفيديو الثاني :

التعليق على الفيديو :
- يشرح طريقة التعامل مع القوائم وتثبيتها بالضغط على علامة الدبوس دون إزالتها وذلك يُتيح لك مزيد من المساحة مع إبقاء تلك اللوحة لحين الحاجة لاستخدامها.

- collapse أي : يسقط , ينهار ,collapsed هابط , واقع

- ما يهم معرفته أولا في اكسبريشن وب هو إنشاء موقع , ومعرفة إنشاء صفحات بداخله .
- كل موقع يجب أن يكون بداخل ملف مثلا اسمه Local stite folder أو كما يسميه البعض local root folder
مثلا: سأذهب إلى سطح المكتب وأنشئ عليه ملف فارغ اسميه sample site

سيكون هو الملف الذي نضع بداخله كل ما يخص موقعنا الذي سننشؤه.
- نعود إلى برنامج اكسبريشن وب , ومن قائمة
site
new site
general
Empty site

لجلب الملف الذي أنشأناه من مكانه مثلا كما انشأته على سطح المكتب Browse

نضغط دبل كلك لتأكد أن ما سنقوم به سيكون داخل الملف الذي اخترناه
open
ok
هنا نجد الملف في لوحة (قائمة الملف)

Folder list

- لاحظ أنك إذا ضغطت على لوحة folder list ستجد الامتداد الكامل لمكان هذا الملف. والذي يُسمى الملف الفرعي أو المحلي.
- أسوأ ما قد تقوم به عند العمل على إنشاء موقع هو إضافة صفحات وصور بشكل غير مرتب لذا فيُقترح بإنشاء ملفات لترتيب الصفحات والصور.

إنشاء الملفات (ملف صور) , (ملف ورقة أنماط css), (ملف الجافا سكريبت JS ) :
-يمكننا إنشاء هذه الملفات بالذهاب إلى الملف الذي أنشأنها أو يمكن القيام بذلك من داخل برنامج مايكروسوفت اكسبريشن وب أيضا. وذلك من خلال اللوحة المخصصة للملفات وهي
folder list
كلك يمين على اسم الملف
جديد new
ملف folder
ثم نسمي الملف , مثلا سنسميه images وسيكون مخصص للصور

- إن شئت فإنه بالإمكان أيضا فتح ملف الصور وفتح ملفات أخرى بداخلة للترتيب.
- بنفس الطريقة سأنشئ ملف واسميه css, ملف مهم خاص بأكواد أوراق الأنماط سنتعلم عنه لاحقا.
- أيضا سأنشئ ملف مهم واسميه javascript أو باختصار JS
وهكذا يمكننا انشاء ما نشاء من الملفات كتلك الخاصة بالمستندات وغيرها.

إنشاء صفحة :
والآن سنحتاج إلى إنشاء صفحة لموقعنا, فكيف ذلك؟
- بنفس الطريقة السابقة لكن سنختار HTML
folder list
كلك يمين على الملف الرئيسي
new-->HTML
-نسميها index.html لاحظ أن الامتداد هو نقطة ثم html

new page, new page, new page مايكروسوفت اكسبريشن وبب - وب

إنشاء صفحة داخل ملفات الموقع

قوانين التسميات:
- يجب أن تكون الأسماء للملفات والصفحات بالحروف الصغيرة .
- قد تسبب الأحرف الكبيرة مشاكل لذا يجب الابتعاد عن استخدامها.
- يمكن استخدام الارقام
- يمنع استخدام المسافة بين كلمتين
- ابتعد عن الرموز (كالنسبة المئوية , والدولار ..الخ)
- هناك رمزين فقط يمكن استخدامهما في التسمية هما الداش / , و الشرطة التحتية فقط _ . رغم ذلك ينصح بتجنبهما لانهما تأخذان مساحة من اسم الملف, أو اسم الصفحة.

- تُعد HTML اللغة الأساسية التي نستخدمها لإنشاء تركيب صفحاتنا.
- في سلسلة الفيدوهات هذه سنتعاملة مع 3 لغات مختلفة, وبشكل أساسي HTML و CSS , وقليلا من Javascript
-هناك أربعة خصائص لأي موقع ويب :
1- الخصائص التركيبية . (مثلا سيكون التركيب هنا HTML )
2- مظهر الموقع (وهو يتعلق بـ css )
أ- التنسيق ب-الموضع (مكان التنسيق)
3- المحتوى ( المقالات , الروابط, الصور , المستندات..الخ)
4- الحركة action , ما يحدث عن ضغط الأزرار وهكذا , وغالبا هذا يخص الجافا سكريبت JavaScript .

لماذا نستخدم الامتدادات عند تسمية الصفحات والمستندات ..الخ ؟
الامتداد هو ما يُخبرنا بنوع المستند. مثال
page.html صفحة نوع امتدادها html
here.PDF ملف امتداده pdf
وهكذا.

لذا عند إنشاءصفحة ويب تركيبها هو لغة html :
يجب أن نكتب اسم الصفحة ثم نقطة ثم html
عند إنشاء صفحة تنسيق بلغة css
يجب علينا بعد تسميتها أن نكتب نقطة ثم css
عند إنشاء صفحة بلغة الجافا سكريبت
نسميها ثم نقطة ثم نكتب الاختصار js

يمككنا تسمية صفحات الويب أي اسم نريد , لكن عادة فإن الصفحة الرئيسية ~~يجب أن يكون اسمها index.html~~
قلة من المواقع تسمي الرئيسية default.html أو home.html

* * واجهتني مشكلة في الروابط التشعبية لذلك سأدعها default كما هي

عندما نتنتهي من العمل على الموقع :
من القائمة site
close

يوجد في قائمة ملف file زري open و close
لكتهما لاغلاق صفحات ويب أو إغلاق ملف ما.

لكن ما ذكر عملة من قائمة site هو لإغلاق الموقع بأكملة وليس فقط الصفحات.

الفرق بين قائمتي site و file :
هي أن قائمة site تساعدك على إنشاء موقع .
أما file فهي عادة لإنشاء صفحات أو ملفات , وليس لها علاقة بإنشائ موقع كامل.

وعليه لفتح موققع قد أنشاته أذهب إلى قائمة site
open site

إذا أردت حذف الموقع من القائمة ولم ترد العمل عليه بعد ذلك:
site
manage site list
remove
done

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

انتهى التعليق على الفيديو.

الدرس التالي : مايكروسوفت اكسبريشن ويب

2015-05-28

كيف أنشئ جدول من خلال برنامج مايكروسوفت اكسبريشن ويب microsoft expression web

Microsoft Expression Web 4 Step by Step, HTML5, HTML,

تلوين خلفية الجدول

تلوين خلفية الجدول بواسطة برنامج مايكروسوفت اكسبريشن ويب

عادة إذا صممت في ويب اكسبريشن فإن ينشئ اسلوب ورقة انماط متتالية css , لذلك سأجعله يبدو يدويا فما ينشؤه في قسم الرأس سآخده إلى وسم الجدول كتطبيق فردي.

العمود الأول	العمود الثاني
A	D
B	E
C	F

بالنسبة للجدول السابق فهذا هو الكود الذي استخدمته له , مع العلم انه لا يوجد فيه تفاصل كثيره كثبات الخلايا, و نوع الحدود ..الخ
لاحظ أن الوسم الثنائي tr يرمز إلى الصف , وtd إلى العمود.

<body>
<table style="background-color: #FFFF00; width: 100%; width: 461px; height: 209px ; border: 1px solid #FF0000">
<tr>
<td >العمود الأول</td>
<td >العمود الثاني</td>
</tr>
<tr>
<td >A</td>
<td >D</td>
</tr>
<tr>
<td >B</td>
<td >E</td>
</tr>
<tr>
<td >C</td>
<td >F</td>
</tr>
</table>
</body>

هنا فيديو رائع يشرح طريقة إنشاء الجدول والتعامل معه في برنامج مايكروسوفت اكسبريشن:

2015-05-16

موقع لتوليد جدول html

يساعد الموقع التالي على توليد كود لجدول مصمم بواسطة html

html-generators

2015-04-09

1- برنامج مايكروسوفت وب اكسبرشن لتحرير وإنشاء المواقع Microsoft Expression Web

فهرس المواضيع ( Microsoft Expression Web )

يُعد برنامج Microsoft Expression Web من أهم البرامج الرسومية المُستخدمة لتصميم المواقع , حيث يُساعدك على إنشاء صفحات انترنت باستخدام لغة html وغيرها.

لتحميل البرنامج من موقع الأصلي (Microsoft Expression Web)

Microsoft,Step by Step,Fast,24 Hours,Illustrated,Expression,Web,Introductory,Studio,Teach Yourself,Professional,Dummies,Build,Website,Ultimate,,Design,All-in-One

ستجد بعض المعلومات التالية بعضها وليس كلها مُترجمة من أحد المصادر المُشار إليها:

ما الذي يقوم به الإصدار الأخير من مايكروسوفت اكسبريشن ويب؟

يقوم بإنشاء أو تحرير صفحات الويب
يمكن تحديثه إلى أحدث حزمة خدمة / تحديث
يقوم بإنشاء أو تحرير النصوص
من خلاله يمكن إنشاء وتحرير، واختبار CSS
الاتصال بأي من مواقع الويب الخاص بك أو الشبكة الداخلية
يقوم بإنشاء ملفات HTML أو CSS محلية
يمكن اختباره مع العديد من المتصفحات متعددة مع بنقرة واحدة
يمكن من خلاله إنشاء قوالب.

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

منتج مُستقل مُفيد لتصميم صفحة الويب :
ليس جزءا من مجموعة مايكروسوفت أوفيس إلا أنه مُنتج مستقل مُفيد لتصميم لصفحات الويب.
أعترف أني كنت مستخدم لبرنامج فرونت بيج ويب مؤلفا وناشرا أدوات. بالرغم أنه لم يكن مثاليا إلا أنني استخدمته لسنوات. الآن قد عزلت مايكروسوفت المنتج لأكثر من عدة سنوات. إن بديل فرونت بيج أفضل منه بألف مرة. كان على المنتج أن يكون مثل فرونت بيج حيث لا يُمكن أن يُنافس بمميزات أدوات نشر وتحرير مواقع الويب. كما علينا ألا ننسى أن امتدادات فرونت بيج غير الشهيرة أنها كانت لا يجب أن يتم تنصيبها على خادم ويب لأجل أن يعمل الفرونت بيج بشكل لائق. حتى وإن تم تنصيبها فإنه لا يمكن الاعتماد عليها وطالما قادة إلى التشويش و أشياء لا تعمل كما هو مُتوقع.

إن مايكروسوفت إكسبريشن ويب يُعد بديلا ممتاز. على الرغم بإنها ليست أخبار حول جودته وإصدراه إلا أنني ظننت أن علي أن أضيفه لـ (لهب بيجز) لأنه بدا أنه لطالما تذمرت من مايكروسوفت كما يفعل العديد, أو لربما كنت أحد هؤلاء الأشخاص الذين كانوا ضد التغيير. على العكس, لست ضد التغير إلا أنني أؤمن بالمقولة"إن لم يكن مكسورا فلا تصلحه". بدا شريط القوائم بالنسبة لي جيدا ألا أن فرونت بيج موهن في الواقع. رقم واحد, لا توجد امتدادات تحتاج جانب الخادم.

العديد من الخصائص المفيدة في إكسبريش ويب :
لدى اكسبريشن العديد من الخصائص التي قد أدرجها في المستقبل ولكن في الوقت الحالي, أعرف أن بإمكاني ذكر القليل من أنها التغييرات التي وجدتها جيدة جدا. لم تكن امتدادات فرونتبيج إلا مُعرقلة وثقيلة. كانت في كثير من الأحيان تقوم بهذه الأشياء. أيضا هناك إضافة جذابة في مايكروسوفت اكسبريشن ألا وهي المقدرة على إضافة العديد من أنواع البرمجة وبالتالي إمكانية التعرف على ملفات و امتدادات شيفرة PHP.

ترجمة عن المصدر الأساسي للمقال:

Free Web Page Design Software - Microsoft Expression Web 4, Design 4 for Graphics plus Free Microsoft Anti-virus

بدء العمل على اكسبرشن ويب:
عندما نفتح برنامج اكسبرشن ويب سنجد أمامنا لوحات العمل. إن لم تجدها يمكنك إظهارها بالضغط على تبويب panels
من هذه الإلواح :
1- اللوحة الكبيرة . توجد في الوسط , والتي عادة سننشئ بها صفحة الوب.
2- لوحة صندوق الأدوات toolbox وهو الصندوق الذي توجد به الوسوم.
3- لوحة تطبيق الأنماط apply styles وهي أنماط css
4- لوحة قائمة الملف Folder List وهي اللوحة الخاصة بـ الصفحات النشطة.
5- لوحة خصائص الوسم Tag Properties وهي اللوحة الخاصة بإضافة سمات إلى الشفرة نفسها.

Comprehensive, Studio ,learn programming

يُعد إنشاء موقع ويب في اكسبرشن وب كـ (مجلد ) توجد به كل الملفات اللازمة لانشاء صفحات وب مُترابطة ببعضها.
قرص صلب = خادم
أقصد أنك قد تعمل على ملفات صفحات الويب في كمبيوترك فتحفضها على قرص صلب لكنها في الحقيقة لم تظهر بعد على الانترنت حتى تنقلها (تودعها) إلى خادم.

كيف أقوم بإنشاء موقع جديد ,أو أفتح موقع موجود , أو استيراد محتوى من خلال برنامج اكسبريشن وب ؟
باستعمال قائمة موقع site .

هل أستطيع تنسيق صفحة ورقة أنماط مُتتالية css من خلال برنامج مايكروسوفت اكسبرشن ويب ؟
طبعا ! فهذه احد مميزات هذا الرنامج. وذلك من :
- ملف file
- جديد new
- صفحة page
* فيظهر مبربع حوار جديد new
- تخطيطات Css Layout

إدراج رسوم من خلال برنامج اكسبرشن ويب :
عادة وعند إدراج صورة ما في اكسبرشن وب فإن وسم <a> سيظهر تلقائيا.

أهم نقطتين هنا بخصوص الصور هما:
1- معرفة استيراد مجلد صور.
2-وضع صور في صفحة.
3- إضافة صورة خلفية للقسم.

ملاحظة : من مميزات برنامج اكسبريشن أنه يظهر رمز مثلث بداخله علامة تعجب عند وجود خطأ في الأكواد وتجد تحت الوسم الخاطئ خط أحمر متعرج أما إن لم يجد خطأ فستظهر علامة نوته خضراء تعني ان الأكواد سليمة.