Professional Documents
Culture Documents
موضوعات خاصة في هندسة الحاسوب والبرمجيات HTML Css
موضوعات خاصة في هندسة الحاسوب والبرمجيات HTML Css
موضوعات خاصة في هندسة الحاسوب والبرمجيات HTML Css
)(Selected Topics
إعداد
مهندس يحيى عبدالناصر العباسي
HTML
بنية مستندات : HTML
.1وسم البداية :وهو يحتوي على اسم العنصر ،موضوعًا ضمن قوسين على شكل زاوية ،وقد يلي االسم
الخاصيات التي تؤثر عليهً ,
مثل >. <p
.2وسم النهاية :وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخ ٍط مائل قبله لإلشارة إلى نهاية العنصر,
الحظ أ َّن نسيان وسم النهاية قد يسبب أخطا ًء في بعض األحيان ،لذا خذ حذرك وتذكرهً ,
مثل >. </ p
.3المحتوى :وهو موجودٌ بين وس َمي البداية والنهاية ،ويُمثِّل في معظم األحيان محتوى العنصر.
.4العنصر :هو وسم البداية ووسم النهاية إضافةً إلى المحتوى .
1
العناصر:
الوصف العنصر
تمثل ستة مستويات من ترويسات األقسام لتكبير الخط ><h1-h6
هو حاوية عامة للمحتوى التي ال تُمثِّل شيئًا معيِّنًا ،يمكن استخدامها لتجميع العناصر ألغراض مثل ><div
التنسيق
تمثيل فاصل موضوعي بين الفقرات ><hr
ُعرض بخ ٍط عريض
تمثيل نص ،وي َ ><b
سطر جديد
ٍ يؤدي إلى االنتقال إلى ><br
عرض بخ ٍط مائل
ي تمثيل نص ,وي َ ><i
يستخدم العنصر لعرض النص مع وضع خط أفقي تحت خط األساس لمحتواه ><u
2
تعريف خلية تُمثِّل ترويسةً في الجدول الذي يحتويها ><th
تعريف مجموعة من األسطر التي تُمثِّل ترويسةً ألعمدة العنصر ><table ><thead
تعريف سطر يحتوي على خاليا في جدول ،وهذه الخاليا تُمثَّل عبر العنصرين > <tdو ><th ><tr
><noshade
خاصيات :HTML
الوصف خاصية
خاصية العنصر> ,<imgيحدد فيه مكان الصورة المضافة للصفحة Src
خاصية العنصر> ,> tdتقوم بحذف عدد من األعمدة التي تمتد عليها الخلية Colspan
خاصية العنصر> ,> tdتقوم بحذف عدد من األسطر التي تمتد عليها الخلية Rowspan
قيمة هذه الخاصية ال يجوز أن تتكرر في أي عنصر آخر ,تستخدم مع CSSو Java
Scripts
Id
3
الغرض من هذه الخاصية هو السماح بتنسيق العناصر بسرعة Style
يستخدم لوضع خط عرض ومصمت وليس منحوتا ً كما في الحالة القياسية Noshade
رموز:
كود رمز
;&Copy ©
;&Reg ®
;&Amp &
;&It ˃
;&Gt ˂
;&Frac14 ¼
;&Frac12 ½
;&Frac34 ¾
;&Frac13 ⅓
4
• مثال:1
5
(.)H1-H6 • مثال :2أحجام الخط
6
• مثال:3
7
• مثال:4
8
• مثال:5جدول صور مع إدراج رابط لكل صورة.
9
❖ تطبيق مثال السابق:
10
• مثال:6
11
• مثال:7
12
• مثال :8كتابة فقرات.
13
❖ تطبيق على مثال السابق:
14
CSS
)1في : headيستخدم العنصر< >styleثم نحدد جزء التغير ( bodyأو h1أو pأو ). . .و
نفتح قوس مجعد " { } " ونضيف خاصية ( CSSتلوين خلفية أو الخط أو ) . . .ثم ننهي بفاصلة
><head
></head
15
)2في بداية العنصر :نستخدم تنسيق " ," Styleنكتبه في بداية العنصر > " "= <p styleثم
نضيف الخاصية وأخيرا ً نضيف فاصلة منقوطة " ; ".
خاصيات :CSS
الوصف الخاصية
تستخدم إلضافة لون للخلفية Background
16
• إضافة خاصيات إلى كود مثال:1
17
• إضافة خاصيات إلى كود مثال:2
18
• إضافة خاصيات إلى كود مثال :3
19
• إضافة خاصيات إلى كود مثال:5
20
• مثال خارجي:
21
❖ تطبيق على مثال السابق:
22
Java Script
• مثال :1مقارنة بين رقمين.
23