آموزش HTML و CSS برای مبتدیان – اولین قدم در برنامه‌نویسی - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

نصب ابزارها Installing Tools

• دانلود و نصب Visual Studio Code Download and Installing Visual Studio Code

• تنظیم اولین پروژه Setting Your First Project

مبانی HTML HTML Basics

• HTML چیست؟ تگ چیست؟ What Is HTML? What Is Tag?

• مستند HTML پایه Basic HTML Document

• تگ‌های تو در تو و بسته‌بندی سریع متن با استفاده از EMMET Nested Tags and Fast Wrapping Existing Text with Tags Using EMMET

• ایجاد پاراگراف p | فضای خالی (Whitespace) چیست؟ Creating Paragraphs p | What Are Whitespaces?

• تگ‌های خالی (Void Tag) و شکست خط br Void Tag and Breaking the Line br

• ویژگی‌ها (Attributes) چیست؟ [title] و [lang] What Are Attributes? [title] and [lang]

• تگ خنثی span Neutral Tag span

• نصب افزونه‌ها در VSC: AutoRenameTag Installing Extensions in VSC: AutoRenameTag

• تغییر پس‌زمینه بدون استفاده از مولد رنگ Change Background Without Color Generator

• ابزارهای فوق‌العاده انتخاب رنگ برای وب‌سایت شما! Awesome Color Selection Tools for Your Website!

• افزودن تصویر به سایت با استفاده از img Adding Image to Your Site img

• بونوس: از کجا تصاویر رایگان برای سایت خود تهیه کنیم؟ Bonus: Where to Get Free Pictures on Your Site?

• استخراج اندازه img با استفاده از میانبر VSC Getting img Size Using VSC Shortcut

• چگونه به پوشه‌های مختلف لینک دهیم؟ آموزش تئوری مسیر (PATH) How to Link to Different Folders? Creating PATH Theory

HTML | بهبود مستندات و جریان کاری HTML | Improving Document and Workflow

• مشاهده کد منبع هر سایت. کامنت‌ها چیستند؟ Viewing the Source Code of Any Site. What Are Comments?

• متا تگ‌ها (Meta Tags) Meta Tags

• Charset | کدگذاری صحیح در سایت شما Charset - Proper Encoding on Your Site

• HTML Doctype HTML Doctype

• افزونه Live Server و قابلیت ذخیره خودکار کد Live Server and Auto-Saving Code Feature

• موجودیت‌ها (Entities) و اعتبار سنجی HTML Entities and HTML Validation

• نام‌گذاری صحیح فایل‌ها؛ چرا صفحه اصلی index.html نامیده می‌شود؟ How to Properly Name Your Files? Why Is the Main Page Called index.html?

• افزونه: آیکون‌های جذاب در VSC Extension: Sweet Icons in Your VSC

HTML | لیست کردن موارد HTML | Listing Things

• تفاوت ol و ul ol Versus ul

• ترفندهای سریع Emmet برای استفاده در لیست‌ها Fast Tricks with Emmet to Use with Lists

• dl | لیست تعاریف dl - Definition List

• EMMET: ایجاد عناصر هم‌سطح و مدیریت دو عنصر به عنوان یک واحد EMMET: Creating Siblings and Treating Two Elements as One

HTML | لینک‌ها HTML | Links

• ایجاد لینک‌های داخلی Creating Internal Links

• لینک‌های خارجی | ویژگی _blank External Links | _blank

• برچسب‌های # #labels

• چگونه لینک ایمیل ایجاد کنیم؟ How to Create a Link to Email?

• لینک تماس تلفنی Telephone Link

HTML | قالب‌بندی متن HTML | Text Formatting

• هدرها | h1 تا h6 Headers - h1 to h6

• تفاوت cite و blockquote و q | چگونه از دیگران نقل قول کنیم cite Versus blockquote Versus q - How to Cite Others

• abbr | dfn abbr | dfn

• تگ‌های معنایی strong، em و mark در مقابل b، i، u، s Semantic Tags strong, em and mark vs b, i, u, s

• تفاوت sub و sup sub Versus sup

• متن‌های پیش‌فرض شده، تگ‌های pre، code، var Preformatted Text, Tags: pre, code, var

• چند نشانگر (Multicursor) | جستجو و جایگزینی متن در VSC Multicursor | Searching and Replacing Text in VSC

فرم‌ها | مبانی Forms | Basics

• فرم و Input چیست؟ ساخت یک فرم ساده شامل نام کاربری و رمز عبور What Is Form and Input? How to Create a Basic Form with Login and Password

• چگونه فرم را به درستی ارسال کنیم و برای ورودی‌ها نام‌گذاری کنیم How to Properly Submit Form and Name Its Inputs

• دکمه‌های رادیویی (Radio)، برچسب‌های فرم و Legend Radio and Form Labels and Legend

• چک‌باکس‌ها (Checkboxes) Checkboxes

• پرکاربردترین ویژگی‌های فرم Most Frequently Used Form Attributes

• تمرین: چگونه یک فرم تماس در سایت خود بسازیم؟ Exercise: How to Create a Contact Form on Your Site?

• گرفتن تاریخ و زمان از کاربر Getting Date and Time from the User

جدول‌ها Tables

• مبانی ساخت جداول Basics of Creating Tables

• چگونه سلول‌ها را با استفاده از rowspan و colspan گسترش دهیم؟ How to Stretch Cells Using rowspan and colspan?

CSS | مبانی CSS | Basics

• CSS چیست؟ What Is CSS?

