سربرگ
سربرگ

سربرگ‌ها بخشی بسیار مهم از ساختاردهی و ترتیب بندی محتوا در برنامه‌های شما هستند. آن‌ها سلسله مراتب را فراهم می‌کنند و به کاربران در ناوبری و درک اطلاعات ارائه شده کمک می‌کنند. این بخش نحوه استفاده موثر از سربرگ‌ها در پروژه شما را پوشش می‌دهد.

کد / پیش‌نمایش نمونه

h1. سربرگ 1

h2. سربرگ 2

h3. سربرگ 3

h4. سربرگ 4

h5. سربرگ 5
h6. سربرگ 6

h1. سربرگ 1

h2. سربرگ 2

h3. سربرگ 3

h4. سربرگ 4

h5. سربرگ 5
h6. سربرگ 6 
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTagh1 class="text-4xl font-medium leading-none"HTMLCloseTagh1. سربرگ 1HTMLOpenTag/h1HTMLCloseTag
                                                    HTMLOpenTagh2 class="mt-3 text-3xl font-medium leading-none"HTMLCloseTag
                                                        h2. سربرگ 2
                                                    HTMLOpenTag/h2HTMLCloseTag
                                                    HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none"HTMLCloseTag
                                                        h3. سربرگ 3
                                                    HTMLOpenTag/h3HTMLCloseTag
                                                    HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none"HTMLCloseTag
                                                        h4. سربرگ 4
                                                    HTMLOpenTag/h4HTMLCloseTag
                                                    HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none"HTMLCloseTag
                                                        h5. سربرگ 5
                                                    HTMLOpenTag/h5HTMLCloseTag
                                                    HTMLOpenTagh6 class="mt-3 font-medium leading-none"HTMLCloseTagh6. سربرگ 6HTMLOpenTag/h6HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                                    HTMLOpenTagh1 class="text-4xl font-medium leading-none text-primary"HTMLCloseTag
                                                        h1. سربرگ 1
                                                    HTMLOpenTag/h1HTMLCloseTag
                                                    HTMLOpenTagh2
                                                        class="mt-3 text-3xl font-medium leading-none text-slate-600 dark:text-slate-500"HTMLCloseTag
                                                        h2. سربرگ 2
                                                    HTMLOpenTag/h2HTMLCloseTag
                                                    HTMLOpenTagh3 class="mt-3 text-2xl font-medium leading-none text-success"HTMLCloseTag
                                                        h3. سربرگ 3
                                                    HTMLOpenTag/h3HTMLCloseTag
                                                    HTMLOpenTagh4 class="mt-3 text-xl font-medium leading-none text-warning"HTMLCloseTag
                                                        h4. سربرگ 4
                                                    HTMLOpenTag/h4HTMLCloseTag
                                                    HTMLOpenTagh5 class="mt-3 text-lg font-medium leading-none text-danger"HTMLCloseTag
                                                        h5. سربرگ 5
                                                    HTMLOpenTag/h5HTMLCloseTag
                                                    HTMLOpenTagh6 class="mt-3 font-medium leading-none text-slate-500"HTMLCloseTag
                                                        h6. سربرگ 6
                                                    HTMLOpenTag/h6HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

تنظیمات متن

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

کد / پیش‌نمایش نمونه
متن نمونه
متن متوسط نمونه
متن نیمه‌جسور نمونه
متن پردازش شده نمونه
متن بلند شده نمونه
متن بزرگ نویسی نمونه
متن کوچک نویسی نمونه
متن بزرگ شده نویسی نمونه
متن دستنویس نمونه 
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTagdiv class="font-normal"HTMLCloseTagمتن نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="font-medium"HTMLCloseTagمتن متوسط نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="font-semibold"HTMLCloseTagمتن نیمه‌جسور نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="font-bold"HTMLCloseTagمتن پردازش شده نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="font-extrabold"HTMLCloseTagمتن بلند شده نمونهHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                                    HTMLOpenTagdiv class="uppercase"HTMLCloseTagمتن بزرگ نویسی نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="lowercase"HTMLCloseTagمتن کوچک نویسی نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="capitalize"HTMLCloseTagمتن بزرگ شده نویسی نمونهHTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv class="normal-case"HTMLCloseTagمتن دستنویس نمونهHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

