لماذا نظلم جداول الـ html والنسبة المئوية ؟

**XPlus** · 08-09-2005

صدقني تراها سهله لكن المساله مسأله عاده

طيب كيف أبدا مع XHTML?

**مهتم** · 08-09-2005

ملاحظه : اتشارك مع "مهتم" في معرفه مؤقتا حتى استطيع التسجيل.

المشاركة الأصلية كتبت بواسطة XPlus

طيب كيف أبدا مع XHTML?

xHTML هي نفس HTML لكن بقوانين , منها :

1. ان الوسوم لازم تكون منسقه تنسيق صحيح , يعني اذا كان عندك وسم في داخل وسم لازم تكتبهم بهالطريقه :

كود HTML:

<b><u>hello</u></b>

مو بهالطريقه :

كود HTML:

<b><u>hello</b></u>

2. كل الوسوم لازم تكون حروفها صغيره. يعني تكتب الوسم

كود HTML:

<html>

بدال

كود HTML:

<HTML>

و فيه كم قانوني ثاني ممكن تبحث عنهم.

ترا ممكن تستمر بـHTML بدون مشاكل , حتى HTML لها قوانين (لكنها اقل صرامه من xHTML). كلامنا كله عن الالتزام بالمعايير عند التصميم بغض النظر عن اللغه المستخدمه.

تحياتي,
saudi_php[at]hotmail.com

**aboans20** · 08-09-2005

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

كود HTML:

<div align="center">
	<table border="0" width="700" cellspacing="3" cellpadding="2" id="table1" style="border: 1px double #008000" height="100%">
		<tr>
			<td width="100">4</td>
			<td align="center" width="300">3</td>
			<td width="200">2</td>
			<td width="100">1</td>
		</tr>
		<tr>
			<td width="100">8</td>
			<td align="center" width="300">7</td>
			<td width="200">6</td>
			<td style="border: 4px dotted #CCCC00" width="100">5</td>
		</tr>
		<tr>
			<td width="100">c</td>
			<td width="300">x</td>
			<td width="200">z</td>
			<td style="border: 4px dotted #CCCC00" width="100">9</td>
		</tr>
		<tr>
			<td width="100">m</td>
			<td width="300">n</td>
			<td width="200">b</td>
			<td width="100">v</td>
		</tr>
	</table>
</div>

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

- أجعل المسافة بين الخلايا 3 بيكسل ..

- وأجعل نطاق الخلايا 1 بيكسل

- وحجم الحدود 1 بيكسل وبلون أخضر وحدود مزدوجه ..

- أجعل الخط الموجود في جدول رقم 3 و7 متوسط أو على يمين ..

- وأجعل عرض الجدول 700 بيكسل وارتفاعه 100 %

- اجعل العمود الأول 100 بيكسل والثاني 200 بيكسل والثالث 300 بيكسل والرابع 100 بيكسل .

- أجعل نمط خلية 5 و 9 منقطة بحجم 4 بيكسل .

اشرح هذه الطريقة عن طريق الـ css ..وأرفق لنا ملف الجدول المعدل وفق مقاييس المنظمة ..

ولا تنسى تحسب وقت التصميم

**2600ma** · 08-09-2005

أخي saudi_php تم الإرسال

وهذا ما أسميه الإنسحاب النفعي

حتى دون ان يدري أحد من أصدقائي هنا

وهذا آخر رد لي

المشاركة الأصلية كتبت بواسطة aboans20

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

كود HTML:

<div align="center">
	<table border="0" width="700" cellspacing="3" cellpadding="2" id="table1" style="border: 1px double #008000" height="100%">
		<tr>
			<td width="100">4</td>
			<td align="center" width="300">3</td>
			<td width="200">2</td>
			<td width="100">1</td>
		</tr>
		<tr>
			<td width="100">8</td>
			<td align="center" width="300">7</td>
			<td width="200">6</td>
			<td style="border: 4px dotted #CCCC00" width="100">5</td>
		</tr>
		<tr>
			<td width="100">c</td>
			<td width="300">x</td>
			<td width="200">z</td>
			<td style="border: 4px dotted #CCCC00" width="100">9</td>
		</tr>
		<tr>
			<td width="100">m</td>
			<td width="300">n</td>
			<td width="200">b</td>
			<td width="100">v</td>
		</tr>
	</table>
</div>

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

- أجعل المسافة بين الخلايا 3 بيكسل ..

- وأجعل نطاق الخلايا 1 بيكسل

- وحجم الحدود 1 بيكسل وبلون أخضر وحدود مزدوجه ..

- أجعل الخط الموجود في جدول رقم 3 و7 متوسط أو على يمين ..

- وأجعل عرض الجدول 700 بيكسل وارتفاعه 100 %

- اجعل العمود الأول 100 بيكسل والثاني 200 بيكسل والثالث 300 بيكسل والرابع 100 بيكسل .

- أجعل نمط خلية 5 و 9 منقطة بحجم 4 بيكسل .

اشرح هذه الطريقة عن طريق الـ css ..وأرفق لنا ملف الجدول المعدل وفق مقاييس المنظمة ..

ولا تنسى تحسب وقت التصميم

هناك موضوع به أمثلة هنا في سوالف
http://www.swalif.net/softs/showthread.php?t=117847

---
سلام يا سوالف :nice:

**2600ma** · 09-09-2005

شكرا اخوي 2600ma على التنازل عن الاسم (كنت اكتب باسم "مهتم")

اخوي ابو انس , يبدو انك خلطت موضوعين ببعض. المقاييس مالها دخل اذا انت تصمم باستخدام جدول ولا لا. و على فكره , جدولك (اتكلم عن طريقة كتابه جدولك) هو حسب المقاييس فعلا , اللهم بس height مب حسب المقاييس , و ممكن تلقى بديل عنها , لا تساليني كيف لاني مثل ما قلت لك ما اتعامل مع جداول.

ما راح اتعب نفسي احاول اعدل في الجدول اللي حطيته لسببين :
1- لاني ما اعرف اتعامل مع الجداول لتصميم الصفحات و استخدم CSS بدال , بما ان الجداول اصلا تستخدم لعرض البيانات المجدوله و ليس عرض صفحات الانترنت.
2- لانك طلبت مني اعدل على صفحه ملخبطه بدون معنى و مو واضحها تفاصيلها من النظره الاولى.

راح اوريك صفحه سهله سويتها (حسب المقاييس) باستخدام CSS , و ابيك تسوي مثلها بالفرونت بيج , ثم خلينا نقارن اكوادنا ببعض من ناحية سهولة قراءة و تعديل الكود , اوكي؟

هذا ملف الـHTML :

كود HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en-us" />
<link rel="stylesheet" type="text/CSS" href="style.css" />
</head>

<body>

<div id="container">

<div id="head">HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD HEAD </div>
<div id="left">LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT </div>
<div id="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT </div>
<div id="foot">FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT FOOT </div>

</div>

</body>
</html>

و هذا ملف الـCSS اللي مرتبط فيه ملف الـHTML :

كود HTML:

#container { 
background-color : beige; 
width : 770px; 
height : 800px
}

#head {
background-color : red; 
width : 100%; 
height : 40px; }

#left { 
background-color : blue; 
float : left; 
width : 50%; 
height : 100px; 
}

#right { 
background-color : pink; 
float : right; 
width : 50%; 
height : 100px
}

#foot { 
background-color : green; 
clear : both; 
width : 100%; 
height : 30px; 
}

هذي هي الطريقه الحديثه (و المفترضه) للتصميم. الـHTML يكون يمثل البيانات فقط , و الـCSS هي اللي تسوي التقسيم و التصميم و التلوين و الخلفيات ...الخ.

بالطريقه هذي اقدر اتحكم بالتصميم و اغيره بكل سهوله و بدون حتى لمس كود الـHTML. كل اللي احتاج اسويه هو اني اعدل بكود الـCSS فقط.

و بالنسبه لوقت التصميم فهو مو العامل الوحيد , يعني اقدر اخلي غيري يصمم لي اطلق موقع على حسب المقاييس بدون ما اضيع دقيقه من وقتي. الجدول اللي سويته تو انت ما "صممته" , انت استعملت برنامج يصممه لك. يعني لو تروح بجهاز ثاني مافيه فرونت بيج او نظام ثاني ما يدعم فرونت بيج او مثلا تشتغل عند شركه يستعملون دريم ويفر فانت اما بتصير عاجز او بتضيع وقت بالتعلم من جديد.

كتابة الكود "بنفسك" و بطريقة الـCSS لها فوائد ما يقدرون يعطونها لك لا الفرونت بيج ولا الجداول :
1- امكانية تعديل او حتى تغيير تصميم جميع الموقع عن طريق تعديل ملف CSS واحد.
2- عدم الاعتماد على البرامج بانها تسوي عملك (بالنسبه للفرونت بيج).
3- فصل التصميم عن المحتوى بحيث HTML تكون مسؤوله عن وصف "البيانات" فقط و الـCSS تكون مسؤوله عن التصميم و طريقة العرض فقط.
4- تقليص حجم الكود بالنسبه للمواقع اللي تستخدم CSS , و هالشي يوفر من الـbandwidth تبع الموقع.
5- CSS مدعومه من اغلب (او حتى كل) المتصفحات , بينما الجداول تعتمد كثير على خواص ما يدعمها الا explorer .

بانتظار كودك..

**أبو كامل** · 09-09-2005

ربما من أهم أسباب إستخدام المواصفات القياسية هي توفير الباندويف و تسريع تصفح الموقع ..

فعندما تصمم موقع بالجداول يحتاج الشخص لإعادة تحميل الجدول في كل صفحة في الموقع ، بينما عند استخدام التصميم بالمواصفات القياسية و أعني بإستخدام (XHTML و CSS) فإن ملف css سيحمله الزائر في بداية دخوله للموقع فقط و عند انتقاله للصفحات الأخرى سيحمل المعلومات فقط "content" و سيقوم المتصفح بعملية التصميم باستخدام ملف css.

مسألة الإنتقال تحتاج فعلاً إلى جهد ليس بالبسيط ، خاصة عندما لا يكون مفهوم التصميم ب css واضحاً للفرد ، و لا الفرق بين XHTML و html .

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

أخوكم

الموضوع: لماذا نظلم جداول الـ html والنسبة المئوية ؟

أدوات الموضوع

بحث في الموضوع

المواضيع المتشابهه

إضافة المجموع والنسبة والتقدير على برنامج نتائج الطلاب ؟؟؟

الديوان الشعري لا يستخدم الــ html لماذا ..؟

هل يوجد علاقة بين البكسل والنسبة المئوية

سؤال للي بيعرفوا نظلم التشغيل unix

ضوابط المشاركة