آموزش HTML و CSS از صفر تا صد + پروژه محور

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

برای طراحی یک سایت یا برنامه نویسی تحت وب از کجا شروع کنیم؟

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

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

اصلا فرقی نمی کند که شما می خواهید در چه زمینه‌ی از وب فعالیت کنید، در هر صورت باید به زبان‌های HTML و CSS آشنا باشید. بگذارید با یک مثال بهتر ضرورت این دو زبان را نشان دهم.

تصور کنید که می خواهید یک برج بیست طبقه را بسازید، اولین قدمی که برای اینکار بر می دارید طراحی یک نقشه شماتیک از اسکلت بندی ساختمان می باشد، بنابراین با استفاده از نرم افزارهای شبیه ساز، ابتدا یک ظاهر شبیه سازی شده از این برج را طراحی و به نمایش می گذارید. در دنیای وب این مرحله مانند طراحی وب سایت یا پروژه با نرم افزارهای شبیه ساز (مانند فتوشاپ یا adobe xd) می باشد. سپس می خواهید آنچه که در نرم افزارهای شبیه ساز ایجاد کرده اید را به صورت کامل ساخته و به نمایش بگذارید. برای اینکار مصالح را تهیه کرده و سپس شروع به ساخت اسکلت بندی برج می کنید. در دنیای وب این مرحله به صورت کدنویسی ستون و اسکلت بندی وب سایت یا نرم افزار به زبان HTML می باشد. در نهایت برای اینکه این برج از نظر ظاهری زیبا شود، به آن نما و سنگ‌های تزئینی اضافه می کنید. معادل این مرحله در دنیای وب، آموزش CSS و افزودن استایل (ظاهر) به وب سایت یا پروژه می باشد.

پس از ارائه مقدمه‌ی فوق، به معرفی مختصر زبان های HTML و CSS پرداخته و سپس سرفصل ها را برای شما عزیزان ارائه می دهیم.

HTML چیست؟

زبان HTML مخفف عبارت Hyper Text Markup Language می باشد که معادل فارسی آن «زبان نشانه‌گذاری فرامتنی» است. لطفا تحت هیچ شرایطی از معادل فارسی استفاده نکنید، زیرا در دنیای برنامه نویسی و طراحی، گاهی عبارت های انگلیسی مفهوم بهتری را انتقال می دهند.

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

CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets بوده که معادل فارسی آن «صفحات استایل آبشاری» است. این زبان توسط آقای Håkon Wium Lie در سال 1996 با هدف طراحی ظاهری یک صفحه وب ارائه شد.

اما چرا آبشاری؟ در ادامه این دوره آموزشی به شما نشان می دهیم که چگونه می توانید چندین استایل (مثلا رنگ) را به یک المان HTML اعمال کنید. اما نحوه ی اعمال شدن این استایل بسته به قرارگیری المان HTML در یک طرح سلسله مراتبی است.

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

مخاطب دوره آموزش HTML و CSS چه کسانی هستند؟

تمام افرادی که به دنبال ورود به دنیای وب هستند. همچنین این دوره برای افرادی که قصد دارند قالب های حرفه ای و پیشرفته را طراحی کنند، مناسب می باشد.

پیش نیازهای ورود به دوره آموزش HTML و CSS چیست؟

تنها پیش نیاز ورود به دوره آموزش HTML و CSS این است که بتوانید کامپیوتر یا لپ تاپ خود را روشن کنید!

پس از اتمام این دوره چه اتفاقی می افتد؟

• شما به صفر تا صد زبان‌ های HTML و CSS مسلط می شوید. (هیچ چیزی را از قلم نمی اندازیم)
• توانایی ساخت پروژه های تحت وب را بدست می آورید.
• مهم ترین گام برای ورود به دنیای برنامه نویسی تحت وب را پشت سر گذاشته اید.
• نیازی به مطالعه سایر کتاب‌ها و دوره‌های آموزشی نخواهید داشت.

نسخه های HTML5 و CSS3

HTML و CSS در سال های اخیر نسخه های جدیدی را ارائه کرده است که آخرین آن تحت عنوان HTML5 و CSS3 شناخته می شود. این نسخه ها قابلیت های بسیاری را به المان های وب اضافه کردند و به گونه ای باعث متحرک شدن، ارتقاء انیمیشن، افزایش امنیت و... المان‌ ها شدند.

در این دوره آموزشی، آخرین نسخه HTML‌ و CSS ارائه می شود.

