إنشاء أول صفحة الكترونية ب HTML

أبريل 02, 2019


إنشاء أول صفحة الكترونية ب HTML

هل قمت بتثبيت جميع البرامج لاشك انك قمت بمتابعتنا في المقال السابق الدي تطرقنا فيه لكل شئ تحتاجه؟ يجب أن يكون لديك الآن محرر نصوص لإنشاء موقعك (مثل Brackets او Sublime Text) والعديد من المتصفحات لاختباره (Mozilla Firefox، Google Chrome ...).
في هذا المقال سوف نبدأ في التجريب والممارسة! سنكتشف أساسيات HTML ونقوم بحفظ اول صفحة الكترونية لدينا!
نعم ، لا تتوقع أن تنشئ صفحة الكترونية استثنائية ومكمولة في هذا المقال ، ولكن الصبر تم الصبر ... النصر سيأتي!
إنشاء صفحة الكترونية  باستخدام المحرر
سنقوم بإنشاء موقعنا في محرر نصوص. ادا كنت قمت بمتابعتنا في المقال الاول ستقوم باختيار المحرر الدي سترتاح فيه ويوجد العديد منها سنقوم بتذكيرها مجددا : Sublime Text ، و Notepad ++ ، و Brackets ، و jEdit ، و vim ، و TextWrangler ... لا يهم. هذه البرامج لها هدف بسيط للغاية: السماح لك بكتابة النص!
في بقية هذا المقال ، سأعمل في Brackets. سأفتحه:


حسنًا ، ماذا سنفعل الآن؟ ماذا نكتب على هذه الورقة السوداء ؟
سنقوم باختبار صغير. أدعوك لكتابة ما يدور في رأسك ، مثلي في الشكل التالي.


يمكنك كتابة نفس الجمل مثلي أو ما تريد  الهدف هو كتابة شيء ما.
الآن  دعونا نحفظ هذا الملف. الأمر بسيط للغاية: كما هو الحال في جميع البرامج ، لديك قائمة File  >Save )   حفظ باللغة الإنجليزية ) رسالة تقوم بالظهور وتسألك عن مكان حفظ الملف وتحت أي اسم. احفظه أينما تريد وقم بتسمية الملف بالاسم الذي تريده ، بحيث تنتهي بـ.html  على سبيل المثال ، test.html ، كما هو موضح في الشكل التالي.


افتح الآن مستكشف الملفات في المجلد الذي قمت بحفظ صفحتك فيه. سترى الملف الذي أنشأته للتو:


يعتمد الرمز الذي يمثل الملف على متصفح الويب الافتراضي بشكل عام. يمكنك رؤية أيقونة Firefox أو Chrome ... أو معاينة مثل هذه. لا تولي اهتماما. ما عليك سوى النقر نقرًا مزدوجًا فوق هذا الملف و يفتح المتصفح الخاص بك ويعرض النص الذي كتبته.


يظهر النص في نفس السطر عندما تطلب كتابته على سطرين مختلفين. ماذا يجري ؟
في الواقع ، لإنشاء صفحة ويب ، لا يكفي مجرد كتابة نص كما فعلت للتو. بالإضافة إلى هذا النص ، يجب علينا أيضًا كتابة ما يسمى العلامات ، والتي ستقدم إرشادات للحاسوب مثل "الانتقال إلى السطر" ، أو "عرض صورة" ، إلخ.
العلامات وسماتها
حسنا ، كان كل شيء سهل للغاية. لا يكفي كتابة نص "ببساطة" في المحرر ، بل من الضروري أيضًا إعطاء الإرشادات للحاسوب في HTML ، يتم استخدام العلامات لهذا الغرض.
العلامات
تمتلئ صفحات HTML بما يسمى العلامات. وهي غير مرئية على الشاشة للزائرين ، لكنها تسمح للحاسوب لفهم ما يجب أن يعرض في الشاشة.
العلامات هي سهلة لتحديد. إنها محاطة بـ " chevrons " ، أي رموز < و > ، مثل هذا: <balise>
ادن ماهو دور هده العلامات؟ فهي تشير إلى طبيعة النص الذي يؤطرونه. على سبيل المثال: "هذا هو عنوان الصفحة" ، "هذه صورة" ، "هذه فقرة نصية" ، إلخ.
هناك نوعان من العلامات: العلامات المقترنة والعلامات اليتيمة.
العلامات في أزواج
تفتح ، تحتوي على نص ، وتغلق . إليك ما تبدو عليه:

 <titre>هدا عنوان الصفحة</titre>


هناك علامة فتح (<title>) وعلامة إغلاق (<title/>) تشير إلى أن العنوان ينتهي. هذا يعني بالنسبة لجهاز الحاسوب أن أي شيء غير موجود بين هاتين العلامتين ... ليس عنوانًا.
هدا ليس عنوان الصفحة <titre>هدا عنوان الصفحة</titre> هدا ليس عنوان الصفحة
علامات orphelines
هذه علامات يتم استخدامها غالبًا لإدراج عنصر في موقع محدد (مثل صورة). ليس من الضروري تحديد بداية ونهاية الصورة ، نريد فقط أن نقول للحاسوب "إدراج صورة هنا".
يتم كتابة علامة اليتيم مثل هذا:
 />image <
سمات (attributs)
السمات هي بعض خيارات العلامات. يأتون لإكمالهم لإعطاء معلومات إضافية. يتم وضع السمة بعد اسم علامة الفتح وغالبًا ما يكون لها قيمة ، مثل هذا:
<balise attribut="قيمة">
ما هذا؟ خذ العلامة </  image > التي شاهدناها للتو. يمكننا إضافة سمة تشير إلى اسم الصورة المراد عرضها:
<image nom="photo.jpg" />
ثم يفهم الكمبيوتر أنه يجب عرض الصورة الموجودة في الملف image.jpg.
في حالة وجود إشارة تشغيل " الزوج" ، فإننا نضع السمات فقط في علامة الفتح وليس في علامة الإغلاق. على سبيل المثال ، يشير هذا الكود إلى حدت وقع  في 21 يوليوز 1956:
<citation auteur="المختار واكت" date="02/03/1956">
في متل هدا الوقت اخد المغرب الاستقلال
</citation>
الهيكل الأساسي لصفحة HTML5
خذ محرر النص الخاص بنا (في حالتيBrackets). أدعوك إلى كتابة التعليمات البرمجية ونسخها في محرر النصوص. يتوافق هذا الكود مع قاعدة صفحة الويب في HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>العنوان</title>
</head>
<body>
</body>
</html>
قم بنسخه في المحرر سوف تلاحظ :


ستلاحظ أن العلامات تفتح وتغلق بترتيب معين. على سبيل المثال ، تعد العلامة <html> أول علامة يتم فتحها ، كما أنها العلامة الأخيرة التي تم إغلاقها (في نهاية الرمز ، مع < html/>). يجب إغلاق العلامات في الاتجاه المعاكس لافتتاحها. مثال :
·     <html> <body> </ body> </ html>: صحيح. يجب أيضًا إغلاق العلامة المفتوحة داخل علامة أخرى.
·     <html> <body> </ html> </ body>: غير صحيح ، تتشابك العلامات.
بالطبع ، لقد طلب ذلك بشكل جيد. :)
لا تندهش عندما ترى كل هذه العلامات دفعة واحدة ، سنشرح دورها!
Doctype
<!DOCTYPE html>
ويسمى السطر الأول كاملا ب doctype. إنها ضرورية لأنها تشير إلى أنها صفحة ويب HTML.
إنها ليست في الحقيقة علامة مثل الآخرين (إنها تبدأ بنقطة تعجب !).
العلامة < html/>
<html>

</html>

