طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

طراحی سایت فروشگاهی شخصی تجاری در بابل

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

طراحی سایت فروشگاهی شخصی تجاری در بابل

بدون شک، برنامه نویسی یکی از مهم‌ترین مهارت‌هایی است که امروزه نه تنها برای فارغ التحصیلان و دانشجویان رشته مهندسی کامپیوتر، بلکه برای سایر رشته‌ها و زمینه‌ها کاربرد مهمی دارد .

اولین پروژه 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 را با هم پیوند دهید

صفحه وب خود را در یک مرورگر مشاهده کنید (و برای مشاهده تغییرات جدید مرورگر را تازه کنید)

  • فاطمه علیزاده

CSS

HTML

از صفحه وب

نظرات  (۰)

هيچ نظري هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی