Advertisement
  1. Business
  2. Resumes

كيفية استخدام HTML استئناف قالب لجعل موقعك الشخصي

Scroll to top
Read Time: 10 min
This post is part of a series called How to Make a Great Personal Resume Website (Ultimate Guide).
19 Best HTML Resume Templates to Make Personal Profile CV Websites (2022)
Should You Use an Online Resume Builder for Your Personal Site?

() translation by (you can also view the original English article)

وهناك العديد من الطرق لإنشاء موقعك الشخصي استئناف.

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

مع ذلك العديد من الخيارات، يمكن أن يكون من الصعب معرفة من أين تبدأ. لجعل الأمور أكثر تعقيداً، يأتي كل من هذه الخيارات مع مجموعة مختلفة من إيجابيات وسلبيات، ناهيك عن مستوى الصعوبة أو ثمن المشاركة.

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

في ما يلي عدد قليل من الأفضل (لتصفح بسرعة من خلال قبل قراءة على):

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

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

تتبع سير العمل هذا لجعل موقع الويب الخاص بك استئناف وتخصيصه للعلامة التجارية الشخصية الخاصة بك — حيث يمكنك بدء تشغيل موقع الويب الخاص بك في لا وقت من الأوقات شقة.

ماذا تحتاج للحصول على موقع الويب الخاص بك استئناف العيش؟

قبل أن نبدأ بتعديل قالب موقع، دعونا تغطي الأدوات التي ستحتاج إلى الحصول على موقع استئناف HTML الخاص بك وتشغيلها:

1. شركة الاستضافة المناسبة

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

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

2. عميل FTP

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

أحد أكثر البرامج شعبية هو FileZilla . إنه برنامج FTP مجاني سهل الاستخدام ، وهو متوفر على أنظمة Windows و Mac و Linux.

3. محرر الكود

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

لأغراض هذا البرنامج التعليمي ، سأكون باستخدام Sublime Text ، والذي يمكن استخدامه على Mac و Windows و Linux ، والإصدار التجريبي مجاني للتنزيل. تعرف على مزيد من المعلومات حول كيفية العمل مع محرر الشفرة الشهير:

4-قالب HTML والصور لموقع الويب الخاص بك في السيرة الذاتية

هي آخر أمرين تحتاج قالب استئناف HTML والصور كنت تخطط لاستخدام الموقع الخاص بك.

لأغراض هذا البرنامج التعليمي ، سأستخدم نموذج موقع الويب Flatrica HTML استئناف ، الموضح هنا:

Flatrica HTML resume website templateFlatrica HTML resume website templateFlatrica HTML resume website template
قالب الموقع السيرة الذاتية "فلاتريكا إتش تي أم ال".

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

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

كيفية تحرير قالب الموقع السيرة الذاتية للمحتوى

الآن وبعد أن أصبح لديك كل شيء في مكانه ، حان الوقت لتخصيص القالب بمعلوماتك. دعونا نتصفح كيفية تخصيص قالب HTML Flatrica :

1-هيكل هذا القالب استئناف إتش تي أم ال

قبل أن نبدأ في تعديل الملفات، دعونا نلقي نظرة على هيكل هذا قالب HTML. عندما تقوم بفك المجلد, ستلاحظ أنه يحتوي على مجلدين: واحد مع واحد مع ملفات القالب الفعلي والوثائق.

A look at the files included in this HTML resume website templateA look at the files included in this HTML resume website templateA look at the files included in this HTML resume website template
نظرة على الملفات المضمنة في هذا القالب موقع استئناف إتش تي أم ال.

يحتوي المجلد مع ملفات قالب الموقع الفعلي على العديد من المجلدات الفرعية داخل:

  • الألوان، والذي لديه كل رموز الألوان والمتغيرات المستخدمة في قالب الموقع.
  • الخطوط، والتي تحتوي على كافة الخطوط رمز.
  • الصور مع جميع العناصر النائبة للصور.
  • مجلد قد التعليمة البرمجية JavaScript بحاجة للقالب بشكل صحيح. في معظم الحالات، سوف تحتاج ابدأ تحرير هذا المجلد أو الملفات الموجودة فيه كما جافا سكريبت يوفر وظائف إضافية مثل تبديل القائمة لفتح، مراقبة حركة الشرائح، والتحقق من صحة النماذج.
  • مجلد PHP يحتوي على شفرة PHP اللازمة لنموذج الاتصال للعمل. ستحتاج فقط إلى تعديل سطر واحد من الشفرة هنا لإضافة عنوان بريدك الإلكتروني.
  • يحتوي المجلد Sass على كافة المتغيرات في أوراق الأنماط.
  • تحتوي أوراق الأنماط على ملفات CSS ، والتي ستحتاج إلى تعديلها لإضافة نمطك إلى القالب ومطابقته مع علامتك التجارية.

بالإضافة إلى هذه المجلدات ، هناك أيضًا ملفات HTML متعددة: index-normal.html و index-video.html و single-blog.html و single-portfolio.html .

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

2-استبدال معلومات قالب HTML الافتراضي

انقر نقراً مزدوجاً فوق المؤشر-index-normal.html (أو index.html في حال كنت تستخدم قالب مختلف). سيؤدي هذا إلى فتح الملف في المستعرض الخاص بك، وأنه سيجعل من الأسهل فهم أجزاء من التعليمات البرمجية سوف تحتاج إلى تحرير وكيفية العثور عليها في ملف قالب HTML الخاص بك.

Browser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates codeBrowser code inspector view of the HTML templates code
متصفح المفتش طريقة عرض التعليمات البرمجية للتعليمات البرمجية لقالب HTML.

إذا نظرتم إلى القالب في المستعرض الخاص بك، سترى أن كنت بحاجة إلى تحرير:

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

وبمجرد أن تعرف ما الذي تغير، يمكنك البدء في البحث عن التعليمات البرمجية المطابق.

انقر بزر الماوس الأيمن على الاسم الذي يقرأ John Doe وحدد Inspect . ستلاحظ ظهور لوحة في الجزء السفلي تعرض شفرة HTML التي تشكل القالب الخاص بنا.

السطر من التعليمات البرمجية التي تحتوي على الاسم المحدد في الجانب الأيسر من لوحة المفتش بنمط المقابلة على الجانب الأيمن.

كما ترون من الصورة أعلاه، الاسم ما بين<h4>العلامات هي علامات HTML المستخدمة لتمثيل عناوين.</h4>

في معظم الحالات، يكون أزواج العلامة مثل هذا انفتاح وعلامة إغلاق والمحتوى يجب أن توضع بين تلك العلامات لتظهر على صفحة ويب، مثل هذا:

John Doe

لتحرير القالب، كل ما تحتاج إلى معرفته هو العلامات التي تحتوي على الجزء من الصفحة التي تريد تحريرها والعثور عليها في التعليمات البرمجية، واستبدالها بالمعلومات الخاصة بك.

فتح ملف HTML في المحرر الخاص بك

الآن ، ارجع إلى مجلد القالب ، وانقر بزر الماوس الأيمن على index-normal.html ، وحدد Open with Sublime Text . يجب أن تشاهد الآن شفرة HTML الكاملة التي تشكل القالب الخاص بك.

لبدء تحرير القالب، كنت تريد أن تجد نفس التعليمات البرمجية التي شاهدتها في الفريق المفتش من المستعرض الخاص بك.

قم بالتمرير لأسفل حتى تجد أنه حول خطوط 150-151. ثم انقر فوق في ما بين<h4>العلامات واستبدال الاسم بنفسك.</h4>

Replacing the default name and contact informationReplacing the default name and contact informationReplacing the default name and contact information
استبدال الاسم الافتراضي ومعلومات جهة الاتصال.

وبعد ذلك، انقر فوق في ما بين<h6>حذف النص العلامات، وأدخل المهنة الخاصة بك.</h6>

تكرار هذه الخطوات مرارا وتكرارا سيسمح لك لاستبدال كافة معلومات زائفة بنفسك.

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

You can delete sections of the code you dont need You can delete sections of the code you dont need You can delete sections of the code you dont need
يمكنك حذف مقاطع من التعليمات البرمجية التي لا تحتاج.

كيفية استبدال الصور

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

إذا كنت تريد إضافة مزيد من المعلومات، حدد التعليمات البرمجية الموجودة في المقطع المطلوب، نسخة عن طريق النقر فوق CTRL/CMD + C ثم قم بلصق أدناه مع CTRL/CMD + V. في الصورة أدناه، أردت أن إضافة شريط آخر مهارة حتى تحديد التعليمة البرمجية لشريط المهارة الرابعة، ونسخها مباشرة أدناه:

You can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need toYou can duplicate sections of HTML if you need to
يمكنك تكرار المقاطع إتش تي أم ال إذا كنت بحاجة إلى.