هذه هي العلامة الرئيسية للكود. ويشمل جميع محتويات صفحتك. كما ترون ، علامة الإغلاق < html/> في نهاية الكود!
الرأس <head> والجسم <body>
تتكون صفحة الويب من جزأين:
·     رأس <head>: يقدم هذا القسم بعض المعلومات العامة حول الصفحة مثل عنوانها وترميزها (لمعالجة الأحرف الخاصة) ،وايضا يمكنك روابط CSS وJS الخاص بك إلخ. هذا القسم هو عادة قصير جدا. لا يتم عرض المعلومات الموجودة في الرأس على الصفحة ، إنها ببساطة معلومات عامة مخصصة للحاسوب. ومع ذلك فهي مهمة جدا!
·     الجسم <body>: هذا هو الجزء الرئيسي من الصفحة. سيتم عرض كل شيء نكتبه هنا على الشاشة. من داخل الجسم سنكتب معظم كودنا.
في الوقت الحالي ، يكون الجسم فارغًا (سنعود إليه لاحقًا). ولكن دعونا نلقي نظرة على اثنين من العلامات في الرأس ...
الترميز (charset)
<meta charset="utf-8" />
تشير هذه العلامة إلى الترميز المستخدم في html.ملف  الخاص بك.
بدون الدخول في التفاصيل ، لأنه قد يصبح معقدًا بسرعة ، يشير الترميز إلى كيفية حفظ الملف. إنه يحدد كيفية عرض الأحرف الخاصة (لهجات ، والأحرف العربية ، إلخ).
هناك العديد من تقنيات الترميز بأسماء غريبة وقائمة على اللغة: ISO-8859-1 ، و OEM 775 ، و Windows-1253 ... ومع ذلك ، ينبغي استخدام واحد فقط اليوم قدر الإمكان: UTF-8. تتيح طريقة الترميز هذه عرض جميع رموز جميع لغات كوكبنا دون أي مشكلة عملياً. لهذا السبب أشرت الى UTF-8  في هذه العلامة.
العنوان الرئيسي للصفحة title
<title>
هذا هو عنوان صفحتك ، وربما العنصر الأكثر أهمية! يجب أن يكون لكل صفحة عنوان يصف ما تحتويه.
يُنصح بإبقاء العنوان قصيرًا (أقل من 100 حرف بشكل عام).
لا يظهر العنوان في صفحتك ولكن في الجزء العلوي منه (غالبًا في علامة تبويب المتصفح). احفظ صفحة الويب الخاصة بك وافتحها في متصفحك. سترى أن العنوان يظهر في علامة التبويب ، كما هو موضح في الشكل التالي.

التعليقات
لقد تعلمنا كيفية إنشاء أول صفحة HTML في هذا المقال. قبل الختام ، أود أن أعرض مبدأ التعليقات.
تعليق في HTML هو النص الذي يعمل ببساطة بمثابة مذكرة. لا يتم عرضه  ولا يقرأه الكمبيوتر ، ولا يغير عرض الصفحة.
باختصار ، أنها غير مجدية؟
هذا الأمر مخصص لك وللأشخاص الذين سيقرأون الكود المصدري لصفحتك. يمكنك استخدام التعليقات لترك معلومات حول كيفية عمل صفحتك.
ما الفائدة؟ سيتيح لك ذلك أن تتذكر كيف تعمل صفحتك إذا عدت إلى الكود بعد غياب طويل.  وهذا يحدث لجميع مشرفي المواقع.
إدراج تعليق
التعليق عبارة عن علامة HTML مع نموذج خاص:
<!-- هدا تعليق -->
يمكنك وضعه في المكان الذي تريده الكود: لا يؤثر على صفحتك ، ولكن يمكنك استخدامه لمساعدتك في العثور على الكود .
<!DOCTYPE html>
<html>
<head>
<!—رأس الصفحة -->
<meta charset="utf-8" />
<title>العنوان</title>
</head>
<body>
<!—جسم الصفحة  -->
</body>
</html>


اضافة تعليق

ليست هناك تعليقات

الاشتراك في: تعليقات الرسالة ( Atom )