برمجة مواقع الإنترنت باستخدام لغة HTML
الوصف
المصطلح HTML هو اختصار للعبارة Hyper Text Markup Language والذي يعني لغة النصوص الحية التشعبية. يظن الناس أن إنشاء المواقع عملية صعبة معقدة، هذا ليس صحيحاً! يمكن للجميع تعلم كيفية إنشاء المواقع. وإذا أكملت قراءة هذا الدرس ستتمكن من إنشاء واحد خلال ساعة واحدة فقط.
آخرون يظنون أن إنشاء المواقع يحتاج إلى برامج غالية ومتقدمة وهذا أيضاً غير صحيح، صحيح أن هناك الكثير من البرامج التي تدعي أنها تستطيع إنشاء مواقع لك، بعضها يفعل ذلك بشكل أفضل من البرامج الأخرى، لكن إن أردت إنشاء المواقع بشكل صحيح فعليك أن تفعل ذلك بنفسك، لحسن الحظ عملية تطوير المواقع بسيطة والأدوات التي تحتاجها متوفرة لديك ومجانية.
الهدف من هذا الكتاب هو نعطيك مقدمة سهلة وصحيحة وشاملة إلى كيفية إنشاء المواقع، هذا الكتاب يبدأ من نقطة الصفر ولا يتطلب أي معرفة مسبقة منك عن البرمجة أو تطوير المواقع.
لا يمكن لهذا الدرس أن يعلمك كل شيء، لذلك لا بد أن تجرب بنفسك وتثابر على التعلم، لكن لا تقلق، تعلم تطوير المواقع ممتع ويعطيك شعوراً بالرضى عندما تتعلمه بشكل صحيح.
كيف ستسخدم هذا الدرس؟ هذا أمر يعود لك، لكننا نقترح عليك أن تقرأ جزئين أو ثلاثة من هذا الدرس في اليوم وتخصص وقتاً للتجارب مع الأشياء الجديدة التي تعلمتها في كل جزء.
حسناً، لنبدأ في التعلم!
تأليف:
الدرس الثاني: ما هي لغة 471/11 ؟
لكي نختصر القصة 1/1 !|اخترعت في عام ٠55١م من قبل عالم يسمى تيم بيرنرز لي؛ الهدف
من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونهاء
المشروع نجح بشكل لم يتصوره تيم بيرنرز لي؛ باختراعه .1471/1 قام تيم بوضع أساس شبكة
هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت؛ ما تراه عند
زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر 471/1 ١ لكي ترى 1471/1 لأي
صفحة تزورها عليك أن تضغط على قائمة عرض "190/ا" ثم المصدر ."86/08"
لمن لم يعتد على رؤية هذه الأوامرء -477/11]تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.
ما فائدة 171//1] ؟
إذا أردت إنشاء موقع فلا توجد طريقة أخرى غير استخدام لغةا471/1] ؛ حتى لو استخدمت برنامجاً
لإنشاء المواقع مثل دريمويفر؛ معرفتك للغة 1171/11 ولو بشكل بسيط ستساعدك على إنشاء مواقع
أفضل؛ الجميل أن هذه اللغة سهلة التعلب في درسين فقط ستتعلم كيفية إنشاء موقعك الأول.
7111|تستخدم لإنشاء المواقع؛ هذا كل شيء ببساطة!
حسناً؛ ماذا تعني ا-1/1- 4-7 ؟
1 ]اهي اختصار "120900896 (نا-/1/180 8 4/06137]" ١ أنت لا تحتاج في هذه المرحلة
لمعرفة ماذا تعني هذه المصطلحات؛ مع ذلك لنشرحها بتفصيل أكبر.
. ]هي عكس “خطي" وهي تعني في هذه الحالة أن تنتقل من أي ن
الحواسيب تعمل بشكل خطي؛ تقوم بتنفيذ أمر ما ثم تذهب لما بعده؛ لكن 47/11 مختلفة؛
يمكنك أن تذهب إلى أي مكان في أي وقت؛ ليس بالضرورة مثلاً أن تزور موقع
200.-50/اقبل أن تزور .471/1086
ِ ]0ا16تعني النص؛ وهذه تشرح نفسها. ٠.
٠ (0ا+8/اهو ما تفعله بالنتص؛ فهذه الكلمة تعني توصيف النصء فأنت تقوم بتوصيف
النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك
٠ 80900896اتعني اللغة؛ فتقنية 471/11] هي لغة توصيف وهي أيضاً تستخدم العديد من
في هذا الدرس ستتعلم أيضاً 1614711 والتي تعني م0نت2016ا/١ 18:6 61ر4 19051016"
"200086-اوهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة. 4711|
الآن أنت تعرف ماذا تعني 1171/1 و61471/1ل لنبداً مع ما يهمنا هنا: إنشاء المواقع.
الدرس الثالث: العناصر والوسوم
الآن أنت جاهز لتعلم جوهر لغة 471/11 وهي العناصر.
العناصر تعطي لوثائق .]171/1 هيكلية محددة وتخبر المت بفية عرض الصفحة؛ بشكل عام
العناصر عبارة عن وسم "80]" للبداية ثم بعض المحتويات ثم وسم الإغلاق.
الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.
كل الوسوم لها نفس نفس الشكل؛ تبداً مع علامة أصغر من ">" وتنتهي مع علامة أكبر من."<"
بشكل عام هناك نوعان من الوسوم؛ وسم البداية <ا1000/> :ثم وسم الإغلاق .<ا1100/> الفرق بين
الإثنين هي علامة "/"؛ توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.
لغة 1471/11 تتكون من هذه العناصر؛ لكي تتعلم 1471/11 عليك أن تتعلم وتستخدم وسوماً مختلفة.
حستاً؛ العنصر ع يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <«ع> ووسم
الإغلاق <«ع /> ستظهر بشكل مائل في المتصفح "(607") .هي اختصار (. "6100112518"
<«©/>.نص مائل <>
سيظهر بهذا الشكل في المتصفح:
العناصر 1:1 +112 +113 +114 ؛ 115 و 16اتستخدم للعناوين (حرف (| هو اختصار ,("680109”
حيث 1:1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً؛ 1,2 يستخدم للمستوى الثاني من
العناوين وهو أصغر حجماً بقليل؛ و 1.6هو المستوى السادس والأخير من هيكلية العناوين وهو
مثال ؟:
ستظهر بهذا الشكل في المتصفح:
هذا عنوان
هذا عنوان فرعي
هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟
كما يقولون؛ هناك استثناء من كل قاعدة؛ والاستثناء في 471/11 هو وجود عناصر هي وسم
البداية ووسم الإ في نفس الوقت؛ وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين
هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟
معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين»؛
ب الوسوم في وثيقةا//471] ؛ المواقع تحوي وثيقة 471/11 أو أكثر؛ عندما تتصفح شبكة الويب
إذا انتقلت إلى الدرس اللاحق ستتمكن من إنشاء موقعك خلال عشر دقائق.
الدرس الرابع: إنشاء موقعك الأول
مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.
في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو
أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى
أيضاً عليك أن تفتح برنامج المفكرة "001808.0م" والذي ستجده في قائمة إبداً ثم برامج ثم أدوات:
مسد يه ©
ماع
لنبداً بشيء بسيط؛ سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف
كم هو بسيط فعل ذلك.
أول شيء عليك فعله هو أن تخبر المتصفح بأنك ث" معه بلغة |171/1] ؛ يمكنك فعل ذلك عن
طريق وسم <01> لا توجد أي مفاجئة هناء لذلك قبل أن تبداً أي شيء أكتب "<1::01>" في
أول سطر في برنامج المفكرة.
كما تتذكر من الدروس الماضية؛ < 10> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى
كتابة وسم الإغلاق بعد سطرين فارغين؛ وبقية الوثيقة ستكتبها بين <111101> و.< 1101 />
الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "12680" والذي يقدم معلومات حول
في الصفحة؛ أمر 1680 أو رأس الصفحة <116380>) و (<11680/>يوضع فوق أمر 5007 أو
ن الصفحة <ئره 0 >) "و.(<00/7ت />
يث وضعنا كل وسم في جديد ووضعنا مسافات
رعشن يا كقاعدة؛ لا يهم كيف تقوم بتنسيق الأوامر في صفحة 1171/11 ؛ لكن لكي تجعل
الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما
إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول؛ عملياً الموقع ممل ولا يحوي شيئاً
جميل؛ لكن كيف أضيف المحتويات للموقع؟
تكتب معلومات عن الصفحة نفسها؛ أما المتن فيضم المحتويات التي تشكل الصفحة..
الصفحة
مثلا إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في
رأس الصفحة؛ العنصر المستخدم لفعل ذلك هو .71+12 اكتب عنواناً للصفحة بين وسم
البداية <ع111+>ووسم الإغلاق:<6 1111 />
بين وسمي متن الصفحة
الحرف 0 في <> هو اختصار "7ام08/89180" أو فقرة؛ وهو أمر بسيط لإنشاء فقرات نصية.
صفحة 1171/11 يجب أن تكون لديك بالشكل التالي:
انتهينا! لديك الآن أول موقع حقيقي!
+ في برنامج المفكرة اختر "...88 581/8" من قائمة "16[]" في القائمة العلوية.
ستقوم بحفظه كملف نصي وليس كملف. 1471/11
ء احفظ الصفحة باسم "08961.10" الأحرف الثلاثة الأخيرة 11100 تشير إلى أن الملف هو
من نوعا/ا117 ١ بإمكاتك أن تحفظ تضع بدلاً منها "001" وستكون النتيجة متمائلة؛
شخصياً أستخدم "1000 ائما؛ لكن بإمكانك أن تختار بينهما ما تشاء؛ فلا فرق بينهماء ولا
يهم أين تحفظ الملف في القرص الصلب؛ ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة
٠. إضغط على "870/58" في النافذة التي ستظهر لك.
مال مسمس ]0
عنام مايا 20
لسمعار اله
وضع هذه الصفحة على شبكة
ن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية
نت؛ خلافاً لذلك اصبر وأكمل قراءة الدروس
في قسم رأس الصفحة اكتب دائماً العنوان< 11> :عنوان صفحتك .<ع 111/ > لاحظ كيف
سيظهر العنوان في أعلى يسار نافذة المتصفح:
٠ ل -2 © سمل مسار
سس دسا سس لا
العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره
عطافعا متمد افع ما لهف سما صف معام و1006 110107
ج8001 62> <ا10>: جاع
في جسم الصفحة اكتب محتويات صفحتك؛ وأنت تعرف الآن بعض أهم العناصر:
تعلم لغة HTML بالصور خطوة بخطوة بشكل سهل ومبسط
كتاب يشرح لغة برمجة الإنترنت الأساسية HTML كاملة بكل خصائصها وهو بالفعل كتاب متميز .
كتاب مصور يشرح لغة الإتس تي امل ال HTML بشكل مفصل ودقيق.
كتاب يشرح لغة برمجة الإنترنت الأساسية HTML مع الكثير من خصائصها.
الكتاب يعتبر مرجع مهم لكل من يريد تعلم لغة HTML >>وأول خطوة لمن يريد تعلم HTML5 ينصح به لكل مبرمج مصمم مواقع محترف كان أم مبتدئ ..
تعلم لغة HTML بالصور خطوة بخطوة بشكل سهل ومبسط