عناصر مشترک

عناصر HTML مشترک اغلب برای استایل یا انتقال معانی ویژه درون محتوای شما استفاده می‌شوند. این بخش به بررسی برخی از عناصر HTML مشترک می‌پردازد که برای بهبود ارائه محتوای متنی شما مورد استفاده قرار می‌گیرند.

کد / پیش‌نمایش نمونه
می‌توانید برچسب mark را برای هایلایت کردن متن استفاده کنید. به عنوان مثال، این یک متن هایلایت است.
این خط متن به عنوان متن حذف شده تلقی می‌شود. این خط متن به عنوان نه دقیق نیست تلقی می‌شود. این خط متن به عنوان یک شده است تلقی می‌شود. این خط متن به صورت مورد زیرخط قرار خواهد گرفت. این خط متن به عنوان چاپ کیفی در نظر گرفته شده تلقی می‌شود. این خط به عنوان متنی که بصورت پررنگ نمایش داده شده این خط به عنوان متنی که به صورت کج نمایش داده شده 
            
                HTMLOpenTagdivHTMLCloseTag
                                                    می‌توانید برچسب mark را برای
                                                    HTMLOpenTagmark class="bg-yellow-200 p-1"HTMLCloseTaghighlightHTMLOpenTag/markHTMLCloseTag text.
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdel class="mt-1 block"HTMLCloseTagاین خط متن به عنوان deleted
                                                    text.HTMLOpenTag/delHTMLCloseTag
                                                HTMLOpenTags class="mt-1 block"HTMLCloseTagاین خط متن به عنوان no longer
                                                    accurate.HTMLOpenTag/sHTMLCloseTag
                                                HTMLOpenTagins class="mt-1 block"HTMLCloseTagاین خط متن به عنوان an
                                                    افزودنی به
                                                    document.HTMLOpenTag/insHTMLCloseTag
                                                HTMLOpenTagu class="mt-1 block"HTMLCloseTagاین خط متن به صورت مورد زیرخط قرار خواهد گرفت.HTMLOpenTag/uHTMLCloseTag
                                                HTMLOpenTagsmall class="mt-1 block"HTMLCloseTagاین خط متن به عنوان fine
                                                    چاپ کیفی در نظر گرفته شده تلقی می‌شود.HTMLOpenTag/smallHTMLCloseTag
                                                HTMLOpenTagstrong class="mt-1 block"HTMLCloseTagاین خط به عنوان متنی که بصورت پررنگ نمایش داده شدهHTMLOpenTag/strongHTMLCloseTag
                                                HTMLOpenTagem class="mt-1 block"HTMLCloseTagاین خط به عنوان متنی که به صورت کج نمایش داده شدهHTMLOpenTag/emHTMLCloseTag

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

نشان‌ها

نشان‌ها کامپوننت‌های کوچک و اطلاعاتی هستند که برای نمایش وضعیت، اطلاع‌رسانی‌ها و سایر موارد به‌صورت بصری و متادیتای در یک روش مختصر استفاده می‌شوند. این بخش درباره نحوه‌ی استفاده موثر از نشان‌ها در وب برنامه‌ها شماست.