• قرارگیری CSS و اولویت CSS (Cascade) CSS Placement and CSS Priority (Cascade)

• تفاوت Class و ID Class Versus ID

• افزونه‌های مفید CSS Useful CSS Extensions

CSS | قالب‌بندی CSS | Formatting

• تفاوت div و span | گروه‌بندی عناصر بیشتر div Versus span - Grouping More Elements

• Display: Block/Inline/Inline Block Display: Block/Inline/Inline Block

• EMMET | ترفندهای ایجاد تگ با ID و Class EMMET | Tricks Creating Tags with ID and Class

• تمرین انتخابگرها (Selector) Selector Rehearsal

• قوانین انتخاب تگ‌ها | درس مهم برای جلوگیری از مشکلات در CSS Rules of Selecting Tags - Important Lecture to Avoid Problems in CSS

• حاشیه (Border) Border

• گوشه‌های گرد | Border Radius Rounded Corners - Border-Radius

• جداول و فاصله داخلی (Padding) Tables and Padding

• چگونه منوی افقی بسازیم؟ حالت‌های لینک: link، visited، hover، active How to Create Horizontal Menu? States of Links: link, visited, hover, active

• تغییر آیکون‌های پیش‌فرض لیست | انتخابگر ::before Changing Default List Icons | :: before Selector

• چگونه عناصر را شفاف کنیم؟ مقایسه Opacity و rgba How to Make Elements Transparent? Opacity Versus rgba

• تغییر نشانگر موس | ایجاد جعبه راهنما (Hint Box) Changing Cursor | Creating Hint Box

• انتخابگر ویژگی (Attribute Selector) | ویژگی‌های سفارشی در HTML Attribute Selector | Custom Named Attributes In HTML

CSS | متن CSS | Text

• قالب‌بندی و تزئین متن Text Formatting and Decoration

• تورفتگی پاراگراف و انتخابگر ::first-letter Paragraph Indentation and ::first-letter Selector

• واحدهای CSS: مقایسه em، px و % CSS Units: em Versus px Versus %

• ارتفاع خط | فاصله حروف | فاصله کلمات Line-Height | Letter-Spacing | Word-Spacing

• کار با فونت‌ها Playing with Fonts

• فونت‌های سفارشی از وب | Google Fonts Custom Fonts from Web - Google Fonts

پس‌زمینه CSS CSS Background

• تغییر پس‌زمینه وب‌سایت: تنظیم تصویر یا الگو Changing Background of Your Website: Set It to Image or Pattern

قرارگیری عناصر در CSS CSS Element Placement

• مدل جعبه (Box Model): تفاوت‌های Margin، Padding، Border و Content، و وسط‌چین کردن عناصر Box Model - Margin, Padding, Border, Content Differences, Centering Elements

• قرار دادن عناصر داخل یک کانتینر | محاسبه صحیح عرض Fitting Elements Inside a Container - Properly Counting Width

• تابع calc() | خودکارسازی محاسبات در سایت calc() - Automate the Calculations on Your Site

• ویژگی‌های سفارشی (Variables) Custom Properties (Variables)

• Box Sizing | راه حلی برای محاسبه سریع‌تر عرض Box-Sizing - A Solution for Counting Width Faster

• موقعیت‌دهی عناصر | Static در مقابل Relative در مقابل Absolute در مقابل Fixed Positioning of Elements - Static Versus Relative Versus Absolute Versus Fixed

• Relative و Absolute: مثال عملی Relative and Absolute: Practical Example

• کانتینر داخل کانتینر دیگر | ساخت یک قالب برای وب‌سایت Container Inside Another Container - Let's Make a Template for Website

• تمرین: ساخت دکمه‌ای که کاربر را به بالای سایت منتقل می‌کند Exercise: Create a Button That Moves the User to the Top of Website

• Float و Clear: چرخاندن متن در اطراف تصویر Float and Clear: Floating Text Around the Image

• چگونه یک عنصر مثل منو را در یک نقطه ثابت نگه داریم؟ How to Stick Element Like Menu in One Place?

• تمرین: ایجاد منوی کشویی (سطح دوم) برای منوی اصلی Exercise: Create Drop Down Menu (Second Level) for Your Main Menu

• z-index | تعیین ترتیب قرارگیری عناصر روی هم z-index - Setting the Order of Overlapping Elements

• تمرین: ساخت باکس اطلاع‌رسانی درباره کوکی‌ها در پایین صفحه Exercise: Create Box Informing about Cookie Usage at the Bottom of Page

• چگونه با محتوایی که از کادر بیرون می‌زند (Overflow) برخورد کنیم؟ How to React to Trolls That 'Overflow' Your Content?

• تراز کردن آیکون‌های SVG با متن با استفاده از display: flex; Aligning SVG Icons with Text Using display: flex;

• وسط‌چین کردن عمودی و افقی عنصر | جعبه مودال (Modal) Centering Element Vertically and Horizontally - Modal Box

HTML HTML

• تگ‌های معنایی: article، aside، section، nav، main، header Semantic Tags: article, aside, section, nav, main, header

CSS 3 Grid CSS 3 Grid

• قالب Grid، ردیف و ستون، شکاف‌ها (Gaps) و گسترش خودکار Grid Template, Row and Column, Gaps, and Auto Expanding

• Grid Areas | نام‌گذاری نواحی برای گرید خود Grid Areas - Name Areas for Your Grid

• تمرین: تغییر جایگاه نوار ناوبری (nav) با استفاده از Grid Area و کوئری‌های @media Exercise: Change the Place of 'nav' Bar Using Grid Area and @media Queries