أنواع W3C Coding

alaudi · 03-05-2008, 04:28 PM

ما الفرق ومميزات كل من :

W3C Valid HTML 4.01

W3C Valid XHTML 1.0 Transitional

W3C Valid XHTML 1.0

nardgo · 08-05-2008, 05:10 AM

السلام عليكم و رحمة الله و بركاته

اخي العزيز اعتقد انك تقصد ما يطلق عليه إخطار بأنواع المستندات (Document Type Declaration) و يطلق عليها اختصاراً (DTD) او (Doctype) و هو عنصر يختلف عن جميع العناصر في ملفات الـ HTML او الـ XHTML حيث يجب ان يتواجد في السطر الأول و لا تنطبق عليه ما ينطبق على باقي العناصر من شروط، و عن طريق هذا العنصر يستطيع المتصفح ان يتعرف على نوع الملف (سواء HTML او XHTML) و بالتالي يتعامل معه على هذا الأساس و يوجد العديد من أنواع المستندات و هي:

- في حالة ملف نوعه HTML
يوجد ثلاثة دوكتايب في هذه الحالة و هم:

1 - نوع المستند (Strict): في هذه الحالة فإنك غير مسموح لك بإستخدام العناصر مثل (font, b, i) و هي العناصر التي تستخدم لتحديد نمط معين للصفحة مثل حجم معين للنص او تحديد لون للنص و هكذا، و يجب بدلاً من استخدام هذه العناصر ان تستخدم العناصر القياسية بالإضافة لإستخدام ملفات الأنماط المتعاقبة (CSS)

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2 - نوع المستند (Transitional): في هذه الحالة يمكنك المزج بين العناصر الغير قياسية التي ذكرنا بعضها بالإضافة للعناصر القياسية، و هذه الحالة كانت في الاساس حالة انتقالية (كما هو واضح من اسمها) و الغرض منها كان استخدام العناصر الغير قياسية الخاصة بتحديد نمط معين للصفحة في حالة انك تعرف بأن زوارك يأتون لك من متصفحات لا تدعم ملفات الأنماط المتعاقبة (CSS)

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3 - نوع المستند (Frameset): في هذه الحالة يمكنك المزج بين العناصر الغير قياسية و القياسية مثلما تفعل في نوع المستند (Transitional) مع إختلاف بسيط و هو عدم وجود عنصر body و بديله هو عنصر frameset، و يستخدم هذا النوع اذا كانت صفحتك تحتوى على إطارات (frames)

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

- في حالة ملف نوعه XHTML
يوجد ايضاً ثلاثة دوكتايب و هم:

1 - نوع المستند (Strict): نفس الشرح الخاص بهذا النوع من المستند في HTML

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2 - نوع المستند (Transitional): نفس الشرح الخاص بهذا النوع من المستند في HTML

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3 - نوع المستند (Frameset): نفس الشرح الخاص بهذا النوع من المستند في HTML

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

اذا وجدت اي نقطة في الشرح غامضة او ملتبسة عليك، لا تتردد في سؤالي مجدداً

تحياتي
احمد حازم

ceprya · 08-05-2008, 07:31 AM

حقيقه ودي بسؤال ومتأكد مع التطبيق بأعرف الخطأ

سورس صفحه رئيسيه

بعمل تطبيق كود html صحيح

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//AR">
<html>
<head>
<title>

</title>
<meta http-equiv="content-type" content=
"!">
<meta name="Keywords" content=
"">

<style type="text/css">
.style1 {
color: #808000;
}
.style2 {
text-decoration: none;
}
</style>
</head>

<body bgcolor="#393939" leftmargin="0" topmargin="0" marginwidth=
"0" marginheight="0" style="text-align: center">

<table id="Table_01" width="651" height="601" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td colspan="10">
<img src="images/index_01.gif" width="650" height="143"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="143" alt=
"">

</td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="images/index_02.gif" width="480" height="65"
alt="">
</td>
<td colspan="2">
<a href="http://www.ceprya.com/vb/"><img src=
"images/index_03.gif" width="96" height="50" alt=""
border="0"></a>
</td>

<td rowspan="10">
<img src="images/index_04.gif" width="74" height="457"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="50" alt=
"">
</td>
</tr>
<tr>
<td colspan="2">

<img src="images/index_05.gif" width="96" height="15"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=
"">
</td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_06.gif" width="194" height="191"
alt="">

</td>
<td colspan="2" rowspan="3">
<object classid=
"clsid

27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
border="0" width="261" height="239">
<param name="movie" value="images/q.swf">
<param name="quality" value="High">
<embed src="images/q.swf" pluginspage=
"http://www.macromedia.com/go/getflashplayer" type=
"application/x-shockwave-flash" name="obj1" width="261"
height="239">
</object>
</td>
<td colspan="2">

<a href="http://www.ceprya.com/chat.html"><img src=
"images/index_08.gif" width="95" height="45" alt=""
border="0"></a>
</td>
<td rowspan="8">
<img src="images/index_09.gif" width="26" height="392"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=
"">
</td>
</tr>

<tr>
<td colspan="2" rowspan="7">
<img src="images/index_10.gif" width="95" height="347"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="146" alt=
"">
</td>
</tr>
<tr>

<td colspan="2" rowspan="4">
<img src="images/index_11.gif" width="94" height="129"
alt="">
</td>
<td colspan="2">
<a href="mailto:ceprya@ceprya.com"><img src=
"images/index_12.gif" width="100" height="48" alt=""
border="0"></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=
"">
</td>

</tr>
<tr>
<td colspan="4">
<img src="images/index_13.gif" width="361" height="13"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=
"">
</td>
</tr>

<tr>
<td rowspan="2">
<img src="images/index_14.gif" width="29" height="68"
alt="">
</td>
<td colspan="2">
<a href="mailto:ceprya@ceprya.com"><img src=
"images/index_15.gif" width="93" height="45" alt=""
border="0"></a>
</td>
<td rowspan="4">
<img src="images/index_16.gif" width="239" height="140"
alt="">

</td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=
"">
</td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/index_17.gif" width="93" height="95"
alt="">
</td>

<td>
<img src="images/spacer.gif" width="1" height="23" alt=
"">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_18.gif" width="25" height="72"
alt="">
</td>
<td colspan="2">

<img src="images/index_19.gif" width="98" height="58"
alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="58" alt=
"">
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_20.gif" width="98" height="14"
alt="">

</td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=
"">
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=
"">
</td>

<td>
<img src="images/spacer.gif" width="69" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="71" height="1" alt=
"">
</td>

<td>
<img src="images/spacer.gif" width="22" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="239" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=
"">
</td>

<td>
<img src="images/spacer.gif" width="70" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=
"">
</td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=
"">
</td>

<td></td>
</tr>
</table>
</body>

</html>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

بتظهر بعض الأخطاء ممكن الإفاده حتى أتجاهل خطأي

nardgo · 09-05-2008, 01:16 AM

السلام عليكم و رحمة الله و بركاته

بداية من الواضح ان الكود تم انشائه ببرنامج ImageReady، و هذا ادى لوجود اخطاء كثيرة في الكود، لكن عموماً لا مشكلة

اولاً: نوع الدوكتايب (DTD)

نوع الدوكتايب المستخدم في الكود غير موجود اصلاً في انواع الدوكتايب التي تعتمدها منظمة W3C لذلك يجب استخدام احد الانواع الثلاثة التي ذكرتها في ردي السابق و بالطبع فأن افضل نوع هو النوع الإنتقالي (Transitional) لأنه يتيح لك المزج بين العناصر القياسية و الأخرى الغير قياسية.

ثانياً: استخدام الفلاش

لم اجرب استخدام الفلاش في اي عمل صممته للآن، ببساطة لأني لا احتاجه

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

الفكرة ببساطة انه هنالك عنصرين يتم استخدامهم لتضمين الفلاش في صفحات HTML، العنصر الاول embed و الثاني object. دعك من الاول فهو غير متوافق مع المعايير، و بقليل من التعديل على العنصر الثاني يمكننا ضمان عمل ملف الفلاش في اغلب المتصفحات، مع ضمان قياسية الموقع.

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

ثالثاً: الجداول

بالطبع التصميم يستخدم الجداول بطريقة بشعة، و كان هنالك خطأ في الكود بسبب احدى الخصائص (attributes) الخاصة بالعنصر table، حيث لا يسمح في هذا النوع من الدوكتايب بتحديد طول (height) لعنصر table و لكن يجب بدلاً من ذلك تحديد الطول من خلال ملف الأنماط المتعاقبة (CSS).

و بما ان الكود يحتوى بالفعل على اكواد CSS بداخل الكود (عن طريق العنصر style)، لذا قمت بإضافة قيمة الطول (height) للعنصر table عن طريق تحديدها في اكواد CSS.

اطلع على الكود، و قم بالتأكد من عمله، و تأكد ايضاً من كونه متوافق، و اذا وجدت اي مشاكل او وجدت اي غموض في الشرح فأنا حاضر.

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="Keywords" content="">

	<style type="text/css">
		.style1 {
			color: #808000;
		}
		.style2 {
			text-decoration: none;
		}
		#Table_01 {
			height: 601px;
		}
	</style>
</head>

<body bgcolor="#393939" style="text-align: center">

<table id="Table_01" width="651" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10">
<img src="images/index_01.gif" width="650" height="143" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="143" alt="">
</td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="images/index_02.gif" width="480" height="65" alt="">
</td>
<td colspan="2">
<a href="http://www.ceprya.com/vb/"><img src= "images/index_03.gif" width="96" height="50" alt="" border="0"></a>
</td>

<td rowspan="10">
<img src="images/index_04.gif" width="74" height="457" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="50" alt="">
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_05.gif" width="96" height="15" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt="">
</td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_06.gif" width="194" height="191" alt="">

</td>
<td colspan="2" rowspan="3">
<object id="obj1" width="261" height="239" type="application/x-shockwave-flash">
<param name="movie" value="images/q.swf">
<param name="quality" value="High">
</object>
</td>
<td colspan="2">

<a href="http://www.ceprya.com/chat.html"><img src="images/index_08.gif" width="95" height="45" alt="" border="0"></a>
</td>
<td rowspan="8">
<img src="images/index_09.gif" width="26" height="392" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt="">
</td>
</tr>

<tr>
<td colspan="2" rowspan="7">
<img src="images/index_10.gif" width="95" height="347" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="146" alt="">
</td>
</tr>
<tr>

<td colspan="2" rowspan="4">
<img src="images/index_11.gif" width="94" height="129" alt="">
</td>
<td colspan="2">
<a href="mailto:ceprya@ceprya.com"><img src="images/index_12.gif" width="100" height="48" alt="" border="0"></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt="">
</td>

</tr>
<tr>
<td colspan="4">
<img src="images/index_13.gif" width="361" height="13" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="">
</td>
</tr>

<tr>
<td rowspan="2">
<img src="images/index_14.gif" width="29" height="68" alt="">
</td>
<td colspan="2">
<a href="mailto:ceprya@ceprya.com"><img src="images/index_15.gif" width="93" height="45" alt="" border="0"></a>
</td>
<td rowspan="4">
<img src="images/index_16.gif" width="239" height="140" alt="">

</td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/index_17.gif" width="93" height="95" alt="">
</td>

<td>
<img src="images/spacer.gif" width="1" height="23" alt="">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_18.gif" width="25" height="72" alt="">
</td>
<td colspan="2">

<img src="images/index_19.gif" width="98" height="58" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="58" alt="">
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_20.gif" width="98" height="14" alt="">

</td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt="">
</td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="25" height="1" alt="">
</td>

<td>
<img src="images/spacer.gif" width="69" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="71" height="1" alt="">
</td>

