منهاج بناء و تصميم مواقع الانترنيت

1
‫منهاج‬‫و‬ ‫بناء‬‫تصميم‬‫مواقع‬‫االنترنيت‬
‫أعداد‬
‫محمد‬ ‫قاسم‬ ‫محمد‬ .‫د‬
IT

2
( ‫الصفحة‬ ‫هيكلية‬ ‫بناء‬ ‫لغة‬Hyper Text Markup Language–HTML)
‫السري‬ ‫المركزية‬ ‫الحاسبات‬ ‫من‬ ‫عدد‬ ‫عن‬ ‫عبارة‬ ‫هو‬ ‫االنترنت‬ ‫عالم‬ ‫ان‬‫ع‬(servers)‫البعض‬ ‫بعضها‬ ‫مع‬ ‫مرتبطة‬
‫بمنهجية‬(cluster)‫االخر‬ ‫لعمل‬ ‫مكملة‬ ‫حاسبة‬ ‫كل‬ ‫اي‬(‫ا‬ ‫توقف‬ ‫عند‬ ‫اي‬‫او‬ ‫المجاور‬ ‫الخادم‬ ‫يقوم‬ ‫العمل‬ ‫عن‬ ‫خادم‬ ‫ي‬
‫العاطل‬ ‫الخادم‬ ‫عن‬ ‫بدال‬ ‫الزبون‬ ‫احتياجات‬ ‫بتلبية‬ ‫البعيد‬).
‫المرك‬ ‫الحاسبات‬ ‫ان‬ ‫حيث‬‫ـــــــ‬‫الحواسيب‬ ‫عن‬ ‫مليارات‬ ‫او‬ ‫ماليين‬ ‫عدة‬ ‫على‬ ‫تحوي‬ ‫زية‬(‫الزبائن‬)‫عبر‬ ‫بها‬ ‫تتصل‬ ‫التي‬
(IPAddress)‫لك‬ ‫الفريد‬ ‫الرقم‬‫ـــ‬‫بالشبكة‬ ‫االتصال‬ ‫لغرض‬ ‫حاسوب‬ ‫ل‬‫مئات‬ ‫على‬ ‫تحوي‬ ‫انها‬ ‫وباالضافة‬ ‫العنكبوتية‬
‫يوميا‬ ‫بها‬ ‫تتصل‬ ‫التي‬ ‫التجارية‬ ‫والمحال‬ ‫المؤسسات‬ ‫مواقع‬ ‫من‬ ‫االالف‬.
‫الموقع‬ ‫مسار‬ ‫ادخال‬ ‫خالل‬ ‫من‬ ‫المستعرض‬ ‫عبر‬ ‫االتصال‬ ‫يكون‬ ‫حيث‬(Ur1)‫بالخادم‬ ‫باالتصال‬ ‫المستعرض‬ ‫يقوم‬ ‫وبعدها‬
‫عبر‬(Domain name service-DNS)
‫ال‬ ‫مسار‬ ‫بخزن‬ ‫يقوم‬ ‫الذي‬‫موقع‬
(WWW.Yahoo.com)‫ارقام‬ ‫بشكل‬
‫متسلسلة‬(IP)‫ويعرف‬ ‫والتصادم‬ ‫التكرار‬ ‫لعدم‬
‫المركزية‬ ‫الحواسيب‬ ‫جميع‬ ‫في‬ ‫الرقم‬ ‫هذا‬
‫منهجية‬ ‫النجاح‬(cluster)‫الرقم‬ ‫الى‬ ‫باالضافة‬
‫المو‬ ‫بانشاء‬ ‫الخاصة‬ ‫المعلومات‬ ‫ارسال‬ ‫يتم‬‫ق‬‫ع‬
‫اكواد‬ ‫من‬(HTML/CSS)‫واالكواد‬
‫البرمجية‬(PMP,ASP,C#)‫قواعد‬ ‫واكواد‬
‫اي‬ ‫ديناميكي‬ ‫الموقع‬ ‫كان‬ ‫حالة‬ ‫في‬ ‫البيانات‬
‫والزبون‬ ‫الموقع‬ ‫بين‬ ‫تفاعلية‬ ‫توجد‬‫بشكل‬
‫صفحات‬(CSS,HTML)‫الخاصة‬ ‫والنصوص‬ ‫والصور‬ ‫الصفحات‬ ‫بعرض‬ ‫حاسوبك‬ ‫في‬ ‫المستعرض‬ ‫يقوم‬ ‫حيث‬
.‫طلبه‬ ‫يتم‬ ‫الذي‬ ‫بالموقع‬
: ‫مالحظة‬‫بان‬ ‫المنهجية‬ ‫تقول‬ ، ‫البرمجية‬ ‫اللغات‬ ‫لتعلم‬ ‫منهجيه‬ ‫هناك‬(80%=20%)‫يع‬‫ني‬(20%)‫برمجية‬ ‫لغة‬ ‫من‬
‫نتيجة‬ ‫يعطيك‬ ‫معينة‬(80%)‫بنسبة‬ ‫دائمين‬ ‫زبائن‬ ‫نوافذ‬ ‫وايضا‬ ‫االنترنت‬ ‫في‬ ‫ونشره‬ ‫الموقع‬ ‫عمل‬ ‫من‬(20%)‫محل‬ ‫الى‬
‫يجلب‬ ‫تجاري‬(80%).‫المثال‬ ‫سبيل‬ ‫عل‬ ‫المستمر‬ ‫الربح‬ ‫من‬

3
‫التشعبية‬ ‫النصوص‬ ‫لغة‬ ‫اكواد‬(HTML)
‫ا‬ ‫بناء‬ ‫في‬ ‫المهمه‬ ‫اللغات‬ ‫من‬ ‫تعتبر‬ ‫اعاله‬ ‫اللغة‬ ‫ان‬‫واستعراض‬ ‫التصفح‬ ‫لغرض‬ ‫الثابتة‬ ‫الويب‬ ‫وصفحات‬ ‫لمواقع‬‫ا‬‫لكن‬ ‫لمعلومات‬
.‫المستخدم‬ ‫مع‬ ‫وتفاعلية‬ ‫ديناميكية‬ ‫بدون‬
‫اللغة‬ ‫هيكلية‬:
< >‫ويسمى‬<Tag>‫االوامر‬ ‫كتابة‬ ‫خالل‬ ‫من‬ ‫الويب‬ ‫وصفحة‬ ‫بالموقع‬ ‫الخاصة‬ ‫الهيكلية‬ ‫بناء‬ ‫عن‬ ‫المسؤول‬
‫ب‬‫داخل‬،‫ه‬‫الخ‬ ‫بتنسيق‬ ‫التحكم‬ ‫او‬ ‫جدول‬ ‫كبناء‬.‫الصور‬ ‫او‬ ‫النص‬ ‫او‬ ‫ط‬‫المثال‬ ‫سبيل‬ ‫على‬
(<img>,<body>,<html>).
<!DOCTYPE>‫الصفحة‬ ‫مفتاح‬‫اللغة‬ ‫نسخة‬ ‫لتعريف‬
<!DOCTYPE HTML PUBLIC”_//W3C//DTD
HTML 4.01 transitional//En” ”httpi//www.org/TR/html4//loose.dtd”>
<HTML>)‫(البداية‬ ‫الصفحة‬ ‫بناء‬ ‫بداية‬ ‫يعتبر‬‫وهو‬‫ال‬ ‫انواع‬ ‫من‬ ‫يعتبر‬Tag‫فتح‬ ‫قوس‬ ‫على‬ ‫تحوي‬ ‫أي‬ ‫الثنائية‬
‫واغالق‬</ HTML >
Head ><‫يع‬‫الر‬ ‫تبر‬‫أ‬‫المساعد‬ ‫االوامر‬ ‫اي‬ ‫س‬‫ة‬‫اي‬ ‫الويب‬ ‫في‬ ‫الصفحة‬ ‫نشر‬ ‫في‬‫وتعريف‬ ‫عنها‬ ‫البحث‬ ‫امكانية‬
‫اكواد‬(JavaScript)‫و‬(Css)،‫اغالق‬ ‫قوس‬ ‫على‬ ‫يحوي‬ ‫و‬</ Head >
<Title></Title>‫اضافة‬ ‫على‬ ‫مسؤول‬.‫الموقع‬ ‫تسمية‬ ‫لبيان‬ ‫الصفحة‬ ‫اعلى‬ ‫في‬ ‫وعنوان‬ ‫نص‬
<Body>‫يعتبر‬‫جسد‬‫الصفحة‬‫يشاهدها‬ ‫سوف‬ ‫التي‬ ‫والتصاميم‬ ‫والصور‬ ‫والنصوص‬ ‫االوامر‬ ‫اي‬‫المستخدم‬
‫الى‬ ‫باالضافة‬‫الخاصة‬ ‫الهيكيلية‬‫ب‬‫ب‬‫الصفحة‬ ‫ناء‬،‫حيث‬‫اغالق‬ ‫قوس‬ ‫على‬ ‫يحوي‬</ Body >
: ‫مالحظة‬‫توجد‬<Tag>‫تفتح‬ ‫فقط‬ ‫اي‬ ‫التغلق‬‫كـ‬<Img>‫مكان‬ ‫في‬ ‫تبدا‬ ‫الصورة‬ ‫الن‬ ‫غلقه‬ ‫اليمكن‬ ‫بالصورة‬ ‫الخاص‬
‫يسمى‬ ‫فلهذا‬ ‫االسفل‬ ‫في‬ ‫وغلقها‬ ‫االعلى‬ ‫في‬ ‫فتحها‬ ‫اليجوز‬ ‫المكان‬ ‫نفس‬ ‫في‬ ‫وتنتهي‬ ‫معين‬<Tag>‫و‬ ‫احادي‬<P>
‫غلق‬ ‫يوجد‬ ‫الن‬ ‫ثنائي‬ ‫للنصوص‬<IP>.
‫والفقرات‬ ‫النصوص‬
<P>‫صفح‬ ‫اضافة‬ ‫يمكن‬ ‫حيث‬ ‫الصفحه‬ ‫في‬ ‫وترتيبه‬ ‫النص‬ ‫اعداد‬ ‫عن‬ ‫مسؤول‬‫لتمييز‬ ‫داخله‬ ‫في‬ ‫ات‬‫من‬ ‫النص‬
‫هذه‬ ‫تسمى‬ ‫حيث‬ ‫الحجم‬ ، ‫السمك‬ ، ‫اللون‬(Attributes)‫الوسط‬ ‫في‬ ‫النص‬ ‫وضع‬ ‫مثال‬

4
<p align=”center”>
: ‫مالحظة‬‫استخدام‬ ‫ممكن‬</pre< >pre>‫ال‬ ‫من‬ ‫بدال‬<P>‫الصفحة‬ ‫في‬ ‫النصوص‬ ‫بعض‬ ‫في‬‫النص‬ ‫ترتيب‬ ‫جعل‬ ‫الجل‬
‫المستخد‬ ‫رغبة‬ ‫حسب‬.‫م‬
</h1><h1>( ‫حين‬ ‫التكبير‬ ‫درجة‬ ‫وحسب‬ ‫الخط‬ ‫تكبير‬ ‫عن‬ ‫مسؤول‬1.‫كبيرة‬ ‫درجة‬ )
</b><b>‫للخط‬ ‫سمك‬ ‫عمل‬ ‫عن‬ ‫مسؤول‬
</i><i>‫للخط‬ ‫انحناء‬ ‫عمل‬ ‫عن‬ ‫مسؤول‬
</u><u>‫النص‬ ‫تحت‬ ‫خط‬ ‫عمل‬ ‫عن‬ ‫مسؤول‬
‫معين‬ ‫لتسلسل‬ ‫ارقام‬ ‫عمل‬ ‫وهو‬ </OL< >OL> -
‫معين‬ ‫تسلسل‬ ‫وفقرات‬ ‫رموز‬ ‫عمل‬ </UL< >UL> -
‫مالحظة‬:‫من‬ ‫كل‬ ‫في‬ ‫نضع‬<OL>‫و‬<UL>‫األ‬ ‫الظهار‬‫يعني‬ ‫والفقرات‬ ‫رقام‬
‫خاصية‬ ‫اضافة‬ ‫يمكن‬ : ‫مالحظة‬(Type)‫داخل‬<UL>‫كاشكال‬ ‫الفقرات‬ ‫الظهار‬(‫مربع‬،‫دائرة‬)
<<UL Type=suqare
‫واضافة‬(Start)‫الترقيم‬ ‫لبداية‬<OL start=”2”>
‫التشعبية‬ ‫النصوص‬
Code Html
<body>
<p> Type of Computer </p>
<ol>
<li> Sony </li>
<li> Dill </li>
<ul>
<li> Dill Aspiro </li>
</ul>
</ol>
</body>
Result
Type of Computer
1. Sony
2. Dill
 Dill Aspiro

5
<a>‫ويسمى‬(Anchor)‫ومع‬‫ناه‬‫المرساة‬‫حيث‬‫عمله‬‫يكمن‬‫الصفحات‬ ‫عبر‬ ‫التنقل‬ ‫في‬ ‫بعضها‬ ‫مع‬ ‫النصوص‬ ‫بربط‬
‫داخله‬ ‫صفات‬ ‫على‬ ‫يحتوي‬ ‫حيث‬ ‫اخرى‬ ‫مواقع‬ ‫مع‬ ‫والروابط‬‫ومنها‬.
‫الموضوع‬ ‫لتوسيع‬ ‫للضغط‬ ‫قابل‬ ‫رابط‬ ‫بشكل‬ ‫مفعل‬ ‫معين‬ ‫نص‬ ‫او‬ ‫معين‬ ‫لموقع‬ ‫مسار‬ ‫اما‬ ‫يكون‬ ‫الرباط‬ ‫شكل‬
‫أن‬ (‫الحاسبات‬ ‫علوم‬‫الحا‬ ‫بناء‬ ‫اركان‬ ‫من‬ ‫ركن‬ ‫هي‬( ‫او‬ ) ‫سوب‬http://www.google.com).
،‫االساسية‬ ‫الخواص‬ ‫بعض‬ ‫من‬‫خاصية‬target= ”- blank”‫الرابط‬ ‫على‬ ‫الضغط‬ ‫عند‬ ‫جديدة‬ ‫صفحة‬ ‫فتح‬ ‫على‬ ‫مسؤولة‬
‫وخاصية‬‫معين‬ ‫نص‬ ‫يعرض‬ ‫الرابط‬ ‫على‬ ‫الماوس‬ ‫مؤشر‬ ‫وضع‬ ‫عند‬"‫"نص‬title=‫خاصية‬ ‫و‬
“‫الرابط‬”href=‫حيث‬‫ا‬ ‫الذهاب‬ ‫المراد‬ ‫الرابط‬ ‫وضع‬ ‫يتم‬ ‫هنا‬‫ليه‬<www.google.com>
: ‫مالحظة‬‫داخل‬ ‫الرابط‬<href>‫انواع‬ ‫على‬
‫معين‬ ‫ملف‬ ‫لتحميل‬ ‫مسار‬ ‫وضع‬ ‫يمكن‬
Href=”files/book.pdf”
‫م‬‫الرسائل‬ ‫الرسال‬ ‫االلكتروني‬ ‫البريد‬ ‫عنوان‬ ‫وضع‬ ‫مكن‬
Href=”maito:exm@yahoo.com”
‫ا‬ ‫في‬ ‫العنوان‬ ‫محتوى‬ ‫الى‬ ‫االعلى‬ ‫العنوان‬ ‫من‬ ‫الصفحة‬ ‫عبر‬ ‫التحرك‬ ‫ممكن‬‫السفل‬
<a href=”#prog”>
Programming C#
‫البرمجة‬ ‫موضوع‬ : ‫مثال‬C#‫طريق‬ ‫عن‬ ‫باالسفل‬ ‫االعلى‬ ‫نربط‬ ‫الصفحة‬ ‫اسفل‬ ‫في‬ ‫ويحتوي‬ ‫الصفحة‬ ‫اعلى‬ ‫في‬ ‫متسلسل‬
(#)‫في‬(href)‫في‬ ‫االسم‬ ‫نفس‬ ‫ونضع‬<P>‫الشكل‬ ‫بهذا‬<p id=”#prog”> programming>

6
:‫مثال‬
‫الجداول‬
<Table>‫هذا‬<Tag>‫الجدول‬ ‫محتويات‬ ، ‫الطلب‬ ‫وحسب‬ ‫وصف‬ ‫عمود‬ ‫من‬ ‫جدول‬ ‫انشاء‬ ‫عن‬ ‫مسؤول‬
<tr>(table row)‫الصفوف‬ ‫النشاء‬
<td>‫االعمدة‬ ‫النشاء‬
<th>‫سميكة‬ ‫اعمدة‬ ‫النشاء‬
‫االعمدة‬ ‫لدمج‬<colspan>‫المثال‬ ‫سبيل‬ ‫وعلى‬<td colspan=”3”>
‫لدمج‬‫صفوف‬‫الحقل‬><rowspsn
‫توسيع‬‫ال‬ ‫من‬ ‫الحقول‬‫داخل‬<cell padding>
‫توسيع‬‫الحقول‬‫الخارج‬ ‫من‬<<cell spacing
Code Html
<body>
<ol>
<li> <a href=”http://sony.com”>Sony</a>
</li>
<li> Dill </li>
</ol>
</body>
Result
Type of Computer
1. Sony
2. Dill
 Dill Aspiro
Code Html
<body>
<table>
<tr>
<td> Num </td>
<td> Name </td>
</tr>
<tr>
<td> 1 </td>
<td> Sony </td>
</tr>
</table>
</body>
Result
Type of Computer
Num Name
1 Sony

7
‫االستمارة‬
<Form>‫الجهة‬ ‫الى‬ ‫االرسال‬ ‫زر‬ ‫على‬ ‫الضغط‬ ‫عبر‬ ‫وارسالها‬ ‫فيها‬ ‫المعلومات‬ ‫لملئ‬ ‫قابلة‬ ‫حقول‬ ‫بناء‬ ‫عن‬ ‫مسؤول‬ ‫وهو‬
‫وارج‬ ‫الطلب‬ ‫لمعالجة‬ ‫المطلوبه‬‫يتكون‬ ‫حيث‬ ‫االلكتروني‬ ‫البريد‬ ‫عبر‬ ‫رسالة‬ ‫ارسال‬ ‫او‬ ‫معين‬ ‫موقع‬ ‫في‬ ‫كالتسجيل‬ ‫النتيجة‬ ‫اع‬
:‫من‬
*‫الــ‬ ‫داخل‬ ‫الصفات‬form
<Form action= “ ‫المعلومات‬ ‫له‬ ‫ترسل‬ ‫سوف‬ ‫الذي‬ ‫الرابط‬ “ name=”form”>
‫*الحقل‬
< Input type=”text”/> ‫المعلومات‬ ‫الدخال‬ ‫قابلة‬ ‫حقول‬ ‫انشاء‬
< Input type=”password”/> ‫عدم‬ ‫وامكانية‬ ‫المرور‬ ‫كلمات‬ ‫الدخال‬ ‫حقول‬ ‫أنشاء‬
‫ظهورها‬
< Input type =”radio”/>
< Input type =”checkbox”>
*‫المنس‬ ‫القائمة‬‫دلة‬
<select>
<option> ‫احمر‬ </option>
<option> ‫اخضر‬ </option>
</select>
*‫والمالحظات‬ ‫الرسائل‬ ‫كتابة‬‫والعرض‬ ‫الطول‬ ‫خواص‬ ‫نضع‬ ‫حيث‬.‫الحوار‬ ‫مربع‬ ‫لحجم‬
</ textarea>‫مالحظاتك‬ ‫أكتب‬<cols=”30” rows=”5”textarea>
‫*االزرار‬Buttons
‫والح‬ ‫النص‬ ‫مربع‬ ‫تنظيف‬ ‫عن‬ ‫مسؤول‬ ‫زر‬‫قول‬<input type=”reset” value=”Reset”>
‫االستمارة‬ ‫معلومات‬ ‫ارسال‬ ‫عن‬ ‫مسؤول‬ ‫زر‬<input type=”send” value=”Send”>
‫االستمارة‬ ‫معلومات‬ ‫ارسال‬ ‫عن‬ ‫مسؤول‬ ‫زر‬<input type=”submit” value=”Submit”>
‫*اطار‬‫للـــ‬form: ‫خاصية‬ ‫خالل‬ ‫من‬
……

8
<fieldset>
<legend> Information</legend>
<form>
</form>
</fieldset>
: ‫مالحظة‬< ‫وضع‬ ‫من‬ ‫البد‬tag>(lable)‫االزرار‬ ‫قبل‬‫عنوان‬ ‫على‬ ‫الضغط‬ ‫عند‬ ‫نستطيع‬ ‫لكي‬‫الحقل‬‫ندخل‬‫داخل‬ ‫الى‬
.‫الحقل‬
‫استخدام‬ ‫من‬ ‫البد‬( ‫خاصية‬max length.‫بادخالها‬ ‫يسمح‬ ‫التي‬ ‫االرقام‬ ‫او‬ ‫الحروف‬ ‫عدد‬ ‫تحدد‬ ‫حيث‬ ‫الحقول‬ ‫في‬ ‫مهمة‬ )
( ‫في‬ ‫وهناك‬input)( ‫نوع‬ ‫من‬ ‫وهو‬ ‫المدخلة‬ ‫االرقام‬ ‫اليظهر‬ ‫سري‬ ‫رقم‬ ‫نوع‬type=”pass word”)
< ‫في‬radio( ‫القيمة‬ ‫في‬ ‫نضع‬ >value=”yes”.‫االفتراضي‬ ‫باالختيار‬ ‫نقوم‬ ‫لكي‬ )
( ‫في‬textarea( ‫خاصية‬ ‫نضع‬ )disable.‫النص‬ ‫نخفي‬ ‫لكي‬ )
( ‫للنص‬ ‫التعليق‬ ‫خاصية‬comment)<:=Hello my dear..>
:‫مثال‬
‫*الصورة‬<Img>
‫الويب‬ ‫صفحة‬ ‫على‬ ‫الصورة‬ ‫اظهار‬ ‫عن‬ ‫المسؤول‬ ‫وهو‬
Code Html
<body>
<p> Send Your Favorite of Computer </p>
<fieldset>
<legend> Information</legend>
<form >
<p> Name: <input type="text"
name="name" size="20 /> </p>"
<p> Type: <input type=" checkbox "
name="type” /> </p>
<input type="send" value="send>"
</form>
</fieldset>
</body>
Result
Type of Computer
Information
Name:
Type:
Sony SX
Sony LX
Send

9
<img src= “‫الحاسوب‬ ‫داخل‬ ‫الصورة‬ ‫مسار‬ “ width=”‫الصورة‬ ‫”عرض‬ height= “‫الصورة‬ ‫“ارتفاع‬
Title= “ ‫الضغ‬ ‫عند‬‫ط‬‫معين‬ ‫نص‬ ‫يظهر‬ ‫الصورة‬ ‫على‬ “ alt=” ‫معين‬ ‫نص‬ ‫يظهر‬ ‫الصورة‬ ‫ظهور‬ ‫عدم‬ ‫حالة‬ ‫في‬ “ />
Tag‫الــــ‬<meta>‫الــ‬ ‫داخل‬<head>
‫النصوص‬ ‫في‬ ‫تظهر‬ ‫سوف‬ ‫التي‬ ‫اللغات‬ ‫تعريف‬ ‫في‬ ‫تساعد‬(‫اللغات‬ ‫دعم‬)‫من‬ ‫موقعك‬ ‫الى‬ ‫الوصول‬ ‫امكانية‬ ‫الى‬ ‫باالضافة‬
‫يعتبر‬ ‫اي‬ ‫موقعك‬ ‫الى‬ ‫البحث‬ ‫عبر‬ ‫بالوصول‬ ‫الزبائن‬ ‫تساعد‬ ‫ونصوص‬ ‫محجوزة‬ ‫كلمات‬ ‫تضمين‬ ‫خالل‬‫هذا‬<tag>‫من‬
‫عمل‬ ‫تساعد‬ ‫التي‬ ‫المهمة‬ ‫االوامر‬:‫انواع‬ ‫على‬ ‫وهو‬ ‫المستعرض‬
-‫التالية‬ ‫االوامر‬ ‫خالل‬ ‫من‬ ‫المستعرضات‬ ‫في‬ ‫البحث‬ ‫عبر‬ ‫موقع‬ ‫الى‬ ‫الوصول‬ ‫مهمة‬
</<meta name=”key word” content=html,c#programming”
)‫محجوزة‬ ‫كلمات‬ ‫فقط‬ ‫(هنا‬
<meta name=”Description” content=” ‫البحث‬ ‫في‬ ‫تساعد‬ ‫نصوص‬ ‫كتابة‬ “>
-‫في‬ ‫تساعد‬ ‫اوامر‬‫المستعرض‬ ‫عمل‬:‫خالل‬ ‫من‬
-‫اللغات‬ ‫دعم‬
<meta http-equir=”content-type” Content=”text/html,charset=”UTF-8”>‫ولدعم‬
‫ال‬ ‫في‬ ‫نضف‬ ‫العربية‬ ‫اللغة‬Content(“ windows-1252”)
‫الصفحة‬ ‫انعاش‬<‫تحمي‬ ‫يعاد‬ ‫سوف‬ ‫ثوان‬ ‫اربع‬ ‫كل‬ ‫حيث‬‫له‬> -
<meta http-equiv="refresh” content="4”, http=” ‫المطلوب‬ ‫الموقع‬ “>
‫بين‬ ‫الفرق‬mlXht&lHtm
‫بلغة‬ ‫موقع‬ ‫كتابة‬ ‫عند‬(html)‫حساب‬ ‫اي‬ ‫اليكون‬ ‫اي‬ ‫للصفحة‬ ‫المستعرض‬ ‫قبل‬ ‫من‬ ‫والمعالجة‬ ‫بسيط‬ ‫جدا‬ ‫التعامل‬ ‫يكون‬
‫الـ‬ ‫اغالق‬ ‫في‬ ‫المرتكبة‬ ‫االخطاء‬ ‫على‬<Tags>‫االلتز‬ ‫او‬‫مابينها‬ ‫والفوارز‬ ‫مفصل‬ ‫بشكل‬ ‫الخواص‬ ‫بكتابة‬ ‫ام‬‫سبيل‬ ‫على‬
‫المثال‬(<p class=”header>”)‫وكذلك‬‫الصفحة‬ ‫غلق‬ ‫عند‬‫الـ‬ ‫كتابة‬ ‫او‬<Tag>‫االمور‬ ‫هذه‬ ‫كل‬ ‫كبير‬ ‫او‬ ‫صغير‬ ‫كحرف‬
‫لغة‬ ‫في‬ ‫والتوسع‬ ‫التحديث‬ ‫ظهرت‬ ‫عندما‬ ‫ولكن‬ ‫المستعرض‬ ‫عملها‬ ‫يسهل‬<html>‫والمسماة‬(Xhtml)
‫فتح‬ ‫عند‬ ‫اي‬< >‫الب‬‫الخاص‬ ‫المترجم‬ ‫فان‬ ‫كبير‬ ‫كحرف‬ ‫الصفات‬ ‫كتابة‬ ‫عند‬ ‫الحذر‬ ‫واخذ‬ ‫االولوية‬ ‫وحسب‬ ‫اغالقه‬ ‫من‬ ‫د‬
.‫بتنفيذها‬ ‫واليقوم‬ ‫اليفهمها‬ ‫بالمستعرض‬

10
‫وهناك‬<tags>‫الــ‬ ‫من‬ ‫مجموعه‬ ‫فيها‬ ‫تضع‬ ‫حافظة‬ ‫او‬ ‫كحاوية‬ ‫تستخدم‬ ‫صامته‬<tags>‫التحكم‬ ‫او‬ ‫عليها‬ ‫سيطرة‬ ‫واجراء‬
‫ومنها‬ ‫والوانها‬ ‫بحجمها‬‫ال‬‫ــ‬<div></div>
( ‫التصميم‬ ‫لغة‬Style SheetCascading-CSS(
‫مع‬ ‫المستقبل‬ ‫بيت‬ ‫يرسم‬ ‫ان‬ ‫رسام‬ ‫من‬ ‫نطلب‬ ‫عندما‬‫حيوانات‬ ‫فيها‬ ‫وبحيرة‬ ‫جميلة‬ ‫حديقة‬‫أ‬‫بوضع‬ ‫يقوم‬ ‫سوف‬ ‫ليفة.الرسام‬
‫ا‬‫ونوع‬ ‫والحجر‬ ‫االلوان‬ ‫من‬ ‫البيت‬ ‫صفات‬ ‫اي‬ ‫المضمون‬ ‫ماهو‬ ‫رؤية‬ ‫الجل‬ ‫ولكن‬ ‫عام‬ ‫بشكل‬ ‫للمهمة‬ ‫والهيكلية‬ ‫للمسات‬
‫الحي‬ ‫والوان‬ ‫واالشجار‬ ‫الورود‬( ‫لغة‬ ‫فان‬ ‫وعليه‬ ‫البحيرة‬ ‫في‬ ‫وانات‬HTML‫بت‬ ‫تقوم‬ )‫أ‬‫الويب‬ ‫لصفحة‬ ‫الرئيسي‬ ‫الهيكل‬ ‫سيس‬
‫ي‬ ‫ثم‬ ‫ومن‬ ‫والخارج‬ ‫الداخل‬ ‫من‬‫أ‬( ‫دور‬ ‫تي‬CSS‫و‬ ‫الشكل‬ ‫بترتيب‬ )‫ت‬‫ل‬‫ووضع‬ ‫وينه‬‫ه‬‫بشكل‬ ‫تصميم‬ ‫اي‬ ‫المطلوب‬ ‫المكان‬ ‫في‬
.‫للزبون‬ ‫يظهر‬ ‫سوف‬ ‫الذي‬ ‫النهائي‬ ‫للشكل‬ ‫كامل‬
‫مثال‬:( ‫عمل‬ ‫تاثير‬CSS( ‫صفحة‬ ‫في‬ )HTML.‫الصور‬ ‫هذه‬ ‫خالل‬ ‫من‬ )
‫العمل‬ ‫الية‬

11
( ‫المواد‬ ‫اضافة‬ ‫*يمكن‬CSS:‫طرق‬ ‫بعدة‬ )
1( ‫امتدادها‬ ‫صفحة‬ ‫انشاء‬ .page.css‫في‬ ‫الرئيسية‬ ‫بالصفحة‬ ‫وربطها‬ )<head>:‫يلي‬ ‫وكما‬
( ‫صفحة‬ ‫داخل‬ ‫ان‬ ‫حيث‬CSS( ‫عمل‬ ‫ممكن‬ )selector( ‫كود‬ ‫عن‬ ‫عبارة‬ ‫هو‬ ‫الذي‬ )CSS‫حسب‬ ‫معين‬ ‫عمل‬ ‫يعمل‬ )
‫والخواص‬ ‫المواصفات‬.‫بداخله‬ ‫التي‬
*‫كل‬ ‫يتاثر‬ ‫سوف‬ ‫هنا‬< p >)‫(عام‬ ‫يسمى‬ ‫اي‬ )‫(خصائص‬ ‫المكتوب‬ ‫الكود‬ ‫حسب‬ ‫الموقع‬ ‫في‬
( ‫على‬ ‫يكون‬ ‫التاثير‬ ‫فقط‬ ‫هنا‬ *tag‫الــ‬ ‫في‬ ‫تواجده‬ ‫حسب‬ ‫واحد‬ )(tag)( ‫اسم‬ ‫اضافة‬ ‫يتم‬ ‫اي‬#header( ‫داخل‬ ‫في‬ )tag)
( ‫من‬ ‫اكثر‬ ‫في‬ ‫استخدامه‬ ‫يمكن‬ ‫اي‬ ‫المتعدد‬ ‫يسمى‬ ‫النوع‬ ‫هذا‬ *tag)( ‫كلمة‬ ‫اضافة‬ ‫يتم‬ ‫حيث‬class‫الـ‬ ‫في‬ )(tag.)
<HTML>
<head>
<title>Web Site </title>
<meta http-equiv="Content-Type" content="text/html"
charset="utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css"
media="screen">
</head>
<HTML>
Code CSS
p {
font-size: 12px;
font-weight: bold;
color:#e7e5e5;
}
Code CSS
#header {
color: red;
font-size:25px;
text-align: center;
}
Code Html
<body>
<p>Type of Computer</p>
<p>Type of Hardware</p>
</body>
Code Html
<body>
<p id=” header”>Computer
Class</p>
</body>

12
( ‫من‬ ‫اكثر‬ ‫اضافة‬ ‫ممكن‬ ‫ايضا‬ *selector‫الـ‬ ‫كود‬ ‫في‬ )(CSS( ‫اي‬ )p ,#header ,new‫من‬ ‫اكثر‬ ‫يشتركون‬ ‫حيث‬ )
(selector.‫واحدة‬ ‫خصائص‬ ‫في‬ )
*:‫مالحظة‬( ‫الهرمي‬ ‫الهيكل‬ ‫موضوع‬ ‫حول‬ ‫االنتباه‬ ‫يجب‬Tree‫الضافة‬ ‫الحاجة‬ ‫عند‬ ‫اي‬ )‫لــ‬ ‫خاصية‬(Tag‫معين‬ )‫يجب‬
‫الــ‬ ‫تواجد‬ ‫معرفة‬(Tag)‫هل‬:‫يعني‬ ‫ابن‬ ‫او‬ ‫اب‬ ‫هو‬
Code CSS
.new {
color: blue;
font-size:20px;
text-align: left;
}
Code Html
<body>
<p class=” new”>Sony</p>
<p class=”
new”>Software</p>
</body>
Code CSS
p ,#header ,new {
color: blue;
font-size:20px;
text-align: left;
}
Code Html
<body>
<p id=”header”>Sony</p>
<p
class=”new”>Software</p>
<p> Dill Latiude</p>
</body>
Code Html
<body>
<ol>
<li> Dill </li>
</ol>
</body>
Code CSS
p ol li {
color: blue;
font-size:20px;
}

13
‫طيا‬ ‫الشجرة‬ ‫وحسب‬
*( ‫خصائص‬a)‫التشعبي‬ ‫النص‬
‫ل‬ ‫لون‬ ‫تحديد‬ ‫الجل‬‫ل‬‫عليه‬ ‫الضغط‬ ‫عند‬ ‫التشعبي‬ ‫نص‬‫مختلف‬ ‫بلون‬ ‫يكون‬ ‫الزيارة‬ ‫وعند‬
a:link {color : red ;}
‫احمر‬ ‫لونه‬ ‫يكون‬ ‫التشعبي‬ ‫النص‬ ‫ان‬ ‫اي‬‫فعال‬ ‫يكون‬ ‫عندما‬
a:visited {color : blue ;}
‫ازرق‬ ‫لونه‬ ‫النص‬ ‫يكون‬‫زيارته‬ ‫تتم‬ ‫عندما‬
a:hover {color : gray ;}
‫ي‬‫عند‬ ‫رصاصي‬ ‫لونه‬ ‫النص‬ ‫كون‬‫التأشير‬‫عليه‬
a:active {color : yellow ;}
‫الضغط‬ ‫عند‬ ‫اصفر‬ ‫لونه‬ ‫النص‬ ‫يكون‬‫عليه‬
*( ‫الخطوط‬Font)
‫الــ‬ ‫داخل‬ ‫تضع‬ ‫خاصية‬ ‫وهو‬(selector( ‫كود‬ ‫في‬ )CSS:‫انواع‬ ‫عدة‬ ‫وله‬ )
‫الخط‬ ‫بنوع‬ ‫*يهتم‬font-family: Tahoma , time new roman ;
‫يوجد‬ ‫الخط‬ ‫*حجم‬‫بــ‬font-size:12 pt ,11 px , 22em ,2%;
‫ان‬ ‫يمكن‬ ‫حيث‬ ‫الخط‬ ‫*سمك‬‫مثال‬ ‫سميك‬ ‫او‬ ‫نحيف‬font-weight: normal , bold;
*‫مائل‬ ‫يكون‬ ‫يمكن‬ ‫اي‬ ‫الخط‬ ‫نمط‬font-style : italic ;
HTML
Head
body
<a> <ol> … <p> <p>
<img> <li> </li> <strong>
<i>

14
(*decoration:-Text)‫النص‬ ‫تحديد‬
‫ومن‬ ‫الجملة‬ ‫تحت‬ ‫او‬ ‫فوق‬ ‫خط‬ ‫تحديد‬ ‫على‬ ‫مسؤولة‬ ‫خاصية‬ ‫وهي‬:‫ها‬
-(underline‫الجملة‬ ‫تحت‬ )
-(overline‫الجملة‬ ‫فوق‬ )
-(line-Thought‫الجملة‬ ‫على‬ )
*(justify,,right,center:leftalign-Text)‫النص‬ ‫موقع‬
‫مسؤولة‬ ‫الخاصية‬ ‫هذه‬‫عن‬‫محاذاة‬‫النص‬‫والوسط‬ ‫اليمين‬ ‫والى‬ ‫االفتراضي‬ ‫وهو‬ ‫اليسار‬ ‫الى‬‫وترتيب‬‫ال‬‫نصوص‬
‫واليسار‬ ‫اليمين‬ ‫من‬.
(*Text-height :20px ;)
‫تباعد‬ ‫اي‬ ‫السطور‬ ‫بين‬ ‫ما‬ ‫بالمسافة‬ ‫تتحكم‬ ‫الخاصية‬ ‫هذه‬
(*Text-indent: 11px ;)
( ‫اي‬ ‫الجملة‬ ‫بداية‬ ‫في‬ ‫التحكم‬ ‫خاصية‬Tag)
(*Word-spacing:12px ;)
‫الكلمة‬ ‫في‬ ‫االحرف‬ ‫بين‬ ‫التباعد‬ ‫خاصية‬
(*Letter-spacing : 3px;)
‫الكلمات‬ ‫بين‬ ‫التباعد‬ ‫خاصية‬
(*Text-transform : uppercase;)
(lowercase, uppercase)‫ه‬‫نا‬‫الكلمات‬ ‫في‬ ‫والصغرى‬ ‫الكبرى‬ ‫الحروف‬ ‫خاصية‬
(capitalize)‫كبير‬ ‫كلمة‬ ‫كل‬ ‫من‬ ‫االول‬ ‫الحرف‬ ‫يكون‬ ‫سوف‬ ‫هنا‬.
:‫مالحظة‬‫الــ‬ ‫خواص‬ ‫اختصار‬ ‫الممكن‬ ‫من‬(font‫يلي‬ ‫وكما‬ ‫القيم‬ ‫ذكر‬ ‫خالل‬ ‫من‬ ):
*(font : italic bold 16px Tahoma ;)
‫الخ‬ ‫نوع‬‫الخط‬ ‫نمط‬ ‫الخط‬ ‫سمك‬ ‫الخط‬ ‫حجم‬ ‫ط‬
*‫اطار‬ ‫عمل‬ ‫خاصية‬(border)‫لالطا‬ ‫انواع‬ ‫عدة‬ ‫يوجد‬ ‫حيث‬ ‫الصفحة‬ ‫او‬ ‫للجملة‬‫ر‬:
-‫سمك‬ ‫خاصية‬‫االطار‬
(border-width : 2px)

15
-‫االطارر‬ ‫شكل‬ ‫خاصية‬
(border-style :dotted ;)
:dashed ;)
(:solid ;
(:double ;
‫اللون‬ ‫خاصية‬(border-color : red ;)
:‫يلي‬ ‫ما‬ ‫وحسب‬ ‫واليسار‬ ‫واليمين‬ ‫واسفل‬ ‫اعلى‬ ‫من‬ ‫اي‬ ‫االطار‬ ‫اضلع‬ ‫بشكل‬ ‫التحكم‬ ‫يمكن‬
(border-top-style : dotted ;)
(border-bottom-color : red ;)
‫واحد‬ ‫سطر‬ ‫في‬ ‫الخواص‬ ‫تختصر‬ ‫ان‬ ‫يمكن‬ ‫وايضا‬،‫الحجم‬ ‫الشكل‬ ‫اللون‬
(border: 2px solid red ;)
*‫والترقيم‬ ‫الفقرات‬ ‫خاصية‬<ul><ol>
( ‫كود‬ ‫في‬ ‫يكتب‬ ‫حيث‬CSS)‫ومربعات‬ ‫دوائر‬ ‫من‬ ‫الفقرات‬ ‫أشكال‬:
list-style-type : Circle ,disc , square;
‫الفقرات‬ ‫من‬ ‫بدال‬ ‫صورية‬ ‫رموز‬ ‫اضافة‬ ‫ممكن‬ ‫وايضا‬
;(list-style-image :ur1 (../image/sun.jpg
*‫الوراث‬ ‫مبدأ‬: ‫ة‬‫ان‬ ‫حيث‬ ‫واالحفاد‬ ‫االبن‬ ‫الى‬ ‫االب‬ ‫من‬ ‫والمواصفات‬ ‫الخصائص‬ ‫توريث‬ ‫الية‬ ‫عن‬ ‫عبارة‬ ‫هو‬
(‫الــ‬Tag)<body>‫الصفحة‬ ‫لجسم‬ ‫االب‬ ‫يعتبر‬‫عن‬ ‫والسؤول‬‫أ‬‫ظه‬‫ا‬‫ر‬‫ال‬‫و‬ ‫نصوص‬‫ال‬‫و‬ ‫صور‬‫ال‬‫رسوم‬‫ان‬ ‫حيث‬
‫كود‬ ‫في‬ ‫موصفات‬ ‫أي‬ ‫اضافة‬ ‫عند‬(CSS)‫ال‬ ‫وفي‬(body)‫ي‬ ‫سوف‬‫الــ‬ ‫كل‬ ‫على‬ ‫طبق‬<Tag>‫في‬ ‫الموجود‬
‫ا‬ ‫جسم‬.‫لصفحة‬
Type of CPU:
Intel Core i7
Intel Core i5
ADM

16
*‫الـ‬ ‫خاصية‬(Padding &margin)
( ‫مرئية‬ ‫غير‬ ‫الخاصية‬ ‫الحدود‬margin)‫النص‬ ‫حول‬ ‫اطار‬
‫الحدود‬ ‫على‬ ‫تؤثر‬ ‫اي‬ ‫ملموسة‬ ‫لكن‬)‫(مرئي‬ ‫الصورة‬ ‫او‬
‫الخارجية‬‫للمحتوى‬‫غير‬ ‫الداخلية‬ ‫الحدود‬
( ‫مرئية‬padding‫ملموسة‬ ‫لكن‬ )
‫المحتوى‬ ‫حدود‬ ‫على‬ ‫تؤثر‬ ‫اي‬
( ‫كود‬ ‫في‬ ‫*نضع‬CSS:‫يلي‬ ‫وكما‬ ‫الخواص‬ ‫هذه‬ )
#header {
border : 2px solid#111111;
padding: 4px;
margin: 4px;
( ‫لالطار‬ ‫واالرتفاع‬ ‫العرض‬ ‫*خاصية‬border)
( ‫خاصية‬ ‫استخدام‬ ‫من‬ ‫البد‬ ‫اطار‬ ‫داخل‬ ‫نص‬ ‫وضع‬ ‫عند‬height & wight( ‫خاصية‬ ‫نستخدم‬ ‫وكذلك‬ )over
flow:‫يلي‬ ‫وكما‬ ‫االطار‬ ‫داخل‬ ‫بالنص‬ ‫للتحكم‬ )
Web page
‫المحتوى‬
Code CSS
body {
font-family: Tahoma , time new
roman ;
font-size: 14px;
color: blue;
}
Computer

17
:‫مالحظة‬( ‫لل‬ ‫خواص‬ ‫عدة‬ ‫توجد‬overflow‫ا‬ ‫بحجم‬ ‫للتحكم‬ )‫منها‬ ‫االطار‬ ‫داخل‬ ‫لنص‬
(overflow : auto ,hidden , scroll ;.)
( ‫وهو‬ ‫مرئي‬ ‫غير‬ ‫اطار‬ ‫عمل‬ ‫*ممكن‬outline‫العادي‬ ‫االطار‬ ‫مواصفات‬ ‫يعمل‬ ‫حيث‬ ).
( ‫نستخدم‬ ‫عوائق‬ ‫وبدون‬ ‫الوسط‬ ‫في‬ ‫العنوان‬ ‫او‬ ‫النص‬ ‫وضع‬ ‫*الجل‬margin( ‫كود‬ ‫في‬ )CSS‫البحث‬ ‫لموضوع‬ )
‫يلي‬ ‫وكما‬:
(margin:0 auto;‫يوج‬ ‫ال‬ ‫اي‬ ).‫وسطي‬ ‫والمكان‬ ‫حدود‬ ‫د‬
( ‫*خاصية‬background‫وفيها‬ ‫للصفحة‬ ‫الخلفية‬ ‫الواجهة‬ ‫اي‬ )
‫الخلفية‬ ‫لون‬ ‫عن‬ ‫مسؤول‬background-color :red ;
‫للخلفية‬ ‫صورة‬ ‫تحميل‬ ‫عن‬ ‫مسؤول‬background-image : ur1 (../img/6g.jpg) ;
*‫المضا‬ ‫بالصورة‬ ‫التحكم‬ ‫يتم‬ ‫هنا‬‫الممك‬ ‫من‬ ‫اي‬ ‫بوضعها‬ ‫نقوم‬ ‫مكان‬ ‫اي‬ ‫في‬ ‫فة‬‫في‬ ‫مكان‬ ‫كل‬ ‫في‬ ‫تحريكها‬ ‫ن‬
.‫الصفحة‬
background-position:150px 250px;
( ‫*خاصية‬float‫اي‬ ‫بجانب‬ ‫نص‬ ‫اي‬ ‫وضع‬ ‫اي‬ ‫االيسر‬ ‫او‬ ‫االيمن‬ ‫باالتجاه‬ ‫النص‬ ‫بتحريك‬ ‫الخاصية‬ ‫هذه‬ ‫تقوم‬ )
‫يلي‬ ‫وكما‬ ‫مضافة‬ ‫صورة‬:
Code CSS
.new {
border :3px dashed red;
wight :550px;
height :200px;
}
Result
Computer
V ‫عامودي‬
H ‫افقي‬

18
*‫اضافي‬ ‫خاصية‬‫ة‬‫لل‬‫تحكم‬‫في‬‫الصورة‬ ‫موقع‬‫وهي‬ ‫ادق‬ ‫بشكل‬(position):
:‫مالحظة‬‫تصغير‬‫مواقع‬ ‫تتحرك‬ ‫سوف‬ ‫والكبيرة‬ ‫الصغير‬ ‫الشاشات‬ ‫عبر‬ ‫الصفحة‬ ‫استعراض‬ ‫وكذلك‬ ‫الصفحة‬ ‫وتكبير‬
‫كود‬ ‫في‬ ‫دقيق‬ ‫بشكل‬ ‫مضافة‬ ‫القساسات‬ ‫تكن‬ ‫لم‬ ‫اذا‬ ‫والنصوص‬ ‫الصور‬(CSS)‫توجد‬ ‫لهذا‬ .‫خاصية‬‫الموضوع‬ ‫بهذا‬ ‫تهتم‬
‫وه‬‫ي‬(max-width, min-width.)
‫تتحرك‬ ‫سوف‬
‫جهه‬ ‫الى‬ ‫الصورة‬
‫السفلى‬
‫على‬ ‫تساعد‬ ‫الخاصية‬ ‫هذه‬
‫جوار‬ ‫الى‬ ‫النص‬ ‫تحريك‬
‫االتجاة‬ ‫وحسب‬ ‫الصورة‬
.‫المطلوب‬
float: right; ‫على‬ ‫قادر‬ ‫أليكتروني‬ ‫جهاز‬ ‫وهو‬ :‫الحاسوب‬‫استقبال‬
‫البيانات‬‫ومعالجتها‬ ‫المستخدم‬ ‫قبل‬ ‫من‬ ‫المدخلة‬
‫وعر‬ ‫وخزنها‬.)‫(الشاشة‬ ‫االخراج‬ ‫اجهزة‬ ‫عبر‬ ‫ضها‬
Code CSS
.img {
position: absolute;
top:220px;
left:130px;
} ‫الصورة‬ ‫تتحرك‬ ‫سوف‬
‫اليسار‬ ‫جهه‬ ‫الى‬
Code CSS
body {
min-width :700px;
max-width :1100px;
}
Web Page

منهاج بناء و تصميم مواقع الانترنيت

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to منهاج بناء و تصميم مواقع الانترنيت

Similar to منهاج بناء و تصميم مواقع الانترنيت (20)

More from DrMohammed Qassim

More from DrMohammed Qassim (20)

منهاج بناء و تصميم مواقع الانترنيت