برای طراحی سایت از قالب های اماده استفاده کنیم یا المنتور؟

elementor teme

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

معرفی HTML و اصول اولیه کد نویسی+ویدئوی آموزشی

start html programming

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

کد نویسی با HTML بسیار ساده و راحت تا دیر نشده شروع کنید 😉 

[toc]

اصول اولیه کد نویسی HTML :

ما در کد نویسی وب دو نوع کد نویسی داریم که یک سمت کد نویسی برای کاربر و یک سمت کدنویسی برای سرور هست . کد نویسی HTML ، CSS و JS برای سمت کاربر هست که ما با آن سرو کار داریم و به آن Client side میگن و یه کد نویسی که برای مثال PHP سمت سرور است که به آن هم server side میگن . خوب سروکار ما با کد نویسی سمت کاربر هستش بریم شروع کنیم …

HTML چیست ؟

هدف از HMTL
کار HTML چیه و چیکار میکنه

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

خJب شما که این کد های HTML رو نوشتین چه کسی میخونه ؟

مرورگر ها !! بله مروگر ها  تمام کدهای رو که شما مینویسد تفسیر میکنه و باعث میشه کد شما تبدیل به یک طراحی از صفحه وب بشه.

HTML و دستورات آن :

 

تمام دستورات و تگ هایی رو که باید بنویسید باید بین این دو تگ نوشته شوند تا صفحه های شما ایجاد بشن.
Html code
Html code for strat

بخش Head در HMTL :

در این بخش شما به عنوان یک معرف به Head نگاه کنید چرا که تمام عناوین مهم که باید به search engine (موتور های جستجو مثل گوگل ، یاهو ، بینگ) معرفی شود و شما تمام این معرفی های رو در داخل این تگ باید بنویسید .

 

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

بخش body :

مهم ترین بخشی که در html مورد استفاده قرار میگیره این قسمت body  هست . در واقع کل قسمتی که کاربر توی صفحه مرورگر میبینه ، تمام تصاویر ، رنگ ها متن ها و …

هدف اصلی کلا روی این تگ است.

 

 

این ساختار کلی یک HTML است دارای قسمت یک قسمت کلی تگ <HTML> و یک تگ <HEAD> و همچنین مهمترین قسمت آن <BODY> .

ایجاد یک Root Folder :

اصولا تمام چیزهایی که باید در سایت قرار گرفته شود اعم از تصاویر ، فایل های CSS و HTML درون یک فولدر ریشه باشد .

استفاده از کدام ادیتور برای کار با کد نویسی :

شما راه های زیادی برای نوشتن دستورات خود دارید . میتونید Notepade ویندوز استفاده کنید / میتونید از ++Notepade که نسبت به ویرایشگر ویندوز بسیار بهتر است کد های شما با رنگ های مختلف نمایش میدهد که تشخیص و ویرایش آن بسیار راحتر است.

پیشنهاد من چیه به شما؟

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

 

معرفی تگ های HTML :

تگ ها همان دستوراتی هستند که شما در HTML مینویسید همیشه یک سری تگ ها وجود دارند که حتما باید انتهای آنها رو معلود کنید با یک علامت (/) مثل <BODY/> ولی یک سری تگ ها هم هستند که بدون تگ پایانی هستند مثل <BR> 

تگ <P> : 

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

اکثر متن هایی که نوشته میشه داخل این تگ هست.

تگ های <h> :

این تگ ها برای معرفی عنوان محتوا استفاده میشود که هر چه عدد آن بیشر شود ارزش آن کمتر خواهد شد به این ترتیب که <H1> با <H6> بسیار از لحاظ اندازه فرق دارد.

تا این مرحله امید وارم که تمام استفاده رو از این آموزش برده باشید منتظر آموزش های بعدی ما باشید

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

 

مقدمه ای بر معرفی زبانهای HTML و CSS

intro html and css period

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

[toc]

معرفی دوره HTML و CSS :

دوره HTML و CSS
مجموعه دوره طراحی سایت

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

در این دوره ابتدا به معرفی سایت خواهیم پرداخت و خواهیم گفت که در چه اساسی یک سایت ایجاد میشود و کار میکند .

  • معرفی زبان HTML
  • تعریف ساختار یک سایت با HTML
  • شروع ایجاد یک سایت
  • معرفی تگ ها و تعریف بدنه سایت
  • ایجاد یک صفحه اینترنتی
  • آشنایی با تگ های حرفه ای تر
  • کار با رنگ ها ، جداول و ساختار ها در HTML
  • معرفی HTML5 و تگ های که اضافه شده

معرفی و کار با زبان CSS

  • معرفی زبان استایل دهی CSS
  • کار با HTML و CSS
  • معرفی خاصیت های زبان CSS
  • معرفی خاصیت های جدید در CSS3
  • استایل دهی های حرفه ای به کدهای HTML

دوره HTML و CSS

مناسب چه کسانی است :

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

آیا برای یک طراح وب شدن این دوره لازم است ؟

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

پیشنهاد تیم آیلین وب : آموزش رایگان ایجاد سایت با وردپرس

و لازم به ذکر است که بگم بهتون برای ایجاد یک وبسایت کامل و پویا HTML و CSS کافی نیست باید با زبان های دیگر مثل JavaScript کار کنید تا بتوانید یک طراحی سایت انجام دهد و تا اینجا شما فقط یک سایت ظاهری طراحی کرده اید و برای تبدیل قالب به وردپرس کارهای زیادی دارید.

هدف از ایجاد سایت
دوره طراحی سایت

من برای شما از همین ابتدا منابع بسیار قوی در اختیارتان میگذارم تا شما اگر خواستید به منابع کد ها دسترسی پیدا کنید حتما به این منابع سر بزنید:

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

ما در این دوره از اولین دوره آموزش طراحی سایت فقط HTML و CSS رو به شما دوستان یاد میدم که با فرا گرفتن این دوره میتونید که یک صفحه را طراحی کنید و آن را کاملا ویرایش کنید و در ادامه با آموزش CSS میتونید به بهترین نحو طراحی های بسیار زیبای رو انجام دهید.

مدرس این دوره :

سامان فتاحی از تیم مدیریت آیلین وب

امیدوارم که با این دوره از ابتدا همراه ما باشید تا این که بتوانیم بهترین طراحی ها رو انجام بدیم در ادامه ازتون میخوام که اگه هر مشکلی در رابطه با آموزش ها و دوره داشتید در زیر همان ویدئو کامنت کنید و یا از طریق راه های ارتباطی سوالات خود را بپرسید.

آموزش طرحی سایت با وردپرس در 10 دقیقه(سریعترین راه ایجاد سایت وردپرسی)

wordpress web site design in 10 minute

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