مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

چگونه سایت طراحی کنیم - آموزش درست کردن سایت

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

جهت مشاهده کامل این آموزش کلیک کنید

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

  1. چگونه سایت طراحی کنیم؟

  1. یک ویرایش گر متن را باز می کنیم. در کامپیوتر تحت ویندوز ، ما غالباً از Notepad یا Notepad++ استفاده می کنیم ، در حالی که در کامپیوترهای تحت Mac از TextEdit استفاده می کنیم. در ادامه طریقه ساخت وب سایت را در هر دو سیستم عامل توضیح می دهیم.
  • Windows : به منوی Start رفته و notepad یا notepad++ را تایپ کرده و در قسمت بالای Notepad یا “Notepad++” کلیک میکنیم.

  • Mac : بخش  Spotlight (مطابق شکل زیر):

را کلیک کرده و textedit را تایپ می کنیم ، و TextEdit را در بخش results دابل کلیک می کنیم.

 

 

  1. نوع سند خود را به HTML تنظیم می کنیم. مقدار <!DOCTYPE html> را تایپ کرده و کلید enter را فشار می دهیم ، سپس <html> را تایپ کرده و کلید enter را دوباره فشار می دهیم. در نهایت <head> را تایپ کرده و کلید enter را فشار می دهیم. در ابتدای سند باید عباراتی به صورت زیر نمایان شود.
<!DOCTYPE html>
<html>
<head>

 

  1. یک tab title به صفحه وب خود اضافه می کنیم. هنگامی که این صفحه را در مرورگر باز کنیم ، این عنوان در نوار عنوان مرورگر نمایش داده می شود (مانند “Facebook”). مقدار <title> را تایپ کرده و عنوان صفحه وب خود را برای tab title وارد می کنیم. مقدار </title> را تایپ می کنیم. سپس تگ بستن “Head” را اضافه می کنیم ، که این تگ به صورت </head> می باشد. بخش title باید چیزی شبیه به عبارات زیر باشد :
<title>My Web Page</title>
</head>

  1. شروع متن بدنه صفحه خود را مشخص می کنیم. برای این کار ، تگ <body> را در زیر تگ بستن “Head”  تایپ می کنیم. این کار اطمینان می دهد که تا زمانی که تگ “Body"  را ببندیم ، بقیه متن سند ما به عنوان متن وب سایت در نظر گرفته شود. بخش body به صورت زیر نوشته می شود:
<body>

  1. یک تیتر برای صفحه می سازیم. تیتر صفحه ما عنوانی است که در بالای وب سایت ما نمایان خواهد شد. برای ایجاد یک تیتر ، تگ <h1> را تایپ کرده ، تیتر موردنظر خود را اضافه کرده و سپس تگ بستن </h1> را وارد می کنیم. برای مثال :
<h1>Welcome to My Page!</h1>

  1. تیترهای اضافی دیگر را نیز اضافه می کنیم. شش سطح متفاوت تیتر وجود دارد که می توانیم آنها را با استفاده از تگ های <h1></h1> تا <h6></h6> بسازیم. برای مثال تیترها با اندازه های مختلف را به صورت زیر وارد می کنیم :
<h1>Welcome to My Page!</h1>
<h2>My name is Bob.</h2>
<h3>I hope you like it here.</h3>

  1. یک پاراگراف می سازیم. تگ های پاراگراف برای ساخت بلوک های متمایز از متن استفاده می شوند. برای قرار دادن متن در یک پاراگراف ، تگ <p> را تایپ کرده و متن خود را وارد می کنیم ، سپس تگ </p> را برای بستن پاراگراف وارد می کنیم.
<p>This is my paragraph.</p>

می توانیم خطوط چندتایی را در یک ردیف وارد کنیم تا مجموعه ای از پاراگراف ها را در زیر یک تیتر ایجاد کنیم.

  1. تغییر دادن رنگ متن. می توانیم رنگ متن را با فریم بندی کردن متن با تگ های <font> تغییر دهیم. رنگ موردنظر خود را در بخش “color” تایپ می کنیم (کوتیشن ها را نیز باید درج نماییم). برای مثال ، برای داشتن یک پاراگراف با رنگ آبی ، می توانیم کد زیر را وارد نماییم :
<p><font color="blue">Whales are majestic creatures.</font></p>
نکته : توجه داشته باشید که تگ <font> تگ مناسبی نیست. شما می توانید به جای آن از 

<span class="color" style="color: (your color)">...</span>

