Home-theater-designers
عندما تقوم بإنشاء موقع ويب جديد ، فستريد في هذه الأيام أن يكون متوافقًا مع HTML5. لكنك أيضًا لا تريد قضاء وقت غير ضروري في تعلم تعقيدات HTML5 من البداية ، أليس كذلك؟
لحسن الحظ ، فإن نموذج HTML5 Boilerplate استطيع المساعدة. إنه نموذج أمامي بسيط يمكنك استخدامه لإنشاء موقع ويب HTML5 في بضع دقائق فقط. لكنها أيضًا قوية بما يكفي بحيث يمكنك استخدامها كأساس لموقع معقد ومميز بالكامل.
كيفية استخدام ssd و hdd معًا
سيتناول هذا البرنامج التعليمي HTML5 Boilerplate ما يأتي في النموذج ، والأساسيات التي تحتاج إلى معرفتها حول كيفية استخدامه ، وبعض الموارد لمزيد من التعلم. سأوضح لك أيضًا كيف استخدمت النموذج لإنشاء موقع أساسي للغاية ببضعة سطور فقط من HTML.
نموذج HTML5 Boilerplate
عند تنزيل القالب من HTML5 Boilerplate ، تحصل على عدد من المجلدات والملفات. فيما يلي محتويات ملف ZIP:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngلن نتجاوز كل عنصر في القالب هنا ، فقط الأساسيات. للتأكد من أن لديك الموارد اللازمة لاستخدام جميع الملفات ، سنبدأ بمستندات المساعدة.
وثائق تعليمات HTML5 Boilerplate
يحتوي Boilerplate على مجموعة من مستندات المساعدة المستضافة في GitHub . هذه مساعدة كبيرة عندما يكون لديك أسئلة فنية أو تتساءل عن سبب تصميم شيء ما بالطريقة التي كان عليها.
يتم أيضًا تضمين كل شيء في التوثيق تقريبًا في مجلد المستند الخاص بالقالب. سترى عددًا من ملفات Markdown (.md) التي تساعد بشكل كبير في معرفة كيفية إنشاء موقع Boilerplate الخاص بك.
إذا كنت تريد قراءة كل شيء ، فابدأ بـ TOC.md واتبع الروابط من هناك إلى ملفات Markdown الأخرى. إذا كنت تبحث عن مساعدة بشأن مشكلة معينة ، فابحث عن الملف الذي يبدو أنه قد يكون ذا صلة ؛ Usage.md هو مكان جيد للبدء.
البدء بـ HTML5 Boilerplate's CSS
يأتي نموذج HTML5 Boilerplate مع ملفي CSS: main.css و normalize.css.
يساعد الملف الثاني ، normalize.css ، المتصفحات المختلفة على تقديم العناصر بطرق متناسقة. لمعرفة المزيد حول كيفية عملها ، تحقق من مشروع normalize.css في جيثب .
وفي الوقت نفسه ، main.css هو المكان الذي ستضع فيه أي كود تريده تنسيق موقعك باستخدام CSS . CSS القياسي المضمن في القالب هو نتيجة البحث الذي أجراه المطورون ومجتمع HTML5 Boilerplate. إنه قابل للقراءة ويتم عرضه بشكل جيد في متصفحات مختلفة.
إذا كنت ترغب في إضافة CSS الخاص بك ، فيمكنك إضافته إلى قسم الأنماط المخصصة للمؤلف. سأضيف القليل من تصميم الرابط لصفحة المثال لدينا:
هناك أيضًا عدد من فئات المساعد المفيدة المضمنة في CSS الأساسي. بعضها يخفي العناصر من المتصفحات القياسية وقارئات الشاشة (أو مزيج منها).
ستجد أيضًا في main.css دعمًا للتصميم سريع الاستجابة وإعدادات الطباعة المفيدة.
تم شرح كل هذه العناصر بوضوح من خلال التعليقات في CSS:
بشكل عام ، يمكنك البدء باستخدام CSS الأساسي.
إضافة HTML الخاص بك إلى القالب
يتضمن Boilerplate ملفي HTML: 404.html و index.html.
صفحة الفهرس هي المكان الذي ستنشئ فيه صفحتك الرئيسية (أو صفحتك الوحيدة ، إذا كنت ستنتقل إلى صفحة واحدة بسيطة).
إذا فتحت صفحة الفهرس في متصفح ، فسترى سطرًا واحدًا من النص. لكن البحث في HTML يكشف عن الكثير من الاختباء في الكود. الشيء الوحيد الذي يجب أن تقلق بشأن تغييره هو رمز Google Analytics (ابحث عن النص 'UA-XXXXX-Y' واستبدله بشفرة التتبع الخاصة بك).
يتضمن باقي HTML في صفحة الفهرس معلومات لتطبيقات الويب وإشعارات للمتصفحات القديمة وجافا سكريبت مفيدة. عندما تبدأ ، لن تحتاج إلى العبث بأي من هذا.
ومع ذلك ، يعد ملءها مسبقًا طريقة جيدة للتأكد من أن موقعك جاهز لتحقيق أقصى استفادة من HTML5.
لإنشاء صفحتك ، أدخل HTML بين العلامات في الملف. إليك بعض المعلومات الأساسية التي سأضيفها عن نفسي:
هل تريد إنشاء المزيد من الصفحات؟ أنشئ نسخًا من هذا الملف وأعد تسميتها حتى لا تضطر إلى نسخ ولصق كل HTML. ثم أضف المحتوى الخاص بك.
إذا كنت ترغب في تخصيص صفحة 404 الخاصة بك ، فقط قم بتعديل ملف HTML. ألست متأكدًا مما يجب وضعه على صفحة 404 الخاصة بك؟ تحقق من هذه الأمثلة الرائعة لتصميم صفحة 404.
إضافة رمز مفضل (وأيقونات أخرى)
هل تريد استبدال الأيقونة المفضلة لديك؟ ثم favicon.ico هو الملف الذي ستحتاج إلى استبداله.
إذا لم يكن لديك واحدًا بعد ، فستحتاج إلى إنشاء واحد. يمكنك استخدام مولد الأيقونة المفضل على الإنترنت أو تصميمه بنفسك. فقط تأكد من أنه 16 × 16 بكسل ولديه نوع ملف .ico.
كيفية إعادة فتح آخر جلسة تصفح كروم
إنها لفكرة جيدة أن تضع بعض الأفكار في رمزك المفضل. استخدم هذه الرموز المفضلة لتوجيه عملية العصف الذهني. تأكد من أنه عند إضافة الأيقونة المفضلة الجديدة تسمى favicon.ico.
قد تلاحظ أن هناك ثلاث صور أخرى في الدليل الجذر لموقعك: icon.png ، و tile.png ، و tile-wide.png. ما هذه؟
- يتم استخدام icon.png لأيقونات Apple التي تعمل باللمس. إذا قمت بإنشاء تطبيق ويب ، فسيتم استخدام هذا الرمز عندما يضيف مستخدم iPhone أو iPad التطبيق إلى شاشته الرئيسية.
- تم تصميم بلاط tile.png و tile-wide.png لوظيفة 'التثبيت' في نظام التشغيل Windows ، وسيظهران في نظام التشغيل Windows 10.
من الجيد توفير رموز لجميع هذه الحالات - ولكن إذا لم تكن تنشئ تطبيقًا على الويب ، فقد يكون ذلك ذا أولوية أقل.
إضافة المزيد من الوظائف
بمجرد إضافة HTML وأيقونة مفضلة (بالإضافة إلى أي CSS قد ترغب في تضمينه) ، يكون موقعك جاهزًا للنشر. هذا هو مدى سهولة استخدام HTML5 Boilerplate. قم بتحميله على الخادم الخاص بك ، وقد انتهيت!
هذا ما تبدو عليه صفحتنا:
كما ترى ، فقد أنشأت بضعة أسطر من النص موقعًا يعمل بكامل طاقته (إذا كان لطيفًا بعض الشيء). ليس كثيرًا ، لكن الأمر استغرق بضع دقائق فقط. وهو قابل للتوسعة بدرجة كبيرة باستخدام HTML5. هذه هي قوة نموذج Boilerplate.
ولكن هناك الكثير الذي يمكنك القيام به باستخدام نموذج Boilerplate إذا كنت ترغب في ذلك. إذا كان هناك شيء محدد تبحث عنه ، فهناك فرصة جيدة لأن تجده في وثائق المساعدة.
إذا لم تكن متأكدًا مما يمكنك فعله باستخدام HTML5 ، ولكنك ترغب في معرفة ذلك ، فهناك الكثير من البرامج التعليمية لتصميم الويب لمساعدتك في ذلك.
يشارك يشارك سقسقة بريد الالكتروني هل من المقبول تثبيت Windows 11 على جهاز كمبيوتر غير متوافق؟يمكنك الآن تثبيت Windows 11 على أجهزة الكمبيوتر القديمة باستخدام ملف ISO الرسمي ... ولكن هل من الجيد القيام بذلك؟
اقرأ التالي مواضيع ذات صلة- برمجة
- HTML5
- دروس الترميز
Dann هو إستراتيجية محتوى واستشاري تسويق يساعد الشركات على توليد الطلب والعملاء المتوقعين. كما أنه يكتب مدونات حول الإستراتيجية وتسويق المحتوى على dannalbright.com.
المزيد من Dann Albrightاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك