كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئين

كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئين

هل أردت دائمًا إنشاء موقع على شبكة الإنترنت؟ ربما قرأت بعضًا من HTML ( فهم HTML ) ودروس CSS ، لكن لا تعرف كيفية استخدام هذه اللغات في مشروع أكبر.





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



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





إذا لم تكن متأكدًا من أي CSS ، فقم بإلقاء نظرة على ملف دليل CSS في W3Schools.com .

التصميم

هذا هو التصميم لهذا الموقع. ألق نظرة على صورة عالية الدقة إذا كنت تريد مظهرًا أفضل ، أو حتى أفضل ، قم بتنزيل المشروع الكامل هنا.



لقد صممت هذا الموقع لشركة خيالية في أدوبي فوتوشوب 2017. إذا كنت مهتمًا ، فتأكد من الحصول على ملف .PSD من تنزيل الحزمة. هذا ما تحصل عليه في ملف الفوتوشوب:

داخل PSD ، ستجد كل الطبقات مجمعة ، مسماة ، ومشفرة بالألوان:



ستحتاج إلى تثبيت بعض الخطوط حتى تبدو الأشياء صحيحة. الأول هو رائع الخط ، تستخدم لجميع الرموز. الخطان الآخران هما PT Serif و Myriad Pro (مضمن في Photoshop). إذا لم تكن متأكدًا من كيفية تثبيت الخطوط ، فاقرأ دليلنا.

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



الرمز الأولي

الآن بعد أن أصبح التصميم واضحًا ، فلنبدأ في الترميز! قم بإنشاء ملف جديد في محرر النصوص المفضل لديك (أنا أستخدمه نص سامي 3 ). احفظ هذا باسم index.html . يمكنك تسمية هذا بأي شيء تريده ، والسبب في تسمية العديد من الصفحات بالفهرس يرجع إلى طريقة عمل خوادم الويب. التكوين الافتراضي لمعظم الخوادم هو خدمة صفحة index.html إذا لم يتم تحديد صفحة.

إذا كنت لا تريد معرفة التفاصيل ، فانتقل للحصول على الكود الكامل من التنزيل.

هذا هو الكود الذي تحتاجه:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


هذا يفعل عدة أشياء:

  • يحدد الحد الأدنى من HTML المطلوب.
  • يحدد عنوان صفحة 'وسائط الضوضاء'
  • يتضمن jQuery مستضافًا على Google CDN (ما هو CDN).
  • يتضمن Font Awesome المستضافة على Google CDN.
  • يحدد أ نمط علامة لكتابة CSS الخاص بك بتنسيق.
  • يحدد أ النصي علامة لكتابة JavaScript في.

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

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

نقل الملفات من windows إلى linux

رأس

لنقم بإنشاء الرأس. هذا هو الشكل الذي يبدو عليه:

لنبدأ بهذا الجزء الرمادي الصغير في الأعلى. إنه لون رمادي فاتح مع لون رمادي غامق طفيف تحته. ها هي لقطة مقربة:

أضف هذا HTML داخل ملف هيئة علامة في الأعلى:

بينما أنت هنا ، دعنا نقسم هذا. أ شعبة يشبه الحاوية لوضع أشياء أخرى فيها. يمكن أن تكون هذه 'الأشياء الأخرى' المزيد من الحاويات والنصوص والصور وأي شيء حقًا. هناك بعض القيود على ما يمكن أن يدخل في علامات معينة ، لكن divs هي أشياء عامة إلى حد ما. لديها هوية شخصية من الشريط العلوى . سيتم استخدام هذا لتصميمه باستخدام CSS ، واستهدافه باستخدام JavaScript إذا لزم الأمر. تأكد من أن لديك عنصرًا واحدًا فقط بمعرف معين - يجب أن تكون فريدة. إذا كنت تريد أن يكون للعديد من العناصر نفس الاسم ، فاستخدم ملف صف دراسي بدلاً من ذلك - هذا ما صمموا من أجله! إليك CSS الذي تحتاجه لتصميمه (ضع في الجزء العلوي داخل ملف نمط بطاقة شعار):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

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

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

لغة البرمجة:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

قد يكون من الصعب معرفة ما يحدث حتى تنتهي من الشفرة ، لذلك قد يكون من المفيد إضافة خلفية ملونة (مؤقتة) لمعرفة ما يحدث:

background: red;

