‫تعلم لغة‬

HTML

Hyper Text Markup Language

‫لغة ترابط النصوص التشعبيه‬

This Book Creating By

Evil Sniper
Salim Mohamed Yakot

‫تم تحميل الكتاب من موقع جنود بورسعيد‬

www.soldiers.6te.net
 ‫إهداء‬

‫هذا الكتاب إهداء إلي أمي الحبيبة و أصدقائي العزاء و كل من أحب‬

‫رحمنا الله و رحمكم‬

‫الفهرس‬

‫نبذه تاريخية عن لغة ال )‪(html‬‬ ‫‪-‬‬

‫كيفية كتابة لغة ال )‪ (html‬الساسيات‬ ‫‪-‬‬
‫الهيكل الساسي للغة‬ ‫‪-‬‬
‫اللوان و الخلفيات‬ ‫‪-‬‬
‫النصوص و التنسيق‬ ‫‪-‬‬
‫الصور و التعليقات‬ ‫‪-‬‬
‫الروابط‬ ‫‪-‬‬
‫الجداول‬ ‫‪-‬‬
‫الفواصل و الختصارات‬ ‫‪-‬‬

‫نبذه تاريخية عن لغة ال )‪(html‬‬ ‫‪-‬‬

‫لغة ‪ html‬هي اختصار لكلمة ‪Hyper Text Markup Language‬‬

‫معناها لغة ترابط النصوص التشعبية‬
‫و قام العلماء بتصميم هذه اللغة لكي يقوموا بربط الملفات ببعضها و جعلها أرشيف‬
‫إلى أن جاء عصر النترنت و كان النترنت مجرد نصوص مرتبطة ببعضها‬
‫للمعلومات و لم يكن يوجد الصور و التصاميم الخاصة بالمواقع اليوم‬

‫كيفية كتابة لغة ال )‪ (html‬الساسيات‬ ‫‪-‬‬

‫لغة تصميم المواقع بكل سهولة و بساطه مجرد وسوم و رموز ليس أكثر‬
 ‫و هذه اللغة تكتب على الساس الفيزيائي التالي‬

‫) شوفت الكلم الكبير ده إيه رائيك ^_^ (‬

‫>‪<tag> text </tag‬‬

‫تكتب علي هذا الشكل‬

‫ل تحتاج إلى مترجم لتتم مثل بقية اللغات‬

‫مثل لغة السى و السى بلس بلس الخ‬
‫كل هذه الشياء تحتاج إلى برامج و لكن لغة ال اتش تي ام ال‬
‫ل تحتاجا الى اى مترجم‬
‫تحتاج فقط الى محرر النصوص‬

‫الهيكل الساسي للغة‬

‫لن تحتاج إلي برامج أو إلي اى شيء مجرد برنامج محرر النصوص‬
‫كيف يتم فتح برنامج محرر النصوص‬
‫‪Start=>all programs=>Accessories=>Notepad‬‬
‫بعد ذلك سوف تقوم بكتابة الرموز الهيكل الساسي و لكن سوف نقوم بشرح كل كود بأذن الله‬

‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> 3nwan elsf7a </title‬‬
‫>‪<head/‬‬
‫>‪<body‬‬

‫>‪<body/‬‬
‫>‪<html/‬‬

‫كما اتفقنا أن الرموز في هذه اللغة يجب أن يتم إغلقه‬

‫نبداء بالشرح‬
‫كود ‪:‬‬
‫>‪<html‬‬ ‫>‪</html‬‬

‫في البداية يتم وضع هذا الكود في أول الصفحة لكي تقوم بتعريف أن هذه الرموز هي رموز لغة‬
‫ال ‪html‬‬
‫نأتي إلي كود الهيد أو الرأس‬
‫و يكون فيه مجرد كود عنوان الصفحة‬

‫>‪<head‬‬
‫>‪<title> 3nwan elsf7a </title‬‬
‫>‪<head/‬‬
‫ماذا تلحظ بعد كتابة الكود و حفظة بصيغة اتش تي ام ال‬

‫‪Save as => web.html‬‬

‫سوف تظهر النتيجة كالتي‬

 ‫النتيجة كالتي‬

‫كما تري لم تظهر في الصفحة اى كلمة و لكن الهيد و هو مكان الرأس للصفحة يوجد كلمه‬
‫فوق علي الشريط الزرق و هي كلمة‬

‫‪el3nwan henaaaaaaaa‬‬

‫و بكده انتو عرفتم كيفية تخزين الصفحة وما هي فائدة كود الهيد‬

‫أما بالنسبة لكود البادي‬

‫أو جسم الصفحة فيتم كتابه جميع الرموز فيه‬

‫‪Body‬‬
 ‫اللوان و الخلفيات‬

‫سوف نتعلم ألن كيفية تغير اللوان لخلفيات لصفحة الخاصة بالموقع‬
‫كيف يتم ذلك‬

‫يتم كتابة هذه الخاصية بالتي‬

‫لون خلفية الصفحة‬

‫>‪<"body bgcolor="red‬‬

‫>‪<body/‬‬

‫الكود في محرر النصوص‬

‫الكود بعد التطبيق‬

‫كما تري لقد أصبحت الخلفية حمراء بسبب إننا كتبنا ‪red‬‬

‫طيب أذاي نغير الخلفية و نحط بدلها صوره‬

‫صوره بدل اللون‬
‫الخاصية‬
‫‪Background‬‬

‫و لزم تخلي بالك من امتداد الصورة‬

‫النتيجة في محرر النصوص‬

‫النتيجة في الصفحة‬

‫النتيجة‬
‫ههههههههه معلش هيا الصورة دي اللي موجودة علي الجهاز‬

‫المهم اللي كده بقت خلفية‬

 ‫النصوص و التنسيق‬ ‫‪-‬‬

‫كيف يتم كتابة كلمة بشكل معين‬

‫كيف‬
‫في البداية‬
‫سوف نتعرف على الخاصية‬
‫‪Font‬‬

‫و خصائصها‬
‫‪Face . size . color‬‬

‫تعال نشوف بتتكتب أذاي و بعدين نشرحها‬

‫كما تري تم كتابة الكود في محرر النصوص‬

‫ترجمه النص ببساطة‬

‫اللون = ‪color‬‬
‫نوع الخط = ‪face‬‬
‫حجم الخط = ‪size‬‬

‫الن يمكن نشاهد التطبيق‬

 ‫كما تري كيف ظهرت الكلمات‬

‫إذا كيف يتم وضع الكلمة في المنتصف و للعلم الكلمة أو الصورة أو الرابط يمكن أن يتم تطبيق‬
‫علية الكواد التية‬

‫في محرر النصوص‬

<center> text </center>

‫شاهد التطبيق‬
‫كما تشاهد اللغة بسيطة ول تحتاج إلي مجهود‬

‫و يمكنك أيضا استخدام الخاصية‬

‫اليسار = ‪left‬‬
‫اليمين = ‪right‬‬

‫و بوجود اكواد أخري مثل ال‬

‫‪Sup‬‬
‫‪Sub‬‬
‫تستخدم كالتي‬

‫تظهر كالتي‬
‫كما تري الكلمة إلي أعلي‬

‫و أيضا ‪sub‬‬
‫إلي أسفل‬
‫بكده يكون أنت فهمت النصوص‬
 ‫الصور و التعليقات‬ ‫‪-‬‬

‫الصور و التعليقات‬

‫ببساطة بسبب انك فهمت جميع الكواد كيف تعمل‬

‫سوف اريك الطريقة لوضع الصورة و بعدها أقوم بشرح الرموز‬

‫في محرر النصوص‬

‫التطبيق‬
 ‫شرح الكود‬
‫طبعا‬
‫إنا طلبت إني أحط الصورة في نص الصفحة ب‬
‫‪Center‬‬

‫>‪"img src="1.jpg‬‬

‫الكود بيسائلك عن مكان أو مصدر الصورة إنا حاطت الصورة جنب الصفحة اللي إنا عاملها‬
‫يعني في مكان واحد بالتالي هحط اسم الصورة على طول مش أكتر ول أقل‬

‫إما بالنسبة لبقية الكود‬

‫‪"width="500" height="500‬‬

‫الطول و العرض‬

‫لتحديد الطول و العرض الخاص بالصورة‬

‫ملحوظة لو صورة صغيرة وحاولت تكبرها راح تفقد الجاز بيه الخاصة بها و سوف تكون‬
‫شوهتها‬
‫لكن ممكن تصغرها‬
‫ما راح تنضر لو صغرت‬

‫إما بالنسبة للتعليقات‬

‫فالكود‬
‫‪Alt‬‬
‫يقوم بها‬
 ‫انظر و شاهد‬

‫بعض المستخدمين يحبون هذه الخاصية للتميز في تصميم المواقع‬

 ‫الروابط‬ ‫‪-‬‬

‫بكده دخلنا علي الروابط ببساطة تعالوا بقا نشوف الروابط‬

‫طبعا إحنا فهمنا الموضوع ماشى اذاى‬

‫هوريكم‬

‫‪ 3‬أنواع من الروابط‬

‫ربط صفحة بصفحة‬

‫ربط صفحة بموقع‬
‫ربط صفحة ببريد الكتروني‬

‫و سوف أضع الثلثة أكواد في صفحة واحده‬

‫كما تشاهد التطبيق كالتي‬

‫لقد قمت بتغير الكلم العربي الى أرقام انجليزية‬

‫المتصفح الخاص بي ل يشاهد اللغة العربية‬
‫معلش مش على جهازي‬

‫نكمل‬
 ‫لو دوست دلوقتي على رقم‬
‫‪1‬‬
‫هيوديني في صفحة إنا عاملها ومخزنها جنب الصفحة اللي أنا عاملها بس اسمها إيه‬
‫‪In.html‬‬
‫تعال نجرب‬
 ‫زى ما انتو شايفين‬

‫و الكود اللي جنبه‬

‫رقم ‪2‬‬

‫هيوديني الى موقع البحث جوجل‬

‫بس مفيش انترنت‬
‫و الثالث للبريد اللكتروني‬
‫كما تشاهد أعطاك مكان لترسل له رسالة‬

‫كده خلصنا الروابط‬

‫الجداول‬ ‫‪-‬‬
 ‫الجدول‬
‫وشرح الجدول ببساطة و بدون تعقيد‬

‫انظر لمحرر النصوص‬

‫شاهد الن التطبيق‬

 ‫كما تري هكذا يتم إنشاء الجدول‬
‫و لقد وضعنا له خلفية لون‬
‫اعتقد انك بعد كل هذا الشرح تستطيع ترجمة النصوص‬

‫انظر للشكل لتري كيف يتم تغير اللوان في مكان معين‬

 ‫شاهد الن التطبيق‬

‫لم تلحظ أن السمك الخاص بالجدول قد كبر بسبب القيمة ‪3‬‬

‫و أن اللوان اختلفت عن الخري‬

‫تعال نشاهد مثال أوضح بكثير‬

‫تعال نشوف التطبيق‬

 ‫كما تشاهد تم تغير شكل الطار للقيمة ‪4‬‬
‫وتم تغير خلفية الى اللون الزرق‬
‫وبكد لو بصيت على الكواد هتعرف أذاي تقوم بصناعة الجداول بسهولة‬

‫الفواصل و الختصارات‬ ‫‪-‬‬

 ‫بالنسبة للفواصل و الختصارات و الكواد الخري‬
‫فهي بالنسبة لك كتعلم الجديد‬

‫سوف اكتب مجموعه من الفواصل و الختصارات و الكواد المفيدة‬

‫و سوف تجربها أنت بنفسك لتكتشف الفرق‬

‫التطبيق لها‬
‫بعض الوامر الهامة ‪ ,‬غفلت عنها كمثال‬
 ‫التطبيق‬

‫طيب‬

‫أذاي أخد سطر و اكتب تحته‬

‫السطر البعيد و القريب‬

 ‫التطبيق‬

‫كما تري يوجد العديد من الشياء‬

 ‫عليك تعلمها بنفسك‬

‫خلفية صوت أو موسيقى‬

‫و يتم وضعها في الهيد >"‪<bgsound src="name.mid" loop="3‬‬

‫لتحريك النصوص‬
‫كمثال‬
‫‪<marquee direction="right" scrouamount="3" behavior="alternate"> text‬‬
‫>‪</marquee‬‬

‫و للربط بين كلم في الصفحة‬

‫>‪<a name="top"> test </a‬‬

‫للربط‬

‫>‪<a href="#top"> test </a‬‬

‫إذا كانت الكلمة الولى بأعلى و الكلمة الخرى بالسفل‬

‫سوف تضغط على السفلة تنقلك الى العلى‬

‫هكذا يكون قد انتهينا من تعليم لغة تصميم المواقع ب ‪html‬‬

‫في رعاية الله‬

‫ونلتقي في كتاب أخر بأذن الله‬

‫‪Evil Sniper‬‬
‫‪Salim Mohamed Yakot‬‬

‫‪www.soldiers.6te.net‬‬
‫فريق جنود بورسعيد‬