والنتيجة النهائية تبدو مثل هذا:

The end product of adding another skill barThe end product of adding another skill barThe end product of adding another skill bar
المنتج النهائي لإضافة شريط آخر مهارة.

كيفية تغيير مظهر الموقع HTML السيرة الذاتية الخاصة بك

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

Flatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet optionsFlatrica comes with numerous stylesheet options
فلاتريكا يأتي مع خيارات عديدة لورقة الأنماط.

يمكن أن تقوم بضبط اللون باستبدال ورقة الأنماط في رأس المستند باسم ورقة الأنماط المفضلة الخاصة بك بسرعة. ابحث عن السطر من التعليمات البرمجية التي تقول:

<--CUSTOM STYLE-->

<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">

تغيير الاسم إلى style_blue.css سوف تعطي لنا قالب لون جديد كلياً والبحث:

The results of apply the blue stylesheetThe results of apply the blue stylesheetThe results of apply the blue stylesheet
النتائج تطبيق ورقة أنماط الأزرق.

إذا كنت تشعر بالمغامرة، يمكنك تحرير ورقة الأنماط الرئيسية تسمى style.css مع الخطوط والألوان لاختيار الخاصة بك. على سبيل المثال، يمكنك تحرير لون الخلفية في style.css بإدخال رمز ست عشري من اللون المطلوب الخاص بك كما يلي:

background-color: #65b5c1؛

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

A look at the resume website templates CSS fileA look at the resume website templates CSS fileA look at the resume website templates CSS file
نظرة على ملف CSS لقالب الموقع.

كيفية تحميل ملفات موقع الويب الخاص بك إلى خادم

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

لبدء عملية التحميل ، قم بتشغيل برنامج FTP الخاص بك. في هذه الحالة ، أستخدم FileZilla. أدخل المعلومات التي قدمها المضيف في الشريط العلوي ، ثم انقر على QuickConnect :

Inserting information into FileZillaInserting information into FileZillaInserting information into FileZilla
إدخال المعلومات في FileZilla.

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

تأكد من تحميلها إلى المجلد الجذر لخادم الاستضافة الخاص بك في المجلد public_html .

Uploading files to the server via FTPUploading files to the server via FTPUploading files to the server via FTP
تحميل الملفات إلى الخادم عن طريق بروتوكول نقل الملفات.

مرة واحدة وقد تم تحميل كافة الملفات، فتح المستعرض الخاص بك وقم بإدخال اسم المجال الخاص بك. تهانينا، الموقع الجديد الخاص بك استئناف الآن يعيش!

أربع نصائح سريعة لجعل موقع الويب الخاص بك استئناف رهيبة

الآن بعد أن كنت تعرف كيفية استخدام قالب HTML السيرة ذاتية، فيما يلي أربع نصائح سريعة التي سوف تساعدك على جعل موقعك الشخصي أكثر من رائع:

  1. ضغط صورك : قبل تحميل الملفات إلى خادم الاستضافة الخاص بك ، تأكد من تقليل حجم ملف صورك عن طريق تحسينها. هذا سوف يساعدك على تسريع موقع الويب الخاص بك. يمكنك استخدام أداة مثل TinyJPG لضغط الصور دون التأثير على جودتها.
  2. ضع في اعتبارك تصغير أوراق الأنماط وملفات جافا سكريبت : كما هو الحال مع الصور ، سيساعد تقليل حجم الملفات على تحميل موقعك بشكل أسرع. ستقوم أدوات مثل CSS Minifier و JSCompress بالعمل نيابة عنك.
  3. أضف موقعك إلى ملفاتك الشخصية في وسائل التواصل الاجتماعي : لقد عملت بجد لإنشاء موقعك ، والآن حان الوقت لإعلام العالم به. زيادة مستوى الرؤية عن طريق إضافة موقعك إلى ملفاتك الشخصية على الشبكات الاجتماعية.
  4. استخدمه كجزء من توقيع البريد الإلكتروني : من أفضل الطرق للترويج لموقعك هو إضافته إلى توقيع البريد الإلكتروني الخاص بك . إنها بسيطة ومجانية ، وتستغرق بضع ثوانٍ لإعدادها ، ولكن الفوائد عديدة.

قم بإعداد قالب استئناف HTML الخاص بك

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Business tutorials. Never miss out on learning about the next big thing.
Advertisement
One subscription. Unlimited Downloads.
Get unlimited downloads