حان الوقت لإنشاء الشعار الآن. رائع الخط مطلوب للأيقونة نفسها. Font Awesome عبارة عن مجموعة من الرموز مجمعة كخط متجه - رائع! قام الكود الأولي أعلاه بإعداد Font Awesome بالفعل ، لذا فهو جاهز للبدء!

أضف هذا HTML داخل ال غلاف عادي div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

لا تقلق بشأن عدم تطابق الخطوط الأخرى مع التصميم - فسوف تقوم بترتيب ذلك لاحقًا. إذا كنت ترغب في استخدام رموز مختلفة ، فانتقل إلى ملف أيقونات رهيبة للخط الصفحة ، ثم التغيير fa-volume-down إلى اسم الرمز الذي ترغب في استخدامه.

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

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

هنا CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

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

كل ما تبقى لهذا القسم هو تمييز اللون الأحمر الأفقي. أضف هذا HTML بعد ملف غلاف عادي :

وإليك CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

هذا هو القسم العلوي انتهى. هذا ما يبدو عليه - مشابه جدًا للتصميم ، أليس كذلك؟

منطقة المحتوى الرئيسية

حان الوقت الآن للانتقال إلى منطقة المحتوى الرئيسية - ما يسمى 'الجزء المرئي من الصفحة'. إليك ما يبدو عليه هذا الجزء:

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

سوف تحتاج إلى صورة عينة لهذا الجزء. تم تضمينه في التنزيل. يبلغ عرض هذه الصورة 670 بكسل ، وهي مأخوذة من مراجعة Panasonic Lumix DMC-G80 / G85.

أضف HTML بعد، بعدما ال أعلى لون سبلاش عنصر:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

رمز مركز مساعدة ديزني بلس 83

Alternatively, check out our review of the Panasonic G80 shown on the right!






لاحظ كيف أن ملف غلاف عادي عاد العنصر (هذه هي متعة استخدام الفئات). قد تتساءل لماذا الصورة ( IMG ) العلامة لا تغلق. هذه علامة إغلاق ذاتية. الشرطة المائلة للأمام ( /> ) يشير إلى هذا ، لأنه ليس من المنطقي دائمًا إغلاق علامة.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

أهم سمة هنا هي حجم الصندوق: مربع الحدود ؛ . هذا يضمن أن العناصر ستكون دائمًا بعرض 40٪ أو 60٪. الافتراضي (بدون هذه السمة) هو العرض المحدد بالإضافة إلى أي حشوة ، هوامش ، وحدود. فئة الصورة ( صورة مميزة ) لديه أقصى عرض من 500 بكسل . إذا حددت بُعدًا واحدًا فقط (عرضًا أو ارتفاعًا) ، وتركت الآخر فارغًا ، فسيقوم css بتغيير حجم الصورة مع الحفاظ على نسبة العرض إلى الارتفاع.

منطقة الاقتباس

لنقم بإنشاء منطقة الاقتباس. إليك ما يبدو عليه هذا:

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

أضف هذا HTML بعد، بعدما السابق غلاف عادي :



makeuseof is the best website ever


Joe Coburn



ثم هذا CSS:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

ليس هناك الكثير مما يحدث هنا. التحجيم هو التعديل الأساسي المطلوب - حجم الخط والتباعد وما إلى ذلك. هذا ما يبدو عليه الأمر برمته الآن - لقد بدأ يبدو كموقع ويب!

منطقة الرمز

دعنا نواصل الضغط - لقد انتهى الأمر تقريبًا! إليك المجال التالي الذي يحتاج إلى إنشاء:

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






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



هذه الرموز الثلاثة هي أيضا رائع الخط . يستخدم HTML مرة أخرى الامتداد غلاف عادي صف دراسي. هنا CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

هناك بعض الأشياء الجديدة التي تحدث في CSS. يتم تعيين الزوايا الدائرية بواسطة نصف قطر الحدود: 200 بكسل ؛ . يؤدي ضبط هذه القيمة على نفس قيمة العرض إلى تكوين دائرة كاملة. يمكنك تقليل هذا إذا كنت تفضل المزيد من المربع ذي الزوايا الدائرية. لاحظ كيف يتم تطبيق إجراءات التمرير على divs - فهي ليست مقصورة على الروابط فقط. هذا ما يبدو عليه هذا القسم الآن:

آخر شيء تفعله هو التذييل! هذا أمر بسيط حقًا ، لأنه مجرد منطقة رمادية بدون نص. أضف هذا HTML بعد مناطق الرموز ' غلاف عادي :

هنا CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

انظر - حقا أشياء بسيطة.

