11 : XHTML (تطبيق).

zak السبت فبراير 25, 2012 3:52 am

تطبيق

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

المطلوب
في هذا التطبيق نريد أن ننشأ نسخة من هذه الصفحة :
11 : XHTML (تطبيق). 76107618

صورة للمجرم

و لكن من أين سنأتي بكل تلك الصور؟.
هذا ليس عذرا كافيا للتهرب من التطبيق فيمكنكم استعمال الصور التي تريدون، و مع ذلك فها هو مجلد الصور.

ما نحتاجه
الخطوات التي يجب إتباعها من أجل إنشاء هذه الصفحة هي كالتالي :
أول إنشاء هيكل عام للصفحة و سنستعمل هنا جدول (لمن لا يعرف كيفية إنشاء الجداول عليه العودة إلى الجزء الخاص بها).
ثانيا سنقوم بإنشاء الجزء العلوي من الصفحة و هو أيضا مكون من جدول به خانتان الأولى للصورة، و الثانية لإحصائيات الموقع (استعملت هنا الفقرات و الوسم <font>).
ثالثا ننشأ القائمة التي توجد في الخانة على اليسار في السطر الثاني من الجدول مستعينين بجدول، و روابط.
ثم ننشأ الاستمارة التي تتكون من label و textbox و button.
بعد ذلك ننتقل إلى الخانة اليمنى في السطر الثاني من الجدول و نستخدم فيها عناوين من الدرجة الثالثة و فقرات و روابط و صور و نفصل بينها ب سطر.
في أسفل الصفحة ضع توقيعك بالشكل الذي تريده.
ملاحظة : بالنسبة للنصوص المكتوبة في الصفحة لا يهم كتابتها كما هي يمكنك كتابة ما تريد.
لديكم بوم كامل لإنجاز التطبيق.

التصحيح
أعطيتكم الوقت الكافي، وقد حان وقت التصحيح.
الكل يضع أقلامه (أسف لوحة المفاتيح Razz

).
إليكم كود الصفحة.
كود:XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Welcome Into My Website !</title>
</head>
<body>
<center>
<table width="800" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#0A587E">
<table width="800" cellpadding="0" cellspacing="0">
<tr>
<td width="600">
<img src="logo.png" />
</td>
<td width="200" bgcolor="#036F8D" align="center">
<p><font face="verdana" size="1" color="#FFFFFF"><b>
Total visits : 1.000.000<br />
visits Today : 1.000<br />
Connected : 124<br />
Date : 01/03/2010 13:34 GMT
</b></font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td width="150" bgcolor="#0A587E">
<table cellpadding="5" cellspacing="5">
<tr align="center">
<td bgcolor="#036F8D" width="130">
<p><a href="#">
<font face="verdana" size="1" color="#FFFFFF">
<b>Home Page</b>
</font>
</a></p>
</td>
</tr>
<tr align="center">
<td bgcolor="#036F8D">
<p><a href="#">
<font face="verdana" size="1" color="#FFFFFF">
<b>Downloads</b>
</font>
</a></p>
</td>
</tr>
<tr align="center">
<td bgcolor="#036F8D">
<p><a href="#">
<font face="verdana" size="1" color="#FFFFFF">
<b>Support</b>
</font>
</a></p>
</td>
</tr>
<tr align="center">
<td bgcolor="#036F8D">
<p><a href="#">
<font face="verdana" size="1" color="#FFFFFF">
<b>Contact</b>
</font>
</a></p>
</td>
</tr>
<tr align="center">
<td bgcolor="#036F8D">
<p><a href="#">
<font face="verdana" size="1" color="#FFFFFF">
<b>About US</b>
</font>
</a></p>
</td>
</tr>
</table>
<form action="#" method="post">
<label for="search">
<font face="verdana" size="1" color="#FFFFFF">
Keyword :
</font>
</label><br />
<input type="text" name="search" id="search" />
<p align="right">
<input type="submit" name="submit" value="Search" />
</p>
</form>
</td>
<td width="650" bgcolor="#FFFFFF">
<h3><font face="verdana" color="#0A587E">
AJAX Video Tutorial
</font></h3>
<img src="ajax.png" width="100" height="100" align="right" />
<p align="justify"><font face="verdana" size="1">This Video Tutorial will give you the opportunity to learn ajax (asyncronize javascript and xml) from basics to advanced techniques you will learn how to fetch data from server pages text files xml files create live search and more advanced techniques with this video tutorial you will be able to create dynamique and interactive and very usefull web application and more friendly to the users, this video tutorial is illustrated by some examples which will help in understanding the ajax technology.</font></p>
<p align="center">
<a href="#">
<font face="verdana" size="1" color="#888888">
More...
</font>
</a>
</p>
<hr width="50%" color="#0A587E"/>
<h3><font face="verdana" color="#0A587E">
Joomla Video Tutorial
</font></h3>
<img src="joomla.png" width="100" height="100" align="right" /> <p align="justify"><font face="verdana" size="1">in this Video Tutorial which is concerning the jowls application you will learn how to download install and configur joomla in few minutes also you will learn how to create articles add controle insert video audio flash change templates, how to make polls how to add component and how to delete articles also this video tutorial will teach how administrate your website in none of time</font></p>
<p align="center">
<a href="#">
<font face="verdana" size="1" color="#888888">
More...
</font>
</a>
</p>
<hr width="50%" color="#0A587E"/>
<h3><font face="verdana" color="#0A587E">
Adobe Illustrator CS3 Video Tutorial
</font></h3>
<img src="aics3.png" width="100" height="100" align="right" />
<p align="justify"><font face="verdana" size="1">Welcome to Illustrator CS3 Video Tutorial ! This video tutorial is preview of the new features now available in Illustrator CS3. From the more prominent changes, like the new streamlined interface, to the more under-the-hood improvements, like the enhanced operating performance, Illustrator CS3 is an impressive program with much to offer to experienced and new users alike. Continue through this video tutorial to get your toes wet before diving in.</font></p>
<p align="center">
<a href="#">
<font face="verdana" size="1" color="#888888">
More...
</font>
</a>
</p>
<hr width="50%" color="#0A587E"/>
</td>
</tr>
<tr height="50">
<td colspan="2" bgcolor="#0A587E">
<p align="center">
<font face="verdana" size="1" color="#FFFFFF">
hassan bengmah, copyrights 2010 .
</font>
</p>
</td>
</tr>
</table>
</center>
</body>
</html>

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