استفاده نمایید.

  • می توانیم هر نوع متنی (به عنوان مثال تیترها) را با این مجموعه تگ ها به رنگ متفاوت تغییر دهیم.
  • HTML از تعداد زیادی از رنگ های جالب پشتیبانی می کند ، بنابراین با آزادی عمل می توانیم رنگ های مختلف را امتحان کنیم.

  1. فرمت بندی کردن متن به صورت Bold ، Italic یا زیرخط دار . متن Bold ، Italic یا زیرخط دار را می توان به ترتیب با تگ های <b></b> ، تگ های <i></i> و تگ های <u></u> ایجاد کنیم. هم چنین می توانیم متن زیرنویس (subscript) را (که برای مواردی مانند نوشتن ریشه های مربع استفاده می شود) و متن های بالا نویس (superscript) را (که برای مواردی مانند نوشتن توان اعداد استفاده می شود) ایجاد کنیم.
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<sub>Subscript text</sub>
<sup>Superscript text</sup>

10- افزودن یک تصویر به صفحه خود. می توانیم با استفاده از تگ های <img src="URL"></img> یک تصویر در دسترس را در صفحه وب خود جاسازی نماییم. برای مثال ، اگر URL تصویر به صورت www.mypicture.com/lake  باشد ، باید کد زیر را وارد نماییم

<img src="www.mypicture.com/lake"></img>

  1. ایجاد پیوند به یک صفحه دیگر. می توانیم یک پیوند به وب سایت دیگر با استفاده از مجموعه تگ <a href="link">link text</a> اضافه نماییم که در آن link مربوط به URL به وب سایتی است که ما می خواهیم با آن پیوند برقرار کنیم و link text متنی است که به عنوان لینک عمل می نماید. برای مثال ، برای ایجاد پیوند به کلیک سایت ، به صورت زیر عمل می نماییم :
<a href=" https://clicksite.org/ ">This is the link to Clicksite's website</a>

  1. بستن تگ های صفحه وب. همانند هر تگ دیگری در HTML ، ما باید تگ های <body> و <html> را ببندیم که این تگ ها در بالای سند ما قرار دارند. این کار را می توانیم با تایپ کردن دستورات زیر در انتهای سند انجام دهیم:
</body>
</html>

  1. مرور نمودن صفحه وب خود. ما می توانیم در صورت نیاز پاراگراف ها ، تیترها و متن بیشتری را در هر جایی از صفحه در داخل تگ های <body></body> وارد نماییم. یک مثال از صفحه وب کامل به صورت زیر می باشد :
<!DOCTYPE html>
<html>
 
<head>
<title>wikiHow Fan Page</title>
</head>
 
<body>
 
<h1>Welcome to My Page!</h1>
<p>This is a fan page for wikiHow. Make yourself at home!</p>
 
<h2>Important Dates</h2>
<p><i>January 15, 2019</i> - wikiHow's Birthday</p>
 
<h2>Links</h2>
<p>Here is a link to wikiHow: <a href="www.wikihow.com">www.wikihow.com</a></p>
 