سرفصل های دوره آموزش HTML و CSS

مقدمه، معرفی و کاربردها

• معرفی زبان HTML
• معرفی زبان CSS
• بررسی نحوه دسترسی کاربران به یک صفحه اینترنتی
• معرفی مفاهیم Client و Server
• مرورگر یا Browser چیست؟
• چگونه یک وب سایت ساخته می شود؟
• منظور از HTML5 و CSS3 چیست؟
• معرفی نرم افزار کدنویسی HTML و CSS

ساختار زبان HTML

• بررسی ساختار زبان HTML
• معرفی وظایف زبان HTML
• معرفی مفهوم تگ با برچسب ها
• معرفی تگ های <head> و <body> و <head> و <title>
• ساخت اولین صفحه اینترنتی با HTML

سئو و کاربردهای آن در HTML

• سئو (SEO) چیست؟
• ارتباط بین بهینه سازی یک صفحه با HTML

کار با متن (Text)

• ارائه مفهوم Heading یا سربرگ
• کار با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6>
• بررسی تگ پاراگراف یا <p>
• معرفی تگ های <b> و <i>
• نحوه افزودن خط جدید به متون با تگ های <br /> و <hr />
• کار با تگ های <strong> و <em>
• استفاده از تگ های نقل قول <blockquote> و <q>
• استفاده از تگ مخفف سازی <abbr>
• معرفی تگ‌ های <cite> و <dfn>
• استفاده از تگ آدرس <address>
• اعمال تغییرات روی متون با تگ های <ins> و <del> و <s>

لیست ها (Lists) در HTML

• معرفی لیست های مرتب با تگ های <ol> و <li>
• معرفی لیست های نامرتب با تگ های <ul> و <li>
• کار با تگ های لیستی <dl> و <dt> و <dd>
• طراحی لیست های سلسه مراتبی (آبشاری)

لینک ها (Links) در HTML

• ساختار لینک ها در زبان HTML
• تگ <a> و نحوه استفاده از آن
• معرفی attribute ها یا صفات
• نحوه لینک کردن یک عبارت به یک صفحه اینترنتی
• معرفی آدرس های مطلق و نسبی
• آموزش نحوه لینک کردن آدرس های ایمیل با عبارت mailto:
• معرفی صفت target در لینک ها
• آموزش نحوه لینک کردن یک قسمت از متن به قسمت دیگر آن
• آموزش نحوه لینک کردن یک قسمت از صفحه به صفحه دیگر در یک سایت

تصاویر (Images) در HTML

• معرفی مفهوم تصویر در دنیای وب
• نحوه استفاده از یک تصویر در یک صفحه اینترنتی
• معرفی تگ <img> و صفات src و alt و title در یک تصویر
• تنظیم ابعاد تصویر با استفاده از صفات height و weight
• آموزش ترازبندی تصاویر در HTML با استفاده از صفت align
• تعریف ابعاد تصاویر و نحوه استفاده صحیح آنها در وب
• بررسی انواع فرمت های تصویر و نحوه بکارگیری آنها در وب
• بررسی تگ جدید <figure> و <figcaption> در HTML5

جداول (Tables)

• جدول چیست؟
• بررسی تگ های تولید جدول <table> در HTML
• کار با تگ های <tr> و <td> و <th>
• معرفی تگ های <thead> و <tbody> و <tfoot>

فرم ها (Forms) در HTML

• فرم چیست؟
• چرا باید از فرم ها در HTML استفاده کنیم؟
• منظور از Form Control چیست؟
• فرم ها چگونه کار می کنند؟
• معرفی ساختار یک فرم
• تگ <form> و صفات action و method در فرم ها
• تگ <input> و صفات type=”text” و name و maxlength و size
• نحوه تعریف ورودی های رمز عبور در HTML
• تگ <textarea> و صفات row و col
• دکمه رادیویی (Radio Button) چیست؟
• تگ <input> و صفات type=”radio” (دکمه رادیویی) و value و checked
• چک باکس (Check Box) چیست؟
• تگ <input> و صفات type=”checkbox” (دکمه رادیویی) و value و checked
• ورودی انتخاب آبشاری یا Drop Down چیست؟
• تگ <select> و صفت nasme
• تگ <option> و صفات value و selected
• ورودی انتخاب آبشاری چند تایی یا Drop Down Multiple چیست؟
• تگ <select> و صفات size و multiple
• ورودی فایل (File Input) چیست و چه کاربردی دارد؟
• ورودی submit چیست؟
• ورودی image چیست؟
• تگ <button> چیست و چگونه می توان با استفاده از آن یک دکمه ایجاد کرد؟
• صفت hidden چیست و چه کاربردی دارد؟
• برچسب ها چه کاربردی در فرم ها دارند؟
• کار با تگ <label> و صفت for
• گروه بندی المان های یک فرم با استفاده از تگ های <fieldset> و <legend>
• اعتبارسنجی فرم ها با ویژگی جدید در HTML5
• ورودی جدید تاریخ یا date در HTML5
• بررسی ورودی های جدید Email و URL در HTML5
• کار با ورودی جدید search در HTML5 به همراه صفت placeholder

حرفه ای تر با HTML کار کنیم!

• معرفی مفهوم DOCTYPE در HTML
• آموزش کامنت کردن (Comment) یا از کار انداختن یک قسمت از کدها در HTML
• معرفی صفت id در المان های HTML
• معرفی صفت class در المان های HTML
• آموزش شیوه کدنویسی بین المللی و استاندارد
• بلوک (Block) چیست و چگونه آن را می توان تعریف کرد؟
• معرفی مفهوم <div> در HTML
• شرح تگ <span>
• بررسی تگ <iframe> و صفات scrolling و frameborder و seamless در HTML
• بررسی تگ <meta> و تاثیر آن بر بهینه سازی وب سایت
• بررسی صفات description و keywords و robots در تگ <meta>
• معرفی معادل های علائم کلیدی در HTML

رسانه‌ها (شامل ویدیو و صدا) در HTML

• یادگیری انواع فرمت های ویدیویی در وب
• معرفی هاست های ارائه دهنده اشتراک ویدیو
• معرفی کدهای Embed
• بررسی تگ جدید <video> در HTML5
• کار با صفات src و poster و width, height و controls و autoplay و preload و none و loop و auto و metadata در تگ <video>
• معرفی انواع فرمت های صدا در وب
• آموزش افزودن یک پلیر صدا در وب
• معرفی تگ جدید <audio> در HTML5
• کار با صفات src و controls و autoplay و preload و loop در تگ <audio>
• بررسی تگ <source> و صفات type و src در صدا

معرفی زبان CSS

• سی اس اس (CSS) چیست و چه کاربردی دارد؟
• تعریف و تشریح ساختار یک کد CSS
• معرفی مفهوم Property و value در CSS
• تفاوت بین CSS داخلی و CSS خارجی
• لینک کردن یک فایل CSS خارجی به یک صفحه اینترنتی
• معرفی تگ <link> و صفات href و type و rel
• کار با تگ <style> جهت استایل دادن به یک صفحه وب
• بررسی مفهوم Selector یا گزینشگر در CSS
• آشنایی با مفهوم Cascading و اولویت بندی کدهای CSS
• معرفی مفهوم وراثت یا Inheritance
• ارائه بهترین راهکار برای پیاده سازی یک فایل CSS بهینه

رنگ (Color) در CSS

• آشنایی با انواع فرمت رنگ ها در وب
• معرفی ویژگی background-color
• معرفی مفهوم جدید opacity و rgba در CSS3
• ویژگی جدید hsl و hsla در CSS3

متن (Text) در CSS

• بررسی ساختار یک متن از نگاه زبان CSS
• ویژگی font-family
• ویژگی font-size و معرفی واحدهای pixels و percentages و ems
• آموزش افزودن فونت دلخواه به صفحه HTML با استفاده از CSS
• ویژگی @font-face و صفات src و format
• معرفی انواع فرمت های فونت و نحوه پشتیبانی مرورگرها از آنها
• ویژگی font-weight و مقادیر normal و bold
• ویژگی font-style و مقادیر normal و italic و oblique
• ویژگی text-transform و مقادیر uppercase و lowercase و capitalize
• ویژگی text-decoration و مقادیر none و underline و overline و line-through و blink
• تنظیم فاصله بین متون با ویژگی line-height
• تنظیم فاصله بین حروف و کلمات با ویژگی letter-spacing و word-spacing
• ترازبندی متون با ویژگی text-align و معرفی مقادیر right و left و center و justify
• ترازبندی عمودی با ویژگی vertical-align و معرفی مقادیر baseline‌ و sub, super, top, text-top, middle, bottom و text-bottom
• ویژگی text-indent
• ویژگی جدید text-shadow در CSS3
• بررسی ویژگی های :first-letter و :first-line
• کار با ویژگی های استایل دهی لینک ها به نام :link و :visited
• کار با ویژگی های تعاملی کاربران مانند :hove و :active و :focus
• بررسی انواع صفات گزینشگر یا Attribute Selectors

باکس ها (Boxes) در CSS

• نحوه تعریف یک مستطیل یا باکس در HTML با استفاده از CSS
• معرفی ویژگی های width و height در CSS
• ویژگی های max-width و min-width
• ویژگی های min-width و max-width
• بررسی ویژگی overflow و مقادیر hidden و scroll
• تفاوت بین border و margin و padding
• ویژگی border-width و border-style و border-color و border
• ویژگی padding و margin
• نمایش یا پنهان کردن یک باکس در CSS با ویژگی display
• ویژگی visibility و مقادیر hidden و visible
• ویژگی جدید border-image در CSS3
• سایه دادن به باکس ها با ویژگی جدید box-shadow در CSS3
• گرد کردن گوشه های یک باکس با ویژگی جدید border-radius در CSS3

لیست ها (Lists)، جداول (Tables) و فرم ها (Forms) در CSS

• ویژگی list-style-type و مقادیر none و disc و circle و square و custom
• ویژگی list-style-image
• ویژگی list-style-position با مقادیر outside و inside
• ویژگی list-style
• بررسی حاشیه ها در جداول با ویژگی empty-cells
• کار با فضاهای خالی جداول با ویژگی های border-spacing و border-collapse
• آموزش استایل دادن به فرم ها و دکمه ها
• معرفی ویژگی cursor جهت نمایش نشانگر موس

لایه ها (Layouts) و صفحات در CSS

• معرفی موقعیت المان ها در CSS
• ویژگی position و مقادیر static و relative و absolute و fixed
• اولویت بندی نمایش المان ها با ویژگی z-index
• بررسی ویژگی float و مقادیر right و left و none
• معرفی ویژگی clear و مقادیر left و right و both و none
• بررسی سایز صفحات نمایش و رزولوشن آنها
• بهینه سازی یک صفحه وب بر اساس سایز صفحه نمایش آن
• معرفی Grid ها و نحوه طراحی اصولی یک صفحه
• آشنایی با مفهوم فریم ورک
• بررسی و معرفی محبوب ترین فریم ورک های CSS
• استفاده از دستور @import جهت بکارگیری فایل های CSS درون یکدیگر

تصاویر (Images) در CSS

• بررسی ویژگی background-image
• تنظیم تکرار یک تصویر در پس زمینه با دستور background-repeat و background-attachment
• تنظیم موقعیت یک تصویر با ویژگی background-position
• خلاصه نویسی خصیصه پس زمینه با دستور background
• معرفی ویژگی جدید گرادیانت در CSS3

ساختار جدید HTML5

• بررسی تگ های جدید <footer> و <header> در HTML5
• ایجاد منوهای ناوبری با تگ <nav>
• معرفی تگ جدید <article>
• ارائه تگ جدید <aside>
• کار با تگ های جدید <section> و <hgroup>
• درج تصاویر به کمک تگ های جدید <figure> و <figcaption>

پروژه ها

ساخت وب سایت گوگل 

• تحلیل صفحه اصلی وب سایت گوگل
• کدنویسی قسمت مرکز و فرم جستجوی گوگل
• درج آیکن های موجود در منوها
• راست چین کردن قالب

ساخت فروشگاه اینترنتی

• نمایش فایل PSD فروشگاه و تحلیل تمام قسمت های قالب
• طراحی هدر (Header) سایت
• درج لوگو و منوهای فروشگاه
• کدنویسی سبد خرید و بخش ورود و عضویت فروشگاه
• طراحی اسلاید شو محصولات
• پیاده سازی بخش تخفیف های ویژه
• طراحی و کدنویسی لیست محصولات
• پیاده سازی بخش محصولات ویژه
• قرار دادن آیکون های View و علاقه مندی ها
• درج آیکون و دکمه افزودن به سبد خرید
• طراحی بخش جدیدترین محصولات
• طراحی بخش مشاهده محصولات و بنر تبلیغاتی در وسط فروشگاه
• پیاده سازی بخش اخبار و وبلاگ
• طراحی فوتر و قسمت کپی رایت انتهایی سایت