HTML - L4.pdf

1. ‫الويب‬ ‫تصميم‬ ‫كورس‬
–
‫الترميز‬ ‫لغة‬
html
#4
Web Design – html Course
‫الدرس‬
4
–
‫والتعليقات‬ ‫والعنوانين‬ ‫الفقرات‬
‫وإعداد‬ ‫شرح‬
/
‫السالم‬ ‫عبد‬ ‫ماهر‬ ‫محمد‬

2. 1
•
‫بن‬ ‫الخاصة‬ ‫الويب‬ ‫صفحة‬ ‫في‬ ‫النصوص‬ ‫عرض‬ ‫كيفية‬ ‫معرفة‬ ‫هو‬ ‫دا‬ ‫الدرس‬ ‫في‬ ‫هدفنا‬
‫ما‬ ‫وهذا‬ ‫ا‬
‫الوسمين‬ ‫هذين‬ ‫أحد‬ ‫باستخدام‬ ‫به‬ ‫سنقوم‬
(
2 tags
)
‫أو‬ ‫الفقرة‬ ‫وسم‬ ‫إما‬
paragraph
‫ويكتب‬
‫هكذا‬
<p> </p>
‫ال‬ ‫ويكتب‬ ‫الويب‬ ‫صفحات‬ ‫على‬ ‫عرضه‬ ‫المراد‬ ‫النص‬ ‫بينهما‬ ‫ويكتب‬
‫نص‬
‫ال‬ ‫نهاية‬ ‫حتى‬ ‫واحد‬ ‫صف‬ ‫في‬ ‫ووضعه‬ ‫ا‬‫ا‬‫ي‬‫تلقائ‬ ‫زائدة‬ ‫مسافات‬ ‫أي‬ ‫حذف‬ ‫مع‬ ‫ا‬
‫كامال‬ ‫فيه‬
‫شاشة‬
‫وهكذا‬ ‫آخر‬ ‫لصف‬ ‫ينزل‬ ‫وبعدها‬
‫بلغة‬ ‫النصية‬ ‫الفقرات‬
html
•
‫ال‬ ‫في‬ ‫المبرمج‬ ‫يكتبه‬ ‫الذي‬ ‫بالشكل‬ ‫الفقرات‬ ‫لكتابة‬ ‫اآلتي‬ ‫الوسم‬ ‫استخدام‬ ‫ويمكن‬
‫عدد‬ ‫بنفس‬ ‫كود‬
‫الوسم‬ ‫وهو‬ ‫وغيره‬ ‫الفراغات‬ ‫ونفس‬ ‫األسطر‬
<pre> </pre>
‫اختصار‬ ‫وهو‬
preformatted text
‫صفح‬ ‫على‬ ‫هو‬ ‫كما‬ ‫فبيعرضه‬ ‫تنسيقه‬ ‫تم‬ ‫وأن‬ ‫سبق‬ ‫نص‬ ‫يعني‬
‫الويب‬ ‫ة‬
•
‫أو‬ ‫وسم‬ ‫بوضع‬ ‫الحالي‬ ‫السطر‬ ‫وننهي‬ ‫جديد‬ ‫لسطر‬ ‫ننزل‬ ‫أن‬ ‫يمكن‬
tag
‫اسمه‬
break
‫أو‬
‫يكتب‬ ‫اختصار‬
<br>

3. 2
•
‫الوسم‬ ‫باستخدام‬ ‫الشاشة‬ ‫بعرض‬ ‫ا‬‫ا‬‫ي‬‫أفق‬ ‫ا‬‫ا‬‫ط‬‫خ‬ ‫ترسم‬ ‫أن‬ ‫يمكنك‬ ‫كما‬
<hr>
‫كلمة‬ ‫اختصار‬ ‫وهو‬
horizontal rule
‫أفقية‬ ‫مسطر‬ ‫أي‬
•
‫الوسم‬ ‫بتستخدم‬ ‫لو‬
<p> </p>
‫فاصل‬ ‫مسافة‬ ‫من‬ ‫أكتر‬ ‫تحط‬ ‫وعايز‬ ‫نصية‬ ‫فقرة‬ ‫لكتابة‬
‫من‬ ‫ة‬
‫واحدة‬ ‫فاصلة‬ ‫مسافة‬ ‫معناها‬ ‫واللي‬ ‫دي‬ ‫الكلمة‬ ‫تكتب‬ ‫تقدر‬ ‫يتحذفوا‬ ‫ما‬ ‫غير‬
&nbsp
•
‫كو‬ ‫بايدك‬ ‫كمان‬ ‫أنت‬ ‫تطبق‬ ‫والزم‬ ‫قولناه‬ ‫ما‬ ‫لكل‬ ‫تطبيقات‬ ‫سترى‬ ‫القادمة‬ ‫األمثلة‬ ‫في‬
‫وكتير‬ ‫يس‬

4. 3
•
‫ور‬ ‫اللي‬ ‫للفقرة‬ ‫عنوان‬ ‫إنه‬ ‫وواضح‬ ‫أكبر‬ ‫خطه‬ ‫ويكون‬ ‫أكثر‬ ‫أو‬ ‫ا‬‫ا‬‫ن‬‫عنوا‬ ‫تضع‬ ‫أن‬ ‫يمكن‬
‫ا‬
‫مثال‬ ‫اه‬
‫الوسم‬ ‫باستخدام‬
<h>
‫وهي‬ ‫لألصغر‬ ‫األكبر‬ ‫من‬ ‫متدرجة‬ ‫العنواين‬ ‫من‬ ‫أحجام‬ ‫ست‬ ‫عندنا‬ ‫ولكن‬
‫كاآلتي‬
<h1> </h1>
‫لحد‬
<h6> </h6>
‫تستخدم‬ ‫أو‬ ‫فيهم‬ ‫واحد‬ ‫أي‬ ‫تستخدم‬ ‫وتقدر‬
‫المكت‬ ‫الكالم‬ ‫في‬ ‫أوي‬ ‫تركز‬ ‫الزم‬ ‫موقع‬ ‫تصمم‬ ‫تيجي‬ ‫ولما‬ ‫عادي‬ ‫مرة‬ ‫من‬ ‫أكتر‬ ‫معين‬ ‫واحد‬
‫وب‬
‫البحث‬ ‫محركات‬ ‫في‬ ‫صفحتك‬ ‫ظهور‬ ‫على‬ ‫بيؤثر‬ ‫إلنه‬ ‫الوسم‬ ‫هذا‬ ‫باستخدام‬
‫بلغة‬ ‫والتعليقات‬ ‫العنواين‬
html
•
‫الوسم‬ ‫نستخدم‬ ‫تنفيذه‬ ‫يتم‬ ‫أن‬ ‫بدون‬ ‫الكود‬ ‫كتابة‬ ‫أثناء‬ ‫جانبي‬ ‫كالم‬ ‫لوضع‬
<!-- -->
‫ونكتب‬
‫ك‬ ‫الكود‬ ‫في‬ ‫األجزاء‬ ‫بعض‬ ‫إيضاح‬ ‫بهدف‬ ‫تكون‬ ‫ا‬‫ا‬‫ب‬‫غال‬ ‫التعليقات‬ ‫وهذه‬ ‫بداخله‬ ‫الكالم‬
‫سبق‬ ‫ما‬
‫ال‬ ‫كورس‬ ‫في‬ ‫ا‬‫ا‬‫كثير‬ ‫ورأينا‬
C++
•
‫الوسم‬ ‫باستخدام‬ ‫السطر‬ ‫نصف‬ ‫في‬ ‫الكالم‬ ‫توسيط‬ ‫يمكنك‬ ‫كما‬
<center> </center>

5. 4
•
‫ب‬ ‫قمنا‬ ‫فقد‬ ‫المقابل‬ ‫السؤال‬ ‫في‬ ‫اا‬‫د‬‫جي‬ ‫تأمل‬
‫كتابة‬
‫بي‬ ‫ويفصل‬ ‫عناوين‬ ‫بثالثة‬ ‫فقرات‬ ‫ثالث‬
‫كل‬ ‫ن‬
‫أفقي‬ ‫ومسطرة‬ ‫فارغة‬ ‫سطور‬ ‫والثانية‬ ‫فقرة‬
‫ة‬
‫المثال‬
-
1

6. 5
‫الناتج‬
-
1

7. 6
•
‫بكت‬ ‫قمنا‬ ‫المقابل‬ ‫الكود‬ ‫في‬
‫ابة‬
‫مختصرة‬ ‫شخصية‬ ‫بيانات‬
‫الويب‬ ‫صفحة‬ ‫في‬ ‫وعرضها‬
‫المثال‬
-
2

8. 7
‫الناتج‬
-
2

9. 8
•
‫بكتابة‬ ‫قمنا‬ ‫المقابل‬ ‫الكود‬ ‫في‬
‫بيانات‬
‫في‬ ‫وعرضها‬ ‫مختصرة‬ ‫شخصية‬
‫ال‬ ‫بطريقة‬ ‫ولكن‬ ‫الويب‬ ‫صفحة‬
preformatted
‫المثال‬
-
3

10. 9
‫الناتج‬
-
3

11. 10
•
‫بعر‬ ‫قمنا‬ ‫المقابل‬ ‫الكود‬ ‫في‬
‫ض‬
‫ولك‬ ‫الطالب‬ ‫من‬ ‫بسيطة‬ ‫قائمة‬
‫ن‬
‫يدوية‬ ‫بطريقة‬
...
‫بعد‬ ‫فيما‬
‫القوائم‬ ‫إدراج‬ ‫طريقة‬ ‫سندرس‬
‫مباشر‬ ‫بشكل‬
‫المثال‬
-
4

12. 11
‫الناتج‬
-
4

13. 12
•
‫عالم‬ ‫استخدام‬ ‫على‬ ‫فقط‬ ‫تدريب‬
‫ة‬
‫الفارغة‬ ‫المسافة‬
‫المثال‬
-
5

14. 13
‫الناتج‬
-
5

15. 14
‫شامل‬ ‫تدريب‬
-
‫مكتوب‬
• Write a code using only html to show your personal CV in a web
page, it must contain a heading with your name and a smaller one
with your job title and another smaller one with your mobile phone,
after that put a horizontal rule and below it, write your information
in 3 separated lines, put a horizontal rule and write a new heading
with the name (achievements) and put 3 of your achievements in
separated lines, put a horizontal rule and then write 3 paragraphs
about some trainings you got (put random words)
• Use suitable comments
• Make the code ordered and optimized as possible

16. ‫الشام‬ ‫التدريب‬ ‫كود‬
‫ل‬
1 2

17. 3

18. 17
‫الش‬ ‫التدريب‬ ‫تنفيذ‬ ‫ناتج‬
‫امل‬

19. 18

20. 7
-
<p> </p>
11
-
<center> </center>
10
-
<hr>
9
-
<br>
8
-
<pre> </pre>
12
-
<!-- -->
19
‫المناسب‬ ‫بالشكل‬ ‫نص‬ ‫إلدراج‬
‫بداخلها‬ ‫يوضع‬ ‫ما‬ ‫لتوسيط‬
‫أفقية‬ ‫مسطرة‬ ‫إلضافة‬
‫جديد‬ ‫لسطر‬ ‫للنزول‬
‫إدخاله‬ ‫تم‬ ‫كما‬ ‫نص‬ ‫إلدراج‬
‫تعليق‬ ‫إلضافة‬
13
-
<h1> <h1>
‫أكبر‬ ‫حجم‬ ‫له‬ ‫النص‬ ‫لجعل‬
(
‫عنوان‬
)
‫من‬ ‫أحجام‬ ‫ست‬ ‫ويوجد‬
1
-
6

21. ‫اقتباس‬
‫ج‬َّ‫الر‬ ‫على‬ َ‫ف‬ ْ‫َو‬‫خ‬‫ال‬ ِّ‫ب‬ِّ‫َل‬‫غ‬‫و‬
ِّ‫اء‬
ِّ‫ناء‬َ‫ت‬ ‫بال‬ َ‫موالك‬ِّ‫ل‬ ْ‫ر‬ِّ‫س‬‫و‬
ِّ
‫لألوزار‬ َ‫ة‬َ‫ب‬ ْ‫و‬َّ‫ت‬‫ال‬ ِّ‫د‬ِّ‫د‬َ‫ج‬‫و‬
َ‫غ‬‫ال‬ ِّ‫ة‬‫حم‬َ‫ر‬ ْ‫ن‬ِّ‫م‬ ْ‫ن‬َ‫س‬َ‫ْأ‬‫ي‬َ‫ت‬ ‫ال‬
ِّ
‫ار‬َّ‫ف‬
‫ورا‬ُ‫ك‬َ‫ش‬ ِّ‫ه‬ِّ‫ئ‬‫آال‬ ‫على‬ ْ‫ن‬ُ‫ك‬‫و‬
‫ورا‬ُ‫ب‬َ‫ص‬ ِّ‫ه‬ِّ‫ئ‬‫ال‬َ‫ب‬ ‫على‬ ْ‫ن‬ُ‫ك‬‫و‬
‫والق‬ ِّ‫ضاء‬َ‫ق‬‫بال‬ ٍ‫َىء‬‫ش‬ ُّ‫ل‬ُ‫ك‬‫و‬
ْ‫ر‬َ‫د‬
َ‫م‬ ُ‫ه‬ْ‫ن‬َ‫ع‬ ‫ما‬َ‫ف‬ ٍ
‫قدور‬َ‫م‬ ُّ‫ل‬ُ‫ك‬‫و‬
ْ‫ر‬َ‫ف‬
َ‫ت‬ ‫ي‬َ‫ك‬ ‫ا‬‫ا‬‫م‬ِّ‫ل‬َ‫س‬ُ‫م‬ ُ‫ه‬َ‫ل‬ ْ‫ن‬ُ‫ك‬‫ف‬
‫ما‬َ‫ل‬ْ‫س‬
‫كي‬ِّ‫س‬‫ا‬َّ‫ن‬‫ال‬ َ‫ل‬‫بي‬َ‫س‬ ْ‫ع‬َ‫ب‬ْ‫ت‬‫وا‬
‫ما‬َ‫ل‬ُ‫ع‬‫ال‬ َ‫ن‬
ْ‫غ‬‫األ‬ َ‫ن‬ِّ‫م‬ َ‫ب‬ْ‫ل‬َ‫ق‬‫ال‬ ِّ
‫ص‬ِّ‫َل‬‫خ‬‫و‬
ِّ
‫يار‬
ِّ
‫ار‬َ‫ح‬ْ‫س‬‫باأل‬ ِّ‫يام‬ِّ‫ق‬‫وال‬ ِّ‫د‬ ِّ‫بالج‬
‫األزهري‬ ‫المالكي‬ ‫الدردير‬ ‫أحمد‬ ‫الكبير‬ ‫لإلمام‬
12
/
7
/
2022