</body>
</html>

  1. ایجاد هر نوع تغییرات لحظه آخری. اگر هر نوع خطایی در کدهای خود مشاهده نماییم ، همه آنها را باید قبل از ادامه کار اصلاح کنیم. هنگامی که مطمئن باشیم کدهای HTML ما به طور دقیق انتظارات ما را برآورده می سازند ، می توانیم به قسمت بعدی از آموزش درست کردن سایت می  برویم.
  2. ذخیره کردن و باز نمودن صفحه وب خود

  1. تبدیل نمودن سند خود به متن ساده در سیستم عامل Mac. اگر از سیستم عامل Mac استفاده نماییم ، روی آیتم Format منو در بالای صفحه کلیک می نماییم ، سپس روی گزینه Make Plain Text در منوی کشویی باز شده ، کلیک می نماییم.
  • این مرحله در سیستم عامل ویندوز نه اجباری هست و نیاز به انجام آن وجود دارد.

  1. منو “save” را باز می نماییم. پس از این که یک سند متنی جدید برای نوشتن صفحه وب خود ایجاد کردیم ، کلیدهای ctrl + S (ویندوز) یا (مکیناش) را برای ذخیره کردن سند فشار می دهیم.
  • هم چنین می توانیم روی منوی File کلیک کرده و سپس در منوی کشویی نمایش داده شده روی گزینه Save As کلیک کنیم. این کار بر روی هر دو سیستم عامل ویندوز و Mac انجام می شود.

  1. نام فایل را برای سند HTML وارد می نماییم. هر نامی را که بخواهیم برای سند خود در قسمت “File name” در ویندوز یا “Name”  در مکیناش وارد می نماییم.

  1. نوع فایل سند را تغییر می دهیم. نیاز داریم که سند را از یک فایل متنی به یک فایل HTML تغییر دهیم :
  • ویندوز : روی منوی کشویی “Save as type” کلیک می کنیم ، روی گزینه All Files کلیک کرده و سپس عبارت .html را در انتهای نام فایل وارد می نماییم.
  • مکیناش : پسوند .txt را در انتهای نام فایل با پسوند .html جایگزین می کنیم.

  1. روی کلید save کلیک می کنیم. این کلید در پایین پنجره است. انجام این کار یک فایل HTML ایجاد خواهد کرد.
  • فایل های HTML به طور معمول با مرورگر پیش فرض مرورگر باز می شود.

  1. Text editor خود را می بندیم. در این مرحله ، ما آماده هستیم که فایل HTML خود را در مرورگر خود باز نماییم تا صفحه وب خود را مشاهده کنیم.

  1. یاز نمودن سند HTML با مرورگر خود. در بیشتر موارد ، ما با دوبار کلیک بر روی سند HTML قادر به انجام این کار خواهیم بود. اگر دو بار کلیک کردن بر روی سند نتایج خطایی به همراه داشته باشد ، موارد زیر را انجام می دهیم:
  • ویندوز : روی سند راست کلیک می کنیم. گزینه Open with را انتخاب کرده و روی مرورگر موردنظر خود کلیک می کنیم.
  • مکینتاش : روی سند خود یک بار کلیک می کنیم. روی گزینه File کلیک کرده و Open With را انتخاب کرده و مرورگر مورد نظر خود را کلیک می کنیم.

  1. ویرایش کردن سند HTML در صورت نیاز. ممکن است متوجه بروز خطایی در صفحه HTML خود بشویم. برای رفع آن ، می توانیم متن سند HTML را ویرایش کنیم:
  • در ویندوز : می توانیم روی سند راست کلیک کرده و گزینه Edit را در منو کشویی باز شده کلیک می کنیم (اگر Notepad++ نصب شده باشد ، به جای آن نتیجه Edit with Notepad++ نمایش داده خواهد شد).
  • در مکیناش : روی سند کلیک می کنیم. روی File کلیک می کنیم ، Open With را انتخاب کرده و TextEdit را کلیک می کنیم. هم چنین می توان سند را به داخلی TextEdit درگ کرد.

در اینجا دیدیم که چگونه می توانیم یک سایت طراحی کنیم . امیدواریم این آموزش برای شما سودمند واقع شده باشد.

پکیج آموزش ۰ تا ۱۰۰ HTML

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد
موضوعات: آموزش HTML آموزش HTML5

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
دانلود و ادامه توضیحات

طراحی قالب سایت دیجی کالا برای گوشی های هوشمند و تبلت ها

فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط
موضوعات: آموزش CSS آموزش HTML آموزش PHP MVC آموزش JQUERY آموزش JAVASCRIPT

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
دانلود و ادامه توضیحات

آموزش پروژه محور PHP در قالب ساخت فروشگاه اینترنتی 5040 و دیجی کالا

فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش Ajax آموزش HTML

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

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

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد
موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
دانلود و ادامه توضیحات

اصول مدیریت وب سایت برای وب مستر شدن|وب سایت های موفق چگونه مدیریت می شوند؟

فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش ASP.NET آموزش ASP.NET MVC آموزش PHP MVC آموزش Phyton آموزش سئو آموزش ساخت فروشگاه اینترنتی آموزش HTML آموزش ایمیل مارکتینگ آموزش وردپرس آموزش فروشگاه ساز اپن کارت آموزش جوملا آموزش Virtual Freer آموزش WHMCS

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
دانلود و ادامه توضیحات
به راهنمایی نیاز دارید؟و یا سردرگم هستید؟
021-4762 3380 901-000-5000 تماس از ساعت 8 الی 16:30 آدرس های ایمیل سایت: clicksite.ir@gmail.com
کسب درآمد کنید
اگر در هر زمینه ای مربوط به رشته های مهندسی و یا برنامه نویسی به تخصص خودایمان دارید،پس زمان را تلف نکنید و هم اکنون دست به کار شوید.به جمع متخصصی بپیوندید،گامی در راستای ارتقا سطح آموزش های تصویری فارسی بردارید. کلیک سایت از طرف همه مهندسین ،شما را دعوت به همکاری می نماید.وجود شما افتخاری برای همه ماست.
نماد اعتماد الکترونیک
لوگو ساماندهی
logo-samandehi

مقالات

آموزش PHP

آموزش HTML

آموزش CSS

آموزش برنامه نویسی آندروید

مقالات آموزش CSS

مدیریت و پشتیبانی سرور

مشاهده سبد این پنجره را مجددا نمایش نده!

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
انتخاب فایل
ارسال فایل
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید