درباره دوره:
طراحی وب از شاخه‌های برنامهنویسی است. افراد و شرکت‌های رأی معرفی محصولات خود به دنیا، معمولاً از وب‌سایت استفاده میکنند.
بخش کلاینت یک صفحه وب شامل سه بخش است. بخش اول ساختار صفحه، بخش دوم شکل و رنگ صفحه و بخش سوم منطق برنامه است. بخش اول به کمک HTML، بخش دوم با CSS و بخش سوم با جاوا اسکریپت ساخته می‌شود.
اچ‌‌تی‌‌ام‌ال (Hyper Text Markup Language) یا همان زبان نشانهگذاری فوق متن، زبان طراحی اسکلت اصلی وب‌سایت است. این زبان از تگ‌ها برای نشان‌دادن محتوا و ساختار صفحات استفاده می‌کند، این تگ‌ها به مرورگر اعلام میکنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت‌نمایش داده شود.
به کمک HTML ، اجزای صفحه را ایجاد می‌کنیم و برای ایجاد رابط کاربری از CSS(Cascading Style Sheets) استفاده می‌شود. به عبارتی زبان برنامهنویسی سی اس اس برای طراحی وب‌سایت استفاده می‌شود. از CSS برای تنظیم ویژگی‌های ظاهری محتوا از جمله رنگ‌ها، فونت‌ها، حاشیه‌ها، پس‌زمینه‌ها، سایزها و… می‌توان استفاده کرد. با استفاده از CSS می‌توان به المان‌های موجود در صفحه وب که توسط HTML ایجاد شده‌اند، شکل داد. با استفاده از CSS، می‌توان بدون تغییر در ساختار یک صفحه، استایل‌های مختلفی را برای آن صفحه تعریف کرد.
در این آموزش چه چیزی یاد می‌گیریم؟
در ابتدا با مقدمات HTML و تگ‌های پاراگراف و نقل‌قول آشنا می‌شویم. سپس استایل دهی اولیه به کمک CSS را معرفی می‌کنیم. بعد تگ‌هایی برای فرمت‌بندی متن را معرفی می‌کنیم. در ادامه با تگ‌هایی برای ایجاد لینک، تصویر، لیست، جدول و درج صدا و فیلم در صفحه آشنا می‌شویم و سی اس اس مربوط به آنها را نیز یاد می‌گیریم. در گام بعدی انواع تگ‌های input را ارائه خواهیم کرد. سپس تگ پر کاربرد div به همراه سی اس اس های پرکاربردی آشنا می‌شویم. در ادامه سلکتورها که بسیار پرکاربرد هستند را یاد می‌گیریم. در نهایت با تگ‌های معنایی آشنا شده و در انتهای آموزش یک معرفی مختصری از جاوا اسکریپت و تگ canvas خواهیم داشت. همچنین چند مثال کاربردی در طی دوره هم بررسی می‌شوند.
آموزش اچ تی ام ال و سی اس اس، جزو مباحث پایه و مقدماتی برای طراحی سایت است. با یادگیری این مهارت‌ها، شما می‌توانید پروژه‌های طراحی سایت را انجام دهید. نکته‌ی مهم برای یادگیری اچ تی ام ال و سی اس اس، دنبال کردن آموزش‌های پروژه محور است. آموزش‌هایی که با تمارین عملی فراوان، شما را برای پروژه‌های واقعی آماده کنند.
اچ تی ام ال (html) مخفف عبارت Hyper Text Markup Language به معنای زبان نشانهگذاری ابر متن است. اچ تی ام ال را می‌توان زبان استاندارد صفحات وب دانست. این زبان به شما امکان پیاده‌سازی و چیدمان بخش‌های مختلف یک صفحه‌ی وب (اعم از تصویر، متن، ویدیو و غیره) را می‌دهد. لازم به ذکر است که برای تعیین عناصر در این زبان، باید از تگ ها استفاده کنید.
سی اس اس (css) مخفف عبارت Cascading Style Sheets به معنای صفحات استایل آبشاری است. سی اس اس به شما اجازه می‌دهد تا صفحات وبی که به کمک زبان اچ تی ام ال ساخته‌اید را زیبا کنید. رنگ‌ها، حاشیه‌ها، فونت، قلم نوشته و دیگر ویژگی‌های عناصر صفحه‌ی وب، با کمک css تعیین می‌شود.
فراگیر شدن اینترنت، سبب شده است تا تمام کسب و کارها، به وب سایت نیاز داشته باشند. وب سایت‌ها اجازه می‌دهند تا خدمات و محصولات برای طیف گسترده‌تری از مشتریان در دسترس باشد. این موضوع بدان معناست که تقریباً تمام افراد، تمایل دارند که یک وب سایت برای حرفه‌ی خود داشته باشند.
وقتی شما طراحی سایت را یاد می‌گیرید، پروژه‌های عظیم و ناتمامی در اختیارتان قرار می‌گیرد. پروژه‌هایی که می‌تواند اعتبار شما را افزایش داده و محلی برای کسب درآمد شما باشد. این‌جاست که یادگیری طراحی سایت، اهمیت دارد.
برای یادگیری طراحی سایت، شما باید ابتدا آموزش اچ تی ام ال و سی اس اس را دنبال کنید. Html css آموزش مقدماتی برای طراحی سایت به شمار می‌آیند. در مراحل بعد با یادگیری زبان‌هایی مانند جاوا اسکریپت (Javascript) می‌توانید وب سایت‌های پیشرفته‌تر و خلاقانه‌ای را بسازید. به‌هر حال، یادگیری حوزه‌ی طراحی سایت با اچ تی ام ال و سی اس اس آغاز خواهد شد.
این آموزش با هدف انجام پروژه طراحی سایت با html و css طراحی و تدوین شده است. شما در این دوره، با مفاهیم اساسی html و css آشنا می‌شوید و می‌توانید قابلیت‌های آن را به‌طور کامل یاد بگیرید. با توجه به تمرینات عملی که لابه‌لای مباحث این دوره گنجانده شده است، شما توانایی لازم برای انجام پروژه html و css را نیز به‌دست خواهید آورد.
این دوره‌ی آموزشی، به نحوی تهیه شده است که مباحث آن برای تمام افراد قابل استفاده خواهد بود. بنابراین بدون نیاز به گذراندن هیچ آموزش دیگری، شما می‌توانید یادگیری طراحی سایت را از این دوره، آغاز کنید. لازم به ذکر است که مباحث آموزشی کاملاً ساده و شفاف بیان شده‌اند و جای هیچ‌گونه ابهامی را باقی نگذاشته‌ایم.
منابع زیادی برای آموزش رایگان طراحی سایت با html و سی اس اس وجود دارند. شما می‌توانید یادگیری این مفاهیم را با استفاده از کتاب‌های آموزشی و دیگر منابع آموزش html و css به صورت pdf دنبال کنید. شما می‌توانید از کتاب‌های جامع آموزش+ html+css+javascript رایگان استفاده کنید تا طراحی سایت را از پایه تا پیشرفته یاد بگیرید.
اگر قصد دارید تا مطالب مربوط به طراحی سایت را ساده‌تر، سریع‌تر و ساختاریافته‌تر یاد بگیرید، توصیه می‌کنیم تا در دوره‌های آموزشی شرکت کنید. اگر فرصت کافی برای این دوره‌ها را ندارید، دوره‌های ویدیویی و مجازی، راهگشا خواهد بود.
دوره‌های آموزشی آنلاین، شکل بهتری از یادگیری را ایجاد میکنند. شما هر زمان که انرژی و حوصله‌ی یادگیری را داشته باشید، می‌توانید به محتوای آموزشی دسترسی داشته و از آن استفاده کنید. به‌علاوه اینکه در برخی دوره‌ها، امکان ارتباط با مدرس و دیگر دانشجویان وجود دارد که نواقص آموزش مجازی را حذف می‌کند.
سرفصل‌ها و مباحثی که در این آموزش دنبال می‌شوند، در فهرست زیر آورده شده است. شما می‌توانید لیست سرفصل‌های منبع آموزشی انتخابی خود را با این عناوین تطبیق داده و از منابع کامل استفاده کنید.
• معرفی دوره‌ی آموزشی و اهداف
• آشنایی با html
• تگ‌های هدینگ در اچ تی ام ال (h1 تا h6)
• تگ پاراگراف (p)
• تگ نقل قول (q)
• تگ‌های استایل‌دهی متن (b و i و s)
• تگ‌های ins و del
• تگ‌های var-kbd-pre-code-samp
• تگ‌های sup و sub
• تگ‌های bbr و dfn
• تگ‌های bdo و bdi
• تگ address
• کاراکترهای ویژه
• آموزش سی اس اس
• معرفی ویژگی font در css
• قراردادن background
• ویژگی boxshadow
• متغیرها
• تابع attr
• ایجاد لینک در اچ تی ام ال با تگ a
• استایل‌دهی به تگ a در سی اس اس
• تگ img
• تگ map
• تگ picture
• قراردادن favicon در سایت
• تگ svg
• ویژگی transform در سی اس اس
• ویژگی filter در سی اس اس
• ایجاد لیست در اچ تی ام ال با تگ‌های ul، ol و dl
• استایل‌دهی به لیست‌ها در سی اس اس
• کار با لیست
• لیست‌های تودرتو
• ایجاد جدول با تگ table
• تگ‌های thead و tfoot و tbody
• صفت rowspan
• صفت colspan
• تگ‌های صدا audio
• تگ ویدیو video
• تگ object
• تگ embed
• تگ iframe
• کار با تگ‌های ورودی فرم
• صفت pattern
• ساخت دکمه در فرم با تگ button
• انواع ورودی‌های فرم (radio- checkbox- selector و غیره)
• تگ‌های ورودی از نوع فایل، رنگ و تصویر
• تگ‌های ورودی از نوع range
• بخش بندی صفحه با تگ div
• ویژگی boxsizing در سی اس اس
• واحدهای rem و em
• تابع clac در css
• تگ span
• معرفی و کار با ویژگی‌های کاربردی در سی اس اس
• مثالهای عملی
• انتخابگر در سی اس اس
• عناصر معنایی
• مقدمه‌ای بر جاوا اسکریپت
• مرور و جمع‌بندی مطالب آموزش داده شده
برای آموزش طراحی بخش کلاینت صفحات وب، می‌توانید از دوره‌های آموزشی اچ تی ام ال در مکتب خونه استفاده کنید. این دوره، با در نظر داشتن سرفصل‌های آموزشی کامل، شما را برای طراحی سایت از صفر تا صد آشنا خواهد کرد. آموزش‌های مکتب خونه کاملاً عملی بوده و شما با انجام تمارین متعدد و پروژه‌های مختلف، تسلط خوبی روی مباحث آموزشی دریافت می‌کنید.
آموزش اچ تی ام ال و سی اس اس به عنوان مباحث مقدماتی در طراحی سایت، اهمیت دارد. Html و css برای طراحی و پیاده‌سازی بخش کلاینت وب سایت مورد نیاز است. همچنین در مکتب خونه انواع دوره آموزش برنامه نویسی و آموزش طراحی سایت به عنوان مکمل و پیش‌نیازهای این دوره موجود است.
تگ‌های پایه:
1 – مقدمه‌ای کوتاه
2 – تگ‌های h1 تا h6
3 – ایجاد پاراگراف با تگ p
4 – نقل قول با تگ q و bloclqute
5 – تگ‌های b-strong-i-em-mark-small
6 – تگ‌های ins,del
7 – تگ‌های var-kbd-pre-code-samp
8 – تگ‌های sup,sub
9 – تک‌های bbr,dfn
10 – تگ‌های bdo,bdi
11 – تگ address
12 – کاراکترهای ویژه
مقدمه CSS:
1 – شروع کار با css
2 – معرفی ویژگی font
3 – قرار دادن background
4 – ویژگی boxshadow
5 – متغیرها
6 – تابع attr
لینک:
1 – ایجاد لینک با تگ a
2 – استایل دهی به تگ a(سی اس اس)
تصویر:
1 – تگ img
2 – تگ map
3 – تگ picture
4 – قرار دادن favicon در سایت
5 – تگ svg
6 – ویژگی transform (سی اس اس)
7 – ویژگی filter (سی اس اس)
لیست:
1 – ایجاد لیست با تگ‌های ul,ol,dl
2 – استایل دهی به لیست (سی اس اس)
3 – مثال برای کار با لیست
4 – لیست‌های تودرتو
جدول:
1 – تگ table
2 – تگ tbody, tfoot, thead
3 – صفت rowspan
4 – صفت colspan
صدا و ویدیو:
1 – تگ audio
2 – تگ video
3 – تگ object
4 – تگ embed
5 – تگ iframe
انواع ورودی – فرم:
1 – تگ input با نوع‌های text, number, email, password, tel, search, url
2 – صفت pattern
3 – ساخت دکمه (Button)
4 – تگ input با نوع date , time
5 – نگ ورودی با نوع checkbox, radio و تگ selector
6 – تگ input با نوع range – تگ‌های progress , meter
7 – تگ input با نوع‌های color, file, image
8 – فرم
تگ div و span:
1 – بخش‌بندی با تگ div
2 – مثال برای div
3 – ویژگی boxsizing (سی اس اس)
4 – واحدهای em , rem
5 – تابع clac در css
6 – تگ span
ویژگی‌های کاربردی CSS:
1 – ویژگی display
2 – ویژگی display با مقدار flex
3 – استفاده از order درflex
4 – ویژگی display با مقدار grid
5 – مثال
6 – مثال
7 – ویژگی position
8 – ویژگی position با مقدار absolute
9 – ویژگی inset
10 – مثال
11 – مثال
12 – ویژگی position با مقدار flex
13 – مثال
14 – ویژگی position با مقدار sticky
15 – مثال
16 – ویژگی zindex
17 – مثال zindex
سی اس اس (انتخاب‌گرها):
1 – انتخابگرهای اولیه
2 – انتخابگرهای and,or,not
3 – ترکیب کننده‌ها (combinators)
4 – مثال combinators
5 – مثال انتخابگر
6 – انتخابگر child
7 – انتخابگر nthchild
8 – سلکتورهای ویژگی (* ^ $ ~)
9 – مثال
10 – مثال
11 – شبه کلاس empty
12 – شبه عناصر before و after
13 – مثال
14 – مثال
15 – شبه عناصر firstline , firstletter, selection
16 – شبه عناصر (marker, placeholder)
عناصر معنایی (Semantic Elements) در HTML5:
1 – معرفی عناصر معنایی
2 – مثال
3 – تگ article
4 – مثال
5 – عنصر معنایی details
6 – مثال
7 – تگ figure
مثالهای کاربردی:
1 – فرم رزرو اتاق در هتل
2 – فرم ثبت سفارش غذا
3 – صفحه قدردانی از استیوجابز
4 – صفحه قدردانی از دکتر حسابی
5 – صفحه فروش محتوای آموزشی
6 – صفحه معرفی کتاب
7 – چهار دکمه
8 – دکمه‌های پلیر
9 – ایجاد دکمه شبیه ماه
10 – چک باکس مدرن
تمرین همراه با جواب:
1 – تمرین اول: ایجاد داکیومنت برای html
2 – کد HTML – تمرین اول
3 – کد CSS – تمرین اول
4 – تمرین دوم: صفحه معرفی نمونه کار
5 – کد HTML – تمرین دوم
6 – کد CSS – تمرین دوم
7 – تمرین سوم: اسکایپ
مقدمه‌ای بر جاوا اسکریپت – تگ canvas:
1 – برنامه محاسبه جمع دو عدد دریافتی از ورودی
2 – برنامه چک زوج یا فرد بودن عدد دریافتی
3 – برنامه ایجاد دکمه برای تغییر عرض تگ video
4 – برنامه ایجاد دکمه برای کنترل تگ progress
5 – تگ canvas
جمع‌بندی:
1 – مروری بر تگ‌های HTML
2 – پایان
