ساخت وب سایت شخصی برای مبتدیان: 5 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

این که آیا تا به حال رویای برنامه نویسی کامپیوتر داشته اید یا از وب سایتی استفاده کرده اید ، که واقعیت آن است ، تقریبا همه ما هستیم ، فناوری اطلاعات به ستون فقرات تجارت تبدیل شده است. اگرچه ممکن است برنامه نویسی در ابتدا کمی ترسناک به نظر برسد ، اما هدف من این است که اصول اساسی طراحی وب را به شما آموزش دهم تا پس از این آموزش ، بتوانید صفحه وب خود را بسازید. با دور از دسترس بودن ، اجازه دهید به آن برسیم!

تدارکات

• رایانه مکینتاش یا ویندوز (اگرچه از توزیع لینوکس نیز می توان استفاده کرد ، من فعلاً آنها را رد می کنم زیرا این یک مقدمه مبتدی است).
• انتخاب ویرایشگر متن (Notepad در Windows ، TextEdit در Mac) یا انتخاب IDE شما. بر اساس تجربیات من ، من Visual Studio Code را پیدا کردم که برای من بهترین کار را می کند ، بنابراین من همچنین توصیه می کنم آن را در اینجا بررسی کنید: https://code.visualstudio.com/ بدون ذکر این که در همه سیستم عامل های سیستم عامل کار می کند.

مرحله 1: برچسب ها و کمی تاریخچه

هنگامی که درباره انتخاب ویرایشگر متن یا IDE تصمیم گرفتید ، بیایید با اصول اولیه شروع کنیم.

باور کنید یا نه ، HTML یا HyperText Markup Language تقریباً 30 سال است که وجود دارد و هر سال پیشرفت های بیشتر و بیشتری در این زبان به وجود آمده است. اکنون ، ممکن است بپرسید که چگونه مرورگر آنچه را که باید روی صفحه قرار دهد تفسیر می کند؟ این کار در چند قسمت انجام می شود:

قالب بندی سند HTML آسان است. شما دارای دو بخش معروف به سر و بدن هستید. سر یک وب سایت حاوی کدی است که برای کاربر قابل مشاهده نیست. این مورد برای پیوند دادن شیوه نامه ها و اعلام سایر قطعات مورد نیاز برای نمایش صحیح سایت استفاده می شود. بدنبال وب سایت ، بدنبال سر ، بدن همانطور که به نظر می رسد. اینجاست که می توانید صدای خود را بیان کنید و مهارت های فوق العاده HTML خود را به مخاطبان نشان دهید! در حال حاضر به آسانی نمی توانید متن را در متن تایپ کنید و آن را دقیقاً همانطور که می خواهید نمایش دهید ، اما با استفاده از چیزهایی که ما آنها را برچسب می نامیم تقریباً به این راحتی است.

در اینجا برخی از برچسب های اصلی HTML وجود دارد:

• عنوان - که برای گفتن عنوان صفحه به مرورگر استفاده می شود. این همان چیزی است که وقتی به برگه یک صفحه وب نگاه می کنید ، می بینید.
• h1 ، h2 ، h3 ، h4 - که برای اندازه های مختلف هدر استفاده می شود که h1 بزرگترین و h4 کوچکترین است. در بخش بعدی به این موضوع بیشتر خواهم پرداخت.
• p - پاراگراف ، برای نوشتن پاراگراف های متن استفاده می شود. مانند پاراگراف های روی کاغذ.
• br - break ، که یک وقفه متناسب با متن درج می کند.
• a - برای ایجاد پیوند به صفحات دیگر ، مانند پیوند قابل کلیک استفاده می شود.
• img - برای پیوند تصویر به صفحه وب استفاده می شود.
• ul ، ol ، li - لیست های نامرتب ، لیست های مرتب شده و موارد فهرست.
• - برای ایجاد نظرات خطی در کد که توسط کاربر نهایی دیده نمی شود ، استفاده می شود.

و در اینجا برخی از برچسب های CSS (بصری):

• رنگ - برای اختصاص یک رنگ خاص به یک عنصر خاص یا مجموعه ای در صفحه وب استفاده می شود.
• font-size-برای تغییر اندازه فونت در صفحه استفاده می شود.
• background-color-برای تغییر رنگ پس زمینه عنصر خاصی یا کل صفحه استفاده می شود.

من همچنین یک ورق تقلب کوچک را ضمیمه کرده ام تا در صورت احساس کمی گم شدن به شما کمک کنم ، اما نگران نباشید ، در کوتاه ترین زمان به این مشکل دست خواهید یافت! علاوه بر این ، www.w3schools.com همچنین منبع فوق العاده ای برای هر یک از سوالات برنامه نویسی شما است. آنها مطمئناً در وقت من نیز صرفه جویی کرده اند.

اساساً نحوه مرور فایل توسط مرورگر آسان است. خط به خط پیش می رود و عملکرد به عملکرد را پردازش می کند. از نویسه ها برای اعلام برچسب مانند استفاده می شود

و برای بستن برچسب مانند استفاده می شود

به این مهم است در غیر این صورت مرورگر نمی تواند جایی را متوقف کند. در بین

و

برچسب ها ، جایی است که هر چیزی را که می خواهید وارد کنید!

مرحله 2: تنظیم ویرایشگر

اکنون که کمی در مورد عناصر اساسی وب سایت HTML صحبت کردیم ، بیایید وارد شویم و آن را برای خود امتحان کنیم. برای مرحله بعدی از Visual Studio Code برای برنامه نویسی وب سایت استفاده می کنم ، اما اگر فقط با استفاده از Notepad یا TextEdit راحت تر باشید ، طرح کد یکسان خواهد بود.

داخل دفترچه یادداشت:

• با استفاده از دفترچه یادداشت ، برنامه با یک فایل خالی راه اندازی می شود که شروع آن را بسیار آسان می کند. این همچنین به ما امکان می دهد در مقایسه با استفاده از VS Code چند مرحله را طی کنیم. بیایید با ذخیره فایل در قالب صحیح شروع کنیم.
• روی فایل> ذخیره کلیک کنید
• نام پرونده خود را وارد کنید و سپس.html و در قسمت Save as type ، همه فایلها را انتخاب کنید. روی ذخیره کلیک کنید.

در کد VS:

• بهترین راه برای استفاده از همه ویژگی های IDE این است که با ایجاد فایل شروع کنید و به IDE بگویید نوع فایل آن چیست. این میتواند بصورت زیر انجام شود:
• روی فایل> فایل جدید کلیک کنید
• یک فایل خالی باز می شود
• در مرحله بعد ، می خواهید با ذخیره فایل ، هرچند خالی ، کار را شروع کنید ، زیرا این امر به IDE اجازه می دهد تا بفهمد محصول نهایی چه نوع فایلی خواهد بود. هنگام ذخیره ، حتماً پسوند.html را در انتهای نام فایل قرار دهید. روی ذخیره کلیک کنید.

مرحله 3: نقشه ها

پس از اینکه فایل filename.html خود را با موفقیت ذخیره کردید ، بیایید با ایجاد چارچوبی برای صفحه وب خود شروع کنیم. قبل از شروع به ایجاد بقیه صفحه HTML ، قسمتهای کلیدی فایل را که باید اعلام کنیم ، از بالا به خاطر بسپارید. نکته جالب: هنگام شروع چارچوب سایت ، تگ! DOCTYPE HTML به مرورگر می گوید فایلی که می خواند یک فایل html است. اگر انواع مختلفی از کد را در یک فایل داشته باشید و بخواهید بین مترجمان تعویض کنید ، این کار مفید خواهد بود. از نظر این دستورالعمل ، ما زیاد به این موضوع نمی پردازیم ، اما اگر بعد از این دستورالعمل کنجکاو شدید که در مورد توسعه HTML بیشتر بدانید ، خیالتان راحت باشد. من تگ! DOCTYPE HTML را در بالای فایل برای بهترین عمل قرار می دهم. به یاد داشته باشید که با و باز کنید.

در اینجا جایی است که ذخیره فایل قبل از شروع برنامه نویسی مفید است ، اکنون که IDE می داند که با یک فایل HTML کار می کند ، از intellisense برای به پایان رساندن عبارت و ارائه پیشنهادات استفاده می کند تا شما به طور اتفاقی بستن یک برچسب را فراموش نکنید. به توجه داشته باشید که برای شما که از Notepad استفاده می کنید ، intellisense مانند IDE در دسترس نیست. ابتدا با وارد کردن برچسب های سر و بدن به شرح زیر شروع می کنیم: (تصویر دوم را ببینید).

