فواصل » html & css http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 شرح اختيار خط معين في سي اس اس ثري css3 http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a7%d8%ae%d8%aa%d9%8a%d8%a7%d8%b1-%d8%ae%d8%b7-%d9%85%d8%b9%d9%8a%d9%86-%d9%81%d9%8a-%d8%b3%d9%8a-%d8%a7%d8%b3-%d8%a7%d8%b3-%d8%ab%d8%b1%d9%8a-css3/ http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a7%d8%ae%d8%aa%d9%8a%d8%a7%d8%b1-%d8%ae%d8%b7-%d9%85%d8%b9%d9%8a%d9%86-%d9%81%d9%8a-%d8%b3%d9%8a-%d8%a7%d8%b3-%d8%a7%d8%b3-%d8%ab%d8%b1%d9%8a-css3/#comments Wed, 01 Feb 2012 15:03:42 +0000 http://www.portal.fwasl.com/?p=12878 بسم الله الرحمن الرحيم

شرح اختيار خط معين في سي اس اس ثري css3

خاصية font-face

خاصية font-face مخصصة لوضع تفاصيل الخط الذي تريد إضافته إلى تنسيق الصفحة، مثل نوع خط وعنوان الخط. وتكتب قبل تنسيق الفقرة أو العنوان أو النص الذي تريد تنسيقه بشكل عام. تكتب هذه الخاصية كما توضح شفرة CSS التالية:



@font-face {

–

}

لو إفترضنا أننا نريد إستخدام خط Delicious في عنوان للفقرة، نحدد الخط وعنوانه الخارجي في خاصية font-face بهذه الطريقة:

@font-face {

  font-family: Delicious;

 src: url(Delicious-Bold.otf);

}

كما أنه يفضل أن يكون عنوان الخارجي للخط مرافق لملف CSS أو يمكنك كتابة عنوانه المحدد، في المثال السابق ستجد أن عنوان الخط يشير إلى Delicious-Bold.otf وهو موجود بجانب ملف CSS.

مثال عملي: إختيار خط لعنوان فقرة

المثال الذي سأطرحه بسيط جداً عبارة عن عنوان وفقرة، بحيث يتم تنسيق العنوان بأحد الخطوط الذي أستخدمها في تصاميمي وهو خط Hacen Typographer Bold، قبل عرض المثال أبدأ في المثال نقوم بعرض شفرة HTML الخاصة بالدرس:

<h2>تطبيقات على CSS3</h2>

<p>نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.</p>

<p>عند الإنتهاء  من جميع دروس هذه السلسلة سأضع قائمة الدروس من خلال هذه   التدوينة، لتكون مرجع لها بشكل دائم وهو سبب كتابتي لهذا الموضوع. لن أضع   أي عنوان حالياً ولكن سأبدأ بكتابة دروس CSS3 خلال هذه الأيام وتحديث هذه   التدوينة مع كل درس جديد.</p>


بعد ذلك نستخدام خاصية font-face في تحديد خط Hacen Typographer Bold بإسمه وعنوانه:

@font-face {

font-family: Hacen Typographer Bold;

src: url(Hacen Typographer Bold.ttf);

 font-weight: bold;

}

يجب يكون خط Hacen Typographer Bold موجود بجانب ملف CSS حسب ما يشير عنوان الخط في الشفرة السابقة، إضافةً إلى تحديد الخط في عنوان الفقرة (فقرة تطبيقات على CSS3) من خلال شفرة CSS التالية:

h2 {

 font-family: Hacen Typographer Bold;

}

هذه الصورة تمثل النتيجة كاملة عبر متصفح Safari:

طريقة إختيار الخط لإستخدامه في التصميم

عند إختيارك للخطوط المناسبة لك فإن نتيجة ظهور هذه الخطوط ستكون في كاملة في متصفح Safari، الإصدارات الأخيرة من متصفح Firefox و Opera لا يدعمان إختيار الخطوط بشكل صحيح وخاصة عند إختيار خط عربي ولكن النتيجة تظهر بشكل ممتاز في متصفح Safari وهذا بفضل ميزة تنعيم الخط Font Smoothing، هذه صورة للمثال السابق في عدة متصفحات بإستخدام خاصية font-face:

لذا أنصح بإستخدام بدائل لخاصية font-face إذا لم يدعم المتصفح الخاصية بشكل صحيح، يمكنك رؤية بعض تفاصيل دعم متصفح الفايرفوكس لخاصية Font-Face مع المقارنة ببقية المتصفحات على سبيل المثال.

]]> http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a7%d8%ae%d8%aa%d9%8a%d8%a7%d8%b1-%d8%ae%d8%b7-%d9%85%d8%b9%d9%8a%d9%86-%d9%81%d9%8a-%d8%b3%d9%8a-%d8%a7%d8%b3-%d8%a7%d8%b3-%d8%ab%d8%b1%d9%8a-css3/feed/ 0 عمل تكبير وتصغير لعنصر معين بالنقر http://portal.fwasl.com/%d8%b9%d9%85%d9%84-%d8%aa%d9%83%d8%a8%d9%8a%d8%b1-%d9%88%d8%aa%d8%b5%d8%ba%d9%8a%d8%b1-%d9%84%d8%b9%d9%86%d8%b5%d8%b1-%d9%85%d8%b9%d9%8a%d9%86-%d8%a8%d8%a7%d9%84%d9%86%d9%82%d8%b1/ http://portal.fwasl.com/%d8%b9%d9%85%d9%84-%d8%aa%d9%83%d8%a8%d9%8a%d8%b1-%d9%88%d8%aa%d8%b5%d8%ba%d9%8a%d8%b1-%d9%84%d8%b9%d9%86%d8%b5%d8%b1-%d9%85%d8%b9%d9%8a%d9%86-%d8%a8%d8%a7%d9%84%d9%86%d9%82%d8%b1/#comments Sun, 08 Jan 2012 14:38:45 +0000 http://www.portal.fwasl.com/?p=7645 في تلميح سريع الفيديو اليوم، وسوف تظهر لك أسلوب أنيق : سنستخدم CSS سهل وبسيط لتقليد أحداث فوق. المفتاح هو استخدام مفيدة : فئة المستهدفة الزائفة.

الفيديو اليوم سوف يقوم بعمل اسلوب عرض أنيق لمحتوي موقعك او لعناصر معينه في الموقع تقوم بتسليط الضوء عليها باستخدام CSS :

[html]

view plaincopy to clipboardprint?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
figure { background: #e3e3e3; display: block; float: left;}
#zoom {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}

/* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoom:target {
width: 400px;
}
</style>
</head>
<body>
<h1> "Click" Effect with CSS </h1>
<figure>
<img id="zoom" src="http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" />
<figcaption>
<ul>
<li>
<a href="#zoom">Zoom In</a>
</li>
<li>
<a href="#">Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
[/html] ]]> http://portal.fwasl.com/%d8%b9%d9%85%d9%84-%d8%aa%d9%83%d8%a8%d9%8a%d8%b1-%d9%88%d8%aa%d8%b5%d8%ba%d9%8a%d8%b1-%d9%84%d8%b9%d9%86%d8%b5%d8%b1-%d9%85%d8%b9%d9%8a%d9%86-%d8%a8%d8%a7%d9%84%d9%86%d9%82%d8%b1/feed/ 1 أعمده متفرقه CSS http://portal.fwasl.com/%d8%a3%d8%b9%d9%85%d8%af%d9%87-%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87-css/ http://portal.fwasl.com/%d8%a3%d8%b9%d9%85%d8%af%d9%87-%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87-css/#comments Sun, 08 Jan 2012 14:37:34 +0000 http://www.portal.fwasl.com/?p=7641 قامت CSS3 بتقديم هذا النوع من الأعمده وكانت نادرا ما تستخدم ولكن الأن اتسع نطاق استخدامها فهي حاليا المعتمده بجميع مستعرضات الموزيلا ولكن لا يوجد دعم لها في الفايرفوكس ولكن ساريكم الأن فيديو سريع يقوم بتعليمها لك

[html] #container p {
-webkit-column-count: 3;
-webkit-column-gap: 10px;

-moz-column-count: 3;
-moz-column-gap: 10px;

column-count: 3;
column-gap: 10px;
}
[/html]

column-count: عدد المطلوب من الأعمدة للعنصر.
column-gap:الحشو بين كل عمود.
column-rule: يمكن استخدامها لتحديد الحدود ، ومقسم لكل عمود : عمود القاعدة.
column-width: يستخدم لدولة على وجه التحديد عرض كل عمود.

يرجى ملاحظة أنه يجب علينا اختصار كل خاصيه مع webkit أو moz، وفقا لذلك، لذا : : -webkit-column-count.
هل تستخدم CSS columns في موقعك ؟ اذا كانت الإجابه لا,فلم لا ؟!!

]]> http://portal.fwasl.com/%d8%a3%d8%b9%d9%85%d8%af%d9%87-%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87-css/feed/ 2 عده طرق لتحسين علاقه تصميم عملائك بمحركات البحث http://portal.fwasl.com/%d8%b9%d8%af%d9%87-%d8%b7%d8%b1%d9%82-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%82%d9%87-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d9%85%d8%ad%d8%b1/ http://portal.fwasl.com/%d8%b9%d8%af%d9%87-%d8%b7%d8%b1%d9%82-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%82%d9%87-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d9%85%d8%ad%d8%b1/#comments Sun, 08 Jan 2012 14:35:53 +0000 http://www.portal.fwasl.com/?p=7635 من التحديات الكبيرة التي تواجه مستقبل الأعمال علي الويب هو الظهور والهيمنة علي نتائج محركات البحث ، وبالأخص جوجل .. حيث جوجل يمتلك نصيب الأسد من سوق محركات البحث كمثال داخل الولايات المتحدة بنسبه 90% ، ويمكن استخلاص قاعدة أن جوجل هو الهدف الأول في أي خطه تسويقية عبر الويب والجميع يريد أن يظهر رقم 1 بناء علي كلمات مفتاحيه معبره عن نشاط الموقع ولكن قليل من ينجح بذلك !!
وكونك مصمم ويب هناك بعض القواعد التي تساهم وبفاعليه في حصول موقع عميلك علي نسبة لا بأس بها من كعكه محركات البحث وبالأخص جوجل من خلال بعض الخطوات التي تمشي عليها وهي :

1- أنشي مدونه بالموقع Make Blog :
حيث وجود مدونه بموقع العميل يكتب فيها بصفه دوريه قدر الأمكان ، ومن هنا تحصل هذه المدونه علي محتوي جديد وحبذا أن يكون متميز وفريد وبهذا ستحقق من هذه المدونه الكثير من الزيارات والترافيك من خلال الزوار .
وكون المدونة متاحة للزوار سيكون هناك مجال لمشاركه هذه المواضيع عبر المواقع الأجتماعيه مثل الفيس بوك وتويتر …إلخ ، وأيضا التعليقات والتفاعل مع موقعك ، وهذه الأشياء تساهم بقوة في شعبيه موقعك ومع مرور الوقت ستسع قاعدة بيانات مدونتك وتجد أن لديك محتوي قيم يستقطب الزوار عبر محركات البحث مما يحقق بالفائدة الكاملة لموقعك ككل .

2- أشترك بخدمه : Google Analytics :
هذه الخدمة أصبحت شائعة الاستخدام لدي مجتمع الويب ماسترز حيث تتيح لهم إحصاءات حقيقة ودقيقه حول نشاط الموقع اليومي أو الشهري من حيث معدل الزيارات ، المحتوي الأكثر زيارة ، معدل مشاهدة الصفحات وأيضا فترة بقاء الزائر بموقعك ورسوم بيانيه مكثفه لتبسيط الأمور Charts والكثير من المزايا الموجودة بهذه الخدمة المجانية من جوجل ، ومن خلالها تتعقب الزوار وتعرف اهتمامهم اليومي ومصادر ترافيك موقعك مثلا الزوار من أين جاءوا ، والكلمات أو المحتوي الذي يبحثون عنه .
ويمكنك من كل هذا استقطاب الزوار والاهتمام بموقعك ودفعه نحو الأفضل من خلال هذه الإحصاءات .

3- قلل من الأكواد المكتوبة بموقعك Code Mess :
أي موقع سواء ثابت أو ديناميك مبرمج من خلال لغه برمجه معينه يتم وضعه علي الويب ليظهر لنا بشكل نتائج كصفحات HTML وهذه الأكواد عاده ببعض المواقع تكون كبيرة ومتضخمة ومتشعبة في حالة كونك لا تستخدم تقنيات التكويد الحديثة مثل Xhtml,css ، وأيضا كثره استخدام الجافا سكربيت وغيرها من الكماليات التي يتفنن بعض أصحاب المواقع العربية بوضعها وهذه الأكواد لها نتائج سلبية علي موقعك في محركات البحث .

عناكب محركات البحث Spiders همها الأول هو المحتوي ، والمحتوي هذا يجب أن يكون فريد ومكتوب بطريقه دلالية Semantic ومعبر ومن خلال هذا ستحصل علي رتبه أعلي بمحركات البحث ، ومن ثم ستكسب شعبيه أكبر لموقعك ولكن مع فرط الاستخدام بالأكواد سيتضخم الكود المنتج من موقعك مما يعيق عناكب محركات البحث ، وأيضا هذا له وجه أخر سيئ وهو بطء تصفح موقعك Loading Time وينعكس علي الزوار ، لذا تجنب استخدام أكواد الجافا سكربيت المفرط وحاول تستخدم تقنيات الويب الدلالية الحديثة Tabless Semantic Xhtml,css وأيضا عند استخدام أي تقنيه من Java script , Css حاول تضعها بملف خارجي External حتى تتخطها محركات البحث وتصل بشكل أسرع إلي المحتوي وذلك بالنهاية هو الأهم لهذه العناكب .

4- أجعل محتوي موقعك مميز وفريد Unique Content :
لعل كثير من يسمع عن هذه القاعدة وهي أن المحتوي هو الملك ويجب أن يكون المحتوي جديد ومميز مثلا كونك تكتب بالموقع عن تقنيه البرمجه php كمثال يجب أن تكتب شيئ جديد ومميز ولا أقول أن تخترع شيئ جديد ولكن حاول حتى بأسلوب صياغة محتوي الموقع والوصف أن تستخدم مفردات جديد وبالنهاية كل الطرق تؤدي لروما ، ومع هذا التميز بالمحتوي سيحصل موقعك علي شعبيه أكثر بمحركات البحث وحاول أيضا أن يكون المحتوي الداخلي لموقعك مثلا كصفحـات أن يكون مميز وهذا له انعكاس أيحابي ممتاز علي شعبيه موقعك بمحركات البحث وتجنب تكرار المحتوي ونقل المحتوي كنسخ ولصق من المواقع الأخرى لأنه هذا له أثر سلبي علي موقعك ، وسيتم تجاهله من قبل محركات البحث ويعاقب من قبل جوجل .. لأن محركات البحث لم تعاد بسذاجة الماضي وأصبحت تستخدم خوارزميات ذكيه تهدف إلي معرفه كون هذا المحتوي فريد أو مستهلك .
الجانب الأخر إذا أردت أن تنقل أي محتوي من موقع أخر حاول أن تنقله بشكل مختلف وتستخدم مفردات مختلفه وهذا الأمر سيكون الحل السحري لعدم معاقبتك من قبل جوجل .

5- استخدام حقل الوصف Meta Tag :
الجميع يستخدم محركات البحث وبالأخص جوجل وإذا افترضت أنك قمت بالبحث عن موقع ما سيظهر لك اسم الموقع والرابط ووصف مصغر له ، وهذا هو حقل الوصف Meta Description التي يتم إضافته من قبل القائمين علي الموقع ، لذا احرص علي استخدام وصف مميز ومعبر عن موقعك ويجب إلا يزيد عن 160 حرف مع المسافات ولهذا استخدم وصف معبر ومميز للحصول علي اهتمام الزوار وحثهم علي زيارة موقعك

6- أحذف الكلمات المكررة بموقعك Repeated words :
دائما أصحاب الموقع يلجئون لبعض الحيل الغريبة ويعتقدون أنها بمصلحه الموقع من حيث تكرار بعض الكلمات أو الجمل بموقعك والتركيز عليها ، ولكن محركات البحث والحديث هنا عن جوجل بالأخص أنه لا يحب تكرار الكلمات ولا المحتوي المتكرر بشكل عام علي مستوي الويب ولا موقعك بشكل أدق ، لذا تجنب قدر الأمكان تكرار الكلمات وأبحث دائما عن التميز بمحتوي موقعك من حيث كل صفحه وبهذا الأمر ستنال شعبيه أكبر عبر محركات البحث .

7- أضف شريط تنقل لموقعك عبر الهيدر أو الفوتر Navigation Bar :
كثير من التقنيات الحديث لصناعه الويب كمثال الفلاش يوفر بيئة غنية ورائعة للتصميم ولكنه علي الجانب الأخر مضر بشكل كبير لمحركات البحث ولنفرض أنك قمت بتصميم شريط التنقل بالهيدر Navigation Menu بموقعك بشكل فلاشي بهذا الأمر أن لم تتيح لعناكب محركات البحث معرفه هذا الأمر وبالتالي ستتجاهله ولعلاج هذا الأمر يمكنك وضع شريط أخر كنصوص متشعبه Links في الفوتر ويجب عليك أن تضع وصف لهذه الروابط النصية وبهذا تخبر عناكب البحث عن هذه الروابط والتي ستفيدك بشكل قوي في SEO .

8- ضع الرئيسيات في صفحات مستقلة Main Content :
الرئيسيات هي المحتويات الأهم والأكثر تعبيراً حول موقعك ولنفترض موقعك متخصص بصناعه السيراميك أو الأقمشة فبالتالي لابد أنك تقدم مثلا خدمات الغزل والنسيج ..إلخ
لذا احرص علي وضع هذه الخدمات بصفحه مستقلة لكل خدمه وأن تضع نص متميز لشرح هذه الخدمة التي تقدمها ، ومن هذا المنطلق ستجد أن محركات البحث ستقوم بأرشفة هذا المحتوي وتحصل علي شعبيه أكثر بمحركات البحث أي باختصار .. حاول أن تخصص مساحات كبيرة لخدماتك الرئيسيه عبر الموقع ولا تضعها كلها بصفحه واحده لأن هذا له أثر أيحابي عبر محركات البحث .

9- استخدام عنوان مميز ومعبر لكل صفحه Unique & descriptive Title :
العنوان هو أول شيئ ينظر له المستخدم أثناء تحميل صفحه معينه بموقعك .. لذا احرص دائما علي استخدام عنوان الصفحه الذي يظهر بالأعلى في المتصفح بشكل صحيح ومن خلال وصف مميز لموقعك ووضع كلمات مفتاحيه معبره ، وحبذا لو تضع أيضا اسم شركتك أو الاسم الموقع ولكن كل هذا في ظل 60 حرف مع المسافات لذا احرص علي تميز عنوان صفحتك وأن تكون معبره قدر الأمكان .

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

]]> http://portal.fwasl.com/%d8%b9%d8%af%d9%87-%d8%b7%d8%b1%d9%82-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%b9%d9%84%d8%a7%d9%82%d9%87-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%b9%d9%85%d9%84%d8%a7%d8%a6%d9%83-%d8%a8%d9%85%d8%ad%d8%b1/feed/ 0 قضايا الرسم JPanel http://portal.fwasl.com/%d9%82%d8%b6%d8%a7%d9%8a%d8%a7-%d8%a7%d9%84%d8%b1%d8%b3%d9%85-jpanel/ http://portal.fwasl.com/%d9%82%d8%b6%d8%a7%d9%8a%d8%a7-%d8%a7%d9%84%d8%b1%d8%b3%d9%85-jpanel/#comments Sun, 08 Jan 2012 14:34:16 +0000 http://www.portal.fwasl.com/?p=7632 أهلا بكم من جديد الأن لدي

– JFrame بسيطة
– وقمت بعمل JPanel صغيره تسمي ‘ContentPane’

[html] contentPane = new JPanel();
contentPane.setBackground(SystemColor.window);
contentPane.setBorder(new LineBorder(SystemColor.inactiveCaption));
contentPane.setLayout(null);
setContentPane(contentPane);
[/html]

الـ JFrame لديها :

[html] JMenuBar -> JMenuBar -> JMenuItem
[/html]

– لديه JMenuItem MouseListener و “mouseReleased’
– في الداخل استدعي mouseReleased

[html] TestPanel p = new TestPanel(null, new Vector2(12, 12));

contentPane.add(p);
[/html]

– عندما يتم تشغيل الحدث يقوم بعمل TestPanel صغيرة ، ولكن 5 مم في الارتفاع، يجب أن تكون أكبر بكثير بكثير.

– إذا انتقلت إلىTestPanel خارج الحدث (بحيث يتم instanced في TestPanel ) فإنه يتم رسمها بشكل جيد.

انتهي :)

]]> http://portal.fwasl.com/%d9%82%d8%b6%d8%a7%d9%8a%d8%a7-%d8%a7%d9%84%d8%b1%d8%b3%d9%85-jpanel/feed/ 0 العناصر الدلاليه الأقل شهره في html http://portal.fwasl.com/%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a7%d9%84%d8%af%d9%84%d8%a7%d9%84%d9%8a%d9%87-%d8%a7%d9%84%d8%a3%d9%82%d9%84-%d8%b4%d9%87%d8%b1%d9%87-%d9%81%d9%8a-html/ http://portal.fwasl.com/%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a7%d9%84%d8%af%d9%84%d8%a7%d9%84%d9%8a%d9%87-%d8%a7%d9%84%d8%a3%d9%82%d9%84-%d8%b4%d9%87%d8%b1%d9%87-%d9%81%d9%8a-html/#comments Sun, 08 Jan 2012 14:32:18 +0000 http://www.portal.fwasl.com/?p=7623 تسليط الضوء على معلومات الاتصال:

عنصر العنوان هو على الارجح العنصر الأكثر اهميه ويساء فهمه في الـ HTML. للوهلة الأولى ، مع اسم مثل “عنوان” يبدو أنه يستخدم لتغليف عناوين البريد الإلكتروني ، والبريد أو غير ذلك. هذا هو جزء فقط في القضية.

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

[html] <address>
<span>Mark Norman Francis</span>,
<span>1-800-555-4865</span>
</address>
[/html]

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

[html] <p>© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>
[/html]

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

مثل هذه :

[html] <p> Our company address: </p>
<address>
Opera Software ASA,
Waldemar Thranes gate 98,
NO-0175 OSLO,
NORWAY
</address>
[/html]

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

[html] <p>It is bad form to use event handlers like
<code>onclick</code> directly in the HTML.</p>
[/html]

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

[html] <p>It is bad form to use event handlers like
<code>onclick</code>
directly in the HTML.</p>
[/html]

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

[html] <p>The value of <var>x</var> in
3<var>x</var>+2=14 is 4.</p>

<pre><code>
my <var>$welcome</var> = "Hello world!";
</code></pre>
[/html]

المختصرات

يتم استخدام عناصر اختصار للإشارة حيث تستطيع وضع الاختصارات،
يحصل التفاف النص الذي هو اختصار في العنصر abbr, acronym، ويتم وضع النسخة الكاملة في سمة العنوان ، ومثل ذلك :

[html] <p>Styling is added to
<abbr title="Hypertext Markup Language">HTML</abbr> documents
using <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
[/html]

جمل التعاريف :
هناك الكثير من الجدل حول عنصر الdfn في اللغه وعنصر الـ dt فهو يعني عمل تمييز لتعريف معين مثل المثال التالي ك

[html] <p><dfn>HTML</dfn>: HTML stands for "HyperText Markup Language". This is
the language used to describe the contents of web documents.</p>\

[/html] ]]> http://portal.fwasl.com/%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a7%d9%84%d8%af%d9%84%d8%a7%d9%84%d9%8a%d9%87-%d8%a7%d9%84%d8%a3%d9%82%d9%84-%d8%b4%d9%87%d8%b1%d9%87-%d9%81%d9%8a-html/feed/ 0 أساسيات النماذج في html http://portal.fwasl.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%81%d9%8a-html/ http://portal.fwasl.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%81%d9%8a-html/#comments Sun, 08 Jan 2012 14:28:34 +0000 http://www.portal.fwasl.com/?p=7618 الخطوة الاولي : الرموز الأساسية

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

[html] <form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
[/html]

الخطوة الثانية : إضافة الهيكل وسلوكه

بذلك ، ضغطت على النموذج رقم 1 الرابط أعلاه، تعبئته والنقر إرسال، لماذا لم تفعل أي شيء ، والسبب أنها لا تبدو سيئة جدا وكلها في سطر واحد؟ الجواب هو أن لايوجد لديك تنظيم او شكل لتقديمه بها حتي الان

دعونا نعود الى لوحة الرسم، مع نموذج جديد :

[html] <form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="http://www.opera.com" />
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</li>
</ul>
</form>
[/html]

الخطوة الثالثة : إضافة معاني الكلمات والأسلوب

النسخة النهائية التالية من النموذج بلدي على سبيل المثال :

[html] <form id="contact-form" action="script.php" method="post">
<fieldset>
<legend>Contact Us:</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<label for="mailing-list">Would you like to sign up for our mailing list?</label>
<input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" />
</li>
<li>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</li>
</ul>
</fieldset>
</form>
[/html] ]]> http://portal.fwasl.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%86%d9%85%d8%a7%d8%b0%d8%ac-%d9%81%d9%8a-html/feed/ 0 الجداول بـ html http://portal.fwasl.com/%d8%a7%d9%84%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%a8%d9%80-html/ http://portal.fwasl.com/%d8%a7%d9%84%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%a8%d9%80-html/#comments Sun, 08 Jan 2012 14:25:46 +0000 http://www.portal.fwasl.com/?p=7613 ان مهمه انشاء الجدول أبسط مما تتخيل ركز معي في الخطوات البسيطه التاليه
الجدول الأول يشبه ذلك :

[html]</pre>
<table>
<tbody>
<tr>
<td>Volcano Name</td>
<td>Location</td>
<td>Last Major Eruption</td>
<td>Type of Eruption</td>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<td>Mt .St. Helens</td>
<td>Washington</td>
<td>1980</td>
<td>Explosive Eruption</td>
</tr>
</tbody>
</table>
<pre>
[/html]

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

Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt .St. Helens Washington 1980 Explosive Eruption

: الجدول من الضروري الإشارة إلى المتصفح الذي ترغب في ترتيب المحتوى بطريقة جدوليه.: العنصر tr يحدد صف الجدول. هذا يسمح للمتصفح لتنظيم أي محتوى بينولبه بطريقة أفقية ، أو كل على التوالي.

: العنصر TD يعرف كل خلية الجدول أو الفضائية الفردية عن المحتوى داخل الصف.[html]</pre>
<table>
<tbody>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
<pre>
[/html]

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

[html]</pre>
<table><caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
<tbody>
<tr>
<th>Volcano Name</th>
<th>Location</th>
<th>Last Major Eruption</th>
<th>Type of Eruption</th>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<td>Mt. St. Helens</td>
<td>Washington</td>
<td>1980</td>
<td>Explosive Eruption</td>
</tr>
</tbody>
</table>
<pre>
[/html]

وهذا الكود يمثل ذلك

Recent Major Volcanic Eruptions in the Pacific Northwest
Volcano Name Location Last Major Eruption Type of Eruption
Mt. Lassen California 1914-17 Explosive Eruption
Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Washington 1980 Explosive Eruption

ولشكل أظرف واشيك يمكنك عمل هذه التنسيقات الأتيه :

[html] body {
background: #ffffff;
margin: 0;
padding: 20px;
line-height: 1.4em;
font-family: tahoma, arial, sans-serif;
font-size: 62.5%;
}

table {
width: 80%;
margin: 0;
background: #FFFFFF;
border: 1px solid #333333;
border-collapse: collapse;
}

td, th {
border-bottom: 1px solid #333333;
padding: 6px 16px;
text-align: left;
}

th {
background: #EEEEEE;
}

caption {
background: #E0E0E0;
margin: 0;
border: 1px solid #333333;
border-bottom: none;
padding: 6px 16px;
font-weight: bold;
[/html]
]]> http://portal.fwasl.com/%d8%a7%d9%84%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%a8%d9%80-html/feed/ 0 شرح بناء موقع بروابط html http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a8%d9%86%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d8%a8%d8%b1%d9%88%d8%a7%d8%a8%d8%b7-html/ http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a8%d9%86%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d8%a8%d8%b1%d9%88%d8%a7%d8%a8%d8%b7-html/#comments Sun, 08 Jan 2012 14:24:19 +0000 http://www.portal.fwasl.com/?p=7608 ما هي الروابط؟

الروابط هي جزء من موقع على شبكة الانترنت (تم إنشاؤه عادة باستخدام HTML، ولكن ليس دائما) والتي تشير إلى موارد أخرى، غيرها من وثائق HTML ، ملفات نصية ، ملفات PDF وغيرها وهناك روابط والتي ينبغي اتباعها تلقائيا من قبل المتصفح ، التي تم إنشاؤها باستخدام عناصر الارتباط

(لقد واجهت بالفعل بعض هذه المواد في وقت سابق، كانت تستخدم لاستيراد ملفات CSS في وثيقة HTML) ثم هناك الروابط التي يتم اختياري للمستخدم للتنشيط. وتسمى هذه المراسي، ويمكنك إضافتها إلى المستند باستخدام عنصر.

[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>A link to the YDN</h1>
<p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>
[/html]

سيتمكن الزوار من تفعيل هذا الرابط (إما عن طريق النقر عليها بالماوس، أو تفعيله مع لوحة المفاتيح أو صوت في بعض الحالات) مغادرة الموقع الحالي والانتقال إلى YDN. هناك المزيد من التغييرات يحدث لتربط نفسها، وسنرى في وقت لاحق عنهم عندما نتحدث عن التصميم الارتباط.

اللينك أو المرساه يكون له خصائص أو صفات متعدده :

HREF – المورد الذي يشير إليه (إما ملف خارجي أو هوية المرساة).
id – هو وصله لشئ معين في الصفحه وليس عباره عن لينك او شئ من هذا القبيل.
title – اللقب الاضافي من المعلومات حول الموارد الخارجية.

تابع معي هذا المثال سوف تتعلم كيفيه عمل روابط دخليه داخل الموقع نفسه وليست لينكات لمواقع علي الت ولكن في نفس الصفحه او لينك الي صفحه أخري داخل الموقع نفسه :

[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Different Link examples</h1>

<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>

<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec2">Section #2</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec3">Section #3</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec4">Section #4</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec5">Section #5</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
</div>

<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
</ul>

</body>
</html>
[/html]

ولعمل مزيد من المعلومات من الممكن عمل رابط تندرج تحته تفاصيل أو معلومات اكثر عن قائمه مثلا او شء من هذااقبيل انظر معي هذا المثال :

[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer Network is the main hub for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) and the Design Patterns repository" href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
</ul>

</body>
</html>
[/html]

أما لعمل رابط معين بين موقعك وبين عنوان أي موقع أخر علي شبكه الأنترنت يمكنك عمل رابط بالطريقه التاليه :

[html] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>

<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>

</body>
</html>
[/html] ]]> http://portal.fwasl.com/%d8%b4%d8%b1%d8%ad-%d8%a8%d9%86%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d8%a8%d8%b1%d9%88%d8%a7%d8%a8%d8%b7-html/feed/ 0 الصور في HTML http://portal.fwasl.com/%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d9%81%d9%8a-html/ http://portal.fwasl.com/%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d9%81%d9%8a-html/#comments Sun, 08 Jan 2012 14:22:18 +0000 http://www.portal.fwasl.com/?p=7603 انواع الصور المختلفه علي صفخه الأنترنت صور الخلفيه والمضمون:

هناك طريقتان رئيسيتان لإضافة الصور إلى الوثيقة : صور المحتوى باستخدام عنصر img والصور الخلفية المطبقة على العناصر باستخدام CSS. عند استخدام ما يعتمد على ما تريد القيام به :

إذا كانت الصورة في مضمون الوثيقه ينبغي ادراجها بعنصر الـ img.
إذا كانت الصورة يراد وضعها بتنسيق معين او كخلفيه لابج من تنسيقها باستخدام css.

 عنصر img وخصائصه

إضافة صورة إلى مستند HTML من السهل جدا استخدام عنصر الـ img. الوثيقة التالية HTML (inlineimageexample.html في ملف مضغوط) يعرض balconyview.jpg الصورة في مستعرض.

صور الخلفية مع CSS

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

[html] background-image:url (ball.gif);
background-color:#eee;
[/html] ]]> http://portal.fwasl.com/%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d9%81%d9%8a-html/feed/ 0