أضف بعض البيتزا

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

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

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

أضف CSS هذا للتبديل إلى أفضل الخطوط:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

الآن قم بتعديل عناصر html والجسم لاستخدام الخطوط الجديدة:

font-family: 'PT Serif', 'Helvetica', 'Arial';

لاحظ كيف أن عنصر h3 غير مدرج في القائمة - وهذا سيكون افتراضيًا PT-Serif بدلا من PT-Sans .

كجزء أخير من الجمال ، دعنا نستخدم بعض JavaScript للتمرير عبر ثلاث صور مميزة مختلفة. سوف تحتاج صورة_2 و صورة_3 لهذا الجزء ، ومرة ​​أخرى ، إنه اختياري. يعمل موقع الويب بشكل كامل في هذه المرحلة بدون هذه الميزة. إليك ما سيبدو عليه (سريعًا):

قم بتعديل HTML لتضمين ثلاث صور مميزة. لاحظ كيف أن اثنين من هؤلاء لديهم فئة CSS من مختفي . تم منح كل صورة معرفًا بحيث يمكن لـ JavaScript استهداف كل صورة بشكل مستقل.





إليك CSS اللازمة لإخفاء الصور المميزة الإضافية:

.hidden {
display: none;
}

الآن بعد أن تم الاهتمام بـ HTML و CSS ، دعنا ننتقل إلى JavaScript. من المفيد فهم نموذج كائن المستند (DOM) لهذا الجزء ، لكنه ليس شرطًا.

أعثر على النصي منطقة أسفل الصفحة:


/* JavaScript goes here, at the bottom of the page */

أضف JavaScript التالية داخل ملف النصي بطاقة شعار:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

هناك بعض الأشياء التي تحدث هنا. الرمز موجود في الداخل $ (مستند). جاهز () . هذا يعني أنه سيتم تشغيله بمجرد انتهاء متصفحك من عرض الصفحة - وهذه ممارسة جيدة. ال setInterval () تستخدم الوظيفة لاستدعاء تغيير الصورة () تعمل بانتظام في فاصل زمني محدد مسبقًا بالمللي ثانية (1000 مللي ثانية = 1 ثانية). يتم تخزين هذا في ملف زمن عامل. يمكنك زيادة أو تقليل هذا لتسريع أو إبطاء التمرير. أخيرًا ، يتم استخدام بيان حالة بسيط لإظهار صور مختلفة ، وتتبع الصورة المعروضة حاليًا.

تحدي الترميز

هذا كل شيء! نأمل أن تكون قد تعلمت الكثير خلال هذه العملية. إذا كنت من محبي التحدي ، وترغب في اختبار مهاراتك الجديدة التي تم العثور عليها ، فلماذا لا تحاول تنفيذ هذه التعديلات:

إضافة تذييل: أضف بعض النص في التذييل (تلميح: يمكنك إعادة استخدام ملف غلاف عادي و ثلث / ثلثان الطبقات.).

تحسين تمرير الصورة: قم بتعديل JavaScript لتحريك تغييرات الصورة (تلميح: انظر إلى jQuery اختفي و مفعم بالحيوية ).

تنفيذ اقتباسات متعددة: قم بتعديل علامات الاقتباس للتغيير بين واحد من عدة علامات مختلفة (تلميح: انظر إلى رمز تمرير الصورة للحصول على نقطة بداية).

قم بإعداد الخادم: قم بإعداد خادم وأرسل البيانات بين صفحة الويب والخادم (تلميح: اقرأ دليلنا إلى JSON و Python).

من أين تحصل على قطع كمبيوتر رخيصة

بمجرد أن تشعر بالراحة في استخدام JavaScript أو إذا كان لديك أي خبرة مع Ruby ، ​​يمكنك تجربة يدك في إنشاء موقع ويب باستخدام أداة إنشاء مواقع ويب ثابتة مثل GatsbyJS أو Jekyll.

يشارك يشارك سقسقة بريد الالكتروني كيفية تغيير شكل ومظهر سطح مكتب Windows 10 الخاص بك

هل تريد معرفة كيفية جعل Windows 10 يبدو أفضل؟ استخدم هذه التخصيصات البسيطة لجعل Windows 10 خاصًا بك.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • لغة البرمجة
  • تصميم المواقع
  • CSS
نبذة عن الكاتب جو كوبيرن(تم نشر 136 مقالاً)

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

المزيد من Joe Coburn

اشترك في نشرتنا الإخبارية

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

انقر هنا للاشتراك