آموزش طراحی سایت

صفر تا 100 طراحی وب را از ما بخواهید

آموزش طراحی سایت

صفر تا 100 طراحی وب را از ما بخواهید

آموزش html

دوشنبه, ۲۷ خرداد ۱۳۹۸، ۰۵:۳۸ ب.ظ

دوره آموزشی HTML5 

html در واقع اولین سنگ بنای طراحی وب سایته که لازمه برای شروع اونو خیلی خوب یاد بگیرید، برای شروع طراحی سایت لازمه با یه سری اصطلاحات آشنا بشید تا درک بهتری از زبان های برنامه نویسی داشته باشید؛



کلاینت (Client): کامپیوترهای عادی که در دسترس من و شماست

سرور (Server): ابر کامپیوترهای که وظیفه سرویس دهی به کامپیوتر کاربران رو دارد

کلاینت ساید (Client side): (معنی:سمت کاربر) کدهایی که روی مرورگر و سیستم کاربر پردازش میشه و کاربر میتونه به اون کدها دسترسی داشته باشه

سرور ساید (Server side): (معنی:سمت سرور) کدهایی که روی سرور پردازش میشه و فقط نتیجه به کاربر نمایش داده میشه و کاربر نمیتونه به کدهاش دسترسی داشته باشه

فرانت اند (Front-end): بخشی است که قابل دیدن است و با آن تعامل می کنیم

بک اند (Back-end): بخشی که قابل دیدن نیست اما برای تعامل لازم است

 


اجازه بدید با یه مثال ساده تفاوت Back-end و Front-end رو بهتون بگم:

Front-end (فرانت اند): هر آنچه در صحنه یک تئاتر میبینید مثل بازیگران میشه 

Back-end(بک اند): هر آنچه در پشت صحنه تئاتر هست و شما نمیبینید اما تاثیر مستقیم بر روی تئاتر دارد مثل کارگردان و نویسنده 


 


HTML زبان برنامه نویسی نیست!!!

درست دیدید HTML زبان برنامه نویسی نیست! بلکه زبان نشانه گذاریه؛ اصن بیاید ببینیم html چی هست؟


 

ساختار html


 


تاریخچه HTML

اولین نسخه ی این زبان سال 1991 معرفی شد و آنرا تنها با نام html میشناختند و هیچ شماره ورژنی نداشت. و تنها صفحات وب ساده با آن طراحی میشدند. در سال 1995 html 2.0 معرفی شد که حالت استاندارد این زبان به شمار میرفت. سپس در سال 1997 ورژن html 3.2 توسط کنسرسیوم جهانی وب پیشنهاد شد. بعد از آن در همان سال 1997  به دلیل مشکلات موجود در نسخه ی موجود؛ html ورژن 4.0 ارائه شد. پس از مدتی نسخه ی 4.01  ارائه شد که قابلیت و تنظیمات بیشتری برای انواع مختلف رسانه ها را اضافه کرد. قابلیتهایی برای  اجرا کردن بهتر سی اس اس و دیگر انواع اسناد را در خود جای داد.

در سال 2000 ورژن جدیدی از این زبان به نام ایکس html 1.0 ارائه شد که طراحان وب را بسیار در طراحی بهتر صفحات سایت یاری میکرد. در سال 2009 یک انقلاب بزرگ ایجاد شد و html 5 ارائه شد. این ورژن از اچ تی ام ال در بین همه ی طراحان وب بسیار محبوب است و کنسرسیوم جهانی وب پس از این نسخه از html توسعه ی ورژن XHTML 2.0 را کنار گذاشت. زبان html  توسط کنسرسیوم جهانی وب که از آن به عنوان  World Wide Web Consortium یاد میشود توسعه داده میشود. به تازگی شایعاتی مبنی بر توسعه ی html و انتشار نسخه ی 6  این  این زبان ( html6 ) در بین کاربران در شبکه های اجتماعی و وب سایت ها پراکنده شده است در حالی که هیچ خبر یا مطلبی در این باره از سمت سازمان w3c دال بر صحت این خبر منتشر نشده است. حتی در برخی موارد برخی وب سایت ها تگ ها و المان های html6 را هم معرفی کرده اند که اکثر این وب سایت ها خارجی هستند. 


HTML چیست؟

عبارت HTML (اچ تی ام ال) مخفف Hyper Text Markup Language به معنی زبان نشانه (تگ) گذاری ابر متن است، بذارید یکم بیشتر توضیح بدم

زبان HTML شامل یه سری تگ میشه که این تگ ها هر کدوم یه خصوصیاتی دارن مثلا برای نوشتن پاراگراف از تگ p استفاده میکنیم یعنی هر متنی بین تگ باز (p) و تگ بسته (p/) قرار بگیره مثل یک پاراگراف ساده نشون میده یا مثلا هر متنی بین تگ قرار بگیره عنوان محسوب میشه و از نظر سایز از متن داخل تگ بزرگتر و ضخیم تر نمایش داده میشه.


html زبان استاندارد طراحی صفحات وب است و در نهایت کلیه کدهای صفحه اعم از سمت سرور (Serverside) و سمت کاربر (Client side) به کدهای HTML تبدیل شده و توسط مرورگر نمایش داده می شوند.


زبان های برنامه نویسی به دو بخش اصلی کلاینت ساید (client side) و سرور ساید (server side) تقسیم میشن؛


زبان های طراحی قالب سایت که سمت کاربر پردازش میشه مثل (HTML, CSS, JavaScript) زبان کلاینت ساید میگویند.

زبان های برنامه نویسی سایت که سمت سرور پردازش میشه (PHP, ASP, Ruby, Python) زیان سرورساید میگویند.

 

تغییرات در html 5 نسبت به نسخه های پیشین

در نسخه های پیشین بدون فلش پلیر امکان استفاده از رسانه های مختلف امکان پذیر نبود. html نسخه ی 5 با استفاده از تگ های ادیو و ویدئو این امکان به سادگی به وجود آمده است.

در نسخه های پیشین html در مرورگر اجرا نمیشود اما در html 5 جاوا اسکریپت در پس زمینه اجرا میشود .

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

در نسخه های پیشین امکان درگ اند دراپ (drag & drop)وجود نداشت در حالی که در نسخه ی5  html وجود دارد.

در نسخه های قدیمی امکان استفاده از اشکال هندسی مانند دایره، مربع و مثلث وجود نداشت؛ در حال که در نسخه ی5 html این امکان وجود دارد.

نسخه های قدیمی با تمام مرورگر های قدیمی سازگارند ولی نسخه ی 5 این زبان تنها با مرورگرهای جدید پشتیبانی و پردازش میشود.

در نسخه های قدیمی المنت هایی مانند header , navbar , footer قابل معرفی و اشاره نیستند در حالی که در html5 هر کدام تگ خاص خود را دارا هستند.

نسخه های پیشنی سینتکس اشتباه را متوجه نمیشدند و پردازش نمیکردند اما نسخه ی html5 این قابلیت را داراست و syntax اشتباه را میتواند پردازش کند.

 

تغییرات html5

کدنویسی با HTML

همانطور که بیان شد html زبان برنامه نویسی نیست و هیچ گونه محاسبه ای برای ما انجام نمیدهد. Html یک زبان نشانه گذاری به حساب می آید. به همین دلیل کدنویسی با این زبان کمی متفاوت تر از دیگر زبانهاست. در زبان اچ تی ام ال ما از تگ ها برای نشان دادن المنت های اصلی در وب سایت استفاده میکنیم. حالت استاندارد استفاده از تگ ها بصورت زیر هست:



تگ ها از یک استاندارد خاص استفاده میکنند و هر تگ شامل یک تگ باز و یک تگ بسته است. به تگ باز Opening tag و به تگ بسته Closing tag گفته میشود. تفاوت تگ باز با تگ بسته به تنها یک اسلش (/) اضافه در تگ بسته است و به صورت زیر است:


Content


در برخی موارد تگ ها داری تگ بسته نیستند. Html زبانی نیست که نسبت به حروف بزرگ و کوچک حساس باشد و در اصطلاح (Case Sensitive)کیس سنسیتو نیست و سینتکس بسیار ساده ای دارد. برای کار با HTML  اصلا نیاز به سخت افزار قدرتمندی نیست وبا ساده ترین سیستم و نرم افزار میتوان آنرا قرا گرفت و از آن استفاده کرد. اولین برنامه که میتوان کد های html  را در آن نوشت نرم افزار نوت پد(not pad) است که روی تمام سیستم ها که ویندوز دارد قرار دارد. پس از نوشتن کد هایhtml  ، خروجی آنها در  مرورگر پردازش میشود و مرورگر آنرا نمایش میدهد.


یادگیری HTML

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

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

یکی از شغل های اصلی در رابطه با وب سایت طراح سایت و یا Web Designer هست که کار طراحی قالب یا اصطلاحا UI-User Interface رو انجام میده که یکی از شغل های بسیار زیبا و لذت بخش دنیاست، اگر شما تصمیم گرفتید وارد عرصه طراحی وب سایت بشید لازمه به زبان HTML به طور کامل مسلط بشید.


آموزش  html5


کاربرد html در برنامه نویسی و طراحی سایت

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


یادگیری زبان HTML (اچ تی ام ال) را دست کم نگیرید...!

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

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


در دوره آموزش html  به چه مباحثی میپردازیم؟ 

آموزش مقدماتی html 

ابتدا به توضیحات پایه ای و ضروری راجع به اصول طراحی سایت و تاریخچه html میپردازیم، سپس ساختار کدها و تگ¬های html و خصوصیت آن¬ها بررسی میکنیم؛ در ادامه ساخت منو با html،  انواع لینک ها و آپلود عکس رو یادمیگیرید. یکم css یادمیگیریم بعد به عنوان پروژه با هم یه گالری تصاویر درست میکنیم.

خب تا اینجا کار  ما باhtml4  تموم میشه


آموزش پیشرفته html

میریم سراغ آموزش html5، با تگ ها و ویژگی های اضافه شده و جدید html5 به طور کامل آشنا میشیم، المان های اضافه شده در ساخت فرم با html5 تست میکنیم و در انتها دوره آموزشی html5 رو با نحوه بارگذاری ویدئو و صدا به پایان میرسانیم


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


پیش نیازهای دوره آموزشی html

برای ثبت نام در دوره آموزشی html(اچ تی ام ال) شما به هیچ پیش نیاز خاصی نیاز ندارید، همین که بلد باشید کامپیوتر و لپ تاپ شخصیتون رو روشن کنید کافیه؛ ما در ویدئو آموزشی html از پایه مطالب رو به شما آموزش میدیم و نیاز نیست شما در زمینه آی تی یا طراحی سایت تخصصی داشته باشید یا حتما رشته تون مرتبط با این موضوع باشه 


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

دوستانی که میخواهند وارد دنیای جذاب طراحی وب سایت شوند

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

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

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

دوستانی که علاقه مند به کسب درامد ارزی و دلاری به صورت دورکاری هستند

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


  • میلاد متین

نظرات  (۱)

اموزش سئو 

ارسال نظر

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