کد / پیش‌نمایش نمونه
نشانه پایه
1 2 3 4 5 6
اندازه‌های نشانه
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
نشانه مربعی
1 2 3 4 5 6
نشانه حاشیه
1 2 3 4 5 
            
                HTMLOpenTagdiv class="font-medium"HTMLCloseTagنشانه پایهHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagاندازه‌های نشانهHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-primary px-2 py-1 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border px-2 py-1 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-success px-2 py-1 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-warning px-2 py-1 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 rounded-full bg-danger px-2 py-1 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-slate-100 px-2 py-1 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-primary px-3 py-2 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-success px-3 py-2 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-warning px-3 py-2 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 rounded-full bg-danger px-3 py-2 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-slate-100 px-3 py-2 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-6"HTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-primary px-4 py-3 text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border px-4 py-3 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-success px-4 py-3 text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-warning px-4 py-3 text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 rounded-full bg-danger px-4 py-3 text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full bg-slate-100 px-4 py-3 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-10 font-medium"HTMLCloseTagنشانه مربعیHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-2"HTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 bg-primary px-1 text-xs text-white"HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 bg-success px-1 text-xs text-white"HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 bg-warning px-1 text-xs text-white"HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan class="rtl:ml-1 ltr:mr-1 bg-danger px-1 text-xs text-white"HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300"
                                                    HTMLCloseTag6HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-6 font-medium"HTMLCloseTagنشانه حاشیهHTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-4"HTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border border-primary px-3 py-2 text-primary dark:border-primary"
                                                    HTMLCloseTag1HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300"
                                                    HTMLCloseTag2HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border border-success px-3 py-2 text-success dark:border-success"
                                                    HTMLCloseTag3HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border border-warning px-3 py-2 text-warning dark:border-warning"
                                                    HTMLCloseTag4HTMLOpenTag/spanHTMLCloseTag
                                                    HTMLOpenTagspan
                                                        class="rtl:ml-1 ltr:mr-1 rounded-full border border-danger px-3 py-2 text-danger dark:border-danger"
                                                    HTMLCloseTag5HTMLOpenTag/spanHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

جدا کننده

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

کد / پیش‌نمایش نمونه
            
                HTMLOpenTagdiv
                                                    class="w-full border-t border-dashed border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv
                                                    class="mt-5 w-full border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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

تقسیم کننده

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

کد / پیش‌نمایش نمونه
یا 
            
                HTMLOpenTagdiv
                                                    class="mt-2 flex w-full justify-center border-t border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                                    HTMLOpenTagdiv class="-mt-3 bg-white px-5 text-slate-500 dark:bg-darkmode-600"HTMLCloseTag
                                                        یا
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

تقسیم‌کننده‌ها برای حفظ یک ساختار خوب در برنامه‌های وب شما استفاده می‌شوند. آن‌ها به ایجاد یک سلسله مراتب بصری روشن و بهبود کلی تجربه کاربر کمک می‌کنند، با ارائه احساس سازمان و جدایی بین بخش‌های محتوا.

پیوندها

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

کد / پیش‌نمایش نمونه
حالت اصلی حالت ثانویه وضعیت موفقیت حالت هشدار حالت خطر 
            
                HTMLOpenTagdivHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block font-normal text-primary"
                                                        href=""
                                                    HTMLCloseTagمتن نمونهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block font-medium text-primary"
                                                        href=""
                                                    HTMLCloseTagمتن متوسط نمونهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block font-semibold text-primary"
                                                        href=""
                                                    HTMLCloseTagمتن نیمه‌جسور نمونهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block font-bold text-primary"
                                                        href=""
                                                    HTMLCloseTagمتن پردازش شده نمونهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block font-extrabold text-primary"
                                                        href=""
                                                    HTMLCloseTagمتن بلند شده نمونهHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTagdiv class="mt-5"HTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block text-primary"
                                                        href=""
                                                    HTMLCloseTagحالت اصلیHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block text-slate-600 dark:text-slate-500"
                                                        href=""
                                                    HTMLCloseTagحالت ثانویهHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block text-success"
                                                        href=""
                                                    HTMLCloseTagوضعیت موفقیتHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block text-warning"
                                                        href=""
                                                    HTMLCloseTagحالت هشدارHTMLOpenTag/aHTMLCloseTag
                                                    HTMLOpenTaga
                                                        class="block text-danger"
                                                        href=""
                                                    HTMLCloseTagحالت خطرHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag

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