اکنون که تنظیمات سند به پایان رسیده است ، می توانیم به مسابقات برویم و کمی سرگرم شویم!

مرحله 4: کد ؛ کد ؛ کد ؛

ما می توانیم با درج عنوان برای فایل تازه ایجاد شده خود شروع کنیم. هرچه دوست دارید وارد کنید به یاد داشته باشید که این نامی است که در برگه مرورگر ظاهر می شود. همچنین بیایید با وارد کردن عنوان سایت خود شروع کنیم. به یاد بیاورید که چگونه این کار را انجام می دهیم. آیا صدای h1/2/3/4 را شنیدم؟ این درست است!

قبل از ادامه ، مفید است که فایل خود را در یک پنجره مرورگر باز کنیم تا بتوانیم در زمان واقعی ببینیم که چگونه تغییرات ما در مرورگر منعکس می شود. می توانید این کار را با کلیک روی فایل> ذخیره برای ذخیره فایل ، رفتن به پوشه ای که فایل HTML در آن ذخیره شده است ، انجام دهید ، برای من این دسکتاپ است و برای باز کردن فایل از مرورگر دلخواه خود استفاده کنید. ، صفحه وب شما وجود دارد! توجه: من شخصاً از Safari به عنوان مرورگر انتخابی خود در رایانه خود استفاده می کنم ، اما در توسعه وب ، Firefox مرورگر استاندارد طلایی برای آزمایش است زیرا تقریباً با هر زبان برنامه نویسی وب کار می کند.

همانطور که می بینید ، عنوان در برگه نشان داده می شود ، همچنین عنوان h1 ما نیز مشاهده می شود. من ترجیح می دهم پنجره مرورگر فایل در کنار IDE باز شود زیرا وقتی تغییری در IDE ایجاد می کنید و ذخیره می کنید ، تغییرات فوری در مرورگر رخ می دهد.

با خیال راحت سعی کنید برچسب ها را اضافه کنید و با کارهای مختلفی که می توانید با HTML انجام دهید بازی کنید. همانطور که در زیر مشاهده می کنید ، من چند پاراگراف ، وقفه ، پیوند خارجی به Instructables.com ، یک تصویر (که می تواند از منبع خارجی یا در همان دایرکتوری محل ذخیره فایل. HTML پیوند داده شود) اضافه کرده ام ، نمونه ای از یک لیست نامرتب ، یک لیست مرتب و در نهایت یک نظر.

اگر می خواهید برخی از رنگ ها و گزینه های ترتیب را اضافه کنید ، می توانید یک تگ style در سر فایل وارد کنید. این نقطه ای است که در آن از HTML به CSS تغییر می کند ، اما به خاطر دید ، من چند خط را وارد می کنم تا بتوانید نحوه عملکرد آن را ببینید. اساساً نحوه عملکرد CSS به شما این امکان را می دهد تا با استفاده از براکت {} عناصر HTML درون توابع را کنترل کنید تا کد خود را برای یک عنصر HTML خاص وارد کنید.

مرحله 5: اندیشه های نهایی

و در آنجا آن را دارید ؛ شما اولین صفحه وب خود را با موفقیت ایجاد کرده اید! از آنجا که این راهنمای مبتدی است ، می خواهم اولین تجربه شما با HTML را تجربه ای لذت بخش کنم. بهترین راه برای یادگیری در تجربه من این است که وارد شوید و چیزهایی را امتحان کنید ، ببینید چه کاری می توانید با کد خود انجام دهید و همچنین ببینید چگونه می توانید کد خود را بشکنید. این باعث ایجاد یکپارچگی می شود و به شما کمک می کند تا نحوه عملکرد و نحوه عملکرد کد را بهتر درک کنید. به یاد داشته باشید که www. W3Schools.com یک منبع عالی برای سوالات است و آنها حتی یک سندباکس مجازی را در مرورگر ارائه می دهند تا کد شما را امتحان کند. امیدوارم چیزی آموخته باشید و کد نویسی خوشحالی داشته باشید!