<td>
<img src="images/spacer.gif" width="22" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="239" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt="">
</td>

<td>
<img src="images/spacer.gif" width="70" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt="">
</td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt="">
</td>

<td></td>
</tr>
</table>
</body>

</html>

تحياتي
احمد حازم

ceprya · 09-05-2008, 01:39 AM

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

سيبريا

نفس النتيجه كل ماأعدل عليه من ناحيه التوافق الفراغات كما هو ملاحظ
أعلم أن الكود معقد نسبياً وبدراسته وتفصيله بأجمع معها معظم الخصائص لكي اتقنها

الرئيسيه

سيبريا منتديات_شات_دردشة_دردشه_تصميم

إمتناني لشخصك عزيزي

owner · 09-05-2008, 03:15 AM

شكرا لك "nardgo" استفدت من الرد كثيرا .

شكرا لك مرة اخرى وبالتوفيق ان شاء الله

nardgo · 09:53 AM

ceprya

في الحقيقة الصفحة الرئيسية للموقع تعرض عندي في الفايرفوكس بشكل جيد و الفلاش يعمل، هل هنالك اي مشاكل لديك؟

اقصد ماذا تريد فعله بالظبط في الصفحة؟، لقد قلت انك هنالك فراغات و كلما تعدل عليه تبقى كما هي، هل يمكنك ارفاق صورة لتوضيح ما تقصد؟

owner

العفو اخي العزيز، شكراً لمرورك

تحياتي
احمد حازم

alaudi · 09-05-2008, 05:32 PM

nardgo شكرا على هذه المعلومات المهمة

ceprya · 09-05-2008, 09:27 PM

صحيح الفايرفوكس يعمل بشكل ممتاز

explorer هذه النتيجه مرفقه

وجاري تطبيق ماذكرت بكل الصفحات بارك الله بك

nardgo · 12-05-2008, 03:15 PM

السلام عليكم

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

نقطة اخرى يستحسن ان تقوم بتحويل الإنيكودنج للصفحة (encoding) إلى utf-8 و ذلك عن طريق حفظ الصفحة من خلال احد محررات اليونيكود (unicode editor)، وجدت واحد مجاني على نظام التشغيل ويندوز، يمكنك تحميله من هنا:

SuperEdi - Unicode Text Editor

و بعد تنصيب البرنامج قم بفتح ملف الصفحة الرئيسية ثم اختر خيار حفظ باسم (save as) و لما تظهر لك النافذة اختر في الجزء الخاص بالإنكودينج (encoding) خيار Unicode (utf-8) ثم الغي التأشير على الجملة التي تقع اسفل الجزء الخاص بالإنكودينج (use Byte Order Mark for unicode files) و احفظ الصفحة.

لماذا كل هذا التعب؟، لأن ببساطة عنوان الصفحة يظهر لدي على انه مربعات، و بالتأكيد هو يظهر لجميع من يدخل الصفحة و إعدادات الإنكودينج في متصفحه محددة على (utf-8) بنفس الشكل.

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

تحياتي
احمد حازم

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
حاولت و حاولت ان اجعل الاستايل مطابق للxhtml ..قوانين w3c لكن بلا فائدة..	I.M.A.S	تطوير الويب	3	21-12-2007 07:02 PM
[للنقاش] معايير w3c معايير w3c .. زهــــقــنــا	almosmm	تطوير الويب	43	30-07-2007 01:45 PM
هل يوجد أنواع من المودم معينة تعمل على اشتراك ارامكو	أبو الوليد	أخبار الإنترنت والتقنية ومناقشتها	13	01-05-2002 04:46 PM
هل يوجد أنواع من المودم معينة تعمل على اشتراك ارامكو	أبو الوليد	أخبار الإنترنت والتقنية ومناقشتها	1	27-04-2002 07:27 PM
الباسكال الدرس الثاني : أنواع البيانات والمتغيرات	الخبير	أخبار الإنترنت والتقنية ومناقشتها	5	24-03-2000 09:47 PM

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق