كيفية إنشاء موقع HTML بسيط؟

01.06.2020
Լավագույն հոստինգ 'كيفية إنشاء موقع HTML بسيط؟
0 27 мин.


HTML أو لغة ترميز النصوص التشعبية هو ، كما يقول اسمه ، لغة ترميزية. لا تعتبر لغة برمجة بالمعنى التقليدي. إنها لغة يمكن لمنشئ المحتوى من خلالها إنشاء مستندات ووضع علامة على أجزاء مختلفة باستخدام علامات HTML. لغة البرمجة مستوحاة من SGML, ونسخته الأولى ظهرت في عام 1990 في سيرن.

تم تصميم HTML في الأصل للمستندات الثابتة البسيطة ، عندما كان يُنظر إلى شبكة الويب العالمية على أنها نظام لاسترداد المستندات. حاليًا ، تستخدم كل صفحة ويب تقريبًا HTML ، وأصبحت لغة الويب. التكرار الأخير هو HTML5 ، والذي تدعمه جميع المتصفحات الرئيسية ويأتي كتحسين لـ HTML 4 الذي تم “توحيده” في 1997.

ستحدد هذه المقالة بدقة أساسيات إنشاء موقع HTML بسيط, شيء يمكن لأي شخص تعلمه ، بغض النظر عن المهنة التي اختارها.

لماذا يجب أن تتعلم HTML?

يمكن للمرء أن يجادل أنه باستخدام تقنية اليوم ، يمكن لأي شخص إنشاء موقع ويب سريع المظهر ولطيف دون الحاجة إلى ترميز سطر واحد من HTML ، وفي حين أن هذا صحيح بالتأكيد ، فقد يصبح من السهل دائمًا معرفة كيفية تعديله قليلاً.

في كثير من الأحيان ، سيضيف الأشخاص مكونات إضافية / وحدات / امتداد إلى CMS مثل WordPress و Drupal و Joomla وما إلى ذلك لتوسيعها بميزة بسيطة يمكن تحقيقها باستخدام سطرين من HTML. على الرغم من أن المكون الإضافي قد يكون أبسط ، إلا أنه يمكن أن يضيف إلى أوقات تحميل الصفحة ، وهو أمر آخر يدعو للقلق من حيث الأمان والتحديثات.

من السهل جدًا تعلم HTML ، ويمكن أن يكون هناك الكثير من المرح ، لأنك ترى النتائج على الفور ، على عكس لغة البرمجة حيث يتعين عليك تجميع الشفرة التي كتبتها. لديك بالفعل جميع الأدوات اللازمة لبدء تعلم HTML ، ولديك متصفح ويب ولديك بالتأكيد محرر نصوص بسيط مثل المفكرة. تطبيقات مثل Microsoft Word لن تفعل ذلك ، ستحتاج إلى محرر نص عادي بسيط: notepad و notepad ++. هناك ما يسمى IDEs (بيئة التطوير المتكاملة) ، والتي ستساعدك في كتابة HTML مع ميزات مثل تمييز بناء الجملة أو الإكمال التلقائي.

مرحبا بالعالم!

يمكنك الحصول على محرر نصوص مجاني مثل Notepad ++ أو Sublime Text Editor وبدء تشغيله. احفظ الملف الفارغ على سطح المكتب باسم “hello.html”. سيؤدي هذا إلى تغيير المحرر في وضع HTML ، بحيث يمكنك الاستمتاع بمزايا IDE. تفضل الآن واكتب النص التالي فيه:

مرحبا بالعالم!

مرحبا بالعالم!

احفظ الملف ، ثم افتحه باستخدام متصفح الويب. لم يكن الأمر بهذه الصعوبة على الإطلاق ، أليس كذلك؟ يمكنك المضي قدمًا وتعديل الملف وحفظه وتحديث الصفحة في متصفحك ، وسترى جميع التغييرات التي قمت بها. لا داعي للخوف ، لا توجد طريقة يمكنك من خلالها التأثير على نظام التشغيل الخاص بك. لا يمكنك حذف ملفات أو أشياء من هذا القبيل. ولا تخف من الفشل ، كما يقول المثل “لقد فشل السيد مرات أكثر مما حاول المبتدئ”.

