N.AISSI SITEWeb2018 .pdf
À propos / Télécharger Aperçu
Nom original: N.AISSI-SITEWeb2018.pdf
Ce document au format PDF 1.4 a été généré par Writer / LibreOffice 4.3, et a été envoyé sur fichier-pdf.fr le 28/04/2018 à 19:43, depuis l'adresse IP 41.104.x.x.
La présente page de téléchargement du fichier a été vue 967 fois.
Taille du document: 4.6 Mo (300 pages).
Confidentialité: fichier public
Aperçu du document
1
الفهرس
الموضوع
الفصل الول:الساسيات
ماهي HTML
الدوات المطلوبة لبناء صفحات النترنت
وسوم هيكل المستند Document Structure Tags
خصائص الوسوم Attributes Tags
التعليقات في HTML
أسئلة الفصل الول
الفصل الثاني:الخطوط واللوان
اللوان
ملخص اللوان في HTMLممثلة بالطريقتين
ملخص للوان الخلفيات في HTML
الوسم ><body
الوسم ><br/
الوسمة ><h1><h2><h3><h4><h5><h6
2
الوسم ><font
الوسم ><b
الوسم ><i
الوسم س<u
الوسم ><strong
الوسم ><em
الوسم ><sup
الوسم ><sub
الوسم ><big
الوسم><small
الوسم ><strike
الوسم ><s
الوسم ><tt
أسئلة الفصل الثاني
الفصل الثالث:الفقرات والقوائم
الفقرات
الوسم ><p
3
الوسم ><blockquote
الوسم ><pre
الوسم ><center
القوائم
الوسم ><ol
الوسم ><li
الوسم ><ul
قوائم التعريفات
الوسم س<dl
الوسم ><dt
الوسم ><dd
أسئلة الفصل الثالث
الفصل الرابع:وسوم الويب
الوسم ><img
تحديد مسار الصورة
الروابط
الوسم س<a
4
اربع طرق لتعريف الروابط
خرائط الصور
الوسم ><map
الوسم ><area
تقسيم الويب
الوسمس<div
الوسم ><hr
الوسم ><embed
الوسم ><marquee
أسئلة الفصل الرابع
الفصل الخامس:الجدوال
شرح الوسوم
الوسم ><table
الوسم ><tr
الوسم ><td
الوسم ><caption
أمثلة على الجداول
5
أسئلة الفصل الخامس
الفصل السادس:الطارات
الوسم ><frameset
الوسمس<frame
الخاصية name
أسئلة الفصل السادس
الفصل السابع:النماذج
أشكال النماذج
الوسم ><form
الوسم ><Input
الفرق بين radioو checkbox
الوسم ><select
الوسم ><option
الوسم ><optgroup
الوسم ><textarea
الوسم ><fieldset
6
الوسم ><legend
أسئلة الفصل السابع
الفصل الثامن:الميتا والرموز
الوسم س<mate
الرموز
أسئلة الفصل الثامن
الفصل التاسعCSS:
ماهي CSS
ماهي فوائد)(CSS
طرق تعريف ت (CSSداخل الصفحات
الوسم ><link
طريقة تحديد CSS
خصائص CSS
background
color
Text
Font
7
links
list
border
table
margin
padding
display & visibility
Position & z-index
float & clear
8
الفصل الول
ماهي HTML
لغةت (HTMLهي اختصار الى ت(Hyper Text Markup Language
وهي ليست لغة برمجة وإنما هTTي لغTTة ترميTTز تسTTتخدم فTTي إنشTTاء
وتصميم صفحات النترنت وتعتبر من اقدم اللغTTات وأوسTTعها اسTTتخدما
في المواقع وتسTTتخدم ت ( HTMLوسTTوم أو ت (tagsلصTTدار التعليمTTات
إلى المتصفح
الدوات المطلوبة لبناء صفحات النترنت
أولم:محرر لكتابة وسومت (tagsمثل م:
notepad-1تمجاني(
notepad++-2تمجاني(
dream waver-3تغير مجاني(
Komodo-4تيوجد نسخة مجانيه ونسخة غير مجانية(
ثانيام:متصفح إنترنت من اجل العرض مثلم:
Google chrome-1
Fire Fox-2
Opera-3
9
Internet Explorer-4
يفضل استخدام المحررات التالية في كتابة وسومت:(HTML
1-Notepad ++
2-Komodo
وذلك لنها تحتوي على مساعدة في كتابة الوسوم
-1جميع وسومت (HTMLتوضع بين علمتي أكبر وأصغرت><(
-2اغلب وسوم) (HTMLلها زوجين من الوسوم وسم بداية
وسم نهاية مثل >وسم النهاية> </وسم بداية<
-3هناك وسوم لها زوج واحد أي وسم واحد فقط مثلت>(<br/
-3جميع وسوم ت (HTMLتكتب بين وسمي><html> </html
10
وسوم هيكل المستند Document Structure Tags
وهTTي عبTTارة عTTن أربعTTة وسTTوم ت ( TagsوتسTTمى بوسTTوم هيكليTTة
المستند وذلك أي ملف تقTTوم بتصTTميمه يحتTTوي علTTى هTTذه الوسTTوم
الربعة كما في الصورة
11
الوسوم الربعة هي م:
><html> </html
><head></head
><title></title
><body></body
HTML
هذا الوسم يعني أن الملف يحتوي على أوامر , HTML
وليس نصاً عادياً
HEAD
يعتبر هذا الوسم بمثابة رأس الصفحة الذي يتم وضع
معلومات عن الصفحة فيها مثلت (page titleاو ت(meta tag
TITLE
هذا الوسم هو مخصص لعنوان الصفحة حيث أن عنوان
الصفحة في المثال السابق ت (Page Titleويiهر في
أعلى نافذة مستعرض الويب
BODY
هذا الوسم بمثابة جسم الصفحة ويحتوي على جميع
النصوص والصور التي ستعرض في الصفحة
بعد الطلع الوسوم HTMLالربعة الرئيسية يتم تخزين الصفحة
بامتداد ت (.htmlأو ) (.htmكما في الصورة
12
13
خصائص الوسوم Attributes Tags
يجب عليك أخي القارئ أن تعرف أن اغلب الوسوم تحتوي على
خصائص تعمل على تحسين مiهر الوسم والتحكم فيه بشكل افضل
في الصفحة و هذه الخصائص تكون داخل الوسم مثال
><body bgcolor=#0000FF> </body
في هذا السطر قمنا بتغير اللون الفتراضي للصفحة وهو البيض إلى
اللون الزرق كما في الصورة
ستتعرف على اللوان وخصائص الوسوم بشكل اكثر في
الفصل القادم
14
التعليقات في HTML
تستخدم التعليقات عادة في شرح ووصف الوسوم في صفحة الويب
وهي ل تتأثر بالتنفيذ
15
كما ترى حتى تضيف تعليق في HTMLعليك كتابته بالطريقةالتالية
>--هنا يبدء كتابة التعليق<!--
16
أسئلة الفصل الول
-1ما هي لغة ت(HTML؟
-2ماهي وسوم هيكلية المستند )Structure Tags
(Document
مع شرح وظيفة كل وسم؟
-3ما هو امتداد صفحة ت(HTML؟
-4كيف استطيع تغيير لون خلفية الصفحة من اللون البيض إلى لون
أخر ؟
17
الفصل الثاني
الخطوط و اللوان Colors and lines tags
أولًم :اللوانم:
يمكن تمثيل اللوان في HTMLبطريقتين وهيم:
-1النiام السادس عشر أو ت (Hex decimalويتكون من 6أرقام
وحروف كما في الصورة التاليةم:
18
19
هناك ثلث ألوان أساسية وهي ت (RED,GREEN,BLUEأو
)الحمر,الخضر,الزرق( ولكل منها 256درجة لونية
بحيث يمثل كل رقمين أو رقم وحرف أو حرف ورقم من هذه الثلث
اللوان الساسية بحيث يتم دمجها مع بعض وا ظهارها لون واحد
تمثل هذه اللوان الثلث
20
-2استخدام أسماء اللوانم:
إذا واجهتك صعوبة في استخدام الطريقة الولى يمكنك أن تستخدم
الطريقة الثانية وهي أسهل من الطريقة الولى بحيث يمكنك كتابة
اسم اللون مباشرة كما في الصورة التالية
21
قمنا بتغيير اللون البيض إلى اللون الزرق حيث استخدمنا هنا اسم
اللون مباشرة دون استخدام الطريقة الولى
ملخص اللوان في HTMLممثلة بالطريقتينم:
22
23
24
25
ملخص للوان الخلفيات في :HTML
26
27
الوسوم
><body
الوسم )(Tag
وسم > < body></bodyكما قلنTTا سTTابقا هTTو بمثابTTة جسTTم الصTTفحة
ويحتوي على جميع النصوص والصور التي ستعرض في الصفحة
أهم الخصائص Attributes
bgcolor
dir
هذه الخاصية تسمح بتغيير لون الخلفية للصفحة
مسئولة عن تحديد اتجاه قراءة النص من اليمين
إلى الشمال أو العكس
background
id
مسئولة عن تحديد صورة للصفحة بدل عن اللون
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
text
تحديد اللون الساسي للنص
28
link
تحديد لون الربط أو الوصلة التشعبية
vlink
تحديد لون الربط أو الوصلة التشعبية التي تم
زيارتها
alink
تحديد لون الربط أو الوصلة التشعبية عند النقر
عليها
-1ستتعرف على idو Classبشكل اكثر في في الجزء
الثاني من الكتاب والذي يتكلم عن CSS
-2هناك الكثير من الخصائص الموجودة في اغلب الوسوم
ول يمكن شرحها في الوقت الحالي لن استخدامها يتطلب
بمعرفة في الجافا سكربت تالجزء الثالث من الكتاب( وهناك
خصائص ليست مهما كثيرا سوف اقوم بتجاهلها في هذا
الكتاب
29
مثال على الوسم :body
قمنا في هذا المثال بتغيير لون الخلفية إلى اللTTون الزرق وقمنTTا أيضTTا
بتحديد اتجاه النص مTن الشTTمال إلTTى اليميTTن حيTTث تمثTTل القيمTTة ltr
شمال م يمين و rtlيمين م شمال
30
مثال أخر لتغيير الخلفيةم:
قمنا في هذا المثال بتغيير اللون إلى صورة الخلفية كما فTTي المثTTال
حيث قمنا بكتابة الخاصية backgroundثم كتبنا ت=( ثم اسم الصTTورة
مع امتدادها بين علمتي تنصيص " ” pic.jpg
31
><br/
الوسم )(Tag
وسم > <br/هو وسم مختص بعمل سطر جديد بحيث إذا أردت أن
تنزل سطر جديد فقط استخدم الوسم > <br/كما أن الوسم يتكون
من زوج وحيد فقط
أهم الخصائص Attributes
ل توجد خصائص أو Attributesلهذا الوسم
32
الوسم )(Tag
><h1><h2><h3><h4><h5><h6
هذا الوسم مخصص للعناوين بحيث إذا أردت أن تكتب عنوان معين
تستطيع من خلل هذا الوسم أن تضع عنوان المقالة بين وسمي
></h1عنوان المقالة> <h1بحيث تمثل > <h1أكبر حجم
للعنوان و> <h6أصغر حجم للعنوان
أهم الخصائص Attributes
align
هذه الخاصية مسئولة عن تحديد محاذاة العنوان
عن اليمين-الوسط-الشمال
style
id
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
33
34
35
><font
الوسم )(Tag
وسم س <font></fontيتحكم في الخطوط مTTن حيTTث النTTوع وحجTTم و
لون الخط
أهم الخصائص Attributes
face
هذه الخاصية تسمح بتحديد نوع الخط ويمكن
تحديد اكثر من نوع خط
Color
هذه الخاصية تسمح بتحديد لون الخط
Size
هذه الخاصية تسمح لك بتغيير حجم الخط وتأخذ
القيمة من 1إلى 7حيث واحد اصغر حجم و 7
اكبر حجم
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
36
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
37
><b
الوسم )(Tag
وسم > <b> </bاختصار إلى ت (boldمخصص للخط الغامق
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
38
39
><i
الوسم )(Tag
وسم > <i> </iاختصار إلى ت (italicمخصص للخط المائل
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
40
41
><u
الوسم )(Tag
وسم > <u> </uهو اختصار إلى ت (under lineوهو الخط الذي يوضع
اسفل الكلمة أو الجملة
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
42
43
><strong
الوسم )(Tag
وسم > <strong> </strongهو نفس الوسم س <bوهو مخصص للخط
الغامق
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
44
45
><em
الوسم )(Tag
وسم > <em> </emهو نفس الوسم س <iوهو مخصص للخط المائل
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
46
47
><sup
الوسم )(Tag
وسم > <sup> </supاختصار إلى ت (superوهو عبارة عن الخط
المرتفع
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
48
49
><sub
الوسم )(Tag
وسم > <sub> </subوهو عبارة عن الخط المنخفض
أهم الخصائص Attributes
id
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل IDوتنفيذ أوامر CSSللوسم
Class
هذه الخاصية تسمح لك باستدعاء ملف CSS
سواء من نفس الملف أو من ملف خارجي من
خلل Classوتنفيذ أوامر CSSللوسم
Style
هذه الخاصية تسمح لك بكتابة CSSداخل
الوسم نفسه
50
Sur le même sujet..
document
attributes
background
opera
structure
title
strong
notepad
dream
komodo
bgcolor
color
class
style
table