اولین پروژه HTML و CSS خود را ایجاد کنید
معرفی
در این مقاله، ما در مورد چگونگی گرفتن مهارت هایی که در Codecademy آموخته اید را پوشش می دهیم و از آنها برای ایجاد یک صفحه وب اصلی به طور کامل از ابزارهایی که در رایانه خود دارید ایجاد کنید.
مرحله 1: ساخت یک پوشه برای وب سایت خود را ایجاد کنید
اجازه دهید یک ساختار پوشه ای برای پشتیبانی از صفحه وب خود ایجاد کنیم. یک ساختار پوشه به خوبی طراحی شده به شما کمک می کند به سرعت به فایل های HTML یا CSS که حاوی کد شما هستند حرکت کنید.
اول، باز کردن یاب (در مک) و یا اکسپلورر (در ویندوز). بعد، یک پوشه (همچنین به عنوان یک دایرکتوری) به نام DevProject ایجاد کنید. این پوشه شامل همه فایل ها برای پروژه HTML و CSS شما است.
پوشه DevProject را باز کنید. در داخل، موارد زیر را ایجاد کنید:
یک فایل جدید به نام index.html (از ویرایشگر متن مورد نظر خود استفاده کنید)
یک پوشه جدید به نام منابع
فایل index.html حاوی کد HTML برای صفحه وب شما خواهد بود، در حالی که پوشه منابع شامل تمام منابع لازم مورد نیاز فایل های HTML (فایل های CSS، تصاویر، و غیره) خواهد بود.
بعد، پوشه منابع جدید ایجاد شده را باز کنید. درون این پوشه، موارد زیر را ایجاد کنید:
پوشه دیگری به نام CSS
پوشه CSS شامل فایل های CSS مورد نیاز برای طراحی وب سایت شما می باشد.
در نهایت، پوشه CSS که فقط ایجاد کرده اید را باز کنید. درون این پوشه، موارد زیر را ایجاد کنید:
یک فایل جدید به نام index.css (از ویرایشگر متن مورد نظر خود استفاده کنید)
فایل index.css حاوی تمامی قوانین یک ظاهر طراحی شده CSS است که به صفحه وب شما اعمال خواهد شد.
این ساختار کلی پوشه به شما کمک می کند تا گردش کار خود را به عنوان شما اضافه کردن فایل ها و یا منابع. در سطح بالا، در اینجا چیزی است که باید نگاه کند:
سیستم فایل
مرحله 2: محتوای خود را به صفحه وب خود اضافه کنید
عالی! با ساختار پوشه، فایل HTML و CSS همه در جای مناسب، ما می توانیم محتوا را به صفحه وب اضافه کنیم.
ابتدا فایل index.html را در ویرایشگر متن دلخواه خود باز کنید. بعد، کد HTML مورد نیاز boilerplate را اضافه کنید:
<! DOCTYPE html>
<html>
<head>
<title> </ title>
</ head>
<body>
</ body>
</ html>
پس از اضافه کردن کد HTML boilerplate، می توانید موارد زیر را نیز اضافه کنید:
عنوان خود را بین تگ <عنوان>
محتوای خودتان در برچسب های <body>. اگر به برخی از مطالب سریع و قبل از نوشته نیاز دارید، می توانید از موارد زیر استفاده کنید و به همان اندازه که مایلید تغییر دهید:
<h1> FirstName LastName </ h1>
<p> من در حال تحصیل در کد دانشگاه هستم اهداف من عبارتند از: </ p>
<ul>
<li> یادگیری کد </ li>
<li> شروع یک شرکت </ li>
<li> کمک به جهان </ li>
</ ul>
<p> این یکی از وبسایتهای مورد علاقه من است: <a href="https://www.google.com/" target="_blank"> Google </a> </ p>
سرانجام، فایل index.css را در ویرایشگر متن دلخواه خود باز کنید. اضافه کردن قوانین CSS قبل از نوشته شده به فایل (احساس رایگان برای تغییر به عنوان شما می خواهید):
* {
فونت خانواده: Helvetica، Arial، sans-serif؛
}
h1 {
رنگ: SeaGreen؛
}
پ،
li {
فونت اندازه: 18 پیکسل؛
}
a {
متن دکوراسیون: هیچ؛
}
مطمئن شوید که تغییرات خود را برای هر دو فایل ذخیره کنید!
مرحله 3: لینک فایل HTML خود و CSS فایل
همانطور که معلوم است محتوای HTML شما اضافه شده توسط قوانین CSS سبک نمی شود، مگر اینکه index.html و index.css با یکدیگر مرتبط شوند. در قسمت <head>، شیوه نامه را به فایل HTML پیوند دهید.
<link href = ". / منابع / css / index.css" type = "text / css" rel = "stylesheet">
شما ممکن است بدانید که چرا ویژگی href به ./resources/css/index.css تنظیم شده است. این به این دلیل است که شما باید دقیقا همان جایی که فایل index.css در پوشه (ها) شما نسبت به جایی که index.html زندگی می کند (در غیر این صورت، دو فایل لینک نمی شود) مشخص کنید.
دوباره مطمئن شوید که تغییرات خود را ذخیره کنید
مرحله 4: مشاهده پروژه شما
کار بزرگ - بیایید نگاهی به صفحه وب شما در مرورگر بیاندازیم.
مرورگر وب مورد نظر خود را باز کنید. در نوار منو، بر روی "File" کلیک کنید و سپس بر روی "Open File ..." (یا معادل آن) کلیک کنید. به فایل index.html خود بروید و سپس "Open" (یا معادل آن) را کلیک کنید. مرورگر باید صفحه وب شما را بارگذاری کند. چی میبینی؟
در این مرحله، به تغییرات در کد HTML یا CSS خود بپردازید. به خاطر داشته باشید که برای مشاهده هر تغییری که انجام می دهید، باید مرورگر خود را تازه کنید.
مرور
تبریک میگم در این زمان کوتاه، شما یاد گرفتید که چگونه آنچه را که در Codecademy یاد گرفته اید را انجام دهید و آن را با استفاده از ابزارهایی که در رایانه شخصی خود موجود است، اعمال کنید. شما موفقیت آموخته اید که چگونه:
ایجاد یک ساختار پوشه برای پشتیبانی از گردش کار و صفحه وب خود
محتوای HTML و CSS را به فایل های مربوطه اضافه کنید
فایل های HTML و CSS را با هم پیوند دهید
صفحه وب خود را در یک مرورگر مشاهده کنید (و برای مشاهده تغییرات جدید مرورگر را تازه کنید)