أساسيات HTML و 101

أساسيات أتش تي أم أل 101

يتكون HTML من العلامات والنص. علامة HTML لها معنى خاص للمتصفح ، وهي في الأساس طريقة ترميز المستند. يمكن أن تحتوي بعض العلامات على علامات أخرى فيه مثل علامة القائمة غير المرتبة

    يمكن أن تحتوي على عناصر القائمة

  • فيه. علامة فقرة

    يمكن أن يحتوي على علامة سطر جديدة
    , علامة مرساة , بالخط العريض , مائل , إلخ العلامات.

    في مثالنا ، تحتوي علامة HTML الرئيسية على علامة رأس وعلامة نصية. في علامة الرأس ، يمكننا تحديد عنوان المستند الذي سيتم عرضه في عنوان علامة تبويب المتصفح. في الجسم ، لدينا علامة H1 أو علامة العنوان 1.

    يمكن أن تحتوي علامات HTML على سمات يمكنها تغيير سلوك العلامة ، على سبيل المثال ، يمكننا إضافة سمة “style” إلى H1 لدينا لتحديد نمطها. إذا أضفنا style = ”color: red” ، فسيصبح

    مرحبا بالعالم!

    يمكننا تغيير لونه من الأسود الافتراضي إلى الأحمر. بالطبع ، في صفحة ويب أكبر ، فإن تصميم عناصرنا واحدًا تلو الآخر يمكن أن يصبح مشكلة ، وسوف يؤدي إلى ازدحام HTML الخاص بنا. أفضل طريقة هي إعطاء العنصر سمة فئة أو معرف ، ثم تحديد نمطه بواسطة تلك الفئة أو المعرف.

    هناك الكثير دروس HTML والموارد على الإنترنت ، يمكنك مشاهدة البرامج التعليمية على YouTube أو The Great Curses Plus أو قراءة واحدة من آلاف المقالات على الإنترنت حول HTML.

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

    التصميم والبرمجة

    صفحة ويب HTML خالصة ثابتة. هذا يعني أنه لا يمكن أن يحتوي على أجزاء متغيرة ديناميكيًا ، على سبيل المثال ، “آخر أخبارنا”. إذا قمت بإنشاء موقع ويب يحتوي على قسم أخبار ، يتم تحديثه باستمرار ، فإن مجرد إنشاء المقالات ثم تحديث المراجع إليه يمكن أن يصبح مهمة ضخمة جدًا.

    من ناحية أخرى ، إذا قمت بإنشاء بطاقة عمل أو نوع عني من موقع الويب بتنسيق HTML ، والذي لا يتغير كثيرًا ، ربما مرة أو مرتين في الشهر ، فإن موقع HTML الثابت يكون مثاليًا. نظرًا لأنه لا يحتوي على أجزاء “متحركة” ، مثل قاعدة البيانات والمعالجة من جانب الخادم (PHP و Python و Ruby وما إلى ذلك) ، هناك عدد أقل من الأشياء التي يجب أن تسير بشكل خاطئ ، كما أنها سريعة للغاية.

    يمكنك جعل ديناميكية الصفحة الثابتة بإضافة JavaScript (نص ECMA على وجه الدقة) ، وهي لغة برمجة نصية. باستخدام JavaScript ، يمكنك الرد على إدخالات المستخدم من خلال إخفاء أو إظهار بعض أجزاء HTML ، كما يمكنك أيضًا تغيير شكل صفحة الويب وأسلوبها. مع أجاكس, يمكنك طلب موارد إضافية من موقع الويب الخاص بك ، مثل الصفحات الفرعية أو نموذج الاتصال أو أحدث التغريدات الخاصة بك ، ويمكنك دمجها في موقع الويب الخاص بك.

    أنماط HTML الافتراضية مملة للغاية ، فهي نص أسود على خلفية بيضاء. يمكنك تغيير نمط أي عنصر HTML باستخدام CSS (أوراق الأنماط المتتالية). في HTML ، لا يمكنك التحكم في كيفية عرض المستند الخاص بك ، فهي ميزة في HTML ، وليست قصورًا. مع CSS ، يمكنك أن تحاول أن تكون أكثر دقة قليلاً ، ولكن لا يزال لا يمكنك التحكم بنسبة 100٪. ستقوم بعض المتصفحات بأشياء مختلفة قليلاً عن غيرها. إن إصدار CSS الحالي ، والذي تدعمه جميع المتصفحات الرئيسية هو CSS3 ، ولديه الكثير من الميزات المفيدة التي افتقر إليها المعيار السابق.

    لفهم CSS ، يجب أن تبدأ بنموذج الصندوق ، سيوفر لك الكثير من الارتباك في البداية ، ومن المهم بالنسبة لك أن تفهم الفرق بين الحدود ، والحشو ، والهوامش ، وما إلى ذلك. من السهل جدًا تعلم CSS و كما هو الحال مع HTML ، سترى على الفور التغييرات التي أجريتها. كما ذكرنا من قبل ، يمكنك إضافة معرف أو عنصر فئة إلى أي علامة HTML ويمكنك كتابة قواعد CSS لهذه المعرفات والفئات. للرجوع إلى مثالنا ، في قسم الرأس إذا كتبنا النص التالي,

    الجسم {

    لون الخلفية: أزرق ؛

    }}

    سيؤدي ذلك إلى تغيير لون المستند الأبيض الافتراضي إلى اللون الأزرق.

    هناك شيء واحد يجب وضعه في الاعتبار مع CSS وهو أن هناك الكثير من العلامات الخاصة بالمتصفح ، لذا تأكد من اختبار موقعك على الويب باستخدام متصفحات مختلفة أو على الأقل Google Chrome و Mozilla Firefox و Internet Explorer 11 و Edge. لن يضرك أن تلقي نظرة سريعة على بعض متصفحات الجوال أيضًا ، خاصة Safari IOS.

    استنتاج

    إن تعلم HTML و CSS أسهل من معظم لغات البرمجة ، ويمكن أن يكون تجربة مجزية للغاية. باستخدام HTML ، ستتمكن من إنشاء صفحات الويب بالطريقة التي تريدها بالضبط ، بدون تنازلات كما هو الحال في حالات CMS. سيسمح لك بناء مواقع HTML باستضافتها في أي مكان وستكون سريعة التحميل وسلاسة للغاية.

    حتى مع ظهور جميع أنواع أدوات إنشاء مواقع الويب الخاصة بالسحب والإفلات ، لا يمكن اعتبار HTML قديمًا. إنه يدعم كل موقع ويب ، وحتى مع أدوات إدارة مواقع الويب وأدوات إنشاء المواقع القوية ، والتي تمكنك من إنشاء موقع ويب ذو مظهر احترافي دون أي معرفة بالتشفير ، قد ترغب في إجراء بعض التعديلات هنا وهناك على موقعك للحصول على الأشياء بالطريقة التي تريدهم أن يكونوا. إن تعلم بعض HTML سيسمح لك بذلك.

    يمكن أن تكون معرفة أساسيات HTML مهارة مفيدة لاكتسابها لأي شخص ، وليس فقط أولئك الذين يخططون للعمل في مجال تكنولوجيا المعلومات. سيستفيد أولئك الذين يعملون مع محتوى الويب والتسويق عبر الإنترنت والترجمة وأي شخص يحتاج إلى حضور عبر الإنترنت من دورة تدريبية سريعة في HTML.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Оцените статью
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector